ui-designercomponent-specification

# UI组件规范 ## 适用场景 基于设计系统，定义可复用的UI组件规范，确保组件在不同场景下的一致性和完整性。 ## 组件设计原则 1. **完整性**：考虑所有状态（默认、悬停、按下、聚焦、禁用、加载、错误） 2. **一致性**：同类组件使用相同的设计语言 3. **可访问性**：支持键盘导航、屏幕阅读器 4. **响应式**：适配不同屏幕尺寸 ## 基础组件规范 ### 1. 按钮 (Button) #### 变体 | 变体 | 用途 | 视觉特征 | |------|------|----------| | Primary | 主要操作（每个区域最多1个） | 实心，品牌色背景，白色文字 | | Secondary | 次要操作 | 描边，透明背景，品牌色文字 | | Ghost | 低优先级操作 | 无边框，透明背景，灰色文字 | | Danger | 危险操作（删除、清空） | 实心，红色背景，白色文字 | | Link | 文本链接 | 无背景，品牌色文字，下划线 | #### 尺寸 | 尺寸 | 高度 | 内边距 | 字号 | 圆角 | 最小宽度 | |------|------|--------|------|------|----------| | sm | 32px | 12px 16px | 14px | 6px | 64px | | md | 40px | 12px 20px | 16px | 8px | 80px | | lg | 48px | 16px 24px | 16px | 8px | 96px | #### 状态 | 状态 | Primary 背景 | Primary 文字 | 边框 | 其他 | |------|--------------|--------------|------|------| | 默认 | `Primary` | `White` | - | - | | 悬停 | `Primary-hover` | `White` | - | cursor: pointer | | 按下 | `Primary-active` | `White` | - | transform: scale(0.98) | | 聚焦 | `Primary` | `White` | 2px Primary 外发光 | outline | | 禁用 | `Gray-200` | `Gray-400` | - | cursor: not-allowed, opacity: 0.6 | | 加载 | `Primary` | - | - | 显示 spinner，文字隐藏 | #### 图标按钮 | 属性 | 值 | |------|-----| | 尺寸 | 32px / 40px / 48px（正方形） | | 图标大小 | 16px / 20px / 24px | | 圆角 | radius-md 或 radius-full（圆形） | #### 代码示例 ```tsx // 主按钮 <Button variant="primary" size="md">确认</Button> // 次要按钮 <Button variant="secondary" size="md">取消</Button> // 危险按钮 <Button variant="danger" size="md">删除</Button> // 禁用状态 <Button variant="primary" size="md...