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`

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

@@ -0,0 +1,190 @@
+# Tasks: Add Button Permissions
+
+## Overview
+
+将按钮权限控制系统地应用到所有相关页面。每个任务包含引入 `useAuth`、添加 `v-permission` 指令，以及在表格操作列中使用 `hasAuth()` 进行权限判断。
+
+## Tasks
+
+### 1. 套餐管理模块 (Package Management) ✅
+
+- [x] **套餐系列页面** (`/package-management/package-series`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增套餐系列"按钮添加 `v-permission="'package_series:add'"`
+  - ✅ 为状态切换添加 `disabled: !hasAuth('package_series:update_status')`
+  - ✅ 在操作列中使用 `hasAuth()` 判断编辑权限 (`package_series:edit`)和删除权限 (`package_series:delete`)
+
+- [x] **套餐列表页面** (`/package-management/package-list`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增套餐"按钮添加 `v-permission="'package:add'"`
+  - ✅ 为上/下架切换添加 `disabled: !hasAuth('package:update_away')`
+  - ✅ 为状态切换添加 `disabled: !hasAuth('package:update_status')`
+  - ✅ 在操作列中使用 `hasAuth()` 判断编辑 (`package:edit`) 和删除 (`package:delete`) 权限
+
+- [x] **单套餐分配页面** (`/package-management/package-assign`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增分配"按钮添加 `v-permission="'package_assign:add'"`
+  - ✅ 为状态切换添加 `disabled: !hasAuth('package_assign:update_status')`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 修改成本价: `package_assign:update_cost`
+    - 编辑: `package_assign:edit`
+    - 删除: `package_assign:delete`
+
+- [x] **套餐系列分配页面** (`/package-management/series-assign`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增系列分配"按钮添加 `v-permission="'series_assign:add'"`
+  - ✅ 为状态切换添加 `disabled: !hasAuth('series_assign:update_status')`
+  - ✅ 在操作列中使用 `hasAuth()` 判断编辑 (`series_assign:edit`) 和删除 (`series_assign:delete`) 权限
+
+### 2. 店铺管理模块 (Shop Management) ✅
+
+- [x] **店铺列表页面** (`/product/shop`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增店铺"按钮添加 `v-permission="'shop:add'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 查看客户: `shop:look_customer`
+    - 编辑: `shop:edit`
+    - 删除: `shop:delete`
+  - ✅ 在右键菜单中使用 `hasAuth()` 动态生成菜单项
+
+### 3. 账号管理模块 (Account Management) ✅
+
+- [x] **账号列表页面** (`/account-management/account`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增账号"按钮添加 `v-permission="'account:add'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 分配角色: `account:patch_role`
+    - 编辑: `account:edit`
+    - 删除: `account:delete`
+
+- [x] **平台账号页面** (`/account-management/platform-account`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增平台账号"按钮添加 `v-permission="'platform_account:add'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 分配角色: `platform_account:patch_role`
+    - 修改密码: `platform_account:update_psd`
+    - 编辑: `platform_account:edit`
+    - 删除: `platform_account:delete`
+
+- [x] **代理账号页面** (`/account-management/shop-account`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增代理账号"按钮添加 `v-permission="'shop_account:add'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 修改密码: `shop_account:update_psd`
+    - 编辑: `shop_account:edit`
+
+### 4. 资产管理模块 (Asset Management) ✅
+
+- [x] **IoT卡管理页面** (`/asset-management/iot-card-management`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为表格头部操作按钮添加权限控制：
+    - 批量分配: `v-permission="'iot_card:batch_allocation'"`
+    - 批量回收: `v-permission="'iot_card:batch_recycle'"`
+    - 批量设置套餐系列: `v-permission="'iot_card:batch_setting'"`
+    - 批量充值: `v-permission="'iot_card:batch_recharge'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 网卡分销: `iot_card:network_distribution`
+    - 网卡回收: `iot_card:network_recycle`
+    - 变更套餐: `iot_card:change_package`
+  - ✅ 验证权限控制正确工作
+
+- [x] **IoT卡任务页面** (`/asset-management/iot-card-task`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"批量导入IoT卡"按钮添加 `v-permission="'lot_task:bulk_import'"`
+  - ✅ 验证权限控制正确工作
+
+- [x] **设备任务页面** (`/asset-management/device-task`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"批量导入设备"按钮添加 `v-permission="'device_task:bulk_import'"`
+  - ✅ 验证权限控制正确工作
+
+- [x] **设备管理页面** (`/asset-management/device-list`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为表格头部操作按钮添加权限控制：
+    - 批量分配: `v-permission="'devices:batch_allocation'"`
+    - 批量回收: `v-permission="'devices:batch_recycle'"`
+    - 批量设置套餐系列: `v-permission="'devices:batch_setting'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 查看绑定的卡: `devices:look_binding`
+    - 删除设备: `devices:delete`
+  - ✅ 验证权限控制正确工作
+
+- [x] **授权记录页面** (`/asset-management/authorization-records`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 在操作列中使用 `hasAuth()` 判断修改备注权限 (`authorization_records:update_remark`)
+  - ✅ 验证权限控制正确工作
+
+### 5. 账户管理模块 (Account Module) ✅
+
+- [x] **企业客户页面** (`/account/enterprise-customer`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增企业客户"按钮添加 `v-permission="'enterprise_customer:add'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断以下权限：
+    - 编辑: `enterprise_customer:edit`
+    - 查看客户: `enterprise_customer:look_customer`
+    - 卡授权: `enterprise_customer:card_authorization`
+    - 修改密码: `enterprise_customer:update_pwd`
+  - ✅ 验证权限控制正确工作
+
+- [x] **运营商管理页面** (`/account/carrier-management`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增运营商"按钮添加 `v-permission="'carrier:add'"`
+  - ✅ 为状态切换添加 `disabled: !hasAuth('carrier:update_status')`
+  - ✅ 在操作列中使用 `hasAuth()` 判断编辑 (`carrier:edit`) 和删除 (`carrier:delete`) 权限
+  - ✅ 验证权限控制正确工作
+
+- [x] **订单管理页面** (`/account/orders`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"创建订单"按钮添加 `v-permission="'orders:add'"`
+  - ✅ 验证权限控制正确工作
+
+- [x] **提现配置页面** (`/account/commission/withdrawal-settings`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增配置"按钮添加 `v-permission="'withdrawal_settings:add'"`
+  - ✅ 验证权限控制正确工作
+
+- [x] **我的佣金页面** (`/account/commission/my-commission`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"发起提现"按钮添加 `v-permission="'my_commission:add'"`
+  - ✅ 验证权限控制正确工作
+
+- [x] **代理商佣金管理页面** (`/account/commission/agent-commission`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 在操作列中使用 `hasAuth()` 判断查看详情权限 (`agent_commission:detail`)
+  - ✅ 验证权限控制正确工作
+
+### 6. 系统管理模块 (System Management) ✅
+
+- [x] **权限管理页面** (`/system/permission`)
+  - ✅ 引入 `useAuth` composable
+  - ✅ 为"新增权限"按钮添加 `v-permission="'permission:add'"`
+  - ✅ 在操作列中使用 `hasAuth()` 判断编辑 (`permission:edit`) 和删除 (`permission:delete`) 权限
+  - ✅ 验证权限控制正确工作
+
+### 7. 测试与文档
+
+- [ ] **权限控制测试**
+  - 创建不同权限组合的测试用户
+  - 验证每个页面的按钮显示/隐藏符合预期
+  - 验证状态切换的启用/禁用符合预期
+  - 测试权限动态变更后UI的响应
+
+- [ ] **文档更新**
+  - 更新开发文档，说明权限控制的实现方式
+  - 添加权限代码与功能的映射表
+  - 提供新页面添加权限控制的指南
+
+## Validation
+
+每个任务完成后需验证：
+
+1. **功能正确性**: 有权限时按钮/操作可见且可用
+2. **权限隔离**: 无权限时按钮/操作不可见或禁用
+3. **用户体验**: 权限控制不影响正常操作流程
+4. **性能**: 权限检查不影响页面渲染性能
+
+## Dependencies
+
+- 所有任务依赖权限基础设施 (`useAuth`, `v-permission`)
+- 任务可并行执行，建议按模块分批进行
+- 优先级: 核心模块 (账号、套餐、资产) > 其他模块