🔨 优化前端逻辑.

orion-visor-ui/src/components/exec/log/const.ts

@@ -75,7 +75,7 @@ export interface LogAppenderConfig {
 // appender 视口
 export interface LogAppenderView {
   id: number;
-  el: HTMLElement;
+  viewport: HTMLElement;
   opened: boolean;
   openSearch: () => {};
   terminal: Terminal;

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

@@ -59,7 +59,7 @@ export default class LogAppender implements ILogAppender {
       // 初始化插件
       const addons = this.initAddons(terminal);
       // 打开终端
-      terminal.open(config.el);
+      terminal.open(config.viewport);
       // 自适应
       addons.fit.fit();
       this.appenderViews[config.id] = {

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

@@ -105,7 +105,7 @@
       <!-- 日志面板 -->
       <div class="log-wrapper">
         <!-- terminal -->
-        <div class="log-appender" ref="appenderRef" />
+        <div class="log-viewport" ref="viewport" />
         <!-- 搜索框 -->
         <xterm-search-modal ref="searchRef"
                             class="search-modal"
@@ -187,7 +187,7 @@
 
   const { getDictValue } = useDictStore();
 
-  const appenderRef = ref();
+  const viewport = ref();
   const searchRef = ref();
 
   // 打开搜索
@@ -197,7 +197,7 @@
 
   defineExpose({
     id: props.host.id,
-    appenderRef,
+    viewport,
     openSearch
   });
 
@@ -265,7 +265,7 @@
     background: #1C1C1C;
     padding: 4px 0 4px 4px;
 
-    .log-appender {
+    .log-viewport {
       width: 100%;
       height: 100%;
 

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

@@ -70,7 +70,7 @@
     nextTick(() => {
       logRefs.value.push({
         id: ref.id,
-        el: ref.appenderRef,
+        viewport: ref.viewport,
         opened: false,
         openSearch: ref.openSearch,
       } as LogAppenderView);

orion-visor-ui/src/views/host/terminal/components/setting/terminal-example.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="terminal-example" ref="terminalRef" />
+  <div class="terminal-example" ref="viewport" />
 </template>
 
 <script lang="ts">
@@ -17,7 +17,7 @@
     schema: TerminalThemeSchema | Record<string, any>;
   }>();
 
-  const terminalRef = ref();
+  const viewport = ref();
   const term = ref();
 
   onMounted(() => {
@@ -28,7 +28,7 @@
       fontSize: 15,
       cursorInactiveStyle: 'none',
     });
-    terminal.open(terminalRef.value);
+    terminal.open(viewport.value);
     terminal.write(
       '[root@OrionServer usr]#\r\n' +
       'dr-xr-xr-x.  2 root root bin\r\n' +

orion-visor-ui/src/views/host/terminal/components/ssh/ssh-view.vue

@@ -11,7 +11,7 @@
       <div class="ssh-wrapper"
            :style="{ background: preference.theme.schema.background }">
         <!-- 终端实例 -->
-        <div class="ssh-inst" ref="terminalRef" />
+        <div class="ssh-viewport" ref="viewport" />
         <!-- 搜索模态框 -->
         <xterm-search-modal ref="searchModal"
                             class="search-modal"
@@ -59,7 +59,7 @@
   const editorModal = ref();
   const searchModal = ref();
   const uploadModal = ref();
-  const terminalRef = ref();
+  const viewport = ref();
   const session = ref<ISshSession>();
 
   // 发送命令
@@ -88,7 +88,7 @@
   onMounted(async () => {
     // 创建终端处理器
     session.value = await sessionManager.openSsh(props.tab, {
-      el: terminalRef.value,
+      viewport: viewport.value,
       editorModal: editorModal.value,
       searchModal: searchModal.value,
       uploadModal: uploadModal.value,
@@ -117,7 +117,7 @@
     position: relative;
     padding: 8px 4px 4px 8px;
 
-    .ssh-inst {
+    .ssh-viewport {
       width: 100%;
       height: 100%;
 

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

@@ -65,11 +65,11 @@ export default class SshSession extends BaseSession<TerminalStatus> implements I
     // 注册快捷键
     this.registerShortcut(preference);
     // 注册事件
-    this.registerEvent(domRef.el, preference);
+    this.registerEvent(domRef.viewport, preference);
     // 注册插件
     this.registerAddons(preference);
     // 打开终端
-    this.inst.open(domRef.el);
+    this.inst.open(domRef.viewport);
     // 自适应
     this.addons.fit.fit();
   }

orion-visor-ui/src/views/host/terminal/types/define.ts

@@ -176,7 +176,7 @@ export interface ITerminalOutputProcessor {
 
 // xterm dom 元素引用
 export interface XtermDomRef {
-  el: HTMLElement;
+  viewport: HTMLElement;
   searchModal: any;
   editorModal: any;
   uploadModal: any;