add: 图标 使用id 切换语言动态菜单更改

src/components/dialogs/LanguageSwitch.vue

@@ -34,19 +34,13 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 // === 显式引入所有用到的 Element Plus 组件 ===
-import { 
-  ElDialog, 
-  ElForm, 
-  ElFormItem, 
-  ElInput, 
-  ElSelect, 
-  ElOption, 
-  ElButton,
-  ElMessage 
-} from 'element-plus'
+import {ElButton, ElDialog, ElForm, ElFormItem, ElMessage, ElOption, ElSelect} from 'element-plus'
+import request from "@/util/http.js";
+import {useAdminStore} from '@/store/index.js';
+import {storeToRefs} from "pinia";
 
 const {locale} = useI18n()
 
@@ -80,13 +74,16 @@ const open = () => {
   dialogVisible.value = true
 }
 
+
 // 确认修改
-const handleConfirm = () => {
+const handleConfirm = async () => {
   locale.value = tempLang.value
   localStorage.setItem('lang', tempLang.value)
+
+  await getMenuTree()
+
   ElMessage.success(`语言已切换为：${getLangLabel(tempLang.value)}`)
   dialogVisible.value = false
-  
   // 触发页面刷新以重新加载数据
   setTimeout(() => {
     window.location.reload()
@@ -96,6 +93,33 @@ const handleConfirm = () => {
 defineExpose({
   open
 })
+
+const adminStore = useAdminStore();
+const {adminData} = storeToRefs(adminStore);
+// 切换多语言 菜单改变
+const getMenuTree = async function () {
+  // 获取菜单树
+  try {
+    const result = await request({
+      url: '/menu/tree',
+      data: {
+        id: adminData.value.roleId,
+
+      }
+    })
+    if (result.code === 200){
+      adminStore.setMenuTree(result.data)
+
+    }
+
+    return result.data  // 直接返回接口响应数据
+  } catch (error) {
+    console.error('菜单数据请求失败：', error)
+    // return { code: 500, msg: '获取菜单失败' }
+    ElMessage.error('网络异常')
+    adminStore.clearState()
+  }
+}
 </script>
 
 

src/views/home.vue

@@ -22,17 +22,17 @@ import {useMessageStore} from '@/store/index.js'
 const icons = import.meta.glob('@/assets/SvgIcons/*.svg', {eager: true})
 
 const menuNameMap = {
-  '工作台': 'workbench',
-  '金币管理': 'gold-management',
-  '现金管理': 'cash-management',
-  '活动管理': 'activity-management',
-  '频道管理': 'channel-management',
-  '权限管理': 'permission-management',
-  '多语言配置': 'mutiple-language',
+  '2': 'workbench', // 工作台
+  '3': 'gold-management', //金币管理
+  '58': 'cash-management', //现金管理
+  '119': 'activity-management', //活动管理
+  '124': 'channel-management', //频道管理
+  '128': 'permission-management', //权限管理
+  '146': 'mutiple-language', //多语言配置
 }
 
-const getIconPath = (menuName) => {
-  const englishName = menuNameMap[menuName] || menuName;
+const getIconPath = (menuNameId) => {
+  const englishName = menuNameMap[menuNameId] || menuNameId;
 
   const possibleKeys = [
     `@/assets/SvgIcons/${englishName}.svg`,
@@ -314,7 +314,7 @@ onMounted(() => getMessage())
                 <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
                   <template #title>
                     <img
-                        :src="getIconPath(menu.menuName)"
+                        :src="getIconPath(menu.id)"
                         :alt="`${menu.menuName}图标`"
                         style="width: 4vh; height: 4vh; margin-right: 4px;"
                     >
@@ -355,7 +355,7 @@ onMounted(() => getMessage())
                 <!-- 无子菜单的一级菜单 -->
                 <el-menu-item v-else :index="getRoutePath(menu)">
                   <img
-                      :src="getIconPath(menu.menuName)"
+                      :src="getIconPath(menu.id)"
                       :alt="`${menu.menuName}图标`"
                       style="width: 4vh; height: 4vh; margin-right: 4px;"
                   >