功能说明
实现短信资源管理页面,包括平台切换、服务商信息卡片、分配情况卡片、小区列表、预警条、搜索框,以及资源调整、调整历史、小区资源配置、配置历史、使用情况等弹框交互。
文件位置
- 页面组件: 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: 各弹框显隐与表单数据
交互逻辑
- 页面加载:获取平台概览,默认首个平台并请求小区列表
- 切换平台:更新当前平台,重新拉取卡片与列表
- 搜索:输入名称点击查询,重置恢复
- 预警:根据lowStockCount显示顶部提示
- 资源调整:打开弹框校验必填,提交后刷新概览与列表;历史弹框分页展示
- 小区资源配置:弹框展示小区名不可编辑;按金额/条数自动换算四舍五入,可手动修改后提交;提交前二次确认文案;成功后刷新卡片、列表与历史
- 配置历史/使用情况:按小区打开对应弹框分页查询
表单字段
| 字段名 | 类型 | 必填 | 校验规则 | 说明 |
| adjustType | Select | 是 | 必选 | 增加/减少 |
| adjustAmount | InputNumber | 是 | 正整数 | 调整数量 |
| mode | Radio | 是 | 必选 | 按金额/按条数 |
| amount | InputNumber | mode=1 | 正数 | 分配金额 |
| smsCount | InputNumber | mode=2 | 正整数 | 分配条数 |
| convertRatio | InputNumber | 是 | 正数 | 转换系数 |
| validRange | DateRangePicker | 否 | - | 有效期限,默认长期 |
验收标准
- 页面默认首个平台数据渲染,切换后同步更新
- 预警条在存在低库存时显示正确数量
- 表单校验符合必填与正数要求,二次确认文案展示
- 分配/调整后卡片与列表刷新一致,历史/使用弹框数据完整