@pubinfo-nightly/core 2025.11.14

package/src/built-in/layout-component/components/Header/HeaderFullMenu/NotCursor.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'NotCursor',
+});
+
+withDefaults(defineProps<{
+  isCursor?: boolean
+  skidding?: number
+  devText?: string // 自定义开发模式文本
+}>(), {
+  isCursor: false,
+  skidding: 0,
+  devText: '该功能暂未上线，敬请期待！', // 默认文本
+});
+</script>
+
+<template>
+  <slot v-if="!isCursor" />
+  <VMenu
+    v-else
+    :triggers="['hover']"
+    :skidding="skidding"
+    :delay="0"
+    :auto-hide="false"
+    theme="not-cursor"
+  >
+    <slot />
+    <template #popper>
+      <div class="not-cursor-container" box-border flex="~ col justify-center items-center">
+        <img src="../../../assets/images/not-cursor.png" w-60px alt="">
+        <div text="#B8BBBD 14px" mt-10px>
+          {{ devText }}
+        </div>
+      </div>
+    </template>
+  </VMenu>
+</template>
+
+<style scoped>
+.not-cursor-container {
+--at-apply: size-full;
+}
+</style>
+
+<style>
+.v-popper--theme-not-cursor {
+  --at-apply: z-1000;
+}
+
+.v-popper--theme-not-cursor .v-popper__inner {
+  --at-apply: w-228px h-123px border border-solid border-white rounded-md;
+
+  background-image: linear-gradient(-55deg, #fff 0%, #eaf3ff 87%);
+  box-shadow: 4px 8px 14px -4px #8195b74f;
+}
+
+.v-popper--theme-not-cursor .v-popper__inner > div {
+  --at-apply: size-full;
+}
+
+.v-popper--theme-not-cursor .v-popper__arrow-container {
+  --at-apply: hidden;
+  display: none;
+}
+
+.dark .v-popper--theme-not-cursor .v-popper__inner {
+  --at-apply: shadow-[none] rounded-8px border border-solid border-[#4b4f53];
+  background-image: linear-gradient(-43deg, #141414 0%, #141414 87%);
+}
+</style>

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { MenuData } from '@/features';
+import { useElementSize } from '@vueuse/core';
+import SolarWidget5BoldDuotone from '~icons/solar/widget-5-bold-duotone';
+import { PubinfoIcon } from '@/features/components';
+import { useContext } from '../../../composables/useContext';
+import { useMenu } from '../../../composables/useMenu';
+import More from './More.vue';
+import NotCursor from './NotCursor.vue';
+
+defineOptions({
+  name: 'LayoutHeaderFullMenu',
+});
+
+const { settingsStore, menuStore, generateTitle } = useContext();
+const { switchTo } = useMenu();
+
+function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
+  let name;
+  if ((!isActive && icon) || (isActive && !activeIcon)) {
+    name = icon;
+  }
+  else if (isActive && activeIcon) {
+    name = activeIcon;
+  }
+  return name;
+}
+
+const menuRef = ref<HTMLElement | null>();
+
+const { width } = useElementSize(menuRef);
+const menuHideIndex = ref(0);
+
+const moreApple = computed(() => {
+  return menuHideIndex.value === menuStore.allMenus.length - 1;
+});
+
+function moreApplyClick(index: number, item: MenuData) {
+  const menuIndex = index + menuHideIndex.value + 1;
+  switchTo(menuIndex, item);
+}
+
+// 计算顶部菜单宽度
+function fitMenus() {
+  const containerRoot = menuRef.value!;
+  const menuContainer = Array.from(containerRoot.children).at(0)!;
+  const menuContainerWidth = menuContainer.clientWidth;
+  const menu = Array.from(menuContainer.children);
+  const menuTotalWidth = menu.reduce((total, item) => total + (item as HTMLElement).clientWidth, 0);
+  let restrictedWidth = 0;
+  let restrictedIndex = 0;
+
+  if (menuTotalWidth <= menuContainerWidth) {
+    restrictedIndex = menu.length - 1;
+  }
+  else {
+    for (const [index, item] of menu.entries()) {
+      restrictedWidth += (item as HTMLElement).clientWidth;
+      if (restrictedWidth >= menuContainerWidth) {
+        restrictedIndex = index - 1;
+        break;
+      }
+    }
+  }
+
+  menu.forEach((item, index) => {
+    if (index > restrictedIndex) {
+      (item as HTMLElement).style.visibility = 'hidden';
+    }
+    else {
+      (item as HTMLElement).style.visibility = 'visible';
+    }
+  });
+
+  return restrictedIndex;
+}
+
+function showMenu(item: MenuData) {
+  return (item.children && item.children.length !== 0) || item?.meta?.isDev;
+}
+
+onMounted(() => {
+  watch(
+    width,
+    () => {
+      menuHideIndex.value = fitMenus();
+    },
+    {
+      immediate: true,
+    });
+});
+</script>
+
+<template>
+  <div ref="menuRef" class="menu-container nothin">
+    <div
+      class="menu flex of-hidden transition-all"
+      :class="{
+        [`menu-active-${settingsStore.settings.menu.menuActiveStyle}`]: settingsStore.settings.menu.menuActiveStyle !== '',
+      }"
+    >
+      <template v-for="(item, index) in menuStore.allMenus" :key="item?.meta?.title || index">
+        <div
+          class="menu-item relative transition-all"
+          invisible
+          :class="{
+            'active': index === menuStore.actived,
+            'px-1 py-2': showMenu(item) && settingsStore.settings.menu.isRounded,
+            'is-dev': item.meta?.isDev,
+          }"
+        >
+          <NotCursor :is-cursor="item.meta?.isDev" :dev-text="item.meta?.devText">
+            <div
+              v-if="showMenu(item)"
+              class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])"
+              :class="{
+                'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
+                'rounded-2': settingsStore.settings.menu.isRounded,
+              }"
+              :title="generateTitle(item.meta?.title)"
+              @click="switchTo(index, item)"
+            >
+              <div class="flex flex-row flex-1 items-center justify-center px-8px">
+                <template v-if="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)">
+                  <!-- 当存在 iconOptions 且 boxType 不为 'null' 时，展示带边框/渐变的盒子效果 -->
+                  <PubinfoIcon
+                    v-if="item.meta?.iconOptions?.boxType && item.meta.iconOptions.boxType !== 'null'"
+                    :name="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)!"
+                    small
+                    :box="(item.meta.iconOptions.boxType as any)"
+                    :size="18"
+                    :icon-size="item.meta.iconOptions.iconSize"
+                    :angle="item.meta.iconOptions.angle"
+                    :background="item.meta.iconOptions.background"
+                    :radius="item.meta.iconOptions.radius"
+                    :color="(iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon) || '').startsWith('antd:')
+                      ? (item.meta.iconOptions.iconColor || '#ffffff')
+                      : undefined"
+                    class="menu-item-container-icon transition-transform group-hover:scale-120 mr-5px"
+                  />
+                  <!-- 否则与原行为一致（不带盒子），但若提供了图标色也一并生效 -->
+                  <PubinfoIcon
+                    v-else
+                    :name="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)!"
+                    :size="18"
+                    :color="(iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon) || '').startsWith('antd:')
+                      ? (item.meta?.iconOptions?.iconColor || undefined)
+                      : undefined"
+                    class="menu-item-container-icon transition-transform group-hover:scale-120 mr-5px"
+                  />
+                </template>
+                <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
+                  {{ generateTitle(item.meta?.title) }}
+                </span>
+              </div>
+            </div>
+          </NotCursor>
+        </div>
+      </template>
+    </div>
+    <More
+      v-if="!moreApple"
+      :items="menuStore.allMenus.slice(menuHideIndex + 1)"
+      :active-index="menuStore.actived - menuHideIndex - 1"
+      @on-menu-click="moreApplyClick"
+    >
+      <div relative h-full w-85px flex="~ none justify-center items-center" text-sm cursor-pointer>
+        更多应用
+        <SolarWidget5BoldDuotone ml="5px" mr="5px" />
+      </div>
+    </More>
+  </div>
+</template>

package/src/built-in/layout-component/components/Header/HeaderMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'LayoutHeaderMenu',
+});
+
+const HeaderFullMenu = defineAsyncComponent(() => import('./HeaderFullMenu/index.vue'));
+const HeaderThinMenu = defineAsyncComponent(() => import('./HeaderThinMenu.vue'));
+
+const { settingsStore } = useContext();
+</script>
+
+<template>
+  <!-- 顶部模式 -->
+  <HeaderFullMenu v-if="settingsStore.settings.menu.menuMode === 'head'" />
+  <!-- 顶部精简模式 -->
+  <HeaderThinMenu v-else-if="settingsStore.settings.menu.menuMode === 'only-head'" />
+</template>

package/src/built-in/layout-component/components/Header/HeaderThinMenu.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import Menu from '../Menu/index.vue';
+
+defineOptions({
+  name: 'LayoutHeaderThinMenu',
+});
+
+const route = useRoute();
+
+const { settingsStore, menuStore } = useContext();
+
+const menuRef = ref<HTMLElement | null>();
+
+// 顶部模式鼠标滚动
+function handlerMouserScroll(event: WheelEvent) {
+  menuRef.value!.scrollBy({
+    left: (event.deltaY || event.detail) > 0 ? 50 : -50,
+  });
+}
+</script>
+
+<template>
+  <div
+    ref="menuRef"
+    class="menu-container"
+    @wheel.prevent="handlerMouserScroll"
+  >
+    <Menu
+      :menu="menuStore.allMenus"
+      :value="route.meta.activeMenu || route.path"
+      mode="horizontal"
+      show-collapse-name
+      :rounded="settingsStore.settings.menu.isRounded"
+      class="menu"
+      :class="{
+        [`menu-active-${settingsStore.settings.menu.menuActiveStyle}`]: settingsStore.settings.menu.menuActiveStyle !== '',
+      }"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
+import Logo from '../Logo/index.vue';
+import Tools from '../Tools/index.vue';
+import HeaderMenu from './HeaderMenu.vue';
+
+defineOptions({
+  name: 'LayoutHeader',
+});
+
+withDefaults(
+  defineProps<{
+    showMenus?: boolean
+  }>(),
+  {
+    showMenus: true,
+  },
+);
+
+const { show } = useLayoutVisible();
+</script>
+
+<template>
+  <Transition name="header">
+    <header v-if="show.header">
+      <div class="header-container">
+        <div class="main">
+          <slot name="logo">
+            <Logo />
+          </slot>
+
+          <slot v-if="showMenus" name="menu">
+            <HeaderMenu />
+          </slot>
+        </div>
+
+        <slot name="tools">
+          <Tools />
+        </slot>
+      </div>
+    </header>
+  </Transition>
+</template>
+
+<style scoped>
+[data-app-width-mode="center"] header,
+[data-app-width-mode="center-max-width"] header {
+  --at-apply: w-[--g-app-width] max-w-full;
+}
+
+header {
+  --at-apply: fixed top-0 right-0 left-0 z-1000 flex items-center w-full h-[--g-header-height] mx-auto my-0 px-5 py-0 text-[--g-header-color] bg-[--g-header-bg];
+  transition: background-color 0.3s;
+}
+
+.header-container {
+  --at-apply: flex items-center justify-between w-[--g-header-width] h-full mx-auto my-0;
+}
+
+:deep(.main) {
+  --at-apply: flex flex-[auto] flex-nowrap items-center w-0 h-full;
+}
+
+:deep(.main .menu-active-arrow .item-container::before),
+:deep(.main .menu-active-arrow .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-0 h-0 content-empty border-b-[color:var(--g-header-bg)] opacity-0 transition-all duration-[0.3s] border-b-[5px] border-x-[5px] border-x-transparent border-solid left-2/4 bottom-0;
+}
+
+:deep(.main .menu-active-arrow .item-container.active::before),
+:deep(.main .menu-active-arrow .menu-item.active::before) {
+  --at-apply: bottom-2 op-100;
+}
+
+:deep(.main .menu-active-line .item-container::before),
+:deep(.main .menu-active-line .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-0 h-1 content-empty bg-[--g-header-menu-active-bg] opacity-0 transition-all duration-[0.3s] rounded-sm left-2/4 bottom-1.5;
+  box-shadow: 0 0 0 1px var(--g-header-bg);
+}
+
+:deep(.main .menu-active-line .item-container.active::before),
+:deep(.main .menu-active-line .menu-item.active::before) {
+  --at-apply: w-5 op-100;
+}
+
+:deep(.main .menu-active-dot .item-container::before),
+:deep(.main .menu-active-dot .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-2.5 h-2.5 content-empty bg-[--g-header-menu-active-bg]
+  opacity-0 transition-all duration-[0.3s] rounded-[50%] left-2/4 bottom-0;
+  box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
+}
+
+:deep(.main .menu-active-dot .item-container.active::before),
+:deep(.main .menu-active-dot .menu-item.active::before) {
+  --at-apply: bottom-1 op-100;
+}
+
+:deep(.menu-container) {
+  --at-apply: flex-1 h-full overflow-x-auto mx-[30px] my-0 px-5 py-0;
+  scrollbar-width: none;
+  mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
+}
+
+:deep(.menu-container::-webkit-scrollbar) {
+  --at-apply: hidden;
+}
+
+:deep(.menu-container.nothin) {
+  --at-apply: flex;
+}
+
+:deep(.menu-container .menu-item-container-layout) {
+  --at-apply: flex flex-row w-auto;
+}
+
+:deep(.menu) {
+  --at-apply: inline-flex h-full bg-[--g-header-bg];
+}
+
+:deep(.menu .menu-item .v-popper--theme-not-cursor) {
+  --at-apply: h-full;
+}
+
+:deep(.menu .menu-item .menu-item-container) {
+  --at-apply: px-1.5 py-0 text-[--g-header-menu-color] bg-[--g-header-menu-bg];
+}
+
+:deep(.menu .menu-item .menu-item-container:hover) {
+  color: var(--g-header-menu-hover-color);
+  background-color: var(--g-header-menu-hover-bg);
+}
+
+:deep(.menu .menu-item .menu-item-container .menu-item-container-icon) {
+  transform: scale(1);
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container) {
+  --at-apply: cursor-not-allowed;
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container i) {
+  filter: grayscale(100%);
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container span) {
+  --at-apply: op-80;
+}
+
+:deep(.menu .menu-item.active .menu-item-container) {
+  color: var(--g-header-menu-active-color);
+  background-color: var(--g-header-menu-active-bg);
+}
+
+:deep(.tools) {
+  --at-apply: p-0;
+}
+
+:deep(.tools .buttons .item .icon) {
+  color: var(--g-header-color);
+}
+
+:deep(.tools .user-container) {
+  --at-apply: text-16px;
+  color: var(--g-header-color);
+}
+
+.header-enter-active,
+.header-leave-active {
+  transition: transform 0.3s;
+}
+
+.header-enter-from,
+.header-leave-to {
+  transform: translateY(calc(var(--g-header-height) * -1));
+}
+</style>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/features/components';
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'Logo',
+});
+
+withDefaults(
+  defineProps<{
+    name?: string
+    showLogo?: boolean
+    showTitle?: boolean
+  }>(),
+  {
+    name: 'logo',
+    showLogo: true,
+    showTitle: true,
+  },
+);
+
+const { settingsStore, appTitle } = useContext();
+
+const to = computed(() => {
+  return {
+    ...(settingsStore.settings.home.enable && { name: 'Home' }),
+  };
+});
+</script>
+
+<template>
+  <RouterLink
+    :to="to"
+    class="relative w-max bg-inherit p-[inherit] h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline"
+    :class="{ 'cursor-pointer': settingsStore.settings.home.enable }"
+  >
+    <PubinfoIcon
+      v-if="showLogo"
+      :name="name"
+      :size="30"
+      color="transparent"
+    />
+    <span v-if="showTitle" class="text-19px font-semibold block truncate">
+      <slot>
+        {{ appTitle }}
+      </slot>
+    </span>
+  </RouterLink>
+</template>
+
+<style scoped>
+span {
+  --at-apply: text-2xl text-[--g-header-color] tracking-px;
+}
+</style>