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

src/components/dialogs/LanguageSwitch.vue

@@ -1,24 +1,24 @@
 <template>
   <el-dialog
-    v-model="dialogVisible"
-    title="语言切换"
-    width="300px"
-    :close-on-click-modal="false"
-    append-to-body
-    class="lang-switch-dialog"
+      v-model="dialogVisible"
+      title="语言切换"
+      width="300px"
+      :close-on-click-modal="false"
+      append-to-body
+      class="lang-switch-dialog"
   >
     <el-form label-width="80px">
       <el-form-item label="切换语言">
         <el-select
-          v-model="tempLang" 
-          placeholder="请选择语言" 
-          style="width: 100%"
+            v-model="tempLang"
+            placeholder="请选择语言"
+            style="width: 100%"
         >
           <el-option
-            v-for="item in langOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+              v-for="item in langOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
           />
         </el-select>
       </el-form-item>
@@ -34,21 +34,15 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import {computed, ref} from 'vue'
+import {useI18n} from 'vue-i18n'
 // === 显式引入所有用到的 Element Plus 组件 ===
-import { 
-  ElDialog, 
-  ElForm, 
-  ElFormItem, 
-  ElInput, 
-  ElSelect, 
-  ElOption, 
-  ElButton,
-  ElMessage 
-} from 'element-plus'
-
-const { locale } = useI18n()
+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()
 
 // 控制弹窗显示
 const dialogVisible = ref(false)
@@ -61,11 +55,11 @@ const tempLang = ref('')
 
 // 语言选项 
 const langOptions = [
-  { label: '中文(简体)', value: 'zh-CN' },
-  { label: '中文(繁體)', value: 'zh-TW' },
-  { label: '英语', value: 'en' },
-  { label: 'ภาษาไทย', value: 'th' },
-  { label: 'Tiếng Việt', value: 'vi' }
+  {label: '中文(简体)', value: 'zh-CN'},
+  {label: '中文(繁體)', value: 'zh-TW'},
+  {label: '英语', value: 'en'},
+  {label: 'ภาษาไทย', value: 'th'},
+  {label: 'Tiếng Việt', value: 'vi'}
 ]
 
 // 获取语言显示名称
@@ -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;"
                   >