qn-ai-pc/src/layout/AppMenu/index.vue

<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>