refactor: 优化终端交互.

orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue

@@ -30,11 +30,30 @@
 <script lang="ts" setup>
   import { TabType, InnerTabs } from '../../types/terminal.const';
   import { useTerminalStore } from '@/store';
+  import { watch } from 'vue';
   import TerminalViewSetting from '../view-setting/terminal-view-setting.vue';
   import NewConnectionView from '../new-connection/new-connection-view.vue';
-  import TerminalView from '../xterm/terminal-view.vue';
 
-  const { tabManager } = useTerminalStore();
+  import TerminalView from '../xterm/terminal-view.vue';
+  const { tabManager, sessionManager } = useTerminalStore();
+
+  // 监听 tab 修改
+  watch(() => tabManager.active, active => {
+    if (!active) {
+      return;
+    }
+    // 获取 tab
+    const tab = tabManager.items.find(s => s.key === active);
+    if (!tab) {
+      return;
+    }
+    // 修改标题
+    document.title = tab.title;
+    // terminal 自动聚焦
+    if (tab?.type === TabType.TERMINAL) {
+      sessionManager.getSession(active)?.focus();
+    }
+  });
 
 </script>
 

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

@@ -31,11 +31,11 @@
     term.value.open(terminal.value);
     term.value.write(
       '[root@OrionServer usr]#\r\n' +
-      'dr-xr-xr-x.   2 root root bin\r\n' +
-      'dr-xr-xr-x.   2 root root sbin\r\n' +
-      'dr-xr-xr-x.  43 root root lib\r\n' +
-      'dr-xr-xr-x.  62 root root lib64\r\n' +
-      'lrwxrwxrwx.   1 root root tmp'
+      'dr-xr-xr-x.  2 root root bin\r\n' +
+      'dr-xr-xr-x.  2 root root sbin\r\n' +
+      'drwxr-xr-x. 89 root root share\r\n' +
+      'drwxr-xr-x.  4 root root src\r\n' +
+      'lrwxrwxrwx.  1 root root tmp -> ../var/tmp'
     );
   });
 

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

@@ -47,7 +47,8 @@
                         :body-style="{ padding: '16px 16px 16px 0' }"
                         :dark="themeSchema.dark"
                         cancel-text="关闭"
-                        @ok="writeCommand(modal.getValue())" />
+                        @ok="writeCommand(modal.getValue())"
+                        @cancel="focus" />
   </div>
 </template>
 
@@ -83,17 +84,18 @@
   const session = ref<ITerminalSession>();
 
   // FIXME
-  // 卸载 最外层 terminal 组件, 卸载 style
+  // 调教 theme
   // terminal themes 改成非同步 style
+  // 从后端获取 theme
   // (改成可配置/拆分)
   // 自定义 font siderBar 颜色, 集成到主题里面, 现在的问题是切换主题字体颜色就变了
-  // 是否开启 link, url 匹配策略
+  // 是否开启 link
   // 是否开启 image
   // search color 配置
   // 右键菜单补充
   // 搜索
-  // 搜索插件, link插件
   // 截屏
+  // 最近连接逻辑 偏好逻辑
 
   // 发送命令
   const writeCommandInput = async (e: KeyboardEvent) => {
@@ -111,6 +113,11 @@
     }
   };
 
+  // 聚焦
+  const focus = () => {
+    session.value?.focus();
+  };
+
   // 右侧操作
   const rightActions = computed<Array<SidebarAction>>(() => [
     {
@@ -310,7 +317,7 @@
       width: 100%;
       height: 100%;
 
-      ::-webkit-scrollbar {
+      ::-webkit-scrollbar-track {
         display: none;
       }
     }

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

@@ -1,13 +1,6 @@
-import type {
-  InputPayload,
-  ITerminalChannel,
-  ITerminalOutputProcessor,
-  ITerminalSessionManager,
-  OutputPayload,
-  Protocol,
-} from '../types/terminal.type';
+import type { InputPayload, ITerminalChannel, ITerminalOutputProcessor, ITerminalSessionManager, OutputPayload, Protocol, } from '../types/terminal.type';
 import { OutputProtocol } from '../types/terminal.protocol';
-import { getHostTerminalAccessToken } from '@/api/asset/host-terminal';
+import { getTerminalAccessToken } from '@/api/asset/host-terminal';
 import { Message } from '@arco-design/web-vue';
 import { sleep } from '@/utils';
 import TerminalOutputProcessor from './terminal-output-processor';
@@ -28,7 +21,7 @@ export default class TerminalChannel implements ITerminalChannel {
   // 初始化
   async init() {
     // 获取 access
-    const { data: accessToken } = await getHostTerminalAccessToken();
+    const { data: accessToken } = await getTerminalAccessToken();
     // 打开会话
     this.client = new WebSocket(`${wsBase}/host/terminal/${accessToken}`);
     this.client.onerror = event => {

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

@@ -70,6 +70,7 @@ export default class TerminalSession implements ITerminalSession {
   connect(): void {
     this.status = TerminalStatus.CONNECTED;
     this.connected = true;
+    this.inst.focus();
     // 注册输入事件
     this.inst.onData(s => {
       if (!this.canWrite) {

orion-ops-ui/src/views/host/terminal/index.vue

@@ -43,6 +43,7 @@
   const dictStore = useDictStore();
   const cacheStore = useCacheStore();
 
+  const originTitle = document.title;
   const render = ref(false);
 
   // 关闭视口处理
@@ -54,6 +55,9 @@
   // 加载用户终端偏好
   onBeforeMount(async () => {
     await terminalStore.fetchPreference();
+    // 设置系统主题配色
+    const dark = terminalStore.preference.theme.dark;
+    document.body.setAttribute('terminal-theme', dark ? 'dark' : 'light');
     render.value = true;
   });
 
@@ -73,6 +77,10 @@
     cacheStore.reset('authorizedHostKeys', 'authorizedHostIdentities');
     // 移除关闭视口事件
     window.removeEventListener('beforeunload', handleBeforeUnload);
+    // 去除 body style
+    document.body.removeAttribute('terminal-theme');
+    // 重置 title
+    document.title = originTitle;
   });
 
 </script>