<script setup lang="ts"> import { ref, watch } from 'vue' import { useRouter } from 'vue-router' import type { MenuItem } from './index.d' import { SvgIcon } from '@/components/SvgIcon' import { MenuTypeEnum } from '@/enums/menuEnum' const router = useRouter() const menuActive = ref<MenuTypeEnum>(MenuTypeEnum.TEXT_TO_TEXT) const menu = ref<MenuItem[]>([ { name: '会话', icon: 'wei_xin', path: '/conversation', key: MenuTypeEnum.TEXT_TO_TEXT, }, { name: '文生图', icon: 'wen_sheng_tu', path: '/textToImage', key: MenuTypeEnum.TEXT_TO_IMAGE, }, { name: '角色', icon: 'jue_se', path: '/role', key: MenuTypeEnum.ROLE, }, // { // name: '知识库', // icon: 'repository', // path: '/repository', // key: MenuTypeEnum.REPOSITORY, // }, { name: '图像分析', icon: 'visual_analysis', path: '/visualAnalysis', key: MenuTypeEnum.VISUAL_ANALYSIS, }, { name: '任务', icon: 'ren_wu', path: '/task', key: MenuTypeEnum.TASK, }, ]) const footMenu = ref([ // { // name: '小程序', // icon: 'xiao_cheng_xu', // path: '', // key: MenuTypeEnum.APPLET, // }, { name: '我的', icon: 'wo_de', path: '', key: MenuTypeEnum.USER, }, ]) watch( () => router.currentRoute.value.path, (toPath) => { const menuIndex = menu.value.findIndex(item => toPath.startsWith(item.path)) if (menuIndex !== -1) menuActive.value = menu.value[menuIndex].key }, { immediate: true, deep: true }, ) function handleToPath(item: MenuItem) { menuActive.value = item.key router.push({ path: item.path }) } </script> <template> <div class="app-menu h-full flex flex-col justify-between"> <div class="menu w-full"> <img class="logo" src="~@/assets/images/logo.png" alt=""> <div v-for="item in menu" :key="item.key" class="menu-item w-full" :class="[menuActive === item.key ? 'menu-item-active' : '']" @click="handleToPath(item)" > <SvgIcon class="icon" :name="item.icon" /> <p class="text text-center"> {{ item.name }} </p> </div> </div> <div class="menu foot-menu w-full"> <div v-for="item in footMenu" :key="item.key" class="menu-item w-full" :class="[menuActive === item.key ? 'menu-item-active' : '']" @click="handleToPath(item)" > <SvgIcon class="icon" :name="item.icon" /> <p class="text text-center"> {{ item.name }} </p> </div> </div> </div> </template> <style lang="scss" scoped> @include app('menu') { background-image: url('../../assets/images/bg_menu.png'); background-size: cover; .menu { .logo { width: 50px; margin: 15px auto 30px auto; display: block; } .menu-item { color: #fff; cursor: pointer; .icon { width: 45px; height: 45px; padding: 12px; border-radius: 12px; margin: 0 auto; display: block; transition: all 0.4s; } } .menu-item + .menu-item { margin-top: 20px; } .menu-item:hover { .icon { background-color: #3766d6; } } .menu-item-active { .icon { background-color: #3766d6; } } } } </style>