✨ feat(Menu): 优化菜单组件，添加点击导航功能并修复选中状态逻辑

src/views/layout/components/Menu.vue

@@ -1,39 +1,39 @@
 <template>
-  <div class="flex flex-col items-center">
+  <div class="flex flex-col items-center cursor-pointer" @click="navigateToRoute">
     <div
       class="rounded-[20px] flex items-center justify-center w-[45px] h-[45px]"
-      :class="[props.info.slected ? 'active' : '']"
+      :class="[isActive ? 'active' : '']"
     >
       <img :src="props.info?.img" class="w-full h-full" />
     </div>
     <div
       class="text-center text-[12px] w-[75px]"
-      :class="[props.info.slected ? 'font-semibold' : '']"
+      :class="[isActive ? 'font-semibold' : '']"
     >
       {{ t(props.info.name) }}
     </div>
   </div>
 </template>
 <script setup>
-import { watch } from 'vue'
+import { watch, computed } from 'vue'
 import router from '../../../router'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
 const { t, locale } = useI18n()
 const props = defineProps({
   info: { type: Object, required: true },
 })
-watch(
-  () => props,
-  () => {
-    if (props.info.slected) {
-      router.push(props.info.path)
-    }
-  },
-  { deep: true },
-)
-const changeLanguage = (lang) => {
-  locale.value = lang
+const route = useRoute()
+
+const isActive = computed(() => {
+  return route.path === props.info.path
+})
+
+const navigateToRoute = () => {
+  router.push(props.info.path)
 }
+
 </script>
 <style scoped>
 .active {
@@ -41,4 +41,4 @@ const changeLanguage = (lang) => {
   background: #f67f20;
   box-shadow: 0px 12.864px 38.593px 0px rgba(234, 124, 105, 0.32);
 }
-</style>
+</style>