@pubinfo/core 2.0.5 → 2.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,8 +26,8 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.5",
-    "@pubinfo/vite": "2.0.5"
+    "@pubinfo/config": "2.0.7",
+    "@pubinfo/vite": "2.0.7"
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.16",
@@ -85,8 +85,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.5",
-    "@pubinfo/vite": "2.0.5"
+    "@pubinfo/config": "2.0.7",
+    "@pubinfo/vite": "2.0.7"
   },
   "scripts": {
     "dev": "vite build -w -m watch",

package/src/built-in/layout-component/Layout.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import RiLogoutBoxLine from '~icons/ri/logout-box-line';
+import { useAuth } from '@/features/composables';
 import BackTop from './components/BackTop/index.vue';
 import LayoutContent from './components/Content/index.vue';
 import Copyright from './components/Copyright/index.vue';
 import LayoutHeader from './components/Header/index.vue';
+import NotAllowed from './components/NotAllowed/index.vue';
 import SettingBar from './components/SettingBar/index.vue';
 import LayoutSidebar from './components/Sidebar/index.vue';
-import LayoutTopbar from './components/Topbar/index.vue';
 
+import LayoutTopbar from './components/Topbar/index.vue';
 import { useContext } from './composables/useContext';
 import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
 import { useHotkey } from './composables/useHotkey';
@@ -18,6 +20,12 @@ defineOptions({
 });
 
 const routeInfo = useRoute();
+const { auth } = useAuth();
+
+const isAuth = computed(() => {
+  return routeInfo.matched.every(item => auth(item.meta.auth ?? ''));
+});
+
 const { settingsStore } = useContext();
 const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
 useHotkey();
@@ -86,9 +94,13 @@ watch(() => routeInfo.path, () => {
               <RiLogoutBoxLine />
             </div>
 
-            <slot>
+            <slot v-if="isAuth">
               <LayoutContent />
             </slot>
+
+            <slot v-else name="notAllowed">
+              <NotAllowed />
+            </slot>
           </div>
 
           <slot name="footer">

package/src/built-in/layout-component/components/Header/HeaderThinMenu.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { useContext } from '../../composables/useContext';
 import Menu from '../Menu/index.vue';
-/* =============================================
-=               Vue SFC Options 配置           =
-============================================= */
+
 defineOptions({
   name: 'LayoutHeaderThinMenu',
 });
-/* =============================================
-=                   逻辑代码                   =
-============================================= */
+
 const route = useRoute();
 
 const { settingsStore, menuStore } = useContext();

package/src/built-in/layout-component/components/Menu/index.vue

@@ -33,7 +33,7 @@ const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
 });
 
 // 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
-function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
+function initItems(menu: MenuProps['menu'] = [], parentPaths: string[] = []) {
   menu.forEach((item) => {
     const index = item.path ?? JSON.stringify(item);
     if (item.children && item.children.length > 0) {

package/src/{features → built-in/layout-component}/components/NotAllowed/index.vue

@@ -6,40 +6,15 @@ defineOptions({
 });
 
 const route = useRoute();
-const router = useRouter();
 
 const settingsStore = useSettingsStore();
 const tabbarStore = useTabbarStore();
 
-const data = ref({
-  inter: Number.NaN,
-  countdown: 5,
-});
-
-onUnmounted(() => {
-  if (data.value.inter) {
-    window.clearInterval(data.value.inter);
-  }
-});
-
 onMounted(() => {
   if (settingsStore.settings.tabbar.enable) {
     tabbarStore.remove(route.meta.activeMenu || route.fullPath);
   }
-  data.value.inter = window.setInterval(() => {
-    data.value.countdown--;
-    if (data.value.countdown === 0) {
-      if (data.value.inter) {
-        window.clearInterval(data.value.inter);
-      }
-      goBack();
-    }
-  }, 1000);
 });
-
-function goBack() {
-  router.push('/');
-}
 </script>
 
 <template>
@@ -52,23 +27,18 @@ function goBack() {
       <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 scoped>
 .noPermissionIcon {
-  background: url("./assets/403.svg") no-repeat;
+  background: url("../../assets/images/403.svg") no-repeat;
   background-size: 100% 100%;
 }
 
 [data-theme="dark"] .noPermissionIcon {
-  background: url("./assets/403_dark.svg") no-repeat;
+  background: url("../../assets/images/403_dark.svg") no-repeat;
   background-size: 100% 100%;
 }
 </style>

package/src/built-in/layout-component/components/Tools/DarkModeToggle.vue

@@ -9,20 +9,36 @@ defineOptions({
 const { settingsStore } = useContext();
 
 function toggleColorScheme(event: MouseEvent) {
-  const { startViewTransition } = useViewTransition(async () => {
-    const colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark';
-    settingsStore.setColorScheme(colorScheme);
-    await settingsStore.setPreferencesSetting({
+  const currentScheme = settingsStore.settings.app.colorScheme;
+  const nextScheme = currentScheme === 'dark' ? 'light' : 'dark';
+
+  const { startViewTransition } = useViewTransition(() => {
+    settingsStore.setColorScheme(nextScheme);
+    void settingsStore.setPreferencesSetting({
       app: {
-        colorScheme,
+        colorScheme: nextScheme,
       },
+    }).catch((error) => {
+      console.error('[DarkModeToggle] Failed to persist color scheme', error);
     });
   });
 
   nextTick(() => {
-    startViewTransition()?.ready.then(() => {
-      const x = event.clientX;
-      const y = event.clientY;
+    const transition = startViewTransition();
+    if (!transition) {
+      return;
+    }
+
+    transition.ready.then(() => {
+      const cssNamespace = globalThis.CSS;
+      const supportsClipPath = typeof cssNamespace?.supports === 'function'
+        && cssNamespace.supports('clip-path', 'circle(0px at 0px 0px)');
+      if (!supportsClipPath) {
+        return;
+      }
+      const isKeyboardTrigger = event.detail === 0 && event.clientX === 0 && event.clientY === 0;
+      const x = isKeyboardTrigger ? innerWidth / 2 : event.clientX;
+      const y = isKeyboardTrigger ? innerHeight / 2 : event.clientY;
       const endRadius = Math.hypot(
         Math.max(x, innerWidth - x),
         Math.max(y, innerHeight - y),
@@ -33,14 +49,16 @@ function toggleColorScheme(event: MouseEvent) {
       ];
       document.documentElement.animate(
         {
-          clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),
+          clipPath,
         },
         {
           duration: 300,
           easing: 'ease-out',
-          pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',
+          pseudoElement: '::view-transition-new(root)',
         },
       );
+    }).catch((error) => {
+      console.error('[DarkModeToggle] View transition failed', error);
     });
   });
 }

package/src/built-in/layout-component/index.ts

@@ -17,6 +17,7 @@ import LayoutTopbar from './components/Topbar/index.vue';
 
 import Logo from './components/Logo/index.vue';
 import Tools from './components/Tools/index.vue';
+import NotAllowed from './components/NotAllowed/index.vue';
 import Fullscreen from './components/Tools/Fullscreen.vue';
 import PageReload from './components/Tools/PageReload.vue';
 import DarkModeToggle from './components/Tools/DarkModeToggle.vue';
@@ -99,6 +100,6 @@ export {
 
   Logo,
   Tools,
-
+  NotAllowed,
   Copyright,
 };

package/src/built-in/layout-component/provider.ts

@@ -24,9 +24,6 @@ export const Provider = defineComponent({
       type: Boolean,
       default: false,
     },
-    // locale: {
-    //   type: Object,
-    // },
   },
   setup(props, { slots }) {
     const settingsStore = useSettingsStore();

package/src/core/interface.ts

@@ -1,3 +1,4 @@
+import type { Menu } from '#/menu';
 import type { AdapterCreateOptions, AlovaAxiosRequestConfig } from '@alova/adapter-axios';
 import type { Alova, AlovaGenerics, AlovaOptions, Method, ResponseCompleteHandler, ResponseErrorHandler } from 'alova';
 import type { AxiosResponse, AxiosResponseHeaders } from 'axios';
@@ -88,8 +89,14 @@ export type RequestInstance = Alova<AG>;
 export type RequestMethod = Method<AG>;
 
 export interface Hooks {
+  /** http 请求拦截器 */
   'http:request': (method: Method<AG>) => void | Promise<void>
+
+  /** http 响应拦截器 */
   'http:response': RespondedHandler<AG> | RespondedHandlerRecord<AG>
+
+  /** 菜单数据转换 */
+  'menu:transform': (menuData: Menu.recordMainRaw[]) => Menu.recordMainRaw[] | Promise<Menu.recordMainRaw[]>
 }
 
 // overwrite alova

package/src/core/resolver/icon.ts

@@ -7,9 +7,29 @@ const namespace = getPubinfoNamespace();
 namespace.iconModules = namespace.iconModules || new Map<string, ModuleRecord>();
 const iconModuleMap = namespace.iconModules as Map<string, ModuleRecord>;
 
+namespace.iconCache = namespace.iconCache || new Map<string, string>();
+const iconCache = namespace.iconCache as Map<string, string>;
+
+function getCacheKey(name: string, id?: string) {
+  return `${id ?? 'default'}:${name}`;
+}
+
+export function getCachedIcon(name: string, id?: string) {
+  return iconCache.get(getCacheKey(name, id));
+}
+
+export function setCachedIcon(name: string, id: string | undefined, value?: string) {
+  const key = getCacheKey(name, id);
+  if (value) {
+    iconCache.set(key, value);
+  }
+  else {
+    iconCache.delete(key);
+  }
+}
+
 export function defineIconModule(id: string, map: ModuleRecord) {
   if (iconModuleMap.has(id)) {
-    console.warn(`[PUBINFO] 图标模块 ${id} 已经被定义。`);
     return;
   }
   iconModuleMap.set(id, map);
@@ -31,6 +51,11 @@ export function getAllIconModules(): Map<string, ModuleRecord> {
 }
 
 export async function setupIcon(name: string, id?: string) {
+  const cached = getCachedIcon(name, id);
+  if (cached) {
+    return cached;
+  }
+
   if (!readProjectModules()) {
     await loadProjectModules().catch(() => {});
   }
@@ -41,11 +66,19 @@ export async function setupIcon(name: string, id?: string) {
 
   let result = await findFile(moduleMap, name);
   if (result) {
+    setCachedIcon(name, id, result);
+    if (id) {
+      setCachedIcon(name, undefined, result);
+    }
     return result;
   }
 
   result = await findFile(iconMap, name);
   if (result) {
+    setCachedIcon(name, id, result);
+    if (id) {
+      setCachedIcon(name, undefined, result);
+    }
     return result;
   }
 
@@ -58,6 +91,9 @@ export async function setupIcon(name: string, id?: string) {
 
     result = await findFile(modulePages, name);
     if (result) {
+      const targetId = moduleId === 'default' ? undefined : moduleId;
+      setCachedIcon(name, targetId, result);
+      setCachedIcon(name, undefined, result);
       return result;
     }
   }

package/src/core/resolver/page.ts

@@ -6,7 +6,6 @@ const routeModuleMap = new Map<string, ModuleRecord>();
 
 export function defineRouteModule(id: string, map: ModuleRecord) {
   if (routeModuleMap.has(id)) {
-    console.warn(`[PUBINFO] 路由模块 ${id} 已经被定义。`);
     return;
   }
   routeModuleMap.set(id, map);

package/src/features/assets/styles/globals.css

@@ -33,7 +33,7 @@
 
 /* 明暗模式 CSS 变量 */
 :root {
-  color-scheme: light;
+  color-scheme: light dark;
   --g-box-shadow-color: rgba(0, 0, 0, 0.12);
 }
 
@@ -52,18 +52,9 @@
 }
 
 :root.dark {
-  color-scheme: dark;
   --g-box-shadow-color: rgba(0, 0, 0, 0.72);
 }
 
-:root.dark::view-transition-old(root) {
-  z-index: 9999;
-}
-
-:root.dark::view-transition-new(root) {
-  z-index: 1;
-}
-
 ::-webkit-scrollbar {
   width: 12px;
   height: 12px;

package/src/features/components/PubinfoApp/index.vue

@@ -1,22 +1,9 @@
 <script setup lang="ts">
-import { useAuth } from '@/features/composables';
-import NotAllowed from '../NotAllowed/index.vue';
-
 defineOptions({
   name: 'PubinfoApp',
 });
-
-const route = useRoute();
-const { auth } = useAuth();
-
-const isAuth = computed(() => {
-  return route.matched.every(item => auth(item.meta.auth ?? ''));
-});
 </script>
 
 <template>
-  <RouterView v-slot="{ Component }">
-    <component :is="Component" v-if="isAuth" />
-    <NotAllowed v-else />
-  </RouterView>
+  <RouterView />
 </template>

package/src/features/components/PubinfoIcon/index.vue

@@ -2,8 +2,8 @@
 import type { PubinfoIconOptions } from './props';
 import * as AntdIcons from '@ant-design/icons-vue';
 import { Icon } from '@iconify/vue';
-import { computedAsync } from '@vueuse/core';
-import { setupIcon } from '@/core';
+import { shallowRef, watch } from 'vue';
+import { getCachedIcon, setCachedIcon, setupIcon } from '@/core';
 import { useProvider } from '../PubinfoProvider';
 import PrismBox from './PrismBox.vue';
 import SquareBox from './SquareBox.vue';
@@ -12,7 +12,9 @@ defineOptions({
   name: 'PubinfoIcon',
 });
 
-const props = defineProps<PubinfoIconOptions>();
+const props = withDefaults(defineProps<PubinfoIconOptions>(), {
+  size: '1rem',
+});
 
 const { loadIcon } = useProvider();
 
@@ -69,10 +71,93 @@ const element = computed(() => {
   return 'i';
 });
 
-const icon = computedAsync(async () => {
-  const parse = parseString(props.name);
-  return loadIcon?.(props.name) ?? await setupIcon(`${parse.name}${parse.ext || '.svg'}`, parse.prefix);
-});
+const icon = shallowRef<string | undefined>(undefined);
+
+function getIconLookupMeta(rawName: string) {
+  const parsed = parseString(rawName);
+  const fileName = `${parsed.name}${parsed.ext || '.svg'}`;
+  const moduleId = parsed.prefix || undefined;
+  return { fileName, moduleId } as const;
+}
+
+function resolveCachedIcon(fileName: string, moduleId?: string) {
+  return getCachedIcon(fileName, moduleId) ?? getCachedIcon(fileName, undefined);
+}
+
+function primeIconFromCache() {
+  if (outputType.value !== 'custom') {
+    icon.value = undefined;
+    return;
+  }
+
+  const { fileName, moduleId } = getIconLookupMeta(props.name);
+  const cached = resolveCachedIcon(fileName, moduleId);
+  if (cached) {
+    icon.value = cached;
+  }
+}
+
+primeIconFromCache();
+
+watch(
+  () => ({ name: props.name, type: outputType.value }),
+  async ({ name, type }, _, onCleanup) => {
+    if (type !== 'custom') {
+      icon.value = undefined;
+      return;
+    }
+
+    const { fileName, moduleId } = getIconLookupMeta(name);
+
+    const cached = resolveCachedIcon(fileName, moduleId);
+    if (cached) {
+      icon.value = cached;
+      return;
+    }
+
+    let cancelled = false;
+    onCleanup(() => {
+      cancelled = true;
+    });
+
+    try {
+      const resolvedFromProvider = await loadIcon?.(name);
+      if (!cancelled && resolvedFromProvider) {
+        icon.value = resolvedFromProvider;
+        setCachedIcon(fileName, moduleId, resolvedFromProvider);
+        if (moduleId) {
+          setCachedIcon(fileName, undefined, resolvedFromProvider);
+        }
+        return;
+      }
+    }
+    catch (error) {
+      if (import.meta.env.DEV) {
+        console.warn('[PUBINFO] loadIcon failed:', error);
+      }
+    }
+
+    try {
+      const resolved = await setupIcon(fileName, moduleId);
+      if (cancelled) {
+        return;
+      }
+      if (resolved) {
+        icon.value = resolved;
+        setCachedIcon(fileName, moduleId, resolved);
+        if (moduleId) {
+          setCachedIcon(fileName, undefined, resolved);
+        }
+      }
+    }
+    catch (error) {
+      if (import.meta.env.DEV) {
+        console.warn('[PUBINFO] setupIcon failed:', error);
+      }
+    }
+  },
+  { immediate: true, flush: 'sync' },
+);
 
 interface Parsed {
   prefix: string

package/src/features/components/index.ts

@@ -1,4 +1,3 @@
-export { default as NotAllowed } from './NotAllowed/index.vue';
 export { default as PageHeader } from './PageHeader/index.vue';
 export { default as PageMain } from './PageMain/index.vue';
 export { default as PassStrengthValidator } from './PassStrengthValidator/index.vue';

package/src/features/settings/index.ts

@@ -36,6 +36,7 @@ let globalSettings: RequiredDeep<Settings.all> = {
     subMenuCollapse: false,
     enableSubMenuCollapseButton: true,
     enableHotkeys: false,
+    showWithoutPermission: false,
   },
   topbar: {
     mode: 'fixed',

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

@@ -1,8 +1,10 @@
 import type { Menu } from '#/menu';
 
+import { computedAsync } from '@vueuse/core';
 import { get, isNumber } from 'lodash-es';
 import { match } from 'path-to-regexp';
 import { defineStore } from 'pinia';
+import { hooks } from '@/core/ctx';
 import { useWarn } from '@/features/composables';
 import { resolveRoutePath } from '@/utils';
 import { STORE_NAME } from '../enum';
@@ -45,7 +47,7 @@ const useMenuStore = defineStore(
      * //   { path: '/app/about', title: 'About' },
      * // ]
      */
-    function convertToFullPath(menu: any[], path: string = '') {
+    function convertToFullPath(menu: any[] = [], path: string = '') {
       return menu.map((item) => {
         item.path = resolveRoutePath(path, item.path);
         if (item.children) {
@@ -59,30 +61,46 @@ const useMenuStore = defineStore(
      * 获取所有菜单项
      * @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));
+    const allMenus = computedAsync<Menu.recordMainRaw[]>(
+      async () => {
+        let returnMenus: Menu.recordMainRaw[] = [{
+          meta: {},
+          children: [],
+        }];
 
-      return returnMenus;
-    });
+        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.forEach(item => convertToFullPath(item.children));
+
+        const transformedMenus = await hooks.callHookWith(
+          async (hookFns, args) => {
+            let res = args[0];
+            for (const fn of hookFns) {
+              res = await fn(res);
+            }
+            return res as Menu.recordMainRaw[];
+          },
+          'menu:transform',
+          returnMenus,
+        );
+
+        return transformedMenus;
+      },
+      [],
+    );
 
     /**
      * 侧边栏菜单的计算属性。
@@ -174,7 +192,7 @@ const useMenuStore = defineStore(
      * @param rootPath 根路径
      * @returns 默认展开的路径数组
      */
-    function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
+    function getDefaultOpenedPaths(menus: Menu.recordRaw[] = [], rootPath = '') {
       const defaultOpenedPaths: string[] = [];
       menus.forEach((item) => {
         if (item.meta?.defaultOpened && item.children) {

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

@@ -33,6 +33,12 @@ const useRouteStore = defineStore(
       system?: boolean
     }>>([]);
 
+    /** 如果权限功能开启 / 不展示无权限菜单，则需要对路由数据进行筛选过滤 */
+    const needFilterRoutes = computed(() => {
+      const { app, menu } = settingsStore.settings;
+      return app.enablePermission && !menu.showWithoutPermission;
+    });
+
     /**
      * 创建面包屑对象
      * @param currentRouter 当前路由对象
@@ -273,8 +279,7 @@ const useRouteStore = defineStore(
      */
     const routes = computed(() => {
       let returnRoutes: Route.recordMainRaw[];
-      // 如果权限功能开启，则需要对路由数据进行筛选过滤
-      if (settingsStore.settings.app.enablePermission) {
+      if (needFilterRoutes.value) {
         returnRoutes = filterAsyncRoutes(routesRaw.value, userStore.user.permissions);
       }
       else {
@@ -351,7 +356,7 @@ const useRouteStore = defineStore(
      * 生成路由
      */
     async function generateRoutes() {
-      const res = await postRbacResourceMineOrAllResourceTree({ needAll: false });
+      const res = await postRbacResourceMineOrAllResourceTree({ needAll: !needFilterRoutes.value });
       if (res.success) {
         remoteRoutesRaw.value = res?.data ?? [];
         const staticRoutes = convertSingleRoutes(filterEnabledRoutes(cloneDeep(asyncRoutes)));