Tanplate Docs

组件

base-nova、Base UI、Iconify、共享 UI 原语、页面私有组件和语义状态。

先按复用范围决定组件位置,再决定抽象。只服务一个页面的组件留在该页面的 -components/;跨页面稳定复用的交互原语才进入 apps/web/src/components

组件层级

位置职责
pages/**/-components页面或布局私有组合,不作为公共 API
components/uibase-nova / Base UI shadcn 交互原语
components跨页面产品组件
packages/uiWeb/Admin 共用的消息、状态与 SEO 合同

packages/ui 不拥有品牌色、字体或页面布局;这些视觉值仍由各应用的全局 token 决定。

Web 样式

  • 优先复用 global.css 的语义变量和 Nova token。
  • 不为单个组件建立新的颜色体系。
  • 页面 section 使用全宽 band 或无框布局,Card 只表示真实重复项或工具。
  • loading、empty、error、status 优先复用语义状态组件。

图标

Web runtime 产品 UI 只使用 @egoist/tailwindcss-iconsi-solar-* / i-carbon-* class。真实品牌标志可使用本地构建的 i-simple-icons-*;禁止导入 lucide-react

components.json.iconLibrarylucide 只是 shadcn CLI 元数据。每次 shadcn add/apply 后都要把生成图标转换为 Iconify class,ESLint 会阻止遗漏。

新增组件

  1. 先搜索现有原语和页面私有实现。
  2. 选择最窄的归属目录并补齐文件 Header。
  3. 复用语义 token、严格 i18n 和已有请求/状态模式。
  4. 更新所属 .folder.md
  5. 运行 lint、typecheck,并在桌面与移动 viewport 验证交互和文本溢出。

页面组合见 Pages,Landing section 见 Landing Page

On this page