@pubinfo/core 2.0.0-beta.1

package/src/layout/components/Topbar/Toolbar/Favorites.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/components';
+import { isUndefined } from 'lodash-es';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import Sortable from 'sortablejs';
+import { useI18n } from 'vue-i18n';
+import FluentDelete24Filled from '~icons/fluent/delete-24-filled';
+import FluentStarAdd16Regular from '~icons/fluent/star-add-16-regular';
+import FluentStarDismiss16Regular from '~icons/fluent/star-dismiss-16-regular';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'Favorites',
+});
+
+const route = useRoute();
+const router = useRouter();
+const { favoritesStore, routeStore, generateI18nTitle } = useContext();
+const { t } = useI18n();
+
+const favoritesContainerRef = ref<HTMLElement | null>(null);
+
+let _favoritesSortable: Sortable | null = null;
+
+/**
+ * 监听收藏夹容器的变化，并创建可排序的实例
+ * @param {Ref} favoritesContainerRef - 收藏夹容器的引用
+ */
+watch(favoritesContainerRef, (newSortableContainer) => {
+  if (newSortableContainer) {
+    _favoritesSortable = new Sortable(newSortableContainer, {
+      animation: 200,
+      ghostClass: 'draggable-ghost',
+      draggable: '.draggable-item',
+      onUpdate: (e) => {
+        if (!isUndefined(e.newIndex) && !isUndefined(e.oldIndex)) {
+          favoritesStore.sort(e.newIndex, e.oldIndex);
+        }
+      },
+    });
+  }
+});
+</script>
+
+<template>
+  <div class="favorites-container w-80 dark:bg-[var(--g-container-bg)]">
+    <div class="flex items-center justify-between px-4 py-3">
+      <div class="text-sm font-bold">
+        {{ t('app.tabbar.favorites.my-favorites') }}
+      </div>
+      <template v-if="favoritesStore.canAdd(route.fullPath, routeStore.routes)">
+        <FluentStarAdd16Regular
+          v-if="!favoritesStore.isAdd(route.fullPath)"
+          text-18px
+          class="cursor-pointer"
+          @click="favoritesStore.add(route)"
+        />
+        <FluentStarDismiss16Regular
+          v-else
+          text-18px
+          class="cursor-pointer"
+          @click="favoritesStore.remove(route.fullPath)"
+        />
+      </template>
+    </div>
+    <OverlayScrollbarsComponent
+      :options="{
+        scrollbars: {
+          autoHide: 'leave',
+          autoHideDelay: 300,
+        },
+      }"
+      defer
+      class="max-h-220px"
+    >
+      <div
+        v-if="favoritesStore.list.length > 0"
+        ref="favoritesContainerRef"
+        class="flex flex-wrap items-center justify-between gap-2 px-4 pb-4"
+      >
+        <div
+          v-for="item in favoritesStore.list"
+          :key="item.fullPath"
+          :title="generateI18nTitle(item.i18n, item.title)"
+          class="draggable-item relative w-[calc(50%-0.25rem)] flex cursor-pointer items-center gap-1 rounded px-2 py-2 ring-1 ring-stone-3 ring-inset hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50"
+          @click="router.push(item.fullPath)"
+        >
+          <PubinfoIcon v-if="item.icon" :name="item.icon" :size="18" />
+          <div class="name flex-1 truncate pe-4">
+            {{ generateI18nTitle(item.i18n, item.title) }}
+          </div>
+          <FluentDelete24Filled
+            text-12px
+            class="right-1 h-5 w-6 rounded-full text-stone-3 !absolute dark:text-stone-7 hover:text-stone-7 dark:hover:text-stone-3"
+            @click.stop="favoritesStore.remove(item.fullPath)"
+          />
+        </div>
+      </div>
+      <div
+        v-else
+        flex="center col"
+        py-6
+        text-stone-5
+      >
+        <PubinfoIcon name="favorites" :size="150" />
+        <p
+          v-show="favoritesStore.canAdd(route.fullPath, routeStore.routes)"
+          m-0
+          flex-center
+          text-sm
+          op-75
+        >
+          点击右上角
+          <FluentStarAdd16Regular
+            text-18px mx-1
+            text-stone-6
+            dark:text-stone-4
+          />
+          将当前页面添加到收藏夹
+        </p>
+      </div>
+    </OverlayScrollbarsComponent>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep([data-overlayscrollbars-viewport]) {
+  overscroll-behavior: contain;
+}
+
+.draggable-ghost {
+  opacity: 0;
+}
+
+.name {
+  mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent);
+}
+</style>

package/src/layout/components/Topbar/Toolbar/Star.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { findIndex } from 'lodash-es';
+import FluentStar12Filled from '~icons/fluent/star-12-filled';
+import FluentStar16Regular from '~icons/fluent/star-16-regular';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'Star',
+});
+
+const { favoritesStore } = useContext();
+const isActive = ref(false);
+const router = useRouter();
+
+watchEffect(() => {
+  const currentRoute = router.currentRoute.value.fullPath;
+  isActive.value = !!~findIndex(favoritesStore.list, ['fullPath', currentRoute]);
+});
+</script>
+
+<template>
+  <div
+    flex
+    items-center
+    justify-center
+  >
+    <FluentStar12Filled v-if="isActive" text="[#FBC71D] 18px" />
+    <FluentStar16Regular v-else text-18px />
+  </div>
+</template>

package/src/layout/components/Topbar/Toolbar/index.vue

@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import type { RouteRecordRaw } from 'vue-router';
+import { PubinfoIcon } from '@/components';
+import { cloneDeep } from 'lodash-es';
+import { compile } from 'path-to-regexp';
+import { useContext } from '../../../composables/useContext';
+import Breadcrumb from '../../Tools/Breadcrumb/index.vue';
+import BreadcrumbItem from '../../Tools/Breadcrumb/item.vue';
+import Tools from '../../Tools/index.vue';
+import Favorites from './Favorites.vue';
+import Star from './Star.vue';
+
+defineOptions({
+  name: 'Toolbar',
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const { settingsStore, menuStore, generateI18nTitle } = useContext();
+
+/**
+ * 计算属性：是否启用子菜单折叠按钮
+ *
+ * @return {boolean}
+ */
+const enableSubMenuCollapseButton = computed(() => {
+  return settingsStore.mode === 'mobile' || (
+    ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
+    && settingsStore.settings.menu.enableSubMenuCollapseButton
+    && !(
+      settingsStore.settings.menu.subMenuOnlyOneHide
+      && menuStore.sidebarMenus.length === 1
+      && (
+        !menuStore.sidebarMenus[0].children
+        || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
+      )
+    )
+  );
+});
+
+/**
+ * 顶部工具栏组件
+ *
+ * @returns {boolean}
+ */
+const breadcrumbIsShow = computed(() =>
+  settingsStore.mode === 'pc'
+  && settingsStore.settings.breadcrumb.enable,
+);
+
+function createHomeBreadcrumb() {
+  return {
+    path: '/',
+    title: generateI18nTitle('route.home', settingsStore.settings.home.title),
+  };
+}
+
+const breadcrumbList = computed(() => {
+  const breadcrumbList: Array<{ title: string, path: string }> = [];
+  if (settingsStore.settings.home.enable) {
+    breadcrumbList.push(createHomeBreadcrumb());
+  }
+
+  if (route.name !== 'Home'
+    && settingsStore.settings.breadcrumb.enableMainMenu
+    && !['single'].includes(settingsStore.settings.menu.menuMode)
+  ) {
+    const index = menuStore.allMenus.findIndex((item) => {
+      return item.children.some((r) => {
+        return route.fullPath.indexOf(`${r.path}/`) === 0 || route.fullPath === r.path;
+      });
+    });
+
+    if (menuStore.allMenus[index]?.meta) {
+      breadcrumbList.push({
+        path: '',
+        title: generateI18nTitle(menuStore.allMenus[index].meta?.i18n, menuStore.allMenus[index].meta?.title),
+      });
+    }
+  }
+
+  if (route.meta.breadcrumbNeste) {
+    route.meta.breadcrumbNeste.forEach((item) => {
+      if (item.hide === false) {
+        breadcrumbList.push({
+          path: item.path,
+          title: generateI18nTitle(item.i18n, item.title),
+        });
+      }
+    });
+    const findItem = settingsStore.customTitleList.find(item => item.fullPath === route.fullPath);
+    const lastBreadcrumb = breadcrumbList.at(-1);
+    if (findItem && lastBreadcrumb) {
+      lastBreadcrumb.title = findItem.title;
+    }
+  }
+  return breadcrumbList;
+});
+
+function pathCompile(path: string) {
+  const toPath = compile(path);
+  return toPath(route.params);
+}
+
+const breadcrumbTree = computed(() => {
+  const menus = cloneDeep(menuStore.allMenus);
+
+  // 过滤非菜单的页面
+  const breadcrumbTreeRaw = recursiveTreeFilter(
+    menus as RouteRecordRaw[],
+    (node) => {
+      if (node?.meta?.sidebar === false) {
+        return false;
+      }
+      return true;
+    },
+  );
+
+  return recursiveTreeMap(
+    breadcrumbTreeRaw,
+    (node) => {
+      return {
+        title: node.meta?.title,
+        path: node.path,
+        children: node.children,
+      };
+    },
+  );
+});
+
+function recursiveTreeFilter<T extends { children?: T[] }>(tree: T[], fn: (node: T) => any) {
+  return tree?.filter((node) => {
+    node.children = node.children && recursiveTreeFilter(node.children, fn);
+    return fn(node);
+  }) ?? [];
+}
+
+function recursiveTreeMap<T extends { children?: T[] }>(tree: T[], fn: (node: T) => any) {
+  return tree?.map((node) => {
+    node.children = node.children && recursiveTreeMap(node.children, fn);
+    return fn(node);
+  }) ?? [];
+}
+
+/**
+ * 根据 path 字段读取树中的指定节点
+ */
+function getCurrentBreadcrumb(path: string) {
+  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 ?? {};
+}
+
+/**
+ * 点击面包屑的下拉树节点
+ */
+function onSelect(node: RouteRecordRaw, index: number) {
+  if (!node.path || (index === (breadcrumbList.value.length - 1))) {
+    return;
+  }
+
+  if (!node) {
+    return;
+  }
+
+  if (!node?.children?.length) {
+    router.push(pathCompile(node?.path));
+  }
+}
+</script>
+
+<template>
+  <div class="toolbar-container">
+    <div class="left-box">
+      <div
+        v-if="enableSubMenuCollapseButton"
+        class="flex-center cursor-pointer px-2 py-1 transition-transform"
+        :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }"
+        @click="settingsStore.toggleSidebarCollapse()"
+      >
+        <PubinfoIcon name="toolbar-collapse" class="icon" />
+      </div>
+      <HDropdown
+        v-if="settingsStore.mode === 'pc' && settingsStore.settings.favorites.enable"
+        placement="bottom-start"
+        class="flex-center cursor-pointer px-2 py-1 "
+      >
+        <Star />
+        <template #dropdown>
+          <Favorites />
+        </template>
+      </HDropdown>
+      <Breadcrumb
+        v-if="breadcrumbIsShow"
+        class="breadcrumb"
+        :class="{
+          [`breadcrumb-${settingsStore.settings.breadcrumb.style}`]: settingsStore.settings.breadcrumb.style !== '',
+        }"
+      >
+        <TransitionGroup name="breadcrumb">
+          <BreadcrumbItem
+            v-for="(item, index) in breadcrumbList"
+            :key="`${index}_${item.path}_${item.title}`"
+          >
+            <HDropdownTree
+              :item="getCurrentBreadcrumb(item.path)"
+              :disabled="!item.path || (index === breadcrumbList.length - 1) || getCurrentBreadcrumb(item.path)?.children?.length === 1"
+              @select="onSelect($event, index)"
+            >
+              <span class="flex items-center gap-0.5">
+                <span>{{ item.title }}</span>
+                <PubinfoIcon
+                  v-if="(getCurrentBreadcrumb(item.path)?.children?.length > 1) && (index !== breadcrumbList.length - 1)"
+                  name="i-material-symbols-keyboard-arrow-down"
+                />
+              </span>
+            </HDropdownTree>
+          </BreadcrumbItem>
+        </TransitionGroup>
+      </Breadcrumb>
+    </div>
+
+    <Tools />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.toolbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--g-toolbar-height);
+  background-color: var(--g-container-bg);
+  transition: background-color 0.3s;
+
+  .left-box {
+    display: flex;
+    align-items: center;
+    padding-right: 50px;
+    padding-left: 10px;
+    overflow: hidden;
+    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
+
+    .breadcrumb {
+      padding-left: 10px;
+      white-space: nowrap;
+
+      &.breadcrumb-modern {
+        :deep(.breadcrumb-item) {
+          .text {
+            --at-apply: bg-stone-2/80 dark:bg-stone-8/80;
+
+            padding: 6px 16px;
+            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
+
+            &.is-link:hover {
+              --at-apply: bg-stone-2 dark:bg-stone-8;
+            }
+          }
+
+          &:first-child .text {
+            padding-left: 12px;
+            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
+            border-radius: 6px 0 0 6px;
+          }
+
+          &:last-child:not(:first-child) .text {
+            --at-apply: bg-stone-2 dark:bg-stone-8;
+
+            padding-right: 12px;
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
+            border-radius: 0 6px 6px 0;
+          }
+
+          .separator {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 面包屑动画
+.breadcrumb-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.breadcrumb-enter-from {
+  opacity: 0;
+  transform: translateX(30px) skewX(-50deg);
+}
+</style>

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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useCssVar } from '@vueuse/core';
+import { useContext } from '../../composables/useContext';
+import Tabbar from './Tabbar/index.vue';
+import Toolbar from './Toolbar/index.vue';
+
+defineOptions({
+  name: 'Topbar',
+});
+
+const { settingsStore } = useContext();
+
+/**
+ * 计算属性：是否开启工具栏
+ *
+ * @return {boolean}
+ */
+const enableToolbar = computed(() => {
+  return !(
+    (
+      settingsStore.settings.menu.menuMode === 'head'
+      && !settingsStore.settings.menu.enableSubMenuCollapseButton
+      && !settingsStore.settings.favorites.enable
+      && !settingsStore.settings.breadcrumb.enable
+    ) || (
+      settingsStore.settings.menu.menuMode === 'only-head'
+      && !settingsStore.settings.favorites.enable
+      && !settingsStore.settings.breadcrumb.enable
+    )
+  );
+});
+
+const scrollTop = ref(0);
+const scrollOnHide = ref(false);
+const globalTabbarHeight = useCssVar('--g-tabbar-height', document.documentElement || document.body);
+const globalToolBarHeight = useCssVar('--g-toolbar-height', document.documentElement || document.body);
+
+const topbarHeight = computed(() => {
+  const tabbarHeight = settingsStore.settings.tabbar.enable
+    ? Number.parseInt(globalTabbarHeight.value!)
+    : 0;
+  const toolbarHeight = enableToolbar.value
+    ? Number.parseInt(globalToolBarHeight.value!)
+    : 0;
+  return tabbarHeight + toolbarHeight;
+});
+onMounted(() => {
+  window.addEventListener('scroll', onScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll);
+});
+function onScroll() {
+  scrollTop.value = (document.documentElement || document.body).scrollTop;
+}
+watch(scrollTop, (val, oldVal) => {
+  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight.value;
+});
+</script>
+
+<template>
+  <div
+    class="topbar-container"
+    :class="{
+      'has-tabbar': settingsStore.settings.tabbar.enable,
+      'has-toolbar': enableToolbar,
+      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
+      'shadow': !settingsStore.settings.topbar.switchTabbarAndToolbar && scrollTop,
+      'hide': scrollOnHide,
+      'switch-tabbar-toolbar': settingsStore.settings.topbar.switchTabbarAndToolbar,
+    }"
+    data-fixed-calc-width
+  >
+    <Tabbar v-if="settingsStore.settings.tabbar.enable" />
+    <Toolbar v-if="enableToolbar" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.topbar-container {
+  position: absolute;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 1px 0 0 var(--g-border-color);
+  transition: width 0.3s, top 0.3s, transform 0.3s, box-shadow 0.3s;
+
+  &.topbar-fixed,
+  &.topbar-sticky {
+    position: fixed;
+
+    &.shadow {
+      box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
+    }
+  }
+
+  &.topbar-sticky.hide {
+    top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
+  }
+
+  &.switch-tabbar-toolbar {
+    flex-direction: column-reverse;
+  }
+}
+</style>

package/src/layout/composables/useContext.ts

@@ -0,0 +1,38 @@
+import type {
+  useFavoritesStore,
+  useIframeStore,
+  useKeepAliveStore,
+  useMenuStore,
+  useNotificationStore,
+  useRouteStore,
+  useSettingsStore,
+  useTabbarStore,
+  useUserStore,
+} from '@/stores';
+import type { InjectionKey } from 'vue';
+
+interface LayoutContext {
+  settingsStore: ReturnType<typeof useSettingsStore>
+  keepAliveStore: ReturnType<typeof useKeepAliveStore>
+  iframeStore: ReturnType<typeof useIframeStore>
+  userStore: ReturnType<typeof useUserStore>
+  notificationStore: ReturnType<typeof useNotificationStore>
+  menuStore: ReturnType<typeof useMenuStore>
+  routeStore: ReturnType<typeof useRouteStore>
+  tabbarStore: ReturnType<typeof useTabbarStore>
+  favoritesStore: ReturnType<typeof useFavoritesStore>
+
+  appTitle: string
+  isDev: boolean
+  generateI18nTitle: any
+}
+
+const layoutInjectionKey: InjectionKey<LayoutContext> = Symbol('Layout');
+
+export function createContext(options: LayoutContext) {
+  provide(layoutInjectionKey, options);
+}
+
+export function useContext() {
+  return inject(layoutInjectionKey)!;
+}

package/src/layout/composables/useGetComputedStyle.ts

@@ -0,0 +1,70 @@
+import { useMenuStore, useSettingsStore } from '@/stores';
+
+/**
+ * 获取指定元素的计算样式属性值
+ * @param property - 要获取的样式属性
+ * @param root - 根元素，默认为 document.documentElement
+ * @returns 样式属性值的整数形式
+ */
+export function useGetComputedStyle(property: string, root: HTMLElement = document.documentElement) {
+  return Number.parseInt(getComputedStyle(root).getPropertyValue(property));
+}
+
+type unit = `${string}px`;
+
+/**
+ * 根据各种设置和条件计算主侧边栏和子侧边栏的实际宽度。
+ * @returns 包含主侧边栏和子侧边栏实际宽度的计算属性对象。
+ */
+export function useGetSidebarActualWidth() {
+  const settingsStore = useSettingsStore();
+  const menuStore = useMenuStore();
+
+  const mainSidebarActualWidth = computed<unit>(() => {
+    const menuMode = settingsStore.settings.menu.menuMode;
+    const isMobile = settingsStore.mode !== 'mobile';
+    const isSingle = menuMode === 'single';
+    const isHeadAndOnlyHead = ['head', 'only-head'].includes(menuMode);
+    if (isSingle || (isHeadAndOnlyHead && isMobile)) {
+      return '0px';
+    }
+    else {
+      return `${useGetComputedStyle('--g-main-sidebar-width')}px`;
+    }
+  });
+
+  /**
+   * subSidebarActualWidth 的计算属性，用于获取子侧边栏的实际宽度。
+   * 它考虑了各种设置和条件来确定最终的宽度。
+   * @returns 子侧边栏的实际宽度（以像素为单位）。
+   */
+  const subSidebarActualWidth = computed<unit>(() => {
+    let actualWidth = useGetComputedStyle('--g-sub-sidebar-width');
+    const subSidebarActualWidth = settingsStore.settings.menu.subMenuCollapse;
+    const subMenuOnlyOneHide = settingsStore.settings.menu.subMenuOnlyOneHide;
+    const menuMode = settingsStore.settings.menu.menuMode;
+    const isMobile = settingsStore.mode !== 'mobile';
+    const onlySideOrHead = ['only-side', 'only-head'].includes(menuMode);
+
+    if (subSidebarActualWidth && isMobile) {
+      actualWidth = useGetComputedStyle('--g-sub-sidebar-collapse-width');
+    }
+
+    if (onlySideOrHead && isMobile) {
+      actualWidth = 0;
+    }
+    if (
+      subMenuOnlyOneHide
+      && menuStore.sidebarMenus.length === 1
+      && (
+        !menuStore.sidebarMenus[0].children
+        || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
+      )
+    ) {
+      actualWidth = 0;
+    }
+    return `${actualWidth}px`;
+  });
+
+  return { mainSidebarActualWidth, subSidebarActualWidth };
+}