@pubinfo/core 2.0.0-beta.1

package/src/pages/system/not-permission/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useUserStore } from '@/stores';
+
+defineOptions({
+  name: 'NotPermission',
+});
+
+const router = useRouter();
+
+const userStore = useUserStore();
+const data = ref({
+  inter: Number.NaN,
+  countdown: 5,
+});
+
+onUnmounted(() => {
+  if (data.value.inter) {
+    window.clearInterval(data.value.inter);
+  }
+});
+
+onMounted(() => {
+  data.value.inter = window.setInterval(() => {
+    data.value.countdown--;
+    if (data.value.countdown === 0) {
+      if (data.value.inter) {
+        window.clearInterval(data.value.inter);
+      }
+      goBack();
+    }
+  }, 1000);
+});
+
+async function goBack() {
+  await userStore.logout();
+  router.push({
+    name: 'login',
+  });
+}
+</script>
+
+<template>
+  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
+    <div class="noPermissionIcon w-300px h-300px lg:w-400px lg:h-400px" />
+    <div class="flex flex-col gap-4">
+      <h1 class="m-0 text-6xl font-sans dark:text-[#C9D6EF]">
+        403
+      </h1>
+      <div class="desc mx-0 text-xl text-stone-5 dark:text-[#C9D6EF]">
+        抱歉,你无权访问系统,请联系管理员
+      </div>
+      <div>
+        <HButton @click="goBack">
+          {{ data.countdown }} 秒后，返回登录页
+        </HButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.noPermissionIcon {
+  background: url("@/assets/icons/403.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+[data-theme="dark"] {
+  .noPermissionIcon {
+    background: url("@/assets/icons/403_dark.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

package/src/pages/system/reload.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const router = useRouter();
+
+onMounted(() => {
+  router.go(-1);
+});
+</script>
+
+<template>
+  <div />
+</template>

package/src/route/async.ts

@@ -0,0 +1,18 @@
+import type { Route } from '#/vue-router';
+
+let asyncRoutes: Route.recordMainRaw[] = [];
+
+/**
+ * 定义并注册动态路由
+ */
+export function defineAsyncRoutes(routes: Route.recordMainRaw[]) {
+  asyncRoutes = [...asyncRoutes, ...routes];
+  return routes;
+}
+
+/**
+ * 读取注册的动态路由
+ */
+export function getAsyncRoutes() {
+  return asyncRoutes;
+}

package/src/route/guard/auth.ts

@@ -0,0 +1,92 @@
+import type { Router } from 'vue-router';
+import {
+  useFavoritesStore,
+  useRouteStore,
+  useSettingsStore,
+  useTabbarStore,
+  useUserStore,
+} from '@/stores';
+
+/** 权限路由守卫 */
+export function createAuthGuard(router: Router) {
+  const userStore = useUserStore();
+  const routeStore = useRouteStore();
+  const settingsStore = useSettingsStore();
+  const tabbarStore = useTabbarStore();
+  const favoritesStore = useFavoritesStore();
+
+  router.beforeEach(async (to, from) => {
+    const isAuthenticated = userStore.isLogin;
+
+    // 是否已登录
+    if (!isAuthenticated) {
+      // 白名单路由直接进入
+      if (to.meta.whiteList) {
+        return;
+      }
+
+      return {
+        name: 'Login',
+        query: { redirect: to.fullPath !== '/' ? to.fullPath : undefined },
+      };
+    }
+
+    // 是否已根据权限动态生成并注册路由
+    if (!routeStore.isGenerate) {
+      await Promise.allSettled([
+        // 获取用户组织列表
+        userStore.getUserInfo(),
+        // 获取用户偏好设置
+        settingsStore.settings.app.enableSettingPreferences && settingsStore.getPreferencesAll(),
+      ]);
+
+      await Promise.allSettled([
+        // 复原固定标签页
+        (tabbarStore as any).recoveryStorage(),
+        // 复原收藏夹
+        (favoritesStore as any).recoveryStorage(),
+        // 生成动态路由
+        settingsStore.settings.app.routeBaseOn === 'frontend' && routeStore.generateRoutesAtFront(),
+        settingsStore.settings.app.routeBaseOn === 'backend' && routeStore.generateRoutesAtBack(),
+      ]);
+
+      // 注册并记录路由数据
+      // 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name
+      // 则通过调用 router.addRoute() 返回的回调进行删除
+      const removeRoutes: Array<{
+        (): void
+        system?: boolean
+      }> = [];
+
+      routeStore.flatRoutes.forEach((route) => {
+        if (!/^(https?:|mailto:|tel:)/.test(route.path)) {
+          removeRoutes.push(router.addRoute(route));
+        }
+      });
+
+      routeStore.flatSystemRoutes.forEach((route) => {
+        const removeRoute: {
+          (): void
+          system?: boolean
+        } = router.addRoute(route);
+        removeRoute.system = true;
+        removeRoutes.push(removeRoute);
+      });
+
+      routeStore.setCurrentRemoveRoutes(removeRoutes);
+
+      // 判断是否没有任何权限啊
+      if (!routeStore.routes.length) {
+        return { name: 'NotPermission' };
+      }
+
+      // 动态路由生成并注册后，重新进入当前路由
+      return to.fullPath;
+    }
+
+    // 已登录状态下，进入登录页会强制跳转到主页
+    if (to.name === 'Login') {
+      return { name: 'Home', replace: true };
+    }
+  });
+}

package/src/route/guard/basic.ts

@@ -0,0 +1,23 @@
+import type { Router } from 'vue-router';
+import {
+  useSettingsStore,
+} from '@/stores';
+import { useNProgress } from '@vueuse/integrations/useNProgress';
+
+/** 基础路由守卫 */
+export function createBasicGuard(router: Router) {
+  const settingsStore = useSettingsStore();
+  const { start, done } = useNProgress();
+
+  if (settingsStore.settings.app.enableProgress) {
+    router.beforeEach((to, from) => {
+      if (to.path !== from.path) {
+        start();
+      }
+    });
+
+    router.afterEach(() => {
+      done();
+    });
+  }
+}

package/src/route/guard/index.ts

@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './basic';
+export * from './setting';

package/src/route/guard/setting.ts

@@ -0,0 +1,122 @@
+import type { RouterMetaRawBaseOptions } from '#/vue-router';
+import type { Router } from 'vue-router';
+import {
+  useIframeStore,
+  useKeepAliveStore,
+  useMenuStore,
+  useSettingsStore,
+  useTabbarStore,
+  useUserStore,
+} from '@/stores';
+
+/** 配置路由守卫 */
+export function createSettingGuard(router: Router) {
+  const settingsStore = useSettingsStore();
+  const menuStore = useMenuStore();
+  const tabbarStore = useTabbarStore();
+  const iframeStore = useIframeStore();
+  const keepAliveStore = useKeepAliveStore();
+  const userStore = useUserStore();
+
+  router.beforeEach(async (to) => {
+    // 生成 iframe 列表
+    if (!iframeStore.isGenerate) {
+      await iframeStore.generateList(router.getRoutes(), userStore.user);
+    }
+
+    // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
+    if (settingsStore.settings.menu.menuMode !== 'single') {
+      menuStore.setActived(to.path);
+    }
+
+    // 如果未开启主页，但进入的是主页，则会进入第一个固定标签页或者侧边栏导航第一个模块
+    if (to.name === 'Home' && !settingsStore.settings.home.enable) {
+      const firstPin = tabbarStore.list.find(v => v.isPin);
+
+      if (settingsStore.settings.tabbar.enable && firstPin) {
+        return {
+          path: firstPin.fullPath,
+          replace: true,
+        };
+      }
+
+      if (menuStore.sidebarMenus.length > 0) {
+        return {
+          path: menuStore.sidebarMenusFirstDeepestPath,
+          replace: true,
+        };
+      }
+    }
+  });
+
+  router.afterEach(async (to, from) => {
+    // 记录页面auth
+    settingsStore.setAuth(to.meta.auth || '');
+
+    // 设置页面 title
+    settingsStore.setTitle(to.meta.breadcrumbNeste?.at(-1)?.title ?? to.meta.title);
+
+    if (to.fullPath === from.fullPath) {
+      return;
+    }
+
+    // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
+    if (to.meta.cache && !to.meta.iframe) {
+      const componentName = to.matched.at(-1)?.components?.default?.name;
+      if (componentName) {
+        keepAliveStore.add(componentName);
+      }
+      else {
+        useError(`路径 ${to.path} 对应的 SFC组件未设置组件名，会导致缓存失效(虽然 vue@3.2.34 之后会默认使用文件名,但是文件名判重的概率较大，故不采用)`);
+      }
+    }
+
+    // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
+    if (from.meta.cache && !from.meta.iframe) {
+      const componentName = from.matched.at(-1)?.components?.default.name;
+      if (componentName) {
+        const isCache = hitCache(to.name as string, from.meta.cache, from.meta.noCache);
+        const toReload = to.name === 'Reload';
+
+        if (!isCache || toReload) {
+          keepAliveStore.remove(componentName);
+        }
+      }
+    }
+
+    if (to.meta.iframe) {
+      iframeStore.open(to.fullPath);
+    }
+
+    if (from.meta.iframe) {
+      const isCache = hitCache(to.name as string, from.meta.cache, from.meta.noCache);
+      const toReload = to.name === 'Reload';
+
+      if (!isCache || toReload) {
+        iframeStore.close(from.fullPath);
+      }
+    }
+  });
+}
+
+/** 判断是否命中cache */
+function hitCache(
+  name?: string,
+  cache?: RouterMetaRawBaseOptions['cache'],
+  noCache?: RouterMetaRawBaseOptions['noCache'],
+) {
+  return cache && matched(name, cache) && !matched(name, noCache);
+}
+
+function matched(
+  name?: string,
+  condition?: RouterMetaRawBaseOptions['cache'] | RouterMetaRawBaseOptions['noCache'],
+) {
+  if (typeof condition === 'string') {
+    return condition === name;
+  }
+  if (Array.isArray(condition)) {
+    return condition.includes(name as string);
+  }
+  return false;
+}

package/src/route/index.ts

@@ -0,0 +1,12 @@
+import type { Router } from 'vue-router';
+import { createAuthGuard, createBasicGuard, createSettingGuard } from './guard';
+
+export function setupRouterGuard({ router }: { router: Router }) {
+  createBasicGuard(router);
+  createAuthGuard(router);
+  createSettingGuard(router);
+}
+
+export * from './async';
+export * from './guard';
+export * from './routes';

package/src/route/routes.ts

@@ -0,0 +1,110 @@
+// 内置路由
+import type { RouteRecordRaw } from 'vue-router';
+import { readProject } from '@/context';
+import { useSettingsStore, useUserStore } from '@/stores';
+import { isUndefined } from 'lodash-es';
+
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/change-password/:changePassWordToken',
+    name: 'ChangePassword',
+    component: () => import('@/pages/system/change-password/index.vue'),
+    // 特殊处理changelog-password路由，不允许直接访问
+    // 其实应该移入到鉴权组路由,但是会导致需要频繁挂载销毁路由
+    beforeEnter: (to) => {
+      if (isUndefined(to.params.changePassWordToken)) {
+        return { name: 'Login' };
+      }
+      return true;
+    },
+    meta: {
+      whiteList: true,
+      title: '修改密码',
+    },
+  },
+  {
+    path: '/change-organization/:orgId',
+    name: 'ChangeOrganization',
+    component: () => import('@/pages/system/change-organization/index.vue'),
+    beforeEnter: (to) => {
+      const user = useUserStore();
+      if (isUndefined(to.params.orgId) || to.params.orgId !== user.orgId) {
+        return { name: 'Login' };
+      }
+      return true;
+    },
+    meta: {
+      whiteList: true,
+      title: '切换组织',
+    },
+  },
+  {
+    path: '/not-permission',
+    name: 'NotPermission',
+    component: () => import('@/pages/system/not-permission/index.vue'),
+    meta: {
+      whiteList: true,
+      title: '无权限访问',
+    },
+  },
+  {
+    path: '/:all(.*)*',
+    name: 'NotFound',
+    component: () => import('@/pages/system/[...all].vue'),
+    meta: {
+      title: '找不到页面',
+    },
+  },
+];
+
+export const systemRoutes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: readProject().layout,
+    meta: {
+      title: () => useSettingsStore().settings.home.title,
+      breadcrumb: false,
+    },
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        component: () => import('@/pages/system/index.vue'),
+        meta: {
+          title: () => useSettingsStore().settings.home.title,
+          i18n: 'route.home',
+          icon: 'i-ant-design:home-twotone',
+          breadcrumb: false,
+        },
+      },
+      {
+        path: 'reload',
+        name: 'Reload',
+        component: () => import('@/pages/system/reload.vue'),
+        meta: {
+          title: '重新加载',
+          breadcrumb: false,
+        },
+      },
+      {
+        path: 'personal/profile',
+        name: 'Profile',
+        component: () => import('@/pages/personal/profile/index.vue'),
+        meta: {
+          title: '个人中心',
+          i18n: 'route.personal.profile',
+          icon: 'i-iconamoon-profile-duotone',
+        },
+      },
+      // {
+      //   path: 'personal/notification',
+      //   name: 'Notification',
+      //   component: () => import('@/pages/personal/notification.vue'),
+      //   meta: {
+      //     title: '通知中心',
+      //     i18n: 'route.personal.notification',
+      //   },
+      // },
+    ],
+  },
+];

package/src/stores/enum/index.ts

@@ -0,0 +1,29 @@
+export enum STORE_NAME {
+
+  /** @description 标签管理 */
+  FAVORITES = 'favorites',
+
+  /** @description iframe功能 */
+  IFRAME = 'iframe',
+
+  /** @description 页面缓存功能 */
+  KEEP_ALIVE = 'keepAlive',
+
+  /** @description 维护侧边栏 */
+  MENU = 'menu',
+
+  /** @description 消息通知 */
+  NOTIFICATION = 'notification',
+
+  /** @description 路由系统 */
+  ROUTE = 'route',
+
+  /** @description 系统设置 */
+  SETTINGS = 'settings',
+
+  /** @description tab操作栏 */
+  TABBAR = 'tabbar',
+
+  /** @description 用户信息 */
+  USER = 'user',
+}

package/src/stores/helper.ts

@@ -0,0 +1,37 @@
+import md5 from 'md5';
+import useUserStore from './modules/user';
+
+const { getHash } = createHashString();
+
+export function getTabbarMemoryKey() {
+  return `tabbarMemory${getUserPrefix()}`;
+}
+
+export function getfavoritesMemoryKey() {
+  return `favoritesData${getUserPrefix()}`;
+}
+
+function getUserPrefix() {
+  const userStore = useUserStore();
+  const userId = userStore.userId;
+  const orgId = userStore.orgId;
+  return getHash(`${orgId}${userId}`);
+}
+
+function createHashString() {
+  const hash = new Map<string, string>();
+  function getMd5String(combinedStr: string) {
+    return md5(combinedStr).substring(0, 8);
+  }
+  function getHash(str: string) {
+    if (hash.has(str)) {
+      return hash.get(str);
+    }
+    const value = getMd5String(str);
+    hash.set(str, value);
+    return value;
+  };
+  return {
+    getHash,
+  };
+}

package/src/stores/index.ts

@@ -0,0 +1,10 @@
+import type { Pinia } from 'pinia';
+import { registerPiniaPersistPlugin } from './plugin/persist';
+import { registerPiniaSideEffectPlugin } from './plugin/sideEffect';
+
+export function setupStore({ store }: { store: Pinia }) {
+  registerPiniaPersistPlugin(store);
+  registerPiniaSideEffectPlugin(store);
+}
+
+export * from './modules';