foucui 1.0.1

package/components/QiuMenu/components/QiuSubMenu.vue

@@ -0,0 +1,504 @@
+<template>
+  <template v-if="itemOrMenu.meta && itemOrMenu.meta.levelHidden">
+    <template v-for="route in itemOrMenu.children" :key="route.path">
+      <qiu-menu :item="route" :layout="layout" />
+    </template>
+  </template>
+  <li
+    v-else
+    ref="subRef"
+    class="qiu-route-menu-sub"
+    :class="{
+      'is-open': isOpen,
+      'is-active': isSubActive,
+      'is-popup': isPopupMode,
+    }"
+    role="none"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+  >
+    <div ref="titleRef" class="qiu-route-menu-sub__title" @click="onTitleClick">
+      <span class="qiu-route-menu-sub__icon-wrap">
+        <qiu-icon
+          :icon="itemOrMenu.meta?.icon || 'folder-line'"
+          :is-custom-svg="itemOrMenu.meta?.isCustomSvg"
+          :title="menuTitle"
+        />
+        <qiu-dot
+          v-if="itemOrMenu.meta?.dot"
+          class="qiu-route-menu-sub__dot"
+          :type="dotType"
+        />
+      </span>
+      <span class="qiu-route-menu-sub__text" :title="menuTitle">
+        {{ menuTitle }}
+      </span>
+      <qiu-tag
+        v-if="itemOrMenu.meta?.badge"
+        class="qiu-route-menu-sub__badge"
+        :class="[`qiu-menu-tag--${badgeEffect}`]"
+        size="small"
+        :type="badgeType"
+        :effect="badgeEffect"
+      >
+        {{ translate(itemOrMenu.meta.badge) }}
+      </qiu-tag>
+      <span v-if="!isPopupMode" class="qiu-route-menu-sub__arrow" :class="{ 'is-open': isOpen }">
+        <qiu-icon icon="arrow-down-s-line" />
+      </span>
+      <span v-else class="qiu-route-menu-sub__more">
+        <qiu-icon icon="arrow-right-s-line" />
+      </span>
+    </div>
+
+    <!-- 展开态：内联子菜单；收起/弹出态：Teleport + fixed 级联 tips -->
+    <Teleport to="body" :disabled="!isFlyout">
+      <ul
+        v-show="showChildList"
+        ref="listRef"
+        class="qiu-route-menu-sub__list"
+        :class="{
+          'is-flyout': isFlyout,
+          'qiu-menu-flyout-panel': isFlyout,
+          [`is-placement-${flyoutPlacement}`]: isFlyout,
+        }"
+        :style="isFlyout ? flyoutStyle : undefined"
+        @mouseenter="onEnter"
+        @mouseleave="onLeave"
+      >
+        <i v-if="isFlyout" class="qiu-menu-flyout-panel__arrow" aria-hidden="true" />
+        <div v-if="isFlyout" class="qiu-menu-flyout-panel__head">{{ menuTitle }}</div>
+        <slot />
+      </ul>
+    </Teleport>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { QiuRouteMenuContext } from '../context'
+import { QIU_ROUTE_MENU_KEY } from '../context'
+import { translate } from '../../../src/i18n'
+
+defineOptions({
+  name: 'QiuSubMenu',
+})
+
+const props = defineProps({
+  itemOrMenu: {
+    type: Object,
+    default: () => ({}),
+  },
+  layout: {
+    type: String,
+    default: '',
+  },
+})
+
+const menuCtx = inject<QiuRouteMenuContext>(QIU_ROUTE_MENU_KEY, null)
+const subRef = ref<HTMLLIElement | null>(null)
+const titleRef = ref<HTMLElement | null>(null)
+const listRef = ref<HTMLElement | null>(null)
+const flyoutStyle = ref<Record<string, string>>({})
+const flyoutPlacement = ref<'bottom' | 'right' | 'left'>('right')
+let leaveTimer: ReturnType<typeof setTimeout> | null = null
+
+const index = computed(() => props.itemOrMenu.path as string)
+const menuTitle = computed(() => translate(props.itemOrMenu.meta?.title || ''))
+const isHorizontal = computed(() => menuCtx?.mode.value === 'horizontal')
+const isCollapse = computed(() => menuCtx?.collapse.value ?? false)
+const isPopupMode = computed(() => isHorizontal.value || isCollapse.value)
+const isFlyout = computed(() => isPopupMode.value)
+const isOpen = computed(() => menuCtx?.isSubOpen(index.value) ?? false)
+const isSubActive = computed(() => menuCtx?.isActive(index.value) ?? false)
+const badgeType = computed(() => props.itemOrMenu.meta?.badgeType || 'info')
+const badgeEffect = computed(() => props.itemOrMenu.meta?.badgeEffect || 'dark')
+const dotType = computed(() => {
+  const d = props.itemOrMenu.meta?.dot
+  if (d === true) return 'danger'
+  if (typeof d === 'string') return d
+  return 'danger'
+})
+const showChildList = computed(() => isOpen.value)
+
+const updateFlyoutPos = () => {
+  const el = titleRef.value
+  if (!el || !isFlyout.value) return
+  const rect = el.getBoundingClientRect()
+  const panelW = 200
+  const depth = index.value.split('/').filter(Boolean).length
+  // 已在 flyout 内的子级：向右级联；横向顶栏一级：向下展开
+  const inFlyoutPanel = !!el.closest('.qiu-menu-flyout-panel')
+  let left = 0
+  let top = 0
+  let placement: 'bottom' | 'right' | 'left' = 'right'
+  const triggerCX = rect.left + rect.width / 2
+  const triggerCY = rect.top + rect.height / 2
+
+  if (isHorizontal.value && !inFlyoutPanel) {
+    placement = 'bottom'
+    const gap = 6
+    // 尽量让触发项落在面板上方中部，三角对准菜单名
+    left = Math.round(triggerCX - panelW / 2)
+    top = Math.round(rect.bottom + gap)
+    left = Math.min(Math.max(8, left), window.innerWidth - panelW - 8)
+  } else {
+    const gap = 10
+    left = Math.round(rect.right + gap)
+    top = Math.round(rect.top)
+    if (left + panelW > window.innerWidth - 8) {
+      left = Math.round(rect.left - panelW - gap)
+      placement = 'left'
+    } else {
+      placement = 'right'
+    }
+  }
+
+  const maxTop = window.innerHeight - 16
+  if (top > maxTop - 80) top = Math.max(8, maxTop - 240)
+  if (top < 8) top = 8
+
+  // tips 三角对准触发项中心（指向上级菜单名）
+  const arrowHalf = 5
+  let arrowX = Math.round(triggerCX - left - arrowHalf)
+  let arrowY = Math.round(triggerCY - top - arrowHalf)
+  arrowX = Math.min(Math.max(12, arrowX), panelW - 22)
+  arrowY = Math.min(Math.max(12, arrowY), 220)
+
+  flyoutPlacement.value = placement
+  flyoutStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    zIndex: String(5200 + depth),
+    '--qiu-flyout-arrow-x': `${arrowX}px`,
+    '--qiu-flyout-arrow-y': `${arrowY}px`,
+  }
+}
+
+const openFlyout = () => {
+  if (isPopupMode.value) menuCtx?.enterFlyout(index.value)
+  else menuCtx?.openSub(index.value)
+  nextTick(() => {
+    updateFlyoutPos()
+    requestAnimationFrame(() => updateFlyoutPos())
+  })
+}
+
+const onTitleClick = () => {
+  if (!menuCtx) return
+  if (isPopupMode.value) {
+    if (isOpen.value) menuCtx.leaveFlyout()
+    else openFlyout()
+    return
+  }
+  menuCtx.toggleSub(index.value)
+}
+
+const onEnter = () => {
+  if (leaveTimer) {
+    clearTimeout(leaveTimer)
+    leaveTimer = null
+  }
+  if (!menuCtx) return
+  if (menuCtx.menuTrigger.value === 'hover' || isPopupMode.value) {
+    openFlyout()
+  }
+}
+
+const onLeave = (e: MouseEvent) => {
+  const related = e.relatedTarget as Node | null
+  if (related && (subRef.value?.contains(related) || listRef.value?.contains(related))) return
+
+  if (!isPopupMode.value) {
+    if (menuCtx?.menuTrigger.value !== 'hover') return
+    if (leaveTimer) clearTimeout(leaveTimer)
+    leaveTimer = setTimeout(() => {
+      menuCtx?.closeSub(index.value)
+      leaveTimer = null
+    }, 120)
+    return
+  }
+  // 弹出/收起：交给根级统一延迟关闭，避免移入下一级 Teleport 面板时被关掉
+  menuCtx?.leaveFlyout()
+}
+
+watch(isOpen, (v) => {
+  if (v && isFlyout.value) nextTick(() => updateFlyoutPos())
+})
+
+onBeforeUnmount(() => {
+  if (leaveTimer) clearTimeout(leaveTimer)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-route-menu-sub {
+  position: relative;
+  list-style: none;
+
+  &__title {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    width: 100%;
+    height: var(--qiu-menu-item-height);
+    padding: 0 12px;
+    overflow: hidden;
+    line-height: 1.2;
+    color: var(--qiu-menu-color-text, var(--qiu-menu-text-color, #fff));
+    cursor: pointer;
+    border-radius: var(--qiu-border-radius-base);
+    transition: background 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      color: #fff !important;
+      background-color: var(--qiu-color-primary);
+
+      .qiu-icon,
+      [class*='ri-'],
+      .qiu-route-menu-sub__text,
+      .qiu-route-menu-sub__arrow,
+      .qiu-route-menu-sub__more {
+        color: #fff !important;
+      }
+    }
+
+    .qiu-icon,
+    [class*='ri-'] {
+      flex-shrink: 0;
+      font-size: 16px;
+      line-height: 1;
+      color: inherit;
+    }
+  }
+
+  &.is-active > &__title {
+    color: #fff !important;
+    background-color: var(--qiu-color-primary);
+
+    .qiu-icon,
+    [class*='ri-'],
+    .qiu-route-menu-sub__text,
+    .qiu-route-menu-sub__arrow,
+    .qiu-route-menu-sub__more {
+      color: #fff !important;
+    }
+  }
+
+  &__text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__icon-wrap {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+    overflow: hidden;
+  }
+
+  &__badge {
+    flex-shrink: 0;
+    border-radius: 999px !important;
+  }
+
+  &__dot {
+    position: absolute !important;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    margin: 0 !important;
+  }
+
+  &__arrow,
+  &__more {
+    flex-shrink: 0;
+    font-size: 12px;
+    line-height: 1;
+    transition: transform 0.2s ease;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+  }
+
+  &__arrow.is-open {
+    transform: translateZ(0) rotate(180deg);
+  }
+
+  &__list {
+    padding: 4px 0;
+    margin: 0;
+    list-style: none;
+
+    :deep(.qiu-route-menu-item__inner) {
+      padding-left: 28px;
+    }
+  }
+
+  .qiu-route-menu--horizontal > .qiu-route-menu__list > & {
+    > .qiu-route-menu-sub__title {
+      height: 40px;
+      padding: 0 16px;
+    }
+  }
+}
+
+:deep(.qiu-menu-tag--dark.qiu-tag--info) {
+  color: #fff;
+  background: #1f1f1f;
+  border-color: #1f1f1f;
+}
+
+:deep(.qiu-menu-tag--plain.qiu-tag--info) {
+  color: #1f1f1f;
+  background: transparent;
+  border-color: #1f1f1f;
+}
+
+.qiu-route-menu-sub.is-active > .qiu-route-menu-sub__title,
+.qiu-route-menu-sub__title:hover {
+  :deep(.qiu-menu-tag--dark.qiu-tag--info) {
+    color: #1f1f1f;
+    background: #fff;
+    border-color: #fff;
+  }
+
+  :deep(.qiu-menu-tag--plain.qiu-tag--info) {
+    color: #fff;
+    background: transparent;
+    border-color: #fff;
+  }
+}
+</style>
+
+<style lang="scss">
+/* Teleport 级联 tips 面板（多级菜单） */
+.qiu-menu-flyout-panel.qiu-route-menu-sub__list.is-flyout {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 180px;
+  max-width: 260px;
+  max-height: calc(100vh - 24px);
+  padding: 6px 0 8px;
+  overflow-x: visible;
+  overflow-y: auto;
+  pointer-events: auto;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-radius: var(--qiu-border-radius-base, 6px);
+  box-shadow: var(--qiu-box-shadow-light, 0 6px 16px rgba(0, 0, 0, 0.12));
+}
+
+/* 横向向下展开：上方透明桥接，避免移入时菜单被关掉 */
+.qiu-menu-flyout-panel.is-placement-bottom::before {
+  position: absolute;
+  top: -10px;
+  right: 0;
+  left: 0;
+  height: 10px;
+  content: '';
+}
+
+.qiu-menu-flyout-panel__arrow {
+  position: absolute;
+  z-index: 2;
+  width: 10px;
+  height: 10px;
+  pointer-events: none;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border-top: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-left: 1px solid var(--qiu-border-color, #dcdfe6);
+}
+
+/* 向右展开：三角指向左侧上级菜单名 */
+.qiu-menu-flyout-panel.is-placement-right .qiu-menu-flyout-panel__arrow {
+  top: var(--qiu-flyout-arrow-y, 14px);
+  left: -5px;
+  transform: rotate(-45deg);
+}
+
+/* 向下展开：三角指向上方一级菜单名 */
+.qiu-menu-flyout-panel.is-placement-bottom .qiu-menu-flyout-panel__arrow {
+  top: -5px;
+  left: var(--qiu-flyout-arrow-x, 18px);
+  transform: rotate(45deg);
+}
+
+/* 向左展开：三角指向右侧上级菜单名 */
+.qiu-menu-flyout-panel.is-placement-left .qiu-menu-flyout-panel__arrow {
+  top: var(--qiu-flyout-arrow-y, 14px);
+  right: -5px;
+  left: auto;
+  transform: rotate(135deg);
+}
+
+.qiu-menu-flyout-panel__head {
+  padding: 4px 14px 8px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--qiu-text-color-secondary, #909399);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+}
+
+.qiu-menu-flyout-panel {
+  .qiu-route-menu-item__inner,
+  .qiu-route-menu-sub__title {
+    box-sizing: border-box;
+    display: flex !important;
+    gap: 8px;
+    align-items: center;
+    width: calc(100% - 16px) !important;
+    height: 36px !important;
+    padding: 0 12px !important;
+    margin: 0 8px 2px !important;
+    color: var(--qiu-text-color-primary, #303133) !important;
+    background: transparent !important;
+    border-radius: 6px;
+
+    .qiu-route-menu-item__text,
+    .qiu-route-menu-sub__text,
+    .qiu-route-menu-item__badge,
+    .qiu-route-menu-sub__badge,
+    .qiu-route-menu-sub__more,
+    .qiu-icon,
+    [class*='ri-'] {
+      display: inline-flex !important;
+      color: inherit !important;
+    }
+
+    .qiu-route-menu-sub__arrow {
+      display: none !important;
+    }
+
+    &:hover {
+      color: #fff !important;
+      background-color: var(--qiu-color-primary) !important;
+    }
+  }
+
+  .qiu-route-menu-item.is-active > .qiu-route-menu-item__inner,
+  .qiu-route-menu-sub.is-active > .qiu-route-menu-sub__title {
+    color: #fff !important;
+    background-color: var(--qiu-color-primary) !important;
+  }
+
+  /* 面板内叶子不再叠一层仅名称 tip */
+  .qiu-route-menu-item__tip {
+    display: none !important;
+  }
+}
+</style>

package/components/QiuMenu/context.ts

@@ -0,0 +1,21 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface QiuRouteMenuContext {
+  mode: Ref<'vertical' | 'horizontal'>
+  collapse: Ref<boolean>
+  activeIndex: Ref<string>
+  uniqueOpened: Ref<boolean>
+  menuTrigger: Ref<'click' | 'hover'>
+  isSubOpen: (index: string) => boolean
+  toggleSub: (index: string) => void
+  openSub: (index: string) => void
+  closeSub: (index: string) => void
+  /** 弹出/收起态：进入 flyout 链（取消延迟关闭） */
+  enterFlyout: (index: string) => void
+  /** 弹出/收起态：离开后延迟关闭整条 flyout 链 */
+  leaveFlyout: () => void
+  selectItem: (index: string) => void
+  isActive: (index: string) => boolean
+}
+
+export const QIU_ROUTE_MENU_KEY: InjectionKey<QiuRouteMenuContext> = Symbol('QiuRouteMenu')

package/components/QiuMenu/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <component :is="menuComponent" :item-or-menu="item" :layout="layout">
+    <template v-if="item.children && item.children.length > 0">
+      <qiu-menu v-for="route in item.children" :key="route.path" :item="route" :layout="layout" />
+    </template>
+  </component>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuMenu',
+})
+
+interface ComponentType {
+  default: Component
+}
+
+const imports = import.meta.glob<ComponentType>('./components/**/*.vue', { eager: true })
+const Components: Record<string, Component> = {}
+Object.getOwnPropertyNames(imports).forEach((key) => {
+  Components[key.replaceAll(/(\/|components|\.|vue)/g, '')] = imports[key].default
+})
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  layout: {
+    type: String,
+    default: '',
+  },
+})
+
+const menuComponent = computed(() =>
+  props.item.children &&
+  props.item.children.some((route: any) => {
+    return route.meta && route.meta.hidden !== true
+  })
+    ? Components['QiuSubMenu']
+    : Components['QiuMenuItem']
+)
+</script>

package/components/QiuMenuNav/QiuMenuNavItem.vue

@@ -0,0 +1,100 @@
+<template>
+  <li
+    class="qiu-menu-nav-item"
+    :class="{
+      'is-active': isActive,
+      'is-disabled': disabled,
+    }"
+    role="menuitem"
+    @click="handleClick"
+  >
+    <div class="qiu-menu-nav-item__inner">
+      <slot name="icon" />
+      <span class="qiu-menu-nav-item__title">
+        <slot>{{ title }}</slot>
+      </span>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { QiuMenuNavContext } from './context'
+import { QIU_MENU_NAV_KEY } from './context'
+
+defineOptions({ name: 'QiuMenuNavItem' })
+
+const props = withDefaults(
+  defineProps<{
+    index: string
+    title?: string
+    disabled?: boolean
+  }>(),
+  {
+    title: '',
+    disabled: false,
+  }
+)
+
+const menuCtx = inject<QiuMenuNavContext>(QIU_MENU_NAV_KEY, null)
+
+let router: ReturnType<typeof useRouter> | null = null
+try {
+  router = useRouter()
+} catch {
+  router = null
+}
+
+const isActive = computed(() => menuCtx?.activeIndex.value === props.index)
+
+const handleClick = () => {
+  if (props.disabled || !menuCtx) return
+  menuCtx.selectItem(props.index)
+  if (menuCtx.router.value && router) {
+    router.push(props.index).catch(() => {})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-menu-nav-item {
+  list-style: none;
+  cursor: pointer;
+
+  &__inner {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    height: var(--qiu-menu-item-height, var(--qiu-menu-item-height, 56px));
+    padding: 0 20px;
+    overflow: hidden;
+    color: var(--qiu-menu-text-color, var(--qiu-menu-text-color, #303133));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: background 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background: var(--qiu-menu-hover-bg-color, var(--qiu-menu-hover-bg-color, #ecf5ff));
+    }
+  }
+
+  &.is-active > .qiu-menu-nav-item__inner {
+    color: var(--qiu-menu-active-color, var(--qiu-menu-active-color, var(--qiu-color-primary, var(--qiu-color-primary))));
+    background: var(--qiu-menu-hover-bg-color, var(--qiu-menu-hover-bg-color, #ecf5ff));
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    .qiu-menu-nav-item__inner:hover {
+      background: transparent;
+    }
+  }
+
+  &__title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>