From 2383dc7d5113f40158f1b602e52cb46067703b00 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sun, 5 Mar 2023 17:23:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(sidebar):=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=8D=89=E5=88=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts              |  3 +++
 src/components/t-sidebar.vue | 40 +++++++++++++++++++++++++++++++++---
 src/router/routes.ts         |  4 ++++
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 5f8f7abf..eff9cd4f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,6 +11,9 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TSidebar: typeof import('./src/components/t-sidebar.vue')['default']
diff --git a/src/components/t-sidebar.vue b/src/components/t-sidebar.vue
index 07d232db..64448282 100644
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -1,14 +1,48 @@
 <template>
-	<div>
-		<h1>侧边栏</h1>
-	</div>
+	<a-layout-sider v-model:collapsed="collpased" collapsible :theme="theme">
+		<a-menu
+			v-model:selected-keys="selectedKeys"
+			:theme="theme"
+			mode="inline"
+			@select="selectMenu"
+		>
+			<a-menu-item key="home">
+				<HomeOutlined />
+				<span>Home</span>
+			</a-menu-item>
+			<a-menu-item key="config">
+				<SettingOutlined />
+				<span>Config</span>
+			</a-menu-item>
+		</a-menu>
+	</a-layout-sider>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { HomeOutlined, SettingOutlined } from "@ant-design/icons-vue";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
 	name: "TSidebar",
+	components: {
+		HomeOutlined,
+		SettingOutlined,
+	},
+	data() {
+		return {
+			router: useRouter(),
+			collpased: false,
+			selectedKeys: ["home"],
+			theme: "dark",
+		};
+	},
+	methods: {
+		selectMenu({ key }: { key: string }) {
+			this.selectedKeys = [key];
+			this.router.push(key);
+		},
+	},
 });
 </script>
 
diff --git a/src/router/routes.ts b/src/router/routes.ts
index be6f0156..7e8398c9 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -7,6 +7,10 @@ const routes = [
 		name: "Home",
 		component: Home,
 	},
+	{
+		path: "/home",
+		redirect: "/",
+	},
 	{
 		path: "/config",
 		name: "Config",