@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { MenuInjection, MenuProps } from './types';
+import type { PartyLoginConfig } from '@/features/components/PartyLogin/type';
+import { message } from 'ant-design-vue';
+import { usePartyLogin } from '@/features/composables/partyLogin';
+import Item from './item.vue';
+import SubMenu from './sub.vue';
+import { rootMenuInjectionKey } from './types';
+
+defineOptions({
+  name: 'MainMenu',
+});
+
+const props = withDefaults(
+  defineProps<MenuProps>(),
+  {
+    accordion: true,
+    defaultOpeneds: () => [],
+    mode: 'vertical',
+    collapse: false,
+    showCollapseName: false,
+    rounded: false,
+  },
+);
+
+const router = useRouter();
+
+const activeIndex = ref<MenuInjection['activeIndex']>(props.value);
+const items = ref<MenuInjection['items']>({});
+const subMenus = ref<MenuInjection['subMenus']>({});
+const openedMenus = ref<MenuInjection['openedMenus']>(props.defaultOpeneds.slice(0));
+const mouseInMenu = ref<MenuInjection['mouseInMenu']>([]);
+const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
+  return props.mode === 'horizontal' || (props.mode === 'vertical' && props.collapse);
+});
+
+// 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
+function initItems(menu: MenuProps['menu'] = [], parentPaths: string[] = []) {
+  menu.forEach((item) => {
+    const index = item.path ?? JSON.stringify(item);
+    if (item.children && item.children.length > 0) {
+      const indexPath = [...parentPaths, index];
+      subMenus.value[index] = {
+        index,
+        indexPath,
+        active: false,
+      };
+      initItems(item.children, indexPath);
+    }
+    else {
+      items.value[index] = {
+        index,
+        indexPath: parentPaths,
+      };
+    }
+  });
+}
+
+const openMenu: MenuInjection['openMenu'] = (index, indexPath) => {
+  if (openedMenus.value.includes(index)) {
+    return;
+  }
+  if (props.accordion) {
+    openedMenus.value = openedMenus.value.filter(key => indexPath.includes(key));
+  }
+  openedMenus.value.push(index);
+};
+const closeMenu: MenuInjection['closeMenu'] = (index) => {
+  if (Array.isArray(index)) {
+    nextTick(() => {
+      closeMenu(index.at(-1)!);
+      if (index.length > 1) {
+        closeMenu(index.slice(0, -1));
+      }
+    });
+    return;
+  }
+  Object.keys(subMenus.value).forEach((item) => {
+    if (subMenus.value[item].indexPath.includes(index)) {
+      openedMenus.value = openedMenus.value.filter(item => item !== index);
+    }
+  });
+};
+
+function setSubMenusActive(index: string) {
+  Object.keys(subMenus.value).forEach((index) => {
+    subMenus.value[index].active = false;
+  });
+  items.value[index]?.indexPath.forEach((index) => {
+    subMenus.value[index].active = true;
+  });
+}
+
+const handleMenuItemClick: MenuInjection['handleMenuItemClick'] = async (index, meta) => {
+  if (meta?.isDev) {
+    message.info('暂未上线，敬请期待！');
+    return;
+  }
+  if (props.mode === 'horizontal' || props.collapse) {
+    openedMenus.value = [];
+  }
+  setSubMenusActive(index);
+  if (meta?.link) {
+    // todo 在这里处理外部链接
+    const partyLogin = meta?.partyLogin as PartyLoginConfig | undefined;
+    if (partyLogin && Array.isArray(partyLogin) && partyLogin.length > 0) {
+      const { url } = await usePartyLogin(partyLogin, meta.link);
+      window.open(url.value);
+    }
+    else {
+      window.open(meta.link);
+    }
+
+    return;
+  }
+  router.push(index);
+};
+const handleSubMenuClick: MenuInjection['handleSubMenuClick'] = (index, indexPath) => {
+  if (openedMenus.value.includes(index)) {
+    closeMenu(index);
+  }
+  else {
+    openMenu(index, indexPath);
+  }
+};
+
+function initMenu() {
+  const activeItem = activeIndex.value && items.value[activeIndex.value];
+  setSubMenusActive(activeIndex.value);
+  if (!activeItem || props.collapse) {
+    return;
+  }
+  // 展开该菜单项的路径上所有子菜单
+  activeItem.indexPath.forEach((index) => {
+    const subMenu = subMenus.value[index];
+    if (subMenu) {
+      openMenu(index, subMenu.indexPath);
+    }
+  });
+}
+
+watch(() => props.menu, (val) => {
+  initItems(val);
+  initMenu();
+}, {
+  deep: true,
+  immediate: true,
+});
+
+watch(() => props.value, (currentValue) => {
+  if (!items.value[currentValue]) {
+    activeIndex.value = '';
+  }
+  const item = items.value[currentValue] || (activeIndex.value && items.value[activeIndex.value]) || items.value[props.value];
+  if (item) {
+    activeIndex.value = item.index;
+  }
+  else {
+    activeIndex.value = currentValue;
+  }
+  initMenu();
+});
+
+watch(() => props.collapse, (value) => {
+  if (value) {
+    openedMenus.value = [];
+  }
+  initMenu();
+});
+
+provide(rootMenuInjectionKey, reactive({
+  props,
+  items,
+  subMenus,
+  activeIndex,
+  openedMenus,
+  mouseInMenu,
+  isMenuPopup,
+  openMenu,
+  closeMenu,
+  handleMenuItemClick,
+  handleSubMenuClick,
+}));
+</script>
+
+<template>
+  <div
+    class="flex flex-col of-hidden transition-all"
+    :class="{
+      'w-[200px]': !isMenuPopup && props.mode === 'vertical',
+      'w-[64px]': isMenuPopup && props.mode === 'vertical',
+      'h-[80px]': props.mode === 'horizontal',
+      'flex-row! w-auto': isMenuPopup && props.mode === 'horizontal',
+    }"
+  >
+    <template v-for="(item, index) in menu" :key="index">
+      <SubMenu v-if="item.children?.length && item.meta?.sidebar !== false" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
+      <Item
+        v-else-if="item.meta?.sidebar !== false"
+        :item="item"
+        :unique-key="[item.path ?? JSON.stringify(item)]"
+        @click="handleMenuItemClick(item.path ?? JSON.stringify(item), item.meta)"
+      />
+    </template>
+  </div>
+</template>

package/src/built-in/layout-component/components/Menu/item.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import type { SubMenuItemProps } from './types';
+import { PubinfoIcon } from '@/features/components';
+import { useContext } from '../../composables/useContext';
+import { rootMenuInjectionKey } from './types';
+
+defineOptions({
+  name: 'MenuItem',
+});
+
+const props = withDefaults(
+  defineProps<SubMenuItemProps>(),
+  {
+    level: 0,
+    subMenu: false,
+    expand: false,
+  },
+);
+
+const rootMenu = inject(rootMenuInjectionKey)!;
+const { generateTitle } = useContext();
+
+const itemRef = ref<HTMLElement>();
+
+const isActived = computed(() => {
+  return props.subMenu
+    ? rootMenu.subMenus[props.uniqueKey[props.uniqueKey.length - 1]]?.active
+    : rootMenu.activeIndex === props.uniqueKey[props.uniqueKey.length - 1];
+});
+
+const isItemActive = computed(() => {
+  return isActived.value && (!props.subMenu || rootMenu.isMenuPopup);
+});
+
+const icon = computed(() => {
+  let icon;
+  if (props.item.meta?.icon) {
+    icon = props.item.meta.icon;
+  }
+  if (isActived.value) {
+    if (props.item.meta?.activeIcon === 'system-point') {
+      icon = 'system-point';
+    }
+    else if (props.item.meta?.activeIcon) {
+      icon = props.item.meta.activeIcon;
+    }
+  }
+  return icon;
+});
+
+// 读取菜单条目的 iconOptions（后端可能未定义，使用 any 安全读取）
+const iconOptions = computed(() => ((props.item.meta as any)?.iconOptions) as undefined | {
+  boxType?: 'square' | 'prism' | 'null'
+  angle?: number | string
+  background?: any
+  radius?: number | string
+  iconSize?: number | string
+  iconColor?: string
+});
+
+// 统一盒子类型：仅当显式为 square/prism 时启用盒子
+const computedBoxType = computed<'square' | 'prism' | undefined>(() => {
+  const bt = iconOptions.value?.boxType;
+  return bt && bt !== 'null' ? bt : undefined;
+});
+
+// 统一安全的图标颜色（仅 AntD 图标使用）；无配置则为 undefined
+const safeIconColor = computed<string | undefined>(() => iconOptions.value?.iconColor || undefined);
+
+// 缩进样式
+const indentStyle = computed(() => {
+  return !rootMenu.isMenuPopup
+    ? `padding-left: ${32 * (props.level ?? 0)}px`
+    : '';
+});
+
+defineExpose({
+  ref: itemRef,
+});
+</script>
+
+<template>
+  <div
+    ref="itemRef"
+    class="menu-item relative transition-all"
+    :class="{
+      'active': isItemActive,
+      'px-2 py-1': rootMenu.props.rounded,
+      'px-1! py-2!': rootMenu.props.rounded && rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
+    }"
+  >
+    <div
+      class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-14px text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])"
+      :class="{
+        'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
+        'rounded-2': rootMenu.props.rounded,
+        'px-2!': rootMenu.isMenuPopup && level === 0,
+        'py-3!': rootMenu.props.rounded && rootMenu.isMenuPopup && level !== 0,
+      }"
+      :title="generateTitle(item.meta?.title)"
+    >
+      <div
+        class="menu-item-container-layout inline-flex flex-1 items-center justify-center gap-[12px]"
+        :class="{
+          'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
+          'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+          'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
+          'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
+        }"
+        :style="indentStyle"
+      >
+        <!-- 特殊化处理，有些时候想要的是一个点 -->
+        <template v-if="icon && icon !== 'system-point'">
+          <!-- 有 iconOptions 时启用带边框/渐变的盒子效果 -->
+          <PubinfoIcon
+            v-if="iconOptions && computedBoxType"
+            small
+            :name="icon"
+            :box="computedBoxType!"
+            :size="20"
+            :icon-size="iconOptions?.iconSize"
+            :angle="iconOptions?.angle"
+            :background="iconOptions?.background"
+            :radius="iconOptions?.radius"
+            :color="(icon || '').startsWith('antd:') ? (safeIconColor || '#ffffff') : undefined"
+            class="menu-item-container-icon transition-transform group-hover:scale-115"
+          />
+          <!-- 无 iconOptions 时保持原样（纯图标），但若提供图标色也生效 -->
+          <PubinfoIcon
+            v-else
+            :name="icon"
+            :size="20"
+            :color="(icon || '').startsWith('antd:') ? safeIconColor : undefined"
+            class="menu-item-container-icon transition-transform group-hover:scale-115"
+          />
+        </template>
+        <span
+          v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)"
+          class="title w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
+          :class="{
+            'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
+            'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            'system-point': icon === 'system-point' && isItemActive,
+          }"
+        >
+          {{ generateTitle(item.meta?.title) }}
+        </span>
+        <HBadge
+          v-if="item.meta?.badge"
+          :value="typeof item.meta.badge === 'function' ? item.meta.badge() : item.meta.badge"
+          class="badge"
+          :class="{
+            'opacity-0': rootMenu.isMenuPopup && level === 0,
+          }"
+        />
+      </div>
+      <i
+        v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)"
+        class="sharp-corner"
+        :class="[
+          expand
+            ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]'
+            : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px] ',
+          rootMenu.isMenuPopup && level === 0 && 'opacity-0',
+          rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
+        ]"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.badge :deep(> span) {
+  --at-apply: right-0;
+  left: initial !important;
+}
+
+.sharp-corner {
+  --at-apply: relative ml-1 w-[10px];
+}
+
+.sharp-corner::before {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
+}
+
+.sharp-corner::after {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
+}
+
+.sub-sidebar-container .menu-item-container-layout:has(.system-point) {
+  --at-apply: relative;
+}
+
+.sub-sidebar-container .menu-item-container-layout:has(.system-point)::before {
+  --at-apply: absolute w-1.5 h-1.5 content-empty rounded-[50%] left-3;
+  background: var(--g-sub-sidebar-menu-active-color);
+}
+</style>

package/src/built-in/layout-component/components/Menu/sub.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue';
+import type { SubMenuProps } from './types';
+import { useTimeoutFn } from '@vueuse/core';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import Item from './item.vue';
+import { rootMenuInjectionKey } from './types';
+
+defineOptions({
+  name: 'SubMenu',
+});
+
+const props = withDefaults(
+  defineProps<SubMenuProps>(),
+  {
+    level: 0,
+  },
+);
+
+const index = props.menu.path ?? JSON.stringify(props.menu);
+const itemRef = shallowRef();
+const subMenuRef = shallowRef<OverlayScrollbarsComponentRef>();
+const rootMenu = inject(rootMenuInjectionKey)!;
+
+const opened = computed(() => {
+  return rootMenu.openedMenus.includes(props.uniqueKey[props.uniqueKey.length - 1]);
+});
+
+const transitionEvent = computed(() => {
+  return rootMenu.isMenuPopup
+    ? {
+        enter(el: HTMLElement) {
+          if (el.offsetHeight > window.innerHeight) {
+            el.style.height = `${window.innerHeight}px`;
+          }
+        },
+        afterEnter: () => {},
+        beforeLeave: (el: HTMLElement) => {
+          el.style.overflow = 'hidden';
+          el.style.maxHeight = `${el.offsetHeight}px`;
+        },
+        leave: (el: HTMLElement) => {
+          el.style.maxHeight = '0';
+        },
+        afterLeave(el: HTMLElement) {
+          el.style.overflow = '';
+          el.style.maxHeight = '';
+        },
+      }
+    : {
+        enter(el: HTMLElement) {
+          const memorizedHeight = el.offsetHeight;
+          el.style.maxHeight = '0';
+          el.style.overflow = 'hidden';
+          void el.offsetHeight;
+          el.style.maxHeight = `${memorizedHeight}px`;
+        },
+        afterEnter(el: HTMLElement) {
+          el.style.overflow = '';
+          el.style.maxHeight = '';
+        },
+        beforeLeave(el: HTMLElement) {
+          el.style.overflow = 'hidden';
+          el.style.maxHeight = `${el.offsetHeight}px`;
+        },
+        leave(el: HTMLElement) {
+          el.style.maxHeight = '0';
+        },
+        afterLeave(el: HTMLElement) {
+          el.style.overflow = '';
+          el.style.maxHeight = '';
+        },
+      };
+});
+
+const transitionClass = computed(() => {
+  return rootMenu.isMenuPopup
+    ? {
+        enterActiveClass: 'ease-in-out duration-300',
+        enterFromClass: 'opacity-0 translate-x-4',
+        enterToClass: 'opacity-100',
+        leaveActiveClass: 'ease-in-out duration-300',
+        leaveFromClass: 'opacity-100',
+        leaveToClass: 'opacity-0',
+      }
+    : {
+        enterActiveClass: 'ease-in-out duration-300',
+        enterFromClass: 'opacity-0',
+        enterToClass: 'opacity-100',
+        leaveActiveClass: 'ease-in-out duration-300',
+        leaveFromClass: 'opacity-100',
+        leaveToClass: 'opacity-0',
+      };
+});
+
+const hasChildren = computed(() => {
+  let flag = true;
+  if (props.menu.children) {
+    if (props.menu.children.every((item: any) => item.meta?.sidebar === false)) {
+      flag = false;
+    }
+  }
+  else {
+    flag = false;
+  }
+  return flag;
+});
+
+function handleClick() {
+  if (rootMenu.isMenuPopup && hasChildren.value) {
+    return;
+  }
+  if (hasChildren.value) {
+    rootMenu.handleSubMenuClick(index, props.uniqueKey);
+  }
+  else {
+    rootMenu.handleMenuItemClick(index, props.menu.meta);
+  }
+}
+
+let timeout: (() => void) | undefined;
+
+function handleMouseenter() {
+  if (!rootMenu.isMenuPopup) {
+    return;
+  }
+  rootMenu.mouseInMenu = props.uniqueKey;
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    if (hasChildren.value) {
+      rootMenu.openMenu(index, props.uniqueKey);
+      nextTick(() => {
+        const el = itemRef.value.ref;
+        let top = 0;
+        let left = 0;
+        if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
+          top = el.getBoundingClientRect().top + el.scrollTop;
+          left = el.getBoundingClientRect().left + el.getBoundingClientRect().width;
+          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
+            top = window.innerHeight - subMenuRef.value!.getElement()!.offsetHeight;
+          }
+        }
+        else {
+          top = el.getBoundingClientRect().top + el.getBoundingClientRect().height;
+          left = el.getBoundingClientRect().left;
+          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
+            subMenuRef.value!.getElement()!.style.height = `${window.innerHeight - top}px`;
+          }
+        }
+        subMenuRef.value!.getElement()!.style.top = `${top}px`;
+        subMenuRef.value!.getElement()!.style.left = `${left}px`;
+      });
+    }
+    else {
+      const path = props.menu.children ? rootMenu.subMenus[index].indexPath.at(-1)! : rootMenu.items[index].indexPath.at(-1)!;
+      rootMenu.openMenu(path, rootMenu.subMenus[path].indexPath);
+    }
+  }, 300));
+}
+
+function handleMouseleave() {
+  if (!rootMenu.isMenuPopup) {
+    return;
+  }
+  rootMenu.mouseInMenu = [];
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    if (rootMenu.mouseInMenu.length === 0) {
+      rootMenu.closeMenu(props.uniqueKey);
+    }
+    else {
+      if (hasChildren.value) {
+        if (!rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!)) {
+          rootMenu.closeMenu(props.uniqueKey.at(-1)!);
+        }
+      }
+    }
+  }, 300));
+}
+</script>
+
+<template>
+  <Item
+    ref="itemRef"
+    :unique-key="uniqueKey"
+    :item="menu"
+    :level="level"
+    :sub-menu="hasChildren"
+    :expand="opened"
+    @click="handleClick"
+    @mouseenter="handleMouseenter"
+    @mouseleave="handleMouseleave"
+  />
+  <Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
+    <Transition v-bind="transitionClass" v-on="transitionEvent">
+      <OverlayScrollbarsComponent
+        v-if="opened"
+        ref="subMenuRef"
+        :options="{ scrollbars: { visibility: 'hidden' } }"
+        defer
+        class="sub-menu"
+        :class="{
+          'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
+          'ring-1 ring-stone-2 dark:ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
+          'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
+          'rounded-2 py-1': rootMenu.props.rounded && rootMenu.isMenuPopup,
+        }"
+      >
+        <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
+          <SubMenu
+            v-if="item.meta?.sidebar !== false"
+            :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]"
+            :menu="item"
+            :level="level + 1"
+          />
+        </template>
+      </OverlayScrollbarsComponent>
+    </Transition>
+  </Teleport>
+</template>

package/src/built-in/layout-component/components/Menu/types.ts

@@ -0,0 +1,49 @@
+import type { Menu } from '#/menu';
+import { createInjectionKey } from '../../utils';
+
+export interface MenuItem {
+  index: string
+  indexPath: string[]
+  active?: boolean
+}
+
+export interface MenuProps {
+  menu: Menu.recordRaw[]
+  value: string
+  accordion?: boolean
+  defaultOpeneds?: string[]
+  mode?: 'horizontal' | 'vertical'
+  collapse?: boolean
+  showCollapseName?: boolean
+  rounded?: boolean
+}
+
+export interface MenuInjection {
+  props: MenuProps
+  items: Record<string, MenuItem>
+  subMenus: Record<string, MenuItem>
+  activeIndex: MenuProps['value']
+  openedMenus: string[]
+  mouseInMenu: string[]
+  isMenuPopup: boolean
+  openMenu: (index: string, indexPath: string[]) => void
+  closeMenu: (index: string | string[]) => void
+  handleMenuItemClick: (index: string, meta?: Menu.recordRaw['meta']) => void
+  handleSubMenuClick: (index: string, indexPath: string[]) => void
+}
+
+export const rootMenuInjectionKey = createInjectionKey<MenuInjection>('rootMenu');
+
+export interface SubMenuProps {
+  uniqueKey: string[]
+  menu: Menu.recordRaw
+  level?: number
+}
+
+export interface SubMenuItemProps {
+  uniqueKey: string[]
+  item: Menu.recordRaw
+  level?: number
+  subMenu?: boolean
+  expand?: boolean
+}