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

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import IconamoonSearch from '~icons/iconamoon/search';
 import { useContext } from '../../composables/useContext';
 import { useGlobalSearch } from '../../composables/useGlobalSearch';
@@ -10,7 +9,6 @@ defineOptions({
 
 const { settingsStore } = useContext();
 const { toggle: toggleSearch } = useGlobalSearch();
-const { t } = useI18n();
 
 const searchComponentsClass = computed(() => {
   const componentsClass = {
@@ -33,7 +31,7 @@ const searchComponentsClass = computed(() => {
     @click="toggleSearch('menu')"
   >
     <IconamoonSearch text="14px" />
-    <span class="text-sm  transition ">{{ t('app.search.text') }}</span>
+    <span class="text-sm  transition ">{{ '搜索' }}</span>
     <HKbd
       v-if="settingsStore.settings.navSearch.enableHotkeys"
       class="ml-2"

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

@@ -6,7 +6,7 @@ import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot
 import hotkeys from 'hotkeys-js';
 import { cloneDeep } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
-import { useI18n } from 'vue-i18n';
+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';
@@ -25,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',
@@ -45,22 +49,35 @@ const transitionClass = computed(() => {
   };
 });
 
-const { t } = useI18n();
-
 const router = useRouter();
-const { settingsStore, routeStore, tabbarStore, generateI18nTitle } = useContext();
+const { settingsStore, routeStore, tabbarStore, generateTitle } = useContext();
 
 type searchTypes = 'menu' | 'tab';
 interface listTypes {
   path: string
   icon?: string
   title?: string | (() => string)
-  i18n?: string
   link?: string
   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);
@@ -76,13 +93,13 @@ const resultList = computed(() => {
   let result = [];
   result = sourceList.value.filter((item) => {
     let flag = false;
-    if (generateI18nTitle(item.i18n, item.title).toString().includes(searchInput.value)) {
+    if (generateTitle(item.title).toString().includes(searchInput.value)) {
       flag = true;
     }
     if (item.path.includes(searchInput.value)) {
       flag = true;
     }
-    if (item.breadcrumb.some((b: { i18n: any, title: any }) => generateI18nTitle(b.i18n, b.title).toString().includes(searchInput.value))) {
+    if (item.breadcrumb.some((b: { title: any }) => generateTitle(b.title).toString().includes(searchInput.value))) {
       flag = true;
     }
     return flag;
@@ -90,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);
 }
@@ -155,27 +207,24 @@ function hasChildren(item: RouteRecordRaw) {
   }
   return flag;
 }
-function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string), i18n?: string }[]) {
+function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
   arr.forEach((item) => {
     if (item.meta?.sidebar !== false) {
       const breadcrumbTemp = cloneDeep(breadcrumb) || [];
       if (item.children && hasChildren(item)) {
         breadcrumbTemp.push({
           title: item.meta?.title,
-          i18n: item.meta?.i18n,
         });
         getSourceList(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon, breadcrumbTemp);
       }
       else {
         breadcrumbTemp.push({
           title: item.meta?.title,
-          i18n: item.meta?.i18n,
         });
         sourceList.value.push({
           path: resolveRoutePath(basePath, item.path),
           icon: item.meta?.icon ?? icon,
           title: item.meta?.title,
-          i18n: item.meta?.i18n,
           link: item.meta?.link,
           breadcrumb: breadcrumbTemp,
         });
@@ -190,13 +239,15 @@ function getSourceListByTabs(arr: Tabbar.recordRaw[]) {
       icon: item.icon,
       title: item.title,
       path: item.fullPath,
-      i18n: item.i18n,
       breadcrumb: [],
     });
   });
 }
 
 function keyUp() {
+  if (!isActivePanel.value) {
+    return;
+  }
   if (resultList.value.length) {
     actived.value -= 1;
     if (actived.value < 0) {
@@ -206,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) {
@@ -215,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;
@@ -249,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') {
@@ -260,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,
@@ -272,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" />
@@ -285,8 +353,8 @@ defineExpose({
                 v-if="settingsStore.settings.tabbar.enable"
                 v-model="searchType"
                 :options="[
-                  { label: t('app.search.type.menu'), value: 'menu' },
-                  { label: t('app.search.type.tab'), value: 'tab' },
+                  { label: '搜索导航菜单', value: 'menu' },
+                  { label: '搜索标签页', value: 'tab' },
                 ]"
                 class="mb-4 flex!"
                 @click.stop
@@ -298,7 +366,7 @@ defineExpose({
                   <input
                     ref="searchInputRef"
                     v-model="searchInput"
-                    :placeholder="t('app.search.input')"
+                    placeholder="搜索页面，支持标题、URL模糊查询"
                     class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark:text-white focus:outline-none placeholder-stone-4 dark:placeholder-stone-5"
                     @keydown.esc="toggle()"
                     @keydown.up.prevent="keyUp"
@@ -332,10 +400,10 @@ defineExpose({
                           :class="{ 'scale-120 text-ui-primary': index === actived }"
                         />
                         <div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark:stone-7">
-                          <div class="truncate text-base font-bold">{{ generateI18nTitle(item.i18n, item.title) }}</div>
+                          <div class="truncate text-base font-bold">{{ generateTitle(item.title) }}</div>
                           <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
                             <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
-                              {{ generateI18nTitle(bc.i18n, bc.title) }}
+                              {{ generateTitle(bc.title) }}
                             </BreadcrumbItem>
                           </Breadcrumb>
                         </div>
@@ -357,7 +425,7 @@ defineExpose({
                       <HKbd>
                         <IonMdReturnLeft text="14px" />
                       </HKbd>
-                      <span>{{ t('app.search.enter') }}</span>
+                      <span>{{ '访问' }}</span>
                     </div>
                     <div class="inline-flex items-center gap-1 text-xs">
                       <HKbd>
@@ -366,14 +434,14 @@ defineExpose({
                       <HKbd>
                         <AntDesignCaretDownFilled text="14px" />
                       </HKbd>
-                      <span>{{ t('app.search.up_down') }}</span>
+                      <span>{{ '切换' }}</span>
                     </div>
                   </div>
                   <div v-if="settingsStore.settings.navSearch.enableHotkeys" class="inline-flex items-center gap-1 text-xs">
                     <HKbd>
                       ESC
                     </HKbd>
-                    <span>{{ t('app.search.esc') }}</span>
+                    <span>{{ '退出' }}</span>
                   </div>
                 </div>
               </div>

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { DropdownMenuRender } from './interface';
-import { useI18n } from 'vue-i18n';
 import CarbonUserAvatarFilledAlt from '~icons/carbon/user-avatar-filled-alt';
 import MaterialSymbolsExpandMoreRounded from '~icons/material-symbols/expand-more-rounded';
 
@@ -31,9 +30,7 @@ const props = withDefaults(
 );
 
 const router = useRouter();
-const { settingsStore, userStore, generateI18nTitle } = useContext();
-
-const { t } = useI18n();
+const { settingsStore, userStore, generateTitle } = useContext();
 
 const hotkeysIntroRef = ref();
 const preferencesRef = ref();
@@ -42,28 +39,28 @@ const userMenu = computed(() => {
   return {
     Home: {
       key: 'home',
-      label: generateI18nTitle('route.home', settingsStore.settings.home.title),
+      label: generateTitle(settingsStore.settings.home.title),
       icon: 'i-ant-design:home-twotone',
       onClick: () => router.push({ name: 'Home' }),
       hide: !settingsStore.settings.home.enable,
     },
     Preferences: {
       key: 'preferences',
-      label: t('app.preferences'),
+      label: '个人偏好设置',
       icon: 'i-iconamoon-star-duotone',
       onClick: () => preferencesRef.value?.open?.(),
       hide: !settingsStore.settings.app.enableUserPreferences,
     },
     Hotkeys: {
       key: 'hotkeys',
-      label: t('app.hotkeys'),
+      label: '快捷键介绍',
       icon: 'i-iconamoon-lightning-2-duotone',
       onClick: () => hotkeysIntroRef.value?.open?.(),
       hide: settingsStore.mode !== 'pc',
     },
     Org: {
       key: 'org',
-      label: t('app.changeOrg'),
+      label: '切换组织',
       icon: 'i-iconamoon-synchronize-duotone',
       onClick: () => router.push({
         name: 'ChangeOrganization',
@@ -73,13 +70,13 @@ const userMenu = computed(() => {
     },
     Profile: {
       key: 'profile',
-      label: t('route.personal.profile'),
+      label: '个人中心',
       icon: 'i-iconamoon-profile-duotone',
       onClick: () => router.push({ name: 'Profile' }),
     },
     Password: {
       key: 'password',
-      label: t('app.changePassword'),
+      label: '修改密码',
       icon: 'i-iconamoon-lock-duotone',
       onClick: () => router.push({
         name: 'ChangePassword',
@@ -90,7 +87,7 @@ const userMenu = computed(() => {
     },
     Logout: {
       key: 'logout',
-      label: t('app.logout'),
+      label: '退出登录',
       icon: 'i-iconamoon-arrow-left-3-square-duotone',
       onClick: () => userStore.logout(),
     },
@@ -146,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

@@ -2,7 +2,6 @@
 import type { Tabbar } from '#/tabbar';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 import Sortable from 'sortablejs';
-import { useI18n } from 'vue-i18n';
 import EpClose from '~icons/ep/close';
 import EpSearch from '~icons/ep/search';
 import PhArrowLineLeft from '~icons/ph/arrow-line-left';
@@ -22,12 +21,10 @@ defineOptions({
 
 const router = useRouter();
 
-const { settingsStore, tabbarStore, generateI18nTitle } = useContext();
+const { settingsStore, tabbarStore, generateTitle, routeStore } = useContext();
 
 const tabbar = useTabbar();
 
-const { t } = useI18n();
-
 const activedTabId = computed(() => tabbar.getId());
 
 const dropdownTabContainerRef = ref();
@@ -88,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>
@@ -99,22 +134,22 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
       <template #dropdown>
         <div class="quick-button">
           <button v-if="settingsStore.settings.navSearch.enable" class="button" @click="actionCommand('search-tabs')">
-            <HTooltip :text="t('app.tabbar.searchTabs')">
+            <HTooltip text="搜索标签页">
               <EpSearch />
             </HTooltip>
           </button>
           <button class="button" :disabled="!tabbar.checkCloseOtherSide()" @click="actionCommand('other-side')">
-            <HTooltip :text="t('app.tabbar.closeOtherSide')">
+            <HTooltip text="关闭其它标签页">
               <EpClose />
             </HTooltip>
           </button>
           <button class="button" :disabled="!tabbar.checkCloseLeftSide()" @click="actionCommand('left-side')">
-            <HTooltip :text="t('app.tabbar.closeLeftSide')">
+            <HTooltip text="关闭左侧标签页">
               <PhArrowLineLeft />
             </HTooltip>
           </button>
           <button class="button" :disabled="!tabbar.checkCloseRightSide()" @click="actionCommand('right-side')">
-            <HTooltip :text="t('app.tabbar.closeRightSide')">
+            <HTooltip text="关闭右侧标签页">
               <PhArrowLineRight />
             </HTooltip>
           </button>
@@ -127,9 +162,27 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
                 'no-drag': element.isPermanent || element.isPin,
               }"
             >
-              <div :key="element.tabId" class="title" :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateI18nTitle(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)!" />
-                {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateI18nTitle(element.i18n, element.title) }}
+              <div :key="element.tabId" class="title" :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title)" @click="router.push(element.fullPath)">
+                <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)">
                 <RiPushpin2Fill />