fetch(modify):完善按钮权限

openspec/changes/add-button-permissions/proposal.md

@@ -0,0 +1,162 @@
+# Proposal: Add Button Permissions
+
+## Summary
+
+为系统中的所有页面添加按钮级权限控制，根据用户权限动态显示或隐藏按钮和操作。权限系统已实现(`hasAuth` 和 `v-permission` 指令)，本提案专注于将权限控制应用到所有相关页面。
+
+## Motivation
+
+当前系统已经实现了基于角色的权限控制(RBAC)，但大多数页面的按钮和操作缺少权限控制。这意味着所有用户都能看到所有按钮，即使他们没有权限执行相应操作。需要在UI层面根据用户权限隐藏无权限的按钮，提升用户体验和系统安全性。
+
+### Problems Solved
+
+1. **安全性提升**: 防止用户看到或尝试执行无权限操作
+2. **用户体验优化**: 只显示用户有权限的功能，避免混淆
+3. **权限一致性**: 统一所有页面的权限控制实现方式
+
+### Related Work
+
+- 权限系统基础设施已实现 (`useAuth.ts`, `permission.ts`)
+- 系统/角色页面 (`/system/role`) 已实现权限控制，作为最佳实践参考
+- 权限配置已由后端API提供（见文档中的权限JSON结构）
+
+## Proposed Solution
+
+### Approach
+
+按业务模块逐步为所有页面添加按钮权限控制，使用已有的权限基础设施：
+
+1. **表格操作按钮**: 使用 `v-permission` 指令
+2. **表格内操作**: 使用 `hasAuth()` 函数动态渲染
+3. **状态切换控件**: 使用 `disabled: !hasAuth()` 控制禁用状态
+
+### Affected Modules
+
+根据提供的权限JSON，需要添加权限控制的模块包括：
+
+1. **套餐管理** (`/package-management`)
+   - 套餐系列 (`package-series`)
+   - 套餐列表 (`package-list`)
+   - 单套餐分配 (`package-assign`)
+   - 套餐系列分配 (`series-assign`)
+
+2. **店铺管理** (`/shop-management`)
+   - 店铺列表 (`list`)
+
+3. **账号管理** (`/account-management`)
+   - 账号列表 (`account`)
+   - 平台账号 (`platform-account`)
+   - 代理账号 (`shop-account`)
+
+4. **资产管理** (`/asset-management`)
+   - IoT卡管理 (`iot-card-management`)
+   - IoT卡任务 (`iot-card-task`)
+   - 设备任务 (`device-task`)
+   - 设备管理 (`devices`)
+   - 授权记录 (`authorization-records`)
+
+5. **账户管理** (`/account`)
+   - 企业客户 (`enterprise-customer`)
+   - 运营商管理 (`carrier-management`)
+   - 订单管理 (`orders`)
+   - 佣金管理 (`commission/*`)
+
+### Implementation Pattern
+
+基于 `/system/role` 页面的实现，统一使用以下模式：
+
+```vue
+<script setup>
+import { useAuth } from '@/composables/useAuth'
+
+const { hasAuth } = useAuth()
+</script>
+
+<template>
+  <!-- 1. 表格头部按钮 -->
+  <template #left>
+    <ElButton v-permission="'module:add'">新增</ElButton>
+  </template>
+
+  <!-- 2. 表格列中的状态切换 -->
+  <ElSwitch
+    :disabled="!hasAuth('module:update_status')"
+    v-model="row.status"
+  />
+
+  <!-- 3. 表格列中的操作按钮 -->
+  <script>
+  const columns = [{
+    prop: 'operation',
+    formatter: (row) => {
+      const buttons = []
+
+      if (hasAuth('module:edit')) {
+        buttons.push(h(ArtButtonTable, { type: 'edit', onClick: () => edit(row) }))
+      }
+
+      if (hasAuth('module:delete')) {
+        buttons.push(h(ArtButtonTable, { type: 'delete', onClick: () => del(row) }))
+      }
+
+      return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
+    }
+  }]
+  </script>
+</template>
+```
+
+### Permission Mapping
+
+权限代码 (`perm_code`) 与操作的映射关系：
+
+- `module:add` -> 新增按钮
+- `module:edit` -> 编辑按钮
+- `module:delete` -> 删除按钮
+- `module:update_status` -> 状态切换
+- `module:update_xxx` -> 特定更新操作（如修改密码、修改成本价等）
+- `module:xxx` -> 特殊操作（如分配权限、查看客户、卡授权等）
+
+## Impact Analysis
+
+### Benefits
+
+1. **提升安全性**: UI层面防止无权限操作
+2. **改善UX**: 用户只看到有权限的功能
+3. **统一体验**: 所有页面使用相同的权限控制模式
+
+### Risks
+
+1. **向后兼容性**: 现有页面需要更新，可能影响用户使用习惯
+2. **测试覆盖**: 需要测试各种权限组合的显示效果
+
+### Mitigations
+
+1. 分模块逐步rollout，优先完成核心模块
+2. 权限配置由后端控制，前端只负责显示/隐藏
+3. 保持API层面的权限检查，前端权限控制仅为UI优化
+
+## Success Criteria
+
+- [ ] 所有模块的按钮根据权限正确显示/隐藏
+- [ ] 状态切换控件根据权限正确启用/禁用
+- [ ] 表格操作列根据权限动态渲染按钮
+- [ ] 权限变更后UI立即响应
+- [ ] 无权限用户看不到任何无权限操作
+
+## Dependencies
+
+- 依赖后端 API 返回正确的权限数据
+- 依赖 `useUserStore` 中的权限数据管理
+- 依赖已实现的 `useAuth` 和 `v-permission` 指令
+
+## Timeline
+
+预计需要 5-7 个工作日完成所有模块的权限控制集成。
+
+## References
+
+- 权限文档: `docs/在页面上新增按钮权限.md`
+- 参考实现: `src/views/system/role/index.vue`
+- 权限指令: `src/directives/permission.ts`
+- 权限组合式函数: `src/composables/useAuth.ts`