Merge remote-tracking branch 'origin/lihui/feature-20250711103624-金币二期' into lihui/feature-20250711103624-金币二期

# Conflicts:
#	src/utils/menuUtils.js
#	src/views/usergold/clientCount.vue

src/router/index.js

@@ -1,17 +1,11 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import {createRouter, createWebHashHistory} from 'vue-router';
 import axios from "axios";
-import request from "@/util/http.js";
-import {ref} from "vue";
+import {storeToRefs} from "pinia";
+import {useAdminStore} from "@/store/index.js";
+
 
 // 路由定义（包含权限映射 meta.permissionId）
 const routes = [
-    // {
-
-    //     path: '/workspace',
-    //     name: "workspace",
-    //     component: () => import("../views/workspace/audit.vue"),
-    //     meta: { permissionId: 10 } // 对应"工作台展示"id=10
-    // },
     {
         path: '/',
         redirect: "/login"
@@ -21,17 +15,17 @@ const routes = [
         name: "login",
         component: () => import("../views/login.vue"),
     },
-        {
-            meta: { requireAuth: true },
+    {
+        meta: {requireAuth: true},
         path: '/',
         component: () => import("../views/home.vue"),
-            children: [
-                // 工作台
+        children: [
+            // 工作台
             {
                 path: '/workspace',
                 name: "workspace",
                 component: () => import("../views/workspace/index.vue"),
-                meta: { permissionId: 10 } // 对应"工作台展示"id=10
+                meta: {permissionId: 10} // 对应"工作台展示"id=10
             },
 
 
@@ -40,148 +34,147 @@ const routes = [
                 path: '/audit',
                 name: "audit",
                 component: () => import("../views/audit/audit.vue"),
-                meta: { permissionId: 40 },
+                meta: {permissionId: 40},
                 // redirect: '/index',
                 children: [
-                    // 充值审核========================================
+                    // 充值审核
                     {
                         path: 'rechargeAudit',
                         name: "rechargeAudit",
                         component: () => import("../views/audit/rechargeAudit.vue"),
-                        meta: { permissionId: [11, 12] } // 对应"查看充值审核"id=11、"充值审批"id=12
+                        meta: {permissionId: [11, 12]} // 对应"查看充值审核"id=11、"充值审批"id=12
                     },
-                // 退款审核
+                    // 退款审核
                     {
                         path: 'refundAudit',
                         name: "refundAudit",
                         component: () => import("../views/audit/refundAudit.vue"),
-                        meta: { permissionId: [13, 14] } // 对应"查看退款审核"id=13、"退款审批"id=14
+                        meta: {permissionId: [13, 14]} // 对应"查看退款审核"id=13、"退款审批"id=14
                     },
                 ]
             },
 
 
-
-                // 金币消耗
+            // 金币消耗
             {
                 path: '/coinConsume',
                 name: "coinConsume",
                 component: () => import("../views/consume/coinConsume.vue"),
                 // redirect: '/coinConsume/add',
-                meta: { permissionId: 6 },
-                    children: [
-                        // 金币新增消耗
+                meta: {permissionId: 6},
+                children: [
+                    // 金币新增消耗
                     {
                         path: 'add',
                         name: "addCoinConsume",
                         component: () => import("../views/consume/addCoinConsume.vue"),
-                        meta: { permissionId: 19 } // 对应"提交金币消耗"id=19
+                        meta: {permissionId: 19} // 对应"提交金币消耗"id=19
                     },
-                        // 金币消耗明细详情
+                    // 金币消耗明细详情
                     {
                         path: 'detail',
                         name: "coinConsumeDetail",
                         component: () => import("../views/consume/coinConsumeDetail.vue"),
-                        meta: { permissionId: 20 } // 对应"查看金币消耗明细"id=20
+                        meta: {permissionId: 20} // 对应"查看金币消耗明细"id=20
                     }
                 ]
             },
 
-                // 汇率管理
+            // 汇率管理
             {
                 path: '/rate',
                 name: "rate",
                 component: () => import("../views/managerecharge/rate.vue"),
-                meta: { permissionId: [15, 16] } // 对应"汇率查看"id=15、"汇率修改"id=16
+                meta: {permissionId: [15, 16]} // 对应"汇率查看"id=15、"汇率修改"id=16
             },
-                // 金币充值
+            // 金币充值
             {
                 path: '/coinRecharge',
                 name: "coinRecharge",
                 component: () => import("../views/recharge/coinRecharge.vue"),
                 // redirect: '/coinRecharge/add',
-                    children: [
-                        // 金币新增充值
+                children: [
+                    // 金币新增充值
                     {
                         path: 'add',
                         name: "addCoinRecharge",
                         component: () => import("../views/recharge/addCoinRecharge.vue"),
-                        meta: { permissionId: 17 } // 对应"提交金币充值"id=17
+                        meta: {permissionId: 17} // 对应"提交金币充值"id=17
                     },
-                        // 金币充值明细详情
+                    // 金币充值明细详情
                     {
                         path: 'detail',
                         name: "coinRechargeDetail",
                         component: () => import("../views/recharge/coinRechargeDetail.vue"),
-                        meta: { permissionId: 18 } // 对应"查看金币充值明细"id=18
+                        meta: {permissionId: 18} // 对应"查看金币充值明细"id=18
                     }
                 ]
             },
 
-                // 金币退款
+            // 金币退款
             {
                 path: '/coinRefund',
                 name: "coinRefund",
                 component: () => import("../views/refund/coinRefund.vue"),
                 // redirect: '/coinRefund/add',
-                meta: { permissionId: 7 },
-                    children: [
+                meta: {permissionId: 7},
+                children: [
                     // 金币新增退款
                     {
                         path: 'add',
                         name: "addCoinRefund",
                         component: () => import("../views/refund/addCoinRefund.vue"),
-                        meta: { permissionId: 21 } // 对应"提交金币退款"id=21
+                        meta: {permissionId: 21} // 对应"提交金币退款"id=21
                     },
                     // 金币退款明细详情
                     {
                         path: 'detail',
                         name: "coinRefundDetail",
                         component: () => import("../views/refund/coinRefundDetail.vue"),
-                        meta: { permissionId: 22 } // 对应"查看金币退款明细"id=22
+                        meta: {permissionId: 22} // 对应"查看金币退款明细"id=22
                     }
                 ]
             },
 
-                // 客户账户明细
+            // 客户账户明细
             {
                 path: '/usergold',
                 name: "usergold",
                 component: () => import("../views/usergold/clientCount.vue"),
                 // redirect: '/usergold/detail',
-                meta: { permissionId: 8 },
-                    children: [
-                        // 金币明细
+                meta: {permissionId: 8},
+                children: [
+                    // 金币明细
                     {
                         path: 'detail',
                         name: "clientCountDetail",
                         component: () => import("../views/usergold/clientCountDetail.vue"),
-                        meta: { permissionId: 23 } // 对应"查看金币明细"id=23
+                        meta: {permissionId: 23} // 对应"查看金币明细"id=23
                     },
-                        // 金币余额
+                    // 金币余额
                     {
                         path: 'balance',
                         name: "clientCountBalance",
                         component: () => import("../views/usergold/clientCountBalance.vue"),
-                        meta: { permissionId: 24 } // 对应"查看金币余额"id=24
+                        meta: {permissionId: 24} // 对应"查看金币余额"id=24
                     },
-                    ]
-                 },
-                // 权限管理
+                ]
+            },
+            // 权限管理
             {
                 path: '/permissions',
                 name: "permissions",
                 component: () => import("../views/permissions/permission.vue"),
-                meta: { permissionId: [25, 26, 27, 28, 29] } // 对应权限管理下的所有操作
+                meta: {permissionId: [25, 26, 27, 28, 29]} // 对应权限管理下的所有操作
             },
-                // 没有权限
+            // 没有权限
             {
                 path: '/noPermission',
                 name: "noPermission",
                 component: () => import("../views/noPermissionPage.vue")
             }
-            ]
-        },
+        ]
+    },
     // 跳转页面（无需权限）
     {
         path: '/PasswordSuccess',
@@ -229,26 +222,14 @@ const getAllPermissionIds = (menuTree) => {
     return permissionIds;
 };
 
-// 存储管理员信息（全局可访问）
-const adminData = ref(null);
 
-// 获取管理员信息（返回Promise，方便路由守卫中使用）
-export const getAdminData = async function () {
-    try {
-        const result = await request({
-            url: "/admin/userinfo",
-
-        });
-        adminData.value = result; // 存储管理员信息（包含roleId）
-        return result; // 返回结果，供路由守卫使用
-    } catch (error) {
-        console.log("获取管理员信息失败", error);
-        throw error; // 抛出错误，让路由守卫捕获
-    }
-};
 
 // 全局路由守卫
 router.beforeEach(async (to, from, next) => {
+
+    const adminStore = useAdminStore()
+    const { adminData, menuTree } = storeToRefs(adminStore)
+
     const token = localStorage.getItem("token");
     const machineId = localStorage.getItem("machineId");
 
@@ -265,40 +246,27 @@ router.beforeEach(async (to, from, next) => {
         let roleId = null;
         console.log('adminData:', adminData)
         try {
-            await getAdminData(); // 等待管理员信息获取完成
             roleId = adminData.value.roleId;
             if (!roleId) {
-                throw new Error("未获取到roleId");
+                localStorage.removeItem('token'); // 清除token，强制重新登录
+                next(`/login?machineId=${machineId || ''}`);
+                return;
             }
         } catch (error) {
             localStorage.removeItem('token'); // 清除token，强制重新登录
+            adminStore.clearState()
             next(`/login?machineId=${machineId || ''}`);
             return;
         }
 
 
         let userPermissionIds = [];
-        try {
-            const response = await request( {url: "/menu/tree",
-                data:{id: roleId}
-            });
-            console.log('roleId:', roleId)
-            console.log('response:', response)
-            console.log('userPermissionIds:', userPermissionIds)
-            if (response.code === 200 && response.data) {
-                userPermissionIds = getAllPermissionIds(response.data); // 提取权限id
-                console.log('userPermissionIds:', userPermissionIds)
-            }
-        } catch (error) {
-            console.error('获取菜单树失败：', error);
-            localStorage.removeItem('token');
-            next(`/login?machineId=${machineId || ''}`);
-            return;
-        }
 
-        // 2.4 权限验证（逻辑不变）
-        console.log('to.meta:',to.meta)
+        // 拿权限id
+        userPermissionIds = getAllPermissionIds(menuTree.value)
 
+        // 2.4 权限验证（逻辑不变）
+        console.log('to.meta:', to.meta)
 
         const requiresPermission = to.meta && to.meta.permissionId;
         if (requiresPermission) {

src/views/audit/audit.vue

@@ -1,66 +1,117 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
           :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'"
-          @click="goRechargeAudit"
+          @click="navigateTo('rechargeAudit')"
+          :disabled="!hasRechargePermission"
       >
         充值审核
       </el-button>
       <el-button
           :type="activeTab === 'refundAudit' ? 'primary' : 'default'"
-          @click="goRefundAudit"
+          @click="navigateTo('refundAudit')"
+          :disabled="!hasRefundPermission"
       >
         退款审核
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
-<script setup >
-import {onMounted, ref, watch} from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+<script setup>
+import {ref, watch, onMounted, computed} from 'vue';
+import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit');
-//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
-//此时获取到的路由信息是clientCountDetail，所以默认是detail
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+const activeTab = ref('');
 
-const goRechargeAudit = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'rechargeAudit';
-  router.push({ name: 'rechargeAudit' });
-};
+// 充值审核权限判断
+const hasRechargePermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '充值审核' || menu.menuName === '财务审核'
+  );
+});
 
-const goRefundAudit = () => {
-  // 点击按钮时更新 activeTab 为balance
-  activeTab.value = 'refundAudit';
-  router.push({ name: 'refundAudit' });
-};
+// 退款审核权限判断
+const hasRefundPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '退款审核' || menu.menuName === '财务审核'
+  );
+});
 
-// 监听路由变化，更新 activeTab
-watch(() => route.name, (newName) => {
-  if (newName === 'rechargeAudit') {
-    activeTab.value = 'rechargeAudit';
-  } else if (newName === 'refundAudit') {
-    activeTab.value = 'refundAudit';
-  }});
+// 导航方法
+const navigateTo = (name) => {
+  // 检查对应权限，无权限则不执行跳转
+  if ((name === 'rechargeAudit' && !hasRechargePermission.value) ||
+      (name === 'refundAudit' && !hasRefundPermission.value)) {
+    return;
+  }
+  activeTab.value = name;
+  router.push({name});
+};
 
-// 当进入父路由时，默认跳转到金币明细页面
-// if (route.name === 'usergold') {
-//   router.push({ name: 'clientCountDetail' });
-// }
+// 检查权限并返回默认路由
+const getDefaultAuditRoute = () => {
+  // 优先检查充值审核权限
+  if (hasRechargePermission.value) return 'rechargeAudit';
+  // 其次检查退款审核权限
+  if (hasRefundPermission.value) return 'refundAudit';
+  // 无任何权限时返回null
+  return null;
+};
 
+// 监听路由变化
+watch(() => route.path, (newPath) => {
+  // 当路径变更为 /audit 时执行跳转逻辑
+  if (newPath === '/audit') {
+    const defaultRoute = getDefaultAuditRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      console.warn('用户没有充值审核和退款审核的权限');
+      // router.push({ name: 'noPermission' });
+    }
+  }
+});
 
-onMounted(async function () {
-  console.log("@@@@@@@@@@@@",route.name)
+// 监听路由变化更新标签状态
+watch(() => route.name, (newName) => {
+  // 只有在有权限的情况下才更新标签状态
+  if (newName === 'rechargeAudit' && hasRechargePermission.value) {
+    activeTab.value = newName;
+  } else if (newName === 'refundAudit' && hasRefundPermission.value) {
+    activeTab.value = newName;
+  }
 });
 
+// 初始化逻辑 - 保留原有逻辑处理首次加载
+onMounted(() => {
+  // 父路由默认跳转
+  if (route.path === '/audit') {
+    const defaultRoute = getDefaultAuditRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      // console.warn('用户没有充值审核和退款审核的权限');
+      router.push({ name: 'noPermission' });
+    }
+  } else {
+    // 非父路由初始化当前标签状态（带权限校验）
+    if (route.name === 'rechargeAudit' && hasRechargePermission.value) {
+      activeTab.value = route.name;
+    } else if (route.name === 'refundAudit' && hasRefundPermission.value) {
+      activeTab.value = route.name;
+    }
+  }
+});
 </script>

src/views/consume/coinConsume.vue

@@ -1,61 +1,121 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-        :type="activeTab === 'add' ? 'primary' : 'default'"
-        @click="goToAdd"
+          :type="activeTab === 'add' ? 'primary' : 'default'"
+          @click="navigateTo('add')"
+          :disabled="!hasAddPermission"
       >
-        新增消耗
+      新增消耗
       </el-button>
       <el-button
-        :type="activeTab === 'detail' ? 'primary' : 'default'"
-        @click="goToDetail"
+          :type="activeTab === 'detail' ? 'primary' : 'default'"
+          @click="navigateTo('detail')"
+          :disabled="!hasDetailPermission"
       >
-        金币消耗明细
+      金币消耗明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import {ref, watch, onMounted, computed} from 'vue';  // 新增computed导入
+import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinConsume，所以默认是add
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+const activeTab = ref('');
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({ name: 'addCoinConsume' });
+// 路由名称映射
+const routeMap = {
+  add: 'addCoinConsume',
+  detail: 'coinConsumeDetail'
 };
 
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'coinConsumeDetail' });
+// 新增消耗权限判断（与其他页面保持一致的computed写法）
+const hasAddPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '新增消耗' || menu.menuName === '消耗管理'
+  );
+});
+
+// 金币消耗明细权限判断（补充明细权限逻辑）
+const hasDetailPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币消耗明细' || menu.menuName === '消耗管理'
+  );
+});
+
+// 导航方法（补充权限校验）
+const navigateTo = (tab) => {
+  // 检查对应权限，无权限则不执行跳转
+  if ((tab === 'add' && !hasAddPermission.value) ||
+      (tab === 'detail' && !hasDetailPermission.value)) {
+    return;
+  }
+  activeTab.value = tab;
+  router.push({name: routeMap[tab]});
+};
+
+// 检查权限并返回默认路由（优化权限判断逻辑）
+const getDefaultConsumeRoute = () => {
+  // 优先检查新增消耗权限
+  if (hasAddPermission.value) return 'add';
+  // 其次检查明细权限
+  if (hasDetailPermission.value) return 'detail';
+  // 无任何权限时返回null
+  return null;
 };
 
-// 监听路由变化，更新 activeTab
+// 监听路由变化更新标签状态（增加权限校验）
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinConsume') {
+  if (newName === routeMap.add && hasAddPermission.value) {
     activeTab.value = 'add';
-  } else if (newName === 'coinConsumeDetail') {
+  } else if (newName === routeMap.detail && hasDetailPermission.value) {
     activeTab.value = 'detail';
   }
 });
 
-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinConsume') {
-//   router.push({ name: 'addCoinConsume' });
-// }
+// 监听路径变化，处理直接访问父路由的情况
+watch(() => route.path, (newPath) => {
+  if (newPath === '/coinConsume') {  // 假设父路由路径为/coinConsume
+    const defaultRoute = getDefaultConsumeRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      console.warn('用户没有新增消耗和金币消耗明细的权限');
+      // router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  }
+});
+
+// 初始化逻辑（完善权限校验和状态同步）
+onMounted(() => {
+  // 父路由默认跳转
+  if (route.path === '/coinConsume') {  // 假设父路由路径为/coinConsume
+    const defaultRoute = getDefaultConsumeRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      // console.warn('用户没有新增消耗和金币消耗明细的权限');
+      router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  } else {
+    // 子路由直接进入时同步状态（带权限校验）
+    if (route.name === routeMap.add && hasAddPermission.value) {
+      activeTab.value = 'add';
+    } else if (route.name === routeMap.detail && hasDetailPermission.value) {
+      activeTab.value = 'detail';
+    }
+  }
+});
 </script>

src/views/recharge/coinRecharge.vue

@@ -1,61 +1,119 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-        :type="activeTab === 'add' ? 'primary' : 'default'"
-        @click="goToAdd"
+          :type="activeTab === 'add' ? 'primary' : 'default'"
+          @click="navigateTo('add')"
+          :disabled="!hasAddPermission"
       >
         新增充值
       </el-button>
       <el-button
-        :type="activeTab === 'detail' ? 'primary' : 'default'"
-        @click="goToDetail"
+          :type="activeTab === 'detail' ? 'primary' : 'default'"
+          @click="navigateTo('detail')"
+          :disabled="!hasDetailPermission"
       >
         金币充值明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import {ref, watch, onMounted, computed} from 'vue';
+import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-const activeTab = ref(route.name === 'coinRechargeDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinRechargeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinRecharge，所以默认是add
-//此时获取到的路由信息是coinRecharge，所以默认是add
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+// 路由名称映射表
+const routeMap = {
+  add: 'addCoinRecharge',
+  detail: 'coinRechargeDetail'
+};
+
+// 激活的标签
+const activeTab = ref('');
+
+// 检查新增权限
+const hasAddPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '新增充值' || menu.menuName === '充值管理'
+  );
+});
+
+// 检查明细权限
+const hasDetailPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币充值明细' || menu.menuName === '充值管理'
+  );
+});
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({ name: 'addCoinRecharge' });
+// 统一导航方法
+const navigateTo = (tab) => {
+  // 检查权限后再跳转
+  if ((tab === 'add' && !hasAddPermission.value) ||
+      (tab === 'detail' && !hasDetailPermission.value)) {
+    return;
+  }
+  activeTab.value = tab;
+  router.push({name: routeMap[tab]});
 };
 
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'coinRechargeDetail' });
+// 获取默认路由
+const getDefaultRoute = () => {
+  if (hasAddPermission.value) return 'add';
+  if (hasDetailPermission.value) return 'detail';
+  return null;
 };
 
-// 监听路由变化，更新 activeTab
+// 监听路由变化更新标签
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinRecharge') {
+  if (newName === routeMap.add && hasAddPermission.value) {
     activeTab.value = 'add';
-  } else if (newName === 'coinRechargeDetail') {
+  } else if (newName === routeMap.detail && hasDetailPermission.value) {
     activeTab.value = 'detail';
   }
 });
 
-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinRecharge') {
-//   router.push({ name: 'addCoinRecharge' });
-// }
+// 监听路径变化，处理直接访问父路由路径的情况
+watch(() => route.path, (newPath) => {
+  if (newPath === '/coinRecharge') {  // 假设父路由路径为/coinRecharge
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      console.warn('用户没有新增充值和金币充值明细的权限');
+      // router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  }
+});
+
+// 初始化
+onMounted(() => {
+  // 父路由默认跳转（同时处理路径和名称两种判断方式）
+  if (route.name === 'coinRecharge' || route.path === '/coinRecharge') {
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      // console.warn('用户没有新增充值和金币充值明细的权限');
+      router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  } else {
+    // 子路由直接进入时同步状态（增加权限校验）
+    if (route.name === routeMap.add && hasAddPermission.value) {
+      activeTab.value = 'add';
+    } else if (route.name === routeMap.detail && hasDetailPermission.value) {
+      activeTab.value = 'detail';
+    }
+  }
+});
 </script>

src/views/refund/coinRefund.vue

@@ -1,61 +1,119 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-        :type="activeTab === 'add' ? 'primary' : 'default'"
-        @click="goToAdd"
+          :type="activeTab === 'add' ? 'primary' : 'default'"
+          @click="navigateTo('add')"
+          :disabled="!hasAddPermission"
       >
         新增退款
       </el-button>
       <el-button
-        :type="activeTab === 'detail' ? 'primary' : 'default'"
-        @click="goToDetail"
+          :type="activeTab === 'detail' ? 'primary' : 'default'"
+          @click="navigateTo('detail')"
+          :disabled="!hasDetailPermission"
       >
         金币退款明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import {ref, watch, onMounted, computed} from 'vue';
+import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'coinRefundDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinRefundDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinRefund，所以默认是add
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+// 路由名称映射表
+const routeMap = {
+  add: 'addCoinRefund',
+  detail: 'coinRefundDetail'
+};
+
+// 激活的标签
+const activeTab = ref('');
+
+// 检查新增权限
+const hasAddPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '新增退款' || menu.menuName === '退款管理'
+  );
+});
+
+// 检查明细权限
+const hasDetailPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币退款明细' || menu.menuName === '退款管理'
+  );
+});
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({ name: 'addCoinRefund' });
+// 统一导航方法
+const navigateTo = (tab) => {
+  // 检查权限后再跳转
+  if ((tab === 'add' && !hasAddPermission.value) ||
+      (tab === 'detail' && !hasDetailPermission.value)) {
+    return;
+  }
+  activeTab.value = tab;
+  router.push({name: routeMap[tab]});
 };
 
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'coinRefundDetail' });
+// 获取默认路由
+const getDefaultRoute = () => {
+  if (hasAddPermission.value) return 'add';
+  if (hasDetailPermission.value) return 'detail';
+  return null;
 };
 
-// 监听路由变化，更新 activeTab
+// 监听路由变化更新标签
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinRefund') {
+  if (newName === routeMap.add && hasAddPermission.value) {
     activeTab.value = 'add';
-  } else if (newName === 'coinRefundDetail') {
+  } else if (newName === routeMap.detail && hasDetailPermission.value) {
     activeTab.value = 'detail';
   }
 });
 
-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinRefund') {
-//   router.push({ name: 'addCoinRefund' });
-// }
+// 监听路径变化，处理父路由直接访问的情况
+watch(() => route.path, (newPath) => {
+  if (newPath === '/coinRefund') {
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      console.warn('用户没有新增退款和金币退款明细的权限');
+      // router.push({ name: 'noPermission' });
+    }
+  }
+});
+
+// 初始化
+onMounted(() => {
+  // 父路由默认跳转
+  if (route.path === '/coinRefund') {
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      // console.warn('用户没有新增退款和金币退款明细的权限');
+      router.push({ name: 'noPermission' });
+    }
+  } else {
+    // 子路由直接进入时同步状态
+    if (route.name === routeMap.add && hasAddPermission.value) {
+      activeTab.value = 'add';
+    } else if (route.name === routeMap.detail && hasDetailPermission.value) {
+      activeTab.value = 'detail';
+    }
+  }
+});
 </script>