🔨 优化 sftp 回调逻辑.

orion-ops-launch/src/main/resources/application-dev.yaml

@@ -1,14 +1,14 @@
 spring:
   datasource:
     druid:
-      url: jdbc:mysql://116.62.194.246:3306/orion-ops-pro?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=Asia/Shanghai&autoReconnect=true
+      url: jdbc:mysql://127.0.0.1:3306/orion-ops-pro?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=Asia/Shanghai&autoReconnect=true
       username: root
       password: Data@123456
       initial-size: 0
       min-idle: 1
       max-active: 5
   redis:
-    host: 116.62.194.246
+    host: 127.0.0.1
     port: 6379
     database: 0
     password: lijiahang

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

@@ -11,8 +11,8 @@
           <sftp-table-header class="sftp-table-header" />
           <!-- 表格 -->
           <sftp-table class="sftp-table-wrapper"
-                      :list="list"
-                      :loading="loading" />
+                      :list="fileList"
+                      :loading="tableLoading" />
         </div>
       </template>
       <template #second v-if="editView">
@@ -33,7 +33,8 @@
   import { onMounted, onUnmounted, ref } from 'vue';
   import { useTerminalStore } from '@/store';
   import useLoading from '@/hooks/loading';
-  import data from './data';
+  import mockData from './data';
+  import { Message } from '@arco-design/web-vue';
   import SftpTable from './sftp-table.vue';
   import SftpTableHeader from './sftp-table-header.vue';
 
@@ -42,21 +43,38 @@
   }>();
 
   const { preference, sessionManager } = useTerminalStore();
-  const { loading, setLoading } = useLoading(true);
+  const { loading: tableLoading, setLoading: setTableLoading } = useLoading(true);
 
   const session = ref<ISftpSession>();
   const currentPath = ref<string>('');
-  const list = ref<Array<SftpFile>>(data);
+  const fileList = ref<Array<SftpFile>>(mockData);
   const splitSize = ref(1);
   const editView = ref(true);
 
+  // 连接成功回调
+  const connectCallback = () => {
+    setTableLoading(true);
+    session.value?.list(undefined);
+  };
+
+  // 接收列表回调
+  const resolveList = (result: string, path: string, list: Array<SftpFile>) => {
+    const success = !!Number.parseInt(result);
+    setLoading(false);
+    if (!success) {
+      Message.error('查询失败');
+      return;
+    }
+    currentPath.value = path;
+    fileList.value = list;
+  };
+
   // 初始化会话
   onMounted(async () => {
     // 创建终端处理器
     session.value = await sessionManager.openSftp(props.tab, {
-      list,
-      currentPath,
-      setLoading
+      connectCallback,
+      resolveList
     });
   });
 

orion-ops-ui/src/views/host/terminal/handler/sftp-session-resolver.ts

@@ -1,29 +0,0 @@
-import type { ISftpSession, ISftpSessionResolver, SftpDataRef, SftpFile } from '../types/terminal.type';
-import { Message } from '@arco-design/web-vue';
-
-// sftp 会话接收器实现
-export default class SftpSessionResolver implements ISftpSessionResolver {
-
-  private readonly dataRef: SftpDataRef;
-
-  private readonly session: ISftpSession;
-
-  constructor(session: ISftpSession,
-              dataRef: SftpDataRef) {
-    this.session = session;
-    this.dataRef = dataRef;
-  }
-
-  // 接受文件列表响应
-  resolveList(result: string, path: string, list: Array<SftpFile>) {
-    const success = !!Number.parseInt(result);
-    this.dataRef.setLoading(false);
-    if (!success) {
-      Message.error('查询失败');
-      return;
-    }
-    this.dataRef.currentPath = path;
-    this.dataRef.list = list;
-  }
-
-}

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

@@ -1,6 +1,5 @@
-import type { ISftpSession, ISftpSessionResolver, ITerminalChannel, SftpDataRef } from '../types/terminal.type';
+import type { ISftpSession, ISftpSessionResolver, ITerminalChannel } from '../types/terminal.type';
 import { InputProtocol } from '../types/terminal.protocol';
-import SftpSessionResolver from './sftp-session-resolver';
 
 // sftp 会话实现
 export default class SftpSession implements ISftpSession {
@@ -13,8 +12,6 @@ export default class SftpSession implements ISftpSession {
 
   public resolver: ISftpSessionResolver;
 
-  private dataRef: SftpDataRef;
-
   private readonly channel: ITerminalChannel;
 
   constructor(hostId: number,
@@ -24,27 +21,23 @@ export default class SftpSession implements ISftpSession {
     this.sessionId = sessionId;
     this.channel = channel;
     this.connected = false;
-    this.dataRef = undefined as unknown as SftpDataRef;
     this.resolver = undefined as unknown as ISftpSessionResolver;
   }
 
   // 初始化
-  init(dataRef: SftpDataRef): void {
-    this.dataRef = dataRef;
-    // 处理器
-    this.resolver = new SftpSessionResolver(this, dataRef);
+  init(resolver: ISftpSessionResolver): void {
+    this.resolver = resolver;
   }
 
   // 设置已连接
   connect(): void {
     this.connected = true;
-    // 加载 home 目录文件数据
-    this.list(undefined);
+    // 连接回调
+    this.resolver.connectCallback();
   }
 
   // 查询文件列表
   list(path: string | undefined) {
-    this.dataRef.setLoading(true);
     this.channel.send(InputProtocol.SFTP_LIST, {
       sessionId: this.sessionId,
       path

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

@@ -1,9 +1,9 @@
 import type {
   ISftpSession,
+  ISftpSessionResolver,
   ITerminalChannel,
   ITerminalSession,
   ITerminalSessionManager,
-  SftpDataRef,
   TerminalTabItem,
   XtermDomRef
 } from '../types/terminal.type';
@@ -62,7 +62,7 @@ export default class TerminalSessionManager implements ITerminalSessionManager {
   }
 
   // 打开 sftp 会话
-  async openSftp(tab: TerminalTabItem, dataRef: SftpDataRef): Promise<ISftpSession> {
+  async openSftp(tab: TerminalTabItem, resolver: ISftpSessionResolver): Promise<ISftpSession> {
     const sessionId = tab.key;
     const hostId = tab.hostId as number;
     // 初始化客户端
@@ -74,7 +74,7 @@ export default class TerminalSessionManager implements ITerminalSessionManager {
       this.channel
     );
     // 初始化
-    session.init(dataRef);
+    session.init(resolver);
     // 添加会话
     this.sessions[sessionId] = session;
     // 发送会话初始化请求

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

@@ -145,7 +145,7 @@ export interface ITerminalSessionManager {
   // 打开 ssh 会话
   openSsh: (tab: TerminalTabItem, domRef: XtermDomRef) => Promise<ISshSession>;
   // 打开 sftp 会话
-  openSftp: (tab: TerminalTabItem, dataRef: SftpDataRef) => Promise<ISftpSession>;
+  openSftp: (tab: TerminalTabItem, resolver: ISftpSessionResolver) => Promise<ISftpSession>;
   // 获取终端会话
   getSession: <T extends ITerminalSession>(sessionId: string) => T;
   // 关闭终端会话
@@ -199,16 +199,6 @@ export interface XtermAddons {
   image: ImageAddon;
 }
 
-// sftp 数据引用
-export interface SftpDataRef {
-  // 文件列表
-  list: any;
-  // 当前路径
-  currentPath: any;
-  // 设置加载状态
-  setLoading: (loading: boolean) => void;
-}
-
 // 终端会话定义
 export interface ITerminalSession {
   hostId: number;
@@ -304,13 +294,15 @@ export interface ISftpSession extends ITerminalSession {
   resolver: ISftpSessionResolver;
 
   // 初始化
-  init: (dataRef: SftpDataRef) => void;
+  init: (resolver: ISftpSessionResolver) => void;
   // 查询文件列表
   list: (path: string | undefined) => void;
 }
 
 // sftp 会话接收器定义
 export interface ISftpSessionResolver {
+  // 连接后回调
+  connectCallback: () => void;
   // 接受文件列表响应
   resolveList: (result: string, path: string, list: Array<SftpFile>) => void;
 }