@pubinfo/core 2.0.0-beta.1

package/src/stores/modules/favorites.ts

@@ -0,0 +1,152 @@
+import type { Favorites } from '#/favorites';
+import type { Route } from '#/vue-router';
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+
+import { resolveRoutePath } from '@/utils';
+import { defineStore } from 'pinia';
+import { STORE_NAME } from '../enum';
+
+/**
+ * 用于管理收藏夹的自定义存储。
+ *
+ * @returns 包含各种函数和响应式属性以管理收藏夹的对象。
+ */
+const useFavoritesStore = defineStore(
+  STORE_NAME.FAVORITES,
+  () => {
+    const list = ref<Favorites.recordRaw[]>([]);
+
+    /**
+     * 判断路由项是否有子项
+     * @param item 路由项
+     * @returns 返回布尔值，表示是否有子项
+     */
+    function hasChildren(item: RouteRecordRaw) {
+      let flag = true;
+      if (item.children?.every(i => i.meta?.sidebar === false)) {
+        flag = false;
+      }
+      return flag;
+    }
+
+    /**
+     * 获取源列表
+     * @param arr 路由记录数组
+     * @param basePath 基础路径
+     * @returns 源列表
+     * @example
+     * const routes: RouteRecordRaw[] = [
+     *   {
+     *     path: '/home',
+     *     component: Home,
+     *     meta: { sidebar: true },
+     *     children: [
+     *       { path: '/dashboard', component: Dashboard, meta: { sidebar: true } },
+     *       { path: '/profile', component: Profile, meta: { sidebar: true } },
+     *     ],
+     *   },
+     *   { path: '/about', component: About, meta: { sidebar: false } },
+     * ];
+     * const basePath = '/home';
+     * const sourceList = getSourceList(routes, basePath);
+     * console.log(sourceList); // Output: ['/home/dashboard', '/home/profile']
+     */
+    function getSourceList(arr: RouteRecordRaw[], basePath?: string) {
+      const list: string[] = [];
+      for (const item of arr) {
+        if (item.meta?.sidebar !== false) {
+          if (item.children && hasChildren(item)) {
+            list.push(...getSourceList(item.children, resolveRoutePath(basePath, item.path)));
+          }
+          else {
+            list.push((item.redirect as string) ?? resolveRoutePath(basePath, item.path));
+          }
+        }
+      }
+      return list;
+    }
+
+    /**
+     * 获取扁平化的侧边栏菜单列表
+     * @param routes - routeStore中的routes。
+     * @returns 扁平化的侧边栏菜单列表
+     */
+    function flatSidebarMenu(routes: Route.recordMainRaw[] = []) {
+      const list: string[] = [];
+
+      routes.forEach((item) => {
+        if (item.children) {
+          const childrenList = getSourceList(item.children as RouteRecordRaw[]);
+          list.push(...childrenList);
+        }
+      });
+
+      return list;
+    }
+
+    /**
+     * 确定给定的fullPath是否可以添加到收藏夹。
+     * @param fullPath - 要检查的fullPath。
+     * @param routes - routeStore中的routes。
+     * @returns 如果可以添加到收藏夹，则为true；否则为false。
+     */
+    function canAdd(fullPath: Favorites.recordRaw['fullPath'], routes: Route.recordMainRaw[] = []) {
+      return flatSidebarMenu(routes).includes(fullPath);
+    }
+
+    /**
+     * 判断是否已添加到收藏夹
+     * @param fullPath 完整路径
+     * @returns 如果已添加返回true，否则返回false
+     */
+    function isAdd(fullPath: Favorites.recordRaw['fullPath']) {
+      return list.value.some(item => item.fullPath === fullPath);
+    }
+
+    /**
+     * 添加收藏夹项
+     * @param {RouteLocationNormalized} route - 路由对象
+     */
+    function add(route: RouteLocationNormalized) {
+      const meta = route.matched.at(-1)?.meta;
+      if (!list.value.find(item => item.fullPath === route.fullPath)) {
+        list.value.push({
+          fullPath: route.fullPath,
+          title: meta?.title,
+          i18n: meta?.i18n,
+          icon: meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
+        });
+      }
+    }
+
+    /**
+     * 从收藏夹中移除一个项目。
+     * @param fullPath 要移除的项目的完整路径。
+     */
+    function remove(fullPath: Favorites.recordRaw['fullPath']) {
+      list.value = list.value.filter((item) => {
+        return item.fullPath !== fullPath;
+      });
+    }
+
+    /**
+     * 将列表中的项目从旧索引移动到新索引，以对项目进行排序。
+     * @param newIndex - 应将项目移动到的新索引。
+     * @param oldIndex - 应移动的项目的旧索引。
+     */
+    function sort(newIndex: number, oldIndex: number) {
+      list.value.splice(newIndex, 0, list.value.splice(oldIndex, 1)[0]);
+    }
+
+    return {
+      list,
+      canAdd,
+      isAdd,
+      add,
+      remove,
+      sort,
+    };
+  },
+);
+
+export default useFavoritesStore;

package/src/stores/modules/iframe.ts

@@ -0,0 +1,114 @@
+import type { Iframe } from '#/iframe';
+import type { RouteRecordNormalized } from 'vue-router';
+import { isFunction, isString } from 'lodash-es';
+import { defineStore } from 'pinia';
+import { STORE_NAME } from '../enum';
+
+/**
+ * useIframeStore 是一个自定义的 Vue 组合函数，提供了用于管理 store 中 iframe 的响应式状态和方法。
+ * 它返回一个包含以下属性和方法的对象：
+ * - isGenerate: 一个 ref，表示 iframe 列表是否已生成。
+ * - openedList: 一个计算属性，返回当前打开的 iframe 的过滤列表。
+ * - generateList: 一个根据提供的路由配置生成 iframe 列表的方法。
+ * - closeLoading: 一个关闭特定 iframe 的加载状态的方法。
+ * - open: 一个打开特定 iframe 并更新最近路径列表的方法。
+ * - close: 一个关闭一个或多个 iframe 并从最近路径列表中移除它们的方法。
+ */
+const useIframeStore = defineStore(
+  STORE_NAME.IFRAME,
+  () => {
+    const isGenerate = ref(false);
+    const list = ref<Iframe.recordRaw[]>([]);
+    const recentPathList = ref<Iframe.recordRaw['path'][]>([]);
+    const openedList = computed(() => list.value.filter(item => item.isOpen));
+
+    /**
+     * 生成列表
+     * @param router 路由记录数组
+     */
+    async function generateList(router: RouteRecordNormalized[], user: any) {
+      for (const routeRecord of router) {
+        if (routeRecord.meta.iframe && !routeRecord.meta.link) {
+          if (isFunction(routeRecord.meta.iframe)) {
+            routeRecord.meta.iframe = await routeRecord.meta.iframe(toRaw(user));
+          }
+          list.value.push({
+            path: routeRecord.path,
+            src: routeRecord.meta.iframe,
+            isOpen: false,
+            isLoading: true,
+          });
+        }
+      }
+
+      isGenerate.value = true;
+    }
+
+    /**
+     * 关闭指定路径的iframe加载状态。
+     * @param path - iframe的路径。
+     */
+    function closeLoading(path: string) {
+      const index = list.value.findIndex(item => item.path === path);
+      list.value[index].isLoading = !~index;
+    }
+
+    /**
+     * 打开指定路径的 iframe
+     * @param path 要打开的路径
+     */
+    function open(path: string) {
+      const item = list.value.find(item => item.path === path);
+      if (item) {
+        item.isOpen = true;
+        const idx = recentPathList.value.findIndex(item => item === path);
+        if (~idx) {
+          recentPathList.value.splice(0, 0, recentPathList.value[idx]);
+          recentPathList.value.splice(idx);
+        }
+        else {
+          recentPathList.value.unshift(path);
+        }
+      }
+    }
+
+    /**
+     * 关闭指定路径的 iframe 路由。
+     * 如果路径是一个字符串，则关闭单个 iframe 路由。
+     * 如果路径是一个字符串数组，则关闭多个 iframe 路由。
+     * @param path 要关闭的 iframe 路由的路径（路径）。
+     */
+    function close(path: string | string[]) {
+      function closeIframeRoute(path: string | string[]) {
+        const idx = list.value.findIndex(item => item.path === path);
+        if (~idx) {
+          list.value[idx].isOpen = false;
+          list.value[idx].isLoading = true;
+        }
+        recentPathList.value = recentPathList.value.filter(item => item !== path);
+      }
+
+      if (isString(path)) {
+        closeIframeRoute(path);
+      }
+      else {
+        path.forEach(closeIframeRoute);
+      }
+    }
+
+    return {
+      isGenerate,
+      openedList,
+      generateList,
+      closeLoading,
+      open,
+      close,
+
+      // 提供给sideEffect插件
+      recentPathList,
+      list,
+    };
+  },
+);
+
+export default useIframeStore;

package/src/stores/modules/index.ts

@@ -0,0 +1,9 @@
+export { default as useFavoritesStore } from './favorites';
+export { default as useIframeStore } from './iframe';
+export { default as useKeepAliveStore } from './keepAlive';
+export { default as useMenuStore } from './menu';
+export { default as useNotificationStore } from './notification';
+export { default as useRouteStore } from './route';
+export { default as useSettingsStore } from './settings';
+export { default as useTabbarStore } from './tabbar';
+export { default as useUserStore } from './user';

package/src/stores/modules/keepAlive.ts

@@ -0,0 +1,68 @@
+import { isArray, isString } from 'lodash-es';
+import { defineStore } from 'pinia';
+import { STORE_NAME } from '../enum';
+
+/**
+ * 创建一个用于管理 keep-alive 组件的存储对象。
+ *
+ * @returns keep-alive 存储对象。
+ */
+const useKeepAliveStore = defineStore(
+  STORE_NAME.KEEP_ALIVE,
+  () => {
+    const list = ref<string[]>([]);
+
+    /**
+     * 添加要缓存的组件名称到列表中
+     * @param name - 要添加的组件名称，可以是字符串或字符串数组
+     * @returns 如果成功添加了组件名称，则返回true；否则返回false
+     */
+    function add(name: string | string[]) {
+      if (isString(name)) {
+        return !list.value.includes(name) && list.value.push(name);
+      }
+      else if (isArray(name)) {
+        name.forEach((_name) => {
+          add(_name);
+        });
+      }
+      else {
+        useWarn(`KeepAlive 需要接受一个字符串或者字符串数组作为参数, 但是接受到了 ${typeof name} 类型`);
+      }
+    }
+
+    /**
+     * 从需要保持活动状态的组件列表中移除指定的组件名称。
+     *
+     * @param name - 要移除的组件名称或名称数组。
+     */
+    function remove(name: string | string[]) {
+      if (isString(name)) {
+        list.value = list.value.filter((v) => {
+          return v !== name;
+        });
+      }
+      else if (isArray(name)) {
+        list.value = list.value.filter((v) => {
+          return !name.includes(v);
+        });
+      }
+    }
+
+    /**
+     * 清空列表
+     */
+    function clean() {
+      list.value = [];
+    }
+
+    return {
+      list,
+      add,
+      remove,
+      clean,
+    };
+  },
+);
+
+export default useKeepAliveStore;

package/src/stores/modules/menu.ts

@@ -0,0 +1,207 @@
+import type { Menu } from '#/menu';
+
+import { resolveRoutePath } from '@/utils';
+import { get, isNumber } from 'lodash-es';
+import { defineStore } from 'pinia';
+
+import { STORE_NAME } from '../enum';
+import useRouteStore from './route';
+import useSettingsStore from './settings';
+
+/**
+ * 用于管理与菜单相关数据的自定义存储。
+ *
+ * @returns 包含与菜单相关的各种计算属性和函数的对象。
+ */
+const useMenuStore = defineStore(
+  STORE_NAME.MENU,
+  () => {
+    const settingsStore = useSettingsStore();
+    const routeStore = useRouteStore();
+    const menus = ref<Menu.recordMainRaw[]>([{
+      meta: {},
+      children: [],
+    }]);
+    const actived = ref(0);
+
+    /**
+     * 通过根据基本路径解析菜单项的相对路径，将其转换为完整路径
+     * @param menu - 要转换的菜单数组。
+     * @param path - 用于解析相对路径的基本路径。默认为空字符串。
+     * @returns 具有转换后的完整路径的菜单数组。
+     * @example
+     * // Example usage:
+     * const menu = [
+     *   { path: 'home', title: 'Home' },
+     *   { path: 'about', title: 'About' },
+     * ];
+     * const basePath = '/app';
+     * const convertedMenu = convertToFullPath(menu, basePath);
+     * console.log(convertedMenu);
+     * // Output:
+     * // [
+     * //   { path: '/app/home', title: 'Home' },
+     * //   { path: '/app/about', title: 'About' },
+     * // ]
+     */
+    function convertToFullPath(menu: any[], path: string = '') {
+      return menu.map((item) => {
+        item.path = resolveRoutePath(path, item.path);
+        if (item.children) {
+          item.children = convertToFullPath(item.children, item.path);
+        }
+        return item;
+      });
+    }
+
+    /**
+     * 获取所有菜单项
+     * @returns 所有菜单项的数组
+     */
+    const allMenus = computed(() => {
+      let returnMenus: Menu.recordMainRaw[] = [{
+        meta: {},
+        children: [],
+      }];
+
+      if (settingsStore.settings.menu.menuMode === 'single') {
+        returnMenus[0].children = [];
+        routeStore.routes.forEach((item) => {
+          if (!get(item, 'meta.isDev', false)) {
+            returnMenus[0].children?.push(...item.children as Menu.recordRaw[]);
+          }
+          else {
+            useWarn(`侧边栏模式(不含主导航)下省略${item.meta.title}的子集菜单，因为该菜单开启了isDev属性。`);
+          }
+        });
+      }
+      else {
+        returnMenus = routeStore.routes as Menu.recordMainRaw[];
+      }
+      returnMenus.map(item => convertToFullPath(item.children));
+
+      return returnMenus;
+    });
+
+    /**
+     * 侧边栏菜单的计算属性。
+     * @returns {Menu.recordMainRaw['children']} 当前活动菜单的子菜单，如果没有菜单则返回空数组。
+     */
+    const sidebarMenus = computed<Menu.recordMainRaw['children']>(() => {
+      const tempAllMenus = allMenus.value.filter(item => !get(item, 'meta.isDev', false));
+      if (tempAllMenus.length > 0) {
+        if (tempAllMenus.length > 1) {
+          while (get(allMenus.value[actived.value], 'meta.isDev', false) && actived.value < allMenus.value.length - 1) {
+            actived.value++;
+          }
+          return allMenus.value[actived.value].children;
+        }
+        else {
+          return get(allMenus.value[0], 'meta.isDev', false) ? [] : allMenus.value[0].children;
+        }
+      }
+      else {
+        return [];
+      }
+    });
+
+    /**
+     * TODO: 如果第一个菜单是一个isDev为true的菜单，那么这个计算属性可能会出现问题
+     * 返回第一个侧边栏菜单的最深路径的计算属性。
+     *
+     * @returns {string} 第一个侧边栏菜单的最深路径，如果没有侧边栏菜单则返回'/'。
+     */
+    const sidebarMenusFirstDeepestPath = computed(() => {
+      return sidebarMenus.value.length > 0
+        ? getDeepestPath(sidebarMenus.value[0])
+        : '/';
+    });
+
+    /**
+     * 获取最深层级的路径
+     * @param menu 菜单对象
+     * @param rootPath 根路径
+     * @returns 最深层级的路径
+     */
+    function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
+      let retnPath = '';
+      if (menu.children) {
+        const item = menu.children.find(item => item.meta?.sidebar !== false);
+        if (item) {
+          retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path));
+        }
+        else {
+          retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path));
+        }
+      }
+      else {
+        retnPath = resolveRoutePath(rootPath, menu.path);
+      }
+      return retnPath;
+    }
+
+    /**
+     * 默认打开的路径计算属性。
+     * @returns 一个字符串数组，表示默认打开的路径。
+     */
+    const defaultOpenedPaths = computed(() => {
+      const defaultOpenedPaths: string[] = [];
+
+      allMenus.value.forEach((item) => {
+        defaultOpenedPaths.push(...getDefaultOpenedPaths(item.children));
+      });
+
+      return defaultOpenedPaths;
+    });
+
+    /**
+     * 获取默认展开的路径数组
+     * @param menus 菜单数据
+     * @param rootPath 根路径
+     * @returns 默认展开的路径数组
+     */
+    function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
+      const defaultOpenedPaths: string[] = [];
+      menus.forEach((item) => {
+        if (item.meta?.defaultOpened && item.children) {
+          defaultOpenedPaths.push(resolveRoutePath(rootPath, item.path));
+          const childrenDefaultOpenedPaths = getDefaultOpenedPaths(item.children, resolveRoutePath(rootPath, item.path));
+          if (childrenDefaultOpenedPaths.length > 0) {
+            defaultOpenedPaths.push(...childrenDefaultOpenedPaths);
+          }
+        }
+      });
+      return defaultOpenedPaths;
+    }
+
+    /**
+     * 设置活动项
+     * @param data - 活动项的索引或路由
+     */
+    function setActived(data: number | string) {
+      if (isNumber(data)) {
+        // 如果是 number 类型，则认为是主导航的索引
+        actived.value = data;
+      }
+      else {
+        // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
+        const findIndex = allMenus.value.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path));
+        if (findIndex >= 0) {
+          actived.value = findIndex;
+        }
+      }
+    }
+
+    return {
+      menus,
+      actived,
+      allMenus,
+      sidebarMenus,
+      sidebarMenusFirstDeepestPath,
+      defaultOpenedPaths,
+      setActived,
+    };
+  },
+);
+
+export default useMenuStore;

package/src/stores/modules/notification.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+import { STORE_NAME } from '../enum';
+
+const useNotificationStore = defineStore(
+  // 唯一ID
+  STORE_NAME.NOTIFICATION,
+  () => {
+    const message = ref(0);
+    const todo = ref(0);
+    const total = computed(() => message.value + todo.value);
+
+    function init() {
+      getUnreadMessage();
+      getUnreadTodo();
+    }
+    function getUnreadMessage() {
+      // 为方便演示，这里直接写死的未读数
+      message.value = 9;
+    }
+    function getUnreadTodo() {
+      // 为方便演示，这里直接写死的未读数
+      todo.value = 0;
+    }
+
+    return {
+      message,
+      todo,
+      total,
+      init,
+    };
+  },
+);
+
+export default useNotificationStore;