# Component Patterns

## 组件边界

- 一个组件只承担一个主问题：展示、编排、输入、反馈、容器适配，不混在一起。
- Props 优先传递稳定、可理解的数据，不把临时拼装对象一路透传到底。
- 复杂逻辑下沉到 hooks；复杂样式策略沉淀为 token 或变体，不在 JSX 中堆条件样式。

## 语义化约束

- 页面骨架优先用 `header`、`main`、`section`、`nav`、`footer` 等语义标签组织。
- 表单使用显式 `label`、帮助文案和错误提示，不只依赖 placeholder。
- 列表、表格、图表和弹层要根据语义选择合适容器，而不是一律 `div`。

## 复用策略

- 先复用基础组件和 token，再决定是否抽新组件。
- 新组件要说明抽象边界、适用范围和退出条件，避免“一次性组件泛化”。
- 组件复用失败时，优先回看设计系统是否缺了 token 或变体，而不是复制一份近似组件。