@pubinfo/core 2.0.0-rc.3 → 2.0.0-rc.5

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>

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

@@ -0,0 +1,54 @@
+/**
+ * 不带盒子外观的图标配置。
+ * 当未显式设置 `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
+  /** 是否是小 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/index.ts

@@ -4,5 +4,8 @@ export { default as PageMain } from './PageMain/index.vue';
 export { default as PassStrengthValidator } from './PassStrengthValidator/index.vue';
 export { default as PubinfoApp } from './PubinfoApp/index.vue';
 export { default as PubinfoIcon } from './PubinfoIcon/index.vue';
+export { default as PubinfoIconPrismBox } from './PubinfoIcon/PrismBox.vue';
+export { default as PubinfoIconSquareBox } from './PubinfoIcon/SquareBox.vue';
 export { default as PubinfoProvider } from './PubinfoProvider';
-export { createPubinfoProvider, pubinfoInjectionKey } from './PubinfoProvider';
+
+export { createPubinfoProvider, pubinfoInjectionKey } from './PubinfoProvider'; ;

package/src/features/context/index.ts

@@ -9,26 +9,11 @@ interface InternalContext {
   requestBasic: RequestInstance
 }
 
-// 持久化全局上下文，支持 HMR 后恢复
-const g = globalThis as any;
-g.__PUBINFO__ = g.__PUBINFO__ || {};
-if (!g.__PUBINFO__.ctx) {
-  g.__PUBINFO__.ctx = createContext<InternalContext>();
-}
-const ctx = g.__PUBINFO__.ctx as ReturnType<typeof createContext<InternalContext>>;
-
-// 旧 state 恢复
-if (g.__PUBINFO__.state) {
-  try {
-    ctx.set(g.__PUBINFO__.state);
-  }
-  catch {}
-}
+const ctx = createContext<InternalContext>('ctx', { stateKey: 'state' });
 
 /** 初始化全局 context */
 export function createPubinfoContext(newState: InternalContext) {
   // 缓存用于 wrapProxy 兜底
-  g.__PUBINFO__.state = newState;
   ctx.set(newState);
   // 立即激活 use()
   ctx.use();

package/src/features/router/systemRoutes.ts

@@ -18,7 +18,6 @@ const systemRoutes: RouteRecordRaw[] = [
         component: () => import('@/features/pages/profile/index.vue'),
         meta: {
           title: '个人中心',
-          i18n: 'route.personal.profile',
           icon: 'i-iconamoon-profile-duotone',
         },
       },

package/src/features/settings/index.ts

@@ -52,7 +52,6 @@ let globalSettings: RequiredDeep<Settings.all> = {
   },
   toolbar: {
     enableNotification: true,
-    enableI18n: true,
     enableFullscreen: true,
     enablePageReload: true,
     enableColorScheme: true,

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

@@ -113,7 +113,6 @@ const useFavoritesStore = defineStore(
         list.value.push({
           fullPath: route.fullPath,
           title: meta?.title,
-          i18n: meta?.i18n,
           icon: meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
         });
       }

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

@@ -40,12 +40,11 @@ const useRouteStore = defineStore(
      * @returns 面包屑对象
      */
     function createBreadcrumb(currentRouter: RouteRecordRaw, baseUrl?: RouteRecordRaw['path']): Route.breadcrumb {
-      const { title, i18n, icon, activeIcon, breadcrumb = true } = defaultTo(currentRouter.meta, {} as RouteMeta);
+      const { title, icon, activeIcon, breadcrumb = true } = defaultTo(currentRouter.meta, {} as RouteMeta);
       const path = defaultTo(baseUrl, currentRouter.path);
       return {
         path,
         title,
-        i18n,
         icon,
         activeIcon,
         hide: !breadcrumb,
@@ -163,7 +162,6 @@ const useRouteStore = defineStore(
 
       if (routesRaw.value.length) {
         routesRaw.value.forEach((item) => {
-          // CLOSE: 开发模式应用的子路由不应该被扁平化到vue-router中
           // 开发模式应用只在TopMode中显示，点击时显示开发状态
           if (get(item, 'meta.isDev', false)) {
             useWarn(`开发模式应用"${item.meta?.title}"的子路由将不会被注册到vue-router中`);
@@ -304,7 +302,6 @@ const useRouteStore = defineStore(
                     component: item.component,
                     meta: {
                       title: item.meta.title,
-                      i18n: item.meta.i18n,
                       sidebar: false,
                       breadcrumb: false,
                     },
@@ -364,7 +361,6 @@ const useRouteStore = defineStore(
           // 将本地应用替换成静态路由
           if (route.type === RESOURCE_TYPE.APP) {
             const foundStaticRoute = staticRoutes.find(staticRoute => staticRoute.meta?.auth === route.code);
-            // CLOSE: 静态应用如果是开发模式，仍然要返回路由对象供TopMode显示
             // 但其子路由不会被注册到vue-router中，这由菜单系统和路由扁平化逻辑处理
             if (foundStaticRoute && get(foundStaticRoute, 'meta.isDev', false)) {
               useWarn(`静态应用"${foundStaticRoute.meta?.title}"处于开发模式，将在TopMode中显示开发状态`);
@@ -374,10 +370,10 @@ const useRouteStore = defineStore(
 
           // 将动态应用数据格式化成路由数据
           if (route.type === RESOURCE_TYPE.DYNAMIC_APP) {
-            // CLOSE: 动态应用如果是开发模式，仍然要返回路由对象供TopMode显示
             if (route.meta?.isDev) {
               useWarn(`动态应用"${route.name}"处于开发模式，将在TopMode中显示开发状态`);
             }
+
             return formatBackRoutes([route])[0] as any;
           }
 
@@ -400,9 +396,6 @@ const useRouteStore = defineStore(
           }
         });
 
-        // FIX-ME routesRaw 最终会被 routes 使用，在 menuStore 中作为生成 allMenus 的数据源。
-        // 为了解决这个问题，我们需要重构一下逻辑，想办法将 路由 和 菜单 分开处理。
-        // 可以考虑直接让 menuStore 的菜单根据 remoteRoutesRaw 生成。
         routesRaw.value = [...remoteRoutes, ...restStaticRoutes];
       }
 

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

@@ -37,7 +37,6 @@ const useTabbarStore = defineStore(
                 routeName: route.name,
                 activeMenu: route.meta.activeMenu,
                 title: typeof route.meta.title === 'function' ? route.meta.title() : route.meta.title,
-                i18n: route.meta.i18n,
                 iframe: route.meta.iframe,
                 icon: route.meta?.icon ?? route.meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
                 activeIcon: route.meta?.activeIcon ?? route.meta?.breadcrumbNeste?.findLast(item => item.activeIcon)?.activeIcon,
@@ -95,7 +94,6 @@ const useTabbarStore = defineStore(
             routeName: route.name!,
             activeMenu: meta?.activeMenu,
             title: typeof meta?.title === 'function' ? meta.title() : meta?.title,
-            i18n: meta?.i18n,
             iframe: meta?.iframe,
             icon: meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
             activeIcon: meta?.activeIcon ?? meta?.breadcrumbNeste?.findLast(item => item.activeIcon)?.activeIcon,
@@ -121,7 +119,6 @@ const useTabbarStore = defineStore(
             findTab.routeName = route.name!;
             findTab.activeMenu = meta?.activeMenu;
             findTab.title = typeof meta?.title === 'function' ? meta.title() : meta?.title;
-            findTab.i18n = meta?.i18n;
             findTab.iframe = meta?.iframe;
             findTab.icon = meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon;
             findTab.activeIcon = meta?.activeIcon ?? meta?.breadcrumbNeste?.findLast(item => item.activeIcon)?.activeIcon;