想去哪里?

首页 页面 关于 页面 项目 页面 简历 页面 技术 页面 随笔 页面 联系 页面 隐私政策 页面 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 年的一场冲突 随笔 关于中国的纪录片 随笔
← 技术/工程实践

把 shadcn 风格组件变成自己的产品系统

将可编辑的 UI 基础组件变为产品资产,而不是黑盒依赖。

我喜欢把 UI 基础组件复制到项目中,因为组件库因此成为应用的一部分,团队可以阅读和修改。

这是 shadcn/ui 方式最有价值的地方。组件不藏在黑盒包里,团队能让它们适应产品自己的语言。

这对重复出现的对话框、表单、表格、空状态、提示和菜单尤其重要。视觉应一致,但文案和行为仍需对应具体动作。删除与提交对话框可以共用基础组件,却不该共用含糊的说明。

对话框基础组件:共享
操作文案:具体
权限检查:由工作流负责
结果处理:由工作流负责

组件系统应简化共同结构,而不是隐藏产品决策。例如确认框可统一布局、焦点行为、按钮和无障碍标签,工作流仍决定确认什么、用户是否有权限、确认后发生什么。

ConfirmDialog 可以共享;暗中理解所有领域操作的组件,则越来越难以复用和信任。

取舍在于所有权。复制进来的组件就是你的代码:无障碍改进、设计调整和更新都由团队负责,比接受成品库默认值需要更多工作。

对产品应用而言,这通常值得。空状态要解释下一步,提示要准确说明发生了什么,表单错误要符合流程。这些并非通用组件库能替产品决定。

图标也类似:一致图标集有助于识别,却不能替代清晰说明。危险操作需要准确文字,含义不明显的工具栏按钮需要无障碍标签或提示。

应用有重复交互、团队希望控制细节、需要按产品审核无障碍和文案,且一致性比视觉新奇更重要时,我会选这种方式。

很小的原型可能不值得建立完整组件系统,也不应把每个共享组件做成庞大抽象。有时复制一个基础组件,提供清楚的 props 就够了。

价值不在于界面像某个库,而在于常见交互一致且可编辑:普通路径可预测,每个工作流仍能准确表达自己的含义。