设置用户偏好.

orion-ops-ui/src/api/user/preference.ts

@@ -0,0 +1,40 @@
+import axios from 'axios';
+
+type Preference = 'SYSTEM' | 'TIPS'
+
+/**
+ * 用户偏好更新请求
+ */
+export interface PreferenceUpdateRequest {
+  type: Preference;
+  config: object;
+}
+
+/**
+ * 用户偏好查询响应
+ */
+export interface PreferenceQueryResponse {
+  config: object;
+}
+
+/**
+ * 更新用户偏好-整体
+ */
+export function updatePreference(request: PreferenceUpdateRequest) {
+  return axios.put('/infra/preference/update', request);
+}
+
+/**
+ * 更新用户偏好-部分
+ */
+export function updatePreferencePartial(request: PreferenceUpdateRequest) {
+  return axios.put('/infra/preference/update-partial', request);
+}
+
+/**
+ * 查询用户偏好
+ */
+export function getPreference(type: Preference) {
+  return axios.get<PreferenceQueryResponse>('/infra/preference/get', { params: { type } });
+}
+

orion-ops-ui/src/components/global-setting/block.vue

@@ -4,9 +4,9 @@
     <div v-for="option in options" :key="option.name" class="option-wrapper">
       <!-- 偏好项 -->
       <span>{{ option.name }}</span>
-      <!-- input -->
+      <!-- 偏好值 -->
       <form-wrapper :name="option.key"
-                    :type="option.type"
+                    :type="option.type as string"
                     :default-value="option.defaultVal"
                     :options="option.options"
                     @input-change="handleChange" />
@@ -19,6 +19,8 @@
   import { useAppStore } from '@/store';
   import FormWrapper from './form-wrapper.vue';
   import { RadioOption } from '@arco-design/web-vue/es/radio/interface';
+  import { updatePreferencePartial } from '@/api/user/preference';
+  import { Message } from '@arco-design/web-vue';
 
   interface OptionsProps {
     name: string;
@@ -37,6 +39,7 @@
       },
     },
   });
+
   const appStore = useAppStore();
 
   /**
@@ -46,10 +49,6 @@
     key: string;
     value: unknown;
   }) => {
-    // 色弱模式
-    if (key === 'colorWeak') {
-      document.body.style.filter = value ? 'invert(80%)' : 'none';
-    }
     // 顶部菜单
     if (key === 'topMenu') {
       appStore.updateSettings({
@@ -57,9 +56,21 @@
       });
     }
     // 修改配置
-    appStore.updateSettings({ [key]: value });
-    // TODO 同步偏好
-
+    const updateConfig = { [key]: value };
+    appStore.updateSettings(updateConfig);
+    // 同步偏好
+    Message.clear();
+    const loading = Message.loading('同步中...');
+    try {
+      await updatePreferencePartial({
+        type: 'SYSTEM',
+        config: updateConfig
+      });
+      Message.success('同步成功');
+    } catch (e) {
+    } finally {
+      loading.close();
+    }
   };
 </script>
 

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

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { AppState } from './types';
+import TimeScale from 'echarts/types/src/scale/Time';
 
 const defaultConfig: AppState = {
   // 应用设置
@@ -36,16 +37,17 @@ export default defineStore('app', {
   },
 
   actions: {
-    // 修改颜色主题
-    toggleTheme(dark: boolean) {
-      this.updateSettings({
-        theme: dark ? 'dark' : 'light'
-      });
-      document.body.setAttribute('arco-theme', dark ? 'dark' : 'light');
-    },
-
     // 更新配置
     updateSettings(partial: Partial<AppState>) {
+      // 主题颜色
+      if (partial.theme !== undefined) {
+        document.body.setAttribute('arco-theme', partial.theme);
+      }
+      // 色弱模式
+      if (partial.colorWeak !== undefined) {
+        document.body.style.filter = partial.colorWeak ? 'invert(80%)' : 'none';
+      }
+      // 修改配置
       this.$patch(partial as object);
     },
   },

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

@@ -4,7 +4,7 @@ import { clearToken, setToken } from '@/utils/auth';
 import { md5 } from '@/utils';
 import { removeRouteListener } from '@/utils/route-listener';
 import { UserState } from './types';
-import { useMenuStore, useTabBarStore } from '@/store';
+import { useAppStore, useMenuStore, useTabBarStore } from '@/store';
 
 export default defineStore('user', {
   state: (): UserState => ({
@@ -30,7 +30,6 @@ export default defineStore('user', {
 
     // 获取用户信息
     async info() {
-      // TODO 查询偏好
       const { data } = await getUserPermission();
       // 设置用户信息
       this.setInfo({
@@ -41,8 +40,9 @@ export default defineStore('user', {
         roles: data.roles,
         permission: data.permissions,
       });
-      // TODO 设置用户偏好
-
+      // 设置用户偏好
+      const appStore = useAppStore();
+      appStore.updateSettings(data.user.systemPreference);
     },
 
     // 登录