@pubinfo/core 2.0.14 → 2.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.14",
+  "version": "2.1.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -31,9 +31,9 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.14",
-    "@pubinfo/devtools": "2.0.14",
-    "@pubinfo/vite": "2.0.14"
+    "@pubinfo/config": "2.1.0",
+    "@pubinfo/devtools": "2.1.0",
+    "@pubinfo/vite": "2.1.0"
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.16",
@@ -47,7 +47,6 @@
     "@vueuse/integrations": "^13.5.0",
     "ant-design-vue": "^4.2.6",
     "axios": "^1.10.0",
-    "consola": "^3.4.2",
     "floating-vue": "5.2.2",
     "hookable": "^5.5.3",
     "hotkeys-js": "^3.13.14",
@@ -64,7 +63,8 @@
     "sortablejs": "^1.15.6",
     "unctx": "^2.4.1",
     "vue-m-message": "^4.0.2",
-    "zxcvbn": "^4.4.2"
+    "zxcvbn": "^4.4.2",
+    "@pubinfo/shared": "2.1.0"
   },
   "devDependencies": {
     "@alova/mock": "^2.0.17",
@@ -92,8 +92,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.14",
-    "@pubinfo/vite": "2.0.14"
+    "@pubinfo/config": "2.1.0",
+    "@pubinfo/vite": "2.1.0"
   },
   "scripts": {
     "dev": "vite build -w -m watch",

package/src/built-in/devtools/index.ts

@@ -0,0 +1,292 @@
+import type { ModuleOptions } from '@/core';
+import { devtoolsStorageKey } from '@pubinfo/devtools/constants';
+import { setupDevtoolsPanel } from '@pubinfo/devtools/panel';
+
+/**
+ * 本模块将宿主应用与 @pubinfo/devtools 打通：
+ * - 在应用启动时注册 Devtools 面板（UnoCSS / Chrome / Server Router）。
+ * - 监听 HTTP 钩子，在请求打上 `meta.__devtools__` 时，
+ *   自动把响应快照写入 localStorage，便于面板读取与回放。
+ */
+
+const DEVTOOLS_RAW_RESPONSE_KEY = devtoolsStorageKey.response;
+
+const methodNameMap: Record<string, string> = {
+  GET: 'Get',
+  POST: 'Post',
+  PUT: 'Put',
+  PATCH: 'Patch',
+  DELETE: 'Delete',
+  HEAD: 'Head',
+};
+
+const requestMethodNames = Object.values(methodNameMap);
+
+/**
+ * 粗略判断一个值是否为「请求实例」。
+ *
+ * 判定规则：对象上是否存在大小写首字母形式的方法（Get/Post/...）。
+ * 这是对 packages/core/src/core/request.ts 导出的请求封装的一个宽松契约检查。
+ */
+function isRequestInstance(value: any) {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  return requestMethodNames.some(name => typeof (value as any)[name] === 'function');
+}
+
+/**
+ * 将任意 payload 转为可序列化的普通对象（若可能）。
+ *
+ * - 通过 JSON 序列化/反序列化去除响应对象上的循环引用、原型链等复杂结构。
+ * - 若序列化失败（比如含不可序列化值或循环引用），则返回原值。
+ */
+function toPlainObject<T>(payload: T): T {
+  if (payload === undefined || payload === null) {
+    return payload;
+  }
+  try {
+    return JSON.parse(JSON.stringify(payload)) as T;
+  }
+  catch {
+    return payload;
+  }
+}
+
+interface DevtoolsRequestPayload {
+  moduleCandidates?: string[]
+  exportName?: string
+  method: string
+  args?: any[]
+}
+
+interface DevtoolsResponsePayload {
+  success: boolean
+  result?: any
+  error?: {
+    message: string
+    stack?: string
+    name?: string
+  }
+}
+
+/**
+ * 将一次请求的响应快照持久化到 localStorage。
+ *
+ * - 仅在浏览器环境生效（SSR 时直接跳过）。
+ * - 存储失败（超配额/序列化失败）时静默忽略，避免影响应用行为。
+ *
+ * @param _method 原始请求方法（预留位，当前未使用）
+ * @param payload 响应对象或错误对象（尽量保持原貌）
+ */
+function storeDevtoolsResponse(_method: any, payload: any) {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+  try {
+    localStorage.setItem(DEVTOOLS_RAW_RESPONSE_KEY, JSON.stringify(payload));
+  }
+  catch {
+    // ignore serialization/storage failures
+  }
+}
+
+/**
+ * 解析一组候选模块，尝试找到并返回「请求实例」。
+ *
+ * 查找顺序：
+ * 1) 指定的具名导出（若提供 exportName 且命中并为请求实例则返回）。
+ * 2) 默认导出（若存在且为请求实例）。
+ * 3) 其他任一导出成员中第一个满足 isRequestInstance 的值。
+ *
+ * 任一候选路径导入失败时会被忽略，继续尝试下一个。
+ */
+async function resolveRequestInstance(
+  candidates: string[] = [],
+  exportName?: string,
+) {
+  for (const specifier of candidates) {
+    if (!specifier) {
+      continue;
+    }
+    try {
+      const module = await import(/* @vite-ignore */ specifier);
+      const namedExport = exportName ? module?.[exportName] : undefined;
+      if (namedExport && isRequestInstance(namedExport)) {
+        return namedExport;
+      }
+      const defaultExport = module?.default;
+      if (defaultExport && isRequestInstance(defaultExport)) {
+        return defaultExport;
+      }
+      for (const value of Object.values(module)) {
+        if (isRequestInstance(value)) {
+          return value;
+        }
+      }
+    }
+    catch {
+      // 忽略导入失败的候选路径，继续尝试下一个。
+    }
+  }
+  return undefined;
+}
+
+/**
+ * 根据面板发来的 payload 执行一次 API 请求。
+ *
+ * 输入契约（payload）：
+ * - moduleCandidates: string[] 可能导出请求实例的模块路径（可为绝对/相对/别名）。
+ * - exportName:       string   可选，期望从模块中拿到的具名导出名。
+ * - method:           string   HTTP 方法（GET/POST/...）。
+ * - args:             any[]    传递给请求方法的参数（如 path/query/body 等）。
+ *
+ * 行为：
+ * - 解析请求实例 → 获取对应的方法 → 调用并等待结果。
+ * - 若返回值带有 .send()，则优先调用 .send() 以与内部请求封装对齐。
+ * - 返回标准化的结果：{ success, result } 或 { success:false, error }。
+ */
+async function executeDevtoolsRequest(payload: DevtoolsRequestPayload): Promise<DevtoolsResponsePayload> {
+  const response: DevtoolsResponsePayload = {
+    success: false,
+  };
+
+  try {
+    const method = (payload.method ?? '').toUpperCase();
+    const mappedMethod = methodNameMap[method];
+    if (!mappedMethod) {
+      throw new Error(`请求实例不支持 ${method} 方法`);
+    }
+
+    const requestInstance: any = await resolveRequestInstance(
+      payload.moduleCandidates,
+      payload.exportName,
+    );
+
+    if (!requestInstance) {
+      throw new TypeError('未找到匹配的请求实例，请确认 API 文件的 request 导入可被 devtools 解析。');
+    }
+
+    const requestMethod = requestInstance[mappedMethod];
+    if (typeof requestMethod !== 'function') {
+      throw new TypeError(`请求实例不支持 ${method} 方法`);
+    }
+
+    let methodResult = requestMethod.apply(requestInstance, payload.args ?? []);
+    if (methodResult && typeof methodResult.send === 'function') {
+      methodResult = await methodResult.send();
+    }
+    else {
+      methodResult = await methodResult;
+    }
+
+    response.success = true;
+    response.result = toPlainObject(methodResult);
+  }
+  catch (error) {
+    if (error && typeof error === 'object' && 'response' in (error as any) && (error as any).response) {
+      response.success = true;
+      response.result = toPlainObject((error as any).response);
+    }
+    else if (error && typeof error === 'object' && !(error instanceof Error)) {
+      response.success = true;
+      response.result = toPlainObject(error);
+    }
+    else {
+      response.success = false;
+      response.error = {
+        message: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+        name: error instanceof Error ? error.name : undefined,
+      };
+    }
+  }
+
+  return response;
+}
+
+const MESSAGE_REQUEST_TYPE = 'pubinfo:devtools-request';
+const MESSAGE_RESPONSE_TYPE = 'pubinfo:devtools-response';
+
+let devtoolsBridgeInitialised = false;
+
+/**
+ * 在宿主页面和 Devtools iframe 之间建立 message 通信桥。
+ *
+ * 协议：
+ * - request:  { type: 'pubinfo:devtools-request', id, payload }
+ * - response: { type: 'pubinfo:devtools-response', id, ...result }
+ *
+ * 注意：
+ * - 仅初始化一次；SSR/非浏览器环境跳过。
+ * - postMessage 使用 event.origin → fallback '*'，尽量遵循同源策略。
+ */
+function setupDevtoolsRequestBridge() {
+  if (devtoolsBridgeInitialised || typeof window === 'undefined') {
+    return;
+  }
+  devtoolsBridgeInitialised = true;
+  window.addEventListener('message', async (event) => {
+    const data = (event as MessageEvent<any>).data;
+    if (!data || data.type !== MESSAGE_REQUEST_TYPE || !data.id) {
+      return;
+    }
+    const payload: DevtoolsRequestPayload = data.payload ?? {};
+    const responsePayload = await executeDevtoolsRequest(payload);
+    const message = {
+      type: MESSAGE_RESPONSE_TYPE,
+      id: data.id,
+      ...responsePayload,
+    };
+
+    const target = (event.source as Window | null) ?? window.parent ?? window;
+    const origin = (event.origin && event.origin !== 'null') ? event.origin : (window.location?.origin ?? '*');
+    try {
+      target.postMessage(message, origin);
+    }
+    catch {
+      target.postMessage(message, '*');
+    }
+  });
+}
+
+/**
+ * 内置 Devtools 模块。
+ *
+ * 注册时机：`enforce: 'post'`，确保在路由/请求等核心模块之后挂载。
+ *
+ * 行为：
+ * - setup：注册各类 devtools 面板。
+ * - setup：监听来自 Devtools iframe 的消息，响应接口调试请求。
+ * - hooks.http:response：当请求元信息中显式标记 `__devtools__` 时，
+ *   将响应（或错误响应）快照保存到 localStorage，供面板读取。
+ */
+export function Devtools(): ModuleOptions {
+  return {
+    name: 'built-in:devtools',
+    enforce: 'post',
+    setup() {
+      setupDevtoolsPanel();
+      setupDevtoolsRequestBridge();
+    },
+    hooks: {
+      'http:response': {
+        onSuccess(response, method) {
+          const methodMeta = (method as any)?.meta ?? (method as any)?.config?.meta;
+          if (methodMeta?.__devtools__) {
+            storeDevtoolsResponse(method, response);
+          }
+          return response;
+        },
+        onError(error, method) {
+          const methodMeta = (method as any)?.meta ?? (method as any)?.config?.meta;
+          if (methodMeta?.__devtools__) {
+            const payload = (error as any)?.response ?? error;
+            storeDevtoolsResponse(method, payload);
+          }
+          return error;
+        },
+      },
+    },
+  };
+}

package/src/built-in/index.ts

@@ -1,5 +1,6 @@
 export * from './authentication';
 export * from './authorization';
+export * from './devtools';
 export * from './layout-component';
 export * from './n-progress';
 export * from './pinia-plugin';

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { LayoutProps } from './interface';
+import { useCssVar } from '@vueuse/core';
 import RiLogoutBoxLine from '~icons/ri/logout-box-line';
 import { useAuth } from '@/features/composables';
 import BackTop from './components/BackTop/index.vue';
@@ -6,31 +8,44 @@ 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 { useContext } from './composables/useContext';
 import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
 import { useHotkey } from './composables/useHotkey';
+import { createLayoutVisible, useLayoutVisible } from './composables/useLayoutVisible';
 import { useWatermark } from './composables/useWatermark';
 
 defineOptions({
   name: 'Layout',
 });
 
-const routeInfo = useRoute();
-const { auth } = useAuth();
+const props = withDefaults(
+  defineProps<LayoutProps>(),
+  {
+    showHeader: true,
+    showSidebar: true,
+    showTabbar: true,
+    showToolbar: true,
+  },
+);
 
-const isAuth = computed(() => {
-  return routeInfo.matched.every(item => auth(item.meta.auth ?? ''));
-});
+createLayoutVisible(props);
+const { show } = useLayoutVisible(props);
 
+const routeInfo = useRoute();
+const { auth } = useAuth();
 const { settingsStore } = useContext();
 const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
 useHotkey();
 useWatermark();
 
+const isAuth = computed(() => {
+  return routeInfo.matched.every(item => auth(item.meta.auth ?? ''));
+});
+
 watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
   if (settingsStore.mode === 'mobile') {
     if (!val) {
@@ -49,6 +64,37 @@ watch(() => routeInfo.path, () => {
     });
   }
 });
+
+const scrollTop = ref(0);
+const scrollOnHide = ref(false);
+const globalTabbarHeight = useCssVar('--g-tabbar-height', document.documentElement || document.body);
+const globalToolBarHeight = useCssVar('--g-toolbar-height', document.documentElement || document.body);
+
+const topbarHeight = computed(() => {
+  const tabbarHeight = show.value.tabbar
+    ? Number.parseInt(globalTabbarHeight.value!)
+    : 0;
+  const toolbarHeight = show.value.toolbar
+    ? Number.parseInt(globalToolBarHeight.value!)
+    : 0;
+  return tabbarHeight + toolbarHeight;
+});
+
+function onScroll() {
+  scrollTop.value = (document.documentElement || document.body).scrollTop;
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', onScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll);
+});
+
+watch(scrollTop, (val, oldVal) => {
+  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight.value;
+});
 </script>
 
 <template>
@@ -81,9 +127,22 @@ watch(() => routeInfo.path, () => {
         />
 
         <div class="main-container" :style="{ 'padding-bottom': routeInfo.meta.paddingBottom }">
-          <slot name="topbar">
-            <LayoutTopbar />
-          </slot>
+          <div
+            class="topbar-container"
+            :class="{
+              'has-tabbar': show.tabbar,
+              'has-toolbar': show.toolbar,
+              [`topbar-${settingsStore.settings.topbar.mode}`]: true,
+              'shadow': !settingsStore.settings.topbar.switchTabbarAndToolbar && scrollTop,
+              'hide': scrollOnHide,
+              'switch-tabbar-toolbar': settingsStore.settings.topbar.switchTabbarAndToolbar,
+            }"
+            data-fixed-calc-width
+          >
+            <slot name="topbar">
+              <LayoutTopbar />
+            </slot>
+          </div>
 
           <div class="main">
             <div
@@ -271,4 +330,29 @@ header:not(.header-leave-active) + .wrapper .main-container .topbar-container {
 header:not(.header-leave-active) + .wrapper .main-container .topbar-container :deep(.tools) {
   --at-apply: hidden;
 }
+
+/* 顶部栏 */
+.topbar-container {
+  --at-apply: absolute top-0 z-100 flex flex-col;
+  box-shadow: 0 1px 0 0 var(--g-border-color);
+  transition: width 0.3s, top 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+
+.topbar-container.topbar-fixed,
+.topbar-container.topbar-sticky {
+  --at-apply: fixed;
+}
+
+.topbar-container.topbar-fixed.shadow,
+.topbar-container.topbar-sticky.shadow {
+  box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
+}
+
+.topbar-container.topbar-sticky.hide {
+  top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
+}
+
+.topbar-container.switch-tabbar-toolbar {
+  flex-direction: column-reverse;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Menu } from '#/menu';
+import type { MenuData } from '@/features';
 import { useElementSize } from '@vueuse/core';
 import SolarWidget5BoldDuotone from '~icons/solar/widget-5-bold-duotone';
 import { PubinfoIcon } from '@/features/components';
@@ -35,7 +35,7 @@ const moreApple = computed(() => {
   return menuHideIndex.value === menuStore.allMenus.length - 1;
 });
 
-function moreApplyClick(index: number, item: Menu.recordMainRaw) {
+function moreApplyClick(index: number, item: MenuData) {
   const menuIndex = index + menuHideIndex.value + 1;
   switchTo(menuIndex, item);
 }
@@ -75,6 +75,10 @@ function fitMenus() {
   return restrictedIndex;
 }
 
+function showMenu(item: MenuData) {
+  return (item.children && item.children.length !== 0) || item?.meta?.isDev;
+}
+
 onMounted(() => {
   watch(
     width,
@@ -101,13 +105,13 @@ onMounted(() => {
           invisible
           :class="{
             'active': index === menuStore.actived,
-            'px-1 py-2': settingsStore.settings.menu.isRounded,
+            'px-1 py-2': showMenu(item) && settingsStore.settings.menu.isRounded,
             'is-dev': item.meta?.isDev,
           }"
         >
           <NotCursor :is-cursor="item.meta?.isDev" :dev-text="item.meta?.devText">
             <div
-              v-if="(item.children && item.children.length !== 0) || item?.meta?.isDev"
+              v-if="showMenu(item)"
               class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])"
               :class="{
                 'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useContext } from '../../composables/useContext';
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
 import Logo from '../Logo/index.vue';
 import Tools from '../Tools/index.vue';
 import HeaderMenu from './HeaderMenu.vue';
@@ -17,19 +17,12 @@ withDefaults(
   },
 );
 
-const { settingsStore, routeStore } = useContext();
-
-const route = useRoute();
-
-// 在这里需要判断当前的菜单模式是否渲染 Header
-const showHeader = computed<boolean>(() => {
-  return (routeStore.getRemoteAppRouteById(route)?.meta?.layout as any)?.header ?? true;
-});
+const { show } = useLayoutVisible();
 </script>
 
 <template>
-  <Transition v-if="showHeader" name="header">
-    <header v-if="settingsStore.mode === 'pc' && ['head', 'only-head'].includes(settingsStore.settings.menu.menuMode)">
+  <Transition name="header">
+    <header v-if="show.header">
       <div class="header-container">
         <div class="main">
           <slot name="logo">

package/src/built-in/layout-component/components/Sidebar/MainSidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../composables/useContext';
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
 import { useMenu } from '../../composables/useMenu';
 import Logo from '../Logo/index.vue';
 import Menu from '../Menu/index.vue';
@@ -13,6 +14,7 @@ const route = useRoute();
 
 const { settingsStore, menuStore, generateTitle } = useContext();
 const { switchTo } = useMenu();
+const { show } = useLayoutVisible();
 
 function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
   if (isActive && activeIcon) {
@@ -25,7 +27,7 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
 
 <template>
   <Transition name="main-sidebar">
-    <div v-if="['side', 'only-side'].includes(settingsStore.settings.menu.menuMode) || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
+    <div v-if="show.mainSidebar" class="main-sidebar-container">
       <Logo :show-title="false" class="sidebar-logo" />
       <!-- 侧边栏模式（含主导航） -->
       <div

package/src/built-in/layout-component/components/Sidebar/SubSidebar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useContext } from '../../composables/useContext';
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
 import Logo from '../Logo/index.vue';
 import Menu from '../Menu/index.vue';
 
@@ -18,37 +19,19 @@ withDefaults(
 
 const route = useRoute();
 
-const { settingsStore, menuStore, routeStore } = useContext();
+const { settingsStore, menuStore } = useContext();
+const { show } = useLayoutVisible();
 
 const sidebarScrollTop = ref(0);
 
 function onSidebarScroll(e: Event) {
   sidebarScrollTop.value = (e.target as HTMLElement).scrollTop;
 }
-
-const enableSidebar = computed(() => {
-  return settingsStore.mode === 'mobile' || (
-    ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
-    && menuStore.sidebarMenus.length !== 0
-    && !(
-      settingsStore.settings.menu.subMenuOnlyOneHide
-      && menuStore.sidebarMenus.length === 1
-      && (
-        !menuStore.sidebarMenus[0].children
-        || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
-      )
-    )
-  );
-});
-
-const showSidebar = computed<boolean>(() => {
-  return (routeStore.getRemoteAppRouteById(route)?.meta?.layout as any)?.sidebar ?? true;
-});
 </script>
 
 <template>
   <div
-    v-if="showSidebar ? showSidebar : enableSidebar"
+    v-if="show.subSidebar"
     class="sub-sidebar-container"
     :class="{
       'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,