From b6894a8e6eab0bef4bc01b4227c036f59526f46a Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Wed, 10 Aug 2022 13:36:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E5=A2=9E=E5=8A=A0=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout/index.vue | 120 +++++++++++++++++++++++++++---
 1 file changed, 110 insertions(+), 10 deletions(-)

diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index f108420..26e0d81 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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>