💄 连接日志表格样式更新.

orion-ops-ui/src/components/app/footer/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout-footer class="footer">
-    <a-space direction="vertical" size="medium">
+    <a-space direction="vertical" size="small">
       <a-space size="large">
         <!-- <a-link target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro">官网</a-link> -->
         <!-- <a-link target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro">教程</a-link> -->

orion-ops-ui/src/views/host-audit/connect-log/components/connect-log-table.vue

@@ -5,7 +5,7 @@
                   label-align="left"
                   :itemOptions="{ 6: { span: 2 } }"
                   @submit="fetchTableData"
-                  @reset="resetTableData"
+                  @reset="fetchTableData"
                   @keyup.enter="() => fetchTableData()">
       <!-- 连接用户 -->
       <a-form-item field="userId" label="连接用户" label-col-flex="50px">
@@ -58,7 +58,7 @@
       <div class="table-left-bar-handle">
         <!-- 标题 -->
         <div class="table-title">
-          主机连接日志 - 用户
+          主机连接日志
         </div>
       </div>
       <!-- 右侧操作 -->
@@ -78,18 +78,20 @@
              :bordered="false">
       <!-- 连接用户 -->
       <template #username="{ record }">
-        {{ record.userId }} - {{ record.username }}
+        {{ record.username }}
       </template>
       <!-- 连接主机 -->
       <template #hostName="{ record }">
-        {{ record.hostId }} - {{ record.hostName }}
-      </template>
-      <!-- 主机地址 -->
-      <template #hostAddress="{ record }">
+        <span class="host-name" :title="record.hostName">
+          {{ record.hostName }}
+        </span>
+        <br>
         <span class="copy-left" title="复制" @click="copy(record.hostAddress)">
           <icon-copy />
         </span>
-        <span>{{ record.hostAddress }}</span>
+        <span class="host-address">
+          {{ record.hostAddress }}
+        </span>
       </template>
       <!-- 状态 -->
       <template #status="{ record }">
@@ -134,7 +136,7 @@
     userId: undefined,
     hostId: undefined,
     hostAddress: undefined,
-    type: HostConnectType.SSH,
+    type: undefined,
     token: undefined,
     status: undefined,
     startTimeRange: undefined,
@@ -155,12 +157,6 @@
     }
   };
 
-  // 重置
-  const resetTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    formModel.type = HostConnectType.SSH;
-    doFetchTableData({ page, limit, ...form });
-  };
-
   // 切换页码
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
@@ -173,5 +169,13 @@
 </script>
 
 <style lang="less" scoped>
+  .host-name {
+    color: var(--color-text-2);
+  }
 
+  .host-address {
+    margin-top: 4px;
+    display: inline-block;
+    color: var(--color-text-3);
+  }
 </style>

orion-ops-ui/src/views/host-audit/connect-log/types/table.columns.ts

@@ -13,6 +13,7 @@ const columns = [
     title: '连接用户',
     dataIndex: 'username',
     slotName: 'username',
+    width: 180,
     align: 'left',
     ellipsis: true,
     tooltip: true,
@@ -22,45 +23,35 @@ const columns = [
     slotName: 'hostName',
     align: 'left',
     ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '主机地址',
-    dataIndex: 'hostAddress',
-    slotName: 'hostAddress',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
   }, {
     title: '类型',
     dataIndex: 'type',
     slotName: 'type',
-    width: 68,
+    width: 74,
     align: 'left',
   }, {
     title: '状态',
     dataIndex: 'status',
     slotName: 'status',
     align: 'left',
-    width: 90,
-  }, {
-    title: 'token',
-    dataIndex: 'token',
-    slotName: 'token',
-    align: 'left',
-    width: 120,
-    ellipsis: true,
-    tooltip: true,
+    width: 96,
   }, {
     title: '连接时间',
     dataIndex: 'connectTime',
     slotName: 'connectTime',
     align: 'left',
-    width: 310,
+    width: 318,
     render: ({ record }) => {
       return (record.startTime && dateFormat(new Date(record.startTime)))
         + ' - '
         + (record.endTime && dateFormat(new Date(record.endTime)) || '现在');
     },
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 180,
+    align: 'center',
+    fixed: 'right',
   },
 ] as TableColumnData[];
 

orion-ops-ui/src/views/system/menu/types/table.columns.ts

@@ -49,7 +49,7 @@ const columns = [
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 162,
+    width: 168,
     fixed: 'right',
   }
 ] as TableColumnData[];