@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import IconamoonSearch from '~icons/iconamoon/search';
+import { useContext } from '../../composables/useContext';
+import { useGlobalSearch } from '../../composables/useGlobalSearch';
+
+defineOptions({
+  name: 'SearchBar',
+});
+
+const { settingsStore } = useContext();
+const { toggle: toggleSearch } = useGlobalSearch();
+
+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>
+  <span
+    v-if="settingsStore.settings.navSearch.enable"
+    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="toggleSearch('menu')"
+  >
+    <IconamoonSearch text="14px" />
+    <span class="text-sm  transition ">{{ '搜索' }}</span>
+    <HKbd
+      v-if="settingsStore.settings.navSearch.enableHotkeys"
+      class="ml-2"
+    >
+      {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S
+    </HKbd>
+  </span>
+</template>

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

@@ -0,0 +1,454 @@
+<script setup lang="ts">
+import type { Tabbar } from '#/tabbar';
+import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue';
+import type { RouteRecordRaw } from 'vue-router';
+import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
+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';
+
+import IonMdReturnLeft from '~icons/ion/md-return-left';
+
+import TablerMoodEmpty from '~icons/tabler/mood-empty';
+import { PubinfoIcon } from '@/features/components';
+import { resolveRoutePath } from '@/utils';
+import { useContext } from '../../composables/useContext';
+import { useGlobalSearch } from '../../composables/useGlobalSearch';
+import Breadcrumb from './Breadcrumb/index.vue';
+import BreadcrumbItem from './Breadcrumb/item.vue';
+
+defineOptions({
+  name: 'SearchPanel',
+});
+
+const props = withDefaults(defineProps<{ priority?: number }>(), {
+  priority: 0,
+});
+
+const overlayTransitionClass = ref({
+  enter: 'ease-in-out duration-500',
+  enterFrom: 'opacity-0',
+  enterTo: 'opacity-100',
+  leave: 'ease-in-out duration-500',
+  leaveFrom: 'opacity-100',
+  leaveTo: 'opacity-0',
+});
+
+const transitionClass = computed(() => {
+  return {
+    enter: 'ease-out duration-300',
+    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    leave: 'ease-in duration-200',
+    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+  };
+});
+
+const router = useRouter();
+const { settingsStore, routeStore, tabbarStore, generateTitle } = useContext();
+
+type searchTypes = 'menu' | 'tab';
+interface listTypes {
+  path: string
+  icon?: string
+  title?: string | (() => string)
+  link?: string
+  breadcrumb: any[]
+}
+
+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);
+
+const searchInputRef = ref();
+const searchResultRef = ref<OverlayScrollbarsComponentRef>();
+const searchResultItemRef = ref<HTMLElement[]>([]);
+onBeforeUpdate(() => {
+  searchResultItemRef.value = [];
+});
+
+const resultList = computed(() => {
+  let result = [];
+  result = sourceList.value.filter((item) => {
+    let flag = false;
+    if (generateTitle(item.title).toString().includes(searchInput.value)) {
+      flag = true;
+    }
+    if (item.path.includes(searchInput.value)) {
+      flag = true;
+    }
+    if (item.breadcrumb.some((b: { title: any }) => generateTitle(b.title).toString().includes(searchInput.value))) {
+      flag = true;
+    }
+    return flag;
+  });
+  return result;
+});
+
+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;
+    handleScroll();
+  },
+);
+
+function handleOpenHotkey(e: KeyboardEvent) {
+  if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
+    e.preventDefault();
+    initSourceList();
+    isShow.value = true;
+  }
+}
+
+function handleCloseHotkey(e: KeyboardEvent) {
+  if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
+    e.preventDefault();
+    isShow.value = false;
+  }
+}
+
+watch(
+  () => isActivePanel.value,
+  (active) => {
+    if (active && !hasRegisteredGlobalHotkeys.value) {
+      hotkeys('alt+s', handleOpenHotkey);
+      hotkeys('esc', handleCloseHotkey);
+      hasRegisteredGlobalHotkeys.value = true;
+      initSourceList();
+    }
+    else if (!active && hasRegisteredGlobalHotkeys.value) {
+      hotkeys.unbind('alt+s', handleOpenHotkey);
+      hotkeys.unbind('esc', handleCloseHotkey);
+      hasRegisteredGlobalHotkeys.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+function switchType(type: any) {
+  if (!isActivePanel.value) {
+    return;
+  }
+  searchInputRef.value.focus();
+  initSourceList(type);
+}
+
+function initSourceList(type: searchTypes = 'menu') {
+  sourceList.value = [];
+  switch (type) {
+    case 'menu':
+      routeStore.routes.forEach((item) => {
+        if (item.children) {
+          getSourceList(item.children as RouteRecordRaw[]);
+        }
+      });
+      break;
+    case 'tab':
+      getSourceListByTabs(tabbarStore.list);
+      break;
+  }
+}
+
+function hasChildren(item: RouteRecordRaw) {
+  let flag = true;
+  if (item.children?.every(i => i.meta?.sidebar === false)) {
+    flag = false;
+  }
+  return flag;
+}
+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,
+        });
+        getSourceList(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon, breadcrumbTemp);
+      }
+      else {
+        breadcrumbTemp.push({
+          title: item.meta?.title,
+        });
+        sourceList.value.push({
+          path: resolveRoutePath(basePath, item.path),
+          icon: item.meta?.icon ?? icon,
+          title: item.meta?.title,
+          link: item.meta?.link,
+          breadcrumb: breadcrumbTemp,
+        });
+      }
+    }
+  });
+}
+
+function getSourceListByTabs(arr: Tabbar.recordRaw[]) {
+  arr.forEach((item) => {
+    sourceList.value.push({
+      icon: item.icon,
+      title: item.title,
+      path: item.fullPath,
+      breadcrumb: [],
+    });
+  });
+}
+
+function keyUp() {
+  if (!isActivePanel.value) {
+    return;
+  }
+  if (resultList.value.length) {
+    actived.value -= 1;
+    if (actived.value < 0) {
+      actived.value = resultList.value.length - 1;
+    }
+    handleScroll();
+  }
+}
+function keyDown() {
+  if (!isActivePanel.value) {
+    return;
+  }
+  if (resultList.value.length) {
+    actived.value += 1;
+    if (actived.value > resultList.value.length - 1) {
+      actived.value = 0;
+    }
+    handleScroll();
+  }
+}
+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;
+    if (actived.value !== -1) {
+      scrollTo = contentDom.scrollTop;
+      const activedOffsetTop = searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.offsetTop ?? 0;
+      const activedClientHeight = searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.clientHeight ?? 0;
+      const searchScrollTop = contentDom.scrollTop;
+      const searchClientHeight = contentDom.clientHeight;
+      if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
+        scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight;
+      }
+      else if (activedOffsetTop <= searchScrollTop) {
+        scrollTo = activedOffsetTop;
+      }
+    }
+    contentDom.scrollTo({
+      top: scrollTo,
+    });
+  }
+}
+
+function pageJump(path: listTypes['path'], link: listTypes['link']) {
+  if (link) {
+    window.open(link, '_blank');
+  }
+  else {
+    router.push(path);
+  }
+  if (isActivePanel.value) {
+    globalClose();
+  }
+}
+
+function toggle(type?: 'menu' | 'tab') {
+  if (!isShow.value) {
+    initSourceList(type);
+  }
+  globalToggle(type);
+}
+
+// 初始化本地 searchTypeLocal 与全局 searchType 同步
+watch(
+  () => searchType.value,
+  (val) => {
+    if (!isActivePanel.value) {
+      return;
+    }
+    if (val) {
+      initSourceList(val as searchTypes);
+    }
+  },
+);
+
+defineExpose({
+  toggle,
+});
+</script>
+
+<template>
+  <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" />
+      </TransitionChild>
+      <div class="fixed inset-0">
+        <div class="h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <TransitionChild as="template" v-bind="transitionClass">
+            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left sm:max-w-2xl">
+              <HTabList
+                v-if="settingsStore.settings.tabbar.enable"
+                v-model="searchType"
+                :options="[
+                  { label: '搜索导航菜单', value: 'menu' },
+                  { label: '搜索标签页', value: 'tab' },
+                ]"
+                class="mb-4 flex!"
+                @click.stop
+                @change="switchType"
+              />
+              <div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
+                <div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
+                  <EpSearch text="18px" class="text-stone-5" />
+                  <input
+                    ref="searchInputRef"
+                    v-model="searchInput"
+                    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"
+                    @keydown.down.prevent="keyDown"
+                    @keydown.enter.prevent="keyEnter"
+                  >
+                </div>
+                <DialogDescription class="relative m-0 of-y-hidden">
+                  <OverlayScrollbarsComponent
+                    ref="searchResultRef"
+                    :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }"
+                    defer
+                    class="h-full"
+                  >
+                    <template v-if="resultList.length > 0">
+                      <a
+                        v-for="(item, index) in resultList"
+                        ref="searchResultItemRef"
+                        :key="item.path"
+                        class="flex cursor-pointer items-center"
+                        :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }"
+                        :data-index="index"
+                        @click="pageJump(item.path, item.link)"
+                        @mouseover="actived = index"
+                      >
+                        <PubinfoIcon
+                          v-if="item.icon"
+                          :name="item.icon"
+                          :size="20"
+                          class="basis-16 transition"
+                          :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">{{ 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">
+                              {{ generateTitle(bc.title) }}
+                            </BreadcrumbItem>
+                          </Breadcrumb>
+                        </div>
+                      </a>
+                    </template>
+                    <template v-else>
+                      <div flex="center col" py-6 text-stone-5>
+                        <TablerMoodEmpty text="40px" />
+                        <p m-2 text-base>
+                          没有找到你想要的
+                        </p>
+                      </div>
+                    </template>
+                  </OverlayScrollbarsComponent>
+                </DialogDescription>
+                <div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark:stone-7">
+                  <div class="flex gap-8">
+                    <div class="inline-flex items-center gap-1 text-xs">
+                      <HKbd>
+                        <IonMdReturnLeft text="14px" />
+                      </HKbd>
+                      <span>{{ '访问' }}</span>
+                    </div>
+                    <div class="inline-flex items-center gap-1 text-xs">
+                      <HKbd>
+                        <AntDesignCaretUpFilled text="14px" />
+                      </HKbd>
+                      <HKbd>
+                        <AntDesignCaretDownFilled text="14px" />
+                      </HKbd>
+                      <span>{{ '切换' }}</span>
+                    </div>
+                  </div>
+                  <div v-if="settingsStore.settings.navSearch.enableHotkeys" class="inline-flex items-center gap-1 text-xs">
+                    <HKbd>
+                      ESC
+                    </HKbd>
+                    <span>{{ '退出' }}</span>
+                  </div>
+                </div>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

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

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import type { DropdownMenuRender } from './interface';
+import CarbonUserAvatarFilledAlt from '~icons/carbon/user-avatar-filled-alt';
+import MaterialSymbolsExpandMoreRounded from '~icons/material-symbols/expand-more-rounded';
+
+import PhLineVerticalThin from '~icons/ph/line-vertical-thin';
+import { useContext } from '../../composables/useContext';
+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 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, generateTitle } = useContext();
+
+const hotkeysIntroRef = ref();
+const preferencesRef = ref();
+
+const userMenu = computed(() => {
+  return {
+    Home: {
+      key: 'home',
+      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: '个人偏好设置',
+      icon: 'i-iconamoon-star-duotone',
+      onClick: () => preferencesRef.value?.open?.(),
+      hide: !settingsStore.settings.app.enableUserPreferences,
+    },
+    Hotkeys: {
+      key: 'hotkeys',
+      label: '快捷键介绍',
+      icon: 'i-iconamoon-lightning-2-duotone',
+      onClick: () => hotkeysIntroRef.value?.open?.(),
+      hide: settingsStore.mode !== 'pc',
+    },
+    Org: {
+      key: 'org',
+      label: '切换组织',
+      icon: 'i-iconamoon-synchronize-duotone',
+      onClick: () => router.push({
+        name: 'ChangeOrganization',
+        params: { orgId: userStore.user.orgId },
+      }),
+      hide: userStore.user.orgList.length <= 1,
+    },
+    Profile: {
+      key: 'profile',
+      label: '个人中心',
+      icon: 'i-iconamoon-profile-duotone',
+      onClick: () => router.push({ name: 'Profile' }),
+    },
+    Password: {
+      key: 'password',
+      label: '修改密码',
+      icon: 'i-iconamoon-lock-duotone',
+      onClick: () => router.push({
+        name: 'ChangePassword',
+        params: {
+          changePassWordToken: userStore.user.token,
+        },
+      }),
+    },
+    Logout: {
+      key: 'logout',
+      label: '退出登录',
+      icon: 'i-iconamoon-arrow-left-3-square-duotone',
+      onClick: () => userStore.logout(),
+    },
+    Divider: {
+      key: 'divider',
+    },
+  };
+});
+
+const menus = computed(() => {
+  return props.dropdownMenuRender?.(userMenu.value);
+});
+
+const avatarError = ref(false);
+
+watch(() => userStore.user.avatar, () => {
+  if (avatarError.value) {
+    avatarError.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="tools flex items-center gap-4 whitespace-nowrap px-4">
+    <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="size-[24px] rounded-full"
+      >
+      <CarbonUserAvatarFilledAlt v-else text="20px" mr-2px />
+      <div class="flex-center cursor-pointer">
+        {{ userStore.userOrgName }}
+      </div>
+      <PhLineVerticalThin v-if="userStore?.userOrgName" />
+      <HDropdownMenu :items="menus">
+        <div flex-center cursor-pointer gap-1>
+          {{ userStore.user.account }}
+          <MaterialSymbolsExpandMoreRounded ml="5px" mr="10px" />
+        </div>
+      </HDropdownMenu>
+    </div>
+
+    <HotkeysIntro ref="hotkeysIntroRef" />
+    <SearchPanel :priority="10" />
+    <Preferences v-if="settingsStore.settings.app.enableUserPreferences" ref="preferencesRef" />
+  </div>
+</template>

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[];