foucui 1.0.1 → 2.0.0

package/components/QiuMenu/components/QiuMenuItem.vue

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