@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import type { PubinfoIconOptions } from './props';
+import * as AntdIcons from '@ant-design/icons-vue';
+import { Icon } from '@iconify/vue';
+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';
+
+defineOptions({
+  name: 'PubinfoIcon',
+});
+
+const props = withDefaults(defineProps<PubinfoIconOptions>(), {
+  size: '1rem',
+});
+
+const { loadIcon } = useProvider();
+
+const outputType = computed<'svg' | 'css' | 'antd' | 'custom'>(() => {
+  if (props.name.indexOf('i-') === 0) {
+    return props.async ? 'svg' : 'css';
+  }
+  else if (props.name.includes(':') && !props.name.startsWith('antd:')) {
+    return 'svg';
+  }
+  else if (props.name.startsWith('antd:')) {
+    return 'antd';
+  }
+  else {
+    return 'custom';
+  }
+});
+
+const outputName = computed(() => {
+  if (props.name.indexOf('i-') === 0) {
+    let conversionName = props.name;
+    if (props.async) {
+      conversionName = conversionName.replace('i-', '');
+    }
+    return conversionName;
+  }
+
+  if (props.name.startsWith('antd:')) {
+    return props.name.replace('antd:', '');
+  }
+
+  return props.name;
+});
+
+const isBox = computed<'square' | 'prism' | 'null'>(() => {
+  if (props.box === undefined) {
+    return 'null';
+  }
+  else if (['square', 'prism'].includes(props.box)) {
+    return props.box;
+  }
+  else {
+    return 'null';
+  }
+});
+
+const element = computed(() => {
+  if (isBox.value === 'square') {
+    return SquareBox;
+  }
+  else if (isBox.value === 'prism') {
+    return PrismBox;
+  }
+  return 'i';
+});
+
+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
+  name: string
+  ext: string
+}
+
+function parseString(str: string): Parsed {
+  let prefix = '';
+  let name = '';
+  let ext = '';
+
+  // 匹配 RBAC-[org.svg] 或 RBAC-[org]
+  const match = str.match(/^([^-\s]+)-\[(.+)\]$/);
+
+  if (match) {
+    prefix = match[1];
+    const inner = match[2];
+
+    const dotIdx = inner.lastIndexOf('.');
+    if (dotIdx !== -1) {
+      name = inner.slice(0, dotIdx);
+      ext = inner.slice(dotIdx);
+    }
+    else {
+      name = inner;
+    }
+  }
+  else {
+    // 如果没有前缀格式，就当普通文件处理
+    const dotIdx = str.lastIndexOf('.');
+    if (dotIdx !== -1) {
+      name = str.slice(0, dotIdx);
+      ext = str.slice(dotIdx);
+    }
+    else {
+      name = str;
+    }
+  }
+
+  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' | '--pubinfo-box-icon-size',
+    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': '',
+      '--pubinfo-box-icon-size': '',
+    };
+    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 ? `${props.radius}` : 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;
+    }
+    // iconSize: 支持百分比或任意 CSS 长度；number 视为百分比
+    const iconSizeProp = (props as any).iconSize as number | string | undefined;
+    if (iconSizeProp !== undefined) {
+      if (typeof iconSizeProp === 'number' && Number.isFinite(iconSizeProp)) {
+        // 数字：视为百分比，直接生成 calc(px) 表达式（相对 box 尺寸）
+        result['--pubinfo-box-icon-size'] = `calc(var(--pubinfo-box-size) * ${iconSizeProp / 100})`;
+      }
+      else if (typeof iconSizeProp === 'string') {
+        const v = iconSizeProp.trim();
+        if (v.endsWith('%')) {
+          const n = Number.parseFloat(v);
+          if (Number.isFinite(n)) {
+            result['--pubinfo-box-icon-size'] = `calc(var(--pubinfo-box-size) * ${n / 100})`;
+          }
+        }
+        else {
+          // 其他单位：直接作为绝对大小
+          result['--pubinfo-box-icon-size'] = v;
+        }
+      }
+    }
+    return {
+      style: { ...result, ...style.value },
+    };
+  }
+  else {
+    return {
+      style: style.value,
+    };
+  }
+});
+</script>
+
+<template>
+  <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]:font-size-[var(--pubinfo-box-icon-size,_calc(var(--pubinfo-box-size)_*_.5))]!
+    font-size-[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)" />
+    </span>
+    <img v-else-if="icon" class="size-1em" :src="icon">
+  </component>
+</template>

package/src/features/components/PubinfoIcon/props.ts

@@ -0,0 +1,61 @@
+/**
+ * 不带盒子外观的图标配置。
+ * 当未显式设置 `box` 时将使用该形状；并且此时不允许传入 `background` / `radius`。
+ */
+export interface PubinfoIconNotBoxOptions {
+  /** 图标名称 */
+  name: string
+  /** 是否异步加载 */
+  async?: boolean
+  /** 翻转方向 */
+  flip?: 'horizontal' | 'vertical' | 'both'
+  /** 旋转角度 */
+  rotate?: number
+  /** 颜色 */
+  color?: string
+  /** 尺寸 */
+  size?: string | number
+}
+
+/**
+ * 带盒子外观的图标配置。判定条件：存在 `box` 字段。
+ * 这里将 `box` 设为必填，用作判别式属性。
+ */
+export interface PubinfoIconBoxOptions extends PubinfoIconNotBoxOptions {
+  /** 盒子类型（存在该字段即可触发 Box 选项） */
+  box: 'square' | 'prism'
+  /** 背景：纯色或渐变 */
+  background?: string | {
+    from: string
+    to: string
+  }
+  /** 圆角 */
+  radius?: number | string
+  /** 背景渐变的角度 */
+  angle?: number | string
+  /**
+   * 图标在盒子内的尺寸（百分比或任意 CSS 尺寸）。
+   * - 传 number：视为百分比，例如 80 => 80%
+   * - 传 '80%'：将按比例缩放相对 box 尺寸
+   * - 传其他 CSS 长度（如 '24px' / '1.2rem'）：将作为最终字体大小使用（不再与 box 关联）
+   */
+  iconSize?: number | string
+  /** 是否是小 logo */
+  small?: boolean
+}
+
+/**
+ * 根据是否提供 `box` 自动区分两类配置：
+ * - 未提供 `box`：禁止出现 `background` 与 `radius`（否则 TS 报错）
+ * - 提供 `box`：允许使用盒子相关属性
+ */
+export type PubinfoIconOptions
+  = | PubinfoIconBoxOptions
+    | (PubinfoIconNotBoxOptions & { box?: undefined, background?: never, radius?: never, angle?: never, small?: false });
+
+/**
+ * 可用于泛型推断的条件类型：传入的对象类型若含有 `box` 字段，则推断为 Box 版本，否则为普通版本。
+ * 一般情况下直接使用 `PubinfoIconOptions` 联合类型即可。
+ */
+export type InferPubinfoIconOptions<T extends { box?: any } | undefined>
+  = T extends { box: PubinfoIconBoxOptions['box'] } ? PubinfoIconBoxOptions : PubinfoIconNotBoxOptions;

package/src/features/components/PubinfoProvider/index.ts

@@ -0,0 +1,35 @@
+import type { InjectionKey } from 'vue';
+
+interface PubinfoProviderProps {
+  loadIcon?: (name?: string) => any
+}
+
+export const pubinfoInjectionKey: InjectionKey<PubinfoProviderProps> = Symbol('injectionKey');
+
+export function createPubinfoProvider(props: PubinfoProviderProps) {
+  provide(pubinfoInjectionKey, props);
+}
+
+export function useProvider() {
+  return inject(pubinfoInjectionKey, {});
+}
+
+export default defineComponent({
+  name: 'PubinfoProvider',
+  props: {
+    loadIcon: {
+      type: Function as PubinfoProviderProps['loadIcon'],
+    },
+  },
+  setup(props, { slots }) {
+    const provider = useProvider();
+
+    createPubinfoProvider({
+      loadIcon(name) {
+        return props?.loadIcon?.(name) ?? provider?.loadIcon?.(name);
+      },
+    });
+
+    return () => slots?.default?.();
+  },
+});