vome-core 0.1.82 → 0.1.83

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

@@ -1,187 +0,0 @@
-<template>
-  <aside v-if="!browser.isMini" class="vm-sidebar" :class="{ 'is-collapsed': collapsed }">
-    <div class="vm-sidebar__brand">
-      <img :src="logoSrc" alt="" class="vm-sidebar__logo" />
-      <span v-if="!collapsed" class="vm-sidebar__title">{{ appName }}</span>
-    </div>
-    <vm-sidebar-nav :menus="user.navMenus" :collapsed="collapsed" />
-  </aside>
-
-  <!-- 移动端抽屉：Sheet 传送到 body，样式用下方非 scoped 全局类 -->
-  <Sheet :open="app.mobileOpen" @update:open="app.setMobileOpen">
-    <SheetContent side="left" class="vm-sidebar-sheet">
-      <SheetHeader class="vm-sidebar-sheet__head">
-        <img :src="logoSrc" alt="" class="vm-sidebar-sheet__logo" />
-        <SheetTitle class="vm-sidebar-sheet__title">{{ appName }}</SheetTitle>
-      </SheetHeader>
-      <div class="vm-sidebar-sheet__nav">
-        <vm-sidebar-nav :menus="user.navMenus" mobile />
-      </div>
-    </SheetContent>
-  </Sheet>
-</template>
-
-<script setup lang="ts">
-import { getAdminShellBranding } from '../../lib/shell'
-
-defineOptions({ name: 'vm-app-sidebar' })
-
-const app = useAppStore()
-const user = useUserStore()
-const route = useRoute()
-const { browser } = useBrowser()
-
-const collapsed = computed(() => !browser.isMini && app.sidebarFold)
-const shell = getAdminShellBranding()
-/** 彩底侧栏始终用浅色 logo */
-const logoSrc = shell.logoLight
-const appName = computed(() => shell.appName)
-
-// 回到桌面断点时关掉抽屉；勿在 isMini 下监听 screen 变化强关（开抽屉去滚动条会触发断点抖动）
-watch(
-  () => browser.isMini,
-  (mini) => {
-    if (!mini) app.setMobileOpen(false)
-  },
-)
-
-watch(
-  () => route.path,
-  () => {
-    if (browser.isMini) app.setMobileOpen(false)
-  },
-)
-</script>
-
-<style lang="scss" scoped>
-.vm-sidebar {
-  position: relative;
-  z-index: 20;
-  display: flex;
-  width: 268px;
-  height: 100%;
-  flex-shrink: 0;
-  flex-direction: column;
-  overflow: visible;
-  background: var(--sidebar);
-  color: var(--sidebar-foreground);
-  transition: width 0.2s ease;
-
-  &.is-collapsed {
-    width: 80px;
-    overflow: visible;
-
-    .vm-sidebar__logo {
-      height: 28px;
-    }
-  }
-}
-
-.vm-sidebar__brand {
-  display: flex;
-  height: 84px;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 12px;
-  padding: 0 14px;
-
-  .is-collapsed & {
-    justify-content: center;
-    padding: 0;
-  }
-}
-
-.vm-sidebar__logo {
-  height: 24px;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-.vm-sidebar__title {
-  display: flex;
-  height: 60px;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  /* 与 60px logo 视觉同高（大写字面接近 logo） */
-  font-size: 28px !important;
-  font-weight: 1000 !important;
-  line-height: 1 !important;
-  letter-spacing: -0.04em;
-  color: #fff !important;
-}
-</style>
-
-<!-- Sheet 经 Portal 挂到 body，scoped 无法稳定命中，必须用全局类 -->
-<style lang="scss">
-.vm-sidebar-sheet {
-  width: min(280px, 85vw) !important;
-  max-width: 85vw !important;
-  height: 100% !important;
-  padding: 0 !important;
-  gap: 0 !important;
-  border: none !important;
-  background: var(--sidebar) !important;
-  color: #fff !important;
-  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18) !important;
-
-  /* 关闭按钮：蓝底上用白 */
-  > button {
-    color: rgba(255, 255, 255, 0.92) !important;
-    opacity: 1;
-
-    &:hover {
-      opacity: 0.85;
-      background: rgba(255, 255, 255, 0.12);
-    }
-  }
-}
-
-.vm-sidebar-sheet__head {
-  display: flex !important;
-  height: 64px;
-  flex-shrink: 0;
-  flex-direction: row !important;
-  align-items: center;
-  gap: 10px;
-  padding: 0 44px 0 16px;
-  margin: 0 !important;
-  text-align: left !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-}
-
-.vm-sidebar-sheet__logo {
-  height: 28px;
-  flex-shrink: 0;
-  object-fit: contain;
-}
-
-.vm-sidebar-sheet__title {
-  display: flex !important;
-  height: auto !important;
-  align-items: center;
-  overflow: hidden;
-  font-size: 22px !important;
-  font-weight: 1000 !important;
-  line-height: 1 !important;
-  letter-spacing: -0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: #fff !important;
-}
-
-.vm-sidebar-sheet__nav {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  /* 深色侧栏滚动条用 token 覆盖全局色 */
-  --scrollbar-thumb: rgba(255, 255, 255, 0.35);
-  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.55);
-
-  .vm-nav {
-    height: 100%;
-  }
-}
-</style>

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

@@ -1,268 +0,0 @@
-<template>
-  <div
-    class="vm-flyout"
-    :class="{ 'is-nested': nested }"
-    :style="panelStyle"
-    @mouseenter="emit('enter')"
-    @mouseleave="emit('leave')"
-  >
-    <div
-      v-for="node in items"
-      :key="node.id"
-      class="vm-flyout__row"
-      :class="{
-        'is-active': isActiveLeaf(node) || containsActive(node),
-        'is-open': openId === node.id,
-      }"
-      @mouseenter="onRowEnter(node)"
-      @mouseleave="onRowLeave(node)"
-    >
-      <RouterLink
-        v-if="isLeaf(node) && node.router"
-        :to="node.router"
-        class="vm-flyout__link"
-        @click="onLeafClick(node)"
-      >
-        <vm-ri-icon v-if="hasIcon(node)" :name="iconOf(node)" class="vm-flyout__icon" />
-        <span class="vm-flyout__label">{{ menuLabelOf(node) }}</span>
-      </RouterLink>
-
-      <button v-else type="button" class="vm-flyout__link">
-        <vm-ri-icon v-if="hasIcon(node)" :name="iconOf(node)" class="vm-flyout__icon" />
-        <span class="vm-flyout__label">{{ menuLabelOf(node) }}</span>
-        <i class="ri-arrow-right-s-line vm-flyout__chevron" />
-      </button>
-
-      <vm-sidebar-flyout
-        v-if="isDir(node) && openId === node.id"
-        nested
-        :items="kids(node)"
-        :parent-id="node.id"
-        @enter="clearLeaveTimer"
-        @leave="scheduleCloseRow"
-        @navigate="emit('navigate')"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useLocaleStore } from '../../stores/locale'
-
-defineOptions({ name: 'vm-sidebar-flyout' })
-
-const props = defineProps<{
-  items: MenuTreeNode[]
-  /** 浮窗相对视口定位（根级）；嵌套级不传 */
-  anchor?: { top: number; left: number }
-  nested?: boolean
-  parentId?: number | null
-}>()
-
-const emit = defineEmits<{
-  enter: []
-  leave: []
-  navigate: []
-}>()
-
-const locale = useLocaleStore()
-function menuLabelOf(node: MenuTreeNode) {
-  return locale.tMenu(node)
-}
-
-const route = useRoute()
-
-const PENDING_KEY = 'sidebar-pending-leaf'
-const DEEP_KEY = 'sidebar-deep-focus'
-const pendingLeafId = inject<Ref<number | null>>(PENDING_KEY)!
-const deepFocusId = inject<Ref<number | null>>(DEEP_KEY)!
-if (!pendingLeafId || !deepFocusId) {
-  throw new Error('[vm-sidebar-flyout] 缺少 sidebar provide')
-}
-
-const openId = ref<number | null>(null)
-let leaveTimer: ReturnType<typeof setTimeout> | null = null
-
-const panelStyle = computed(() => {
-  if (props.nested || !props.anchor) return undefined
-  return {
-    top: `${props.anchor.top}px`,
-    left: `${props.anchor.left}px`,
-  } as Record<string, string>
-})
-
-function kids(item: MenuTreeNode) {
-  return (item.children ?? []).filter(
-    (c) => c.isShow !== false && Number(c.type) !== 2,
-  )
-}
-
-function isDir(item: MenuTreeNode) {
-  return Number(item.type) === 0 || kids(item).length > 0
-}
-
-function isLeaf(item: MenuTreeNode) {
-  return Number(item.type) === 1 && Boolean(item.router)
-}
-
-/** 仅配置了 icon 才展示，不占空白位 */
-function hasIcon(item: MenuTreeNode) {
-  return Boolean(item.icon && String(item.icon).trim())
-}
-
-function iconOf(item: MenuTreeNode) {
-  const raw = String(item.icon || '').trim()
-  return raw.startsWith('ri-') ? raw : `ri-${raw}`
-}
-
-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 kids(item).some((c) => containsActive(c))
-}
-
-function clearLeaveTimer() {
-  if (leaveTimer) {
-    clearTimeout(leaveTimer)
-    leaveTimer = null
-  }
-}
-
-function onRowEnter(node: MenuTreeNode) {
-  clearLeaveTimer()
-  if (isDir(node)) openId.value = node.id
-  else openId.value = null
-}
-
-function onRowLeave(node: MenuTreeNode) {
-  if (!isDir(node)) return
-  leaveTimer = setTimeout(() => {
-    if (openId.value === node.id) openId.value = null
-  }, 120)
-}
-
-function scheduleCloseRow() {
-  leaveTimer = setTimeout(() => {
-    openId.value = null
-  }, 120)
-}
-
-function onLeafClick(node: MenuTreeNode) {
-  pendingLeafId.value = node.id
-  deepFocusId.value = props.parentId ?? null
-  emit('navigate')
-}
-
-onBeforeUnmount(() => clearLeaveTimer())
-</script>
-
-<style lang="scss" scoped>
-.vm-flyout {
-  position: fixed;
-  z-index: 80;
-  box-sizing: border-box;
-  min-width: 168px;
-  max-width: 240px;
-  padding: 6px;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: 0 10px 30px rgba(40, 50, 120, 0.14);
-
-  /* 嵌套级：相对当前行右侧展开，级间留缝 */
-  &.is-nested {
-    position: absolute;
-    top: -6px;
-    left: calc(100% + 10px);
-    margin: 0;
-
-    /* 透明桥：盖住级间空隙，鼠标移动不中断 */
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: -10px;
-      width: 10px;
-    }
-  }
-}
-
-:global(.dark) .vm-flyout {
-  background: var(--card);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-}
-
-.vm-flyout__row {
-  position: relative;
-}
-
-.vm-flyout__link {
-  display: flex;
-  width: 100%;
-  height: 38px;
-  align-items: center;
-  gap: 8px;
-  box-sizing: border-box;
-  padding: 0 10px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: var(--foreground);
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.12s ease;
-
-  &:hover,
-  .vm-flyout__row.is-open > & {
-    background: var(--muted);
-  }
-
-  .vm-flyout__row.is-active > & {
-    color: var(--brand);
-    background: var(--brand-soft);
-  }
-}
-
-.vm-flyout__icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 1;
-}
-
-.vm-flyout__label {
-  display: inline-flex;
-  flex: 1;
-  min-width: 0;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1;
-  text-align: left;
-}
-
-.vm-flyout__chevron {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  align-items: center;
-  justify-content: center;
-  margin-left: 4px;
-  font-size: 16px;
-  line-height: 1;
-  opacity: 0.45;
-}
-</style>