feat(layout): 增加侧边导航

src/layouts/BasicLayout/index.vue

@@ -1,13 +1,15 @@
 <template>
   <n-layout has-sider wh-full>
-    <n-layout-sider content-style="padding: 16px;" bordered>
-      <router-link to="/test1">Go to test1</router-link>
-      <br />
-      <router-link to="/test2">Go to test2</router-link>
-      <br />
-      <router-link to="/test3">Go to test3</router-link>
-      <br />
-      <router-link to="/login" c-gray>Go to login</router-link>
+    <n-layout-sider
+      bordered
+      :collapsed="collapsed"
+      show-trigger
+      collapse-mode="width"
+      :collapsed-width="64"
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <n-menu :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
     </n-layout-sider>
     <n-layout h-full bg-hex-f3-f4-f6 :native-scrollbar="false">
       <n-layout-header bordered text-2xl h-60px flex-y-center>layout-page</n-layout-header>
@@ -21,8 +23,106 @@
   </n-layout>
 </template>
 
-<script lang="ts">
-export default {};
+<script lang="ts" setup>
+import type { MenuOption } from 'naive-ui';
+import { h, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+import { Icon } from '@iconify/vue';
+
+const collapsed = ref(false);
+function renderIcon(icon: string) {
+  return () => h(Icon, { icon });
+}
+const menuOptions: MenuOption[] = [
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            path: '/test1',
+          },
+        },
+        { default: () => 'test1' },
+      ),
+    key: 'test1',
+    icon: renderIcon('icon-park:ad-product'),
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            path: '/test2',
+          },
+        },
+        { default: () => 'test2' },
+      ),
+    key: 'test2',
+    icon: renderIcon('icon-park:ad-product'),
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            path: '/test3',
+          },
+        },
+        { default: () => 'test3' },
+      ),
+    key: 'test3',
+    icon: renderIcon('icon-park:ad-product'),
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            path: '/login',
+          },
+        },
+        { default: () => '登录页' },
+      ),
+    key: '登录页',
+    icon: renderIcon('icon-park:ad-product'),
+  },
+  {
+    label: '舞，舞，舞',
+    key: 'dance-dance-dance',
+    icon: renderIcon('icon-park:arithmetic'),
+    children: [
+      {
+        label: '饮品',
+        key: 'beverage',
+        // icon: renderIcon(WineIcon),
+        children: [
+          {
+            label: '威士忌',
+            key: 'whisky',
+          },
+        ],
+      },
+      {
+        label: '食物',
+        key: 'food',
+        children: [
+          {
+            label: '三明治',
+            key: 'sandwich',
+          },
+        ],
+      },
+      {
+        label: '过去增多，未来减少',
+        key: 'the-past-increases-the-future-recedes',
+      },
+    ],
+  },
+];
 </script>
 
 <style lang="scss" scoped></style>