@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { isUndefined } from 'lodash-es';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import Sortable from 'sortablejs';
+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 { PubinfoIcon } from '@/features/components';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'Favorites',
+});
+
+const route = useRoute();
+const router = useRouter();
+const { favoritesStore, routeStore, generateTitle } = useContext();
+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">
+        {{ '我的收藏夾' }}
+      </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="generateTitle(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">
+            {{ generateTitle(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
+      >
+        <img src="../../../assets/icons/favorites.svg" class="size-[150px]" alt="">
+        <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 scoped>
+:deep([data-overlayscrollbars-viewport]) {
+  --at-apply: overscroll-contain;
+}
+
+.draggable-ghost {
+  --at-apply: op-0;
+}
+
+.name {
+  mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent);
+}
+</style>

package/src/built-in/layout-component/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/built-in/layout-component/components/Topbar/Toolbar/index.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { RouteRecordRaw } from 'vue-router';
+import { cloneDeep } from 'lodash-es';
+import { compile } from 'path-to-regexp';
+import { PubinfoIcon } from '@/features/components';
+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, generateTitle } = 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: generateTitle(settingsStore.settings.home.title),
+  };
+}
+
+interface BreadcrumbItemNode { title: string, path: string, mainIndex?: number }
+
+const breadcrumbList = computed(() => {
+  const breadcrumbList: BreadcrumbItemNode[] = [];
+  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: `__MAIN__${index}`,
+        mainIndex: index,
+        title: generateTitle(menuStore.allMenus[index].meta?.title),
+      });
+    }
+  }
+
+  if (route.meta.breadcrumbNeste) {
+    route.meta.breadcrumbNeste.forEach((item) => {
+      if (item.hide === false) {
+        breadcrumbList.push({
+          path: item.path,
+          title: generateTitle(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) {
+  if (path.startsWith('__MAIN__')) {
+    const idx = Number(path.replace('__MAIN__', ''));
+    const main = menuStore.allMenus[idx];
+    if (main) {
+      const mapNode = (r: any): any => ({
+        title: generateTitle(r.meta?.title),
+        path: r.path,
+        children: (r.children || [])
+          .filter((c: any) => c.meta?.sidebar !== false)
+          .map((c: any) => mapNode(c)),
+      });
+      return {
+        title: generateTitle(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 ?? {};
+}
+
+/**
+ * 点击面包屑的下拉树节点
+ */
+function onSelect(node: RouteRecordRaw, index: number) {
+  if (!node) {
+    return;
+  }
+
+  if (index === (breadcrumbList.value.length - 1)) {
+    return;
+  }
+
+  if (!node?.children?.length && node.path) {
+    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()"
+      >
+        <img src="../../../assets/icons/toolbar-collapse.svg" class="size-[1em]" alt="">
+      </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="(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 scoped>
+.toolbar-container {
+  --at-apply: flex items-center justify-between h-[--g-toolbar-height]
+  bg-[--g-container-bg] transition-[background-color] duration-[0.3s];
+}
+
+.left-box {
+  --at-apply: flex items-center overflow-hidden pl-2.5 pr-[50px];
+  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
+}
+
+.breadcrumb {
+  --at-apply: pl-10px whitespace-normal;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .text {
+  --at-apply: bg-black/5 px-4 py-1.5 bg-stone-2/80 dark:bg-stone-8/80;
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .text.is-link:hover {
+  --at-apply: bg-stone-2 dark:bg-stone-8;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item):first-child .text {
+  --at-apply: pl-3;
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
+  border-radius: 6px 0 0 6px;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item):last-child:not(:first-child) .text {
+  --at-apply: bg-stone-2 dark:bg-stone-8 pl-3;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
+  border-radius: 0 6px 6px 0;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .separator {
+  --at-apply: hidden;
+}
+
+/* 面包屑动画 */
+.breadcrumb-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.breadcrumb-enter-from {
+  opacity: 0;
+  transform: translateX(30px) skewX(-50deg);
+}
+</style>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
+import Tabbar from './Tabbar/index.vue';
+import Toolbar from './Toolbar/index.vue';
+
+defineOptions({
+  name: 'Topbar',
+});
+
+const { show } = useLayoutVisible();
+</script>
+
+<template>
+  <Tabbar v-if="show.tabbar" />
+  <Toolbar v-if="show.toolbar" />
+</template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value: string | number | boolean
+}>();
+
+const show = computed(() => {
+  switch (typeof props.value) {
+    case 'string':
+      return props.value.length > 0;
+    case 'number':
+      return props.value > 0;
+    case 'boolean':
+      return props.value;
+    default:
+      return props.value !== undefined && props.value !== null;
+  }
+});
+
+const transitionClass = ref({
+  enterActiveClass: 'ease-in-out duration-500',
+  enterFromClass: 'opacity-0',
+  enterToClass: 'opacity-100',
+  leaveActiveClass: 'ease-in-out duration-500',
+  leaveFromClass: 'opacity-100',
+  leaveToClass: 'opacity-0',
+});
+</script>
+
+<template>
+  <div class="relative inline-flex">
+    <slot />
+    <Transition v-bind="transitionClass">
+      <span
+        v-if="show"
+        class="absolute left-[50%] top-0 z-20 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light -translate-y-[50%] dark:ring-dark"
+      >
+        {{ value }}
+      </span>
+    </Transition>
+  </div>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    block?: boolean
+    outline?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    block: false,
+    outline: false,
+    disabled: false,
+  },
+);
+
+const buttonClass = computed(() => [
+  'focus:outline-none focus-visible:outline-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
+  props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
+  props.outline
+    ? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark:bg-dark hover:not-disabled:bg-ui-primary/10 dark:hover:not-disabled:bg-ui-primary/10 focus-visible:ring-2'
+    : 'shadow-sm text-ui-text bg-ui-primary hover:bg-ui-primary/75 disabled:bg-ui-primary/90 focus-visible:ring-inset focus-visible:ring-2',
+]);
+</script>
+
+<template>
+  <button :disabled="disabled" :class="buttonClass">
+    <slot />
+  </button>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/features/components';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number | undefined
+    options: {
+      label?: string | number
+      icon?: string
+      value: string | number
+      disabled?: boolean
+    }[]
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number]
+  'change': [string | number | undefined]
+}>();
+
+watch(() => props.modelValue, (val) => {
+  emit('change', val);
+});
+function update(value: string | number) {
+  emit('update:modelValue', value);
+}
+</script>
+
+<template>
+  <div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      :disabled="disabled || option.disabled"
+      class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)"
+      :class="{ 'text-ui-text bg-ui-primary': modelValue === option.value }"
+      @click="update(option.value)"
+    >
+      <PubinfoIcon v-if="option.icon" :name="option.icon" />
+      <template v-else>
+        {{ option.label }}
+      </template>
+    </button>
+  </div>
+</template>