🔨 优化宽度计算逻辑.

2024-02-18 16:30:28 +08:00
parent 17a5f37839
commit 104090887e
5 changed files with 46 additions and 508 deletions
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/data.ts
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/data.ts
@@ -1,457 +0,0 @@
-export default [{
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1639399737000,
-  'name': '04',
-  'path': '/root/04',
-  'permission': 644,
-  'size': '34.2 MB',
-  'sizeByte': 35845278,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1662630786000,
-  'name': 'j3',
-  'path': '/root/j3',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1658895079000,
-  'name': '123',
-  'path': '/root/123',
-  'permission': 644,
-  'size': '13 B',
-  'sizeByte': 13,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--rwx',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1664427351000,
-  'name': 'bug.txt',
-  'path': '/root/bug.txt',
-  'permission': 647,
-  'size': '50.3 KB',
-  'sizeByte': 51491,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1659888021000,
-  'name': 'ops-monitor-agent',
-  'path': '/root/ops-monitor-agent',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1635143381000,
-  'name': '04_体验一下面试官对于消息队列的7个连环炮.zip',
-  'path': '/root/04_体验一下面试官对于消息队列的7个连环炮.zip',
-  'permission': 644,
-  'size': '34.2 MB',
-  'sizeByte': 35845278,
-  'suffix': 'zip',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1637921002000,
-  'name': '一个超长的文件一个超长的文件一个超长的文件一个超长的文件一个超长的文件一个超长的文件',
-  'path': '/root/一个超长的文件一个超长的文件一个超长的文件一个超长的文件一个超长的文件一个超长的文件',
-  'permission': 644,
-  'size': '4 B',
-  'sizeByte': 4,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1662627298000,
-  'name': 'WebStorm-2021.2.2.exe',
-  'path': '/root/WebStorm-2021.2.2.exe',
-  'permission': 644,
-  'size': '366.2 MB',
-  'sizeByte': 383998600,
-  'suffix': 'exe',
-  'uid': 0
-}, {
-  'attr': 'drwxrwxr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1557936457000,
-  'name': 'redis-5.0.5',
-  'path': '/root/redis-5.0.5',
-  'permission': 775,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '5',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1643003400000,
-  'name': 'pic',
-  'path': '/root/pic',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1635127278000,
-  'name': 'pvzβv6.25-R4.7z',
-  'path': '/root/pvzβv6.25-R4.7z',
-  'permission': 644,
-  'size': '37.2 MB',
-  'sizeByte': 38978762,
-  'suffix': '7z',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1652947847000,
-  'name': '1.txt',
-  'path': '/root/1.txt',
-  'permission': 644,
-  'size': '133 B',
-  'sizeByte': 133,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': 'drw-r--r--',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1653015555000,
-  'name': 'write',
-  'path': '/root/write',
-  'permission': 644,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1660552691000,
-  'name': 'k.pub',
-  'path': '/root/k.pub',
-  'permission': 644,
-  'size': '401 B',
-  'sizeByte': 401,
-  'suffix': 'pub',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1625065314000,
-  'name': 'ideaIU-2021.1.1.exe',
-  'path': '/root/ideaIU-2021.1.1.exe',
-  'permission': 644,
-  'size': '729.3 MB',
-  'sizeByte': 764705864,
-  'suffix': 'exe',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1636525624000,
-  'name': '文本.txt',
-  'path': '/root/文本.txt',
-  'permission': 644,
-  'size': '0 B',
-  'sizeByte': 0,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1635090233000,
-  'name': '数据头.txt',
-  'path': '/root/数据头.txt',
-  'permission': 644,
-  'size': '4.3 KB',
-  'sizeByte': 4376,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1662627659000,
-  'name': 'j1',
-  'path': '/root/j1',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1642956894000,
-  'name': 'PowerShell-7.1.4-win-x64.msi',
-  'path': '/root/PowerShell-7.1.4-win-x64.msi',
-  'permission': 644,
-  'size': '94.9 MB',
-  'sizeByte': 99524608,
-  'suffix': 'msi',
-  'uid': 0
-}, {
-  'attr': '-rw-------',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1660552691000,
-  'name': 'k',
-  'path': '/root/k',
-  'permission': 600,
-  'size': '1.7 KB',
-  'sizeByte': 1766,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1652942938000,
-  'name': 'bbb',
-  'path': '/root/bbb',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1675653580000,
-  'name': 'swapper',
-  'path': '/root/swapper',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1639443147000,
-  'name': 'tmp2.txt',
-  'path': '/root/tmp2.txt',
-  'permission': 644,
-  'size': '184 B',
-  'sizeByte': 184,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1653277297000,
-  'name': 'test',
-  'path': '/root/test',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1625064193000,
-  'name': 'a1.rar',
-  'path': '/root/a1.rar',
-  'permission': 644,
-  'size': '52 MB',
-  'sizeByte': 54528512,
-  'suffix': 'rar',
-  'uid': 0
-}, {
-  'attr': '-rwxrwxrwx',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1704289282000,
-  'name': 'bridge.sh',
-  'path': '/root/bridge.sh',
-  'permission': 777,
-  'size': '396 B',
-  'sizeByte': 396,
-  'suffix': 'sh',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1663829274000,
-  'name': 'orion-ops',
-  'path': '/root/orion-ops',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1668680082000,
-  'name': 'ub.txt',
-  'path': '/root/ub.txt',
-  'permission': 644,
-  'size': '71.7 MB',
-  'sizeByte': 75167744,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': '-rwxrwxrwx',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1668594989000,
-  'name': 'osx.d',
-  'path': '/root/osx.d',
-  'permission': 777,
-  'size': '170 B',
-  'sizeByte': 170,
-  'suffix': 'd',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1636337848000,
-  'name': 'temp',
-  'path': '/root/temp',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1659524667000,
-  'name': '46746619-175F-41c0-8D0E-0007E9271507.png',
-  'path': '/root/46746619-175F-41c0-8D0E-0007E9271507.png',
-  'permission': 644,
-  'size': '158.1 KB',
-  'sizeByte': 161927,
-  'suffix': 'png',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1646190836000,
-  'name': 'video',
-  'path': '/root/video',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1625136042000,
-  'name': 'sql1.txt',
-  'path': '/root/sql1.txt',
-  'permission': 644,
-  'size': '16.9 KB',
-  'sizeByte': 17334,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1665545226000,
-  'name': 'ts.txt',
-  'path': '/root/ts.txt',
-  'permission': 644,
-  'size': '101.6 KB',
-  'sizeByte': 104004,
-  'suffix': 'txt',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1635090505000,
-  'name': 'shop.xlsx',
-  'path': '/root/shop.xlsx',
-  'permission': 644,
-  'size': '87.9 KB',
-  'sizeByte': 89993,
-  'suffix': 'xlsx',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1635127741000,
-  'name': 'Java 8实战.pdf',
-  'path': '/root/Java 8实战.pdf',
-  'permission': 644,
-  'size': '12.9 MB',
-  'sizeByte': 13490536,
-  'suffix': 'pdf',
-  'uid': 0
-}, {
-  'attr': '-rw-r--r--',
-  'gid': 0,
-  'isDir': false,
-  'modifyTime': 1662626999000,
-  'name': 'Postman-win64-6.5.3-Setup.exe',
-  'path': '/root/Postman-win64-6.5.3-Setup.exe',
-  'permission': 644,
-  'size': '68.1 MB',
-  'sizeByte': 71401080,
-  'suffix': 'exe',
-  'uid': 0
-}, {
-  'attr': 'drwxr-xr-x',
-  'gid': 0,
-  'isDir': true,
-  'modifyTime': 1662627183000,
-  'name': 'jar',
-  'path': '/root/jar',
-  'permission': 755,
-  'size': '4 KB',
-  'sizeByte': 4096,
-  'suffix': '',
-  'uid': 0
-}];
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table-header.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table-header.vue
@@ -11,7 +11,7 @@
                 content-class="terminal-tooltip-content"
                 arrow-class="terminal-tooltip-content"
                 content="返回上级">
-        <span class="click-icon-wrapper header-action-icon mr4"
+        <span class="click-icon-wrapper header-action-icon mr8"
              @click="backParentPath">
          <icon-left />
        </span>
@@ -141,31 +141,6 @@
          <icon-delete />
        </span>
      </a-tooltip>
-      <!-- 复制 FIXME 不行就删除 -->
-      <a-tooltip v-if="false"
-                 position="top"
-                 :mini="true"
-                 :overlay-inverse="true"
-                 :auto-fix-position="false"
-                 content-class="terminal-tooltip-content"
-                 arrow-class="terminal-tooltip-content"
-                 content="复制">
-        <span class="click-icon-wrapper header-action-icon">
-          <icon-copy />
-        </span>
-      </a-tooltip>
-      <!-- 移动 FIXME 不行就删除 -->
-      <a-tooltip position="top"
-                 :mini="true"
-                 :overlay-inverse="true"
-                 :auto-fix-position="false"
-                 content-class="terminal-tooltip-content"
-                 arrow-class="terminal-tooltip-content"
-                 content="移动">
-        <span class="click-icon-wrapper header-action-icon">
-          <icon-paste />
-        </span>
-      </a-tooltip>
      <!-- 上传 -->
      <a-tooltip position="top"
                 :mini="true"
@@ -271,38 +246,41 @@

  // 创建文件
  const createFile = () => {
-    // openModal(true, "props.currentPath")
+    // TODO openModal(true, "props.currentPath")
    console.log(props.currentPath);
  };

  // 创建文件夹
  const createDir = () => {
-    // openModal(false, "props.currentPath")
+    // TODO openModal(false, "props.currentPath")
    console.log(props.currentPath);
  };

  // 删除选中文件
  const deleteSelectFiles = () => {
-    // confirm
+    // TODO confirm
    console.log(props.selectedFiles);
  };

  // 上传文件
  const uploadFile = () => {
-    // openModal("props.currentPath")
+    // TODO openModal("props.currentPath")
    console.log(props.currentPath);
  };

  // 下载文件
  const downloadFile = () => {
+    // TODO
    console.log(props.selectedFiles);
  };

-  // FIXME 图标宽度提成变量
-
 </script>

 <style lang="less" scoped>
+  @action-num: 7;
+  @action-gap: 8px;
+  @action-width: 26px;
+  @actions-width: @action-num * (@action-width + @action-gap);

  .sftp-table-header {
    width: 100%;
@@ -317,11 +295,11 @@
    }

    &-left {
-      width: calc(100% - 302px);
+      width: calc(100% - @actions-width);
    }

    &-right {
-      width: 302px;
+      width: @actions-width;
      justify-content: flex-end;
    }
  }
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table.vue
@@ -29,12 +29,15 @@
    </template>
    <!-- 文件名称 -->
    <template #fileName="{ record }">
-      <!-- 文件图标 -->
-      <span class="file-name-icon" :title="formatFileType(record.attr).label">
-        <component :is="formatFileType(record.attr).icon" />
-      </span>
-      <span>
-        {{ record.name }}
+      <span :title="record.name"
+            class="pointer"
+            @click="clickFilename(record)">
+        <!-- 文件图标 -->
+        <span class="file-name-icon" :title="formatFileType(record.attr).label">
+          <component :is="formatFileType(record.attr).icon" />
+        </span>
+        <!-- 文件名称 -->
+        <span>{{ record.name }}</span>
      </span>
    </template>
    <!-- 文件大小 -->
@@ -136,7 +139,7 @@
    selectedFiles: Array<string>;
  }>();

-  const emits = defineEmits(['update:selectedFiles']);
+  const emits = defineEmits(['update:selectedFiles', 'loadFile']);

  const rowSelection = useRowSelection({ width: 40 });
  const { copy } = useCopy();
@@ -169,26 +172,38 @@
    record.hover = false;
  };

+  // 点击文件名称
+  const clickFilename = (record: TableData) => {
+    if (FILE_TYPE.DIRECTORY.value === formatFileType(record.attr).value) {
+      // 进入文件夹
+      emits('loadFile', record.path);
+    } else {
+      // 点击文件
+      // TODO VIEW
+    }
+  };
+
  // 删除文件
  const deleteFile = (path: string) => {
-    // confirm
+    // TODO confirm
    console.log(path);
  };

  // 下载文件
  const downloadFile = (path: string) => {
+    // TODO
    console.log(path);
  };

  // 移动文件
  const moveFile = (path: string) => {
-    // openModal('path')
+    // TODO openModal('path')
    console.log(path);
  };

  // 文件提权
  const chmodFile = (path: string, attr: string) => {
-    // openModal('path','mod')
+    // TODO openModal('path','mod')
    console.log(path, attr);

  };
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
@@ -6,8 +6,8 @@
             :disabled="!editView">
      <!-- 左侧面板表格 -->
      <template #first>
-        <!-- FIXME spin -->
-        <div class="sftp-table-container">
+        <a-spin class="sftp-table-container"
+                :loading="tableLoading">
          <!-- 表头 -->
          <sftp-table-header class="sftp-table-header"
                             :current-path="currentPath"
@@ -19,8 +19,9 @@
                      v-model:selected-files="selectFiles"
                      :session="session"
                      :list="fileList"
-                      :loading="tableLoading" />
-        </div>
+                      :loading="tableLoading"
+                      @load-file="loadFiles" />
+        </a-spin>
      </template>
      <template #second v-if="editView">
        <div>editor</div>
@@ -39,9 +40,8 @@
  import type { ISftpSession, SftpFile, TerminalTabItem } from '../../types/terminal.type';
  import { onMounted, onUnmounted, ref } from 'vue';
  import { useTerminalStore } from '@/store';
-  import useLoading from '@/hooks/loading';
-  import mockData from './data';
  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
  import SftpTable from './sftp-table.vue';
  import SftpTableHeader from './sftp-table-header.vue';

@@ -54,7 +54,7 @@

  const session = ref<ISftpSession>();
  const currentPath = ref<string>('');
-  const fileList = ref<Array<SftpFile>>(mockData);
+  const fileList = ref<Array<SftpFile>>([]);
  const selectFiles = ref<Array<string>>([]);
  const splitSize = ref(1);
  const editView = ref(true);
@@ -114,6 +114,7 @@

  .sftp-table-container {
    padding: 8px;
+    width: 100%;
    height: 100%;

    .sftp-table-header {
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/types/table.columns.ts
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/types/table.columns.ts
@@ -34,6 +34,7 @@ const columns = [
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
+    width: 218,
    cellClass: 'action-cell',
  },
 ] as TableColumnData[];