[前端] 短信资源管理主界面与弹框开发 113
任务名称
任务描述

功能说明

实现短信资源管理页面,包括平台切换、服务商信息卡片、分配情况卡片、小区列表、预警条、搜索框,以及资源调整、调整历史、小区资源配置、配置历史、使用情况等弹框交互。

文件位置

  • 页面组件: src/pages/sms-resource/index.tsx
  • 子组件: src/components/sms-resource/PlatformCard.tsx, AllocationCard.tsx, CommunityTable.tsx, Modals/*
  • 样式文件: src/pages/sms-resource/index.module.scss
  • API调用: src/api/smsResource.ts

页面结构

PageContainer
├── PlatformSelector (下拉搜索)
├── AlertBar (低库存预警)
├── ProviderCard (服务商信息)
├── AllocationCard (剩余可分配/已分配未使用)
├── SearchBar (按小区名称)
└── CommunityTable (列表)
    └── Actions: 资源配置/配置历史/使用情况/资源调整历史
Modals
├── PlatformAdjustModal
├── PlatformAdjustHistoryModal
├── CommunityAllocateModal (二次确认)
├── CommunityAllocateHistoryModal
└── CommunityUsageModal

依赖的API接口

功能方式接口路径
平台概览GET/api/v1/sms/platforms/overview
平台调整POST/api/v1/sms/platform/adjust
调整历史GET/api/v1/sms/platform/adjust/history
小区列表GET/api/v1/sms/communities
小区配置POST/api/v1/sms/community/{id}/allocate
配置历史GET/api/v1/sms/community/{id}/allocations
使用情况GET/api/v1/sms/community/{id}/usage

类型定义

interface PlatformOverview { id: number; name: string; providerName: string; remainCount: number; allocatedUnused: number; allocatable: number; }
interface CommunityItem { id: number; name: string; remain: number; usedTotal: number; usedMonth: number; createdAt: string; }
interface AdjustForm { adjustType: number; adjustAmount: number; remark?: string; }
interface AllocateForm { mode: number; amount?: number; smsCount?: number; convertRatio: number; finalSmsCount?: number; finalAmount?: number; validRange?: [string, string]; remark?: string; }

状态管理

  • loading: 页面/弹框加载状态
  • platforms/currentPlatform: 平台数据
  • alertLowCount: 低库存数量
  • communityList/pagination: 小区列表与分页
  • modalVisible & modalForm: 各弹框显隐与表单数据

交互逻辑

  1. 页面加载:获取平台概览,默认首个平台并请求小区列表
  2. 切换平台:更新当前平台,重新拉取卡片与列表
  3. 搜索:输入名称点击查询,重置恢复
  4. 预警:根据lowStockCount显示顶部提示
  5. 资源调整:打开弹框校验必填,提交后刷新概览与列表;历史弹框分页展示
  6. 小区资源配置:弹框展示小区名不可编辑;按金额/条数自动换算四舍五入,可手动修改后提交;提交前二次确认文案;成功后刷新卡片、列表与历史
  7. 配置历史/使用情况:按小区打开对应弹框分页查询

表单字段

字段名类型必填校验规则说明
adjustTypeSelect必选增加/减少
adjustAmountInputNumber正整数调整数量
modeRadio必选按金额/按条数
amountInputNumbermode=1正数分配金额
smsCountInputNumbermode=2正整数分配条数
convertRatioInputNumber正数转换系数
validRangeDateRangePicker-有效期限,默认长期

验收标准

  • 页面默认首个平台数据渲染,切换后同步更新
  • 预警条在存在低库存时显示正确数量
  • 表单校验符合必填与正数要求,二次确认文案展示
  • 分配/调整后卡片与列表刷新一致,历史/使用弹框数据完整
相关研发需求
附件
基本信息
所属执行
所属模块
父任务
任务模式
指派给
任务类型
任务状态
优先级
进度
关键词
抄送给
工时信息
预计开始
截止日期
最初预计
h
总计消耗
0.00h
预计剩余
h
任务的一生
实际开始
由谁完成
实际完成
由谁取消
取消时间
由谁关闭
关闭原因
关闭时间