🔨 切换标签自适应页面.

orion-ops-ui/src/components/xtrem/log-appender/appender.const.ts

@@ -1,16 +1,18 @@
-import type { IDisposable, ITerminalOptions } from 'xterm';
+import type { IDisposable, ITerminalOptions, ITerminalInitOnlyOptions } from 'xterm';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { SearchAddon } from 'xterm-addon-search';
 import { CanvasAddon } from 'xterm-addon-canvas';
 
 // appender 配置
-export const AppenderOption: ITerminalOptions = {
+export const AppenderOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
   theme: {
     foreground: '#FFFFFF',
     background: '#202020',
     selectionBackground: '#B5D5FF',
   },
+  cols: 30,
+  rows: 8,
   rightClickSelectsWord: true,
   disableStdin: true,
   cursorStyle: 'bar',
@@ -47,6 +49,9 @@ export interface ILogAppender {
   // 初始化
   init(refs: Array<LogDomRef>): Promise<void>;
 
+  // 自适应
+  fit(): void;
+
   // 关闭 client
   closeClient(): void;
 

orion-ops-ui/src/components/xtrem/log-appender/log-appender.ts

@@ -1,7 +1,7 @@
 import type { ExecTailRequest } from '@/api/exec/exec';
 import { getExecLogTailToken } from '@/api/exec/exec';
 import type { ILogAppender, LogAddons, LogAppenderConf, LogDomRef } from './appender.const';
-import { AppenderOption } from './appender.const';
+import { AppenderOptions } from './appender.const';
 import { webSocketBaseUrl } from '@/utils/env';
 import { Message } from '@arco-design/web-vue';
 import { createWebSocket } from '@/utils';
@@ -48,7 +48,7 @@ export default class LogAppender implements ILogAppender {
     // 打开 log-view
     for (let logDomRef of logDomRefs) {
       // 初始化 terminal
-      const terminal = new Terminal(AppenderOption);
+      const terminal = new Terminal(AppenderOptions);
       // 初始化插件
       const addons = this.initAddons(terminal);
       // 打开终端
@@ -105,6 +105,7 @@ export default class LogAppender implements ILogAppender {
   // 自适应
   fit(): void {
     Object.values(this.appenderRel).forEach(s => {
+      console.log(s);
       s.addons?.fit?.fit();
     });
   }

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

@@ -55,7 +55,7 @@
   import type { VNodeRef } from 'vue';
   import type { ExecCommandResponse } from '@/api/exec/exec';
   import type { LogDomRef, ILogAppender } from '@/components/xtrem/log-appender/appender.const';
-  import { nextTick, ref } from 'vue';
+  import { nextTick, ref, watch } from 'vue';
   import { formatDuration } from '@/utils';
   import { execHostStatus, execHostStatusKey } from '@/views/exec/exec-log/types/const';
   import { useDictStore } from '@/store';
@@ -72,6 +72,13 @@
   const logRefs = ref<Array<LogDomRef>>([]);
   const appender = ref<ILogAppender>();
 
+  // 切换标签自适应
+  watch(() => props.current, () => {
+    nextTick(() => {
+      appender.value?.fit();
+    });
+  });
+
   // 打开
   const open = () => {
     nextTick(async () => {
@@ -138,7 +145,7 @@
     width: 100%;
     height: calc(100% - @header-height);
     position: relative;
-    background: #212529;
+    background: #202020;
     padding: 4px 0 0 4px;
 
     .log-appender {