首页添加导航菜单豆腐块

src/views/home/widgets/components/nav-menu.vue

@@ -0,0 +1,131 @@
+<script lang="ts">
+export default {
+	title: '首页导航菜单',
+	icon: 'Postcard',
+	description: '首页导航菜单展示',
+};
+</script>
+
+<template>
+	<el-card class="box-card p-10" v-loading="loading">
+		<el-row>
+			<el-col :span="6" v-for="(item, index) in navMenuListTop" :key="index">
+				<div :class="['nav-menu-item-top', item.id == currentActiveMenuId ? 'nav-menu-item-active' : '']" @click="currentActiveMenuId = item.id">
+					<el-icon class="nav-menu-item-icon"><List /></el-icon>
+					<div class="nav-menu-item-name">{{ item.name }}</div>
+				</div>
+			</el-col>
+		</el-row>
+		<br />
+		<el-row v-if="currentActiveMenuId" style="background-color: #eaf4fa; border-radius: 1rem; padding: 1rem">
+			<el-col :span="4" v-for="(item, index) in navMenuListBottom" :key="index">
+				<div class="nav-menu-item-bottom" @click="handleClickBottomMenu(item)">
+					<el-icon class="nav-menu-item-icon"><List /></el-icon>
+					<div class="nav-menu-item-name">{{ item.name }}</div>
+				</div>
+			</el-col>
+		</el-row>
+	</el-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { pageList } from '/@/api/admin/menu';
+import { ElMessage } from 'element-plus';
+
+const router = useRouter();
+const loading = ref(false);
+const navMenuList = ref<any>([]);
+const navMenuListTop = ref<any>([]);
+const currentActiveMenuId = ref('');
+
+// 获取菜单列表
+const getNavMenuList = async () => {
+	loading.value = true;
+	try {
+		const res = await pageList({ current: 1, size: 999 }).finally(() => {
+			loading.value = false;
+		});
+		if (res.code == 0 && res.data.length > 0) {
+			navMenuList.value = res.data;
+			navMenuListTop.value = res.data.map((item: any) => ({ id: item.id, name: item.name, path: item.path }));
+		}
+	} catch (error) {
+		navMenuList.value = [];
+		navMenuListTop.value = [];
+		ElMessage.error('加载错误');
+		loading.value = false;
+	}
+};
+
+const navMenuListBottom = computed(() => {
+	if (navMenuList.value) {
+		const currentMenuItem = navMenuList.value.find((item: any) => item.id == currentActiveMenuId.value);
+		if (currentMenuItem && currentMenuItem.children) {
+			return currentMenuItem.children.map((item: any) => ({ id: item.id, name: item.name, path: item.path }));
+		}
+	} else {
+		return [];
+	}
+});
+
+// 点击菜单项
+const handleClickBottomMenu = (item: any) => {
+	router.push(item.path);
+};
+onMounted(async () => {
+	await getNavMenuList();
+});
+</script>
+
+<style scoped lang="scss">
+.nav-menu-item-top {
+	height: 7rem;
+	padding: 1rem;
+	margin: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	align-items: start;
+	justify-content: space-around;
+	background-color: #f9f9f9;
+	border-radius: 1rem;
+	cursor: pointer;
+	overflow: hidden;
+
+	.nav-menu-item-icon {
+		width: 2rem;
+		height: 2rem;
+	}
+	.nav-menu-item-name {
+		font-size: 1.5rem;
+		font-weight: 600;
+	}
+}
+.nav-menu-item-active {
+	background-color: #eaf4fa;
+}
+
+.nav-menu-item-bottom {
+	width: 100%;
+	height: 6rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-around;
+	border-radius: 1rem;
+	cursor: pointer;
+
+	.nav-menu-item-icon {
+		width: 2rem;
+		height: 2rem;
+		background-color: aquamarine;
+	}
+	.nav-menu-item-name {
+		font-size: 1rem;
+		font-weight: 600;
+	}
+}
+.nav-menu-item-bottom:hover {
+	color: #2e5cf6;
+}
+</style>

src/views/home/widgets/index.vue

@@ -124,7 +124,7 @@ const defaultGrid = ref({
 	copmsList: [
 		['current-user', 'flow-data', 'audit-log', 'sys-log-line'],
 		['news', 'sys-log', 'demo-chart1'],
-		['calendar', 'favorite-menu','favorite-flow', 'demo-chart2'],
+		['calendar', 'favorite-menu', 'favorite-flow', 'demo-chart2'],
 	],
 });
 const customizing = ref(false);
@@ -150,6 +150,7 @@ const allCompsList = computed(() => {
 const myCompsList = computed(() => {
 	// 支持列表
 	const myGrid = [
+		'nav-menu',
 		'calendar',
 		'current-user',
 		'news',
@@ -209,8 +210,8 @@ const backDefaul = () => {
 	widgets.value.style.removeProperty('transform');
 	grid.value = defaultGrid.value;
 	Local.remove(widgetsKey.value);
-  // 重新加载页面
+	// 重新加载页面
-  window.location.reload();
+	window.location.reload();
 };
 
 const close = () => {
@@ -306,7 +307,7 @@ onMounted(() => {
 
 .customizing .widgets-wrapper {
 	margin-right: -360px;
-  width: 100%;
+	width: 100%;
 }
 
 .customizing .widgets-wrapper .el-col {