布局框架搭建

2026-01-16 11:19:54 +08:00
parent f33bf735d9
commit 08f97d1a21
10 changed files with 1573 additions and 70 deletions
@@ -0,0 +1,174 @@
+<template>
+	<a-menu mode="inline" :theme="theme" :collapsed="collapsed" :selected-keys="selectedKeys" :open-keys="openKeys"
+		@select="handleSelect" @open-change="handleOpenChange" class="side-menu">
+		<template v-for="item in menuList">
+			<!-- 有子菜单 -->
+			<a-sub-menu v-if="item.children && item.children.length > 0" :key="item.path + '-submenu'">
+				<template #icon>
+					<component :is="item.meta?.icon || 'MenuOutlined'" />
+				</template>
+				<template #title>{{ item.meta?.title || item.name }}</template>
+				<a-menu-item v-for="child in item.children.filter(sub => !sub.children || sub.children.length === 0)"
+					:key="child.path">
+					<template #icon>
+						<component :is="child.meta?.icon || 'FileOutlined'" />
+					</template>
+					{{ child.meta?.title || child.name }}
+				</a-menu-item>
+				<a-sub-menu v-for="child in item.children.filter(sub => sub.children && sub.children.length > 0)"
+					:key="child.path">
+					<template #icon>
+						<component :is="child.meta?.icon || 'AppstoreOutlined'" />
+					</template>
+					<template #title>{{ child.meta?.title || child.name }}</template>
+					<a-menu-item v-for="grandChild in child.children" :key="grandChild.path">
+						<template #icon>
+							<component :is="grandChild.meta?.icon || 'FileOutlined'" />
+						</template>
+						{{ grandChild.meta?.title || grandChild.name }}
+					</a-menu-item>
+				</a-sub-menu>
+			</a-sub-menu>
+			<!-- 无子菜单 -->
+			<a-menu-item v-else :key="item.path + '-item'">
+				<template #icon>
+					<component :is="item.meta?.icon || 'MenuOutlined'" />
+				</template>
+				{{ item.meta?.title || item.name }}
+			</a-menu-item>
+		</template>
+	</a-menu>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLayoutStore } from '@/stores/modules/layout'
+import { getUserMenu } from '@/api/menu'
+
+const props = defineProps({
+	collapsed: {
+		type: Boolean,
+		default: false
+	},
+	theme: {
+		type: String,
+		default: 'light'
+	}
+})
+
+const route = useRoute()
+const router = useRouter()
+const layoutStore = useLayoutStore()
+
+const menuList = ref([])
+const selectedKeys = ref([])
+const openKeys = ref([])
+
+// 获取菜单数据
+const getMenuList = async () => {
+	try {
+		const res = await getUserMenu()
+		if (res.code === 200) {
+			menuList.value = res.data || []
+		}
+	} catch (error) {
+		console.error('获取菜单失败:', error)
+		// 模拟数据
+		menuList.value = [
+			{
+				path: '/home',
+				name: 'Home',
+				meta: { title: '首页', icon: 'HomeOutlined' }
+			},
+			{
+				path: '/system',
+				name: 'System',
+				meta: { title: '系统管理', icon: 'SettingOutlined' },
+				children: [
+					{
+						path: '/system/user',
+						name: 'User',
+						meta: { title: '用户管理', icon: 'UserOutlined' }
+					},
+					{
+						path: '/system/role',
+						name: 'Role',
+						meta: { title: '角色管理', icon: 'TeamOutlined' }
+					},
+					{
+						path: '/system/menu',
+						name: 'Menu',
+						meta: { title: '菜单管理', icon: 'MenuOutlined' }
+					}
+				]
+			}
+		]
+	}
+}
+
+// 更新选中的菜单
+const updateSelectedKeys = () => {
+	selectedKeys.value = [route.path]
+
+	// 获取父级菜单路径
+	const matched = route.matched
+		.filter(item => item.path !== '/' && item.path !== route.path)
+		.map(item => item.path)
+
+	// 折叠时不自动展开
+	if (!props.collapsed) {
+		openKeys.value = matched
+	}
+}
+
+// 处理菜单选择
+const handleSelect = ({ key }) => {
+	router.push(key)
+}
+
+// 处理菜单展开/收起
+const handleOpenChange = (keys) => {
+	openKeys.value = keys
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+	updateSelectedKeys()
+}, { immediate: true })
+
+// 监听折叠状态
+watch(() => props.collapsed, (val) => {
+	if (val) {
+		openKeys.value = []
+	} else {
+		updateSelectedKeys()
+	}
+})
+
+onMounted(() => {
+	getMenuList()
+})
+</script>
+
+<style scoped lang="scss">
+.side-menu {
+	height: calc(100% - 64px);
+	border-right: none;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+}
+</style>