feat(sidebar): 侧边栏组件草创

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']

src/components/t-sidebar.vue

@@ -1,14 +1,48 @@
 <template>
-	<div>
+	<a-layout-sider v-model:collapsed="collpased" collapsible :theme="theme">
-		<h1>侧边栏</h1>
+		<a-menu
-	</div>
+			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>
 

src/router/routes.ts

@@ -7,6 +7,10 @@ const routes = [
 		name: "Home",
 		component: Home,
 	},
+	{
+		path: "/home",
+		redirect: "/",
+	},
 	{
 		path: "/config",
 		name: "Config",