foucui 1.0.1 → 2.0.0

package/components/QiuMenu/components/QiuSubMenu.vue

@@ -1,504 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,43 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-<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>