💄 完善面包屑和菜单

README.md

@@ -121,7 +121,7 @@ export const pageAnimateModeOptions = [
   { value: 'fade-bottom', label: '底部消退' },
 ]
 
-const { setting } = useThemeSetting({ initialValue: themeSetting })
+const { setting } = storeToRefs(useThemeStore())
 ```
 
 ### 主题模式
@@ -131,8 +131,11 @@ const { setting } = useThemeSetting({ initialValue: themeSetting })
 - 系统
 
 ```ts
-const mode = useColorMode()
-console.log(mode.value) // 'light' | 'dark' | 'auto'
+const themeStore = useThemeStore()
+
+themeStore.toggleMode('dark') // dark
+
+console.log(themeStore.mode.value) // 'light' | 'dark' | 'auto'
 ```
 
 ### 全局化配置
@@ -147,6 +150,8 @@ const configProviderProps = useNaiveConfigProvider()
 
 ### 脱离上下文的 API
 
+> ⚠️ 请在 router 注册后使用
+
 ```ts
 const { dialog } = useNaiveApi()
 dialog.warning('warning!')

src/layouts/components/sider/Menu.vue

@@ -1,34 +1,52 @@
 <script setup lang="ts">
+import { menus } from '~/settings/menu'
+
 const route = useRoute()
 const router = useRouter()
 
 const selected = computed(() => route.path)
+const expandedKeys = ref([])
+const options = computed(() => traverseTree(menus))
 
-const options = [
-  {
-    key: '/',
-    label: '首页',
-    icon: () => renderIcon('i-icon-park-outline-home'),
+watch(
+  selected,
+  () => {
+    expandedKeys.value = findParentNodes(menus, selected.value)?.map((item: any) => item.key)
   },
   {
-    key: '/about',
-    label: '关于',
-    icon: () => renderIcon('i-icon-park-outline-tag'),
+    immediate: true,
   },
-]
+)
+
+const { setting } = storeToRefs(useThemeStore())
 
-const { setting } = useThemeSetting()
+function handleSelect(key: string, option: any) {
+  if (option.url) {
+    window.open(option.url, '_blank')
+    return
+  }
 
-function handleSelect(key: string) {
   router.push(key)
 }
+
+function traverseTree(nodes: any[]) {
+  return nodes.map((node) => {
+    const newNode = { ...node }
+    newNode.icon = () => renderIcon(node.icon)
+    if (newNode.children?.length)
+      newNode.children = traverseTree(newNode.children)
+
+    return newNode
+  })
+}
 </script>
 
 <template>
   <NScrollbar>
     <NMenu
+      v-model:expanded-keys="expandedKeys"
       :value="selected"
-      :options
+      :options="options"
       :collapsed="setting.sider.collapsed"
       :collapsed-width="setting.sider.collapsedWidth"
       :collapsed-icon-size="18"

src/pages/about.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+definePage({
+  meta: {
+    title: '关于',
+    icon: 'i-icon-park-outline-tag',
+  },
+})
+
 const title = 'About World...'
 </script>
 

src/pages/document/unocss.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: 'UnoCSS 文档',
+    icon: 'i-logos:unocss',
+  },
+})
+
+const [loading, toggle] = useToggle(true)
+
+const iframeRef = ref()
+
+useEventListener(iframeRef, 'load', () => {
+  toggle(false)
+})
+</script>
+
+<template>
+  <NSpin
+    :show="loading"
+    content-class="wh-full"
+    class="wh-full p-24px"
+  >
+    <iframe
+      ref="iframeRef"
+      src="https://unocss.dev/"
+      class="wh-full rounded-12px"
+    />
+  </NSpin>
+</template>

src/pages/document/vite.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: 'Vite 文档',
+    icon: 'i-logos:vitejs',
+  },
+})
+
+const [loading, toggle] = useToggle(true)
+
+const iframeRef = ref()
+
+useEventListener(iframeRef, 'load', () => {
+  toggle(false)
+})
+</script>
+
+<template>
+  <NSpin
+    :show="loading"
+    content-class="wh-full"
+    class="wh-full p-24px"
+  >
+    <iframe
+      ref="iframeRef"
+      src="https://cn.vitejs.dev/"
+      class="wh-full rounded-12px"
+    />
+  </NSpin>
+</template>

src/pages/document/vue.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: 'Vue 文档',
+    icon: 'i-logos:vue',
+  },
+})
+
+const [loading, toggle] = useToggle(true)
+
+const iframeRef = ref()
+
+useEventListener(iframeRef, 'load', () => {
+  toggle(false)
+})
+</script>
+
+<template>
+  <NSpin
+    :show="loading"
+    content-class="wh-full"
+    class="wh-full p-24px"
+  >
+    <iframe
+      ref="iframeRef"
+      src="https://cn.vuejs.org/"
+      class="wh-full rounded-12px"
+    />
+  </NSpin>
+</template>

src/pages/document/vueuse.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: 'VueUse 文档',
+    icon: 'i-logos:vueuse',
+  },
+})
+
+const [loading, toggle] = useToggle(true)
+
+const iframeRef = ref()
+
+useEventListener(iframeRef, 'load', () => {
+  toggle(false)
+})
+</script>
+
+<template>
+  <NSpin
+    :show="loading"
+    content-class="wh-full"
+    class="wh-full p-24px"
+  >
+    <iframe
+      ref="iframeRef"
+      src="https://www.vueuse.org"
+      class="wh-full rounded-12px"
+    />
+  </NSpin>
+</template>

src/pages/system/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: '系统管理',
+    icon: 'i-icon-park-outline-system',
+  },
+})
+</script>
+
+<template>
+  <div>
+    123
+  </div>
+</template>

src/pages/system/menu/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: '菜单管理',
+    icon: 'i-icon-park-outline-list-one',
+  },
+})
+</script>
+
+<template>
+  <div>
+    123
+  </div>
+</template>

src/pages/system/user/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: '用户管理',
+    icon: 'i-icon-park-outline-user',
+  },
+})
+</script>
+
+<template>
+  <div>
+    123
+  </div>
+</template>

src/settings/menu.ts

@@ -0,0 +1,64 @@
+// @unocss-includes
+
+export const menus = [
+  {
+    key: '/',
+    label: '首页',
+    icon: 'i-icon-park-outline-home',
+  },
+  {
+    key: '/document',
+    label: '文档',
+    icon: 'i-icon-park-outline-book',
+    children: [
+      {
+        key: '/document/vite',
+        label: 'Vite 文档',
+        icon: 'i-logos:vitejs',
+      },
+      {
+        key: '/document/vue',
+        label: 'Vue 文档',
+        icon: 'i-logos:vue',
+      },
+      {
+        key: '/document/vueuse',
+        label: 'VueUse 文档',
+        icon: 'i-logos:vueuse',
+      },
+      {
+        key: '/document/unocss',
+        label: 'UnoCSS 文档',
+        icon: 'i-logos:unocss',
+      },
+      {
+        key: '/document/naiveui',
+        label: 'Naive UI 文档（外链）',
+        icon: 'i-logos:naiveui',
+        url: 'https://www.naiveui.com/zh-CN',
+      },
+    ],
+  },
+  {
+    key: '/system',
+    label: '系统管理',
+    icon: 'i-icon-park-outline-system',
+    children: [
+      {
+        key: '/system/menu',
+        label: '菜单管理',
+        icon: 'i-icon-park-outline-list-one',
+      },
+      {
+        key: '/system/user',
+        label: '用户管理',
+        icon: 'i-icon-park-outline-user',
+      },
+    ],
+  },
+  {
+    key: '/about',
+    label: '关于',
+    icon: 'i-icon-park-outline-tag',
+  },
+]

src/utils/tree.ts

@@ -0,0 +1,22 @@
+/**
+ * 找到所有父级节点
+ * @param data - 节点数组
+ * @param currentKey - 当前激活节点的 key
+ * @param key - 节点 key 的字段名
+ * @param nodes - 保存节点的数组
+ * @returns 返回所有父级节点
+ */
+export function findParentNodes(data: any[], currentKey: string, key: string = 'key', nodes: any[] = []) {
+  for (const item of data) {
+    if (item[key] === currentKey)
+      return nodes
+
+    if (item.children) {
+      const newNodes = [...nodes, item]
+      const result: any = findParentNodes(item.children, currentKey, key, newNodes)
+      if (result)
+        return result
+    }
+  }
+  return null
+}