🔨 执行日志.

orion-ops-ui/src/components/exec/log/panel-modal/index.vue

@@ -3,8 +3,8 @@
            title-align="start"
            title="执行日志"
            width="94%"
-           :top="40"
-           :body-style="{ padding: '0', height: 'calc(100vh - 140px)', overflow: 'hidden' }"
+           :top="44"
+           :body-style="{ padding: '0', height: 'calc(100vh - 138px)', overflow: 'hidden' }"
            :align-center="false"
            :draggable="true"
            :mask-closable="false"
@@ -40,8 +40,6 @@
 
   const log = ref();
 
-  // TODO 卸载
-
   // 打开
   const open = async (id: number) => {
     setVisible(true);
@@ -51,7 +49,9 @@
       const { data } = await getExecLog(id);
       // 打开日志
       await nextTick(() => {
-        log.value.open(data);
+        setTimeout(() => {
+          log.value.open(data);
+        }, 50);
       });
     } catch (e) {
       setVisible(false);
@@ -71,7 +71,6 @@
   const handleClear = () => {
     setLoading(false);
     setVisible(false);
-    console.log('clear');
   };
 
 </script>

orion-ops-ui/src/components/exec/log/panel/const.ts

@@ -2,6 +2,7 @@ import type { IDisposable, ITerminalInitOnlyOptions, ITerminalOptions, Terminal
 import type { FitAddon } from 'xterm-addon-fit';
 import type { SearchAddon } from 'xterm-addon-search';
 import type { CanvasAddon } from 'xterm-addon-canvas';
+import type { WebLinksAddon } from 'xterm-addon-web-links';
 
 // appender 配置
 export const AppenderOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
@@ -43,6 +44,7 @@ export interface LogAddons extends Record<string, IDisposable> {
   fit: FitAddon;
   canvas: CanvasAddon;
   search: SearchAddon;
+  weblink: WebLinksAddon;
 }
 
 // 执行日志 appender 定义

orion-ops-ui/src/components/exec/log/panel/index.vue

@@ -131,8 +131,6 @@
 
   // 清理并且关闭
   const closeAll = () => {
-    // TODO
-    console.log('closeAll');
     // 清理轮询
     clearAllInterval();
     // 关闭 appender
@@ -156,8 +154,8 @@
   @host-real-width: @host-width + 16px;
 
   .log-panel-container {
-    width: calc(100% - 32px);
-    height: calc(100% - 32px);
+    width: 100%;
+    height: 100%;
     display: flex;
     position: absolute;
   }

orion-ops-ui/src/components/exec/log/panel/log-appender.ts

@@ -1,6 +1,6 @@
 import type { ILogAppender, LogAddons, LogAppenderConf, LogDomRef } from './const';
-import type { ExecTailRequest } from '@/api/exec/exec';
 import { AppenderOptions } from './const';
+import type { ExecTailRequest } from '@/api/exec/exec';
 import { getExecLogTailToken } from '@/api/exec/exec';
 import { webSocketBaseUrl } from '@/utils/env';
 import { Message } from '@arco-design/web-vue';
@@ -12,6 +12,7 @@ import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { SearchAddon } from 'xterm-addon-search';
 import { CanvasAddon } from 'xterm-addon-canvas';
+import { WebLinksAddon } from 'xterm-addon-web-links';
 
 // 执行日志 appender 实现
 export default class LogAppender implements ILogAppender {
@@ -105,13 +106,16 @@ export default class LogAppender implements ILogAppender {
     const fit = new FitAddon();
     const search = new SearchAddon();
     const canvas = new CanvasAddon();
+    const weblink = new WebLinksAddon();
     terminal.loadAddon(fit);
     terminal.loadAddon(search);
     terminal.loadAddon(canvas);
+    terminal.loadAddon(weblink);
     return {
       fit,
       search,
-      canvas
+      canvas,
+      weblink
     };
   }
 
@@ -223,37 +227,40 @@ export default class LogAppender implements ILogAppender {
 
   // 关闭 client
   closeClient(): void {
-    // 关闭 ws
-    if (this.client && this.client.readyState === WebSocket.OPEN) {
-      this.client.close();
+    try {
+      // 清理持久化
+      clearInterval(this.keepAliveTask);
+      // 关闭 ws
+      if (this.client && this.client.readyState === WebSocket.OPEN) {
+        this.client.close();
+      }
+    } catch (e) {
     }
-    // 清理持久化
-    clearInterval(this.keepAliveTask);
   }
 
   // 关闭 view
   closeView(): void {
-    // 关闭 terminal
-    Object.values(this.appenderRel).forEach(s => {
-      if (s.addons) {
-        Object.values(s.addons).forEach(s => s.dispose());
-      }
-      s.terminal?.dispose();
-    });
     // 移除自适应事件
     removeEventListen(window, 'resize', this.fitAllFn);
+    // 关闭 terminal
+    Object.values(this.appenderRel).forEach(s => {
+      try {
+        // 卸载插件
+        Object.values(s.addons)
+          .filter(Boolean)
+          .forEach(s => s.dispose());
+        // 卸载终端
+        s.terminal?.dispose();
+      } catch (e) {
+        // 卸载可能会报错
+      }
+    });
   }
 
   // 关闭
   close(): void {
-    try {
-      this.closeClient();
-      this.closeView();
-    } catch (ex) {
-      // TODO
-      console.log('errr');
-      console.error(ex);
-    }
+    this.closeClient();
+    this.closeView();
   }
 
   // 处理消息

orion-ops-ui/src/components/exec/log/panel/log-item.vue

@@ -245,7 +245,7 @@
     height: calc(100% - @header-height);
     position: relative;
     background: #202020;
-    padding: 4px 0 0 4px;
+    padding: 4px 0 4px 4px;
 
     .log-appender {
       width: 100%;

orion-ops-ui/src/components/exec/log/panel/log-view.vue

@@ -43,8 +43,6 @@
   // 打开
   const open = () => {
     nextTick(async () => {
-      // TODO
-      console.log(props.appender);
       if (props.appender) {
         // 初始化
         await props.appender.init(logRefs.value);

orion-ops-ui/src/views/exec/exec-command/components/exec-panel-editor.vue

@@ -43,7 +43,7 @@
 <style lang="less" scoped>
   .editor-wrapper {
     width: 100%;
-    height: calc(100% - 66px);
+    height: calc(100% - 56px);
     position: relative;
   }
 

orion-ops-ui/src/views/exec/exec-command/components/exec-panel.vue

@@ -216,7 +216,7 @@
 </script>
 
 <style lang="less" scoped>
-  @form-width: 420px;
+  @form-width: 380px;
   @history-width: 320px;
   @command-gap: @form-width + @history-width + 32px;
 

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

@@ -176,7 +176,9 @@ export default class SshSession implements ISshSession {
     }
     // 加载插件
     for (const addon of Object.values(this.addons)) {
-      this.inst.loadAddon(addon);
+      if (addon) {
+        this.inst.loadAddon(addon);
+      }
     }
   }
 
@@ -244,6 +246,7 @@ export default class SshSession implements ISshSession {
       // 卸载终端
       this.inst.dispose();
     } catch (e) {
+      // 卸载可能会报错
     }
   }