From 49c98697e100bfe90fa27142f5f98c83d07c27ab Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 29 Feb 2024 20:56:16 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=88=E7=AB=AF=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=E6=A0=87=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tool/terminal/index.vue | 63 ++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/views/tool/terminal/index.vue b/src/views/tool/terminal/index.vue
index e5769c19..f9995983 100644
--- a/src/views/tool/terminal/index.vue
+++ b/src/views/tool/terminal/index.vue
@@ -27,6 +27,7 @@ type HostStateType = {
   total: number;
   data: Record<string, any>[];
 };
+
 /**主机对象信息状态 */
 const hostState: HostStateType = reactive({
   show: false,
@@ -248,7 +249,8 @@ function fnTabClose(id: string) {
             />
           </template>
 
-          <div style="height: 650px">
+          <div class="pane-box">
+            <!-- 非开始页的ssh主机 -->
             <TerminalSSH
               v-if="pane.id !== '0' && pane.host.hostType === 'ssh'"
               :id="pane.id"
@@ -258,6 +260,7 @@ function fnTabClose(id: string) {
             >
             </TerminalSSH>
 
+            <!-- 非开始页的telnet主机 -->
             <TerminalTelnet
               v-if="pane.id !== '0' && pane.host.hostType === 'telnet'"
               :id="pane.id"
@@ -268,23 +271,35 @@ function fnTabClose(id: string) {
             >
             </TerminalTelnet>
 
+            <!-- 开始页 -->
             <div v-if="pane.id === '0'">
+              <!-- 提示选择主机 -->
+              <a-result
+                :title="t('views.tool.terminal.hostSelectTitle')"
+                v-show="tabState.activeKey === '0' && !hostState.show"
+              >
+                <template #extra>
+                  <a-button
+                    key="hostState"
+                    type="primary"
+                    @click="fnSelectHost()"
+                  >
+                    {{ t('views.tool.terminal.hostSelectShow') }}
+                  </a-button>
+                </template>
+              </a-result>
+
+              <!-- 主机列表 -->
               <a-list
                 v-show="tabState.activeKey === '0' && hostState.show"
                 :header="t('views.tool.terminal.hostSelectHeader')"
-                :grid="{ gutter: 16, column: 4 }"
+                :grid="{ gutter: 16, column: 4, lg: 4, md: 2, xs: 1 }"
                 :data-source="hostState.data"
-                style="height: 650px; overflow-x: hidden"
+                row-key="hostId"
               >
+                <!-- 插槽-加载更多 -->
                 <template #loadMore>
-                  <div
-                    :style="{
-                      textAlign: 'center',
-                      marginTop: '12px',
-                      height: '32px',
-                      lineHeight: '32px',
-                    }"
-                  >
+                  <div style="text-align: center">
                     <a-button
                       @click="fnGetHostList()"
                       :loading="hostState.loading"
@@ -297,6 +312,7 @@ function fnTabClose(id: string) {
                     </a-button>
                   </div>
                 </template>
+                <!-- 插槽-渲染项 -->
                 <template #renderItem="{ item }">
                   <a-list-item>
                     <a-card size="small" :title="item.title">
@@ -316,20 +332,6 @@ function fnTabClose(id: string) {
                   </a-list-item>
                 </template>
               </a-list>
-              <a-result
-                :title="t('views.tool.terminal.hostSelectTitle')"
-                v-show="tabState.activeKey === '0' && !hostState.show"
-              >
-                <template #extra>
-                  <a-button
-                    key="hostState"
-                    type="primary"
-                    @click="fnSelectHost()"
-                  >
-                    {{ t('views.tool.terminal.hostSelectShow') }}
-                  </a-button>
-                </template>
-              </a-result>
             </div>
           </div>
         </a-tab-pane>
@@ -344,6 +346,7 @@ function fnTabClose(id: string) {
                 <template #icon><PlusOutlined /></template>
               </a-button>
             </a-tooltip>
+            <!-- 非开始页的更多操作 -->
             <div v-show="tabState.activeKey !== '0'">
               <a-tooltip placement="topRight">
                 <template #title>
@@ -354,7 +357,7 @@ function fnTabClose(id: string) {
                   placement="bottomRight"
                 >
                   <a-button type="ghost" shape="circle">
-                    <template #icon><DashOutlined /></template>
+                    <template #icon><EllipsisOutlined /></template>
                   </a-button>
                   <template #overlay>
                     <a-menu @click="({ key }:any) => fnTabMenu(key)">
@@ -382,4 +385,10 @@ function fnTabClose(id: string) {
   </PageContainer>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.pane-box {
+  padding: 16px;
+  height: calc(100vh - 320px);
+  overflow-x: hidden;
+}
+</style>