💄 修改表格样式.

orion-visor-framework/orion-visor-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-types-table.columns.ts.vm

@@ -6,7 +6,7 @@ const columns = [
     title: 'id',
     dataIndex: 'id',
     slotName: 'id',
-    width: 100,
+    width: 80,
     align: 'left',
     fixed: 'left',
   }, #foreach($field in ${table.fields})#if("$!field.propertyName" != "id"){
@@ -15,6 +15,7 @@ const columns = [
     slotName: '${field.propertyName}',
     align: 'left',
     #if(${field.propertyType} == 'String')
+    minWidth: 238,
     ellipsis: true,
     tooltip: true,
     #elseif(${field.propertyType} == 'Date')

orion-visor-ui/src/components/asset/host-identity/selector/index.vue

@@ -3,7 +3,22 @@
             :options="optionData"
             :loading="loading"
             placeholder="请选择主机身份"
-            allow-clear />
+            allow-clear>
+    <!-- label -->
+    <template #label="{ data }">
+      <span class="option-wrapper">
+        <span class="label">{{ data.label }}</span>
+        <span class="username">{{ data.username }}</span>
+      </span>
+    </template>
+    <!-- 选项 -->
+    <template #option="{ data }">
+      <span class="option-wrapper">
+        <span class="label">{{ data.label }}</span>
+        <span class="username">{{ data.username }}</span>
+      </span>
+    </template>
+  </a-select>
 </template>
 
 <script lang="ts">
@@ -53,8 +68,9 @@
         : await cacheStore.loadHostIdentities();
       optionData.value = hostIdentities.map(s => {
         return {
-          label: `${s.name} (${s.username})`,
+          label: s.name,
           value: s.id,
+          username: s.username,
         };
       });
     } catch (e) {
@@ -66,5 +82,18 @@
 </script>
 
 <style lang="less" scoped>
+  .option-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
+    .label {
+      margin-right: 8px;
+    }
+
+    .username {
+      font-size: 12px;
+      color: var(--color-text-3);
+    }
+  }
 </style>

orion-visor-ui/src/components/asset/host/authorized-host-modal/index.vue

@@ -37,6 +37,7 @@
                          :allow-clear="true"
                          :data="filterOptions"
                          :filter-option="tagLabelFilter">
+          <!-- 选项 -->
           <template #option="{ data: { raw: { label, isTag } } }">
             <!-- tag -->
             <a-tag v-if="isTag" :color="dataColor(label, tagColor)">

orion-visor-ui/src/components/meta/tag/multi-selector/index.vue

@@ -8,6 +8,7 @@
             @exceed-limit="() => { emits('onLimited', limit, `最多选择${limit}个tag`) }"
             multiple
             allow-clear>
+    <!-- 选项 -->
     <template #option="{ data: { label } }">
       <a-tag :color="dataColor(label, tagColor)">
         {{ label }}

orion-visor-ui/src/components/view/json-editor/modal/index.vue

@@ -34,7 +34,7 @@
     readonly: boolean;
   }>>(), {
     width: '60%',
-    height: 'calc(100vh - 240px)',
+    height: 'calc(100vh - 242px)',
     readonly: true,
   });
 

orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-table.vue

@@ -139,6 +139,15 @@
           {{ record.extra?.address }}
         </span>
       </template>
+      <!-- 连接时间 -->
+      <template #connectTime="{ record }">
+        <div>
+          从: {{ record.startTime && dateFormat(new Date(record.startTime)) }}
+        </div>
+        <div class="mt4">
+          至: {{ (record.endTime && dateFormat(new Date(record.endTime)) || '现在') }}
+        </div>
+      </template>
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
@@ -201,6 +210,7 @@
   import columns from '../types/table.columns';
   import useLoading from '@/hooks/loading';
   import { copy } from '@/hooks/copy';
+  import { dateFormat } from '@/utils';
   import UserSelector from '@/components/user/user/selector/index.vue';
   import HostSelector from '@/components/asset/host/selector/index.vue';
   import ConnectLogClearModal from './connect-log-clear-modal.vue';

orion-visor-ui/src/views/asset-audit/connect-log/types/table.columns.ts

@@ -46,12 +46,7 @@ const columns = [
     dataIndex: 'connectTime',
     slotName: 'connectTime',
     align: 'left',
-    width: 318,
-    render: ({ record }) => {
-      return (record.startTime && dateFormat(new Date(record.startTime)))
-        + ' - '
-        + (record.endTime && dateFormat(new Date(record.endTime)) || '现在');
-    },
+    width: 192,
   }, {
     title: '操作',
     slotName: 'handle',

orion-visor-ui/src/views/asset-audit/sftp-log/types/table.columns.ts

@@ -34,6 +34,7 @@ const columns = [
     dataIndex: 'paths',
     slotName: 'paths',
     align: 'left',
+    minWidth: 238,
   }, {
     title: '执行结果',
     dataIndex: 'result',

orion-visor-ui/src/views/asset/host-config/components/ssh-config-form.vue

@@ -84,7 +84,7 @@
                      :hide-asterisk="true">
           <host-identity-selector v-model="formModel.identityId" />
         </a-form-item>
-        <!-- 用户名 -->
+        <!-- 连接超时时间 -->
         <a-form-item field="connectTimeout"
                      label="连接超时时间"
                      :hide-asterisk="true">

orion-visor-ui/src/views/asset/host-key/components/host-key-form-drawer.vue

@@ -179,13 +179,15 @@
 
   // 选择公钥文件
   const selectPublicFile = async (fileList: FileItem[]) => {
-    formModel.value.publicKey = await readFileText(fileList[0].file as File);
+    formModel.value.publicKey = await readFileText(fileList[fileList.length - 1].file as File);
+    fileList.length = 0;
     formRef.value.clearValidate('publicKey');
   };
 
   // 选择私钥文件
   const selectPrivateFile = async (fileList: FileItem[]) => {
-    formModel.value.privateKey = await readFileText(fileList[0].file as File);
+    formModel.value.privateKey = await readFileText(fileList[fileList.length - 1].file as File);
+    fileList.length = 0;
     formRef.value.clearValidate('privateKey');
   };
 

orion-visor-ui/src/views/exec/exec-command-log/types/table.columns.ts

@@ -22,6 +22,7 @@ const columns = [
     slotName: 'command',
     align: 'left',
     ellipsis: true,
+    minWidth: 238,
   }, {
     title: '执行用户',
     dataIndex: 'username',

orion-visor-ui/src/views/exec/upload-task/types/table.columns.ts

@@ -31,6 +31,7 @@ const columns = [
     align: 'left',
     ellipsis: true,
     tooltip: true,
+    minWidth: 238,
   }, {
     title: '上传状态',
     dataIndex: 'status',

orion-visor-ui/src/views/host/terminal/components/new-connection/new-connection-view.vue

@@ -18,6 +18,7 @@
                          :allow-clear="true"
                          :data="filterOptions"
                          :filter-option="tagLabelFilter">
+          <!-- 选项 -->
           <template #option="{ data: { raw: { label, isTag } } }">
             <!-- tag -->
             <a-tag v-if="isTag" :color="dataColor(label, tagColor)">
@@ -107,7 +108,7 @@
 
     .host-view-container {
       width: 100%;
-      height: calc(100vh - 240px);
+      height: calc(100vh - 242px);
       position: relative;
     }
   }

orion-visor-ui/src/views/host/terminal/components/setting/display/terminal-display-block.vue

@@ -22,10 +22,12 @@
                         :options="toOptions(fontFamilyKey)"
                         :allow-create="true"
                         :filter-option="labelFilter">
-                <template #option="{ data }">
+                <!-- label -->
+                <template #label="{ data }">
                   <span :style="{ fontFamily: data.value }">{{ data.label }}</span>
                 </template>
-                <template #label="{ data }">
+                <!-- 选项 -->
+                <template #option="{ data }">
                   <span :style="{ fontFamily: data.value }">{{ data.label }}</span>
                 </template>
               </a-select>

orion-visor-ui/src/views/host/terminal/components/setting/theme/terminal-theme-block.vue

@@ -10,7 +10,9 @@
     <a-skeleton v-if="loading"
                 class="skeleton-wrapper"
                 :animation="true">
-      <a-skeleton-line :rows="8" />
+      <a-skeleton-line :rows="6"
+                       :line-height="64"
+                       :line-spacing="24" />
     </a-skeleton>
     <!-- 内容区域 -->
     <div v-else class="terminal-setting-body terminal-theme-container">
@@ -18,9 +20,9 @@
       <a-alert class="mb16">选择后会立刻保存, 刷新页面后生效</a-alert>
       <!-- 终端主题 -->
       <div class="theme-row"
-           v-for="rowIndex in themes.length / 2"
-           :key="rowIndex">
-        <a-card v-for="(theme, colIndex) in [themes[(rowIndex - 1) * 2], themes[(rowIndex - 1) * 2 + 1]]"
+           v-for="(themeArr, index) in themes"
+           :key="index">
+        <a-card v-for="(theme, colIndex) in themeArr"
                 :key="theme.name"
                 class="terminal-theme-card simple-card"
                 :class="{
@@ -67,7 +69,7 @@
   const { loading, setLoading } = useLoading();
 
   const currentThemeName = ref();
-  const themes = ref<Array<TerminalTheme>>([]);
+  const themes = ref<Array<Array<TerminalTheme>>>([]);
 
   // 选择主题
   const selectTheme = async (theme: TerminalTheme) => {
@@ -90,7 +92,12 @@
     try {
       // 加载全部主题
       const { data } = await getTerminalThemes();
-      themes.value = data;
+      const result = [];
+      for (let i = 0; i < data.length; i += 2) {
+        const subArray = data.slice(i, i + 2);
+        result.push(subArray);
+      }
+      themes.value = result;
     } catch (e) {
     } finally {
       setLoading(false);

orion-visor-ui/src/views/job/exec-job-log/types/table.columns.ts

@@ -20,6 +20,7 @@ const columns = [
     dataIndex: 'command',
     slotName: 'command',
     align: 'left',
+    minWidth: 238,
     ellipsis: true,
   }, {
     title: '执行状态',

orion-visor-ui/src/views/job/exec-job/types/table.columns.ts

@@ -29,6 +29,7 @@ const columns = [
     dataIndex: 'command',
     slotName: 'command',
     align: 'left',
+    minWidth: 238,
     ellipsis: true,
     tooltip: true,
   }, {

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

@@ -32,12 +32,14 @@ const columns = [
     title: '权限标识',
     dataIndex: 'permission',
     slotName: 'permission',
+    minWidth: 138,
     ellipsis: true,
     tooltip: true
   }, {
     title: '组件名称',
     dataIndex: 'component',
     slotName: 'component',
+    minWidth: 138,
     ellipsis: true,
     tooltip: true,
   }, {

orion-visor-ui/src/views/user/operator-log/types/table.columns.ts

@@ -30,6 +30,8 @@ const columns = [
     title: '操作日志',
     dataIndex: 'originLogInfo',
     slotName: 'originLogInfo',
+    minWidth: 238,
+    align: 'left',
     ellipsis: true,
     tooltip: true,
   }, {

orion-visor-ui/src/views/user/user/types/table.columns.ts

@@ -6,31 +6,35 @@ const columns = [
     title: 'id',
     dataIndex: 'id',
     slotName: 'id',
-    width: 100,
+    width: 80,
     align: 'left',
     fixed: 'left',
   }, {
     title: '用户名',
     dataIndex: 'username',
     slotName: 'username',
+    minWidth: 138,
     ellipsis: true,
     tooltip: true,
   }, {
     title: '花名',
     dataIndex: 'nickname',
     slotName: 'nickname',
+    minWidth: 138,
     ellipsis: true,
     tooltip: true,
   }, {
     title: '手机号',
     dataIndex: 'mobile',
     slotName: 'mobile',
+    minWidth: 88,
     ellipsis: true,
     tooltip: true,
   }, {
     title: '邮箱',
     dataIndex: 'email',
     slotName: 'email',
+    minWidth: 88,
     ellipsis: true,
     tooltip: true,
   }, {