feat: 右键菜单.

orion-ops-ui/src/utils/bell.ts

@@ -3,7 +3,7 @@
  * @param frequency 蜂鸣器频率Hz
  * @param duration 持续时间
  */
-export const playBell = (frequency: number = 400, duration: number = .2) => {
+export const playBell = (frequency: number = 400, duration: number = .15) => {
   try {
     // 创建 AudioContext 对象
     const audioCtx = new (window.AudioContext)();

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

@@ -60,7 +60,7 @@
       </a-row>
       <a-row class="mb16" align="stretch" :gutter="16">
         <!-- 启用响铃 -->
-        <block-setting-item label="启用响铃" desc="系统接受到 \a 时候会发出响铃 (一般不用开启)">
+        <block-setting-item label="启用响铃" desc="系统接收到 \a 时发出响铃 (一般不用开启)">
           <a-switch type="round"
                     v-model="formModel.enableBell" />
         </block-setting-item>
@@ -99,7 +99,7 @@
       return;
     }
     // 同步
-    updateTerminalPreference(TerminalPreferenceItem.INTERACT_SETTING, formModel.value, true);
+    updateTerminalPreference(TerminalPreferenceItem.INTERACT_SETTING, formModel.value);
   }, { deep: true });
 
 </script>

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

@@ -54,7 +54,7 @@
       return;
     }
     // 同步
-    updateTerminalPreference(TerminalPreferenceItem.PLUGINS_SETTING, formModel.value, true);
+    updateTerminalPreference(TerminalPreferenceItem.PLUGINS_SETTING, formModel.value);
   }, { deep: true });
 
 </script>

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

@@ -56,7 +56,7 @@
       return;
     }
     // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SESSION_SETTING, formModel.value, true);
+    updateTerminalPreference(TerminalPreferenceItem.SESSION_SETTING, formModel.value);
   }, { deep: true });
 
 </script>

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

@@ -0,0 +1,34 @@
+<template>
+  <!-- 终端右键菜单 -->
+  <a-dropdown trigger="contextMenu"
+              position="bl"
+              alignPoint>
+    <!-- 终端插槽 -->
+    <slot />
+    <!-- 右键菜单 -->
+    <template v-if="preference.interactSetting.enableRightClickMenu" #content>
+      <a-doption>Option 1</a-doption>
+      <a-doption>Option 2</a-doption>
+      <a-doption>Option 3</a-doption>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'terminalContextMenu'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { useTerminalStore } from '@/store';
+
+  const { preference } = useTerminalStore();
+
+  // TODO 颜色 配置 触发事件
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -36,17 +36,19 @@
                  :text="getDictValue(connectStatusKey, session ? session.status : 0)" />
       </div>
     </div>
-    <!-- 终端 -->
+    <!-- 终端右键菜单 -->
-    <div class="terminal-wrapper"
+    <terminal-context-menu>
-         :style="{
+      <!-- 终端容器 -->
-           background: preference.theme.schema.background
+      <div class="terminal-wrapper"
-         }">
+           :style="{ background: preference.theme.schema.background }">
-      <div class="terminal-inst" ref="terminalRef" />
+        <!-- 终端实例 -->
-      <!-- 搜索模态框 -->
+        <div class="terminal-inst" ref="terminalRef" />
-      <terminal-search-modal ref="searchModal"
+        <!-- 搜索模态框 -->
-                             @find="findWords"
+        <terminal-search-modal ref="searchModal"
-                             @close="focus" />
+                               @find="findWords"
-    </div>
+                               @close="focus" />
+      </div>
+    </terminal-context-menu>
     <!-- 命令编辑器 -->
     <shell-editor-modal ref="editorModal"
                         :closable="false"
@@ -73,6 +75,7 @@
   import IconActions from '../layout/icon-actions.vue';
   import ShellEditorModal from '@/components/view/shell-editor/shell-editor-modal.vue';
   import TerminalSearchModal from './terminal-search-modal.vue';
+  import TerminalContextMenu from './terminal-context-menu.vue';
 
   const props = defineProps<{
     tab: TerminalTabItem
@@ -89,7 +92,7 @@
   const session = ref<ITerminalSession>();
 
   // TODO
-  // 右键菜单补充     启用右键菜单 enableRightClickMenu  粘贴逻辑
+  // 右键菜单补充   enableRightClickMenu  粘贴逻辑
   // 设置快捷键  粘贴逻辑
   // 读取快捷键并且禁用快捷键
   // 截屏

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

@@ -113,12 +113,6 @@ export default class TerminalSession implements ITerminalSession {
     });
     // 设置右键选项
     dom.addEventListener('contextmenu', async (event) => {
-      // 如果开启了右键粘贴 右键选中 右键菜单 则关闭默认右键菜单
-      if (preference.interactSetting.rightClickSelectsWord
-        || preference.interactSetting.rightClickPaste
-        || preference.interactSetting.enableRightClickMenu) {
-        event.preventDefault();
-      }
       // 右键粘贴逻辑
       if (preference.interactSetting.rightClickPaste) {
         if (!this.canWrite || !this.connected) {

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

@@ -33,7 +33,7 @@
 
 <script lang="ts" setup>
   import { ref, onBeforeMount, onUnmounted, onMounted } from 'vue';
-  import { dictKeys } from './types/terminal.const';
+  import { dictKeys, InnerTabs } from './types/terminal.const';
   import { useCacheStore, useDictStore, useTerminalStore } from '@/store';
   import TerminalHeader from './components/layout/terminal-header.vue';
   import TerminalLeftSidebar from './components/layout/terminal-left-sidebar.vue';
@@ -82,8 +82,11 @@
     }
   });
 
-  // 注册关闭视口事件
+  // 事件处理
   onMounted(() => {
+    // 默认标题
+    document.title = InnerTabs.NEW_CONNECTION.title;
+    // 注册关闭视口事件
     // FIXME 开发阶段
     // window.addEventListener('beforeunload', handleBeforeUnload);
   });