@quiteer/naive-extra 0.0.1

package/src/components/layout/context.ts

@@ -0,0 +1,189 @@
+import type { MenuOption } from 'naive-ui'
+import type { ComputedRef, Reactive, Ref } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import type { Props } from './props'
+import type { LayoutType } from './types'
+import { computed, inject, provide, reactive, ref, toRef, unref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { normalizeAndRedirect } from '../../utils/transformRoutes'
+import { BREADCRUMB_LAYOUT_TYPES } from './const'
+
+export interface LayoutEmits {
+  /** @description 更新是否折叠侧边栏 */
+  updateIsCollapsed: (value: boolean) => void
+  /** @description 更新反色样式 */
+  updateInverted: (value: boolean) => void
+  /** @description 更新当前激活的路由键 */
+  updateActiveKey: (value: string) => void
+}
+
+export const LayoutContextKey = Symbol('LayoutContext')
+export const LayoutEmitsKey = Symbol('LayoutEmits')
+
+export interface LayoutContextState extends Props {
+  mainActiveKey: string
+  subActiveKey: string
+  hasSiderLayout: boolean
+  hasBreadcrumb: boolean
+  isLeftMain: boolean
+  isTopMain: boolean
+  sideWidth: number
+  accordion?: boolean
+}
+
+export function provideLayoutContext(props: Required<Props>, extra?: { hasSiderLayout: ComputedRef<boolean> }) {
+  const route = useRoute()
+  const mainActiveKey = ref(props.activeKey)
+  const subActiveKey = ref(props.activeKey)
+
+  // 内部维护一个可变的布局类型，初始值为 props.type
+  const internalLayoutType = ref<LayoutType>(props.type)
+
+  // 最终使用的布局类型：优先使用路由 meta.layout，否则使用内部状态
+  const effectiveLayoutType = computed(() => (route?.meta?.layout as LayoutType) || internalLayoutType.value)
+
+  // 最终使用的激活键：优先使用路由 meta.activeMenu，否则使用 props.activeKey
+  const effectiveActiveKey = computed(() => (route?.meta?.activeMenu as string) || props.activeKey)
+
+  // 监听 props.type 的变化并同步到内部状态
+  watch(() => props.type, (newType) => {
+    internalLayoutType.value = newType
+  })
+
+  const hasBreadcrumb = computed(() => BREADCRUMB_LAYOUT_TYPES.includes(unref(effectiveLayoutType)))
+
+  const isLeftMain = computed(() => unref(effectiveLayoutType).includes('side'))
+
+  const isTopMain = computed(() => unref(effectiveLayoutType).includes('top'))
+
+  const sideWidth = computed(() => props.siderWidth)
+
+  const context = reactive({
+    // 使用 effectiveLayoutType 和 effectiveActiveKey 替代直接使用 props
+    type: effectiveLayoutType,
+    bordered: toRef(props, 'bordered'),
+    inverted: toRef(props, 'inverted'),
+    isCollapsed: toRef(props, 'isCollapsed'),
+    headerHeight: toRef(props, 'headerHeight'),
+    footerHeight: toRef(props, 'footerHeight'),
+    showFooter: toRef(props, 'showFooter'),
+    siderWidth: toRef(props, 'siderWidth'),
+    siderMixedWidth: toRef(props, 'siderMixedWidth'),
+    collapsedWidth: toRef(props, 'collapsedWidth'),
+    activeKey: effectiveActiveKey,
+    menuOptions: toRef(props, 'menuOptions'),
+    accordion: toRef(props, 'accordion'),
+    baseRoutes: computed(() => normalizeAndRedirect(unref((props as any).baseRoutes))),
+    mainActiveKey,
+    subActiveKey,
+    hasSiderLayout: extra?.hasSiderLayout,
+    hasBreadcrumb,
+    isLeftMain,
+    isTopMain,
+    sideWidth
+  })
+
+  provide(LayoutContextKey, context)
+  return context
+}
+
+export interface UseContextReturn extends LayoutEmits {
+  ctx: Reactive<LayoutContextState>
+  type: ComputedRef<LayoutType>
+  bordered: ComputedRef<boolean>
+  inverted: ComputedRef<boolean>
+  isCollapsed: ComputedRef<boolean>
+  headerHeight: ComputedRef<number>
+  footerHeight: ComputedRef<number>
+  showFooter: ComputedRef<boolean>
+  siderWidth: ComputedRef<number>
+  siderMixedWidth: ComputedRef<number>
+  collapsedWidth: ComputedRef<number>
+  activeKey: ComputedRef<string>
+  subActiveKey: Ref<string>
+  mainActiveKey: Ref<string>
+  menuOptions: ComputedRef<MenuOption[]>
+  accordion: ComputedRef<boolean>
+  baseRoutes: ComputedRef<RouteRecordRaw[]>
+  mainMenuOptions: ComputedRef<MenuOption[]>
+  subMenuOptions: ComputedRef<MenuOption[]>
+  hasSiderLayout: Ref<boolean>
+  hasBreadcrumb: Ref<boolean>
+  isLeftMain: ComputedRef<boolean>
+  isTopMain: ComputedRef<boolean>
+  sideWidth: ComputedRef<number>
+}
+
+export function useContext(): UseContextReturn {
+  const context = inject<Reactive<LayoutContextState>>(LayoutContextKey)!
+  const layoutEmit = inject<Reactive<LayoutEmits>>(LayoutEmitsKey)!
+
+  const type = computed(() => unref(context.type)!)
+  const bordered = computed(() => unref(context.bordered)!)
+  const inverted = computed(() => unref(context.inverted)!)
+  const isCollapsed = computed(() => unref(context.isCollapsed)!)
+  const headerHeight = computed(() => unref(context.headerHeight)!)
+  const footerHeight = computed(() => unref(context.footerHeight)!)
+  const showFooter = computed(() => unref(context.showFooter)!)
+  const siderWidth = computed(() => unref(context.siderWidth)!)
+  const siderMixedWidth = computed(() => unref(context.siderMixedWidth)!)
+  const collapsedWidth = computed(() => unref(context.collapsedWidth)!)
+  const baseRoutes = computed(() => unref((context as any).baseRoutes) ?? []) as ComputedRef<RouteRecordRaw[]>
+
+  const activeKey = computed(() => unref(context.activeKey)!)
+  const menuOptions = computed(() => unref(context.menuOptions)!)
+  const accordion = computed(() => unref(context.accordion)!)
+
+  const mainActiveKey = toRef(context, 'mainActiveKey')
+  const subActiveKey = toRef(context, 'subActiveKey')
+
+  const hasSiderLayout = computed(() => unref(context.hasSiderLayout))
+  const hasBreadcrumb = computed(() => unref(context.hasBreadcrumb))
+  const isLeftMain = computed(() => unref(context.isLeftMain))
+  const isTopMain = computed(() => unref(context.isTopMain))
+
+  const sideWidth = computed(() => unref(context.sideWidth))
+
+  const mainMenuOptions = computed(() => {
+    const opts = unref(menuOptions) as any[] || []
+    return opts.map(o => ({ key: o.key, label: o.label, icon: o.icon, href: o.href }))
+  })
+
+  const subMenuOptions = computed(() => {
+    const changeRange = mainMenuOptions.value.map(o => o.key)
+    const opts = unref(menuOptions) as any[] || []
+    const key = String(unref(mainActiveKey) ?? '')
+    const topKey = changeRange.find(k => key === k || key.startsWith(`${k}/`)) ?? changeRange[0] ?? ''
+    const parent = (opts || []).find(o => o.key === topKey)
+
+    return parent?.children ?? []
+  })
+
+  return {
+    ctx: context,
+    type,
+    bordered,
+    inverted,
+    isCollapsed,
+    headerHeight,
+    footerHeight,
+    showFooter,
+    siderWidth,
+    siderMixedWidth,
+    collapsedWidth,
+    activeKey,
+    subActiveKey,
+    mainActiveKey,
+    menuOptions,
+    accordion,
+    baseRoutes,
+    mainMenuOptions,
+    subMenuOptions,
+    hasSiderLayout,
+    hasBreadcrumb,
+    isLeftMain,
+    isTopMain,
+    sideWidth,
+    ...layoutEmit
+  } as UseContextReturn
+}

package/src/components/layout/index.ts

@@ -0,0 +1,8 @@
+import QuiLayout from './index.vue'
+
+export { DEFAULT_LAYOUT_TYPE } from './const'
+
+export { QuiLayout }
+export type { Props as LayoutProps } from './props'
+
+export type { LayoutType, RouteMeta } from './types'

package/src/components/layout/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { Props } from './props'
+import type { LayoutType } from './types'
+import { computed, unref } from 'vue'
+import { useRoute } from 'vue-router'
+import { DEFAULT_LAYOUT_PROPS, SIDE_LAYOUT_TYPES } from './const'
+import { LayoutEmitsKey, provideLayoutContext } from './context'
+import AppFooter from './layout-parts/AppFooter.vue'
+import AppHeader from './layout-parts/AppHeader.vue'
+import AppMain from './layout-parts/AppMain.vue'
+import AppSidebar from './layout-parts/AppSidebar.vue'
+import LayoutTransition from './layout-parts/LayoutTransition.vue'
+
+const props = withDefaults(defineProps<Props>(), { ...DEFAULT_LAYOUT_PROPS, menuOptions: () => [], baseRoutes: () => [] })
+const emit = defineEmits<{
+  'update:isCollapsed': [value: boolean]
+  'update:inverted': [value: boolean]
+  'update:activeKey': [value: string]
+}>()
+
+const route = useRoute()
+const effectiveType = computed(() => (route?.meta?.layout as LayoutType) || props.type)
+const hasSiderLayout = computed(() => SIDE_LAYOUT_TYPES.includes(unref(effectiveType)))
+const isBlank = computed(() => unref(effectiveType) === 'blank')
+
+provideLayoutContext(props, { hasSiderLayout })
+provide(LayoutEmitsKey, {
+  updateIsCollapsed(value: boolean) {
+    emit('update:isCollapsed', value)
+  },
+  updateInverted(value: boolean) {
+    emit('update:inverted', value)
+  },
+  updateActiveKey(value: string) {
+    emit('update:activeKey', value)
+  }
+})
+</script>
+
+<template>
+  <n-layout :has-sider="hasSiderLayout" position="absolute" :native-scrollbar="false" :inverted="inverted">
+    <LayoutTransition mode="fade">
+      <AppSidebar v-if="hasSiderLayout">
+        <slot name="logo" />
+      </AppSidebar>
+    </LayoutTransition>
+
+    <LayoutTransition mode="height">
+      <AppHeader v-if="!isBlank">
+        <slot name="logo" />
+      </AppHeader>
+    </LayoutTransition>
+
+    <AppMain>
+      <slot />
+    </AppMain>
+
+    <LayoutTransition mode="height">
+      <AppFooter v-if="!isBlank && props.showFooter">
+        <slot name="footer" />
+      </AppFooter>
+    </LayoutTransition>
+  </n-layout>
+</template>

package/src/components/layout/layout-parts/AppBreadcrumb.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed, h } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const DEFAULT_ICON = 'icon-park-solid:web-page'
+
+const crumbs = computed(() => {
+  // 使用 route.matched 获取当前路由匹配到的所有嵌套路由记录
+  // 这天然支持 404、动态路由等所有已注册的路由
+  const matched = route.matched
+
+  // 过滤掉重定向路由或无意义的根路径（视情况而定，这里先不过滤，完全遵照用户指示）
+  // 通常我们过滤掉没有 meta.title 的布局路由，但用户要求“没有就取name或者path”，说明要尽可能展示
+
+  return matched
+    .filter(item => item.meta?.breadcrumb !== false) // 支持通过 meta.breadcrumb: false 隐藏
+    .map((item) => {
+      // 优先使用 meta 中的 icon，否则使用默认图标
+      const iconName = (item.meta?.icon as string) || DEFAULT_ICON
+      const icon = () => h(Icon, { icon: iconName, width: '18px', height: '18px' })
+
+      // 优先使用 meta.title，其次 name，最后 path
+      const label = (item.meta?.title as string) || (item.name as string) || item.path
+
+      // 获取当前层级的子路由，用于下拉菜单
+      // item 是 RouteRecordNormalized，它的 children 包含了所有子路由配置
+      const children = (item.children || [])
+        .filter(child => child.meta?.hideMenu !== true) // 过滤掉 hideMenu: true 的路由
+        .map((child) => {
+          const childIconName = (child.meta?.icon as string) || DEFAULT_ICON
+          const childIcon = () => h(Icon, { icon: childIconName, width: '18px', height: '18px' })
+          return {
+            label: (child.meta?.title as string) || (child.name as string) || child.path,
+            key: (child.name as string) || child.path, // 优先用 name 跳转
+            icon: childIcon
+          }
+        })
+
+      return {
+        label,
+        path: item.path, // 这里的 path 是绝对路径或匹配模式
+        name: item.name,
+        icon,
+        clickable: true, // 默认可点击
+        children
+      }
+    })
+    // 过滤掉 label 为空的项（防止空布局占位）
+    .filter(item => item.label)
+})
+
+function onSelectChild(key: string | number) {
+  // 查找目标路由
+  // 由于 key 可能是 name 或 path，我们需要在当前 crumbs 的 children 中寻找
+  // 但这里简单处理，直接尝试跳转
+  if (typeof key === 'string') {
+    // 尝试解析路由
+    try {
+      // 如果 key 是 name
+      router.push({ name: key }).catch(() => {
+        // 如果失败，尝试作为 path
+        router.push(key)
+      })
+    }
+    catch (_) {
+      router.push(key)
+    }
+  }
+}
+</script>
+
+<template>
+  <n-breadcrumb class="px-2 w-full">
+    <n-breadcrumb-item v-for="item in crumbs" :key="item.path">
+      <n-flex :size="4">
+        <component :is="item.icon" v-if="item.icon" />
+        <n-dropdown
+          v-if="item.children.length"
+          :options="item.children"
+          trigger="hover"
+          @select="onSelectChild"
+        >
+          <n-flex
+            align="center"
+            :class="item.clickable ? 'cursor-pointer' : 'cursor-default opacity-80'"
+          >
+            <component :is="item.label" v-if="typeof item.label === 'function'" />
+            <span v-else>{{ item.label }}</span>
+          </n-flex>
+        </n-dropdown>
+        <n-flex
+          v-else
+          align="center"
+          :class="item.clickable ? 'cursor-pointer' : 'cursor-default opacity-80'"
+        >
+          <component :is="item.label" v-if="typeof item.label === 'function'" />
+          <span v-else>{{ item.label }}</span>
+        </n-flex>
+      </n-flex>
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
+
+<style scoped></style>

package/src/components/layout/layout-parts/AppFooter.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { Slots } from 'vue'
+import { computed, useSlots } from 'vue'
+import { hasSlotContent } from '../../../share/slot'
+import { SIDE_LAYOUT_TYPES } from '../const'
+import { useContext } from '../context'
+
+const { bordered, inverted, footerHeight, sideWidth, type } = useContext()!
+const slots: Slots = useSlots()
+const hasDefaultSlot = computed<boolean>(() => hasSlotContent(slots.default))
+
+const footerStyles = computed(() => ({
+  height: `${unref(footerHeight)}px`,
+  left: SIDE_LAYOUT_TYPES.includes(unref(type)) ? `${unref(sideWidth)}px` : '0px',
+  zIndex: 1
+}))
+</script>
+
+<template>
+  <n-layout-footer position="absolute" :bordered="bordered" :inverted="inverted" :style="footerStyles">
+    <slot v-if="hasDefaultSlot" />
+    <n-flex v-else align="center" justify="center">
+      <span>这里是底部信息，可使用 {{ '<slot name="footer" />' }}覆盖此内容</span>
+    </n-flex>
+  </n-layout-footer>
+</template>

package/src/components/layout/layout-parts/AppHeader.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { Slots } from 'vue'
+import { computed, ref, unref, useSlots, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { hasSlotContent } from '../../../share/slot'
+import { TOP_LAYOUT_TYPES } from '../const'
+import { useContext } from '../context'
+import { findNodeByKey, renderMenuLabel, resolveMainSubFromActive } from '../utils'
+import AppBreadcrumb from './AppBreadcrumb.vue'
+import AppLeftLogoInfo from './AppLeftLogoInfo.vue'
+
+const { type, bordered, inverted, headerHeight, sideWidth, collapsedWidth, activeKey, mainActiveKey, subActiveKey, hasSiderLayout, hasBreadcrumb, isLeftMain, isTopMain, isCollapsed, menuOptions: options, mainMenuOptions, subMenuOptions, updateActiveKey } = useContext()!
+
+const left = computed<string | number>(() => {
+  if (unref(isTopMain))
+    return 0
+
+  if (unref(hasSiderLayout)) {
+    if (unref(isCollapsed))
+      return `${unref(collapsedWidth)}px`
+
+    return `${unref(sideWidth)}px`
+  }
+
+  return 0
+})
+
+const headerStyle = computed(() => ({
+  height: `${unref(headerHeight)}px`,
+  zIndex: 1,
+  left: left.value,
+  padding: unref(hasSiderLayout) ? '0' : '0 16px'
+}))
+
+const showMenu = computed<boolean>(() => TOP_LAYOUT_TYPES.includes(unref(type)!))
+const isTopMenu = computed<boolean>(() => unref(type) === 'top-menu')
+
+const active = ref('')
+
+const menuOptions = computed(() => {
+  if (isTopMenu.value)
+    return unref(options)
+  return unref(isTopMain) ? unref(mainMenuOptions) : unref(subMenuOptions)
+})
+
+// 统一处理激活状态
+watch(() => unref(activeKey), (newKey) => {
+  if (!newKey)
+    return
+
+  const { mainKey, subKey } = resolveMainSubFromActive(unref(options) as any[], newKey)
+  mainActiveKey.value = mainKey || ''
+  subActiveKey.value = subKey || ''
+
+  if (isTopMenu.value) {
+    active.value = newKey
+  }
+  else {
+    if (unref(isTopMain)) {
+      active.value = mainKey || ''
+    }
+
+    if (unref(isLeftMain)) {
+      active.value = subKey || ''
+    }
+  }
+}, { immediate: true })
+
+const router = useRouter()
+function handleUpdateValue(key: string) {
+  const node = findNodeByKey(unref(options) as any[], key)
+  if (node?.href || /^https?:\/\//.test(key)) {
+    return
+  }
+
+  updateActiveKey(key)
+  active.value = key
+  if (unref(isTopMain) && !isTopMenu.value) {
+    const { subKey } = resolveMainSubFromActive(unref(options) as any[], key)
+    if (subKey) {
+      router.push({ name: subKey })
+    }
+  }
+}
+
+const slots: Slots = useSlots()
+const hasDefaultSlot = computed<boolean>(() => hasSlotContent(slots.default))
+</script>
+
+<template>
+  <n-layout-header position="absolute" :bordered="bordered" :inverted="inverted" :style="headerStyle">
+    <n-flex align="center" :wrap="false" class="w-full" :style="{ height: `${headerHeight}px` }">
+      <template v-if="isTopMain">
+        <slot v-if="hasDefaultSlot" />
+        <AppLeftLogoInfo v-else />
+      </template>
+
+      <AppBreadcrumb v-if="hasBreadcrumb" />
+      <n-menu
+        v-if="showMenu"
+        v-model:value="active"
+        class="flex-1"
+        mode="horizontal"
+        :options="menuOptions"
+        :render-label="renderMenuLabel"
+        responsive
+        :inverted="inverted"
+        @update:value="handleUpdateValue"
+      />
+    </n-flex>
+  </n-layout-header>
+</template>

package/src/components/layout/layout-parts/AppLeftLogoInfo.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useContext } from '../context'
+
+const { isCollapsed, headerHeight, isTopMain, hasSiderLayout, siderWidth } = useContext()!
+
+const isMixed = computed(() => unref(isCollapsed))
+
+function getContainerStyle(_: void) {
+  return {
+    height: `${unref(headerHeight)}px`,
+    minWidth: `${unref(siderWidth)}px`,
+    display: 'flex',
+    alignItems: 'center',
+    padding: isMixed.value && !isTopMain ? '0' : '0 20px',
+    justifyContent: isMixed.value ? 'center' : 'flex-start'
+  }
+}
+</script>
+
+<template>
+  <n-flex align="center" :wrap="false" :justify="isMixed && !isTopMain ? 'center' : 'flex-start'" :style="hasSiderLayout ? getContainerStyle() : {}" class="cursor-pointer select-none">
+    <i class=" i-skill-icons:vuejs-dark text-3xl" />
+    <div
+      class=" transition-width duration-200"
+      :class="{ 'opacity-0 w-0 absolute': isMixed && !isTopMain }"
+    >
+      明天会好的111
+    </div>
+  </n-flex>
+</template>

package/src/components/layout/layout-parts/AppMain.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useContext } from '../context'
+
+const { headerHeight, footerHeight, type, isCollapsed, collapsedWidth, sideWidth } = useContext()
+
+const isBlank = computed(() => unref(type) === 'blank')
+
+const left = computed(() => {
+  if (isBlank.value || unref(type) === 'top-menu')
+    return 0
+  if (unref(isCollapsed))
+    return `${unref(collapsedWidth)}px`
+  return `${unref(sideWidth)}px`
+})
+
+const mainStyle = computed(() => ({
+  top: isBlank.value ? 0 : `${unref(headerHeight)}px`,
+  left: left.value,
+  bottom: isBlank.value ? 0 : `${unref(footerHeight)}px`
+}))
+</script>
+
+<template>
+  <n-layout-content
+    position="absolute"
+    embedded
+    :style="mainStyle"
+    :native-scrollbar="false"
+    content-style="padding: 16px;"
+  >
+    <slot />
+    <RouterView />
+  </n-layout-content>
+</template>