refactor: 重构偏好模块.

2023-12-19 17:48:48 +08:00
parent 581c14d8d7
commit bb83fe447b
24 changed files with 237 additions and 211 deletions
--- a/orion-ops-ui/src/api/user/preference.ts
+++ b/orion-ops-ui/src/api/user/preference.ts
@@ -1,24 +1,26 @@
 import axios from 'axios';

-type Preference = 'SYSTEM' | 'TERMINAL'
+type PreferenceType = 'SYSTEM' | 'TERMINAL'

 /**
- * 用户偏好更新请求
+ * 用户偏好更新请求-单个
 */
 export interface PreferenceUpdateRequest {
-  type: Preference;
-  config: object;
+  type: PreferenceType;
+  item: string;
+  value: any;
 }

 /**
- * 用户偏好查询响应
+ * 用户偏好更新请求-部分
 */
-export interface PreferenceQueryResponse<T> {
-  config: T;
+export interface PreferenceUpdatePartialRequest {
+  type: PreferenceType;
+  config: Record<string, any> | object;
 }

 /**
- * 更新用户偏好-整体
+ * 更新用户偏好-单个
 */
 export function updatePreference(request: PreferenceUpdateRequest) {
  return axios.put('/infra/preference/update', request);
@@ -27,14 +29,14 @@ export function updatePreference(request: PreferenceUpdateRequest) {
 /**
 * 更新用户偏好-部分
 */
-export function updatePreferencePartial(request: PreferenceUpdateRequest) {
+export function updatePreferencePartial(request: PreferenceUpdatePartialRequest) {
  return axios.put('/infra/preference/update-partial', request);
 }

 /**
 * 查询用户偏好
 */
-export function getPreference<T>(type: Preference) {
-  return axios.get<PreferenceQueryResponse<T>>('/infra/preference/get', { params: { type } });
+export function getPreference<T>(type: PreferenceType) {
+  return axios.get<T>('/infra/preference/get', { params: { type } });
 }

--- a/orion-ops-ui/src/components/app/setting/block.vue
+++ b/orion-ops-ui/src/components/app/setting/block.vue
@@ -24,8 +24,7 @@
  import type { SelectOption } from '@arco-design/web-vue/es/select/interface';
  import { useAppStore } from '@/store';
  import FormWrapper from './form-wrapper.vue';
-  import { updatePreferencePartial } from '@/api/user/preference';
-  import { Message } from '@arco-design/web-vue';
+  import { updatePreference } from '@/api/user/preference';

  interface OptionsProps {
    name: string;
@@ -61,20 +60,15 @@
      });
    }
    // 修改配置
-    const updateConfig = { [key]: value };
-    appStore.updateSettings(updateConfig);
+    appStore.updateSettings({ [key]: value });
    // 同步偏好
-    Message.clear();
-    const loading = Message.loading('同步中...');
    try {
-      await updatePreferencePartial({
+      await updatePreference({
        type: 'SYSTEM',
-        config: updateConfig
+        item: key,
+        value
      });
-      Message.success('同步成功');
    } catch (e) {
-    } finally {
-      loading.close();
    }
  };
 </script>
--- a/orion-ops-ui/src/store/modules/terminal/index.ts
+++ b/orion-ops-ui/src/store/modules/terminal/index.ts
@@ -1,8 +1,8 @@
 import type { TerminalDisplaySetting, TerminalPreference, TerminalState, TerminalThemeSchema } from './types';
 import { defineStore } from 'pinia';
-import { getPreference, updatePreferencePartial } from '@/api/user/preference';
+import { getPreference, updatePreference } from '@/api/user/preference';
 import { Message } from '@arco-design/web-vue';
-import { useDark, useDebounceFn } from '@vueuse/core';
+import { useDark } from '@vueuse/core';
 import { DEFAULT_SCHEMA } from '@/views/host-ops/terminal/types/terminal.theme';

 // 暗色主题
@@ -36,14 +36,14 @@ export default defineStore('terminal', {
      try {
        const { data } = await getPreference<TerminalPreference>('TERMINAL');
        // 设置默认终端主题
-        if (!data.config.themeSchema?.name) {
-          data.config.themeSchema = DEFAULT_SCHEMA;
+        if (!data.themeSchema?.name) {
+          data.themeSchema = DEFAULT_SCHEMA;
        }
-        this.preference = data.config;
+        this.preference = data;
        // 设置暗色主题
-        const userDarkTheme = data.config.darkTheme;
+        const userDarkTheme = data.darkTheme;
        if (userDarkTheme === DarkTheme.AUTO) {
-          this.isDarkTheme = data.config.themeSchema?.dark === true;
+          this.isDarkTheme = data.themeSchema?.dark === true;
        } else {
          this.isDarkTheme = userDarkTheme === DarkTheme.DARK;
        }
@@ -53,7 +53,7 @@ export default defineStore('terminal', {
    },

    // 修改暗色主题
-    changeDarkTheme(darkTheme: string) {
+    async changeDarkTheme(darkTheme: string) {
      this.preference.darkTheme = darkTheme;
      if (darkTheme === DarkTheme.DARK) {
        // 暗色
@@ -66,53 +66,47 @@ export default defineStore('terminal', {
        this.isDarkTheme = this.preference.themeSchema.dark;
      }
      // 同步配置
-      this.updateTerminalPreference();
+      await this.updateTerminalPreference('darkTheme', darkTheme);
    },

    // 修改显示配置
-    changeDisplaySetting(displaySetting: TerminalDisplaySetting) {
+    async changeDisplaySetting(displaySetting: TerminalDisplaySetting) {
      this.preference.displaySetting = displaySetting;
      // 同步配置
-      this.updateTerminalPreference();
+      await this.updateTerminalPreference('displaySetting', displaySetting);
    },

    // 选择终端主题
-    changeThemeSchema(themeSchema: TerminalThemeSchema) {
+    async changeThemeSchema(themeSchema: TerminalThemeSchema) {
      this.preference.themeSchema = themeSchema;
      // 切换主题配色
      if (this.preference.darkTheme === DarkTheme.AUTO) {
        this.isDarkTheme = themeSchema.dark;
      }
      // 同步配置
-      this.updateTerminalPreference();
+      await this.updateTerminalPreference('themeSchema', themeSchema);
    },

    // 切换新建连接类型
-    changeNewConnectionType(newConnectionType: string) {
+    async changeNewConnectionType(newConnectionType: string) {
      this.preference.newConnectionType = newConnectionType;
      // 同步配置
-      this.updateTerminalPreference();
+      await this.updateTerminalPreference('newConnectionType', newConnectionType);
    },

    // 更新终端偏好-防抖
-    updateTerminalPreference() {
-      // 初始化函数
-      if (!this.updateTerminalPreferenceFn) {
-        this.updateTerminalPreferenceFn = useDebounceFn(async () => {
-          try {
-            // 修改配置
-            await updatePreferencePartial({
-              type: 'TERMINAL',
-              config: this.preference
-            });
-          } catch (e) {
-            Message.error('同步失败');
-          }
-        }, 1500);
+    async updateTerminalPreference(item: string, value: any) {
+      try {
+        // 修改配置
+        await updatePreference({
+          type: 'TERMINAL',
+          item,
+          value
+        });
+      } catch (e) {
+        Message.error('同步失败');
      }
-      // 更新
-      this.updateTerminalPreferenceFn();
    }
-
  },
+
 });
--- a/orion-ops-ui/src/store/modules/terminal/types.ts
+++ b/orion-ops-ui/src/store/modules/terminal/types.ts
@@ -3,8 +3,6 @@ import type { Ref } from 'vue';
 export interface TerminalState {
  isDarkTheme: Ref<boolean>;
  preference: TerminalPreference;
-
-  updateTerminalPreferenceFn?: () => void;
 }

 // 终端配置
--- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-content.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-content.vue
@@ -10,7 +10,7 @@
          <!-- 新建连接 -->
          <new-connection-view v-if="tab.key === InnerTabs.NEW_CONNECTION.key" />
          <!-- 显示设置 -->
-          <terminal-view-setting v-else-if="tab.key === InnerTabs.THEME_SETTING.key" />
+          <terminal-view-setting v-else-if="tab.key === InnerTabs.VIEW_SETTING.key" />
          <span v-else>
            {{ tab.key }}
            {{ tab.title }}
--- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue
@@ -55,8 +55,6 @@
  import { useFullscreen } from '@vueuse/core';
  import { computed } from 'vue';
  import IconActions from '../layout/icon-actions.vue';
-  import { useTerminalStore } from '@/store';
-  import { DarkTheme } from '@/store/modules/terminal';

  const props = defineProps({
    modelValue: {
@@ -72,7 +70,6 @@
  const emits = defineEmits(['update:modelValue', 'clickTab', 'deleteTab', 'share']);

  const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
-  const terminalStore = useTerminalStore();

  // 顶部操作
  const actions = computed<Array<SidebarAction>>(() => [
@@ -82,11 +79,6 @@
      visible: false,
      click: () => emits('share')
    },
-    {
-      icon: terminalStore.isDarkTheme ? 'icon-sun-fill' : 'icon-moon-fill',
-      content: terminalStore.isDarkTheme ? '点击切换为亮色模式' : '点击切换为暗色模式',
-      click: () => terminalStore.changeDarkTheme(terminalStore.isDarkTheme ? DarkTheme.LIGHT : DarkTheme.DARK)
-    },
    {
      icon: isFullscreen.value ? 'icon-fullscreen-exit' : 'icon-fullscreen',
      content: isFullscreen.value ? '点击退出全屏模式' : '点击切换全屏模式',
@@ -113,7 +105,7 @@
  .terminal-header {
    --logo-width: 168px;
    --right-avatar-width: calc(28px * 5 - 7px * 4);
-    --right-action-width: calc(var(--header-height) * 3);
+    --right-action-width: calc(var(--sidebar-icon-wrapper-size) * 2);
  }

  .terminal-header {
--- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue
@@ -43,7 +43,7 @@
    {
      icon: 'icon-palette',
      content: '外观设置',
-      click: () => emits('switchTab', InnerTabs.THEME_SETTING)
+      click: () => emits('switchTab', InnerTabs.VIEW_SETTING)
    },
  ];

--- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-right-sidebar.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-right-sidebar.vue
@@ -20,11 +20,16 @@
 <script lang="ts" setup>
  import type { SidebarAction } from '../../types/terminal.const';
  import IconActions from './icon-actions.vue';
+  import { computed } from 'vue';
+  import { useTerminalStore } from '@/store';
+  import { DarkTheme } from '@/store/modules/terminal';

  const emits = defineEmits(['openSnippet', 'openSftp', 'openTransfer', 'openHistory', 'screenshot']);

+  const terminalStore = useTerminalStore();
+
  // 顶部操作
-  const topActions: Array<SidebarAction> = [
+  const topActions = computed<Array<SidebarAction>>(() => [
    {
      icon: 'icon-code-block',
      content: '打开命令片段',
@@ -49,7 +54,12 @@
      visible: false,
      click: () => emits('openHistory')
    },
-  ];
+    {
+      icon: terminalStore.isDarkTheme ? 'icon-sun-fill' : 'icon-moon-fill',
+      content: terminalStore.isDarkTheme ? '点击切换为亮色模式' : '点击切换为暗色模式',
+      click: () => terminalStore.changeDarkTheme(terminalStore.isDarkTheme ? DarkTheme.LIGHT : DarkTheme.DARK)
+    },
+  ]);

  // 底部操作
  const bottomActions: Array<SidebarAction> = [
--- a/orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-theme-block.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-theme-block.vue
@@ -6,12 +6,12 @@
        主题设置
      </h3>
      <!-- 暗色选择 -->
-      <a-radio-group :default-value="preference.darkTheme"
+      <a-radio-group v-model="preference.darkTheme"
                     class="usn"
                     size="mini"
                     type="button"
-                     @change="changeDarkTheme"
-                     :options="toOptions(darkThemeKey)">
+                     :options="toOptions(darkThemeKey)"
+                     @change="changeDarkTheme">
      </a-radio-group>
    </div>
    <!-- 内容区域 -->
--- a/orion-ops-ui/src/views/host-ops/terminal/types/terminal.const.ts
+++ b/orion-ops-ui/src/views/host-ops/terminal/types/terminal.const.ts
@@ -36,9 +36,9 @@ export const InnerTabs = {
    title: '快捷键设置',
    type: TabType.SETTING
  },
-  THEME_SETTING: {
-    key: 'themeSetting',
-    title: '主题设置',
+  VIEW_SETTING: {
+    key: 'viewSetting',
+    title: '外观设置',
    type: TabType.SETTING
  },
 };