# 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`