vome-core 0.1.76 → 0.1.78

package/dist/admin/components/layout/vm-sidebar-nav-item.vue

@@ -0,0 +1,490 @@
+<template>
+  <div>
+    <!-- ===== 迷你侧栏：图标轨 + 多级浮窗 ===== -->
+    <template v-if="collapsed">
+      <!-- 叶子：直接跳转 -->
+      <RouterLink
+        v-if="isLeaf && item.router"
+        :to="item.router"
+        class="vm-nav-item is-collapsed"
+        :class="{ 'is-active': shownActive }"
+        :title="menuLabel"
+        @click="onLeafClick"
+      >
+        <span class="vm-nav-item__icon-slot">
+          <vm-ri-icon v-if="hasIcon(item)" :name="iconName(item)" class="vm-nav-item__icon" />
+        </span>
+      </RouterLink>
+
+      <!-- 目录：悬停弹出多级浮窗（无子项仍显示图标） -->
+      <div
+        v-else-if="isDir"
+        ref="miniRef"
+        class="vm-nav-mini"
+        @mouseenter="openMiniFlyout"
+        @mouseleave="scheduleCloseMini"
+      >
+        <button
+          type="button"
+          class="vm-nav-item is-collapsed is-dir"
+          :class="{ 'is-active': activeBranch, 'is-branch': activeBranch }"
+          :title="menuLabel"
+        >
+          <span class="vm-nav-item__icon-slot">
+            <vm-ri-icon v-if="hasIcon(item)" :name="iconName(item)" class="vm-nav-item__icon" />
+          </span>
+        </button>
+
+        <Teleport to="body">
+          <vm-sidebar-flyout
+            v-if="miniOpen && children.length"
+            :items="children"
+            :parent-id="item.id"
+            :anchor="miniAnchor"
+            @enter="clearMiniTimer"
+            @leave="scheduleCloseMini"
+            @navigate="closeMiniNow"
+          />
+        </Teleport>
+      </div>
+    </template>
+
+    <!-- ===== 展开侧栏 ===== -->
+    <template v-else>
+      <RouterLink
+        v-if="isLeaf && item.router"
+        :to="item.router"
+        class="vm-nav-item"
+        :class="{ 'is-active': shownActive, 'is-mobile': mobile }"
+        :style="{ paddingLeft: `${pad}px` }"
+        @click="onLeafClick"
+      >
+        <span
+          v-if="!mobile"
+          class="vm-nav-item__notch vm-nav-item__notch--top"
+          aria-hidden="true"
+        />
+        <span
+          v-if="!mobile"
+          class="vm-nav-item__notch vm-nav-item__notch--bottom"
+          aria-hidden="true"
+        />
+        <span class="vm-nav-item__icon-slot">
+          <vm-ri-icon v-if="hasIcon(item)" :name="iconName(item)" class="vm-nav-item__icon" />
+        </span>
+        <span class="vm-nav-item__label">{{ menuLabel }}</span>
+      </RouterLink>
+
+      <div
+        v-else-if="isDir"
+        class="vm-nav-group"
+        :class="{ 'is-deep': isDeepGroup }"
+      >
+        <button
+          type="button"
+          class="vm-nav-item is-dir"
+          :class="{ 'is-branch': activeBranch, 'is-mobile': mobile }"
+          :style="{ paddingLeft: `${pad}px` }"
+          @click="toggle"
+        >
+          <span class="vm-nav-item__icon-slot">
+            <vm-ri-icon v-if="hasIcon(item)" :name="iconName(item)" class="vm-nav-item__icon" />
+          </span>
+          <span class="vm-nav-item__label">{{ menuLabel }}</span>
+          <i
+            class="ri-arrow-down-s-line vm-nav-item__arrow"
+            :class="{ 'is-open': open }"
+          />
+        </button>
+        <div v-show="open" class="vm-nav-group__children">
+          <vm-sidebar-nav-item
+            v-for="child in children"
+            :key="child.id"
+            :item="child"
+            :depth="depth + 1"
+            :parent-id="item.id"
+            :collapsed="false"
+            :mobile="mobile"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocaleStore } from '../../stores/locale'
+
+defineOptions({ name: 'vm-sidebar-nav-item' })
+
+const props = defineProps<{
+  item: MenuTreeNode
+  depth: number
+  parentId?: number | null
+  collapsed?: boolean
+  /** 移动端抽屉：选中用内嵌白底，不用右侧开口 */
+  mobile?: boolean
+}>()
+
+const locale = useLocaleStore()
+const menuLabel = computed(() => locale.tMenu(props.item))
+
+const route = useRoute()
+
+const OPEN_KEY = 'sidebar-open-ids'
+const PENDING_KEY = 'sidebar-pending-leaf'
+const DEEP_KEY = 'sidebar-deep-focus'
+const openIds = inject<Ref<Set<number>>>(OPEN_KEY)!
+const pendingLeafId = inject<Ref<number | null>>(PENDING_KEY)!
+const deepFocusId = inject<Ref<number | null>>(DEEP_KEY)!
+if (!openIds || !pendingLeafId || !deepFocusId) {
+  throw new Error('[vm-sidebar-nav-item] 缺少 sidebar provide')
+}
+
+const miniRef = ref<HTMLElement | null>(null)
+const miniOpen = ref(false)
+const miniAnchor = ref({ top: 0, left: 0 })
+let miniTimer: ReturnType<typeof setTimeout> | null = null
+
+function hasIcon(item: MenuTreeNode) {
+  return Boolean(item.icon && String(item.icon).trim())
+}
+
+function iconName(item: MenuTreeNode) {
+  const raw = String(item.icon || '').trim()
+  return raw.startsWith('ri-') ? raw : `ri-${raw}`
+}
+
+function visibleChildren(item: MenuTreeNode) {
+  return (item.children ?? []).filter(
+    (c) => c.isShow !== false && Number(c.type) !== 2,
+  )
+}
+
+const children = computed(() => visibleChildren(props.item))
+const isDir = computed(
+  () => Number(props.item.type) === 0 || children.value.length > 0,
+)
+const isLeaf = computed(
+  () => Number(props.item.type) === 1 && Boolean(props.item.router),
+)
+
+function isActiveLeaf(item: MenuTreeNode) {
+  if (!item.router) return false
+  return route.path === item.router || route.path.startsWith(`${item.router}/`)
+}
+
+function containsActive(item: MenuTreeNode): boolean {
+  if (isActiveLeaf(item)) return true
+  return visibleChildren(item).some((c) => containsActive(c))
+}
+
+function containsId(item: MenuTreeNode, id: number): boolean {
+  if (item.id === id) return true
+  return visibleChildren(item).some((c) => containsId(c, id))
+}
+
+const activeLeaf = computed(() => isActiveLeaf(props.item))
+const shownActive = computed(
+  () => activeLeaf.value || pendingLeafId.value === props.item.id,
+)
+const activeBranch = computed(() => containsActive(props.item))
+const open = computed(() => openIds!.value.has(props.item.id))
+const isDeepGroup = computed(
+  () => !props.collapsed && open.value && deepFocusId.value === props.item.id,
+)
+
+function onLeafClick() {
+  pendingLeafId.value = props.item.id
+  deepFocusId.value = props.parentId ?? null
+}
+
+function ensureOpenAlongActive(item: MenuTreeNode) {
+  if (!containsActive(item)) return
+  if (isDir.value) {
+    openIds!.value = new Set(openIds!.value).add(item.id)
+  }
+  for (const c of children.value) {
+    if (containsActive(c) && (Number(c.type) === 0 || visibleChildren(c).length)) {
+      openIds!.value = new Set(openIds!.value).add(c.id)
+    }
+  }
+}
+
+watch(
+  () => route.path,
+  () => ensureOpenAlongActive(props.item),
+  { immediate: true },
+)
+
+function toggle() {
+  const next = new Set(openIds!.value)
+  const willOpen = !next.has(props.item.id)
+  if (willOpen) {
+    next.add(props.item.id)
+    deepFocusId.value = props.item.id
+  } else {
+    next.delete(props.item.id)
+    const focus = deepFocusId.value
+    if (focus != null && containsId(props.item, focus)) {
+      deepFocusId.value = null
+    }
+  }
+  openIds!.value = next
+}
+
+function clearMiniTimer() {
+  if (miniTimer) {
+    clearTimeout(miniTimer)
+    miniTimer = null
+  }
+}
+
+function openMiniFlyout() {
+  clearMiniTimer()
+  const el = miniRef.value
+  if (!el) return
+  const btn = el.querySelector('.vm-nav-item') as HTMLElement | null
+  const btnRect = (btn || el).getBoundingClientRect()
+  // 按钮在侧栏内居中，必须用侧栏右边缘，否则浮窗会盖住图标
+  const sidebar = el.closest('.vm-sidebar') as HTMLElement | null
+  const sideRight = sidebar?.getBoundingClientRect().right ?? btnRect.right
+  miniAnchor.value = {
+    top: Math.round(btnRect.top),
+    left: Math.round(sideRight + 12),
+  }
+  miniOpen.value = true
+}
+
+function scheduleCloseMini() {
+  clearMiniTimer()
+  miniTimer = setTimeout(() => {
+    miniOpen.value = false
+  }, 140)
+}
+
+function closeMiniNow() {
+  clearMiniTimer()
+  miniOpen.value = false
+}
+
+onBeforeUnmount(() => clearMiniTimer())
+
+const pad = computed(() => 12 + props.depth * 14)
+</script>
+
+<style lang="scss" scoped>
+$open: 14px;
+$gutter: 10px;
+
+.vm-nav-mini {
+  position: relative;
+}
+
+.vm-nav-item {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  width: 100%;
+  height: 44px;
+  align-items: center;
+  gap: 10px;
+  box-sizing: border-box;
+  padding-right: 12px;
+  margin: 0;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.95);
+  font-size: 14px;
+  font-weight: 700 !important;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: none;
+
+  .vm-nav-item__icon-slot,
+  .vm-nav-item__icon,
+  .vm-nav-item__label,
+  .vm-nav-item__arrow {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:hover:not(.is-active)::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.16);
+    pointer-events: none;
+  }
+
+  &:active:not(.is-active)::before {
+    background: rgba(255, 255, 255, 0.24);
+  }
+
+  &.is-collapsed {
+    width: 44px;
+    height: 44px;
+    justify-content: center;
+    padding: 0;
+    margin: 0 auto;
+    border-radius: 12px;
+  }
+
+  /* 桌面展开：右侧开口贴内容区 */
+  &.is-active:not(.is-collapsed):not(.is-mobile) {
+    z-index: 1;
+    width: calc(100% + #{$gutter});
+    margin-right: -$gutter;
+    border-radius: $open 0 0 $open;
+    background: var(--background);
+    color: var(--brand);
+
+    .vm-nav-item__icon,
+    .vm-nav-item__label {
+      color: var(--brand);
+    }
+
+    .vm-nav-item__notch {
+      display: block;
+    }
+  }
+
+  /* 移动端抽屉：内嵌白底圆角，避免开口溢出 Sheet */
+  &.is-active.is-mobile:not(.is-collapsed) {
+    z-index: 1;
+    width: 100%;
+    margin-right: 0;
+    border-radius: 12px;
+    background: #fff;
+    color: var(--brand);
+
+    .vm-nav-item__icon,
+    .vm-nav-item__label {
+      color: var(--brand);
+    }
+
+    .vm-nav-item__notch {
+      display: none;
+    }
+  }
+
+  &.is-active.is-collapsed,
+  &.is-branch.is-collapsed {
+    width: 44px;
+    margin-right: auto;
+    background: #fff;
+    color: var(--brand);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+
+    .vm-nav-item__notch {
+      display: none;
+    }
+
+    .vm-nav-item__icon {
+      color: var(--brand);
+    }
+  }
+
+  &.is-dir.is-branch:not(.is-active):not(.is-collapsed) {
+    color: #fff;
+  }
+}
+
+.vm-nav-item__notch {
+  display: none;
+  position: absolute;
+  right: 0;
+  width: $open;
+  height: $open;
+  background: transparent;
+  pointer-events: none;
+
+  &--top {
+    top: -$open;
+    border-bottom-right-radius: $open;
+    box-shadow: 5px 5px 0 5px var(--background);
+  }
+
+  &--bottom {
+    bottom: -$open;
+    border-top-right-radius: $open;
+    box-shadow: 5px -5px 0 5px var(--background);
+  }
+}
+
+.vm-nav-item__icon-slot {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.vm-nav-item__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+  opacity: 0.95;
+}
+
+.vm-nav-item__label {
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  font-synthesis: weight;
+}
+
+.vm-nav-item__arrow {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-right: 2px;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  opacity: 0.75;
+  transition: transform 0.2s ease;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.vm-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+  border-radius: 12px;
+
+  &.is-deep {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.vm-nav-group__children {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+</style>

package/dist/admin/components/layout/vm-sidebar-nav.vue

@@ -0,0 +1,104 @@
+<template>
+  <nav class="vm-nav" :class="{ 'is-collapsed': collapsed && !mobile }">
+    <vm-sidebar-nav-item
+      v-for="item in visibleMenus"
+      :key="item.id"
+      :item="item"
+      :depth="0"
+      :parent-id="null"
+      :collapsed="collapsed && !mobile"
+      :mobile="mobile"
+    />
+  </nav>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-sidebar-nav' })
+
+const props = defineProps<{
+  menus: MenuTreeNode[]
+  collapsed?: boolean
+  /** 移动端抽屉：禁用右侧开口选中态 */
+  mobile?: boolean
+}>()
+
+const route = useRoute()
+const openIds = ref(new Set<number>())
+/** 点击瞬间先开口，等路由落地后再清，避免闪烁 */
+const pendingLeafId = ref<number | null>(null)
+/**
+ * 加深背景的目录 id：
+ * - 展开目录 → 该目录
+ * - 切到页面 → 改为该页面的直接父目录
+ */
+const deepFocusId = ref<number | null>(null)
+
+provide('sidebar-open-ids', openIds)
+provide('sidebar-pending-leaf', pendingLeafId)
+provide('sidebar-deep-focus', deepFocusId)
+
+const visibleMenus = computed(() =>
+  props.menus.filter((m) => m.isShow !== false && Number(m.type) !== 2),
+)
+
+function visibleChildren(item: MenuTreeNode) {
+  return (item.children ?? []).filter(
+    (c) => c.isShow !== false && Number(c.type) !== 2,
+  )
+}
+
+function isActivePath(routerPath: string) {
+  return route.path === routerPath || route.path.startsWith(`${routerPath}/`)
+}
+
+/** 当前激活叶子页的直接父目录 id */
+function findActiveLeafParent(
+  items: MenuTreeNode[],
+  parentId: number | null = null,
+): number | null | undefined {
+  for (const item of items) {
+    const kids = visibleChildren(item)
+    if (Number(item.type) === 1 && item.router && isActivePath(item.router)) {
+      return parentId
+    }
+    if (kids.length) {
+      const hit = findActiveLeafParent(kids, item.id)
+      if (hit !== undefined) return hit
+    }
+  }
+  return undefined
+}
+
+watch(
+  () => [route.path, props.menus] as const,
+  () => {
+    pendingLeafId.value = null
+    const parentId = findActiveLeafParent(visibleMenus.value)
+    // undefined = 未找到叶子；null = 顶级叶子无父级
+    if (parentId !== undefined) {
+      deepFocusId.value = parentId
+    }
+  },
+  { immediate: true, deep: true },
+)
+</script>
+
+<style lang="scss" scoped>
+$gutter: 10px;
+
+.vm-nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 8px $gutter 24px;
+
+  &.is-collapsed {
+    align-items: center;
+    overflow: visible;
+    padding: 8px $gutter 24px;
+  }
+}
+</style>