🔱: [client] sync upgrade with 21 commits [trident-sync]

perf: 优化antdv4 示例授权页面tree的样式
build: publish success
chore: 1
chore: 1
chore: 1
fix: getFileName支持item参数

https://github.com/fast-crud/fast-crud/issues/385
fix: fs-form独立使用支持插槽

https://github.com/fast-crud/fast-crud/issues/389
fix: 修复三级以上路由页面无法缓存的问题

https://github.com/fast-crud/fast-crud/issues/394
perf: form.wrapper.buttons支持compute动态计算
feat: 表单支持变更关闭前提醒保存，form.wrapper支持beforeClose事件
fix: 修复图片裁剪按钮上下和左右相反的bug

https://github.com/fast-crud/fast-crud/issues/402
perf: alioss getAuthorization接口支持后台返回key

https://github.com/fast-crud/fast-crud/issues/405
perf: alioss getAuthorization接口支持后台返回key

https://github.com/fast-crud/fast-crud/issues/405
perf: fs-dict-tree支持插槽

https://github.com/fast-crud/fast-crud/issues/407
perf: 单选、多选、select、tree-select、table-select 都提供selected-change事件，可以获取选中的dict选项
feat: table-select 支持查看模式

https://github.com/fast-crud/fast-crud/issues/413
perf: 优化fs-admin可以在手机上操作
chore: pnpm workspace问题优化
docs: 1
chore: antdv4 支持主题色选择
...

packages/ui/certd-client/src/store/modules/settings.ts

@@ -1,63 +1,81 @@
 import { defineStore } from "pinia";
+import { theme } from "ant-design-vue";
+import _ from "lodash-es";
 // @ts-ignore
 import { LocalStorage } from "/src/utils/util.storage";
-// import { replaceStyleVariables } from "vite-plugin-theme/es/client";
-
-// import { getThemeColors, generateColors } from "/src/../build/theme-colors";
-//
-// import { mixLighten, mixDarken, tinycolor } from "vite-plugin-theme/es/colorUtils";
-
-// export async function changeTheme(color?: string) {
-//   if (color == null) {
-//     return;
-//   }
-//   const colors = generateColors({
-//     mixDarken,
-//     mixLighten,
-//     tinycolor,
-//     color
-//   });
-//
-//   return await replaceStyleVariables({
-//     colorVariables: [...getThemeColors(color), ...colors]
-//   });
-// }
-
-interface SettingState {
-  theme: any;
+export type ThemeToken = {
+  token: {
+    colorPrimary?: string;
+  };
+  algorithm: any;
+};
+export type ThemeConfig = {
+  colorPrimary: string;
+  mode: string;
+};
+export interface SettingState {
+  themeConfig?: ThemeConfig;
+  themeToken: ThemeToken;
 }
 
+const defaultThemeConfig = {
+  colorPrimary: "#1890ff",
+  mode: "light"
+};
 const SETTING_THEME_KEY = "SETTING_THEME";
 export const useSettingStore = defineStore({
   id: "app.setting",
   state: (): SettingState => ({
-    // user info
-    theme: null
+    themeConfig: null,
+    themeToken: {
+      token: {},
+      algorithm: theme.defaultAlgorithm
+    }
   }),
   getters: {
-    getTheme(): any {
-      return this.theme || LocalStorage.get(SETTING_THEME_KEY) || {};
+    getThemeConfig(): any {
+      return this.themeConfig || _.merge({}, defaultThemeConfig, LocalStorage.get(SETTING_THEME_KEY) || {});
     }
   },
   actions: {
-    persistTheme() {
-      LocalStorage.set(SETTING_THEME_KEY, this.getTheme);
+    persistThemeConfig() {
+      LocalStorage.set(SETTING_THEME_KEY, this.getThemeConfig);
     },
-    async setTheme(theme?: Object) {
-      if (theme == null) {
-        theme = this.getTheme;
+    async setThemeConfig(themeConfig?: ThemeConfig) {
+      this.themeConfig = _.merge({}, this.themeConfig, themeConfig);
+
+      this.persistThemeConfig();
+      this.setPrimaryColor(this.themeConfig.colorPrimary);
+      this.setDarkMode(this.themeConfig.mode);
+    },
+    setPrimaryColor(color: any) {
+      this.themeConfig.colorPrimary = color;
+      _.set(this.themeToken, "token.colorPrimary", color);
+      this.persistThemeConfig();
+    },
+    setDarkMode(mode: string) {
+      this.themeConfig.mode = mode;
+      if (mode === "dark") {
+        this.themeToken.algorithm = theme.darkAlgorithm;
+        // const defaultSeed = theme.defaultSeed;
+        // const mapToken = theme.darkAlgorithm(defaultSeed);
+        // less.modifyVars(mapToken);
+        // less.modifyVars({
+        //   "@colorPrimaryBg": "#111a2c",
+        //   colorPrimaryBg: "#111a2c"
+        // });
+        // less.refreshStyles();
+      } else {
+        this.themeToken.algorithm = theme.defaultAlgorithm;
+
+        // const defaultSeed = theme.defaultSeed;
+        // const mapToken = theme.defaultAlgorithm(defaultSeed);
+        // less.modifyVars(mapToken);
       }
-      this.theme = theme;
-      this.persistTheme();
-      // await changeTheme(this.theme.primaryColor);
-    },
-    async setPrimaryColor(color: any) {
-      const theme = this.theme;
-      theme.primaryColor = color;
-      await this.setTheme();
+      this.persistThemeConfig();
     },
     async init() {
-      await this.setTheme(this.getTheme);
+      await this.setThemeConfig(this.getThemeConfig);
     }
   }
 });