refactor: 分离终端配置.

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

@@ -1,35 +1,27 @@
-import type { TerminalDisplaySetting, TerminalPreference, TerminalState, TerminalThemeSchema } from './types';
+import type { TerminalDisplaySetting, TerminalPreference, TerminalState } from './types';
+import type { TerminalTheme } from '@/api/asset/host-terminal';
+import { getTerminalThemes } from '@/api/asset/host-terminal';
 import { defineStore } from 'pinia';
 import { getPreference, updatePreference } from '@/api/user/preference';
 import { Message } from '@arco-design/web-vue';
-import { useDark } from '@vueuse/core';
 import TerminalTabManager from '@/views/host/terminal/handler/terminal-tab-manager';
 import TerminalSessionManager from '@/views/host/terminal/handler/terminal-session-manager';
-import type { TerminalTheme } from '@/api/asset/host-terminal';
-import { getTerminalThemes } from '@/api/asset/host-terminal';
 
-// 暗色主题
-export const DarkTheme = {
-  DARK: 'dark',
-  LIGHT: 'light',
-  AUTO: 'auto'
+// 偏好项
+export const PreferenceItem = {
+  // 新建连接类型
+  NEW_CONNECTION_TYPE: 'newConnectionType',
+  // 终端主题
+  THEME: 'theme',
+  // 显示设置
+  DISPLAY_SETTING: 'displaySetting',
 };
 
 export default defineStore('terminal', {
   state: (): TerminalState => ({
-    isDarkTheme: useDark({
-      selector: 'body',
-      attribute: 'terminal-theme',
-      valueDark: DarkTheme.DARK,
-      valueLight: DarkTheme.LIGHT,
-      initialValue: DarkTheme.DARK as any,
-      storageKey: null
-    }),
     preference: {
-      darkTheme: 'auto',
       newConnectionType: 'group',
       displaySetting: {} as TerminalDisplaySetting,
-      themeSchema: {} as TerminalThemeSchema,
       theme: {} as TerminalTheme
     },
     tabManager: new TerminalTabManager(),
@@ -46,6 +38,8 @@ export default defineStore('terminal', {
         if (!data.theme) {
           const { data: themes } = await getTerminalThemes();
           data.theme = themes[0];
+          // 更新默认主题偏好
+          await this.updateTerminalPreference(PreferenceItem.THEME, data.theme);
         }
         this.preference = data;
       } catch (e) {
@@ -53,51 +47,11 @@ export default defineStore('terminal', {
       }
     },
 
-    // 修改暗色主题
-    // FIXME 删除 terminalDarkTheme
-    async changeDarkTheme(darkTheme: string) {
-      this.preference.darkTheme = darkTheme;
-      if (darkTheme === DarkTheme.DARK) {
-        // 暗色
-        this.isDarkTheme = true;
-      } else if (darkTheme === DarkTheme.LIGHT) {
-        // 亮色
-        this.isDarkTheme = false;
-      } else if (darkTheme === DarkTheme.AUTO) {
-        // 自动配色
-        this.isDarkTheme = this.preference.themeSchema.dark;
-      }
-      // 同步配置
-      await this.updateTerminalPreference('darkTheme', darkTheme);
-    },
-
-    // 修改显示配置
-    async changeDisplaySetting(displaySetting: TerminalDisplaySetting) {
-      this.preference.displaySetting = displaySetting;
-      // 同步配置
-      await this.updateTerminalPreference('displaySetting', displaySetting);
-    },
-
-    // 选择终端主题
-    async changeThemeSchema(themeSchema: TerminalThemeSchema) {
-      this.preference.themeSchema = themeSchema;
-      // 切换主题配色
-      if (this.preference.darkTheme === DarkTheme.AUTO) {
-        this.isDarkTheme = themeSchema.dark;
-      }
-      // 同步配置
-      await this.updateTerminalPreference('themeSchema', themeSchema);
-    },
-
-    // 切换新建连接类型
-    async changeNewConnectionType(newConnectionType: string) {
-      this.preference.newConnectionType = newConnectionType;
-      // 同步配置
-      await this.updateTerminalPreference('newConnectionType', newConnectionType);
-    },
-
     // 更新终端偏好
-    async updateTerminalPreference(item: string, value: any) {
+    async updateTerminalPreference(item: string, value: any, setLocal = false) {
+      if (setLocal) {
+        this.preference[item as keyof TerminalPreference] = value;
+      }
       try {
         // 修改配置
         await updatePreference({

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

@@ -1,9 +1,7 @@
-import type { Ref } from 'vue';
 import type { ITerminalSessionManager, ITerminalTabManager } from '@/views/host/terminal/types/terminal.type';
 import type { TerminalTheme } from '@/api/asset/host-terminal';
 
 export interface TerminalState {
-  isDarkTheme: Ref<boolean>;
   preference: TerminalPreference;
   tabManager: ITerminalTabManager;
   sessionManager: ITerminalSessionManager;
@@ -11,11 +9,9 @@ export interface TerminalState {
 
 // 终端配置
 export interface TerminalPreference {
-  darkTheme: string;
   newConnectionType: string;
   displaySetting: TerminalDisplaySetting;
   theme: TerminalTheme;
-  themeSchema: TerminalThemeSchema;
 }
 
 // 显示设置
@@ -29,34 +25,3 @@ export interface TerminalDisplaySetting {
   cursorBlink?: boolean;
 }
 
-// 终端主题
-export interface TerminalThemeSchema {
-  name: string;
-  dark: boolean;
-  background: string;
-  foreground: string;
-  cursor: string;
-  cursorAccent?: string;
-  selectionBackground?: string;
-  selectionForeground?: string;
-  selectionInactiveBackground?: string;
-  black: string;
-  red: string;
-  green: string;
-  yellow: string;
-  blue: string;
-  magenta: string;
-  cyan: string;
-  white: string;
-  brightBlack: string;
-  brightRed: string;
-  brightGreen: string;
-  brightYellow: string;
-  brightBlue: string;
-  brightMagenta: string;
-  brightCyan: string;
-  brightWhite: string;
-
-  [key: string]: unknown;
-}
-