@pubinfo/core 2.0.0-beta.3 → 2.0.0-beta.31

package/src/layout/components/SettingBar/components/SettingThemes.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { colorScheme, cssVarKey } from '@pubinfo/config/themes';
 import { useTheme } from '@/composables';
-import { themes } from '@pubinfo/config/themes';
+import { getThemes } from '@pubinfo/config/themes';
 import JamBookmarkF from '~icons/jam/bookmark-f';
 import PajamasCheckCircleFilled from '~icons/pajamas/check-circle-filled';
 import { useContext } from '../../../composables/useContext';
@@ -30,8 +30,10 @@ const benchmark: cssVarKey[] = [
   '--g-sub-sidebar-bg',
 ];
 
-const themeList = computed<ThemeListCard[]>(() =>
-  Object.keys(themes).map((key) => {
+const themeList = computed<ThemeListCard[]>(() => {
+  const themes = getThemes();
+
+  return Object.keys(themes).map((key) => {
     const value = themes[key];
     const colors = benchmark.map((cssVar) => {
       const cssValue = value[cssVar].startsWith('#')
@@ -48,8 +50,8 @@ const themeList = computed<ThemeListCard[]>(() =>
     };
   }).filter(cssVarScheme =>
     cssVarScheme.value['color-scheme'] === app.value.colorScheme,
-  ),
-);
+  );
+});
 
 function clickHandle(item: ThemeListCard) {
   const label = item.label;

package/src/layout/components/SettingBar/index.vue

@@ -37,6 +37,8 @@ const [open, setOpen] = useToggle(false);
 </template>
 
 <style lang="scss" scoped>
+@use "sass:color";
+
 .app-setting-warp {
   position: relative;
   position: fixed;
@@ -92,7 +94,7 @@ const [open, setOpen] = useToggle(false);
   .divider {
     width: 10px;
     height: 1px;
-    background-color: darken($color: #fff, $amount: 30%);
+    background-color: color.scale($color: #fff, $lightness: -30%)
   }
 
   .icon {

package/src/layout/components/Sidebar/MainSidebar.vue

@@ -15,14 +15,11 @@ const { settingsStore, menuStore, generateI18nTitle } = useContext();
 const { switchTo } = useMenu();
 
 function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
-  let name;
-  if ((!isActive && icon) || (isActive && !activeIcon)) {
-    name = icon;
+  if (isActive && activeIcon) {
+    return activeIcon;
   }
-  else if (isActive && activeIcon) {
-    name = activeIcon;
-  }
-  return name;
+
+  return icon;
 }
 </script>
 

package/src/layout/components/Tools/Preferences/PreferencesContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { themes } from '@pubinfo/config/themes';
+import { getThemes } from '@pubinfo/config/themes';
 import { message } from 'ant-design-vue';
 import { cloneDeep, pick } from 'lodash-es';
 import EpBack from '~icons/ep/back';
@@ -92,6 +92,7 @@ const isDark = computed({
 });
 
 const themeList = computed(() => {
+  const themes = getThemes();
   return Object.keys(themes).map((key) => {
     return {
       label: key,

package/src/layout/components/Tools/index.vue

@@ -2,22 +2,18 @@
 import { useFullscreen } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import CarbonUserAvatarFilledAlt from '~icons/carbon/user-avatar-filled-alt';
-// import FluentAlert12Regular from '~icons/fluent/alert-12-regular';
 import FluentArrowSync16Filled from '~icons/fluent/arrow-sync-16-filled';
 import FluentFullScreenMaximize16Filled from '~icons/fluent/full-screen-maximize-16-filled';
 import FluentFullScreenMinimize16Filled from '~icons/fluent/full-screen-minimize-16-filled';
 import IconamoonSearch from '~icons/iconamoon/search';
 import MaterialSymbolsExpandMoreRounded from '~icons/material-symbols/expand-more-rounded';
 import PhLineVerticalThin from '~icons/ph/line-vertical-thin';
-// import RiTranslate from '~icons/ri/translate';
 
 import { useContext } from '../../composables/useContext';
 import useMainPage from '../../composables/useMainPage';
 import useViewTransition from '../../composables/useViewTransition';
 import DayNightSwitch from './DayNightSwitch.vue';
 import HotkeysIntro from './HotkeysIntro.vue';
-// import I18nSelector from './I18nSelector.vue';
-// import Notification from './Notification.vue';
 import Preferences from './Preferences/index.vue';
 import Search from './Search.vue';
 
@@ -26,9 +22,7 @@ defineOptions({
 });
 
 const router = useRouter();
-const { settingsStore, userStore, notificationStore, generateI18nTitle } = useContext();
-
-notificationStore.init();
+const { settingsStore, userStore, generateI18nTitle } = useContext();
 
 const { t } = useI18n();
 
@@ -43,6 +37,7 @@ const userMenu = computed(() => [
   [
     {
       label: generateI18nTitle('route.home', settingsStore.settings.home.title),
+      icon: 'i-ant-design:home-twotone',
       handle: () => router.push({ name: 'Home' }),
       hide: !settingsStore.settings.home.enable,
     },
@@ -67,16 +62,14 @@ const userMenu = computed(() => [
       icon: 'i-iconamoon-synchronize-duotone',
       handle: () => router.push({
         name: 'ChangeOrganization',
-        params: { orgId: userStore.orgId },
+        params: { orgId: userStore.user.orgId },
       }),
-      hide: userStore.orgList.length <= 1,
+      hide: userStore.user.orgList.length <= 1,
     },
     {
       label: t('route.personal.profile'),
       icon: 'i-iconamoon-profile-duotone',
-      handle: () => router.push({
-        name: 'Profile',
-      }),
+      handle: () => router.push({ name: 'Profile' }),
     },
     {
       label: t('app.changePassword'),
@@ -133,7 +126,7 @@ function toggleColorScheme(event: MouseEvent) {
 
 const avatarError = ref(false);
 
-watch(() => userStore.avatar, () => {
+watch(() => userStore.user.avatar, () => {
   if (avatarError.value) {
     avatarError.value = false;
   }
@@ -175,22 +168,6 @@ const searchComponentsClass = computed(() => {
       >
         <IconamoonSearch text="14px" />
       </span>
-      <!-- <HDropdown
-        v-if="settingsStore.settings.toolbar.enableNotification"
-        class="item"
-      >
-        <HBadge
-          :value="notificationStore.total"
-        >
-          <FluentAlert12Regular text="15px" />
-        </HBadge>
-        <template #dropdown>
-          <Notification />
-        </template>
-      </HDropdown>
-      <I18nSelector class="item">
-        <RiTranslate text="15px" />
-      </I18nSelector> -->
       <span
         v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen"
         class="item"
@@ -210,8 +187,8 @@ const searchComponentsClass = computed(() => {
     </div>
     <div flex-center cursor-pointer gap-1>
       <img
-        v-if="userStore.avatar && !avatarError"
-        :src="userStore.avatar"
+        v-if="userStore.user.avatar && !avatarError"
+        :src="userStore.user.avatar"
         :onerror="() => (avatarError = true)"
         class="h-[24px] w-[24px] rounded-full"
       >
@@ -222,7 +199,7 @@ const searchComponentsClass = computed(() => {
       <PhLineVerticalThin />
       <HDropdownMenu :items="userMenu">
         <div flex-center cursor-pointer gap-1>
-          {{ userStore.account }}
+          {{ userStore.user.account }}
           <MaterialSymbolsExpandMoreRounded ml="5px" mr="10px" />
         </div>
       </HDropdownMenu>

package/src/layout/composables/useContext.ts

@@ -3,7 +3,6 @@ import type {
   useIframeStore,
   useKeepAliveStore,
   useMenuStore,
-  useNotificationStore,
   useRouteStore,
   useSettingsStore,
   useTabbarStore,
@@ -16,7 +15,6 @@ interface LayoutContext {
   keepAliveStore: ReturnType<typeof useKeepAliveStore>
   iframeStore: ReturnType<typeof useIframeStore>
   userStore: ReturnType<typeof useUserStore>
-  notificationStore: ReturnType<typeof useNotificationStore>
   menuStore: ReturnType<typeof useMenuStore>
   routeStore: ReturnType<typeof useRouteStore>
   tabbarStore: ReturnType<typeof useTabbarStore>

package/src/layout/composables/useMainPage.ts

@@ -23,7 +23,7 @@ export default function useMainPage() {
    */
   function reload() {
     router.push({
-      name: 'reload',
+      name: 'Reload',
     });
   }
 

package/src/layout/composables/useWatermark.ts

@@ -27,11 +27,11 @@ export default function useWatermark() {
     const type = settingsStore.settings.watermark.text;
     switch (type) {
       case 'U':
-        return `${userStore.account}`;
+        return `${userStore.user.account}`;
       case 'O':
         return `${userStore.userOrgName}`;
       case 'OU':
-        return `${userStore.userOrgName}  ${userStore.account}`;
+        return `${userStore.userOrgName}  ${userStore.user.account}`;
       default:
         return type;
     }

package/src/layout/provider.ts

@@ -1,14 +1,15 @@
+import { PubinfoProvider } from '@/components';
 import {
   useFavoritesStore,
   useIframeStore,
   useKeepAliveStore,
   useMenuStore,
-  useNotificationStore,
   useRouteStore,
   useSettingsStore,
   useTabbarStore,
   useUserStore,
 } from '@/stores';
+import { h } from 'vue';
 import { createContext } from './composables/useContext';
 import { useTitle } from './composables/useTitle';
 
@@ -33,7 +34,6 @@ export const Provider = defineComponent({
     const keepAliveStore = useKeepAliveStore();
     const iframeStore = useIframeStore();
     const userStore = useUserStore();
-    const notificationStore = useNotificationStore();
     const routeStore = useRouteStore();
     const tabbarStore = useTabbarStore();
     const favoritesStore = useFavoritesStore();
@@ -46,7 +46,6 @@ export const Provider = defineComponent({
       keepAliveStore,
       iframeStore,
       userStore,
-      notificationStore,
       routeStore,
       tabbarStore,
       favoritesStore,
@@ -56,6 +55,10 @@ export const Provider = defineComponent({
       generateI18nTitle,
     });
 
-    return () => slots?.default?.();
+    return () => h(
+      PubinfoProvider,
+      {},
+      () => slots?.default?.(),
+    );
   },
 });

package/src/layout/ui-kit/HDialog.vue

@@ -23,7 +23,10 @@ const emit = defineEmits<{
   'close': []
 }>();
 
-const slots = useSlots();
+const slots = defineSlots<{
+  default: any
+  footer: any
+}>();
 
 const overlayTransitionClass = ref({
   enter: 'ease-in-out duration-500',

package/src/layout/ui-kit/HSlideover.vue

@@ -26,7 +26,10 @@ const emit = defineEmits<{
   'close': []
 }>();
 
-const slots = useSlots();
+const slots = defineSlots<{
+  default: any
+  footer: any
+}>();
 
 const overlayTransitionClass = ref({
   enter: 'ease-in-out duration-500',

package/src/pages/system/change-organization/index.vue

@@ -11,7 +11,7 @@ const userStore = useUserStore();
 const router = useRouter();
 
 // 切断响应式，否则组织清楚后会导致页面闪烁
-const rawOrganization = toRaw(userStore.orgList);
+const rawOrganization = toRaw(userStore.user.orgList);
 const orgList = computed(() => {
   const org = rawOrganization.map((item) => {
     return {
@@ -37,7 +37,7 @@ async function changeOrganization() {
   const org = orgList.value[activeIndex.value];
   const orgId = org?.orgId;
   if (orgId) {
-    if (orgId === userStore.orgId) {
+    if (orgId === userStore.user.orgId) {
       message.error('请避免切换到当前已选组织');
     }
     else {
@@ -83,7 +83,7 @@ async function changeOrganization() {
                   <span mr-10px>
                     {{ item.label }}
                   </span>
-                  <a-tag v-if="userStore.orgId === item.orgId" color="blue">
+                  <a-tag v-if="userStore.user.orgId === item.orgId" color="blue">
                     当前使用组织
                   </a-tag>
                   <a-tag v-if="item.main" color="red">

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

@@ -31,8 +31,8 @@ onMounted(() => {
   }, 1000);
 });
 
-async function goBack() {
-  await userStore.logout();
+function goBack() {
+  userStore.logout();
   router.push({
     name: 'login',
   });

package/src/route/index.ts

@@ -7,6 +7,5 @@ export function setupRouterGuard({ router }: { router: Router }) {
   createSettingGuard(router);
 }
 
-export * from './async';
 export * from './guard';
 export * from './routes';

package/src/route/routes.ts

@@ -1,9 +1,92 @@
-// 内置路由
+import type { Route } from '#/vue-router';
 import type { RouteRecordRaw } from 'vue-router';
 import { readProject } from '@/context';
 import { useSettingsStore, useUserStore } from '@/stores';
 import { isUndefined } from 'lodash-es';
 
+interface AsyncRoutesOptions {
+  /** 路由排序 */
+  sort?: number
+}
+
+interface RawAsyncRoute extends Required<AsyncRoutesOptions> {
+  routes: Route.recordMainRaw[]
+}
+
+// #region --- 动态路由
+const rawAsyncRoutes: RawAsyncRoute[] = [];
+
+/**
+ * 定义并注册动态路由
+ */
+export function defineAsyncRoutes(routes: Route.recordMainRaw[], options?: AsyncRoutesOptions) {
+  rawAsyncRoutes.push({
+    routes,
+    sort: options?.sort ?? 0,
+  });
+  return routes;
+}
+
+/**
+ * 读取注册的动态路由
+ */
+export function getAsyncRoutes() {
+  return rawAsyncRoutes
+    .sort((a, b) => a?.sort - b?.sort)
+    .map(e => e.routes)
+    .flat();
+}
+// #endregion
+
+// #region --- 系统路由
+const systemRoutes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: readProject().layout,
+    meta: {
+      title: () => useSettingsStore().settings.home.title,
+      breadcrumb: false,
+    },
+    children: [
+      {
+        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',
+        },
+      },
+    ],
+  },
+];
+
+/**
+ * 定义并注册系统路由（含Layout）
+ */
+export function defineSystemRoutes(routes: RouteRecordRaw[]) {
+  systemRoutes[0].children?.push(...routes);
+}
+
+/**
+ * 读取注册的系统路由
+ */
+export function getSystemRoutes() {
+  return systemRoutes;
+}
+// #endregion
+
+// #region --- 静态路由
 export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/change-password/:changePassWordToken',
@@ -27,8 +110,8 @@ export const constantRoutes: RouteRecordRaw[] = [
     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) {
+      const userStore = useUserStore();
+      if (isUndefined(to.params.orgId) || to.params.orgId !== userStore.user.orgId) {
         return { name: 'Login' };
       }
       return true;
@@ -56,55 +139,4 @@ export const constantRoutes: RouteRecordRaw[] = [
     },
   },
 ];
-
-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',
-      //   },
-      // },
-    ],
-  },
-];
+// #endregion

package/src/stores/helper.ts

@@ -13,8 +13,8 @@ export function getfavoritesMemoryKey() {
 
 function getUserPrefix() {
   const userStore = useUserStore();
-  const userId = userStore.userId;
-  const orgId = userStore.orgId;
+  const userId = userStore.user.userId;
+  const orgId = userStore.user.orgId;
   return getHash(`${orgId}${userId}`);
 }
 

package/src/stores/modules/favorites.ts

@@ -150,3 +150,4 @@ const useFavoritesStore = defineStore(
 );
 
 export default useFavoritesStore;
+export type FavoritesStore = ReturnType<typeof useFavoritesStore>;

package/src/stores/modules/iframe.ts

@@ -112,3 +112,4 @@ const useIframeStore = defineStore(
 );
 
 export default useIframeStore;
+export type IframeStore = ReturnType<typeof useIframeStore>;

package/src/stores/modules/index.ts

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

package/src/stores/modules/keepAlive.ts

@@ -66,3 +66,4 @@ const useKeepAliveStore = defineStore(
 );
 
 export default useKeepAliveStore;
+export type KeepAliveStore = ReturnType<typeof useKeepAliveStore>;

package/src/stores/modules/menu.ts

@@ -185,13 +185,36 @@ const useMenuStore = defineStore(
       }
       else {
         // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
-        const findIndex = allMenus.value.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path));
+        const findIndex = findRootIndexByPath(allMenus.value, data);
         if (findIndex >= 0) {
           actived.value = findIndex;
         }
       }
     }
 
+    /**
+     * 根据路径查找主导航索引
+     */
+    function findRootIndexByPath(routes: Menu.recordRaw[], targetPath: string) {
+      function containsPath(route: Menu.recordRaw): boolean {
+        if (route.path === targetPath) {
+          return true;
+        }
+        if (route.children) {
+          return route.children.some(child => containsPath(child));
+        }
+        return false;
+      }
+
+      for (let i = 0; i < routes.length; i++) {
+        if (containsPath(routes[i])) {
+          return i;
+        }
+      }
+
+      return 0;
+    }
+
     return {
       menus,
       actived,
@@ -205,3 +228,4 @@ const useMenuStore = defineStore(
 );
 
 export default useMenuStore;
+export type MenuStore = ReturnType<typeof useMenuStore>;

package/src/stores/modules/route.ts

@@ -3,8 +3,7 @@ import type { RouteMeta, RouteRecordRaw } from 'vue-router';
 
 import { GetApiRouteList } from '@/api/system/app';
 import { readProject } from '@/context';
-import { getAsyncRoutes } from '@/route';
-import { systemRoutes } from '@/route/routes';
+import { getAsyncRoutes, getSystemRoutes } from '@/route';
 import { resolveRoutePath } from '@/utils';
 import { cloneDeep, defaultTo, get, has, isArray, isString, isUndefined, merge, omit } from 'lodash-es';
 import { defineStore } from 'pinia';
@@ -190,6 +189,7 @@ const useRouteStore = defineStore(
      * @returns {Array<RouteRecordRaw>} 扁平化的系统路由。
      */
     const flatSystemRoutes = computed(() => {
+      const systemRoutes = getSystemRoutes();
       const routes = [...systemRoutes];
       routes.forEach(item => flattenSystemRoutes(item));
       return routes;
@@ -266,7 +266,7 @@ const useRouteStore = defineStore(
       let returnRoutes: Route.recordMainRaw[];
       // 如果权限功能开启，则需要对路由数据进行筛选过滤
       if (settingsStore.settings.app.enablePermission) {
-        returnRoutes = filterAsyncRoutes(routesRaw.value, userStore.permissions);
+        returnRoutes = filterAsyncRoutes(routesRaw.value, userStore.user.permissions);
       }
       else {
         returnRoutes = cloneDeep(routesRaw.value);
@@ -303,8 +303,16 @@ const useRouteStore = defineStore(
               delete arr[index].meta!.singleMenu;
             }
 
-            if (!arr[index].component) {
-              arr[index].component = Layout;
+            if (!item.component) {
+              item.component = Layout;
+            }
+
+            // 给一级路由设置 provider
+            if (route.meta?.provider) {
+              (item.meta as any) = {
+                ...(item.meta ?? {}),
+                provider: route.meta.provider,
+              };
             }
           });
         }
@@ -433,3 +441,4 @@ const useRouteStore = defineStore(
 );
 
 export default useRouteStore;
+export type RouteStore = ReturnType<typeof useRouteStore>;

package/src/stores/modules/settings.ts

@@ -369,3 +369,4 @@ const useSettingsStore = defineStore(
 );
 
 export default useSettingsStore;
+export type SettingsStore = ReturnType<typeof useSettingsStore>;

package/src/stores/modules/tabbar.ts

@@ -336,3 +336,4 @@ const useTabbarStore = defineStore(
 );
 
 export default useTabbarStore;
+export type TabbarStore = ReturnType<typeof useTabbarStore>;