权限系统增强实现计划

面向 AI 代理的工作者： 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（- [ ]）语法来跟踪进度。

目标： 实现完整的权限系统增强，包括 Permission Store、v-permission 指令、动态菜单渲染和 API 权限检查。

架构： 使用 Pinia 统一管理权限数据，localStorage 持久化存储；通过 v-permission 指令实现按钮级权限控制；从后端 API 获取菜单数据动态渲染；在请求拦截器中添加 API 权限检查。

技术栈： Vue 3, Pinia, TypeScript, Element Plus, jwt-decode

文件结构

新增文件

novalon-manage-web/src/
├── stores/
│   └── permission.ts                    # Permission Store
├── directives/
│   └── permission.ts                    # v-permission 指令
├── components/
│   └── MenuItem.vue                     # 递归菜单组件
├── utils/
│   └── permission-check.ts              # API 权限检查工具
└── __tests__/
    ├── stores/
    │   └── permission.test.ts           # Permission Store 测试
    ├── directives/
    │   └── permission.test.ts           # v-permission 指令测试
    ├── components/
    │   └── MenuItem.test.ts             # MenuItem 组件测试
    └── utils/
        └── permission-check.test.ts     # API 权限检查测试

修改文件

novalon-manage-web/src/
├── main.ts                              # 注册权限指令
├── views/system/Login.vue               # 集成 Permission Store
├── layouts/DefaultLayout.vue            # 使用动态菜单
└── utils/request.ts                     # 添加 API 权限检查

任务 1：创建 Permission Store

文件：

创建：novalon-manage-web/src/stores/permission.ts
测试：novalon-manage-web/src/__tests__/stores/permission.test.ts
步骤 1：编写 Permission Store 测试 - 基础功能

// novalon-manage-web/src/__tests__/stores/permission.test.ts
import { describe, it, expect, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { usePermissionStore } from '@/stores/permission'

describe('Permission Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
    localStorage.clear()
  })

  describe('基础功能', () => {
    it('应该正确初始化状态', () => {
      const store = usePermissionStore()
      
      expect(store.roles).toEqual([])
      expect(store.permissions).toEqual([])
      expect(store.menus).toEqual([])
      expect(store.loaded).toBe(false)
    })

    it('应该正确设置权限数据', () => {
      const store = usePermissionStore()
      
      store.setPermissionData({
        roles: ['admin'],
        permissions: ['user:read', 'user:delete'],
        menus: [
          {
            id: 1,
            name: '仪表盘',
            path: '/dashboard',
            icon: 'Odometer',
            sort: 1
          }
        ]
      })
      
      expect(store.roles).toEqual(['admin'])
      expect(store.permissions).toEqual(['user:read', 'user:delete'])
      expect(store.menus).toHaveLength(1)
      expect(store.loaded).toBe(true)
    })

    it('应该正确清除权限数据', () => {
      const store = usePermissionStore()
      
      store.setPermissionData({
        roles: ['admin'],
        permissions: ['user:read'],
        menus: []
      })
      
      store.clearPermissionData()
      
      expect(store.roles).toEqual([])
      expect(store.permissions).toEqual([])
      expect(store.menus).toEqual([])
      expect(store.loaded).toBe(false)
    })
  })
})

步骤 2：运行测试验证失败