🔨 优化前端逻辑.

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;