SmoUI 的目的
SmoUI 不从零实现基础组件库,也不把 shadcn/ui 基础组件当成我们已经完成的组件。Web 底座继续使用 shadcn/ui 源码;SmoUI 负责把它约束成 Smo 系列可复用的中文业务模板、产品边界和验收流程。当前公开目录从 ModuleCard 开始逐个沉淀。
底座分层
shadcn/ui
源码层通过 CLI 把官方组件源码带入仓库,组件可以审查、改造和版本化。
components/ui/*Base UI
交互原语负责弹窗、浮层、选择器、焦点和键盘行为,SmoUI 不重写底层交互。
@base-ui/reactTailwind
样式系统承载设计 token、语义颜色、布局密度和响应式约束。
tailwind.config.tsSmoUI
产品层不重写基础组件,只沉淀中文页面场景模板、组件规则、生成契约和验收标准。
components/smo/*shadcn 链路
SmoUI 对齐的是 shadcn/ui 的代码分发模式:源码组件、Create preset、registry 和 CLI 形成闭环;SmoUI 在这条链路上增加 Smo 产品边界和中文业务模板。
源码组件
components/ui/*基础组件通过 shadcn CLI 进入项目,允许继续改造。
Create
/create切换 preset、主题、字体、圆角,作为调参和预览工作台。
Registry
registry.json / public/r只把已确认的组件、规则和后续资产变成可分发代码。
CLI
add / view / search / build / apply让外部项目能安装、查看、搜索和应用 SmoUI 资产。
生成流程
1
需求
识别产品、场景、关键对象和使用频率。
产品上下文
2
边界
确认能力归属、禁止跨界内容和权限责任。
责任边界
3
页面模板
匹配整页骨架、组件组合和交互状态。
页面场景模板
4
工程
拆到组件、常量、类型和工具函数。
可维护代码
5
沉淀
验证通过后写入模板、规则和 registry。
复用资产
产品边界
| 产品 | 负责什么 | 典型 UI | 不能做什么 |
|---|---|---|---|
| SmoArch | 身份、权限、支付、审计、文件、任务、计费、网关等平台底座能力。 | 待确认 | 具体业务应用的经营页面和垂直行业流程。 |
| SmoLink | 应用入口、客户端体验、应用级访问和轻量任务面板。 | 待确认 | 云端控制台、计费底座或运行时实现。 |
| smolink-online | 云端控制台、模块开通、工作区、套餐、角色和上下文下发。 | 待确认 | 底层身份、支付或文件存储实现。 |
| SmoFan | 粉丝与会员经营、权益触达、商家侧运营、内容素材和转化承接。 | 待确认 | 平台身份底座、支付底座、云端模块开通实现或 SmoMark 核销流程。 |
| SmoMark | 增长计划经营、项目绑定、报名、订单、核销和复盘分析。 | 待确认 | 私有登录中心、平台支付底座或 SmoArch 身份对象。 |
验收命令
Lint
npm.cmd run lintTypecheck
npm.cmd run typecheckBuild
npm.cmd run build先判断产品边界,再选择页面场景模板,最后组合组件。
Web 基础组件直接使用 shadcn/ui 官方源码,不做一套不兼容的 SmoUI 组件 API。
页面文件只做组合,数据、规则、状态和复杂 UI 拆到 components/smo。
每次沉淀都同步文档,并通过 lint、typecheck、build。