From 13c352691a4688fb0d354a2cc97436e1ef13fa6d Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 11 Jan 2024 19:24:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8B=86=E5=88=86=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E9=85=8D=E7=BD=AE.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/utils/bell.ts                | 33 ++++++++
 .../components/layout/terminal-content.vue    |  5 +-
 .../layout/terminal-left-sidebar.vue          |  5 --
 .../view-setting/terminal-general-setting.vue | 28 +++++++
 .../view-setting/terminal-interact-block.vue  | 82 +++++++++++++++++++
 .../view-setting/terminal-session-block.vue   | 33 ++++++++
 .../components/xterm/terminal-view.vue        | 21 +----
 .../host/terminal/handler/terminal-session.ts |  2 +-
 .../src/views/host/terminal/index.vue         |  2 +-
 .../host/terminal/types/terminal.const.ts     |  5 --
 10 files changed, 183 insertions(+), 33 deletions(-)
 create mode 100644 orion-ops-ui/src/utils/bell.ts
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-general-setting.vue
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue

diff --git a/orion-ops-ui/src/utils/bell.ts b/orion-ops-ui/src/utils/bell.ts
new file mode 100644
index 00000000..b89e73e1
--- /dev/null
+++ b/orion-ops-ui/src/utils/bell.ts
@@ -0,0 +1,33 @@
+/**
+ * 钟鸣
+ * @param frequency 蜂鸣器频率Hz
+ * @param duration 持续时间
+ */
+export const playBell = (frequency: number = 400, duration: number = .2) => {
+  try {
+    // 创建 AudioContext 对象
+    const audioCtx = new (window.AudioContext)();
+    const buffer = audioCtx.createBuffer(1, audioCtx.sampleRate, audioCtx.sampleRate);
+    const channelData = buffer.getChannelData(0);
+    // 获取正弦波形数据
+    const sampleRate = audioCtx.sampleRate;
+    const numSamples = Math.floor(duration * sampleRate);
+    const sineWaveData = [];
+    for (let i = 0; i < numSamples; ++i) {
+      const time = i / sampleRate;
+      // 计算当前样本点的值
+      const value = Math.sin(2 * Math.PI * frequency * time);
+      // 将值转换为-1到+1之间的范围内
+      sineWaveData[i] = value > 0 ? value : -value;
+    }
+    // 复制正弦波形数据到buffer中
+    for (let i = 0; i < sineWaveData.length; ++i) {
+      channelData[i] = sineWaveData[i];
+    }
+    const source = audioCtx.createBufferSource();
+    source.buffer = buffer;
+    source.connect(audioCtx.destination);
+    source.start();
+  } catch (e) {
+  }
+};
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue
index 1e9d2c2d..3b8c5c26 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue
@@ -13,6 +13,8 @@
           <terminal-display-setting v-else-if="tab.key === InnerTabs.DISPLAY_SETTING.key" />
           <!-- 主题设置 -->
           <terminal-theme-setting v-else-if="tab.key === InnerTabs.THEME_SETTING.key" />
+          <!-- 终端设置 -->
+          <terminal-general-setting v-else-if="tab.key === InnerTabs.TERMINAL_SETTING.key" />
         </template>
         <!-- 终端 -->
         <template v-else-if="tab.type === TabType.TERMINAL">
@@ -33,9 +35,10 @@
   import { TabType, InnerTabs } from '../../types/terminal.const';
   import { useTerminalStore } from '@/store';
   import { watch } from '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 NewConnectionView from '../new-connection/new-connection-view.vue';
+  import TerminalGeneralSetting from '../view-setting/terminal-general-setting.vue';
   import TerminalView from '../xterm/terminal-view.vue';
 
   const { tabManager, sessionManager } = useTerminalStore();
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-left-sidebar.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-left-sidebar.vue
index 1b12021d..614f7538 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-left-sidebar.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-left-sidebar.vue
@@ -46,11 +46,6 @@
       content: InnerTabs.DISPLAY_SETTING.title,
       click: () => tabManager.openTab(InnerTabs.DISPLAY_SETTING)
     },
-    {
-      icon: 'icon-stamp',
-      content: InnerTabs.INTERACT_SETTING.title,
-      click: () => tabManager.openTab(InnerTabs.INTERACT_SETTING)
-    },
     {
       icon: 'icon-palette',
       content: InnerTabs.THEME_SETTING.title,
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-general-setting.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-general-setting.vue
new file mode 100644
index 00000000..77065573
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-general-setting.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="terminal-setting-container">
+    <div class="terminal-setting-wrapper">
+      <!-- 主标题 -->
+      <h2 class="terminal-setting-title">终端设置</h2>
+      <!-- 交互设置 -->
+      <terminal-interact-block />
+      <!-- 会话设置 -->
+      <terminal-session-block />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'TerminalGeneralSetting'
+  };
+</script>
+
+<script lang="ts" setup>
+  import TerminalInteractBlock from './terminal-interact-block.vue';
+  import TerminalSessionBlock from './terminal-session-block.vue';
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
new file mode 100644
index 00000000..7eec1dd6
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="terminal-setting-block">
+    <!-- 顶部 -->
+    <div class="terminal-setting-subtitle-wrapper">
+      <h3 class="terminal-setting-subtitle">
+        交互设置
+      </h3>
+    </div>
+    <!-- 提示 -->
+    <a-alert class="mb16">修改后会立刻保存, 刷新页面后生效</a-alert>
+    <!-- 内容区域 -->
+    <div class="terminal-setting-body">
+      <a-row class="" :gutter="[16, 16]">
+        <a-col :span="12">
+          <div class="block-form-item-wrapper">
+            <div class="block-form-item-label">
+              label
+            </div>
+            <div class="block-form-item-desc">
+              描述一下
+            </div>
+            <div class="block-form-item-value">
+              <a-switch />
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'TerminalInteractBlock'
+  };
+</script>
+
+<script lang="ts" setup>
+
+  // TODO
+  // 交互设置
+  // alt + 滚轮快速滚动 fastScrollModifier  'none' | 'alt'
+  // alt 点击可以切换光标位置  altClickMovesCursor
+
+  // 右键选中词条  rightClickSelectsWord
+  // 自动将选中内容复制到剪切板 onSelectionChange
+
+  // 粘贴时删除空格
+  // 复制时删除空格
+
+  // 右键粘贴
+  // 启用右键菜单
+
+  // 自动检测 url 并可以点击
+  // 支持显示图片 使用 sixel 打开图片
+
+  // bell sound
+  // 分隔符  /\()"'-.,:;<>~!@#$%^&*|+=[]{}~?│   在终端中双击文本将使用到这些符号 wordSeparator
+
+</script>
+
+<style lang="less" scoped>
+  .block-form-item-wrapper {
+    height: 84px;
+    border-radius: 4px;
+    background: var(--color-fill-2);
+    display: flex;
+    padding: 16px;
+
+    .block-form-item-label {
+      color: var(--color-content-text-3);
+      font-size: 15px;
+      font-weight: bold;
+    }
+
+    .block-form-item-desc {
+      color: var(--color-content-text-2);
+      font-size: 12px;
+    }
+  }
+
+</style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue
new file mode 100644
index 00000000..7ed4419a
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="terminal-setting-block">
+    <!-- 顶部 -->
+    <div class="terminal-setting-subtitle-wrapper">
+      <h3 class="terminal-setting-subtitle">
+        会话设置
+      </h3>
+    </div>
+    <!-- 内容区域 -->
+    <div class="terminal-setting-body">
+
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'TerminalSessionBlock'
+  };
+</script>
+
+<script lang="ts" setup>
+
+  // TODO
+  // terminal emulation type: xterm 256color
+  // 回滚（ScrollBack） scrollback 保存在缓冲区的行数
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
index a377bbda..d0c9f9c1 100644
--- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
@@ -86,26 +86,7 @@
   // 右键菜单补充
   // 搜索 search color 配置
   // 截屏
-  // 主机获取逻辑 最近连接逻辑 偏好逻辑
-
-
-  // TODO
-  // 交互设置
-  // 右键选中词条
-  // 右键粘贴
-  // 启用右键菜单
-  // 自动将选中内容复制到剪切板
-  // 粘贴时删除空格
-  // 复制时删除空格
-  // 分隔符  /\()"'-.,:;<>~!@#$%^&*|+=[]{}~?│   在终端中双击文本将使用到这些符号
-  // 自动检测 url 并可以点击
-  // 支持显示图片 使用 sixel 打开图片
-
-  // 终端设置
-  // bell sound
-  // terminal emulation type: xterm 256color
-  // 回滚（ScrollBack）
-  // 保存在缓冲区的行数
+  // 主机获取逻辑 最近连接逻辑
 
   // 发送命令
   const writeCommandInput = async (e: KeyboardEvent) => {
diff --git a/orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts b/orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts
index 1812ea70..43ffded3 100644
--- a/orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts
+++ b/orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts
@@ -48,7 +48,7 @@ export default class TerminalSession implements ITerminalSession {
     this.inst = new Terminal({
       ...(preference.displaySetting as any),
       theme: preference.theme.schema,
-      fastScrollModifier: 'shift',
+      fastScrollModifier: 'ctrl',
       fontFamily: preference.displaySetting.fontFamily + fontFamilySuffix,
     });
     // 注册插件
diff --git a/orion-ops-ui/src/views/host/terminal/index.vue b/orion-ops-ui/src/views/host/terminal/index.vue
index fb8a484d..81f9d0f5 100644
--- a/orion-ops-ui/src/views/host/terminal/index.vue
+++ b/orion-ops-ui/src/views/host/terminal/index.vue
@@ -68,7 +68,7 @@
 
   // 注册关闭视口事件
   onMounted(() => {
-    // TODO 开发阶段
+    // FIXME 开发阶段
     // window.addEventListener('beforeunload', handleBeforeUnload);
   });
 
diff --git a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
index 61c10e5d..86ad813f 100644
--- a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
+++ b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
@@ -23,11 +23,6 @@ export const InnerTabs = {
     title: '显示设置',
     type: TabType.SETTING
   },
-  INTERACT_SETTING: {
-    key: 'interactSetting',
-    title: '交互设置',
-    type: TabType.SETTING
-  },
   THEME_SETTING: {
     key: 'themeSetting',
     title: '主题设置',