You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.0 KiB
141 lines
3.0 KiB
<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.CONVERSATION) |
|
const menu = ref<MenuItem[]>([ |
|
{ |
|
name: '会话', |
|
icon: 'wei_xin', |
|
path: '/conversation', |
|
key: MenuTypeEnum.CONVERSATION, |
|
}, |
|
{ |
|
name: '文生图', |
|
icon: 'wen_sheng_tu', |
|
path: '/textToPicture', |
|
key: MenuTypeEnum.TEXT_TO_PICTURE, |
|
}, |
|
{ |
|
name: '角色', |
|
icon: 'jue_se', |
|
path: '/role', |
|
key: MenuTypeEnum.ROLE, |
|
}, |
|
{ |
|
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>
|
|
|