Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/main.ts

src/components/HelloWorld.vue

@@ -23,6 +23,11 @@ const fetchData = async () => {
 </script>
 
 <template>
+   <el-menu class="el-menu-vertical-demo" >
+    <el-menu-item index="1">菜单项1</el-menu-item>
+    <el-menu-item index="2">菜单项2</el-menu-item>
+    <!-- 其他菜单项 -->
+  </el-menu>
    <button @click="fetchData">调取接口</button>
    <div v-if="data">{{ data }}</div>
 </template>

src/components/sidebar/index.vue

+<script lang="ts" setup>
+// sidebarItem 项组件
+import SideBarItem from './sidebarItem.vue';
+import { useRouter } from 'vue-router';
+// 拿到路由列表，过滤我们不想要的
+const router = useRouter();
+const routerList = router.getRoutes().filter((v) => v.meta && v.meta.isShow);
+</script>
+<template>
+	<div class="sidebar">
+		<!-- 项目名称及logo -->
+		<div class="sidebar-logo flex-center">
+			<svg-icon icon-class="logo" />
+			<span>VitalityAdmin</span>
+		</div>
+
+		<!-- 导航菜单 -->
+		<el-menu
+			active-text-color="#fff"
+			background-color="#001529"
+			:default-active="$route.path"
+			text-color="#999"
+			:unique-opened="true"
+			router>
+			
+            <!-- 引入子组件 -->
+			<SideBarItem :routerList="routerList" />
+		</el-menu>
+		
+		<!-- active-text-color：当前菜单项被选中时，字体的颜色 -->
+		<!-- background-color：这个menu菜单的背景色 -->
+		<!-- default-active：	当前激活菜单的 index -->
+		<!-- text-color：菜单项字体颜色 -->
+		<!-- unique-opened：unique-opened	是否只保持一个子菜单的展开 -->
+		<!-- router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
+	</div>
+</template>
+<style lang="scss" scoped>
+.sidebar {
+	height: 100%;
+	.sidebar-logo {
+		height: 48px;
+		background-color: #002140;
+		color: #fff;
+		font-weight: 700;
+		line-height: 48px;
+		text-align: center;
+		font-size: 20px;
+	}
+	.el-menu {
+		height: calc(100% - 48px);
+		border-right: 0;
+		overflow: auto;
+	}
+}
+</style>
+

src/components/sidebar/sidebarItem.vue

+<script setup lang="ts">
+import { RouteRecordRaw } from 'vue-router';
+// 做类型限制，解决ts类型报错
+type CustomRouteRecordRaw = RouteRecordRaw & {
+	meta: {
+		isShow?: boolean;
+	};
+};
+const props = defineProps({
+	// 拿到父组件传递过来的路由列表进行渲染
+	routerList: {
+		type: Array as () => CustomRouteRecordRaw[],
+		required: true
+	}
+});
+</script>
+<template>
+	<template v-for="item in props.routerList" :key="item.path">
+		<!-- 当该菜单项有子菜单时 -->
+		<el-sub-menu :index="item.path" v-if="item.children && item.children.length > 0">
+			<template #title v-if="item.meta.icon">
+				<!-- 菜单项图标，我此处用的是全局封装的 svg组件 -->
+				<el-icon><svg-icon :icon-class="item.meta.icon" /></el-icon>
+				<!-- 菜单项名称，在路由中定义好 -->
+				<span>{{ item.meta.title }}</span>
+			</template>
+			<!-- 若路由中未定义菜单项icon，则仅展示名称--（我的仅一级菜单有图标） -->
+			<template #title v-else>{{ item.meta.title }}</template>
+
+			<!-- 递归遍历-自己调用自己（核心代码） -->
+			<sidebarItem :routerList="( item.children as CustomRouteRecordRaw[])" />
+		</el-sub-menu>
+
+		<!-- 当前菜单项无子菜单 -->
+		<el-menu-item :index="item.path" v-else>
+			<!-- 与上面注释大致相同，不多做额外注释 -->
+			<template v-if="item.meta.icon">
+				<el-icon><svg-icon :icon-class="item.meta.icon" /></el-icon>
+				<span>{{ item.meta.title }}</span>
+			</template>
+			<template v-else>
+				{{ item.meta.title }}
+			</template>
+		</el-menu-item>
+	</template>
+</template>
+
+<style scoped lang="scss">
+.is-active {
+	background: #409eff;
+	font-weight: 700;
+}
+
+.el-menu-item {
+	&:hover {
+		color: #fff;
+		font-weight: 700;
+	}
+}
+
+.el-menu--collapse {
+	.el-menu-item {
+		justify-content: center;
+	}
+}
+
+// 下列代码是用于兼容horizontal所写，酌情删或留
+.el-menu--horizontal {
+	.el-menu-item.is-active {
+		background-color: transparent !important;
+		border-bottom: 2px solid #409eff !important;
+
+		.el-icon,
+		span {
+			color: #409eff !important;
+		}
+	}
+
+	.el-sub-menu.is-active {
+		.el-sub-menu__title {
+			border: 0 !important;
+		}
+
+		.el-icon,
+		span {
+			color: #409eff !important;
+		}
+	}
+}
+</style>
+
+

src/main.ts

@@ -9,4 +9,5 @@ const app = createApp(App)
 // app.use(store)
 app.use(router)
 app.use(ElementPlus)
-app.mount('#app')
\ No newline at end of file
+app.mount('#app')
+