@pubinfo-nightly/core 2025.11.14

package/src/features/stores/modules/settings.ts

@@ -0,0 +1,384 @@
+import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
+import { FrownOutlined } from '@ant-design/icons-vue';
+import { usePreferredDark, useToggle } from '@vueuse/core';
+import { Modal } from 'ant-design-vue';
+import { cloneDeep, defaultsDeep, get, isArray, isEmpty, isObject, reduce, set } from 'lodash-es';
+import { defineStore } from 'pinia';
+import { createVNode } from 'vue';
+import Message from 'vue-m-message';
+import {
+  getSysconfigGetSysThemeStyleConfig,
+  getSysconfigGetThemeStyleConfig,
+  getSysconfigGetUserThemeStyleConfig,
+  postSysconfigAddOrEditUserThemeStyleConfig,
+  postSysconfigResetUserThemeStyleConfig,
+} from '@/features/api/modules/configData';
+import { useWarn } from '@/features/composables';
+import { watchDiffObject } from '@/features/composables/watchDiff';
+import { getSettings } from '@/features/settings';
+import { storage } from '@/utils';
+import { STORE_NAME } from '../enum';
+
+function objectToPaths(obj: Record<string, any>, prefix = '') {
+  return reduce(obj, (result, value, key) => {
+    const fullPath = prefix.length ? `${prefix}.${key}` : key;
+    if (isObject(value) && !isArray(value) && !isEmpty(value)) {
+      // 如果是非空对象，递归调用
+      result = result.concat(objectToPaths(value, fullPath));
+    }
+    else {
+      // 否则，添加当前路径到结果数组
+      result.push(fullPath);
+    }
+    return result;
+  }, [] as string[]);
+}
+
+const useSettingsStore = defineStore(
+  // 唯一ID
+  STORE_NAME.SETTINGS,
+  () => {
+    const settingsDefault = getSettings();
+
+    const settings = ref(settingsDefault);
+
+    const userSettings = ref<Settings.all>({});
+    const globalSettings = ref(settingsDefault);
+
+    const globaleSettingsIsActive = ref(false);
+
+    /**
+     * 对于有全局系统配置的管理员，在个人设置设置优先的原则下
+     * 应当在全局系统配置变更时提示用户是否恢复个人设置为系统默认设置
+     */
+    watchDiffObject(globalSettings, (diff: Record<string, any>) => {
+      if (!globaleSettingsIsActive.value) {
+        return;
+      }
+      const globalChangeSettingPath = objectToPaths(diff);
+      const userSettingsPath = objectToPaths(userSettings.value);
+      if (userSettingsPath.includes(globalChangeSettingPath.at(0)!)) {
+        if (storage.session.has('userSettingIsGod')) {
+          return;
+        }
+        Modal.confirm({
+          title: '系统设置提示',
+          icon: createVNode(FrownOutlined),
+          content: '当前设置被个人设置覆盖无法预览当前全局系统配置，是否需要恢复个人设置为系统默认设置',
+          okText: '重置个人配置',
+          cancelText: '不在提示',
+          onOk() {
+            resetSettings();
+          },
+          onCancel() {
+            storage.session.set('userSettingIsGod', '');
+          },
+        });
+      }
+      else {
+        const val = get(diff, globalChangeSettingPath.at(0)!);
+        set(settings.value, globalChangeSettingPath.at(0)!, val);
+      }
+    },
+    {
+      flush: 'post',
+    });
+
+    watch([
+      () => settings.value.app.colorScheme,
+      () => settings.value.app.lightTheme,
+      () => settings.value.app.darkTheme,
+    ], ([colorScheme, lightTheme, darkTheme]) => {
+      if (colorScheme === '') {
+        colorScheme = usePreferredDark() ? 'dark' : 'light';
+      }
+      switch (colorScheme) {
+        case 'light':
+          document.documentElement.classList.remove('dark');
+          document.body.setAttribute('data-theme', lightTheme);
+          break;
+        case 'dark':
+          document.documentElement.classList.add('dark');
+          document.body.setAttribute('data-theme', darkTheme);
+          break;
+      }
+    },
+    {
+      immediate: true,
+    });
+
+    watch(() => settings.value.layout.widthMode,
+      (val) => {
+        document.body.setAttribute('data-app-width-mode', val);
+      }, {
+        immediate: true,
+      },
+    );
+
+    watch(() => settings.value.menu.menuMode,
+      (val) => {
+        document.body.setAttribute('data-menu-mode', val);
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    // 操作系统
+    const os = ref<'mac' | 'windows' | 'linux' | 'other'>('other');
+    const agent = navigator.userAgent.toLowerCase();
+    switch (true) {
+      case agent.includes('mac os'):
+        os.value = 'mac';
+        break;
+      case agent.includes('windows'):
+        os.value = 'windows';
+        break;
+      case agent.includes('linux'):
+        os.value = 'linux';
+        break;
+    }
+
+    // 页面权限码
+    const auth = ref<RouteMeta['auth']>();
+
+    // 记录页面标题
+    function setAuth(_auth: RouteMeta['auth']) {
+      if (Array.isArray(_auth)) {
+        useWarn('在使用数据范围的时候,router auth字段不能为数组');
+        auth.value = _auth[0] || '';
+      }
+      else {
+        auth.value = _auth;
+      }
+    }
+
+    // 页面标题
+    const title = ref<RouteMeta['title']>();
+
+    // 记录页面标题
+    function setTitle(_title: RouteMeta['title']) {
+      title.value = _title;
+    }
+
+    // 自定义标题
+    const customTitleList = ref<{
+      fullPath: RouteLocationNormalized['fullPath']
+      title: string
+    }[]>([]);
+
+    // 设置自定义标题
+    function setCustomTitle(fullPath: RouteLocationNormalized['fullPath'], title: string) {
+      const index = customTitleList.value.findIndex(item => item.fullPath === fullPath);
+      if (index > -1) {
+        customTitleList.value[index].title = title;
+      }
+      else {
+        customTitleList.value.push({
+          fullPath,
+          title,
+        });
+      }
+    }
+
+    // 重置自定义标题
+    function resetCustomTitle(fullPath: RouteLocationNormalized['fullPath']) {
+      const index = customTitleList.value.findIndex(item => item.fullPath === fullPath);
+      if (index > -1) {
+        customTitleList.value.splice(index, 1);
+      }
+    }
+
+    // 显示模式
+    const mode = ref<'pc' | 'mobile'>('pc');
+
+    // 设置显示模式
+    function setMode(width: number) {
+      if (settings.value.layout.enableMobileAdaptation) {
+        // 先判断 UA 是否为移动端设备（手机&平板）
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+          mode.value = 'mobile';
+        }
+        else {
+          // 如果是桌面设备，则根据页面宽度判断是否需要切换为移动端展示
+          mode.value = width < 992 ? 'mobile' : 'pc';
+        }
+      }
+      else {
+        mode.value = 'pc';
+      }
+    }
+
+    // 次导航是否收起（用于记录 pc 模式下最后的状态）
+    const subMenuCollapseLastStatus = ref(settingsDefault.menu.subMenuCollapse);
+    // 切换侧边栏导航展开/收起
+    function toggleSidebarCollapse() {
+      settings.value.menu.subMenuCollapse = !settings.value.menu.subMenuCollapse;
+      if (mode.value === 'pc') {
+        subMenuCollapseLastStatus.value = !subMenuCollapseLastStatus.value;
+      }
+    }
+
+    watch(mode, (val) => {
+      switch (val) {
+        case 'pc':
+          settings.value.menu.subMenuCollapse = subMenuCollapseLastStatus.value;
+          break;
+        case 'mobile':
+          settings.value.menu.subMenuCollapse = true;
+          break;
+      }
+      document.body.setAttribute('data-mode', val);
+    }, {
+      immediate: true,
+    });
+
+    // 设置默认语言
+    function setDefaultLang(lang: string) {
+      settings.value.app.defaultLang = lang;
+    }
+
+    // 设置主题颜色模式
+    function setColorScheme(color: Required<Settings.app>['colorScheme']) {
+      settings.value.app.colorScheme = color;
+    }
+
+    // 切换当前主页面最大化
+    const [mainPageMaximizeStatus, setMainPageMaximize] = useToggle(false);
+
+    /**
+     * 更新配置
+     * @param data - 配置数据
+     * @param fromBase - 是否从基础配置中更新
+     */
+    function updateSettings(data: Settings.all, fromBase = false) {
+      settings.value = defaultsDeep(data, fromBase ? settingsDefault : settings.value);
+    }
+
+    /**
+     * 更新系统全局配置
+     * @param data - 全局配置
+     */
+    function updateGlobalSettings(data: Settings.all) {
+      globalSettings.value = defaultsDeep(data, settingsDefault);
+    }
+
+    /**
+     * 更新用户配置
+     * @param data - 用户配置
+     */
+    function updateUserSettings(data: Settings.all) {
+      if (Object.keys(data).length > 0) {
+        userSettings.value = defaultsDeep(data, cloneDeep(userSettings.value));
+      }
+      else {
+        userSettings.value = {};
+      }
+    }
+
+    /**
+     * 开始监听globaleSettings变化
+     */
+    function setGlobaleSettingsFlag(flag = true) {
+      globaleSettingsIsActive.value = flag;
+    }
+
+    /**
+     * 获取全局和个人合并后的偏好设置
+     */
+    async function getPreferences() {
+      const res = await getSysconfigGetThemeStyleConfig();
+      const content = res?.data?.content;
+      if (content) {
+        updateSettings(JSON.parse(content || '{}'), true);
+      }
+    }
+
+    /**
+     * 获取个人偏好设置
+     */
+    async function getUserPreferences() {
+      const res = await getSysconfigGetUserThemeStyleConfig();
+      const content = res?.data?.content;
+      if (content) {
+        updateUserSettings(JSON.parse(content || '{}'));
+      }
+    }
+
+    /**
+     * 获取系统全局偏好设置
+     */
+    async function getPreferencesGlobalSettings() {
+      const res = await getSysconfigGetSysThemeStyleConfig();
+      const content = res?.data?.content;
+      if (content) {
+        updateGlobalSettings(JSON.parse(content || '{}'));
+      }
+    }
+
+    /**
+     * 并发获取个人偏好设置和系统全局偏好设置
+     */
+    async function getPreferencesAll() {
+      await Promise.all([
+        getPreferences(),
+        getPreferencesGlobalSettings(),
+        getUserPreferences(),
+      ]);
+      setGlobaleSettingsFlag(true);
+    }
+
+    /**
+     * 设置个人偏好设置
+     */
+    async function setPreferencesSetting(content: Settings.all) {
+      await postSysconfigAddOrEditUserThemeStyleConfig({
+        content: JSON.stringify(content),
+      });
+      updateUserSettings(content);
+    }
+
+    /**
+     * 重置用户个人偏好设置为系统设置
+     */
+    async function resetSettings() {
+      await postSysconfigResetUserThemeStyleConfig();
+      await getPreferences();
+      await getUserPreferences();
+      Message.success('已还原系统设置');
+    }
+
+    return {
+      settings,
+      os,
+      auth,
+      setAuth,
+      title,
+      setTitle,
+      customTitleList,
+      setCustomTitle,
+      resetCustomTitle,
+      mode,
+      setMode,
+      subMenuCollapseLastStatus,
+      toggleSidebarCollapse,
+      setDefaultLang,
+      setColorScheme,
+      mainPageMaximizeStatus,
+      setMainPageMaximize,
+      updateSettings,
+      globalSettings,
+      updateGlobalSettings,
+      userSettings,
+      updateUserSettings,
+      setGlobaleSettingsFlag,
+
+      getPreferencesAll,
+      setPreferencesSetting,
+      resetSettings,
+    };
+  },
+);
+
+export default useSettingsStore;
+export type SettingsStore = ReturnType<typeof useSettingsStore>;