第 30 课：任务表格密度偏好与本地持久化

第 30 课任务表格密度偏好与本地持久化这一课我们继续沿着“任务管理页个人工作台偏好”主线往下推进。这次做的不是筛选条件也不是排序规则而是后台系统里非常常见、但很多初学者容易忽略的一类能力让用户自己决定列表要看得更舒适还是看得更紧凑。你在很多真实后台里都会看到类似功能舒适模式标准模式紧凑模式它看起来只是 UI 细节但背后其实是在练 3 件很重要的工程能力怎么给页面加一份“展示偏好”状态怎么把这份偏好持久化到localStorage怎么让“业务状态”和“展示状态”分层管理这节课一句话在做什么这一课我们完成了 5 件事给任务页新增了舒适 / 标准 / 紧凑三种表格密度模式。把表格密度偏好保存到了localStorage。刷新任务页后表格密度会自动恢复不会丢失。让TaskTable真正根据密度变化调整单元格留白、行高、标签尺寸和操作按钮尺寸。补上了单元测试、E2E 测试和课程文档。这一课最重要的设计结论这一课最重要的结论是表格密度属于“展示偏好”不是“业务筛选条件”。为什么这句话重要1. 表格密度不会改变任务结果集无论你把任务表切到舒适标准紧凑任务数据本身都没有变。它不会影响keywordstatusFilterpriorityFiltersortOptioncurrentPage它只影响表格行高单元格留白标签紧凑度操作按钮视觉密度所以它更适合被归类成用户展示习惯页面视觉偏好而不是筛选条件。2. 展示偏好适合放到localStorage为什么密度偏好不写进 URL因为它不属于“这次访问任务页想看哪批数据”而属于我个人更喜欢哪种列表阅读方式这类信息更适合刷新后保留下次再进页面时自动恢复不污染分享链接所以这节课继续把它放进了localStorage3. 业务状态和展示状态要分层这一课和第 26、27、28、29 课是一条连续主线。到这里你可以开始建立更清楚的分层意识筛选、排序、页码更偏“当前业务视图状态”显示列、分页大小、表格密度更偏“个人展示偏好”它们都服务于列表页体验但语义层级不一样。只有先分层代码后面才不会越来越乱。这一课在useTasksPage里做了什么文件src/composables/useTasksPage.ts这一课的核心状态仍然放在任务页组合式函数里因为表格密度属于页面级偏好状态它不是单个组件自己的临时状态。新增了类型、默认值和本地存储 key这次新增了TaskTableDensityTaskTableDensityOptionItemDEFAULT_TASK_TABLE_DENSITYTASK_TABLE_DENSITY_STORAGE_KEY这里的设计目的很明确类型限制合法值范围常量保证默认行为稳定存储 key 让本地持久化有统一入口新增了“读取 - 校验 - 标准化 - 写回”的持久化流程这节课继续沿用前几课已经反复练过的模式先从localStorage读取原始值判断是不是合法密度值非法值回退到standard用watch(..., { immediate: true })把标准化结果写回本地这一步非常值得你记住因为真实项目里本地存储经常会遇到老版本遗留数据手动篡改异常写入所以不能直接相信本地存储里永远是干净数据。新增了页面级状态和动作函数这次新增了两个核心页面级能力taskTableDensityhandleTaskTableDensityChange()这两个名字很重要。它们说明我们已经不是在“随便改个 ref”而是在表达一个真实业务动作当前任务表正在用什么密度用户现在要切换成哪种密度这种命名方式会让 composable 越来越像“页面领域层”而不是一堆零散变量。这一课在界面层做了什么文件src/components/tasks/TaskTableDensitySettings.vuesrc/views/TasksView.vuesrc/components/tasks/TaskTable.vue1. 新增了TaskTableDensitySettings这个组件负责展示密度设置说明渲染三种密度切换按钮把用户点击动作通过emit抛给父层注意它没有自己保存状态也没有自己碰localStorage。这就是我们一直在练的分层方式组件负责 UI 和交互输入composable 负责状态和持久化2.TasksView.vue负责把面板和任务表接起来页面层这次做了两件事把密度设置组件接到任务页里把当前密度传给TaskTable这一步的意义是设置面板改状态任务表读状态页面层像一个中间协调者把“输入端”和“展示端”连起来。3.TaskTable.vue让密度变化变成真实视觉差异这一课最关键的不是“值存下来了”而是表格真的会因为密度不同而长得不一样。这次主要做了这些变化舒适模式更大的上下留白和更松的阅读节奏标准模式保持常见后台默认列表体验紧凑模式更小的单元格 padding、更紧的行高标签尺寸跟着密度变化操作按钮尺寸和间距跟着密度变化同时任务表根节点新增了data-density这样测试层就能直接验证当前真实生效的密度不需要靠猜视觉样式来断言。这一课补了哪些测试1. 单元测试文件src/composables/__tests__/useTasksPage.spec.ts新增覆盖从localStorage恢复合法表格密度非法密度值自动回退成standard标准化结果写回本地存储切换表格密度后同步更新页面状态切换后立即写回localStorage这一层主要验证页面级偏好状态是否正确本地持久化边界是否正确2. E2E 测试文件e2e/pages/TasksPage.tse2e/app.spec.ts新增覆盖在任务页点击“紧凑”密度按钮断言任务表根节点data-densitycompact刷新页面再次断言仍然是compact这一层主要验证真实界面是否能点通偏好是否真的跨刷新保留这一课改了哪些文件src/types/task.tssrc/composables/useTasksPage.tssrc/components/tasks/TaskTableDensitySettings.vuesrc/components/tasks/TaskTable.vuesrc/views/TasksView.vuesrc/composables/__tests__/useTasksPage.spec.tse2e/pages/TasksPage.tse2e/app.spec.tsdocs/30-task-table-density-preference-and-persistence.mddocs/README.md这一课最值得你真正学会什么如果你只记住“又加了一个密度切换按钮”那还不够。你更应该记住下面这 5 点列表页不只有业务筛选状态还有展示偏好状态。展示偏好通常更适合放进localStorage而不是 URL。本地存储数据不能盲信要先校验和标准化。真正好的前端功能不是“存了个值”而是界面真的会根据状态变化。组件、页面、composable 三层职责分清后这类能力会越来越容易持续扩展。这一课的验证命令完成后至少应该验证npmrun test:unit ----runnpmrun type-checknpmrun lintnpmrun test:e2e ----projectchromium