src/views/HomeView.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<div id="layout">
		<a-layout>
			<a-layout-header>
				<div id="header">学生信息管理系统 SIMS</div>
				<div id="info">
					<span>Hello <a>Admin</a> | <a>Logout</a></span>
				</div>
			</a-layout-header>
			<a-layout>
				<a-layout-sider v-model:collapsed="collapsed">
					<a-button type="primary" style="margin-bottom: 5px" @click="toggleCollapsed">
						<MenuUnfoldOutlined v-if="collapsed" />
						<MenuFoldOutlined v-else />
					</a-button>
					<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" :inline-collapsed="collapsed">
						<a-menu-item key="1">
							<template #icon><HomeOutlined /></template>
							<router-link to="/main">首页</router-link>
						</a-menu-item>
						<a-sub-menu v-for="item,index in userRights.filter(item=>item.parentId==null)" :key="item.id">
							<template #icon v-if="index==1">
								<ReadOutlined />
							</template>
							<template #icon v-else>
								<AppstoreOutlined />
							</template>
							<template #title>
								<span class="onemenu">{{item.menuName}}</span>
							</template>
							<a-menu-item v-for="item1 in userRights.filter(item1=>item1.parentId==item.id)" :key="item1.id" >
								<a-image :width="20" :height="20" :src="item1.icon"/>
								<router-link :to="item1.url">{{item1.menuName}}</router-link>
							</a-menu-item>
						</a-sub-menu>
					</a-menu>
				</a-layout-sider>
				<a-layout-content>
					<router-view></router-view>
				</a-layout-content>
			</a-layout>
			<a-layout-footer>
				<div style="text-align: center;">&#169; 2021-2022 学生信息管理系统. All Rights Reserved | Design by 小六公子</div>
			</a-layout-footer>
		</a-layout>
	</div>
</template>

<script lang="ts">
	import { message } from 'ant-design-vue';
	import {
		useRouter,
		//useRoute
	} from 'vue-router';
	import {
		reactive,
		toRefs,
		watch
	} from 'vue';
	import {