SmoUI
开始使用

SmoUI 的目的

SmoUI 不从零实现基础组件库,也不把 shadcn/ui 基础组件当成我们已经完成的组件。Web 底座继续使用 shadcn/ui 源码;SmoUI 负责把它约束成 Smo 系列可复用的中文业务模板、产品边界和验收流程。当前公开目录从 ModuleCard 开始逐个沉淀。

底座分层

shadcn/ui

源码层

通过 CLI 把官方组件源码带入仓库,组件可以审查、改造和版本化。

components/ui/*

Base UI

交互原语

负责弹窗、浮层、选择器、焦点和键盘行为,SmoUI 不重写底层交互。

@base-ui/react

Tailwind

样式系统

承载设计 token、语义颜色、布局密度和响应式约束。

tailwind.config.ts

SmoUI

产品层

不重写基础组件,只沉淀中文页面场景模板、组件规则、生成契约和验收标准。

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 lint

Typecheck

npm.cmd run typecheck

Build

npm.cmd run build

先判断产品边界,再选择页面场景模板,最后组合组件。

Web 基础组件直接使用 shadcn/ui 官方源码,不做一套不兼容的 SmoUI 组件 API。

页面文件只做组合,数据、规则、状态和复杂 UI 拆到 components/smo。

每次沉淀都同步文档,并通过 lint、typecheck、build。