one-pipe-system/openspec/changes/add-button-permissions/tasks.md

Tasks: Add Button Permissions

Overview

将按钮权限控制系统地应用到所有相关页面。每个任务包含引入 useAuth、添加 v-permission 指令，以及在表格操作列中使用 hasAuth() 进行权限判断。

Tasks

1. 套餐管理模块 (Package Management) ✅

• 套餐系列页面 (/package-management/package-series)

  • ✅ 引入 useAuth composable
  • ✅ 为"新增套餐系列"按钮添加 v-permission="'package_series:add'"
  • ✅ 为状态切换添加 disabled: !hasAuth('package_series:update_status')
  • ✅ 在操作列中使用 hasAuth() 判断编辑权限 (package_series:edit)和删除权限 (package_series:delete)

• 套餐列表页面 (/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) 权限

• 单套餐分配页面 (/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

• 套餐系列分配页面 (/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) ✅

• 店铺列表页面 (/product/shop)
  • ✅ 引入 useAuth composable
  • ✅ 为"新增店铺"按钮添加 v-permission="'shop:add'"
  • ✅ 在操作列中使用 hasAuth() 判断以下权限：
    • 查看客户: shop:look_customer
    • 编辑: shop:edit
    • 删除: shop:delete
  • ✅ 在右键菜单中使用 hasAuth() 动态生成菜单项

3. 账号管理模块 (Account Management) ✅

• 账号列表页面 (/account-management/account)

  • ✅ 引入 useAuth composable
  • ✅ 为"新增账号"按钮添加 v-permission="'account:add'"
  • ✅ 在操作列中使用 hasAuth() 判断以下权限：
    • 分配角色: account:patch_role
    • 编辑: account:edit
    • 删除: account:delete

• 平台账号页面 (/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

• 代理账号页面 (/account-management/shop-account)

  • ✅ 引入 useAuth composable
  • ✅ 为"新增代理账号"按钮添加 v-permission="'shop_account:add'"
  • ✅ 在操作列中使用 hasAuth() 判断以下权限：
    • 修改密码: shop_account:update_psd
    • 编辑: shop_account:edit

4. 资产管理模块 (Asset Management) ✅

• 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
  • ✅ 验证权限控制正确工作

• IoT卡任务页面 (/asset-management/iot-card-task)

  • ✅ 引入 useAuth composable
  • ✅ 为"批量导入IoT卡"按钮添加 v-permission="''"
  • ✅ 验证权限控制正确工作

• 设备任务页面 (/asset-management/device-task)

  • ✅ 引入 useAuth composable
  • ✅ 为"批量导入设备"按钮添加 v-permission="'device_task:bulk_import'"
  • ✅ 验证权限控制正确工作

• 设备管理页面 (/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
  • ✅ 验证权限控制正确工作

• 授权记录页面 (/asset-management/authorization-records)

  • ✅ 引入 useAuth composable
  • ✅ 在操作列中使用 hasAuth() 判断修改备注权限 (authorization_records:update_remark)
  • ✅ 验证权限控制正确工作

5. 账户管理模块 (Account Module) ✅

• 企业客户页面 (/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
  • ✅ 验证权限控制正确工作

• 运营商管理页面 (/account/carrier-management)

  • ✅ 引入 useAuth composable
  • ✅ 为"新增运营商"按钮添加 v-permission="'carrier:add'"
  • ✅ 为状态切换添加 disabled: !hasAuth('carrier:update_status')
  • ✅ 在操作列中使用 hasAuth() 判断编辑 (carrier:edit) 和删除 (carrier:delete) 权限
  • ✅ 验证权限控制正确工作

• 订单管理页面 (/account/orders)

  • ✅ 引入 useAuth composable
  • ✅ 为"创建订单"按钮添加 v-permission="'orders:add'"
  • ✅ 验证权限控制正确工作

• 提现配置页面 (/account/commission/withdrawal-settings)

  • ✅ 引入 useAuth composable
  • ✅ 为"新增配置"按钮添加 v-permission="'withdrawal_settings:add'"
  • ✅ 验证权限控制正确工作

• 我的佣金页面 (/account/commission/my-commission)

  • ✅ 引入 useAuth composable
  • ✅ 为"发起提现"按钮添加 v-permission="'my_commission:add'"
  • ✅ 验证权限控制正确工作

• 代理商佣金管理页面 (/account/commission/agent-commission)

  • ✅ 引入 useAuth composable
  • ✅ 在操作列中使用 hasAuth() 判断查看详情权限 (agent_commission:detail)
  • ✅ 验证权限控制正确工作

6. 系统管理模块 (System Management) ✅

• 权限管理页面 (/system/permission)
  • ✅ 引入 useAuth composable
  • ✅ 为"新增权限"按钮添加 v-permission="'permission:add'"
  • ✅ 在操作列中使用 hasAuth() 判断编辑 (permission:edit) 和删除 (permission:delete) 权限
  • ✅ 验证权限控制正确工作

7. 测试与文档

• 权限控制测试

  • 创建不同权限组合的测试用户
  • 验证每个页面的按钮显示/隐藏符合预期
  • 验证状态切换的启用/禁用符合预期
  • 测试权限动态变更后UI的响应

• 文档更新

  • 更新开发文档，说明权限控制的实现方式
  • 添加权限代码与功能的映射表
  • 提供新页面添加权限控制的指南

Validation

每个任务完成后需验证：

1. 功能正确性: 有权限时按钮/操作可见且可用
2. 权限隔离: 无权限时按钮/操作不可见或禁用
3. 用户体验: 权限控制不影响正常操作流程
4. 性能: 权限检查不影响页面渲染性能

Dependencies

• 所有任务依赖权限基础设施 (useAuth, v-permission)
• 任务可并行执行，建议按模块分批进行
• 优先级: 核心模块 (账号、套餐、资产) > 其他模块