graphite_vue/src/views/components/Menu.vue

<template>
    <div class="menu flex justify-center">
        <van-sidebar v-model="active" class="sidebar">
            <van-sidebar-item v-for="menu in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu)">
                <template #title scoped>
                    <div class="menn_li">
                        <div><img :src="active== menu.id ? menu.s_img : menu.n_img" 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 { menuIcon } 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);
    interface Menu {
        id: number
        name: string
        s_icon: string
        n_icon: string
        s_img: string
        n_img: string
        path: string
    }
    const goPage = (menu:Menu) => {
        active.value = menu.id
        router.push(`${menu.path}`)
    }

    const muneList:any = ref([])
    onMounted(async ()=>{
        await onHeadleIcon()
        let path = route.path
        muneList.value = menuIcon
        //@ts-ignore
        muneList.value.forEach(item => {
            item.s_img = importedImages[item.s_icon]
            item.n_img = importedImages[item.n_icon]
            if(item.path === path){
                active.value = item.id
            }
        });
        console.log('muneList.value---', muneList.value)
    })

</script>
<style lang="css" scoped>
    .sidebar{
        width: calc(var(--menuAreaWidth) - 2.5rem);
        /* padding: 0 1.125rem; */
        font-size: 1rem
    }
    .menu{
        width: var(--menuAreaWidth);
    }

    .menn_text{
        font-size: 1rem;
        margin-top:.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>