01MVP 标识01MVP
功能指南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、品牌文案和配色
  • 新增业务卡片、表单、仪表盘模块
  • 调整亮暗主题默认值
  • 给现有页面补加载态、错误态和空状态

继续深入