rbac-permission-interface-impl

frontend/src/components/layouts/MainLayout.vue

@@ -21,6 +21,7 @@ interface MenuItem {
   key: string
   icon: Component
   label: string
+  adminOnly?: boolean
   children?: MenuItem[]
 }
 
@@ -54,7 +55,7 @@ watch(() => route.path, initOpenKeys)
 // 导航菜单配置
 const menuItems: MenuItem[] = [
   { key: '/', icon: DashboardOutlined, label: '首页' },
-  { key: '/users', icon: UserOutlined, label: '用户管理' },
+  { key: '/users', icon: UserOutlined, label: '用户管理', adminOnly: true },
   { key: '/products', icon: ShoppingOutlined, label: '产品管理' },
   {
     key: 'orders-group',
@@ -74,14 +75,19 @@ const menuItems: MenuItem[] = [
       { key: '/refund-items', icon: UnorderedListOutlined, label: '退款子项' },
     ],
   },
-  { key: '/mq-status', icon: MonitorOutlined, label: '队列监控' },
+  { key: '/mq-status', icon: MonitorOutlined, label: '队列监控', adminOnly: true },
 ]
 
+const filteredMenuItems = computed(() =>
+  menuItems.filter((item) => !item.adminOnly || userStore.isAdmin),
+)
+
 const username = computed(() => userStore.username || 'admin')
 
-const handleMenuClick = ({ key }: { key: string }) => {
-  if (key.startsWith('/')) {
-    router.push(key)
+const handleMenuClick = ({ key }: { key: string | number }) => {
+  const path = String(key)
+  if (path.startsWith('/')) {
+    router.push(path)
   }
 }
 
@@ -168,7 +174,7 @@ const breadcrumbItems = computed(() => {
           theme="dark"
           @click="handleMenuClick"
         >
-          <template v-for="item in menuItems" :key="item.key">
+          <template v-for="item in filteredMenuItems" :key="item.key">
             <a-sub-menu v-if="item.children" :key="item.key">
               <template #icon><component :is="item.icon" /></template>
               <template #title>{{ item.label }}</template>