luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
251a8f6a839128146913a2900b52bc2675b3adba
one-pipe-system/PROJECT_TASKS.md
sexygoat 222e5bb11a Initial commit: One Pipe System 
完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-22 16:35:33 +08:00

16 KiB
Raw Blame History

物联网管理后台 - 功能开发任务清单

项目概述

基于 Vue 3 + TypeScript + Element Plus 的物联网管理后台系统，管理代理商、网卡、套餐、设备等核心业务。

📦 模块划分

一、基础架构优化（必须先完成）

1.1 API 层重构

优先级：P0（最高）

  • 创建统一的 API 服务基类
  • 创建类型定义文件
    • src/types/api/auth.ts - 认证相关类型
    • src/types/api/role.ts - 角色相关类型
    • src/types/api/account.ts - 账号相关类型
    • src/types/api/card.ts - 网卡相关类型
    • src/types/api/package.ts - 套餐相关类型
    • src/types/api/device.ts - 设备相关类型
    • src/types/api/commission.ts - 佣金相关类型
  • 创建 API 服务类
    • src/api/modules/auth.ts - AuthService
    • src/api/modules/role.ts - RoleService
    • src/api/modules/account.ts - AccountService
    • src/api/modules/agent.ts - AgentService (代理商)
    • src/api/modules/card.ts - CardService
    • src/api/modules/package.ts - PackageService
    • src/api/modules/device.ts - DeviceService
    • src/api/modules/commission.ts - CommissionService
    • src/api/modules/setting.ts - SettingService

1.2 公共配置和常量提取

优先级：P0

  • 创建 src/config/constants/ 目录
    • operators.ts - 运营商配置
    • cardStatus.ts - 网卡状态配置
    • userRoles.ts - 用户角色配置
    • packageTypes.ts - 套餐类型配置
    • deviceStatus.ts - 设备状态配置
    • commissionStatus.ts - 佣金状态配置
  • 创建 src/utils/business/ 目录
    • card.ts - 网卡相关工具函数
    • package.ts - 套餐相关工具函数
    • commission.ts - 佣金计算工具函数
    • format.ts - 格式化工具函数

1.3 业务 Composables

优先级：P0

  • src/composables/useCardManagement.ts - 网卡管理
  • src/composables/usePackageManagement.ts - 套餐管理
  • src/composables/useDeviceManagement.ts - 设备管理
  • src/composables/useAgentManagement.ts - 代理商管理
  • src/composables/useCommission.ts - 佣金管理
  • src/composables/usePagination.ts - 分页管理
  • src/composables/useTableSelection.ts - 表格选择

1.4 公共业务组件

优先级：P1

  • src/components/business/CardStatusTag.vue - 网卡状态标签
  • src/components/business/OperatorSelect.vue - 运营商选择器
  • src/components/business/PackageSelector.vue - 套餐选择器
  • src/components/business/AgentSelector.vue - 代理商选择器
  • src/components/business/CommissionDisplay.vue - 佣金展示组件
  • src/components/business/BatchOperationDialog.vue - 批量操作对话框
  • src/components/business/ImportDialog.vue - 导入对话框组件

🎯 功能模块开发

二、认证与权限模块

2.1 登录模块

优先级：P0 依赖：1.1 API 层重构

  • 后端接口对接
    • 登录接口
    • 退出登录接口
    • 获取用户信息接口
    • 刷新 Token 接口
  • 前端页面
    • 完善登录页面（src/views/auth/login/index.vue）
    • 添加多角色登录支持（平台账号、代理商、企业客户）
    • 添加验证码功能
    • 添加记住密码功能
  • 权限守卫
    • 完善路由守卫逻辑
    • 实现基于角色的路由过滤
    • 实现按钮级权限控制
  • Store 状态管理
    • 完善用户 Store（用户信息、权限列表）
    • 添加 Token 自动刷新逻辑

Mock 数据：

  • 模拟不同角色的登录响应
  • 模拟权限列表

三、账号管理模块

3.1 平台角色管理

优先级：P1 依赖：1.1, 1.2, 1.3

子任务：

  • 类型定义
    • 角色实体类型
    • 角色查询参数类型
    • 角色权限类型
  • API 服务
    • 获取角色列表
    • 创建角色
    • 编辑角色
    • 删除角色
    • 分配权限
  • 页面开发
    • src/views/account-management/platform-role/index.vue
    • 角色列表（表格）
    • 新增/编辑角色对话框
    • 权限分配对话框（树形结构）
  • 组件开发
    • PermissionTreeSelect.vue - 权限树选择组件
  • Mock 数据
    • 模拟角色列表
    • 模拟权限树

3.2 平台账号管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取平台账号列表
    • 创建平台账号
    • 编辑平台账号
    • 删除/禁用平台账号
    • 重置密码
  • 页面开发
    • src/views/account-management/platform-account/index.vue
    • 账号列表（支持搜索、筛选）
    • 新增/编辑账号对话框
    • 角色分配
  • Mock 数据

3.3 客户角色管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取客户角色列表
    • 创建客户角色
    • 编辑客户角色
    • 删除客户角色
    • 设置能力边界
  • 页面开发
    • src/views/account-management/customer-role/index.vue
    • 角色列表
    • 能力边界配置（功能权限、资源限制）
  • 组件开发
    • AbilityBoundaryConfig.vue - 能力边界配置组件
  • Mock 数据

3.4 代理商管理

优先级：P1

子任务：

  • 类型定义
    • 代理商实体类型
    • 代理商层级关系类型
  • API 服务
    • 获取代理商列表（树形结构）
    • 创建代理商
    • 编辑代理商信息
    • 禁用/启用代理商
    • 查看代理商详情
    • 获取代理商下级列表
  • 页面开发
    • src/views/account-management/agent-management/index.vue
    • 代理商树形列表
    • 新增/编辑代理商对话框
    • 代理商详情页面
  • 组件开发
    • AgentTreeTable.vue - 代理商树形表格组件
  • Mock 数据
    • 模拟代理商层级数据

3.5 企业客户管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取企业客户列表
    • 创建企业客户
    • 编辑企业客户
    • 禁用/启用企业客户
    • 分配客户角色
  • 页面开发
    • src/views/account-management/enterprise-customer/index.vue
    • 企业客户列表
    • 新增/编辑企业客户对话框
  • Mock 数据

3.6 客户账号管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取客户账号列表（代理商+企业客户）
    • 解绑手机
    • 重置密码
    • 禁用/启用账号
  • 页面开发
    • src/views/account-management/customer-account/index.vue
    • 账号列表（支持筛选）
    • 账号操作（解绑、重置密码等）
  • Mock 数据

四、账户管理模块

4.1 客户账户（佣金查看）

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 获取客户账户列表
    • 查看佣金详情
    • 查看提现记录
  • 页面开发
    • src/views/finance-management/customer-account/index.vue
    • 客户账户列表
    • 佣金详情展示
    • 提现记录列表
  • 组件开发
    • CommissionDetailCard.vue - 佣金详情卡片
  • Mock 数据

4.2 佣金提现管理

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 获取提现申请列表
    • 审核提现申请（通过/拒绝）
    • 查看提现详情
    • 批量审核
  • 页面开发
    • src/views/finance-management/commission-withdrawal/index.vue
    • 提现申请列表
    • 审核对话框
    • 批量审核功能
  • Mock 数据

4.3 佣金提现设置

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 获取提现设置
    • 保存提现设置
    • 查看历史设置
  • 页面开发
    • src/views/finance-management/withdrawal-setting/index.vue
    • 提现参数配置表单
    • 历史设置列表
  • Mock 数据

4.4 我的账户（佣金）

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 获取当前账号佣金数据
    • 获取佣金明细
    • 申请提现
  • 页面开发
    • src/views/finance-management/my-account/index.vue
    • 佣金概览（卡片展示，非列表）
    • 佣金明细列表
    • 提现申请对话框
  • 组件开发
    • CommissionOverviewCard.vue - 佣金概览卡片
  • Mock 数据

五、我的设置模块

5.1 收款商户设置

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 获取支付配置
    • 保存支付配置
  • 页面开发
    • src/views/my-settings/payment-merchant/index.vue
    • 支付参数配置表单
  • Mock 数据

5.2 开发能力管理

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 获取开发能力参数
    • 生成 API Key
    • 刷新 Secret
  • 页面开发
    • src/views/my-settings/dev-capability/index.vue
    • API Key 展示和管理
    • 接口文档链接
  • Mock 数据

5.3 分佣模板管理

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 获取分佣模板列表
    • 创建分佣模板
    • 编辑分佣模板
    • 删除分佣模板
  • 页面开发
    • src/views/my-settings/commission-template/index.vue
    • 模板列表
    • 新增/编辑模板对话框
    • 分佣规则配置
  • 组件开发
    • CommissionRuleConfig.vue - 分佣规则配置组件
  • Mock 数据

六、商品管理模块

6.1 号卡管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取号卡商品列表
    • 新增号卡商品
    • 编辑号卡商品
    • 删除号卡商品
  • 页面开发
    • src/views/product-management/simcard/index.vue
    • 号卡列表
    • 新增/编辑号卡对话框
  • Mock 数据

6.2 号卡分配

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取可分配号卡列表
    • 分配号卡给代理
    • 设置佣金模式
  • 页面开发
    • src/views/product-management/simcard-assign/index.vue
    • 号卡选择
    • 代理商选择
    • 佣金模式配置
  • 组件开发
    • CommissionModeSelector.vue - 佣金模式选择组件
  • Mock 数据

6.3 套餐系列管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取套餐系列列表
    • 新增套餐系列
    • 编辑套餐系列
    • 删除套餐系列
  • 页面开发
    • src/views/product-management/package-series/index.vue (重命名 package-series)
    • 系列列表
    • 新增/编辑系列对话框
  • Mock 数据

6.4 套餐管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取套餐列表（根据角色过滤）
    • 创建套餐
    • 编辑套餐
    • 删除套餐
  • 页面开发
    • 重构 src/views/package-management/package-create/index.vue
    • 套餐列表（支持角色过滤）
    • 新增/编辑套餐对话框
  • Mock 数据

6.5 套餐分配

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取可分配套餐列表
    • 分配套餐给直级代理
    • 设置佣金模式
  • 页面开发
    • 重构 src/views/package-management/package-assign/index.vue
    • 套餐选择
    • 直级代理选择
    • 佣金模式配置
  • Mock 数据

七、资产管理模块

7.1 单卡信息查询

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 根据 ICCID 查询单卡信息
    • 套餐充值
    • 停复机操作
    • 流量详情查询
    • 更改过期时间
    • 转新卡
    • 停复机记录
    • 往期订单
    • 增减流量
    • 变更钱包余额
    • 充值支付密码
    • 续充
    • 设备操作
  • 页面开发
    • 重构 src/views/card-management/single-card/index.vue
    • 单卡信息展示（描述列表）
    • 操作按钮组
    • 各类操作对话框
  • 组件开发
    • 复用 CardOperationDialog.vue 并扩展功能
  • Mock 数据

7.2 网卡管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取网卡列表
    • 批量操作入口
  • 页面开发
    • 重构 src/views/card-management/card-list/index.vue
    • 网卡列表
    • 批量操作按钮
  • Mock 数据

7.3 设备管理

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取设备列表
    • 查看设备卡信息
    • 修改设备卡信息
    • 设备相关操作
  • 页面开发
    • 拆分 src/views/device-management/devices/index.vue (2022行，需拆分)
      • 主页面 index.vue
      • 设备详情组件 DeviceDetail.vue
      • 设备操作组件 DeviceOperation.vue
    • 设备列表
    • 设备详情对话框
    • 设备操作对话框
  • Composables
    • useDeviceManagement.ts - 设备管理逻辑
  • Mock 数据

7.4 资产分配

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 设备批量分配
    • 网卡批量分配
  • 页面开发
    • src/views/asset-management/asset-assign/index.vue
    • 分配方式选择（设备/网卡）
    • 批量导入 ICCID
    • 目标代理选择
  • 组件开发
    • 复用 ImportDialog.vue
  • Mock 数据

7.5 换卡申请

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 获取换卡申请列表
    • 处理换卡申请
    • 填充新 ICCID
  • 页面开发
    • 重构 src/views/card-management/card-replacement/index.vue
    • 申请列表
    • 处理对话框
  • Mock 数据

八、批量操作模块

8.1 网卡导入

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 批量导入 ICCID
    • 查看导入任务状态
    • 查看导入失败记录
  • 页面开发
    • src/views/batch-operation/card-import/index.vue
    • Excel 导入
    • 任务列表
    • 失败记录查看
  • 组件开发
    • 复用 ImportDialog.vue
  • Mock 数据

8.2 设备导入

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 批量导入设备及 ICCID 关系
    • 查看导入任务状态
  • 页面开发
    • src/views/batch-operation/device-import/index.vue
    • Excel 导入
    • 任务列表
  • Mock 数据

8.3 线下批量充值

优先级：P1

子任务：

  • 类型定义
  • API 服务
    • 查看批量充值记录
    • Excel 批量充值导入
  • 页面开发
    • 重构 src/views/card-management/offline-batch-recharge/index.vue
    • 充值记录列表
    • 批量充值 Excel 导入
  • Mock 数据

8.4 换卡通知

优先级：P2

子任务：

  • 类型定义
  • API 服务
    • 单独新建换卡通知
    • 批量新建换卡通知
    • 查看换卡通知记录
  • 页面开发
    • src/views/batch-operation/card-change-notice/index.vue
    • 通知记录列表
    • 新建通知对话框（单个/批量）
  • Mock 数据

📅 开发计划建议

第一阶段（1-2 周）：基础架构

  • 完成所有 1.x 任务（API 层、配置、Composables、公共组件）
  • 完成登录模块（2.1）

第二阶段（2-3 周）：账号管理

  • 完成账号管理模块所有功能（3.1-3.6）

第三阶段（2 周）：商品管理

  • 完成商品管理模块（6.1-6.5）

第四阶段（2-3 周）：资产管理

  • 完成资产管理模块（7.1-7.5）

第五阶段（1-2 周）：账户管理 + 我的设置

  • 完成账户管理模块（4.1-4.4）
  • 完成我的设置模块（5.1-5.3）

第六阶段（1-2 周）：批量操作 + 优化

  • 完成批量操作模块（8.1-8.4）
  • 性能优化、测试、Bug 修复

📌 注意事项

  1. 所有模块先用 Mock 数据开发，便于前后端并行开发
  2. 严格遵循组件化原则，提高代码复用率
  3. 使用 TypeScript 严格类型，减少运行时错误
  4. 每个模块完成后进行代码审查
  5. 关键功能需要编写单元测试

🔗 相关文档

Reference in New Issue View Git Blame Copy Permalink