graphite_vue/src/views/components/Menu.vue

<template>
	<div class="menu flex justify-center">
		
		<van-sidebar v-model="active" :active="activeName"  class="sidebar">
			<van-sidebar-item v-for="(menu,index) in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu, index)">
				<template #title scoped>
					<div class="menn_li">
						<div><img :src="active == index ? menu.s_icon : menu.n_icon" class="menu_icon" /></div>
						<div>{{ menu.name }}</div>
					</div>
				</template>
			</van-sidebar-item>
		</van-sidebar>
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getMenus } from "./menu.ts";
const router = useRouter();
const route = useRoute();
const imageModules: any = import.meta.glob("@/assets/menuIcon/*.svg");
const importedImages: any = {};
const onHeadleIcon = async () => {
	for (const path in imageModules) {
		let pst = await imageModules[path]();
		importedImages[path] = pst.default;
	}
};

const active = ref(0);
const activeName = ref('')
interface Menu {
	id: number;
	name: string;
	s_icon: string;
	n_icon: string;
	path: string;
}
const goPage = (menu: Menu, index:any) => {
	active.value = index;
	activeName.value = menu.name
	router.push(`${menu.path}`);
};

const muneList: any = ref([]);
onMounted(async () => {
	await onHeadleIcon();
	let path = route.path;
	muneList.value = getMenus();
	//@ts-ignore
	muneList.value.forEach(item => {
		if (item.path === path) {
			active.value = item.id;
		}
	});
});
</script>
<style lang="scss" scoped>
.menu {
    width: var(--menuAreaWidth);
    .sidebar {
		width: calc(var(--menuAreaWidth) - 2.5rem);
		font-size: 1rem;
	}
	@media (max-width: 790px) {
		.sidebar {
			width: 100%;
		}
        .menn_btn {
            border-radius: 0;
        }
	}
}

.menn_text {
	font-size: 1rem;
	margin-top: 0.625rem;
}

.van-sidebar {
	--van-sidebar-active-color: #0088cc; /* 设置激活项颜色为蓝色 */
	/* --van-sidebar-background: red; */
	--van-sidebar-selected-background: #1989fa;
}

.menn_btn {
	border-radius: 10px;
	height: 3.125rem;
	display: flex;
	align-items: center;
}

.menn_li {
	display: flex;
	align-items: center;
	gap: 5px;
}

.menu_icon {
	width: 2.5rem;
	height: 2.5rem;
}
</style>