功能指南UI 与主题
UI 与主题
在 01MVP 设计系统内修改页面、组件和主题,而不是随意堆样式。
本页是主指南,先讲在模板里如何改 UI;如果你需要具体组件导出和 token,请再看 @mono/ui 和 @mono/theme。
先理解三层组件边界
packages/ui:纯 shadcn/ui 原语,只能通过 shadcn CLI 更新packages/ui-shared:跨多个 app 复用的业务组件apps/*/src/components:只属于单个 app 的页面组件和变体
典型修改路径
改单个页面的样式
优先在对应 app 的页面组件或局部组件里改,不要为了“统一”把一次性逻辑塞进共享包。
抽取跨页面复用的业务组件
当组件已经在两个以上 app 或多个功能区重复出现,再考虑抽到 packages/ui-shared。
调整主题和设计 token
先看 设计系统 里的语义 token、间距和圆角约定,再修改 theme.css 或共享样式,避免出现脱离整体风格的新视觉分支。
常见改造点
- 更换 Logo、品牌文案和配色
- 新增业务卡片、表单、仪表盘模块
- 调整亮暗主题默认值
- 给现有页面补加载态、错误态和空状态
继续深入
- 设计原则:/docs/concepts/ui-style
- 组件参考:/docs/reference/packages/ui
- 主题 token:/docs/reference/packages/theme