@pubinfo/core 2.0.0-beta.1

package/src/stores/modules/settings.ts

@@ -0,0 +1,371 @@
+import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
+import {
+  getSysconfigGetSysThemeStyleConfig,
+  getSysconfigGetThemeStyleConfig,
+  getSysconfigGetUserThemeStyleConfig,
+  postSysconfigAddOrEditUserThemeStyleConfig,
+  postSysconfigResetUserThemeStyleConfig,
+} from '@/api/modules/configData';
+import { getSettings } from '@/config';
+import { objectToPaths, storage } from '@/utils';
+import { FrownOutlined } from '@ant-design/icons-vue';
+import { usePreferredDark } from '@vueuse/core';
+import { Modal } from 'ant-design-vue';
+import { cloneDeep, defaultsDeep, get, set } from 'lodash-es';
+import { defineStore } from 'pinia';
+import { createVNode } from 'vue';
+import Message from 'vue-m-message';
+import { STORE_NAME } from '../enum';
+
+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 = ref(false);
+
+    // 切换当前主页面最大化
+    function setMainPageMaximize(value?: boolean) {
+      mainPageMaximizeStatus.value = value ?? !mainPageMaximizeStatus.value;
+    }
+
+    /**
+     * 更新配置
+     * @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;

package/src/stores/modules/tabbar.ts

@@ -0,0 +1,338 @@
+import type { Tabbar } from '#/tabbar';
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+import { defineStore } from 'pinia';
+import { STORE_NAME } from '../enum';
+import useIframeStore from './iframe';
+import useKeepAliveStore from './keepAlive';
+import useRouteStore from './route';
+import useSettingsStore from './settings';
+
+// TODO: 移除createTab函数，返回值变化太多
+const useTabbarStore = defineStore(
+  STORE_NAME.TABBAR,
+  () => {
+    const settingsStore = useSettingsStore();
+    const routeStore = useRouteStore();
+    const keepAliveStore = useKeepAliveStore();
+    const iframeStore = useIframeStore();
+
+    const list = ref<Tabbar.recordRaw[]>([]);
+    const leaveIndex = ref(-1);
+
+    /**
+     * 初始化永久标签页。
+     */
+    function initPermanentTab() {
+      const tabs: Tabbar.recordRaw[] = [];
+
+      function formatTabs(items: RouteRecordRaw) {
+        if (items.children) {
+          items.children.forEach((route) => {
+            if (route.meta?.permanent && route.meta?.breadcrumbNeste) {
+              const fullPath = route.meta.breadcrumbNeste.at(-1)?.path as string;
+              const tabId = settingsStore.settings.tabbar.mergeTabsBy === 'activeMenu' ? (route.meta.activeMenu || fullPath) : fullPath;
+              tabs.push({
+                tabId,
+                fullPath,
+                routeName: route.name,
+                activeMenu: route.meta.activeMenu,
+                title: typeof route.meta.title === 'function' ? route.meta.title() : route.meta.title,
+                i18n: route.meta.i18n,
+                iframe: route.meta.iframe,
+                icon: route.meta?.icon ?? route.meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
+                activeIcon: route.meta?.activeIcon ?? route.meta?.breadcrumbNeste?.findLast(item => item.activeIcon)?.activeIcon,
+                name: route.name ? [route.name as string] : [],
+                customTitleList: [],
+                isPin: false,
+                isPermanent: true,
+              });
+            }
+          });
+        }
+      }
+
+      routeStore.flatSystemRoutes.forEach(formatTabs);
+      routeStore.flatRoutes.forEach(formatTabs);
+
+      // 常驻的标签页添加到标签栏开头
+      if (tabs.length) {
+        list.value.unshift(...tabs);
+      }
+    }
+
+    /**
+     * 添加标签页
+     * @param route 路由对象
+     */
+    async function add(route: RouteLocationNormalized) {
+      const names: string[] = [];
+      route.matched.forEach((v, i) => {
+        if (i > 0) {
+          if (v.components?.default.name) {
+            names.push(v.components.default.name);
+          }
+        }
+      });
+      const meta = route.matched.at(-1)?.meta;
+      const tabId = settingsStore.settings.tabbar.mergeTabsBy === 'activeMenu' ? (meta?.activeMenu ?? route.fullPath) : route.fullPath;
+
+      if (route.name !== 'Reload') {
+        // 记录查找到的标签页
+        const findTab = list.value.find((item) => {
+          if (settingsStore.settings.tabbar.mergeTabsBy === 'routeName' && item.routeName) {
+            return item.routeName === route.name;
+          }
+          else {
+            return item.tabId === tabId;
+          }
+        });
+        // 新增标签页
+        if (!findTab) {
+          const listItem = {
+            tabId,
+            fullPath: route.fullPath,
+            routeName: route.name!,
+            activeMenu: meta?.activeMenu,
+            title: typeof meta?.title === 'function' ? meta.title() : meta?.title,
+            i18n: meta?.i18n,
+            iframe: meta?.iframe,
+            icon: meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
+            activeIcon: meta?.activeIcon ?? meta?.breadcrumbNeste?.findLast(item => item.activeIcon)?.activeIcon,
+            name: names,
+            customTitleList: [],
+            isPin: false,
+            isPermanent: false,
+          };
+          if (leaveIndex.value >= 0) {
+            list.value.splice(leaveIndex.value + 1, 0, listItem);
+            leaveIndex.value = -1;
+          }
+          else {
+            list.value.push(listItem);
+          }
+        }
+        // 更新标签页
+        else {
+          if (settingsStore.settings.tabbar.mergeTabsBy !== '') {
+            findTab.tabId = tabId;
+            findTab.fullPath = route.fullPath;
+            findTab.routeName = route.name!;
+            findTab.activeMenu = meta?.activeMenu;
+            findTab.title = typeof meta?.title === 'function' ? meta.title() : meta?.title;
+            findTab.i18n = meta?.i18n;
+            findTab.iframe = meta?.iframe;
+            findTab.icon = meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon;
+            findTab.activeIcon = meta?.activeIcon ?? meta?.breadcrumbNeste?.findLast(item => item.activeIcon)?.activeIcon;
+          }
+        }
+      }
+    }
+
+    /**
+     * @desc: 副作用函数清除keepAlive和Iframe
+     * @param {Function} condition 满足指定的条件
+     */
+    function sideEffect(condition: (v: Tabbar.recordRaw, i: number) => boolean) {
+      const keepName: string[] = [];
+      const removeName: string[] = [];
+      const removeIframe: string[] = [];
+
+      list.value.forEach((v, i) => {
+        if (condition(v, i)) {
+          if (v.iframe) {
+            removeIframe.push(v.tabId);
+          }
+          else {
+            removeName.push(...v.name);
+          }
+        }
+        else {
+          keepName.push(...v.name);
+        }
+      });
+
+      keepAliveStore.remove(removeName.filter(v => !keepName.includes(v)));
+      iframeStore.close(removeIframe);
+    }
+
+    /**
+     * 从选项卡栏中移除一个选项卡。
+     * @param tabId 要移除的选项卡的ID。
+     */
+    function remove(tabId: Tabbar.recordRaw['tabId']) {
+      sideEffect(v => v.tabId === tabId);
+
+      list.value = list.value.filter((item) => {
+        return item.tabId !== tabId;
+      });
+    }
+
+    /**
+     * 从选项卡栏中移除除指定选项卡以外的所有选项卡。
+     * @param tabId 要保留的选项卡的ID。
+     */
+    function removeOtherSide(tabId: Tabbar.recordRaw['tabId']) {
+      sideEffect(v => v.tabId !== tabId && !v.isPermanent && !v.isPin);
+
+      list.value = list.value.filter((item) => {
+        return item.tabId === tabId || item.isPermanent || item.isPin;
+      });
+    }
+
+    /**
+     * 从标签页列表中移除指定路由左侧的标签页。
+     * @param tabId 要移除的标签页的ID
+     */
+    function removeLeftSide(tabId: Tabbar.recordRaw['tabId']) {
+      // 查找指定路由对应在标签页列表里的下标
+      const index = list.value.findIndex(item => item.tabId === tabId);
+
+      sideEffect((v, i) => i < index && !v.isPermanent && !v.isPin);
+
+      list.value = list.value.filter((item, i) => {
+        return i >= index || item.isPermanent || item.isPin;
+      });
+    }
+
+    /**
+     * 从指定路由开始，移除右侧的标签页，并执行相应的操作。
+     * @param tabId 要移除的标签页的唯一标识符
+     */
+    function removeRightSide(tabId: Tabbar.recordRaw['tabId']) {
+      // 查找指定路由对应在标签页列表里的下标
+      const index = list.value.findIndex(item => item.tabId === tabId);
+
+      sideEffect((v, i) => i > index && !v.isPermanent && !v.isPin);
+
+      list.value = list.value.filter((item, i) => {
+        return i <= index || item.isPermanent || item.isPin;
+      });
+    }
+
+    /**
+     * 将指定的标签固定在标签栏中。
+     * @param tabId 要固定的标签的唯一标识符
+     */
+    function pin(tabId: Tabbar.recordRaw['tabId']) {
+      const index = list.value.findIndex(item => item.tabId === tabId);
+      let toIndex = -1;
+      list.value.forEach((item, index) => {
+        if (item.isPermanent || item.isPin) {
+          toIndex = index;
+        }
+      });
+      if (index > toIndex) {
+        list.value.splice(toIndex + 1, 0, list.value[index]);
+        list.value.splice(index + 1, 1);
+      }
+      // 修改状态
+      list.value.forEach((item) => {
+        if (item.tabId === tabId) {
+          item.isPin = true;
+        }
+      });
+    }
+
+    /**
+     * 取消固定指定的选项卡。
+     * 将选项卡移动到最后一个固定选项卡之后的下一个可用位置。
+     * 更新选项卡的 isPin 属性为 false。
+     * 操作完成后更新存储。
+     *
+     * @param tabId - 要取消固定的选项卡的唯一标识符。
+     */
+    function unPin(tabId: Tabbar.recordRaw['tabId']) {
+      const index = list.value.findIndex(item => item.tabId === tabId);
+      let toIndex = -1;
+      list.value.forEach((item, index) => {
+        if (item.isPermanent || item.isPin) {
+          toIndex = index;
+        }
+      });
+      list.value.splice(toIndex + 1, 0, list.value[index]);
+      list.value.splice(index, 1);
+      // 修改状态
+      list.value.forEach((item) => {
+        if (item.tabId === tabId) {
+          item.isPin = false;
+        }
+      });
+    }
+
+    /**
+     * 清空列表
+     */
+    function clean() {
+      list.value = [];
+    }
+
+    /**
+     * 将列表中的元素通过将元素从旧索引移动到新索引来进行排序。
+     * @param newIndex - 应该将元素移动到的新索引。
+     * @param oldIndex - 应该移动的元素的旧索引。
+     */
+    function sort(newIndex: number, oldIndex: number) {
+      list.value.splice(newIndex, 0, list.value.splice(oldIndex, 1)[0]);
+    }
+
+    /**
+     * 设置自定义标题
+     * @param {object} options - 选项参数
+     * @param {string} options.tabId - 标签页ID
+     * @param {string} options.title - 标题
+     */
+    function setCustomTitle({ tabId, title }: {
+      tabId: Tabbar.recordRaw['tabId']
+      title: string
+    }) {
+      list.value.forEach((item) => {
+        if (item.tabId === tabId) {
+          const findItem = item.customTitleList.find(v => v.fullPath === item.fullPath);
+          if (findItem) {
+            findItem.title = title;
+          }
+          else {
+            item.customTitleList.push({
+              fullPath: item.fullPath,
+              title,
+            });
+          }
+        }
+      });
+    }
+
+    /**
+     * 重置自定义标题
+     * @param tabId - 标签栏ID
+     */
+    function resetCustomTitle(tabId: Tabbar.recordRaw['tabId']) {
+      list.value.forEach((item) => {
+        if (item.tabId === tabId) {
+          const index = item.customTitleList.findIndex(v => v.fullPath === item.fullPath);
+          if (index > -1) {
+            item.customTitleList.splice(index, 1);
+          }
+        }
+      });
+    }
+
+    return {
+      list,
+      leaveIndex,
+      initPermanentTab,
+      add,
+      remove,
+      removeOtherSide,
+      removeLeftSide,
+      removeRightSide,
+      pin,
+      unPin,
+      clean,
+      sort,
+      setCustomTitle,
+      resetCustomTitle,
+    };
+  },
+);
+
+export default useTabbarStore;