style: 终端页面样式调整标注释

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>