本组件库为纯 UI 组件库。组件可以包含 hover、展开、选中、输入等局部交互状态，但不得包含接口请求、路由跳转、Store、埋点、协议解析等业务逻辑。业务数据、内容和操作均通过 Props、Slots 与事件注入。
组件分为三级，核心划分依据是组件对外提供的能力，而不是源码体积、DOM 数量或是否 import 了其他组件。
[ L1 原子组件 ] --组合--> [ L2 通用模式 ] --组合与布局--> [ L3 业务区块 ]
单一交互能力 可跨区块复用 独立展示单元L1：原子组件（Atom）—— 单一交互能力
定义
完成一个明确的用户意图，或实现一个完整的 WAI-ARIA 交互协议。
判定标准
- 单一意图： 对外只表达一种主要交互能力，例如点击、输入、选择、切换、弹出或提示。
- 独立使用： 可以脱离具体业务区块独立使用。
- 高度复用： 可用于不同页面、模式和业务区块。
- 实现无关： 可以封装 Base UI，也可以在内部复用其他基础组件；内部依赖不直接决定层级。
- 协议完整： 对于复合交互组件，应完整封装对应的键盘操作、焦点管理和 ARIA 语义。
典型示例
Button、Input、Switch、Checkbox、AvatarSelect、Tabs、DropdownMenu、Dialog、SheetToast、Tooltip、ToggleGroup
L2：通用模式（Pattern）—— 可跨区块复用的组合能力
定义
组合多个相互独立的 L1 原子组件，完成一种可被多个 L3 业务区块复用的通用任务或交互模式。
判定标准
- 多能力协作： 包含两个或多个具有独立职责的 L1 组件，并对它们进行状态或操作编排。
- 任务完整： 对外完成一个比单一控件更完整的通用任务，例如搜索、分页、附件操作或表单字段组织。
- 跨区块复用： 不绑定某个业务名词、数据协议或页面布局，可以被多个不同的 L3 区块使用。
- 稳定接口： 通过 Props、Slots 和事件暴露变化点，业务侧不需要了解内部组合方式。
仅仅因为组件内部引用了另一个组件，不代表它一定属于 L2。层级应由组件对外承担的职责决定。
典型示例
SearchBar：组合Input与Button，完成搜索任务。Pagination：组合页码、翻页操作与分页信息。FormField：组合标签、输入控件、说明和错误提示。
L3：业务区块（Block）—— 独立的纯 UI 展示单元
定义
由 L1 原子组件和 L2 通用模式组合而成，规定内部区域的布局与展示关系，通常对应设计稿中一个可以独立预览、交付和复用的业务区块。
判定标准
- 独立区块： 作为完整单元被页面或业务容器引用，而不是某个控件的内部零件。
- 结构明确： 规定标题、内容、状态、操作区等元素的相对位置与视觉关系。
- 允许展示语义： 可以带有卡片、对话、诊断结果等业务展示语义，但不得包含业务执行逻辑。
- 数据外部注入： 只接收适合展示的 Props 或 ViewModel，不直接接收后端 DTO，也不自行请求或转换业务数据。
- 操作向外通知： 用户行为通过
onAction、onSelect、onRetry等事件交给外部业务处理。
典型示例
Conversation：固定消息区、输入区和操作区的布局。Sidebar：固定导航、内容和折叠区域的结构。StandardCard：固定标题、描述、状态和操作区的卡片结构。- 诊断卡片、数据摘要卡片、任务卡片等独立业务展示块。
边界判定决策树
新增或调整组件时，依次回答以下问题：
1. 它是否只完成一个用户意图或一个 ARIA 交互协议？
- 是： 归为 L1。即使内部复用了其他组件，也不因此自动升级到 L2。
- 否： 进入下一步。
2. 它是否组合多个 L1，完成可跨业务区块复用的通用任务？
- 是： 归为 L2。
- 否： 进入下一步。
3. 它是否规定了一个独立业务展示块的内容结构与布局？
- 是： 归为 L3。
- 否： 说明组件职责仍不清晰，应继续拆分或重新定义，而不是勉强归层。
4. 它是否包含接口、路由、Store、埋点或业务协议处理？
- 是： 不应进入本组件库。应拆为纯 UI 组件与库外的业务 Container/Adapter。
Agent 复用规则
Agent 生成组件时必须遵循以下顺序：
- 查找现有 Token 和组件，优先通过已有 Props、Slots 或 Variant 满足需求。
- 现有单个组件无法满足时，优先组合已有 L1/L2。
- 只有出现新的、可复用的交互能力或区块结构时，才新增组件。
- 视觉差异优先扩展语义 Token 或稳定 Variant，不复制组件并硬编码样式。
- 新增组件必须按上述决策树归层，并保持纯 UI 边界。