106【前端】运营平台短信资源管理页面开发
任务描述
## 功能说明 实现短信资源管理页,包含平台切换、预警提示、服务商卡片、分配情况卡片、小区列表、资源调整与历史、配置分配、配置历史、使用情况弹框交互。 ## 文件位置 - 页面组件: 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 | 是 | 勾选 | 文案“请确认后再提交,提交后无法修改及退款” | ## 验收标准 - [ ] 页面正常渲染并默认选中首个平台 - [ ] 切换平台同步刷新卡片和列表 - [ ] 预警条、搜索、排序、表格展示正确 - [ ] 各弹框表单校验与交互符合描述 - [ ] 成功提交后刷新数据,历史与使用记录展示完整
所属执行
所属模块
来源Bug
指派给
任务类型
开发
任务状态
未开始
进度
0 %
优先级
3
关键词
抄送给
由谁创建
邹鹏 于 2025-12-15 18:15:13
由谁完成
由谁取消
由谁关闭
关闭原因
最后编辑
最初预计
14 h
总计消耗
0 h
预计剩余
14 h
预计开始
实际开始
截止日期