设置用户偏好.

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

@@ -1,10 +1,29 @@
 import { defineStore } from 'pinia';
-import defaultSettings from '@/config/settings.json';
 import { AppState } from './types';
 
+const defaultConfig: AppState = {
+  // 应用设置
+  device: 'desktop',
+  menuCollapse: false,
+  hideMenu: false,
+  // 用户偏好-布局
+  theme: 'light',
+  menu: true,
+  topMenu: false,
+  navbar: true,
+  footer: true,
+  tabBar: true,
+  menuWidth: 220,
+  colorWeak: false,
+  // 用户偏好-页面视图
+  host: 'table',
+  hostKeys: 'table',
+  hostIdentity: 'table',
+};
+
 export default defineStore('app', {
   state: (): AppState => ({
-    ...defaultSettings,
+    ...defaultConfig
   }),
 
   getters: {
@@ -17,31 +36,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>) {
       this.$patch(partial as object);
-      console.log(partial);
-    },
-
-    // 修改颜色主题
-    toggleTheme(dark: boolean) {
-      if (dark) {
-        this.theme = 'dark';
-        document.body.setAttribute('arco-theme', 'dark');
-      } else {
-        this.theme = 'light';
-        document.body.removeAttribute('arco-theme');
-      }
-    },
-
-    // 切换设备
-    toggleDevice(device: string) {
-      this.device = device;
-    },
-
-    // 切换菜单状态
-    toggleMenu(value: boolean) {
-      this.hideMenu = value;
     },
   },
 });

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

@@ -1,16 +1,42 @@
-export interface AppState {
-  theme: string;
-  colorWeak: boolean;
-  navbar: boolean;
-  menu: boolean;
-  topMenu: boolean;
-  hideMenu: boolean;
-  menuCollapse: boolean;
-  footer: boolean;
-  menuWidth: number;
-  globalSettings: boolean;
-  device: string;
-  tabBar: boolean;
+export type Theme = 'light' | 'dark'
+export type Device = 'desktop' | 'mobile'
+export type ViewType = 'table' | 'card'
 
+/**
+ * 应用状态
+ */
+export interface AppState extends AppSetting, UserPreferenceLayout, UserPreferenceViews {
   [key: string]: unknown;
 }
+
+/**
+ * 应用内配置
+ */
+export interface AppSetting {
+  device: Device;
+  menuCollapse: boolean;
+  hideMenu: boolean;
+}
+
+/**
+ * 用户偏好 - 布局
+ */
+export interface UserPreferenceLayout {
+  theme: Theme;
+  menu: boolean;
+  topMenu: boolean;
+  navbar: boolean;
+  footer: boolean;
+  tabBar: boolean;
+  menuWidth: number;
+  colorWeak: boolean;
+}
+
+/**
+ * 用户偏好 - 页面视图
+ */
+export interface UserPreferenceViews {
+  host: ViewType | string;
+  hostKeys: ViewType | string;
+  hostIdentity: ViewType | string;
+}

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

@@ -30,7 +30,9 @@ export default defineStore('user', {
 
     // 获取用户信息
     async info() {
+      // TODO 查询偏好
       const { data } = await getUserPermission();
+      // 设置用户信息
       this.setInfo({
         id: data.user.id,
         username: data.user.username,
@@ -39,6 +41,8 @@ export default defineStore('user', {
         roles: data.roles,
         permission: data.permissions,
       });
+      // TODO 设置用户偏好
+
     },
 
     // 登录