refactor: 配置头部工具栏颜色.

orion-ops-ui/src/api/asset/host-terminal.ts

@@ -4,6 +4,7 @@ import axios from 'axios';
 export interface TerminalTheme {
   name: string;
   dark: boolean;
+  headerBackgroundColor: string;
   schema: TerminalThemeSchema;
 }
 

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

@@ -203,26 +203,6 @@ export function getUUID() {
   });
 }
 
-/**
- * 调整颜色
- * @param color color
- * @param range 正数越浅 负数越深
- */
-export function adjustColor(color: string, range: number) {
-  let newColor = '#';
-  for (let i = 0; i < 3; i++) {
-    let c = parseInt(color.substring(i * 2 + 1, i * 2 + 3), 16);
-    c += range;
-    if (c < 0) {
-      c = 0;
-    } else if (c > 255) {
-      c = 255;
-    }
-    newColor += c.toString(16).padStart(2, '0');
-  }
-  return newColor;
-}
-
 /**
  * 清除 xss
  */

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

@@ -25,7 +25,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { SidebarAction } from '../../types/terminal.const';
+  import type { SidebarAction } from '../../types/terminal.type';
   import type { PropType } from 'vue';
 
   defineProps({

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

@@ -9,6 +9,8 @@
         <template v-if="tab.type === TabType.SETTING">
           <!-- 新建连接 -->
           <new-connection-view v-if="tab.key === InnerTabs.NEW_CONNECTION.key" />
+          <!-- 显示设置 -->
+          <terminal-display-setting v-else-if="tab.key === InnerTabs.DISPLAY_SETTING.key" />
           <!-- 主题设置 -->
           <terminal-theme-setting v-else-if="tab.key === InnerTabs.THEME_SETTING.key" />
         </template>
@@ -31,6 +33,7 @@
   import { TabType, InnerTabs } from '../../types/terminal.const';
   import { useTerminalStore } from '@/store';
   import { watch } from '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 TerminalView from '../xterm/terminal-view.vue';

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

@@ -40,7 +40,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { SidebarAction } from '../../types/terminal.const';
+  import type { SidebarAction } from '../../types/terminal.type';
   import { useFullscreen } from '@vueuse/core';
   import { computed } from 'vue';
   import { useTerminalStore } from '@/store';

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

@@ -18,7 +18,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { SidebarAction } from '../../types/terminal.const';
+  import type { SidebarAction } from '../../types/terminal.type';
   import { InnerTabs } from '../../types/terminal.const';
   import { useTerminalStore } from '@/store';
   import IconActions from './icon-actions.vue';
@@ -36,11 +36,6 @@
 
   // 底部操作
   const bottomActions: Array<SidebarAction> = [
-    {
-      icon: 'icon-drive-file',
-      content: InnerTabs.SFTP_SETTING.title,
-      click: () => tabManager.openTab(InnerTabs.SFTP_SETTING)
-    },
     {
       icon: 'icon-command',
       content: InnerTabs.SHORTCUT_SETTING.title,

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

@@ -18,7 +18,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { SidebarAction } from '../../types/terminal.const';
+  import type { SidebarAction } from '../../types/terminal.type';
   import IconActions from './icon-actions.vue';
 
   const emits = defineEmits(['openSnippet', 'openSftp', 'openTransfer', 'screenshot']);

orion-ops-ui/src/views/host/terminal/components/new-connection/ssh-extra-modal.vue

@@ -62,7 +62,7 @@
 
 <script lang="ts" setup>
   import type { HostQueryResponse } from '@/api/asset/host';
-  import type { SshExtraModel } from '../../types/terminal.const';
+  import type { SshExtraModel } from '../../types/terminal.type';
   import { ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';

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

@@ -15,7 +15,7 @@
     <!-- 内容区域 -->
     <div v-else class="terminal-setting-body terminal-theme-container">
       <!-- 提示 -->
-      <a-alert class="mb16">选择后会立刻保存, 刷新页面生效</a-alert>
+      <a-alert class="mb16">选择后会立刻保存, 刷新页面后生效</a-alert>
       <!-- 终端主题 -->
       <div class="theme-row"
            v-for="rowIndex in themes.length / 2"

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

@@ -3,7 +3,7 @@
     <!-- 头部 -->
     <div class="terminal-header"
          :style="{
-           background: adjustColor(themeSchema.background, -12)
+           background: preference.theme.headerBackgroundColor
          }">
       <!-- 左侧操作 -->
       <div class="terminal-header-left">
@@ -44,7 +44,7 @@
     <!-- 命令编辑器 -->
     <shell-editor-modal ref="modal"
                         :closable="false"
-                        :body-style="{ padding: '16px 16px 16px 0' }"
+                        :body-style="{ padding: '16px' }"
                         :dark="preference.theme.dark"
                         cancel-text="关闭"
                         @ok="writeCommand(modal.getValue())"
@@ -59,13 +59,12 @@
 </script>
 
 <script lang="ts" setup>
-  import type { SidebarAction } from '../../types/terminal.const';
+  import type { SidebarAction } from '../../types/terminal.type';
   import type { ITerminalSession, TerminalTabItem } from '../../types/terminal.type';
   import { computed, onMounted, onUnmounted, ref } from 'vue';
   import { useDictStore, useTerminalStore } from '@/store';
   import useCopy from '@/hooks/copy';
   import { connectStatusKey } from '../../types/terminal.const';
-  import { adjustColor } from '@/utils';
   import IconActions from '../layout/icon-actions.vue';
   import ShellEditorModal from '@/components/view/shell-editor/shell-editor-modal.vue';
 
@@ -83,18 +82,29 @@
   const session = ref<ITerminalSession>();
 
   // FIXME
-  // 调教 theme
-  // terminal themes 改成非同步 style
-  // 从后端获取 theme
-  // (改成可配置/拆分)
-  // 自定义 font siderBar 颜色, 集成到主题里面, 现在的问题是切换主题字体颜色就变了
-  // 是否开启 link
-  // 是否开启 image
-  // search color 配置
   // 右键菜单补充
-  // 搜索
+  // 搜索 search color 配置
   // 截屏
-  // 最近连接逻辑 偏好逻辑
+  // 主机获取逻辑 最近连接逻辑 偏好逻辑
+
+
+  // TODO
+  // 交互设置
+  // 右键选中词条
+  // 右键粘贴
+  // 启用右键菜单
+  // 自动将选中内容复制到剪切板
+  // 粘贴时删除空格
+  // 复制时删除空格
+  // 分隔符  /\()"'-.,:;<>~!@#$%^&*|+=[]{}~?│   在终端中双击文本将使用到这些符号
+  // 自动检测 url 并可以点击
+  // 支持显示图片 使用 sixel 打开图片
+
+  // 终端设置
+  // bell sound
+  // terminal emulation type: xterm 256color
+  // 回滚（ScrollBack）
+  // 保存在缓冲区的行数
 
   // 发送命令
   const writeCommandInput = async (e: KeyboardEvent) => {
@@ -249,11 +259,12 @@
     &-left, &-right {
       display: flex;
       align-items: center;
-      width: 100%;
       height: 100%;
     }
 
     &-left {
+      width: 34%;
+
       .address-wrapper {
         height: 100%;
         display: inline-flex;
@@ -278,6 +289,7 @@
     }
 
     &-right {
+      width: 66%;
       justify-content: flex-end;
 
       .command-input {

orion-ops-ui/src/views/host/terminal/types/terminal.const.ts

@@ -1,16 +1,5 @@
-import type { CSSProperties } from 'vue';
 import { getUUID } from '@/utils';
 
-// sidebar 操作类型
-export interface SidebarAction {
-  icon: string;
-  content: string;
-  visible?: boolean;
-  disabled?: boolean;
-  iconStyle?: CSSProperties;
-  click: () => void;
-}
-
 // tab 类型
 export const TabType = {
   SETTING: 'setting',
@@ -24,11 +13,6 @@ export const InnerTabs = {
     title: '新建连接',
     type: TabType.SETTING
   },
-  SFTP_SETTING: {
-    key: 'sftpSetting',
-    title: 'sftp设置',
-    type: TabType.SETTING
-  },
   SHORTCUT_SETTING: {
     key: 'shortcutSetting',
     title: '快捷键设置',
@@ -56,30 +40,6 @@ export const InnerTabs = {
   },
 };
 
-// TODO
-// 显示设置
-// 显示基础设置
-// 右侧栏
-
-// 交互设置
-// 右键选中词条
-// 右键粘贴
-// 启用右键菜单
-// 自动将选中内容复制到剪切板
-// 粘贴时删除空格
-// 复制时删除空格
-// 分隔符  /\()"'-.,:;<>~!@#$%^&*|+=[]{}~?│   在终端中双击文本将使用到这些符号
-// 自动检测 url 并可以点击
-// 支持显示图片 使用 sixel 打开图片
-
-// 终端设置
-// bell sound
-// terminal emulation type: xterm 256color
-// 回滚（ScrollBack）
-// 保存在缓冲区的行数
-
-
-
 // 新建连接类型
 export const NewConnectionType = {
   GROUP: 'group',
@@ -88,14 +48,6 @@ export const NewConnectionType = {
   LATEST: 'latest'
 };
 
-// ssh 额外配置
-export interface SshExtraModel {
-  authType?: string;
-  username?: string;
-  keyId?: number;
-  identityId?: number;
-}
-
 // 主机额外配置 ssh 认证方式
 export const ExtraSshAuthType = {
   // 使用默认认证方式

orion-ops-ui/src/views/host/terminal/types/terminal.type.ts

@@ -4,6 +4,7 @@ import type { WebglAddon } from 'xterm-addon-webgl';
 import type { WebLinksAddon } from 'xterm-addon-web-links';
 import type { SearchAddon } from 'xterm-addon-search';
 import type { ImageAddon } from 'xterm-addon-image';
+import type { CSSProperties } from 'vue';
 
 // 终端 tab 元素
 export interface TerminalTabItem {
@@ -14,6 +15,24 @@ export interface TerminalTabItem {
   [key: string]: unknown;
 }
 
+// sidebar 操作类型
+export interface SidebarAction {
+  icon: string;
+  content: string;
+  visible?: boolean;
+  disabled?: boolean;
+  iconStyle?: CSSProperties;
+  click: () => void;
+}
+
+// ssh 额外配置
+export interface SshExtraModel {
+  authType?: string;
+  username?: string;
+  keyId?: number;
+  identityId?: number;
+}
+
 // 终端协议
 export interface Protocol {
   type: string;