🔨 上传.

orion-ops-ui/src/views/host/terminal/components/layout/right-sidebar.vue

@@ -10,6 +10,8 @@
                   position="left" />
     <!-- 命令片段列表抽屉 -->
     <command-snippet-list-drawer ref="snippetRef" />
+    <!-- 传输列表 -->
+    <transfer-drawer ref="transferRef" />
   </div>
 </template>
 
@@ -25,12 +27,12 @@
   import { ref } from 'vue';
   import IconActions from './icon-actions.vue';
   import CommandSnippetListDrawer from '../../../command-snippet/components/command-snippet-list-drawer.vue';
-
-  const emits = defineEmits(['openTransfer']);
+  import TransferDrawer from '@/views/host/terminal/components/transfer/transfer-drawer.vue';
 
   const { getAndCheckCurrentSshSession } = useTerminalStore();
 
   const snippetRef = ref();
+  const transferRef = ref();
 
   // 顶部操作
   const topActions = [
@@ -44,7 +46,7 @@
       iconStyle: {
         transform: 'rotate(90deg)'
       },
-      click: () => emits('openTransfer')
+      click: () => transferRef.value.open()
     },
   ];
 

orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table-header.vue

@@ -150,7 +150,7 @@
                  arrow-class="terminal-tooltip-content"
                  content="上传">
         <span class="click-icon-wrapper header-action-icon"
-              @click="uploadFile">
+              @click="openSftpUploadModal">
           <icon-upload />
         </span>
       </a-tooltip>
@@ -182,7 +182,7 @@
   import type { ISftpSession } from '../../types/terminal.type';
   import { inject, nextTick, ref, watch } from 'vue';
   import { getParentPath, getPathAnalysis } from '@/utils/file';
-  import { openSftpCreateModalKey } from '../../types/terminal.const';
+  import { openSftpCreateModalKey, openSftpUploadModalKey } from '../../types/terminal.const';
 
   const props = defineProps<{
     currentPath: string;
@@ -200,6 +200,8 @@
 
   const openSftpCreateModal = inject(openSftpCreateModalKey) as (sessionId: string, path: string, isTouch: boolean) => void;
 
+  const openSftpUploadModal = inject(openSftpUploadModalKey) as () => void;
+
   // 监听路径变化
   watch(() => props.currentPath, (path) => {
     if (path) {
@@ -264,12 +266,6 @@
     }
   };
 
-  // 上传文件
-  const uploadFile = () => {
-    // TODO openModal("props.currentPath")
-    console.log(props.currentPath);
-  };
-
   // 下载文件
   const downloadFile = () => {
     // TODO

orion-ops-ui/src/views/host/terminal/components/sftp/sftp-upload-modal.vue

@@ -1,14 +1,19 @@
 <template>
-  <a-modal :visible="true"
+  <a-modal v-model:visible="visible"
            top="80px"
            title-align="start"
            title="文件上传"
            ok-text="上传"
+           :body-style="{ padding: '20px' }"
            :align-center="false"
            :mask-closable="false"
            :unmount-on-close="true"
-           :on-before-ok="handlerOk">
+           :on-before-ok="handlerOk"
+           @cancel="handleClose">
     <div class="upload-container">
+      <div class="mb16">
+        上传至文件夹: {{ parentPath }}
+      </div>
       <a-space>
         <!-- 选择文件 -->
         <a-upload v-model:file-list="fileList"
@@ -28,14 +33,36 @@
             <a-button type="primary">选择文件夹</a-button>
           </template>
         </a-upload>
-
       </a-space>
       <!-- 文件列表 -->
-      <a-upload class="file-list-uploader"
+      <a-upload v-if="fileList.length" class="file-list-uploader"
                 v-model:file-list="fileList"
                 :auto-upload="false"
                 :show-file-list="true">
-        <template #upload-button>
+        <template #upload-button />
+        <template #file-name="{ fileItem }">
+          <!-- 上传文件夹 -->
+          <template v-if="fileItem.file.webkitRelativePath">
+            <a-tooltip position="top"
+                       :mini="true"
+                       :auto-fix-position="false"
+                       content-class="terminal-tooltip-content"
+                       arrow-class="terminal-tooltip-content"
+                       :content="fileItem.file.webkitRelativePath">
+              <span>{{ fileItem.file.webkitRelativePath }}</span>
+            </a-tooltip>
+          </template>
+          <!-- 上传文件 -->
+          <template v-else>
+            <a-tooltip position="top"
+                       :mini="true"
+                       :auto-fix-position="false"
+                       content-class="terminal-tooltip-content"
+                       arrow-class="terminal-tooltip-content"
+                       :content="fileItem.file.name">
+              <span>{{ fileItem.file.name }}</span>
+            </a-tooltip>
+          </template>
         </template>
       </a-upload>
     </div>
@@ -49,20 +76,56 @@
 </script>
 
 <script lang="ts" setup>
+  import type { SftpUploadItem } from '../../types/terminal.type';
   import useVisible from '@/hooks/visible';
-  import { nextTick, ref } from 'vue';
+  import { ref } from 'vue';
   import { useTerminalStore } from '@/store';
-  import { permission10toString } from '@/utils/file';
-  import SftpSession from '../../handler/sftp-session';
+  import { Message } from '@arco-design/web-vue';
 
-  const { visible, setVisible } = useVisible(true);
-  const { sessionManager } = useTerminalStore();
+  const { visible, setVisible } = useVisible();
+  const { transferManager } = useTerminalStore();
 
-  const fileList = ref([]);
+  const hostId = ref();
+  const parentPath = ref('');
+  const fileList = ref<any[]>([]);
 
+  // 打开
+  const open = (host: number, parent: string) => {
+    hostId.value = host;
+    parentPath.value = parent;
+    setVisible(true);
+  };
+
+  defineExpose({ open });
+
+  // 确定
   const handlerOk = () => {
-    console.log(fileList.value);
-    return false;
+    if (!fileList.value.length) {
+      return true;
+    }
+    // 添加到上传列表
+    const files = fileList.value.map(s => {
+      return {
+        hostId: hostId.value,
+        targetPath: parentPath.value + '/' + (s.file.webkitRelativePath || s.file.name),
+        file: s.file as File
+      } as SftpUploadItem;
+    });
+    transferManager.addUpload(files);
+    Message.success('已开始上传, 点击右侧传输列表查看进度');
+    // 清空
+    handlerClear();
+    return true;
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    fileList.value = [];
   };
 
 </script>
@@ -80,7 +143,7 @@
     }
 
     :deep(.arco-upload-list) {
-      max-height: calc(100vh - 328px);
+      max-height: calc(100vh - 388px);
       overflow-y: auto;
       padding: 0 12px 0 0;
     }

orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue

@@ -64,7 +64,7 @@
   import { useTerminalStore } from '@/store';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
-  import { openSftpCreateModalKey, openSftpMoveModalKey, openSftpChmodModalKey } from '../../types/terminal.const';
+  import { openSftpCreateModalKey, openSftpMoveModalKey, openSftpChmodModalKey, openSftpUploadModalKey } from '../../types/terminal.const';
   import SftpTableHeader from './sftp-table-header.vue';
   import SftpTable from './sftp-table.vue';
   import SftpEditorHeader from './sftp-editor-header.vue';
@@ -94,6 +94,7 @@
   const createModal = ref();
   const moveModal = ref();
   const chmodModal = ref();
+  const uploadModal = ref();
 
   // 暴露打开创建模态框
   provide(openSftpCreateModalKey, (sessionId: string, path: string, isTouch: boolean) => {
@@ -110,6 +111,11 @@
     chmodModal.value?.open(sessionId, path, permission);
   });
 
+  // 暴露打开上传模态框
+  provide(openSftpUploadModalKey, () => {
+    uploadModal.value?.open(props.tab.hostId, currentPath.value);
+  });
+
   // 编辑文件
   const editFile = (name: string, path: string) => {
     setEditorLoading(true);

orion-ops-ui/src/views/host/terminal/components/transfer/transfer-drawer.vue

@@ -0,0 +1,57 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            title="文件传输列表"
+            :width="388"
+            :mask-closable="false"
+            :unmount-on-close="false"
+            :footer="false">
+    <a-spin class="full" :loading="loading">
+      {{ transferManager.transferList }}
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'transferDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { useTerminalStore } from '@/store';
+
+  const { transferManager } = useTerminalStore();
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  // 打开
+  const open = () => {
+    setVisible(true);
+  };
+
+  defineExpose({ open });
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .form-container {
+    padding: 12px;
+  }
+
+  .command-editor {
+    height: calc(100vh - 330px);
+  }
+
+</style>

orion-ops-ui/src/views/host/terminal/handler/sftp-transfer-manager.ts

@@ -0,0 +1,17 @@
+import type { ISftpTransferManager, SftpUploadItem } from '../types/terminal.type';
+
+// sftp 传输管理器实现
+export default class SftpTransferManager implements ISftpTransferManager {
+
+  transferList: Array<SftpUploadItem>;
+
+  constructor() {
+    this.transferList = [];
+  }
+
+  // 添加上传文件
+  addUpload(items: Array<SftpUploadItem>): void {
+    this.transferList.push(...items);
+  }
+
+}

orion-ops-ui/src/views/host/terminal/types/terminal.const.ts

@@ -297,6 +297,9 @@ export const openSftpMoveModalKey = Symbol();
 // 打开 sftpChmodModal key
 export const openSftpChmodModalKey = Symbol();
 
+// 打开 sftpUploadModal key
+export const openSftpUploadModalKey = Symbol();
+
 // 字体后缀 兜底
 export const fontFamilySuffix = ',courier-new, courier, monospace';
 

orion-ops-ui/src/views/host/terminal/types/terminal.type.ts

@@ -367,3 +367,17 @@ export interface SftpFile {
   gid: number;
   modifyTime: number;
 }
+
+// sftp 传输管理器定义
+export interface ISftpTransferManager {
+  transferList: Array<SftpUploadItem>;
+  // 添加上传文件
+  addUpload: (items: Array<SftpUploadItem>) => void;
+}
+
+// sftp 上传文件项
+export interface SftpUploadItem {
+  hostId: number;
+  targetPath: string;
+  file: File;
+}