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

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

@@ -1,128 +1,108 @@
 <script setup lang="ts">
-import { useFullscreen } from '@vueuse/core';
+import type { DropdownMenuRender } from './interface';
 import { useI18n } from 'vue-i18n';
 import CarbonUserAvatarFilledAlt from '~icons/carbon/user-avatar-filled-alt';
-import FluentArrowSync16Filled from '~icons/fluent/arrow-sync-16-filled';
-import FluentFullScreenMaximize16Filled from '~icons/fluent/full-screen-maximize-16-filled';
-import FluentFullScreenMinimize16Filled from '~icons/fluent/full-screen-minimize-16-filled';
-import IconamoonSearch from '~icons/iconamoon/search';
 import MaterialSymbolsExpandMoreRounded from '~icons/material-symbols/expand-more-rounded';
-import PhLineVerticalThin from '~icons/ph/line-vertical-thin';
 
+import PhLineVerticalThin from '~icons/ph/line-vertical-thin';
 import { useContext } from '../../composables/useContext';
-import useMainPage from '../../composables/useMainPage';
-import useViewTransition from '../../composables/useViewTransition';
-import DayNightSwitch from './DayNightSwitch.vue';
+import DarkModeToggle from './DarkModeToggle.vue';
+import Fullscreen from './Fullscreen.vue';
 import HotkeysIntro from './HotkeysIntro.vue';
+import PageReload from './PageReload.vue';
 import Preferences from './Preferences/index.vue';
-import Search from './Search.vue';
+import SearchBar from './SearchBar.vue';
+import SearchPanel from './SearchPanel.vue';
 
 defineOptions({
   name: 'Tools',
 });
 
+const props = withDefaults(
+  defineProps<{
+    // 用户菜单渲染函数
+    dropdownMenuRender?: DropdownMenuRender
+  }>(),
+  {
+    dropdownMenuRender: (({ Home, Preferences, Hotkeys, Org, Profile, Password, Logout, Divider }) => {
+      return [Home, Preferences, Divider, Hotkeys, Divider, Org, Profile, Password, Logout];
+    }) as DropdownMenuRender,
+  },
+);
+
 const router = useRouter();
 const { settingsStore, userStore, generateI18nTitle } = useContext();
 
 const { t } = useI18n();
 
-const mainPage = useMainPage();
-const { isFullscreen, toggle } = useFullscreen();
-
 const hotkeysIntroRef = ref();
 const preferencesRef = ref();
-const searchRef = ref();
 
-const userMenu = computed(() => [
-  [
-    {
+const userMenu = computed(() => {
+  return {
+    Home: {
+      key: 'home',
       label: generateI18nTitle('route.home', settingsStore.settings.home.title),
       icon: 'i-ant-design:home-twotone',
-      handle: () => router.push({ name: 'Home' }),
+      onClick: () => router.push({ name: 'Home' }),
       hide: !settingsStore.settings.home.enable,
     },
-    {
+    Preferences: {
+      key: 'preferences',
       label: t('app.preferences'),
       icon: 'i-iconamoon-star-duotone',
-      handle: () => preferencesRef.value?.open?.(),
+      onClick: () => preferencesRef.value?.open?.(),
       hide: !settingsStore.settings.app.enableUserPreferences,
     },
-  ],
-  [
-    {
+    Hotkeys: {
+      key: 'hotkeys',
       label: t('app.hotkeys'),
       icon: 'i-iconamoon-lightning-2-duotone',
-      handle: () => hotkeysIntroRef.value?.open?.(),
+      onClick: () => hotkeysIntroRef.value?.open?.(),
       hide: settingsStore.mode !== 'pc',
     },
-  ],
-  [
-    {
+    Org: {
+      key: 'org',
       label: t('app.changeOrg'),
       icon: 'i-iconamoon-synchronize-duotone',
-      handle: () => router.push({
+      onClick: () => router.push({
         name: 'ChangeOrganization',
         params: { orgId: userStore.user.orgId },
       }),
       hide: userStore.user.orgList.length <= 1,
     },
-    {
+    Profile: {
+      key: 'profile',
       label: t('route.personal.profile'),
       icon: 'i-iconamoon-profile-duotone',
-      handle: () => router.push({ name: 'Profile' }),
+      onClick: () => router.push({ name: 'Profile' }),
     },
-    {
+    Password: {
+      key: 'password',
       label: t('app.changePassword'),
       icon: 'i-iconamoon-lock-duotone',
-      handle: () => router.push({
+      onClick: () => router.push({
         name: 'ChangePassword',
         params: {
           changePassWordToken: userStore.user.token,
         },
       }),
     },
-    {
+    Logout: {
+      key: 'logout',
       label: t('app.logout'),
       icon: 'i-iconamoon-arrow-left-3-square-duotone',
-      handle: () => userStore.logout(),
+      onClick: () => userStore.logout(),
     },
-  ],
-]);
-
-function toggleColorScheme(event: MouseEvent) {
-  const { startViewTransition } = useViewTransition(async () => {
-    const colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark';
-    settingsStore.setColorScheme(colorScheme);
-    await settingsStore.setPreferencesSetting({
-      app: {
-        colorScheme,
-      },
-    });
-  });
+    Divider: {
+      key: 'divider',
+    },
+  };
+});
 
-  startViewTransition()?.ready.then(() => {
-    const x = event.clientX;
-    const y = event.clientY;
-    const endRadius = Math.hypot(
-      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    );
-    const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
-    ];
-    document.documentElement.animate(
-      {
-        clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),
-      },
-      {
-        duration: 300,
-        easing: 'ease-out',
-        pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',
-      },
-    );
-  });
-}
+const menus = computed(() => {
+  return props.dropdownMenuRender?.(userMenu.value);
+});
 
 const avatarError = ref(false);
 
@@ -131,73 +111,33 @@ watch(() => userStore.user.avatar, () => {
     avatarError.value = false;
   }
 });
-
-const searchComponentsClass = computed(() => {
-  const componentsClass = {
-    'side': 'ring-1 ',
-    'head': 'bg-[var(--g-header-menu-active-bg)]',
-    'single': ' ring-1',
-    'only-side': 'ring-1',
-    'only-head': ' bg-[var(--g-header-menu-active-bg)]',
-  };
-  const menuMode = settingsStore.settings.menu.menuMode;
-  return componentsClass[menuMode];
-});
 </script>
 
 <template>
   <div class="tools flex items-center gap-4 whitespace-nowrap px-4">
-    <span
-      v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'pc'"
-      class="group inline-flex cursor-pointer items-center gap-1 rounded-2 px-2 py-1.5 hover:ring-1 ring-inset transition ring-stone-3 dark:ring-stone-7"
-      :class="searchComponentsClass"
-      @click="searchRef?.toggle?.()"
-    >
-      <IconamoonSearch text="14px" />
-      <span class="text-sm  transition ">{{ t('app.search.text') }}</span>
-      <HKbd
-        v-if="settingsStore.settings.navSearch.enableHotkeys"
-        class="ml-2"
-      >{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S</HKbd>
-    </span>
-    <div class="flex items-center empty:hidden">
-      <span
-        v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'mobile'"
-        class="item"
-        @click="searchRef?.toggle?.()"
-      >
-        <IconamoonSearch text="14px" />
-      </span>
-      <span
-        v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen"
-        class="item"
-        @click="toggle"
-      >
-        <FluentFullScreenMinimize16Filled v-if="isFullscreen" text="16px" />
-        <FluentFullScreenMaximize16Filled v-else text="16px" />
-      </span>
-      <span
-        v-if="settingsStore.settings.toolbar.enablePageReload"
-        class="item"
-        @click="mainPage.reload()"
-      >
-        <FluentArrowSync16Filled text="15px" />
-      </span>
-      <DayNightSwitch @click="toggleColorScheme" />
+    <SearchBar />
+
+    <div class="flex items-center empty:hidden gap-3">
+      <slot name="default">
+        <Fullscreen />
+        <PageReload />
+        <DarkModeToggle />
+      </slot>
     </div>
+
     <div flex-center cursor-pointer gap-1>
       <img
         v-if="userStore.user.avatar && !avatarError"
         :src="userStore.user.avatar"
         :onerror="() => (avatarError = true)"
-        class="h-[24px] w-[24px] rounded-full"
+        class="size-[24px] rounded-full"
       >
       <CarbonUserAvatarFilledAlt v-else text="20px" mr-2px />
-      <div flex-center cursor-pointer>
+      <div class="flex-center cursor-pointer">
         {{ userStore.userOrgName }}
       </div>
-      <PhLineVerticalThin />
-      <HDropdownMenu :items="userMenu">
+      <PhLineVerticalThin v-if="userStore?.userOrgName" />
+      <HDropdownMenu :items="menus">
         <div flex-center cursor-pointer gap-1>
           {{ userStore.user.account }}
           <MaterialSymbolsExpandMoreRounded ml="5px" mr="10px" />
@@ -206,13 +146,7 @@ const searchComponentsClass = computed(() => {
     </div>
 
     <HotkeysIntro ref="hotkeysIntroRef" />
-    <Search ref="searchRef" />
+    <SearchPanel />
     <Preferences v-if="settingsStore.settings.app.enableUserPreferences" ref="preferencesRef" />
   </div>
 </template>
-
-<style scoped>
-.item {
-  --at-apply: flex px-2 py-1 cursor-pointer;
-}
-</style>

package/src/built-in/layout-component/components/Tools/interface.ts

@@ -0,0 +1,27 @@
+export interface DropdownMenu {
+  key?: string | 'divider'
+  icon?: string
+  label?: string
+  disabled?: boolean
+  hide?: boolean
+  onClick?: () => void
+}
+
+export type DropdownMenuRender = (items: {
+  /** 主页 */
+  Home: DropdownMenu
+  /** 个人偏好设置 */
+  Preferences: DropdownMenu
+  /** 快捷键介绍 */
+  Hotkeys: DropdownMenu
+  /** 切换组织 */
+  Org: DropdownMenu
+  /** 个人中心 */
+  Profile: DropdownMenu
+  /** 修改密码 */
+  Password: DropdownMenu
+  /** 登出 */
+  Logout: DropdownMenu
+  /** 分割线 */
+  Divider: DropdownMenu
+}) => DropdownMenu[];

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

@@ -12,8 +12,9 @@ import RiCloseFill from '~icons/ri/close-fill';
 import RiPushpin2Fill from '~icons/ri/pushpin-2-fill';
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../../composables/useContext';
-import useTabbar from '../../../composables/useTabbar';
-import Search from '../../Tools/Search.vue';
+import { useGlobalSearch } from '../../../composables/useGlobalSearch';
+import { useTabbar } from '../../../composables/useTabbar';
+import Search from '../../Tools/SearchPanel.vue';
 
 defineOptions({
   name: 'TabbarMoreAction',
@@ -30,7 +31,7 @@ const { t } = useI18n();
 const activedTabId = computed(() => tabbar.getId());
 
 const dropdownTabContainerRef = ref();
-const searchRef = ref();
+const { toggle: toggleGlobalSearch } = useGlobalSearch();
 
 const isDragging = ref(false);
 
@@ -60,7 +61,7 @@ watch(() => dropdownTabContainerRef.value, (val) => {
 function actionCommand(command: 'search-tabs' | 'other-side' | 'left-side' | 'right-side') {
   switch (command) {
     case 'search-tabs':
-      searchRef.value?.toggle?.('tab');
+      toggleGlobalSearch('tab');
       break;
     case 'other-side':
       tabbar.closeOtherSide();
@@ -142,7 +143,7 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
       </template>
     </HDropdown>
 
-    <Search ref="searchRef" />
+    <Search />
   </div>
 </template>
 
@@ -153,7 +154,7 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
 
 .tabbar-dropdown .quick-button .button {
   --at-apply: flex items-center justify-center w-8 h-8 cursor-pointer bg-[--g-bg]
-  transition-[colors] duration-[0.3s] rounded-[5px] border-[none] [outline:none];
+  transition-[colors] duration-[0.3s] rounded-[5px] border-0 [outline:none];
 }
 
 .tabbar-dropdown .quick-button .button:hover:not(:disabled) {

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

@@ -11,8 +11,8 @@ import RiPushpin2Fill from '~icons/ri/pushpin-2-fill';
 import { PubinfoIcon } from '@/features/components';
 import { storage } from '@/utils';
 import { useContext } from '../../../composables/useContext';
-import useMainPage from '../../../composables/useMainPage';
-import useTabbar from '../../../composables/useTabbar';
+import { useMainPage } from '../../../composables/useMainPage';
+import { useTabbar } from '../../../composables/useTabbar';
 import MoreAction from './MoreAction.vue';
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css';
 

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

@@ -56,8 +56,10 @@ function createHomeBreadcrumb() {
   };
 }
 
+interface BreadcrumbItemNode { title: string, path: string, mainIndex?: number }
+
 const breadcrumbList = computed(() => {
-  const breadcrumbList: Array<{ title: string, path: string }> = [];
+  const breadcrumbList: BreadcrumbItemNode[] = [];
   if (settingsStore.settings.home.enable) {
     breadcrumbList.push(createHomeBreadcrumb());
   }
@@ -74,7 +76,8 @@ const breadcrumbList = computed(() => {
 
     if (menuStore.allMenus[index]?.meta) {
       breadcrumbList.push({
-        path: '',
+        path: `__MAIN__${index}`,
+        mainIndex: index,
         title: generateI18nTitle(menuStore.allMenus[index].meta?.i18n, menuStore.allMenus[index].meta?.title),
       });
     }
@@ -147,21 +150,40 @@ function recursiveTreeMap<T extends { children?: T[] }>(tree: T[], fn: (node: T)
  * 根据 path 字段读取树中的指定节点
  */
 function getCurrentBreadcrumb(path: string) {
+  if (path.startsWith('__MAIN__')) {
+    const idx = Number(path.replace('__MAIN__', ''));
+    const main = menuStore.allMenus[idx];
+    if (main) {
+      const mapNode = (r: any): any => ({
+        title: generateI18nTitle(r.meta?.i18n, r.meta?.title),
+        path: r.path,
+        children: (r.children || [])
+          .filter((c: any) => c.meta?.sidebar !== false)
+          .map((c: any) => mapNode(c)),
+      });
+      return {
+        title: generateI18nTitle(main.meta?.i18n, main.meta?.title),
+        path,
+        children: (main.children || [])
+          .filter(c => c.meta?.sidebar !== false)
+          .map(c => mapNode(c)),
+      };
+    }
+    return {};
+  }
+
   const fn = (node: Record<string, any>) => node.path === path;
   const list = [...breadcrumbTree.value];
   let currentNode;
-
   for (const node of list) {
     if (fn(node)) {
       currentNode = node;
       break;
     }
-
     if (node?.children) {
       list.push(...node.children);
     }
   }
-
   return currentNode ?? {};
 }
 
@@ -169,16 +191,16 @@ function getCurrentBreadcrumb(path: string) {
  * 点击面包屑的下拉树节点
  */
 function onSelect(node: RouteRecordRaw, index: number) {
-  if (!node.path || (index === (breadcrumbList.value.length - 1))) {
+  if (!node) {
     return;
   }
 
-  if (!node) {
+  if (index === (breadcrumbList.value.length - 1)) {
     return;
   }
 
-  if (!node?.children?.length) {
-    router.push(pathCompile(node?.path));
+  if (!node?.children?.length && node.path) {
+    router.push(pathCompile(node.path));
   }
 }
 </script>
@@ -218,7 +240,7 @@ function onSelect(node: RouteRecordRaw, index: number) {
           >
             <HDropdownTree
               :item="getCurrentBreadcrumb(item.path)"
-              :disabled="!item.path || (index === breadcrumbList.length - 1) || getCurrentBreadcrumb(item.path)?.children?.length === 1"
+              :disabled="(index === breadcrumbList.length - 1) || getCurrentBreadcrumb(item.path)?.children?.length <= 1"
               @select="onSelect($event, index)"
             >
               <span class="flex items-center gap-0.5">

package/src/built-in/layout-component/components/ui/HDropdownMenu.vue

@@ -1,20 +1,13 @@
 <script setup lang="ts">
+import type { DropdownMenu } from '../Tools/interface';
 import { PubinfoIcon } from '@/features/components';
 
 const props = defineProps<{
-  items: {
-    icon?: string
-    label: string
-    disabled?: boolean
-    hide?: boolean
-    handle?: () => void
-  }[][]
+  items: DropdownMenu[]
 }>();
 
 const myItems = computed(() => {
-  return props.items.map((item) => {
-    return item.filter(v => !v.hide);
-  }).filter(v => v.length);
+  return props.items.filter(item => !item?.hide);
 });
 </script>
 
@@ -27,23 +20,23 @@ const myItems = computed(() => {
     :auto-hide="false"
   >
     <slot />
+
     <template #popper>
-      <div
-        v-for="(item, index) in myItems"
-        :key="index"
-        class="p-1 dark:bg-[var(--g-container-bg)]"
-        border-b="~ solid stone-2 dark:stone-7 last:size-0"
-      >
-        <button
-          v-for="(v, i) in item"
-          :key="i"
-          :disabled="v.disabled"
-          class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9"
-          @click="v.handle"
-        >
-          <PubinfoIcon v-if="v.icon" :name="v.icon" />
-          {{ v.label }}
-        </button>
+      <div class="dark:bg-[var(--g-container-bg)] py-1">
+        <template v-for="(item, index) in myItems" :key="index">
+          <div v-if="item?.key === 'divider'" border-b="~ solid stone-2 dark:stone-7 last:size-0" class="my-1" />
+
+          <div v-else class="px-1">
+            <button
+              :disabled="item.disabled"
+              class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9"
+              @click="item?.onClick"
+            >
+              <PubinfoIcon v-if="item?.icon" :name="item.icon" />
+              {{ item?.label }}
+            </button>
+          </div>
+        </template>
       </div>
     </template>
   </VMenu>

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

@@ -1,4 +1,4 @@
-import { useMenuStore, useSettingsStore } from '@/features/stores';
+import { useContext } from './useContext';
 
 /**
  * 获取指定元素的计算样式属性值
@@ -17,8 +17,7 @@ type unit = `${string}px`;
  * @returns 包含主侧边栏和子侧边栏实际宽度的计算属性对象。
  */
 export function useGetSidebarActualWidth() {
-  const settingsStore = useSettingsStore();
-  const menuStore = useMenuStore();
+  const { settingsStore, menuStore } = useContext();
 
   const mainSidebarActualWidth = computed<unit>(() => {
     const menuMode = settingsStore.settings.menu.menuMode;

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

@@ -0,0 +1,48 @@
+import { ref } from 'vue';
+
+type SearchType = 'menu' | 'tab';
+
+const isShow = ref(false);
+const searchType = ref<SearchType>('menu');
+
+function open(type?: SearchType) {
+  if (type) {
+    searchType.value = type;
+  }
+  isShow.value = true;
+}
+
+function close() {
+  isShow.value = false;
+}
+
+function toggle(type?: SearchType) {
+  if (!isShow.value) {
+    if (type) {
+      searchType.value = type;
+    }
+    isShow.value = true;
+  }
+  else {
+    isShow.value = false;
+  }
+}
+
+/**
+ * 全局搜索服务
+ * 可以支持多处挂载，只需要使用 `useGlobalSearch` 开启即可
+ * 这样可以避免如果使用快捷键可能会多处开启 search 的问题
+ *
+ * close [#38](https://github.com/wsypower/pubinfo/issues/38)
+ */
+export function useGlobalSearch() {
+  return {
+    isShow,
+    searchType,
+    open,
+    close,
+    toggle,
+  };
+}
+
+export type { SearchType };

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

@@ -1,15 +1,11 @@
-import type { useMenuStore, useSettingsStore } from '@/features/stores';
 import hotkeys from 'hotkeys-js';
-import useMainPage from './useMainPage';
-import useMenu from './useMenu';
+import { useContext } from './useContext';
+import { useMainPage } from './useMainPage';
+import { useMenu } from './useMenu';
+
+export function useHotkey() {
+  const { settingsStore, menuStore } = useContext();
 
-export function useHotkey({
-  menuStore,
-  settingsStore,
-}: {
-  menuStore: ReturnType<typeof useMenuStore>
-  settingsStore: ReturnType<typeof useSettingsStore>
-}) {
   const mainPage = useMainPage();
   const menu = useMenu();
 

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

@@ -1,5 +1,5 @@
-import { useSettingsStore, useTabbarStore } from '@/features/stores';
-import useTabbar from './useTabbar';
+import { useContext } from './useContext';
+import { useTabbar } from './useTabbar';
 
 /**
  * 用于主页面功能的自定义钩子。
@@ -9,13 +9,12 @@ import useTabbar from './useTabbar';
  *   - resetCustomTitle: 重置当前页面的自定义标题。
  *   - maximize: 设置主页面的最大化状态。
  */
-export default function useMainPage() {
+export function useMainPage() {
+  const { settingsStore, tabbarStore } = useContext();
+
   const route = useRoute();
   const router = useRouter();
 
-  const settingsStore = useSettingsStore();
-  const tabbarStore = useTabbarStore();
-
   const tabbar = useTabbar();
 
   /**

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

@@ -1,17 +1,15 @@
 import type { Menu } from '#/menu';
 import { message } from 'ant-design-vue';
-import { useMenuStore, useSettingsStore } from '@/features/stores';
+import { useContext } from './useContext';
 
 /**
  * 用于管理菜单功能的自定义组合函数。
  * @returns 一个包含 `switchTo` 函数的对象。
  */
-export default function useMenu() {
+export function useMenu() {
+  const { settingsStore, menuStore } = useContext();
   const router = useRouter();
 
-  const settingsStore = useSettingsStore();
-  const menuStore = useMenuStore();
-
   function switchTo(index: number | string, mainRouter?: Menu.recordMainRaw) {
     if (mainRouter && mainRouter.meta?.isDev) {
       message.info('暂未上线，敬请期待！');