ppai/web/src/main.vue

<script setup>
import { ref, watch } from 'vue';
import { RouterView, useRoute, useRouter } from 'vue-router';
import { AccountBookOutlined, TeamOutlined, TrophyOutlined, BookOutlined } from '@ant-design/icons-vue';

// 获取当前路由和路由实例
const route = useRoute();
const router = useRouter();
const current = ref([route.name]);

// 监听路由变化，更新选中菜单
watch(() => route.name, (newName) => {
  current.value = [newName];
});

// 处理菜单点击事件
const handleMenuClick = (e) => {
  const key = e.key;
  router.push({ name: key });
};

</script>

<template>
  <a-menu v-model:selectedKeys="current" mode="horizontal" @click="handleMenuClick">
    <a-menu-item key="home">
      <template #icon>
        <account-book-outlined />
      </template>
      策略
    </a-menu-item>
    <a-menu-item key="leagues">
      <template #icon>
        <team-outlined />
      </template>
      联赛
    </a-menu-item>
    <a-menu-item key="games">
      <template #icon>
        <trophy-outlined />
      </template>
      比赛
    </a-menu-item>
    <a-menu-item key="locales">
      <template #icon>
        <book-outlined />
      </template>
      翻译
    </a-menu-item>
  </a-menu>

  <router-view />

</template>

<style scoped>
</style>