feat: 设置快捷键.

orion-ops-ui/src/store/modules/terminal/index.ts

@@ -27,8 +27,6 @@ export const TerminalPreferenceItem = {
   NEW_CONNECTION_TYPE: 'newConnectionType',
   // 终端主题
   THEME: 'theme',
-  // 快捷键设置
-  SHORTCUT_SETTING: 'shortcutSetting',
   // 显示设置
   DISPLAY_SETTING: 'displaySetting',
   // 操作栏设置
@@ -41,6 +39,8 @@ export const TerminalPreferenceItem = {
   PLUGINS_SETTING: 'pluginsSetting',
   // 会话设置
   SESSION_SETTING: 'sessionSetting',
+  // 快捷键设置
+  SHORTCUT_SETTING: 'shortcutSetting',
 };
 
 export default defineStore('terminal', {

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

@@ -16,6 +16,8 @@
           <terminal-theme-setting v-else-if="tab.key === InnerTabs.THEME_SETTING.key" />
           <!-- 终端设置 -->
           <terminal-general-setting v-else-if="tab.key === InnerTabs.TERMINAL_SETTING.key" />
+          <!-- 快捷键设置 -->
+          <terminal-shortcut-setting v-else-if="tab.key === InnerTabs.SHORTCUT_SETTING.key" />
         </template>
         <!-- 终端 -->
         <template v-else-if="tab.type === TerminalTabType.TERMINAL">
@@ -41,9 +43,10 @@
   import { addEventListen, removeEventListen } from '@/utils/event';
   import EmptyRecommend from './empty-recommend.vue';
   import NewConnectionView from '../new-connection/new-connection-view.vue';
-  import TerminalDisplaySetting from '../view-setting/terminal-display-setting.vue';
-  import TerminalThemeSetting from '../view-setting/terminal-theme-setting.vue';
-  import TerminalGeneralSetting from '../view-setting/terminal-general-setting.vue';
+  import TerminalDisplaySetting from '../setting/terminal-display-setting.vue';
+  import TerminalThemeSetting from '../setting/terminal-theme-setting.vue';
+  import TerminalGeneralSetting from '../setting/terminal-general-setting.vue';
+  import TerminalShortcutSetting from '../setting/terminal-shortcut-setting.vue';
   import TerminalView from '../xterm/terminal-view.vue';
 
   const { preference, tabManager, sessionManager } = useTerminalStore();

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

@@ -103,7 +103,7 @@
   import { fontFamilyKey, fontSizeKey, fontWeightKey, fontFamilySuffix, cursorStyleKey } from '../../types/terminal.const';
   import { labelFilter } from '@/types/form';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
-  import TerminalExample from '../view-setting/terminal-example.vue';
+  import TerminalExample from '../setting/terminal-example.vue';
 
   const { toOptions, toRadioOptions } = useDictStore();
   const { preference, updateTerminalPreference } = useTerminalStore();

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="terminal-setting-block">
+    <!-- 顶部 -->
+    <div class="terminal-setting-subtitle-wrapper">
+      <h3 class="terminal-setting-subtitle">
+        终端快捷键
+      </h3>
+    </div>
+    <!-- 加载中 -->
+    <a-skeleton v-if="loading"
+                class="skeleton-wrapper"
+                :animation="true">
+      <a-skeleton-line :rows="8" />
+    </a-skeleton>
+    <!-- 内容区域 -->
+    <div v-else class="terminal-setting-body terminal-shortcut-container">
+      <!-- 提示 -->
+      <a-alert class="mb16">选择后会立刻保存, 刷新页面后生效 (设置时需要避免浏览器内置快捷键)</a-alert>
+      <div class="shortcut-row">
+        <a-space>
+          <a-tag checkable :default-checked="true">ctrl</a-tag>
+          <a-tag checkable :default-checked="true">shift</a-tag>
+          <a-tag checkable :default-checked="true">alt</a-tag>
+          <icon-plus />
+          <a-tag :default-checked="true">alt</a-tag>
+        </a-space>
+      </div>
+      <div class="shortcut-row">2</div>
+      <div class="shortcut-row">3</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'TerminalShortcutBlock'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { useTerminalStore } from '@/store';
+  import { TerminalPreferenceItem } from '@/store/modules/terminal';
+  import { onMounted, ref } from 'vue';
+  import { getPreference } from '@/api/user/preference';
+  import useLoading from '@/hooks/loading';
+
+  const { updateTerminalPreference } = useTerminalStore();
+  const { loading, setLoading } = useLoading();
+
+
+  // 加载用户快捷键
+  onMounted(async () => {
+    try {
+      const { data } = await getPreference<Record<string, any>>('TERMINAL', [TerminalPreferenceItem.SHORTCUT_SETTING]);
+    } catch (e) {
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+  @terminal-width: 458px;
+  @terminal-height: 138px;
+
+  .terminal-shortcut-container {
+    flex-direction: column;
+
+    .shortcut-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      background: var(--color-fill-2);
+      height: 48px;
+      padding: 8px;
+      border-radius: 4px;
+      transition: .3s;
+
+      &:hover {
+        background: var(--color-fill-3);
+      }
+    }
+
+    :deep(.arco-tag) {
+      background: #FFFFFF;
+      width: 44px;
+      display: flex;
+      justify-content: center;
+      height: 26px;
+      font-size: 14px;
+      user-select: none;
+    }
+
+    :deep(.arco-tag-checked) {
+      color: #FFFFFF;
+      background: rgb(var(--arcoblue-5));
+    }
+  }
+
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="terminal-setting-container">
+    <div class="terminal-setting-wrapper">
+      <!-- 主标题 -->
+      <h2 class="terminal-setting-title">快捷键设置</h2>
+      <!-- 快捷键设置 -->
+      <terminal-shortcut-block />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'terminalShortcutSetting'
+  };
+</script>
+
+<script lang="ts" setup>
+  import TerminalShortcutBlock from './terminal-shortcut-block.vue';
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -93,9 +93,9 @@
   const session = ref<ITerminalSession>();
 
   // TODO
-  // 设置快捷键
   // 截屏
   // sftp
+  // 代码片段
 
   // 发送命令
   const writeCommandInput = async (e: KeyboardEvent) => {

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

@@ -10,10 +10,10 @@ export default class TerminalTabManager implements ITerminalTabManager {
 
   constructor() {
     // fixme
-    // this.active = InnerTabs.SHORTCUT_SETTING.key;
-    // this.items = [InnerTabs.SHORTCUT_SETTING];
-    this.active = InnerTabs.NEW_CONNECTION.key;
-    this.items = [InnerTabs.NEW_CONNECTION];
+    this.active = InnerTabs.SHORTCUT_SETTING.key;
+    this.items = [InnerTabs.SHORTCUT_SETTING];
+    // this.active = InnerTabs.NEW_CONNECTION.key;
+    // this.items = [InnerTabs.NEW_CONNECTION];
   }
 
   // 点击 tab