feat. 终端主题设置.

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

@@ -6,6 +6,7 @@ import useTabBarStore from './modules/tab-bar';
 import useCacheStore from './modules/cache';
 import useTipsStore from './modules/tips';
 import useDictStore from './modules/dict';
+import useTerminalStore from './modules/terminal';
 
 const pinia = createPinia();
 
@@ -17,6 +18,7 @@ export {
   useCacheStore,
   useTipsStore,
   useDictStore,
+  useTerminalStore,
 };
 
 export default pinia;

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

@@ -19,8 +19,6 @@ export type CacheType = 'users' | 'menus' | 'roles'
 export default defineStore('cache', {
   state: (): CacheState => ({}),
 
-  getters: {},
-
   actions: {
     // 设置
     set(name: CacheType, value: any) {

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

@@ -0,0 +1,68 @@
+import type { TerminalPreference, TerminalState, TerminalTheme } from './types';
+import { DarkTheme } from './types';
+import { defineStore } from 'pinia';
+import { getPreference, updatePreferencePartial } from '@/api/user/preference';
+import { Message } from '@arco-design/web-vue';
+import { useDark } from '@vueuse/core';
+import { DEFAULT_SCHEMA } from '@/views/host-ops/terminal/types/terminal.theme';
+
+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',
+      terminalTheme: {} as TerminalTheme,
+    }
+  }),
+
+  actions: {
+    // 修改暗色主题
+    changeDarkTheme(dark: boolean) {
+      this.isDarkTheme = dark;
+    },
+
+    // 加载终端偏好
+    async fetchPreference() {
+      try {
+        const { data } = await getPreference<TerminalPreference>('TERMINAL');
+        // 设置默认终端主题
+        if (!data.config.terminalTheme?.name) {
+          data.config.terminalTheme = DEFAULT_SCHEMA;
+        }
+        this.preference = data.config;
+        // 设置暗色主题
+        const userDarkTheme = data.config.darkTheme;
+        if (userDarkTheme === DarkTheme.AUTO) {
+          this.isDarkTheme = data.config.terminalTheme?.dark === true;
+        } else {
+          this.isDarkTheme = userDarkTheme === DarkTheme.DARK;
+        }
+      } catch (e) {
+        Message.error('配置加载失败');
+      }
+    },
+
+    // 更新终端偏好
+    async updatePreference(preference: TerminalPreference) {
+      try {
+        // 修改配置
+        await updatePreferencePartial({
+          type: 'TERMINAL',
+          config: preference
+        });
+        this.preference = preference;
+        Message.success('同步成功');
+      } catch (e) {
+        Message.error('同步失败');
+      }
+    },
+
+  },
+});

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

@@ -0,0 +1,50 @@
+import type { Ref } from 'vue';
+
+export interface TerminalState {
+  isDarkTheme: Ref<boolean>;
+  preference: TerminalPreference;
+}
+
+// 终端配置
+export interface TerminalPreference {
+  darkTheme: string,
+  terminalTheme: TerminalTheme,
+}
+
+// 暗色主题
+export const DarkTheme = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  AUTO: 'auto'
+};
+
+// 终端主题
+export interface TerminalTheme {
+  name: string;
+  dark: boolean;
+  background: string;
+  foreground: string;
+  cursor: string;
+  cursorAccent?: string;
+  selectionInactiveBackground?: string;
+  selectionBackground?: string;
+  selectionForeground?: 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;
+}