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

package/dist/utils/global.d.ts

@@ -0,0 +1,33 @@
+import { UseContext } from 'unctx';
+type PubinfoNamespace = Record<string, unknown>;
+/**
+ * Return the shared __PUBINFO__ namespace, creating it if necessary.
+ */
+export declare function getPubinfoNamespace(): PubinfoNamespace;
+interface PersistedContextOptions {
+    /**
+     * Optional key used to hydrate persisted state.
+     * Defaults to transforming `FooCtx` into `FooState`.
+     */
+    stateKey?: string;
+    /**
+     * Toggle hydration behaviour. Enabled by default.
+     */
+    hydrate?: boolean;
+    /**
+     * Automatically persist whenever ctx.set() is called.
+     */
+    persistOnSet?: boolean;
+}
+/**
+ * Create (or reuse) a context stored on the global namespace and
+ * hydrate it from a persisted state if available.
+ */
+export declare function createContext<T>(contextKey: string, options?: PersistedContextOptions): UseContext<T>;
+/** Persist a value inside the __PUBINFO__ namespace. */
+export declare function setPersistedState<T>(stateKey: string, state: T): void;
+/** Retrieve a value from the __PUBINFO__ namespace. */
+export declare function getPersistedState<T>(stateKey: string): T | undefined;
+/** Remove a value from the __PUBINFO__ namespace. */
+export declare function clearPersistedState(stateKey: string): void;
+export {};

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './cleanup';
+export * from './global';
 export * from './path';
 export * from './proxy';
 export * from './storage';
-export { createContext } from 'unctx';
+export { createContext as createRawContext } from 'unctx';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.5",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -18,13 +18,16 @@
     "src",
     "types"
   ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "peerDependencies": {
     "alova": "^3.3.4",
     "pinia": "^3.0.3",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-rc.4",
-    "@pubinfo/vite": "2.0.0-rc.4"
+    "@pubinfo/config": "2.0.0-rc.5",
+    "@pubinfo/vite": "2.0.0-rc.5"
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.16",
@@ -82,8 +85,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-rc.4",
-    "@pubinfo/vite": "2.0.0-rc.4"
+    "@pubinfo/config": "2.0.0-rc.5",
+    "@pubinfo/vite": "2.0.0-rc.5"
   },
   "scripts": {
     "dev": "vite build -w -m watch",

package/src/built-in/index.ts

@@ -5,3 +5,4 @@ export * from './n-progress';
 export * from './pinia-plugin';
 export * from './pre-access';
 export * from './settings';
+export * from './system-info';

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

@@ -117,12 +117,33 @@ onMounted(() => {
               @click="switchTo(index, item)"
             >
               <div class="flex flex-row flex-1 items-center justify-center px-8px">
-                <PubinfoIcon
-                  v-if="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)"
-                  :name="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)!"
-                  :size="18"
-                  class="menu-item-container-icon transition-transform group-hover:scale-120 mr-5px"
-                />
+                <template v-if="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)">
+                  <!-- 当存在 iconOptions 且 boxType 不为 'null' 时，展示带边框/渐变的盒子效果 -->
+                  <PubinfoIcon
+                    v-if="item.meta?.iconOptions"
+                    :name="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)!"
+                    small
+                    :box="(item.meta.iconOptions.boxType as any) || 'prism'"
+                    :size="18"
+                    :angle="item.meta.iconOptions.angle"
+                    :background="item.meta.iconOptions.background"
+                    :radius="item.meta.iconOptions.radius"
+                    :color="(iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon) || '').startsWith('antd:')
+                      ? (item.meta.iconOptions.iconColor || '#ffffff')
+                      : undefined"
+                    class="menu-item-container-icon transition-transform group-hover:scale-120 mr-5px"
+                  />
+                  <!-- 否则与原行为一致（不带盒子），但若提供了图标色也一并生效 -->
+                  <PubinfoIcon
+                    v-else
+                    :name="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)!"
+                    :size="18"
+                    :color="(iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon) || '').startsWith('antd:')
+                      ? (item.meta?.iconOptions?.iconColor || undefined)
+                      : undefined"
+                    class="menu-item-container-icon transition-transform group-hover:scale-120 mr-5px"
+                  />
+                </template>
                 <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
                   {{ generateTitle(item.meta?.title) }}
                 </span>

package/src/built-in/layout-component/components/Menu/item.vue

@@ -48,6 +48,24 @@ const icon = computed(() => {
   return icon;
 });
 
+// 读取菜单条目的 iconOptions（后端可能未定义，使用 any 安全读取）
+const iconOptions = computed(() => ((props.item.meta as any)?.iconOptions) as undefined | {
+  boxType?: 'square' | 'prism' | 'null'
+  angle?: number | string
+  background?: any
+  radius?: number | string
+  iconColor?: string
+});
+
+// 统一盒子类型：存在 iconOptions 时启用盒子，未指定或为 'null' 时默认 prism
+const computedBoxType = computed(() => {
+  const bt = iconOptions.value?.boxType as any;
+  return bt && bt !== 'null' ? bt : 'prism';
+});
+
+// 统一安全的图标颜色（仅 AntD 图标使用）；无配置则为 undefined
+const safeIconColor = computed<string | undefined>(() => iconOptions.value?.iconColor || undefined);
+
 // 缩进样式
 const indentStyle = computed(() => {
   return !rootMenu.isMenuPopup
@@ -91,12 +109,29 @@ defineExpose({
         :style="indentStyle"
       >
         <!-- 特殊化处理，有些时候想要的是一个点 -->
-        <PubinfoIcon
-          v-if="icon && icon !== 'system-point'"
-          :name="icon"
-          :size="20"
-          class="menu-item-container-icon transition-transform group-hover:scale-115"
-        />
+        <template v-if="icon && icon !== 'system-point'">
+          <!-- 有 iconOptions 时启用带边框/渐变的盒子效果 -->
+          <PubinfoIcon
+            v-if="iconOptions"
+            small
+            :name="icon"
+            :box="computedBoxType as any"
+            :size="20"
+            :angle="iconOptions?.angle"
+            :background="iconOptions?.background"
+            :radius="iconOptions?.radius"
+            :color="(icon || '').startsWith('antd:') ? (safeIconColor || '#ffffff') : undefined"
+            class="menu-item-container-icon transition-transform group-hover:scale-115"
+          />
+          <!-- 无 iconOptions 时保持原样（纯图标），但若提供图标色也生效 -->
+          <PubinfoIcon
+            v-else
+            :name="icon"
+            :size="20"
+            :color="(icon || '').startsWith('antd:') ? safeIconColor : undefined"
+            class="menu-item-container-icon transition-transform group-hover:scale-115"
+          />
+        </template>
         <span
           v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)"
           class="title w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"

package/src/built-in/layout-component/components/SettingBar/components/SettingHome.vue

@@ -23,11 +23,8 @@ const { home, toolbar } = toRefs(settingsStore.settings);
     <div class="setting-item">
       <div class="label">
         主页名称
-        <HTooltip text="开启国际化时，该设置无效">
-          <RiQuestionLine />
-        </HTooltip>
       </div>
-      <HInput v-model="home.title" :disabled="toolbar.enableI18n" />
+      <HInput v-model="home.title" />
     </div>
   </HDivider>
 </template>

package/src/built-in/layout-component/components/SettingBar/components/SettingToolbar.vue

@@ -20,12 +20,6 @@ const toolbar = toRef(settingsStore.settings, 'toolbar');
       </div>
       <HToggle v-model="toolbar.enableNotification" />
     </div>
-    <div class="setting-item">
-      <div class="label">
-        国际化
-      </div>
-      <HToggle v-model="toolbar.enableI18n" />
-    </div>
     <div v-if="settingsStore.mode === 'pc'" class="setting-item">
       <div class="label">
         全屏

package/src/built-in/layout-component/components/Tools/SearchPanel.vue

@@ -6,6 +6,7 @@ import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot
 import hotkeys from 'hotkeys-js';
 import { cloneDeep } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import { computed, onBeforeUpdate, onUnmounted, ref, watch } from 'vue';
 import AntDesignCaretDownFilled from '~icons/ant-design/caret-down-filled';
 import AntDesignCaretUpFilled from '~icons/ant-design/caret-up-filled';
 import EpSearch from '~icons/ep/search';
@@ -24,6 +25,10 @@ defineOptions({
   name: 'SearchPanel',
 });
 
+const props = withDefaults(defineProps<{ priority?: number }>(), {
+  priority: 0,
+});
+
 const overlayTransitionClass = ref({
   enter: 'ease-in-out duration-500',
   enterFrom: 'opacity-0',
@@ -56,7 +61,23 @@ interface listTypes {
   breadcrumb: any[]
 }
 
-const { isShow, searchType, toggle: globalToggle } = useGlobalSearch();
+const { isShow, searchType, activePanelId, toggle: globalToggle, close: globalClose, registerPanel, unregisterPanel, setPanelPriority } = useGlobalSearch();
+const panelId = Symbol('global-search-panel');
+const hasRegisteredGlobalHotkeys = ref(false);
+registerPanel(panelId, props.priority);
+onUnmounted(() => {
+  unregisterPanel(panelId);
+  if (hasRegisteredGlobalHotkeys.value) {
+    hotkeys.unbind('alt+s', handleOpenHotkey);
+    hotkeys.unbind('esc', handleCloseHotkey);
+    hasRegisteredGlobalHotkeys.value = false;
+  }
+  hotkeys.unbind('up', keyUp);
+  hotkeys.unbind('down', keyDown);
+  hotkeys.unbind('enter', keyEnter);
+});
+watch(() => props.priority, val => setPanelPriority(panelId, val));
+const isActivePanel = computed(() => activePanelId.value === panelId);
 const searchInput = ref('');
 const sourceList = ref<listTypes[]>([]);
 const actived = ref(-1);
@@ -86,44 +107,79 @@ const resultList = computed(() => {
   return result;
 });
 
-watch(() => isShow.value, (val) => {
-  if (val) {
-    searchInput.value = '';
+watch(
+  [() => isShow.value, () => isActivePanel.value],
+  ([show, active]) => {
+    if (!active) {
+      hotkeys.unbind('up', keyUp);
+      hotkeys.unbind('down', keyDown);
+      hotkeys.unbind('enter', keyEnter);
+      return;
+    }
+    if (show) {
+      searchInput.value = '';
+      actived.value = -1;
+      // 当搜索显示的时候绑定上、下、回车快捷键，隐藏的时候再解绑。另外当 input 处于 focus 状态时，采用 vue 来绑定键盘事件
+      hotkeys('up', keyUp);
+      hotkeys('down', keyDown);
+      hotkeys('enter', keyEnter);
+    }
+    else {
+      hotkeys.unbind('up', keyUp);
+      hotkeys.unbind('down', keyDown);
+      hotkeys.unbind('enter', keyEnter);
+    }
+  },
+  { immediate: true },
+);
+watch(
+  () => resultList.value,
+  () => {
+    if (!isActivePanel.value || !isShow.value) {
+      return;
+    }
     actived.value = -1;
-    // 当搜索显示的时候绑定上、下、回车快捷键，隐藏的时候再解绑。另外当 input 处于 focus 状态时，采用 vue 来绑定键盘事件
-    hotkeys('up', keyUp);
-    hotkeys('down', keyDown);
-    hotkeys('enter', keyEnter);
+    handleScroll();
+  },
+);
+
+function handleOpenHotkey(e: KeyboardEvent) {
+  if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
+    e.preventDefault();
+    initSourceList();
+    isShow.value = true;
   }
-  else {
-    hotkeys.unbind('up', keyUp);
-    hotkeys.unbind('down', keyDown);
-    hotkeys.unbind('enter', keyEnter);
+}
+
+function handleCloseHotkey(e: KeyboardEvent) {
+  if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
+    e.preventDefault();
+    isShow.value = false;
   }
-});
-watch(() => resultList.value, () => {
-  actived.value = -1;
-  handleScroll();
-});
+}
 
-onMounted(() => {
-  hotkeys('alt+s', (e) => {
-    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
-      e.preventDefault();
+watch(
+  () => isActivePanel.value,
+  (active) => {
+    if (active && !hasRegisteredGlobalHotkeys.value) {
+      hotkeys('alt+s', handleOpenHotkey);
+      hotkeys('esc', handleCloseHotkey);
+      hasRegisteredGlobalHotkeys.value = true;
       initSourceList();
-      isShow.value = true;
     }
-  });
-  hotkeys('esc', (e) => {
-    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
-      e.preventDefault();
-      isShow.value = false;
+    else if (!active && hasRegisteredGlobalHotkeys.value) {
+      hotkeys.unbind('alt+s', handleOpenHotkey);
+      hotkeys.unbind('esc', handleCloseHotkey);
+      hasRegisteredGlobalHotkeys.value = false;
     }
-  });
-  initSourceList();
-});
+  },
+  { immediate: true },
+);
 
 function switchType(type: any) {
+  if (!isActivePanel.value) {
+    return;
+  }
   searchInputRef.value.focus();
   initSourceList(type);
 }
@@ -189,6 +245,9 @@ function getSourceListByTabs(arr: Tabbar.recordRaw[]) {
 }
 
 function keyUp() {
+  if (!isActivePanel.value) {
+    return;
+  }
   if (resultList.value.length) {
     actived.value -= 1;
     if (actived.value < 0) {
@@ -198,6 +257,9 @@ function keyUp() {
   }
 }
 function keyDown() {
+  if (!isActivePanel.value) {
+    return;
+  }
   if (resultList.value.length) {
     actived.value += 1;
     if (actived.value > resultList.value.length - 1) {
@@ -207,11 +269,17 @@ function keyDown() {
   }
 }
 function keyEnter() {
+  if (!isActivePanel.value) {
+    return;
+  }
   if (actived.value !== -1) {
     searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click();
   }
 }
 function handleScroll() {
+  if (!isActivePanel.value) {
+    return;
+  }
   if (searchResultRef.value) {
     const contentDom = searchResultRef.value.osInstance()!.elements().content;
     let scrollTo = 0;
@@ -241,7 +309,9 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
   else {
     router.push(path);
   }
-  isShow.value = false;
+  if (isActivePanel.value) {
+    globalClose();
+  }
 }
 
 function toggle(type?: 'menu' | 'tab') {
@@ -252,11 +322,17 @@ function toggle(type?: 'menu' | 'tab') {
 }
 
 // 初始化本地 searchTypeLocal 与全局 searchType 同步
-watch(() => searchType.value, (val) => {
-  if (val) {
-    initSourceList(val as searchTypes);
-  }
-});
+watch(
+  () => searchType.value,
+  (val) => {
+    if (!isActivePanel.value) {
+      return;
+    }
+    if (val) {
+      initSourceList(val as searchTypes);
+    }
+  },
+);
 
 defineExpose({
   toggle,
@@ -264,7 +340,7 @@ defineExpose({
 </script>
 
 <template>
-  <TransitionRoot as="template" :show="isShow">
+  <TransitionRoot v-if="isActivePanel" as="template" :show="isShow">
     <Dialog :initial-focus="searchInputRef" class="fixed inset-0 z-2000 flex" @close="isShow && toggle()">
       <TransitionChild as="template" v-bind="overlayTransitionClass">
         <div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark:bg-stone-8/75" />

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

@@ -143,7 +143,7 @@ watch(() => userStore.user.avatar, () => {
     </div>
 
     <HotkeysIntro ref="hotkeysIntroRef" />
-    <SearchPanel />
+    <SearchPanel :priority="10" />
     <Preferences v-if="settingsStore.settings.app.enableUserPreferences" ref="preferencesRef" />
   </div>
 </template>

package/src/built-in/layout-component/components/Topbar/Tabbar/MoreAction.vue

@@ -21,7 +21,7 @@ defineOptions({
 
 const router = useRouter();
 
-const { settingsStore, tabbarStore, generateTitle } = useContext();
+const { settingsStore, tabbarStore, generateTitle, routeStore } = useContext();
 
 const tabbar = useTabbar();
 
@@ -85,6 +85,44 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
   }
   return name;
 }
+
+// 解析 fullPath 的纯路径部分（去掉 query/hash）
+function stripPath(fullPath: string) {
+  return fullPath.split(/[?#]/)[0];
+}
+
+// 查找与 tab 对应的路由记录
+function findRouteRecordByElement(element: Tabbar.recordRaw) {
+  const pathOnly = stripPath(element.fullPath);
+  const all = [...routeStore.flatSystemRoutes, ...routeStore.flatRoutes] as any[];
+  return all.find(r => r.path === pathOnly);
+}
+
+// 解析该 tab 的 iconOptions（优先当前路由，其次面包屑链路上最近的一个）
+function resolveIconOptions(element: Tabbar.recordRaw): undefined | {
+  boxType?: 'square' | 'prism' | 'null'
+  angle?: number | string
+  background?: any
+  radius?: number | string
+  iconColor?: string
+} {
+  const r: any = findRouteRecordByElement(element);
+  let options = (r?.meta as any)?.iconOptions;
+  if (!options && r?.meta?.breadcrumbNeste?.length) {
+    const found = [...r.meta.breadcrumbNeste].reverse().find((it: any) => it?.iconOptions);
+    options = found?.iconOptions;
+  }
+  return options;
+}
+
+function computeBoxType(options: ReturnType<typeof resolveIconOptions>) {
+  const bt = (options as any)?.boxType as any;
+  return bt && bt !== 'null' ? bt : 'prism';
+}
+
+function getSafeIconColor(options: ReturnType<typeof resolveIconOptions>): string | undefined {
+  return (options as any)?.iconColor || undefined;
+}
 </script>
 
 <template>
@@ -125,7 +163,25 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
               }"
             >
               <div :key="element.tabId" class="title" :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title)" @click="router.push(element.fullPath)">
-                <PubinfoIcon v-if="settingsStore.settings.tabbar.enableIcon && iconName(element.tabId === activedTabId, element.icon, element.activeIcon)" :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!" />
+                <template v-if="settingsStore.settings.tabbar.enableIcon && iconName(element.tabId === activedTabId, element.icon, element.activeIcon)">
+                  <PubinfoIcon
+                    v-if="resolveIconOptions(element)"
+                    small
+                    :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
+                    :box="computeBoxType(resolveIconOptions(element)) as any"
+                    :size="16"
+                    :angle="resolveIconOptions(element)?.angle"
+                    :background="resolveIconOptions(element)?.background"
+                    :radius="resolveIconOptions(element)?.radius"
+                    :color="(iconName(element.tabId === activedTabId, element.icon, element.activeIcon) || '').startsWith('antd:') ? (getSafeIconColor(resolveIconOptions(element)) || '#ffffff') : undefined"
+                  />
+                  <PubinfoIcon
+                    v-else
+                    :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
+                    :size="16"
+                    :color="(iconName(element.tabId === activedTabId, element.icon, element.activeIcon) || '').startsWith('antd:') ? getSafeIconColor(resolveIconOptions(element)) : undefined"
+                  />
+                </template>
                 {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title) }}
               </div>
               <div v-if="!element.isPermanent && element.isPin" class="action-icon" @click.stop="tabbarStore.unPin(element.tabId)">

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

@@ -22,7 +22,7 @@ defineOptions({
 const route = useRoute();
 const router = useRouter();
 
-const { settingsStore, tabbarStore, generateTitle } = useContext();
+const { settingsStore, tabbarStore, generateTitle, routeStore } = useContext();
 
 const tabbar = useTabbar();
 const mainPage = useMainPage();
@@ -241,6 +241,46 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
   return name;
 }
 
+// 解析 fullPath 的纯路径部分（去掉 query/hash）
+function stripPath(fullPath: string) {
+  return fullPath.split(/[?#]/)[0];
+}
+
+// 查找与 tab 对应的路由记录
+function findRouteRecordByElement(element: Tabbar.recordRaw) {
+  const pathOnly = stripPath(element.fullPath);
+  const all = [...routeStore.flatSystemRoutes, ...routeStore.flatRoutes] as any[];
+  return all.find(r => r.path === pathOnly);
+}
+
+// 解析该 tab 的 iconOptions（优先当前路由，其次面包屑链路上最近的一个）
+function resolveIconOptions(element: Tabbar.recordRaw): undefined | {
+  boxType?: 'square' | 'prism' | 'null'
+  angle?: number | string
+  background?: any
+  radius?: number | string
+  iconColor?: string
+} {
+  const r: any = findRouteRecordByElement(element);
+  let options = (r?.meta as any)?.iconOptions;
+  if (!options && r?.meta?.breadcrumbNeste?.length) {
+    const found = [...r.meta.breadcrumbNeste].reverse().find((it: any) => it?.iconOptions);
+    options = found?.iconOptions;
+  }
+  return options;
+}
+
+// 统一盒子类型：存在 iconOptions 时启用盒子；未指定或为 'null' 时默认 prism
+function computeBoxType(options: ReturnType<typeof resolveIconOptions>) {
+  const bt = (options as any)?.boxType as any;
+  return bt && bt !== 'null' ? bt : 'prism';
+}
+
+// 仅 AntD 图标使用安全颜色；无配置则为 undefined
+function getSafeIconColor(options: ReturnType<typeof resolveIconOptions>): string | undefined {
+  return (options as any)?.iconColor || undefined;
+}
+
 onMounted(() => {
   hotkeys('alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0', (e, handle) => {
     if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.enableHotkeys) {
@@ -325,11 +365,29 @@ onUnmounted(() => {
           <div class="tab-background" />
           <div class="tab-content">
             <div :key="element.tabId" class="title">
-              <PubinfoIcon
-                v-if="settingsStore.settings.tabbar.enableIcon && iconName(element.tabId === activedTabId, element.icon, element.activeIcon)"
-                :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
-                class="icon"
-              />
+              <template v-if="settingsStore.settings.tabbar.enableIcon && iconName(element.tabId === activedTabId, element.icon, element.activeIcon)">
+                <!-- 有 iconOptions 时启用带边框/渐变的盒子效果，与 Menu 保持一致 -->
+                <PubinfoIcon
+                  v-if="resolveIconOptions(element)"
+                  small
+                  :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
+                  :box="computeBoxType(resolveIconOptions(element)) as any"
+                  :size="16"
+                  :angle="resolveIconOptions(element)?.angle"
+                  :background="resolveIconOptions(element)?.background"
+                  :radius="resolveIconOptions(element)?.radius"
+                  :color="(iconName(element.tabId === activedTabId, element.icon, element.activeIcon) || '').startsWith('antd:') ? (getSafeIconColor(resolveIconOptions(element)) || '#ffffff') : undefined"
+                  class="icon"
+                />
+                <!-- 无 iconOptions 时保持原样（纯图标），但若提供图标色也生效 -->
+                <PubinfoIcon
+                  v-else
+                  :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
+                  :size="16"
+                  :color="(iconName(element.tabId === activedTabId, element.icon, element.activeIcon) || '').startsWith('antd:') ? getSafeIconColor(resolveIconOptions(element)) : undefined"
+                  class="icon"
+                />
+              </template>
               {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title) }}
             </div>
             <div v-if="!element.isPermanent && element.isPin" class="action-icon" @click.stop="tabbarStore.unPin(element.tabId)" @dblclick.stop>