# 组件架构 ## 概述组件是现代界面的构建块。精心设计的组件系统可以实现一致性，加快开发速度，并使维护变得更加容易。这项技能教会您系统地思考组件：设计可重用性、管理复杂性、彻底记录以及构建您的团队喜欢使用的库。 ## 核心方法论：原子设计原子设计是一种通过将接口分解为基本构建块来创建设计系统的方法。 ### 五个级别 **1\.原子** 最小、最基本的组成部分。它们不能进一步分解而不失去其意义。示例：按钮、输入、标签、图标、徽章、微调器 **特点：** * 单一职责 * 高度可重复使用 * 不依赖于其他组件（样式除外） * 完全独立 **示例原子：按钮** 接口 ButtonProps { 变体？： '主要' | '次要' | '鬼'; 尺寸？： 'sm' | 'md' | 'lg'; 禁用？：布尔值；加载？：布尔值； onClick?: () => void; 孩子：React.ReactNode； } 导出 const Button: React.FC = ({ 变体='主要'，大小='md', 禁用=假，加载=假，单击时，孩子们， }) => { 返回（ <按钮 className={`按钮按钮--${variant}按钮--${size}`} 禁用={禁用||正在加载} onClick={onClick} > {正在加载&& } {孩子} ）； }; **2\.分子** 原子团结合在一起形成相对简单的功能单元。示例：表单输入（标签+输入+错误消息）、搜索栏（图标+输入+按钮）、卡片标题（头像+姓名+日期） **特点：** * 由原子组成 * 服务于特定目的 * 可在整个产品中重复使用 * 有清晰的界面（道具） **示例分子：表单输入** 接口 FormInputProps { 标签：字符串；占位符？：字符串；错误？：字符串；值：字符串； onChange: (值: 字符串) => void; 禁用？：布尔值； } 导出常量 FormInput: React.FC = ({ 标签，占位符，错误，值，改变时，残疾人, }) => { 返回（

<标签>{标签} <输入占位符={占位符} 值={值} onChange={(e) => onChange(e.target.value)} 禁用={禁用} aria-invalid={!!错误} /> {错误&& <错误消息>{错误}}

）； }; **3\.有机体** 由分子和/或原子和/或其他有机体组组成的相对复杂的 UI 部分。示例：导航栏、表单、卡片、模式、侧边栏 **特点：** * 由分子和原子组成 * 服务于特定的商业目的 * 更复杂的接口 * 经常有状态管理 **示例生物：卡片** 接口 CardProps { 标题：字符串；描述？：字符串；图像？：字符串；行动？：{ 标签：字符串； onClick: () => 无效; }; 孩子？：React.ReactNode； } 导出 const Card: React.FC = ({ 标题，描述，图像，行动，孩子们， }) => { 返回（

{图像 &&

}

{标题}

{描述 &&

{描述}

} {孩子} {动作&&(

）； }; **4\.模板** 将组件放入布局并阐明设计的底层内容结构的页面级对象。示例：博客文章模板、产品页面模板、仪表板模板 **特点：** * 由有机体、分子、原子组成 * 定义页面结构和布局 * 展示组件如何协同工作 * 通常不可重用（特定于页面类型） **示例模板：博客文章** 导出 const BlogPostTemplate: React.FC = ({ 标题，作者，日期，图像，内容，相关帖子， }) => { 返回（

<标题/> <文章类名=“博客文章”>

{标题}

<头像 src={author.avatar} alt={author.name} /> {作者.name} {格式日期（日期）}

{内容}

<节类名=“相关帖子”>

{用户名}

）； // UserEditForm：处理表单状态和提交 const UserEditForm = ({ 用户 }) => { // 形成逻辑 }; // UserActivity：显示用户活动 const UserActivity = ({ 用户 }) => { // 活动逻辑 }; ### 原则 2：组合优于继承通过组合更简单的组件来构建复杂的组件，而不是通过继承。 **不好：** // 继承方式（避免）按钮类扩展了 React.Component {} PrimaryButton 类扩展 Button {} LargeButton 类扩展 Button {} LargePrimaryButton 类扩展 Button {} **好：** // 组合方法（首选） const Button = ({variant = 'primary', size = 'md', ...props }) => ( ）； }; // 父级不管理状态 const 父 = () => { return console.log(value)} />; }; ## 组件变体 ### 定义变体变体是针对不同上下文的组件的不同版本。明确定义它们：接口 ButtonProps { 变体？： '主要' | '次要' | '幽灵' | '危险'; 尺寸？： 'sm' | 'md' | 'lg'; 状态？： '默认' | '悬停' | '活跃' | '禁用'| '加载中'; } // 变体矩阵 const Button = ({variant = 'primary', size = 'md', state = 'default', ...props }) => { constvariantClass = `按钮--${variant}`; const sizeClass = `按钮--${size}`; const stateClass = `按钮--${state}`; 返回（ ### 变体文档用示例记录所有变体： # 按钮组件 ## 变体 ### 变体：初级 - 默认按钮样式 - 用于主要操作 - 示例：“保存”、“提交”、“创建” ### 变体：次要 - 辅助按钮样式 - 用于辅助操作 - 示例：“取消”、“返回”、“跳过” ### 变体：幽灵 - 最小按钮样式 - 用于第三级操作 - 示例：“了解更多”、“查看详细信息” ### 变体：危险 - 危险按钮样式 - 用于破坏性行为 - 示例：“删除”、“删除”、“放弃” ## 尺寸 ### 尺寸：sm - 32 像素高度 - 12px 字体大小 - 用于紧凑空间 ### 尺寸：MD - 40 像素高度 - 14px 字体大小 - 默认尺寸 ### 尺寸：lg - 48 像素高度 - 16px 字体大小 - 用于突出的动作 ## 州 ### 状态：默认 - 正常外观 ### 状态：悬停 - 稍深或稍浅 - 表示交互性 ### 状态：活跃 - 压制外观 - 表示按钮正在被单击 ### 状态：已禁用 - 变灰 - 不允许使用光标 - 不可点击 ### 状态：加载中 - 显示微调器 - 表示正在进行的操作 - 不可点击 ## 组件文档 ### 记录什么 1. **用途** — 该组件的作用是什么？ 2. **道具** — 它接受什么道具？ 3. **变体** — 有哪些变体可用？ 4. **状态** — 它可以处于哪些状态？ 5. **示例** — 如何使用它？ 6. **辅助功能** — 它具有哪些辅助功能？ 7. **边缘情况** — 您应该注意哪些边缘情况？ ### 文档模板 # 组件名称 ## 目的简要描述该组件的用途以及何时使用它。 ## 道具 |道具|类型 |默认 |描述 | | :--- | :--- | :--- | :--- | | `变体` | '主要'\| '次要' | '主要' |视觉变体| | `尺寸` | 'sm' \| 'MD' \| 'lg' | 'md' |元件尺寸| | `已禁用` |布尔 |假 |禁用组件 | | `孩子们` |反应节点 | - |成分内容| ## 变体 ### 小学用于主要操作。 ````jsx 主要操作 ### 中学用于辅助操作。辅助操作 ## 州 ### 默认外观正常。 ### 已禁用呈灰色，无法点击。 <按钮已禁用>已禁用 ### 加载中显示旋转器，不可点击。 <按钮加载>正在加载... ## 辅助功能 * 可使用键盘（Enter、空格键激活） * 屏幕阅读器友好（宣布按钮文本） * 焦点可见（焦点上的轮廓） * Aria 标签支持仅图标按钮 ## 示例 ### 基本按钮 ### 带图标 ### 全宽 <按钮 fullWidth>全宽按钮 ## 边缘情况 * 仅图标按钮必须有 aria-label * 禁用的按钮不应该是可点击的 * 加载状态应显示微调器 * 非常长的文本应该换行或截断 ## 如何通过 Claude 代码使用此技能 ### 审核您的组件 “我正在使用组件架构技能。你能审核我的组件吗？ * 识别违反单一职责的组件 * 建议组件构成改进 * 检查组件文档的完整性 * 识别我缺少的可重用模式 * 建议组件库结构” ### 设计组件系统 “你能帮我设计一个组件系统吗？ * 定义原子成分（原子、分子、有机体） * 创建组件架构 * 设计组件道具接口 * 为每个组件定义变体 * 创建组件文档” ### 重构组件 “你能帮我重构我的组件吗？ * 分解复杂的组件 * 改善组件构成 * 简化道具接口 * 添加缺失的变体 * 改进文档” ### 生成组件库 “你能生成一个组件库吗？ * 创建所有原子组件（按钮、输入、标签等） * 创建分子（FormInput、SearchBar等） * 创建有机体（卡片、模态等） * 包括 TypeScript 类型 * 包括 Tailwind CSS 样式 * 包括全面的文档” ## 设计批评：评估您的组件 Claude Code 可以批评你的组件： “你能评估一下我的组件架构吗？ * 我的组件是否遵循单一责任？ * 我的成分组成好吗？ * 我的道具界面设计得好吗？ * 我的文档全面吗？ * 有哪一件事是我可以立即改进的？” ## 与其他技能的整合 - **设计基础** — 组件标记和样式 - **layout-system** — 组件布局模式 - **typography-system** — 组件版式 - **颜色系统** — 组件颜色 - **accessibility-excellence** — 组件可访问性 - **交互设计** — 组件交互 ## 关键原则 **1.单一职责** 每个组件都应该有一个明确的目的。 **2.组合优于继承** 通过组合更简单的组件来构建复杂的组件。 **3.道具界面设计** 仔细设计道具以保证清晰度和灵活性。 **4.变体实现可重用性** 精心设计的变体使组件可以跨上下文重用。 **5.文档支持采用** 全面的文档可帮助您的团队有效地使用组件。 ## 检查表：您的组件架构准备好了吗？ - [ ] 组件遵循单一责任原则 - [ ] 组件由更简单的组件组成 - [ ] Props 接口经过精心设计和记录 - [ ] 所有变体均已定义并记录 - [ ] 所有状态均已定义并记录 - [ ] 组件可访问（键盘、屏幕阅读器、焦点） - [ ] 组件有全面的文档 - [ ] 组件库被组织（原子、分子、有机体） - [ ] 组件可在整个产品中重复使用 - [ ] 组件经过测试（单元测试、视觉测试）精心设计的组件架构是可扩展、可维护产品的基础。

组件架构

包含技能