@pubinfo/core 2.0.6 → 2.0.8-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.6",
+  "version": "2.0.8-beta.1",
   "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.6",
-    "@pubinfo/vite": "2.0.6"
+    "@pubinfo/vite": "2.0.8-beta.1",
+    "@pubinfo/config": "2.0.8-beta.1"
   },
   "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.6",
-    "@pubinfo/vite": "2.0.6"
+    "@pubinfo/config": "2.0.8-beta.1",
+    "@pubinfo/vite": "2.0.8-beta.1"
   },
   "scripts": {
     "dev": "vite build -w -m watch",

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/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/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/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/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';
@@ -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;
+      },
+      [],
+    );
 
     /**
      * 侧边栏菜单的计算属性。

package/dist/HeaderThinMenu-DOIRf9rF.js

@@ -1,4 +0,0 @@
-import { bH as f } from "./index-Cq8mquS8.js";
-export {
-  f as default
-};

package/dist/index-Cvhd8Wyw.js

@@ -1,4 +0,0 @@
-import { bG as f } from "./index-Cq8mquS8.js";
-export {
-  f as default
-};