@pubinfo/core 2.0.0-beta.1

package/src/layout/components/Tools/Preferences/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useToggle } from '@vueuse/core';
+
+defineOptions({
+  name: 'Preferences',
+});
+
+const PreferencesContent = defineAsyncComponent(() => import('./PreferencesContent.vue'));
+const [isShow, toggle] = useToggle(false);
+
+defineExpose({
+  open: () => toggle(),
+});
+</script>
+
+<template>
+  <HSlideover v-model="isShow" title="个人偏好设置">
+    <PreferencesContent />
+  </HSlideover>
+</template>

package/src/layout/components/Tools/Search.vue

@@ -0,0 +1,380 @@
+<script setup lang="ts">
+import type { Tabbar } from '#/tabbar';
+import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue';
+import type { RouteRecordRaw } from 'vue-router';
+import { PubinfoIcon } from '@/components';
+import { resolveRoutePath } from '@/utils';
+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 { useI18n } from 'vue-i18n';
+
+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 { useContext } from '../../composables/useContext';
+import Breadcrumb from './Breadcrumb/index.vue';
+import BreadcrumbItem from './Breadcrumb/item.vue';
+
+defineOptions({
+  name: 'Search',
+});
+
+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 { t } = useI18n();
+
+const router = useRouter();
+const { settingsStore, routeStore, tabbarStore, generateI18nTitle } = useContext();
+
+type searchTypes = 'menu' | 'tab';
+interface listTypes {
+  path: string
+  icon?: string
+  title?: string | (() => string)
+  i18n?: string
+  link?: string
+  breadcrumb: any[]
+}
+
+const isShow = ref(false);
+const searchType = ref<searchTypes>();
+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 (generateI18nTitle(item.i18n, 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))) {
+      flag = true;
+    }
+    return flag;
+  });
+  return result;
+});
+
+watch(() => isShow.value, (val) => {
+  if (val) {
+    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);
+  }
+});
+watch(() => resultList.value, () => {
+  actived.value = -1;
+  handleScroll();
+});
+
+onMounted(() => {
+  hotkeys('alt+s', (e) => {
+    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
+      e.preventDefault();
+      initSourceList();
+      isShow.value = true;
+    }
+  });
+  hotkeys('esc', (e) => {
+    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
+      e.preventDefault();
+      isShow.value = false;
+    }
+  });
+  initSourceList();
+});
+
+function switchType(type: any) {
+  searchInputRef.value.focus();
+  initSourceList(type);
+}
+
+function initSourceList(type: searchTypes = 'menu') {
+  searchType.value = type;
+  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), i18n?: 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,
+        });
+      }
+    }
+  });
+}
+
+function getSourceListByTabs(arr: Tabbar.recordRaw[]) {
+  arr.forEach((item) => {
+    sourceList.value.push({
+      icon: item.icon,
+      title: item.title,
+      path: item.fullPath,
+      i18n: item.i18n,
+      breadcrumb: [],
+    });
+  });
+}
+
+function keyUp() {
+  if (resultList.value.length) {
+    actived.value -= 1;
+    if (actived.value < 0) {
+      actived.value = resultList.value.length - 1;
+    }
+    handleScroll();
+  }
+}
+function keyDown() {
+  if (resultList.value.length) {
+    actived.value += 1;
+    if (actived.value > resultList.value.length - 1) {
+      actived.value = 0;
+    }
+    handleScroll();
+  }
+}
+function keyEnter() {
+  if (actived.value !== -1) {
+    searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click();
+  }
+}
+function handleScroll() {
+  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);
+  }
+  isShow.value = false;
+}
+
+function toggle(type?: 'menu' | 'tab') {
+  if (!isShow.value) {
+    initSourceList(type);
+  }
+  isShow.value = !isShow.value;
+}
+
+defineExpose({
+  toggle,
+});
+</script>
+
+<template>
+  <TransitionRoot 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: t('app.search.type.menu'), value: 'menu' },
+                  { label: t('app.search.type.tab'), 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="t('app.search.input')"
+                    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">{{ generateI18nTitle(item.i18n, 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) }}
+                            </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>{{ t('app.search.enter') }}</span>
+                    </div>
+                    <div class="inline-flex items-center gap-1 text-xs">
+                      <HKbd>
+                        <AntDesignCaretUpFilled text="14px" />
+                      </HKbd>
+                      <HKbd>
+                        <AntDesignCaretDownFilled text="14px" />
+                      </HKbd>
+                      <span>{{ t('app.search.up_down') }}</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>
+                  </div>
+                </div>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

package/src/layout/components/Tools/index.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { useFullscreen } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import CarbonUserAvatarFilledAlt from '~icons/carbon/user-avatar-filled-alt';
+// import FluentAlert12Regular from '~icons/fluent/alert-12-regular';
+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 RiTranslate from '~icons/ri/translate';
+
+import { useContext } from '../../composables/useContext';
+import useMainPage from '../../composables/useMainPage';
+import useViewTransition from '../../composables/useViewTransition';
+import DayNightSwitch from './DayNightSwitch.vue';
+import HotkeysIntro from './HotkeysIntro.vue';
+// import I18nSelector from './I18nSelector.vue';
+// import Notification from './Notification.vue';
+import Preferences from './Preferences/index.vue';
+import Search from './Search.vue';
+
+defineOptions({
+  name: 'Tools',
+});
+
+const router = useRouter();
+const { settingsStore, userStore, notificationStore, generateI18nTitle } = useContext();
+
+notificationStore.init();
+
+const { t } = useI18n();
+
+const mainPage = useMainPage();
+const { isFullscreen, toggle } = useFullscreen();
+
+const hotkeysIntroRef = ref();
+const preferencesRef = ref();
+const searchRef = ref();
+
+const userMenu = computed(() => [
+  [
+    {
+      label: generateI18nTitle('route.home', settingsStore.settings.home.title),
+      handle: () => router.push({ name: 'Home' }),
+      hide: !settingsStore.settings.home.enable,
+    },
+    {
+      label: t('app.preferences'),
+      icon: 'i-iconamoon-star-duotone',
+      handle: () => preferencesRef.value?.open?.(),
+      hide: !settingsStore.settings.app.enableUserPreferences,
+    },
+  ],
+  [
+    {
+      label: t('app.hotkeys'),
+      icon: 'i-iconamoon-lightning-2-duotone',
+      handle: () => hotkeysIntroRef.value?.open?.(),
+      hide: settingsStore.mode !== 'pc',
+    },
+  ],
+  [
+    {
+      label: t('app.changeOrg'),
+      icon: 'i-iconamoon-synchronize-duotone',
+      handle: () => router.push({
+        name: 'ChangeOrganization',
+        params: { orgId: userStore.orgId },
+      }),
+      hide: userStore.orgList.length <= 1,
+    },
+    {
+      label: t('route.personal.profile'),
+      icon: 'i-iconamoon-profile-duotone',
+      handle: () => router.push({
+        name: 'Profile',
+      }),
+    },
+    {
+      label: t('app.changePassword'),
+      icon: 'i-iconamoon-lock-duotone',
+      handle: () => router.push({
+        name: 'ChangePassword',
+        params: {
+          changePassWordToken: userStore.user.token,
+        },
+      }),
+    },
+    {
+      label: t('app.logout'),
+      icon: 'i-iconamoon-arrow-left-3-square-duotone',
+      handle: () => 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,
+      },
+    });
+  });
+
+  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 avatarError = ref(false);
+
+watch(() => userStore.avatar, () => {
+  if (avatarError.value) {
+    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>
+      <!-- <HDropdown
+        v-if="settingsStore.settings.toolbar.enableNotification"
+        class="item"
+      >
+        <HBadge
+          :value="notificationStore.total"
+        >
+          <FluentAlert12Regular text="15px" />
+        </HBadge>
+        <template #dropdown>
+          <Notification />
+        </template>
+      </HDropdown>
+      <I18nSelector class="item">
+        <RiTranslate text="15px" />
+      </I18nSelector> -->
+      <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" />
+    </div>
+    <div flex-center cursor-pointer gap-1>
+      <img
+        v-if="userStore.avatar && !avatarError"
+        :src="userStore.avatar"
+        :onerror="() => (avatarError = true)"
+        class="h-[24px] w-[24px] rounded-full"
+      >
+      <CarbonUserAvatarFilledAlt v-else text="20px" mr-2px />
+      <div flex-center cursor-pointer>
+        {{ userStore.userOrgName }}
+      </div>
+      <PhLineVerticalThin />
+      <HDropdownMenu :items="userMenu">
+        <div flex-center cursor-pointer gap-1>
+          {{ userStore.account }}
+          <MaterialSymbolsExpandMoreRounded ml="5px" mr="10px" />
+        </div>
+      </HDropdownMenu>
+    </div>
+
+    <HotkeysIntro ref="hotkeysIntroRef" />
+    <Search ref="searchRef" />
+    <Preferences v-if="settingsStore.settings.app.enableUserPreferences" ref="preferencesRef" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item {
+  --at-apply: flex px-2 py-1 cursor-pointer;
+}
+</style>