From 104090887e5f164e05bf481c4a5746f5dfce2453 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Sun, 18 Feb 2024 16:30:28 +0800
Subject: [PATCH] =?UTF-8?q?:hammer:=20=E4=BC=98=E5=8C=96=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E9=80=BB=E8=BE=91.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../host/terminal/components/sftp/data.ts     | 457 ------------------
 .../components/sftp/sftp-table-header.vue     |  46 +-
 .../terminal/components/sftp/sftp-table.vue   |  35 +-
 .../terminal/components/sftp/sftp-view.vue    |  15 +-
 .../components/sftp/types/table.columns.ts    |   1 +
 5 files changed, 46 insertions(+), 508 deletions(-)
 delete mode 100644 orion-ops-ui/src/views/host/terminal/components/sftp/data.ts

diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/data.ts b/orion-ops-ui/src/views/host/terminal/components/sftp/data.ts
deleted file mode 100644
index abc77abc..00000000
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/data.ts
+++ /dev/null
@@ -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
-}];
diff --git 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
index bd4c632a..f261d74d 100644
--- 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;
     }
   }
diff --git 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
index 8e429d31..a25b384c 100644
--- 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);
 
   };
diff --git 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
index ffe3acf2..b56afac8 100644
--- 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 {
diff --git 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
index a01c85de..62d2979f 100644
--- 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[];