第 26 课：任务表格列配置与持久化

第 26 课任务表格列配置与持久化这一课我们正式回到任务管理主线并补上一个真正中后台系统里非常常见的能力允许用户自己决定表格显示哪些列并把这份偏好保存下来。这类需求在真实项目里非常常见。因为同一张任务表不同角色最关心的字段往往不一样有人更关心负责人有人更关心截止日期有人更关心状态和优先级所以“表格列配置”并不是花活而是非常典型的后台产品能力。这一课一句话在做什么这一课我们完成了 5 件事给任务页加了“显示列”配置入口允许用户切换任务表显示哪些业务字段把列偏好保存到localStorage刷新页面后自动恢复这份偏好为这套能力补了单元测试和 E2E这节课新增了什么1. 新增列配置组件文件src/components/tasks/TaskColumnSettings.vue这一课新增了一个独立组件TaskColumnSettings它专门负责展示“显示列”按钮展示列配置弹层渲染每个列的开关告诉用户哪些列是固定显示列这一步很重要。因为如果你把这部分 UI 直接塞进TasksView.vue页面会越来越臃肿。2. 扩展任务页组合式函数文件src/composables/useTasksPage.ts这一课把列偏好逻辑集中放进了任务页 composable。里面新增了这些能力taskColumnOptionsvisibleTaskColumnKeysvisibleTaskColumnCounthandleTaskColumnVisibilityChange同时还新增了本地存储相关逻辑读取旧偏好标准化列 key写回最新偏好3. 扩展任务表格组件文件src/components/tasks/TaskTable.vue现在任务表不再默认无脑渲染全部列。它会根据传入的visibleColumnKeys来决定当前实际渲染哪些列。也就是说列配置不只是 UI 勾选了而已而是真正影响到了表格结构。这节课为什么把列配置状态放进useTasksPage因为“显示哪些列”本质上属于任务页自己的页面级偏好状态它不是单个表格组件内部的临时局部状态更不是全站共享状态所以它最适合放在useTasksPage这能让这套状态和任务页的筛选排序分页批量操作保持在同一层统一管理。这节课里定义了哪些列文件src/composables/useTasksPage.tssrc/types/task.ts当前可配置的任务表格列包括titleassigneedueDatestatusprioritydescription同时我们给这些列定义了稳定的类型TaskVisibleColumnKey以及列配置项结构TaskColumnOptionItem这一步的意义是不要把列配置写成一堆随手拼的字符串而是让它成为有类型约束的稳定配置。为什么“任务标题”被设计成固定显示列这一课里我们特意把任务标题设计成固定显示列。也就是说它会出现在列配置面板里但用户不能把它真的关掉为什么这样做因为任务标题是这张表的主标识。如果连标题都能隐藏表格很容易变成一堆状态一堆日期一堆按钮但用户已经很难知道“这一行到底是哪条任务”。所以这节课顺便练了一个很真实的产品设计点允许自定义不等于所有东西都无限制开放。这节课里的本地持久化是怎么做的文件src/composables/useTasksPage.ts这一课新增了一个本地存储 keytaskflow.tasks.visible-columns完整常量名是TASK_TABLE_VISIBLE_COLUMNS_STORAGE_KEY当前做法是页面初始化时先读localStorage把读到的数据做一次合法性清理如果数据非法就回退到默认列配置用户每次切换列显示状态时立刻写回本地存储这样一来刷新页面后任务表仍然保持上一次的列显示偏好为什么要做“标准化列 key”这一课里有一个很重要的底层函数normalizeVisibleTaskColumnKeys它负责做 3 件事过滤非法列 key自动补回固定显示列按预定义顺序输出最终列列表这个函数看起来只是“小工具”但其实非常关键。因为只要你一做本地持久化就必须考虑用户本地存储里可能是旧数据数据可能被手动改坏可能出现重复 key可能顺序被打乱所以真实项目里读取持久化配置后通常都要先做一次标准化。TaskColumnSettings.vue在负责什么这个组件不是在负责真正存储状态。它只负责两件事把列配置 UI 渲染出来把用户操作通过事件抛给父层也就是说它仍然是视图组件而不是状态管理组件这正是我们一直在练的分层思路组件负责展示和事件composable 负责状态和行为TaskTable.vue这次发生了什么变化原来任务表的列是直接写死的标题负责人截止日期状态优先级说明现在这些列都变成了根据visibleColumnKeys决定是否渲染例如v-ifisColumnVisible(assignee)这种变化非常关键因为它说明列配置不是“看起来有按钮”而是真正进入了表格渲染逻辑。这节课补了哪些测试1. 单元测试文件src/composables/__tests__/useTasksPage.spec.ts这次新增了两类列配置测试从localStorage恢复列偏好切换列后持久化到localStorage同时还验证了固定显示列不会被真的关掉这类测试特别适合放在单元测试层。因为它关注的是逻辑对不对而不是页面点不点得动2. E2E 测试文件e2e/app.spec.ts这次新增了任务页列配置用例验证关闭“负责人”列关闭“任务说明”列刷新页面这两个列仍然保持隐藏“任务标题”列仍然保留这条测试覆盖的是真实交互本地持久化刷新恢复所以它非常适合作为端到端验证。为什么这一课还要改TasksPageObject文件e2e/pages/TasksPage.ts因为任务页多了一套新交互打开列配置面板切换某一列断言某个表头显示/隐藏刷新页面再继续断言如果这些操作直接写在测试文件里会出现大量零散定位器。所以这次页面对象新增了openColumnSettings()setColumnVisible()expectColumnHeaderVisible()expectColumnHeaderHidden()reload()这正好再次说明Page Object 应该跟着页面能力一起成长。这节课最值得你真正学会什么如果你只记住“任务页多了个显示列按钮”那还不够。你更应该学会下面这 6 点表格列配置是非常真实的后台系统能力用户偏好状态通常适合做本地持久化读取本地持久化配置后要先做标准化清理组件层只负责渲染列配置 UI不负责真正存储状态表格列显隐最终必须真实进入渲染逻辑本地偏好这种能力也应该同时补单元测试和 E2E这节课改了哪些文件src/types/task.tssrc/components/tasks/TaskColumnSettings.vuesrc/components/tasks/TaskTable.vuesrc/composables/useTasksPage.tssrc/composables/__tests__/useTasksPage.spec.tssrc/views/TasksView.vuee2e/pages/TasksPage.tse2e/app.spec.tsdocs/26-task-table-column-visibility-and-persistence.mddocs/README.md这一课的验证结果这一课相关改动已经通过npm run test:unit -- --runnpm run test:e2e -- --projectchromiumnpm run type-checknpm run lint