## 功能说明
实现短信资源管理页,包含平台切换、预警提示、服务商卡片、分配情况卡片、小区列表、资源调整与历史、配置分配、配置历史、使用情况弹框交互。
## 文件位置
- 页面组件: src/pages/sms-resource/index.tsx
- 子组件: src/components/sms-resource/PlatformSelector.tsx, ResourceCards.tsx, CommunityTable.tsx, AdjustModal.tsx, AdjustHistoryModal.tsx, AllocateModal.tsx, AllocateHistoryModal.tsx, UsageModal.tsx
- 样式文件: src/pages/sms-resource/index.module.scss
- API调用: src/api/smsResource.ts
## 页面结构
```
PageContainer
├── PlatformSelector (下拉可搜索)
├── AlertBar (预警条)
├── ResourceCards
│ ├── ProviderCard
│ └── AllocationCard
└── CommunityTable
├── SearchInput: communityName
├── Table columns: 名称/剩余/历史使用总计/本月使用/创建时间/操作(资源配置/配置历史/使用情况)
Modals: AdjustModal, AdjustHistoryModal, AllocateModal, AllocateHistoryModal, UsageModal
```
## 依赖的API接口
- GET /api/v1/sms/platforms
- GET /api/v1/sms/platform/:platformId/overview
- POST /api/v1/sms/platform/:platformId/adjust
- GET /api/v1/sms/platform/:platformId/adjust/history
- GET /api/v1/sms/platform/:platformId/communities
- POST /api/v1/sms/community/:communityId/allocate
- GET /api/v1/sms/community/:communityId/alloc/history
- GET /api/v1/sms/community/:communityId/usage
## 组件Props定义
```typescript
interface PlatformOption { platformId: number; platformName: string; }
interface Overview { platformId: number; platformName: string; providerName: string; remainingCount: number; allocatedUnused: number; availableForAllocate: number; }
interface CommunityItem { communityId: number; communityName: string; remainingCount: number; usedTotal: number; usedThisMonth: number; createdAt: string; }
interface AllocForm { method: 1|2; amount?: number; count?: number; convertRate: number; effectiveRange?: [Date, Date]; remark?: string; confirm: boolean; }
```
## 状态管理
- selectedPlatform: 当前平台
- overview: 平台概览数据
- communityList/pagination/alertCount
- loading: 页面/表格/提交加载态
- modalVisibles: adjust/adjustHistory/allocate/allocateHistory/usage
- currentCommunity: 选中小区
## 交互逻辑
1. 页面加载:获取平台列表,默认选中第一项,拉取overview与community列表并计算alert条。
2. 切换平台:更新overview、community列表、alert条。
3. 搜索:按名称关键字请求community列表,表格创建时间倒序。
4. 预警条:alertCount>0显示“检测到N个小区资源不足1000条,请及时补充”。
5. 资源调整:点击按钮弹AdjustModal,校验调整类型与数量必填,提交后刷新overview与community列表;AdjustHistoryModal分页显示日志。
6. 小区资源配置:行操作打开AllocateModal,自动填充小区名称不可编辑;按金额/条数自动换算(四舍五入),允许手动修改结果;提交前弹二次确认文案;成功后刷新overview、community列表并弹提示。
7. 配置历史/使用情况:对应弹框分页查询,展示完整字段。
## 表单字段
| 字段名 | 类型 | 必填 | 校验规则 | 说明 |
| 调整类型 | Select | 是 | 必填 | 1增加/2减少 |
| 调整数量 | InputNumber | 是 | >0整数 | 平台调整数量 |
| 分配方式 | Radio | 是 | 必填 | 1按金额/2按条数 |
| 分配金额 | InputNumber | 方式为金额时必填 | >0 | 元 |
| 分配条数 | InputNumber | 方式为条数时必填 | >0整数 | 条 |
| 转换系数 | InputNumber | 是 | >0 | 金额与条数换算 |
| 对应条数/金额 | InputNumber | 是 | 自动换算可编辑 | 提交以最终值为准 |
| 有效期限 | RangePicker/长期开关 | 否 | - | 默认长期 |
| 备注 | TextArea | 否 | 最长255 | 备注 |
| 二次确认 | Checkbox | 是 | 勾选 | 文案“请确认后再提交,提交后无法修改及退款” |
## 验收标准
- [ ] 页面正常渲染并默认选中首个平台
- [ ] 切换平台同步刷新卡片和列表
- [ ] 预警条、搜索、排序、表格展示正确
- [ ] 各弹框表单校验与交互符合描述
- [ ] 成功提交后刷新数据,历史与使用记录展示完整
106【前端】运营平台短信资源管理页面开发
任务描述
由谁创建
邹鹏 于 2025-12-15 18:15:13
由谁完成
由谁取消
由谁关闭
关闭原因
最后编辑
最初预计
14 h
总计消耗
0 h
预计剩余
14 h
预计开始
实际开始
截止日期