foucui 1.0.1

package/components/QiuMenu/components/QiuMenuItem.vue

@@ -0,0 +1,340 @@
+<template>
+  <li
+    ref="itemRef"
+    class="qiu-route-menu-item"
+    :class="{ 'is-active': isActive, 'is-collapse-tip': isCollapse }"
+    role="menuitem"
+    @click="handleLink"
+    @mouseenter="onTipEnter"
+    @mouseleave="onTipLeave"
+  >
+    <div class="qiu-route-menu-item__inner">
+      <span class="qiu-route-menu-item__icon-wrap">
+        <qiu-icon
+          :icon="itemOrMenu.meta?.icon || 'menu-line'"
+          :is-custom-svg="itemOrMenu.meta?.isCustomSvg"
+          :title="menuTitle"
+        />
+        <qiu-dot
+          v-if="itemOrMenu.meta?.dot"
+          class="qiu-route-menu-item__dot"
+          :type="dotType"
+        />
+      </span>
+      <span class="qiu-route-menu-item__text" :title="menuTitle">
+        {{ menuTitle }}
+      </span>
+      <qiu-tag
+        v-if="itemOrMenu.meta?.badge"
+        class="qiu-route-menu-item__badge"
+        :class="[`qiu-menu-tag--${badgeEffect}`]"
+        size="small"
+        :type="badgeType"
+        :effect="badgeEffect"
+      >
+        {{ translate(itemOrMenu.meta.badge) }}
+      </qiu-tag>
+    </div>
+    <!-- 收起态：右侧 tips（fixed + 三角指向） -->
+    <Teleport to="body">
+      <div
+        v-show="isCollapse && tipVisible"
+        class="qiu-route-menu-item__tip"
+        role="tooltip"
+        :style="tipStyle"
+        @mouseenter="onTipEnter"
+        @mouseleave="onTipLeave"
+      >
+        <i class="qiu-route-menu-item__tip-arrow" aria-hidden="true" />
+        <span class="qiu-route-menu-item__tip-title">{{ menuTitle }}</span>
+        <qiu-tag
+          v-if="itemOrMenu.meta?.badge"
+          size="small"
+          :type="badgeType"
+          :effect="badgeEffect"
+        >
+          {{ translate(itemOrMenu.meta.badge) }}
+        </qiu-tag>
+      </div>
+    </Teleport>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { QiuRouteMenuContext } from '../context'
+import { QIU_ROUTE_MENU_KEY } from '../context'
+import { isHashRouterMode } from '/@/config'
+import { translate } from '/@/i18n'
+import { useSettingsStore } from '/@/store/modules/settings'
+import { isExternal } from '/@/utils/validate'
+
+defineOptions({
+  name: 'QiuMenuItem',
+})
+
+const props = defineProps({
+  itemOrMenu: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const menuCtx = inject<QiuRouteMenuContext>(QIU_ROUTE_MENU_KEY, null)
+const route = useRoute()
+const router = useRouter()
+const settingsStore = useSettingsStore()
+const { device, theme } = storeToRefs(settingsStore)
+const { foldSideBar } = settingsStore
+const { enter, exit } = useFullscreen()
+
+/** 分栏开启「自动收起」时：点击任意叶子菜单即收起二级栏 */
+const foldColumnSecondIfNeeded = () => {
+  if (theme.value.layout !== 'column') return
+  if (!theme.value.autoHideColumnMenu) return
+  if (device.value === 'mobile') return
+  foldSideBar()
+}
+
+const itemRef = ref<HTMLLIElement | null>(null)
+const tipVisible = ref(false)
+const tipStyle = ref<Record<string, string>>({})
+let tipTimer: ReturnType<typeof setTimeout> | null = null
+
+const index = computed(() => props.itemOrMenu.path as string)
+const isActive = computed(() => menuCtx?.activeIndex.value === index.value)
+const isCollapse = computed(() => menuCtx?.collapse.value ?? false)
+const menuTitle = computed(() => translate(props.itemOrMenu.meta?.title || ''))
+
+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 updateTipPos = () => {
+  const el = itemRef.value
+  if (!el) return
+  const rect = el.getBoundingClientRect()
+  tipStyle.value = {
+    position: 'fixed',
+    top: `${Math.round(rect.top + rect.height / 2)}px`,
+    left: `${Math.round(rect.right + 10)}px`,
+    transform: 'translateY(-50%)',
+    zIndex: '4100',
+  }
+}
+
+const onTipEnter = () => {
+  if (tipTimer) {
+    clearTimeout(tipTimer)
+    tipTimer = null
+  }
+  if (!isCollapse.value) return
+  // 已在父级 flyout 内时不再叠 tips
+  if (itemRef.value?.closest('.qiu-route-menu-sub__list.is-flyout')) return
+  updateTipPos()
+  tipVisible.value = true
+}
+
+const onTipLeave = () => {
+  if (tipTimer) clearTimeout(tipTimer)
+  tipTimer = setTimeout(() => {
+    tipVisible.value = false
+    tipTimer = null
+  }, 80)
+}
+
+onBeforeUnmount(() => {
+  if (tipTimer) clearTimeout(tipTimer)
+})
+
+const handleLink = () => {
+  menuCtx?.selectItem(index.value)
+  foldColumnSecondIfNeeded()
+  nextTick(() => {
+    const routePath = props.itemOrMenu.path
+    const target = props.itemOrMenu.meta.target
+    const fullscreen = props.itemOrMenu.meta.fullscreen
+
+    if (target === '_blank') {
+      if (isExternal(routePath)) {
+        window.open(routePath)
+        router.push('/redirect')
+      } else if (route.path !== routePath) isHashRouterMode ? window.open(`#${routePath}`) : window.open(routePath)
+      router.push('/redirect')
+    } else {
+      if (isExternal(routePath)) globalThis.location.href = routePath
+      else if (route.path !== routePath) {
+        if (device.value === 'mobile') foldSideBar()
+        router.push(props.itemOrMenu.path)
+      }
+    }
+
+    setTimeout(() => {
+      if (fullscreen) enter()
+      else exit()
+    }, 1000)
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-route-menu-item {
+  position: relative;
+  list-style: none;
+  cursor: pointer;
+
+
+  &__inner {
+    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));
+    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-item__text {
+        color: #fff !important;
+      }
+    }
+
+    .qiu-icon,
+    [class*='ri-'] {
+      flex-shrink: 0;
+      font-size: 16px;
+      line-height: 1;
+      color: inherit;
+    }
+  }
+
+  &.is-active > &__inner {
+    color: #fff !important;
+    background-color: var(--qiu-color-primary);
+
+    .qiu-icon,
+    [class*='ri-'],
+    .qiu-route-menu-item__text {
+      color: #fff !important;
+    }
+  }
+
+  &__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;
+  }
+
+  &__text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    flex-shrink: 0;
+    border-radius: 999px !important;
+  }
+
+  &__dot {
+    position: absolute !important;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    margin: 0 !important;
+  }
+}
+
+/* 风格2：实心深色胶囊 */
+:deep(.qiu-menu-tag--dark.qiu-tag--info) {
+  color: #fff;
+  background: #1f1f1f;
+  border-color: #1f1f1f;
+}
+
+/* 风格1：描边胶囊 */
+:deep(.qiu-menu-tag--plain.qiu-tag--info) {
+  color: #1f1f1f;
+  background: transparent;
+  border-color: #1f1f1f;
+}
+
+.qiu-route-menu-item.is-active > .qiu-route-menu-item__inner,
+.qiu-route-menu-item__inner: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 到 body：收起态右侧 tips（带指向三角） */
+.qiu-route-menu-item__tip {
+  position: relative;
+  z-index: 4100;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 96px;
+  max-width: 260px;
+  padding: 10px 14px;
+  color: var(--qiu-text-color-primary, #303133);
+  white-space: nowrap;
+  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 4px 12px rgba(0, 0, 0, 0.12));
+}
+
+.qiu-route-menu-item__tip-arrow {
+  position: absolute;
+  top: 50%;
+  left: -6px;
+  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);
+  transform: translateY(-50%) rotate(-45deg);
+}
+
+.qiu-route-menu-item__tip-title {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+}
+</style>