refactor: 收口每日任务 ViewModel
This commit is contained in:
29
docs/technical/【前端架构】ProfileTaskViewModel收口计划-2026-06-03.md
Normal file
29
docs/technical/【前端架构】ProfileTaskViewModel收口计划-2026-06-03.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 【前端架构】Profile Task ViewModel 收口计划
|
||||
|
||||
## 背景
|
||||
|
||||
`RpgEntryHomeView.tsx` 的“每日任务”卡片与任务弹窗共用同一批展示规则:任务优先级、可领取 / 未完成选择、进度 clamp、奖励兜底、状态标签和按钮文案。原先这些规则散在巨型页面 **Implementation** 中,UI JSX 既要渲染,又要知道任务状态排序和兜底口径。
|
||||
|
||||
## 决策
|
||||
|
||||
新增 `src/components/rpg-entry/rpgEntryProfileTaskViewModel.ts`,作为每日任务展示模型 **Module**。该 **Module** 的 **Interface** 收口为:
|
||||
|
||||
- `selectProfileTaskCenterTasks(tasks)`:统一任务中心只展示一条可操作任务,按 claimable / incomplete 优先级并保持原始顺序。
|
||||
- `selectProfileTaskCardTask(tasks)`:统一任务卡兜底顺序,先可操作,再 claimed,再非 disabled。
|
||||
- `buildProfileTaskCardSummary(center)`:统一任务卡的奖励、阈值、进度百分比与动作文案。
|
||||
- `buildProfileTaskProgressLabel(task)`、`getProfileTaskStatusLabel(status)`、`getProfileTaskClaimButtonLabel(task, isClaiming)`:统一任务弹窗中的进度、状态和按钮文案。
|
||||
|
||||
`RpgEntryHomeView.tsx` 只消费这些 ViewModel 函数,保留弹窗、按钮和点击处理。每日任务展示规则的 **Locality** 转移到 ViewModel **Module** 与纯测试,后续新增任务状态或修改展示优先级不再穿透 UI。
|
||||
|
||||
## 约定
|
||||
|
||||
- 任务中心只露出当前最需要用户处理的一条任务。
|
||||
- 任务进度必须按 `0..threshold` clamp,避免异常后端进度撑破卡片进度条。
|
||||
- `pause` / `claim` 等副作用仍留在页面和后端 client;ViewModel 只做展示派生。
|
||||
|
||||
## 验证
|
||||
|
||||
- `npm run test -- src/components/rpg-entry/rpgEntryProfileTaskViewModel.test.ts`
|
||||
- `npm run typecheck`
|
||||
- `npm run check:encoding`
|
||||
- 针对变更文件执行 ESLint
|
||||
Reference in New Issue
Block a user