组件和区块

组件库负责保持共享的视觉和行为一致。页面结构说明当前实例的含义以及它在此处执行的动作。

分开阅读三个示例：不同宽度的页面视图 default/empty、原生按钮变体 Type=Primary/Secondary，以及指向 filters-open 的动作。组件变体不是页面视图；声明状态目标也不等于实现运行时转换。 查看原图。

图解入门展示了这种分工：共享组件定义按钮外观，页面实例指向当前页面的模态窗口。

两个库级别

• UI Kit 包含可复用的界面元素：按钮、字段、卡片和控件；
• Page Sections 包含具有独立结构和产品职责的大型页面区块。

组件的大小不决定级别，来源和职责才决定。

组件和实例

共享组件定义视觉状态和默认行为。页面中的实例提供当前内容、上下文和动作：

contact-button [action=modal:contact-modal]

同一个按钮组件可以在不同位置打开不同目标。不要把具体页面动作写进共享组件名称。

区块标识

来自 Page Sections 的实例已经有稳定来源。如果本地图层不是区块边界，就不要重复添加 [section]。直接在页面制作的区块需要明确键：

checkout-summary [section=checkout-summary]

保持来源清楚

只要共享组件仍然负责，就使用实例而不是解除关联的副本。让页面专属内容保持可见和可编辑。数据、动作和状态应放在页面或结构化契约中。

交付前检查

• 能否找到源组件？
• 页面专属内容是否可见？
• 动作是否属于当前上下文？
• 是否展示了真实状态，而不是隐藏旧图层？

通用的来源规则见设计规则。