@pubinfo/core 2.0.0-rc.4 → 2.0.0

package/src/built-in/layout-component/composables/useGlobalSearch.ts

@@ -1,9 +1,44 @@
-import { ref } from 'vue';
+import { ref, shallowRef } from 'vue';
 
 type SearchType = 'menu' | 'tab';
 
 const isShow = ref(false);
 const searchType = ref<SearchType>('menu');
+const panelRegistry = new Map<symbol, number>();
+const activePanelId = shallowRef<symbol | null>(null);
+
+function updateActivePanel() {
+  let candidate: symbol | null = null;
+  let highestPriority = Number.NEGATIVE_INFINITY;
+  panelRegistry.forEach((priority, id) => {
+    if (priority > highestPriority) {
+      highestPriority = priority;
+      candidate = id;
+    }
+  });
+  activePanelId.value = candidate;
+}
+
+function registerPanel(id: symbol, priority = 0) {
+  panelRegistry.set(id, priority);
+  updateActivePanel();
+}
+
+function unregisterPanel(id: symbol) {
+  if (!panelRegistry.has(id)) {
+    return;
+  }
+  panelRegistry.delete(id);
+  updateActivePanel();
+}
+
+function setPanelPriority(id: symbol, priority: number) {
+  if (!panelRegistry.has(id)) {
+    return;
+  }
+  panelRegistry.set(id, priority);
+  updateActivePanel();
+}
 
 function open(type?: SearchType) {
   if (type) {
@@ -39,9 +74,13 @@ export function useGlobalSearch() {
   return {
     isShow,
     searchType,
+    activePanelId,
     open,
     close,
     toggle,
+    registerPanel,
+    unregisterPanel,
+    setPanelPriority,
   };
 }
 

package/src/built-in/system-info/components/SystemInfo.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useToggle } from '@vueuse/core';
+import hotkeys from 'hotkeys-js';
+import HSlideover from '@/built-in/layout-component/components/ui/HSlideover.vue';
+
+const [visible, toggle] = useToggle(false);
+
+const { pkg, buildTime } = __SYSTEM_INFO__;
+hotkeys('alt+i', () => toggle());
+</script>
+
+<template>
+  <HSlideover v-model="visible" title="系统信息">
+    <div class="px-4">
+      <h2 class="m-0 text-lg font-bold">
+        最后编译时间
+      </h2>
+      <div class="my-4 text-center text-lg font-sans">
+        {{ buildTime }}
+      </div>
+    </div>
+    <div class="px-4">
+      <h2 class="m-0 text-lg font-bold">
+        生产环境依赖
+      </h2>
+      <ul class="list-none pl-0 text-sm">
+        <li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
+          <div class="font-bold">
+            {{ key }}
+          </div>
+          <div class="font-sans">
+            {{ val }}
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="px-4">
+      <h2 class="m-0 text-lg font-bold">
+        开发环境依赖
+      </h2>
+      <ul class="list-none pl-0 text-sm">
+        <li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
+          <div class="font-bold">
+            {{ key }}
+          </div>
+          <div class="font-sans">
+            {{ val }}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </HSlideover>
+</template>

package/src/built-in/system-info/index.ts

@@ -0,0 +1,16 @@
+import type { ModuleOptions } from '@/core';
+import SystemInfoComponent from './components/SystemInfo.vue';
+
+/**
+ * 系统信息
+ */
+export function SystemInfo(): ModuleOptions {
+  return {
+    name: 'built-in:system-info',
+    setup() {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      createApp(SystemInfoComponent).mount(container);
+    },
+  };
+}

package/src/core/ctx.ts

@@ -1,3 +1,9 @@
 import { createHooks } from 'hookable';
+import { getPubinfoNamespace } from '@/utils';
 
-export const hooks = createHooks();
+const HOOKS_KEY = '__pubinfo_core_hooks__';
+type HookStore = ReturnType<typeof createHooks>;
+
+const namespace = getPubinfoNamespace() as Record<string, HookStore | undefined>;
+
+export const hooks = namespace[HOOKS_KEY] || (namespace[HOOKS_KEY] = createHooks());

package/src/core/resolver/icon.ts

@@ -1,11 +1,11 @@
 import type { ModuleRecord } from './resolver';
-import { readProjectModules } from './resolver';
+import { getPubinfoNamespace } from '@/utils';
+import { loadProjectModules, readProjectModules } from './resolver';
 
 // 持久化图标模块，支持 HMR 后恢复
-const g = globalThis as any;
-g.__PUBINFO__ = g.__PUBINFO__ || {};
-g.__PUBINFO__.iconModules = g.__PUBINFO__.iconModules || new Map<string, ModuleRecord>();
-const iconModuleMap = g.__PUBINFO__.iconModules as Map<string, ModuleRecord>;
+const namespace = getPubinfoNamespace();
+namespace.iconModules = namespace.iconModules || new Map<string, ModuleRecord>();
+const iconModuleMap = namespace.iconModules as Map<string, ModuleRecord>;
 
 export function defineIconModule(id: string, map: ModuleRecord) {
   if (iconModuleMap.has(id)) {
@@ -31,6 +31,10 @@ export function getAllIconModules(): Map<string, ModuleRecord> {
 }
 
 export async function setupIcon(name: string, id?: string) {
+  if (!readProjectModules()) {
+    await loadProjectModules().catch(() => {});
+  }
+
   const modules = readProjectModules();
   const iconMap = modules?.icons ?? {};
   const moduleMap = id ? (getIconModule(id) ?? {}) : {};

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

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+/**
+ * PrismBox（六边形容器）
+ *
+ * 目标：
+ * - 默认使用纯 CSS clip-path 生成六边形
+ * - 当检测到 CSS 变量 `--pubinfo-box-radius` > 0 且容器为“像素正方形”时，
+ *   通过运行时按需生成圆角六边形 SVG mask（mask-image / -webkit-mask-image），
+ *   兼容浏览器差异，保持与 SquareBox 一致的主题变量接口。
+ *
+ * 注：圆角六边形目前纯 CSS 难以稳定跨浏览器实现（clip-path 不支持圆角），
+ * 因此采用极薄的运行时以 CSS 变量为输入生成 mask；未满足条件时退回纯 CSS 六边形。
+ */
+
+const el = ref<HTMLElement | null>(null);
+let ro: ResizeObserver | null = null;
+let mo: MutationObserver | null = null;
+let pending = false;
+
+function scheduleApply() {
+  if (pending) {
+    return;
+  }
+  pending = true;
+  requestAnimationFrame(() => {
+    pending = false;
+    applyMask();
+  });
+}
+
+function parsePx(input: string | null | undefined): number | null {
+  if (!input) {
+    return null;
+  }
+  const n = Number.parseFloat(input);
+  return Number.isFinite(n) ? n : null;
+}
+
+function genRoundedHexMask(size: number, rPx: number): string | null {
+  if (!(size > 0 && rPx > 0)) {
+    return null;
+  }
+  const maxR = size * 0.35;
+  const R = Math.min(rPx, maxR);
+  const rp = (R / size) * 100;
+  // 移除衰减系数以提高圆角的可见度
+  const pts = [
+    { x: 50, y: 0 },
+    { x: 93, y: 25 },
+    { x: 93, y: 75 },
+    { x: 50, y: 100 },
+    { x: 7, y: 75 },
+    { x: 7, y: 25 },
+  ];
+  const normEdge = 43;
+  const t = Math.min(rp / normEdge, 0.5);
+  const lerp = (a: any, b: any, tt: number) => ({ x: a.x + (b.x - a.x) * tt, y: a.y + (b.y - a.y) * tt });
+  const before: any[] = [];
+  const after: any[] = [];
+  for (let i = 0; i < pts.length; i++) {
+    const p = pts[i];
+    const pPrev = pts[(i - 1 + pts.length) % pts.length];
+    const pNext = pts[(i + 1) % pts.length];
+    before.push(lerp(p, pPrev, t));
+    after.push(lerp(p, pNext, t));
+  }
+  let d = `M ${after[0].x} ${after[0].y}`;
+  for (let i = 1; i < pts.length; i++) {
+    d += ` L ${before[i].x} ${before[i].y} Q ${pts[i].x} ${pts[i].y} ${after[i].x} ${after[i].y}`;
+  }
+  d += ` L ${before[0].x} ${before[0].y} Q ${pts[0].x} ${pts[0].y} ${after[0].x} ${after[0].y} Z`;
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' d='${d}'/></svg>`;
+  const encoded = encodeURIComponent(svg).replace(/'/g, '%27').replace(/"/g, '%22');
+  return `url("data:image/svg+xml,${encoded}")`;
+}
+
+function applyMask() {
+  const node = el.value;
+  if (!node) {
+    return;
+  }
+  const cs = window.getComputedStyle(node);
+
+  const w = parsePx(cs.width);
+  const h = parsePx(cs.height);
+  // 允许通过 CSS 变量传递 px 值（推荐 px），非 px 或缺省将视作 0
+  const rVar = cs.getPropertyValue('--pubinfo-box-radius').trim();
+  let rPx: number = 0;
+  if (rVar) {
+    const numeric = parsePx(rVar);
+    rPx = numeric ?? (rVar.endsWith('px') ? parsePx(rVar) ?? 0 : 0);
+  }
+  // 变量取不到时，回退解析 border-radius 的左上角值（px）
+  if (!rPx) {
+    const br = cs.borderTopLeftRadius || cs.borderRadius;
+    const brNum = parsePx(br);
+    if (brNum) {
+      rPx = brNum;
+    }
+  }
+
+  // 宽高可解析且 r>0 时启用圆角 mask（非正方形也允许，形状会按元素比例拉伸）
+  if (w && h && rPx > 0) {
+    const size = Math.min(w, h);
+    const maskUrl = genRoundedHexMask(size, rPx);
+    if (maskUrl) {
+      const supportsMask = typeof CSS !== 'undefined' && (
+        CSS.supports('mask-image', 'url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")')
+        || CSS.supports('-webkit-mask-image', 'url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")')
+      );
+      node.style.webkitMaskImage = maskUrl as any;
+      node.style.maskImage = maskUrl as any;
+      node.style.webkitMaskRepeat = 'no-repeat';
+      node.style.maskRepeat = 'no-repeat';
+      node.style.webkitMaskSize = '100% 100%';
+      node.style.maskSize = '100% 100%';
+      node.style.webkitMaskPosition = 'center';
+      node.style.maskPosition = 'center';
+      if (supportsMask) {
+        // 移除 clip-path，避免其直角边缘覆盖圆角效果
+        node.style.clipPath = 'none';
+        (node.style as any).webkitClipPath = 'none';
+      }
+      else {
+        // 不支持 mask 时回退 clip-path 六边形
+        node.style.clipPath = 'polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)';
+        (node.style as any).webkitClipPath = 'polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)';
+      }
+      return;
+    }
+  }
+  // 回退：去掉 mask，仅使用 clip-path 六边形
+  node.style.webkitMaskImage = '';
+  node.style.maskImage = '';
+  node.style.webkitMaskRepeat = '';
+  node.style.maskRepeat = '';
+  node.style.webkitMaskSize = '';
+  node.style.maskSize = '';
+  node.style.webkitMaskPosition = '';
+  node.style.maskPosition = '';
+  node.style.clipPath = 'polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)';
+  (node.style as any).webkitClipPath = 'polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)';
+}
+
+onMounted(() => {
+  applyMask();
+  ro = new ResizeObserver(() => applyMask());
+  if (el.value) {
+    ro.observe(el.value);
+  }
+  // 监听自身与文档根节点的样式/类变化，以捕获 CSS 变量或主题切换
+  mo = new MutationObserver(() => scheduleApply());
+  if (el.value) {
+    mo.observe(el.value, { attributes: true, attributeFilter: ['style', 'class'] });
+  }
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style'], subtree: true });
+});
+
+onBeforeUnmount(() => {
+  if (ro && el.value) {
+    ro.unobserve(el.value);
+  }
+  ro = null;
+  if (mo) {
+    mo.disconnect();
+  }
+  mo = null;
+});
+</script>
+
+<template>
+  <div ref="el" class="prism-box">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.prism-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  line-height: 1;
+  vertical-align: top;
+  width: var(--pubinfo-box-size, auto);
+  height: var(--pubinfo-box-size, auto);
+  border-radius: var(--pubinfo-box-radius) !important;
+  background: var(
+    --pubinfo-box-full-background,
+    linear-gradient(
+      var(--pubinfo-box-angle, 65deg),
+      var(--pubinfo-box-gradient-from, var(--pubinfo-box-background, #65E54A)),
+      var(--pubinfo-box-gradient-to, var(--pubinfo-box-background, #35C724))
+    )
+  );
+  /* 纯 CSS 六边形裁剪 */
+  -webkit-clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
+  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
+}
+</style>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * SquareBox
+ * 语义：图标 / 徽记 / 占位的方形或矩形“载体”容器。
+ *
+ * 设计目标：
+ * - 统一图标背景、圆角、渐变、尺寸计算逻辑（与 PrismBox 等保持一致）
+ * - 使用 <div> 而不是 <svg>，可直接放置任意 HTML / SVG / 组件
+ *
+ * 尺寸策略：
+ * - width / height / size 三种方式；size 作为宽高同步值
+ * - full=true 填充父容器（忽略 width/height/size）
+ * - 仅在固定 px 宽高时暴露：--square-inner-size / --box-inner-size = width - padding*2
+ *
+ * 圆角策略：
+ * - radius 支持 数字 | 纯数字字符串 | 其他合法 CSS 长度/百分比
+ * - 未传或空串 => 默认 6px；传 0 获得直角
+ * - 暴露 CSS 变量：--box-radius 便于主题覆写
+ *
+ * 背景策略：
+ * - 优先使用 props.background
+ * - 否则生成线性渐变：gradientFrom -> gradientTo
+ *
+ * 可访问性：
+ * - 不附带 role/aria-*，由使用方按内容语义自行添加
+ *
+ */
+</script>
+
+<template>
+  <div class="square-box">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.square-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  line-height: 1;
+  vertical-align: top;
+  border-radius: var(--pubinfo-box-radius) !important;
+  /*
+    Allow a complete background override via CSS var when provided,
+    otherwise fall back to previous linear gradient behavior.
+  */
+  background: var(
+    --pubinfo-box-full-background,
+    linear-gradient(
+      var(--pubinfo-box-angle, 65deg),
+      var(--pubinfo-box-gradient-from, var(--pubinfo-box-background, #65E54A)),
+      var(--pubinfo-box-gradient-to, var(--pubinfo-box-background, #35C724))
+    )
+  );
+}
+</style>

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

@@ -1,26 +1,22 @@
 <script setup lang="ts">
+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 { useProvider } from '../PubinfoProvider';
+import PrismBox from './PrismBox.vue';
+import SquareBox from './SquareBox.vue';
 
 defineOptions({
   name: 'PubinfoIcon',
 });
 
-const props = defineProps<{
-  name: string
-  async?: boolean
-  flip?: 'horizontal' | 'vertical' | 'both'
-  rotate?: number
-  color?: string
-  size?: string | number
-}>();
+const props = defineProps<PubinfoIconOptions>();
 
 const { loadIcon } = useProvider();
 
-const outputType = computed(() => {
+const outputType = computed<'svg' | 'css' | 'antd' | 'custom'>(() => {
   if (props.name.indexOf('i-') === 0) {
     return props.async ? 'svg' : 'css';
   }
@@ -51,35 +47,30 @@ const outputName = computed(() => {
   return props.name;
 });
 
-const style = computed(() => {
-  const transform: string[] = [];
-  if (props.flip) {
-    switch (props.flip) {
-      case 'horizontal':
-        transform.push('rotateY(180deg)');
-        break;
-      case 'vertical':
-        transform.push('rotateX(180deg)');
-        break;
-      case 'both':
-        transform.push('rotateX(180deg)');
-        transform.push('rotateY(180deg)');
-        break;
-    }
+const isBox = computed<'square' | 'prism' | 'null'>(() => {
+  if (props.box === undefined) {
+    return 'null';
   }
-  if (props.rotate) {
-    transform.push(`rotate(${props.rotate % 360}deg)`);
+  else if (['square', 'prism'].includes(props.box)) {
+    return props.box;
   }
-  return {
-    ...(props.color && { color: props.color }),
-    ...(props.size && { fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size }),
-    ...(transform.length && { transform: transform.join(' ') }),
-  };
+  else {
+    return 'null';
+  }
+});
+
+const element = computed(() => {
+  if (isBox.value === 'square') {
+    return SquareBox;
+  }
+  else if (isBox.value === 'prism') {
+    return PrismBox;
+  }
+  return 'i';
 });
 
 const icon = computedAsync(async () => {
   const parse = parseString(props.name);
-
   return loadIcon?.(props.name) ?? await setupIcon(`${parse.name}${parse.ext || '.svg'}`, parse.prefix);
 });
 
@@ -124,17 +115,117 @@ function parseString(str: string): Parsed {
 
   return { prefix, name, ext };
 }
+
+const style = computed(() => {
+  const transform: string[] = [];
+  if (props.flip) {
+    switch (props.flip) {
+      case 'horizontal':
+        transform.push('rotateY(180deg)');
+        break;
+      case 'vertical':
+        transform.push('rotateX(180deg)');
+        break;
+      case 'both':
+        transform.push('rotateX(180deg)');
+        transform.push('rotateY(180deg)');
+        break;
+    }
+  }
+  if (props.rotate) {
+    transform.push(`rotate(${props.rotate % 360}deg)`);
+  }
+  const result: Record<string, string> = {
+    '--pubinfo-icon-color': '',
+    '--pubinfo-icon-size': '',
+    '--pubinfo-icon-transform': '',
+  };
+  if (props.color) {
+    result['--pubinfo-icon-color'] = props.color;
+  }
+  if (props.size) {
+    result['--pubinfo-icon-size'] = typeof props.size === 'number' ? `${props.size}px` : props.size;
+  }
+  if (transform.length) {
+    result['--pubinfo-icon-transform'] = transform.join(' ');
+  }
+  // 让内联元素在同一行内进行顶部对齐，避免默认 baseline 导致的视觉不齐
+  result.verticalAlign = 'top';
+  return result;
+});
+
+const bind = computed(() => {
+  if (isBox.value !== 'null') {
+    const result: Record<
+    '--pubinfo-box-background' | '--pubinfo-box-size' | '--pubinfo-box-radius' | '--pubinfo-box-gradient-from' | '--pubinfo-box-gradient-to' | '--pubinfo-box-angle' | '--pubinfo-box-full-background',
+    string> = {
+      '--pubinfo-box-background': '',
+      '--pubinfo-box-size': '',
+      '--pubinfo-box-radius': '',
+      '--pubinfo-box-gradient-from': '',
+      '--pubinfo-box-gradient-to': '',
+      '--pubinfo-box-angle': '',
+      '--pubinfo-box-full-background': '',
+    };
+    if (typeof props.angle === 'string') {
+      result['--pubinfo-box-angle'] = props.angle;
+    }
+    else {
+      result['--pubinfo-box-angle'] = `${props.angle || 65}deg`;
+    }
+    if (typeof props.background === 'string') {
+      // provide full override for any CSS background value (color or gradient)
+      result['--pubinfo-box-full-background'] = props.background;
+      // keep legacy variable for solid color fallback use-cases
+      result['--pubinfo-box-background'] = props.background;
+    }
+    else {
+      result['--pubinfo-box-gradient-from'] = props.background?.from || '#65E54A';
+      result['--pubinfo-box-gradient-to'] = props.background?.to || '#35C724';
+    }
+    result['--pubinfo-box-radius'] = props.radius !== undefined
+      ? (typeof props.radius === 'number' ? `${props.small ? props.radius / 2 : props.radius}px` : props.small ? `calc(${props.radius} / 2)` : props.radius)
+      : (props.box === 'prism' ? `${props.small ? '3px' : '6px'}` : `${props.small ? '7px' : '14px'}`);
+    if (props.size) {
+      result['--pubinfo-box-size'] = typeof props.size === 'number' ? `${props.size}px` : props.size;
+    }
+    return {
+      style: { ...result, ...style.value },
+    };
+  }
+  else {
+    return {
+      style: style.value,
+    };
+  }
+});
 </script>
 
 <template>
-  <i :data-icon-name="name" class="relative size-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
+  <component
+    :is="element"
+    :data-icones="props.name"
+    :data-box="isBox !== 'null' ? '' : undefined"
+    :data-box-type="isBox"
+    :data-icon-type="outputType"
+    :data-icon-small="props.small ? '' : undefined"
+    class="
+    data-[box-type=null]:relative data-[box-type=null]:inline-flex
+    data-[box-type=null]:items-center data-[box-type=null]:justify-center
+    data-[box-type=null]:fill-current data-[box-type=null]:leading-[1]
+    data-[box-type=null]:align-top
+    data-[box]:size-[var(--pubinfo-box-size)]!
+    data-[box]:text-[calc(var(--pubinfo-box-size)_*_0.5)]!
+    text-[calc(var(--pubinfo-icon-size))]
+    text-[var(--pubinfo-icon-color)]
+    [transform:var(--pubinfo-icon-transform)]"
+    v-bind="bind"
+  >
     <i v-if="outputType === 'css'" :class="outputName" />
     <Icon v-else-if="outputType === 'svg'" :icon="outputName" />
     <span v-else-if="outputType === 'antd'" class="antd-icon" :data-icon="outputName">
-      <component
-        :is="AntdIcons[outputName as keyof typeof AntdIcons] as any"
-      />
+      <component :is="(AntdIcons[outputName as keyof typeof AntdIcons] as any)" />
     </span>
     <img v-else-if="icon" class="size-1em" :src="icon">
-  </i>
+  </component>
 </template>