组件
base-nova、Base UI、Iconify、共享 UI 原语、页面私有组件和语义状态。
先按复用范围决定组件位置,再决定抽象。只服务一个页面的组件留在该页面的 -components/;跨页面稳定复用的交互原语才进入 apps/web/src/components。
组件层级
| 位置 | 职责 |
|---|---|
pages/**/-components | 页面或布局私有组合,不作为公共 API |
components/ui | base-nova / Base UI shadcn 交互原语 |
components | 跨页面产品组件 |
packages/ui | Web/Admin 共用的消息、状态与 SEO 合同 |
packages/ui 不拥有品牌色、字体或页面布局;这些视觉值仍由各应用的全局 token 决定。
Web 样式
- 优先复用
global.css的语义变量和 Nova token。 - 不为单个组件建立新的颜色体系。
- 页面 section 使用全宽 band 或无框布局,Card 只表示真实重复项或工具。
- loading、empty、error、status 优先复用语义状态组件。
图标
Web runtime 产品 UI 只使用 @egoist/tailwindcss-icons 的 i-solar-* / i-carbon-* class。真实品牌标志可使用本地构建的 i-simple-icons-*;禁止导入 lucide-react。
components.json.iconLibrary 的 lucide 只是 shadcn CLI 元数据。每次 shadcn add/apply 后都要把生成图标转换为 Iconify class,ESLint 会阻止遗漏。
新增组件
- 先搜索现有原语和页面私有实现。
- 选择最窄的归属目录并补齐文件 Header。
- 复用语义 token、严格 i18n 和已有请求/状态模式。
- 更新所属
.folder.md。 - 运行 lint、typecheck,并在桌面与移动 viewport 验证交互和文本溢出。
页面组合见 Pages,Landing section 见 Landing Page。