From dfafaf4d04080e5d456018c7cf36c383a75fe29c Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Mon, 21 Jul 2025 17:06:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E5=8A=A8=E6=80=81=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home.vue | 181 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 116 insertions(+), 65 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index da7a52a..1cfcddc 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,14 +1,76 @@
 <script setup>
 // 导航栏在这
 import {onMounted, ref} from 'vue'
-import {useRouter} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
 import {ElMessage} from 'element-plus'
 import API from '@/util/http'
 import dmmn from '../assets/link.png'
 import moment from 'moment'
 import ChangePassword from '@/components/changePassword.vue'
 
+// 获取当前路由实例
+const route = useRoute()
 
+// 存储接口返回的菜单数据
+const menuList = ref([])
+
+
+
+/**
+ * 调用 /menu/tree 接口获取菜单数据
+ */
+const fetchMenuTree = async function() {
+  try {
+    const result = await API({ url: '/menu/tree', data: {id: adminData.value.roleId} })
+
+    return result.data  // 直接返回接口响应数据
+  } catch (error) {
+    console.error('菜单数据请求失败：', error)
+    return { code: 500, msg: '获取菜单失败' }
+  }
+}
+
+
+function filterMenu(menuList) {
+  return menuList
+      .filter(menu => menu.menuType !== 4)
+      .map(menu => ({
+        ...menu,
+        children: menu.children ? filterMenu(menu.children) : []
+      }))
+      .sort((a, b) => a.priority - b.priority); // 按 id 升序
+}
+
+/**
+ * 映射菜单名称到路由路径
+ */
+const getRoutePath = (menu) => {
+  // 路由映射表：key为接口menuName，value为对应路由路径
+  const routeMap = {
+    '工作台': '/workspace',
+
+    '财务审核': '/rechargeAudit',
+    '充值审核': '/rechargeAudit',
+    '退款审核': '/refundAudit',
+
+    '汇率管理': '/rate',
+
+    '消耗管理': '/coinConsume',
+    '消耗页面': '/coinConsume',
+
+    '权限管理': '/permissions',
+
+    '充值管理': '/coinRecharge',
+    '充值页面': '/coinRecharge',
+
+    '退款管理': '/coinRefund',
+    '退款页面': '/coinRefund',
+
+    '客户账户明细': '/usergold',
+  };
+  // 未匹配的菜单默认使用id作为路由（可根据实际需求调整）
+  return routeMap[menu.menuName] || '/workspace'
+}
 
 const router = useRouter()
 const imgrule1 = dmmn
@@ -134,8 +196,9 @@ onMounted(async function () {
   // 获取用户信息
 
   await getAdminData()
-  // // 初始化获取导出列表
-  // await getExportList()
+
+  const menus = await fetchMenuTree()
+  menuList.value = filterMenu(menus)
 })
 // 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
 const changeDataByArea = (item) => {
@@ -176,73 +239,61 @@ const openChangePassword = () => {
         </div>
         <el-card style="min-height: 90%;">
 
-          <el-menu :router="true" class="el-menu-vertical-demo">
-            <el-menu-item index="/workspace">
-              <el-icon>
-                <Folder />
-              </el-icon>
-              <span>工作台</span>
-            </el-menu-item>
-
-            <el-sub-menu index="2">
-              <template #title>
-                <el-icon>
-                  <Folder />
-                </el-icon>
-                <span>财务审核</span>
-              </template>
-              <el-menu-item index="/rechargeAudit">充值审核</el-menu-item>
-              <el-menu-item index="/refundAudit">退款审核</el-menu-item>
-            </el-sub-menu>
-            <el-menu-item index="/rate">
-              <el-icon>
-                <Folder />
-              </el-icon>
-              <span>汇率管理</span>
-            </el-menu-item>
-            <el-sub-menu index="4">
-              <template #title>
-                <el-icon>
-                  <Folder />
-                </el-icon>
-                <span>充值管理</span>
-              </template>
-              <el-menu-item index="/coinRecharge">金币充值</el-menu-item>
-              <!-- <el-menu-item index="/beanRecharge">金豆充值</el-menu-item> -->
-            </el-sub-menu>
-            <el-sub-menu index="6">
+          <el-menu
+              :router="true"
+              class="el-menu-vertical-demo"
+              :default-active="$route.path"
+          >
+          <!-- 递归渲染菜单层级 -->
+          <template v-for="menu in menuList" :key="menu.id">
+            <!-- 有子菜单的父级菜单（menuType=2 且存在children） -->
+            <el-sub-menu
+                v-if="menu.children && menu.children.length > 0"
+                :index="menu.id.toString()"
+            >
               <template #title>
-                <el-icon>
-                  <Folder />
-                </el-icon>
-                <span>消耗管理</span>
+                <el-icon><Folder /></el-icon>
+                <span>{{ menu.menuName }}</span>
               </template>
-              <el-menu-item index="/coinConsume">金币消耗</el-menu-item>
-              <!-- <el-menu-item index="/beanConsume">金豆消耗</el-menu-item> -->
-            </el-sub-menu>
-            <el-sub-menu index="8">
-              <template #title>
-                <el-icon>
-                  <Folder />
-                </el-icon>
-                <span>退款管理</span>
+              <!-- 子菜单 -->
+              <template v-for="child in menu.children" :key="child.id">
+                <!-- 子菜单为叶子节点（无children） -->
+                <el-menu-item
+                    v-if="!child.children || child.children.length === 0"
+                    :index="getRoutePath(child)"
+                >
+                  <span>{{ child.menuName }}</span>
+                </el-menu-item>
+
+                <!-- 子菜单有下级 -->
+                <el-sub-menu
+                    v-else
+                    :index="child.id.toString()"
+                >
+                  <template #title>
+                    <span>{{ child.menuName }}</span>
+                  </template>
+                  <!-- 嵌归 下一级-->
+                  <template v-for="grandChild in child.children" :key="grandChild.id">
+                    <el-menu-item :index="getRoutePath(grandChild)">
+                      <span>{{ grandChild.menuName }}</span>
+                    </el-menu-item>
+                  </template>
+                </el-sub-menu>
               </template>
-              <el-menu-item index="/coinRefund">金币退款</el-menu-item>
-              <!-- <el-menu-item index="/beanRefund">金豆退款</el-menu-item> -->
             </el-sub-menu>
-            <el-menu-item index="/usergold">
-              <el-icon>
-                <Folder />
-              </el-icon>
-              <span>客户账户明细</span>
-            </el-menu-item>
-            <el-menu-item index="/permissions">
-              <el-icon>
-                <Folder />
-              </el-icon>
-              <span>权限管理</span>
+
+            <!-- 无子菜单的一级菜单 -->
+            <el-menu-item
+                v-else
+                :index="getRoutePath(menu)"
+            >
+              <el-icon><Folder /></el-icon>
+              <span>{{ menu.menuName }}</span>
             </el-menu-item>
+          </template>
           </el-menu>
+
         </el-card>
       </el-aside>
       <el-container style="margin-left: 15%; min-width: 180px">
@@ -258,7 +309,7 @@ const openChangePassword = () => {
 
 
           <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
-           
+
             <el-sub-menu index="1" class="admin">
               <template #title>
                 <el-image :src="imgrule1" alt="错误" style="width: 50px; height: 50px" />