想去哪里?

首页 页面 关于 页面 项目 页面 简历 页面 技术 页面 随笔 页面 联系 页面 隐私政策 页面 Terminal Spike 隐私政策 页面 用 Astro 构建文档与职业个人网站 技术 通过 tmux、Mosh、Termius 与 Tailscale 随处使用 Codex 技术 用 Langfuse 观察 Codex 的 MCP 工具调用 技术 产品应用中的本地化 技术 把 MCP 作为安全的 AI 集成边界 技术 用 Zod、OpenAPI 与 Swagger 维护 API 契约 技术 用 pg-boss 运行持久后台任务 技术 通过真实知识工作流理解 pgvector 与 RAG 技术 Pi Edge:让 Pi 待在 Obsidian 笔记旁 技术 为真实排序任务设计拖放交互 技术 Prisma 与 PostgreSQL:产品状态的事实来源 技术 把 Ralph Loop 当作计划队列 技术 用 React Router 组织全栈产品工作流 技术 把 shadcn 风格组件变成自己的产品系统 技术 用表格与编辑器承载密集业务操作 技术 Terminal Spike:原生 Android 终端 技术 在 Linux 上用 fcitx 输入带声调的拼音 技术 在 Linux 上配置 DEFT Pro 轨迹球 技术 在 KOReader 上使用 Pocket 稍后读 技术 为 Vercel AI SDK 设置明确的工具边界 技术 垂直切片架构与 dependency-cruiser 技术 用 Vitest 与 Playwright 测试产品工作流 技术 我的随处工作流:Herdr、code-server、Obsidian 与 Pi Edge 技术 Zod 不只是校验 技术 《卡拉马佐夫兄弟》是我看过最好的小说 随笔 基督徒口述1960劳改历史 随笔 圣经中的“道”与言语 随笔 我们爱,因为神先爱我们,而不是空洞的“自爱” 随笔 妈妈,让我来承担爸爸的过错吧 随笔 我与神的故事 随笔 世界远离上帝,接近中国 随笔 “爱的五种语言”和内外向,只存在于语言中 随笔 人格类型不存在,你在世界而非概念中生活 随笔 危险的词语:为什么心理学是不可能的 随笔 2000 年,一个深圳打工者的故事 随笔 阿联酋Ras al Khaimah见闻录 随笔 沙甸:1975 年的一场冲突 随笔 关于中国的纪录片 随笔
← 技术/工程实践

用表格与编辑器承载密集业务操作

复杂业务为何需要密集表格、修改状态跟踪和谨慎的批量保存。

用户需要比较许多值并谨慎修改时,长表单未必合适,表格反而更友好。

密集界面不应掩盖混乱思路,但有些工作本身就密集:审阅多行、比较列、修改少数值,再一次性保存。表格是工作区,不是装饰。TanStack Table 这类工具应保持 headless,让产品掌握编辑模型。

已修改行数:4
无效行数:1
修正错误前:禁用保存按钮

变化应可见,错误应指向具体单元格。用户必须知道看到的是已保存数据、未保存修改,还是保存失败。

我喜欢批量保存,因为它留出审阅机会。简单设置可以即时保存,多个相关值一起改时,先校验整批再提交更稳妥。

状态是难点:原始值、当前值、单元格是否已修改、行是否有效、是否正在保存,以及失败原因,都要明确。否则用户会开始怀疑应用有没有保存工作,这也是产品失败。

反复编辑时,纯鼠标操作很慢。Tab、Enter、Escape、复制、粘贴和可预测的焦点,决定工具是否真正好用。

高级规则编辑器或结构化文本编辑器也一样。无论基于 CodeMirror 还是其他组件,都不应只接收文字然后听天由命,而要帮助理解合法结构、执行前展示错误,并明确高风险操作。

代价是复杂性。密集表格可能成为应用中的小应用,需要无障碍审查、性能维护、校验及修改状态测试。只编辑一两个字段时,普通表单通常更好。

需要跨行比较、同时修改多项、整批校验、快速键盘操作,且错误代价足以支持增加审阅步骤时,我会选择密集表格。

目标并非把更多数据塞进屏幕,而是帮助工作本就繁杂的用户减少错误。