第 39 课：任务详情抽屉里的真实后台内容块

第 39 课任务详情抽屉里的真实后台内容块这一课我们继续沿着“任务管理页主线”往下推进把前面已经做好的“任务详情抽屉”再往真实后台系统推进一步。这次的目标很明确给详情抽屉补上操作记录给详情抽屉补上协作评论给详情抽屉补上相关附件保持抽屉组件仍然只负责展示让当前任务状态变化能联动到操作记录区块补上单元测试、E2E 测试和课程文档这一课一句话在做什么这一课本质上是在做一件事让任务详情抽屉从“只展示基础字段的说明面板”升级成“真正后台里可以承载协作上下文的工作区”。也就是说抽屉里不再只有标题状态优先级描述而是开始出现后台系统里很常见的 3 类内容这条任务最近发生了什么团队围绕这条任务讨论了什么这条任务依赖了哪些材料这一步很重要。因为真实后台页面真正有价值的地方往往不是“字段多”而是上下文完整。为什么这一步很像真实后台因为用户在后台里处理任务时几乎不会只看一段 description。他们真正关心的是这条任务现在进行到哪一步了最近谁改过、改了什么有没有评论意见要先看有没有附件或资料要先确认如果详情抽屉里只有基础字段会有两个明显问题能看见“任务是什么”但看不见“任务是怎么推进的”能看见“当前状态是什么”但看不见“为什么会到这个状态”所以这一课新增的 3 个区块其实是在补时间线上下文协作上下文材料上下文这三类内容加上以后详情抽屉才开始像一个真正能工作的后台详情区。这节课最关键的设计结论1. 详情业务区块数据不应该直接塞回主任务类型字段里乱长这次我们没有把TaskItem直接改成一个越来越重的大对象。而是新增了这些类型TaskDetailActivityItemTaskDetailCommentItemTaskDetailAttachmentItemTaskDetailBusinessData然后再单独做了src/mock/taskDetail.ts这里体现的是一个很重要的分层思路列表主数据和详情展示所需的业务区块数据可以是相关但分层的两份结构。这样做的好处是任务列表主线不会被“详情区块”搅乱详情 mock 可以独立演进后面如果你真的接后端也更容易把“列表接口”和“详情接口”分开理解2. 抽屉组件继续只做展示层这次TaskDetailDrawer.vue虽然变复杂了很多但它仍然没有接管页面业务逻辑。它只是接收taskdetailDatastatusOptionscurrentPositionhasPrevioushasNext然后负责把这些数据渲染出来。这说明展示层组件可以很丰富但仍然不应该顺手接管页面层状态。3. 当前状态变化应该能反向影响业务区块这次在src/mock/taskDetail.ts里专门做了一条“当前状态同步”的置顶操作记录。它不是纯静态写死的而是会基于当前任务状态动态生成。这意味着详情抽屉里的状态标签变了操作记录第一条也会跟着变这个点很值得你记住。因为它体现了后台前端里很常见的一种能力同一份页面状态要同时驱动多个展示区域。这次主要改了哪些文件这一课主要改了这些地方src/types/task.tssrc/mock/taskDetail.tssrc/views/TasksView.vuesrc/components/tasks/TaskDetailDrawer.vuesrc/components/tasks/__tests__/taskDetailDrawer.spec.tse2e/pages/TasksPage.tse2e/app.spec.tsdocs/README.md另外新增了本节文档docs/39-task-detail-drawer-business-blocks.md在src/types/task.ts里学什么这一课不是简单“多加几个字段”。这里真正要学的是先把数据结构说清楚再去写 UI。这次新加的 4 个接口分别在表达一条操作记录长什么样一条评论长什么样一份附件长什么样一整个详情区块数据长什么样这是你后面做真实项目时非常重要的基本功不要一边写模板一边随手拼字段先定义结构再让 mock、组件、测试都围绕这份结构工作在src/mock/taskDetail.ts里学什么这是这一课非常值得你反复看的文件。这里主要做了 4 件事1. 维护主线任务的详情业务区块预设比如第 4 条任务会有专门的评论专门的附件更贴近筛选主线的操作记录这说明 mock 数据也可以分层tasks.ts放列表主数据taskDetail.ts放详情业务数据2. 给任意任务准备默认回退数据如果某条任务没有命中特定预设也不会让抽屉变成空壳。这里会自动生成默认操作记录默认评论默认附件这很像真实项目里常见的“兜底层”设计就算某个接口暂时没有完整数据页面也尽量保持结构稳定。3. 把“当前状态同步”单独做成动态记录这一步让你能明显看到当前任务状态是页面主状态但它可以继续派生出详情区块里的另一块展示内容这就是 Vue 里“一个状态驱动多个视图区域”的典型练习。4. 用共享函数统一生成详情业务数据最终页面层不需要关心这条任务到底有没有专门预设。它只需要调用getTaskDetailBusinessData(task)然后拿到稳定结构即可。这是一种非常实用的工程习惯把“杂乱的判断与兜底逻辑”收口到一个共享函数里。在src/views/TasksView.vue里学什么这次页面层没有去改很多业务主逻辑。只新增了一件很关键的事情用computed基于activeTaskDetail派生activeTaskDetailBusinessData然后再把它传给TaskDetailDrawer这里你要重点体会的是页面层负责拼装当前页面真正需要的“展示输入”。也就是说useTasksPage()继续负责任务页主状态TasksView.vue负责把当前激活任务和详情业务数据拼在一起TaskDetailDrawer.vue只负责吃这份输入并渲染这就是很标准的页面分层。在src/components/tasks/TaskDetailDrawer.vue里学什么这一课里这个组件最大的成长不是“代码变长”。而是它开始承载真正有业务味道的详情结构。现在抽屉里多了 3 类区块1. 操作记录这里练的是列表渲染时间线布局标签映射当前状态联动2. 协作评论这里练的是卡片列表条件 class信息密度控制内容区块分层3. 相关附件这里练的是另一种卡片结构文件名 / 分类 / 上传信息组合展示为什么同一抽屉里不同业务块可以有不同视觉层次这很适合你理解一个事实真实前端页面的复杂度很多时候不是算法复杂而是“多个信息块怎么组织得清楚”。单元测试这次测了什么文件src/components/tasks/__tests__/taskDetailDrawer.spec.ts这次单元测试主要覆盖了两类场景。1. 正常渲染场景验证抽屉会渲染操作记录区抽屉会渲染评论区抽屉会渲染附件区高亮评论会得到对应 class2. 空区块兜底场景验证当detailData.activityLog为空时会显示操作记录空提示当detailData.comments为空时会显示评论空提示当detailData.attachments为空时会显示附件空提示这说明一个重要习惯不仅要测“有数据时能不能显示”还要测“没数据时会不会崩”。E2E 这次测了什么文件e2e/pages/TasksPage.tse2e/app.spec.ts这次我们给 Page Object 补了几个详情抽屉相关方法expectTaskDetailSectionVisibleexpectTaskDetailActivityVisibleexpectTaskDetailCommentVisibleexpectTaskDetailAttachmentVisible然后新增了一条完整 E2Euser can see business blocks inside task detail drawer这条测试会验证打开第 4 条任务详情操作记录 / 协作评论 / 相关附件 3 个区块都出现能看到真实评论内容和真实附件名在详情里改状态后顶部状态摘要和操作记录里的“当前状态同步”会一起更新这条 E2E 很有代表性。因为它测的不是单个按钮而是抽屉展示结构主状态联动业务区块内容这已经越来越接近真实后台系统测试了。你现在真正应该学会什么学完这一课你不应该只记住“抽屉里多了几个区块”。更重要的是理解下面 4 件事1. 后台详情页真正重要的是上下文不只是字段字段只是“静态信息”。而操作记录、评论、附件才是让用户能继续工作的上下文。2. 详情数据可以分层不必全部塞进列表主数据这一课是一个很典型的“列表数据”和“详情数据”分层例子。3. 展示层组件可以很复杂但仍然不应该接管页面状态TaskDetailDrawer.vue现在比前几课复杂很多但它仍然只负责展示。4. 同一份状态应该能驱动多个区域一起变化当前任务状态变化后状态标签会变快捷改状态区会变操作记录第一条也会变这就是典型的 Vue 响应式联动。