# UI组件分析指南

## 组件分类体系

### 1. 基础组件（Basic Components）

#### 1.1 按钮（Button）

**类型**：
- 主按钮（Primary Button）：最重要的操作
- 次按钮（Secondary Button）：次要操作
- 文字按钮（Text Button）：轻量级操作
- 图标按钮（Icon Button）：仅图标
- 浮动按钮（FAB）：悬浮操作按钮

**分析要点**：
```
- 尺寸：高度、内边距、最小宽度
- 圆角：border-radius值
- 颜色：背景色、文字色、边框色
- 状态：默认、悬停、点击、禁用、加载
- 阴影：box-shadow值
- 字体：字号、字重
```

**示例描述**：
```markdown
### 主按钮
- 尺寸：高度40px，左右内边距24px
- 圆角：4px
- 背景色：#1890FF
- 文字：14px，字重500，白色
- 悬停：背景色变为#40A9FF
- 阴影：0 2px 4px rgba(0,0,0,0.1)
```

#### 1.2 输入框（Input）

**类型**：
- 文本输入框（Text Input）
- 密码输入框（Password Input）
- 数字输入框（Number Input）
- 搜索框（Search Input）
- 文本域（Textarea）

**分析要点**：
```
- 尺寸：高度、宽度、内边距
- 边框：粗细、颜色、圆角
- 占位符：颜色、字号
- 前缀/后缀：图标、文字
- 状态：默认、聚焦、错误、禁用
- 标签：位置、样式
```

#### 1.3 选择器（Selector）

**类型**：
- 下拉选择（Select/Dropdown）
- 单选框（Radio）
- 复选框（Checkbox）
- 开关（Switch）
- 滑块（Slider）

**分析要点**：
```
- 触发器样式
- 下拉面板样式
- 选项样式（默认、悬停、选中）
- 多选标签样式
- 搜索功能
```

### 2. 展示组件（Display Components）

#### 2.1 卡片（Card）

**分析要点**：
```
- 尺寸：宽度、高度、内边距
- 边框：有无、颜色、粗细
- 圆角：border-radius
- 阴影：box-shadow
- 结构：头部、内容、底部
- 悬停效果：阴影变化、位移
```

**示例结构**：
```
┌─────────────────────┐
│  Card Header        │
├─────────────────────┤
│                     │
│  Card Content       │
│                     │
├─────────────────────┤
│  Card Footer        │
└─────────────────────┘
```

#### 2.2 列表（List）

**类型**：
- 基础列表（Basic List）
- 带图标列表（Icon List）
- 带头像列表（Avatar List）
- 可操作列表（Action List）

**分析要点**：
```
- 列表项高度
- 分隔线样式
- 图标/头像尺寸和位置
- 文字层级（标题、描述）
- 右侧操作区
- 悬停效果
```

#### 2.3 表格（Table）

**分析要点**：
```
- 表头样式：背景色、字重、对齐
- 单元格：高度、内边距、对齐
- 边框：有无、颜色
- 斑马纹：奇偶行颜色
- 悬停效果
- 排序图标
- 分页器样式
```

#### 2.4 标签（Tag/Badge）

**分析要点**：
```
- 尺寸：高度、内边距
- 圆角：完全圆角或小圆角
- 颜色：背景色、文字色
- 类型：默认、成功、警告、错误
- 可关闭：关闭图标样式
```

### 3. 导航组件（Navigation Components）

#### 3.1 顶部导航（Header/Navbar）

**分析要点**：
```
- 高度：固定高度值
- 背景：颜色、透明度、模糊效果
- Logo：位置、尺寸
- 菜单项：间距、字号、颜色
- 激活状态：下划线、背景色
- 右侧操作区：搜索、用户、通知
- 固定/吸顶效果
```

#### 3.2 侧边导航（Sidebar）

**分析要点**：
```
- 宽度：展开/收起状态
- 背景色
- 菜单项：高度、内边距、图标
- 层级：一级、二级菜单样式
- 激活状态：背景色、左侧边框
- 折叠动画
```

#### 3.3 面包屑（Breadcrumb）

**分析要点**：
```
- 分隔符：/ > → 或图标
- 链接样式：颜色、悬停效果
- 当前页：颜色、字重
- 字号
```

#### 3.4 标签页（Tabs）

**分析要点**：
```
- 标签样式：高度、内边距
- 激活状态：下划线、背景色、字重
- 分隔线
- 可关闭标签
- 滚动/更多按钮
```

### 4. 反馈组件（Feedback Components）

#### 4.1 弹窗（Modal/Dialog）

**分析要点**：
```
- 尺寸：宽度、最大高度
- 遮罩：颜色、透明度
- 圆角
- 阴影
- 头部：标题、关闭按钮
- 内容区：内边距
- 底部：按钮对齐、间距
- 动画：淡入、缩放
```

#### 4.2 抽屉（Drawer）

**分析要点**：
```
- 宽度
- 方向：左、右、上、下
- 遮罩
- 滑入动画
- 内容结构
```

#### 4.3 提示（Toast/Message）

**分析要点**：
```
- 位置：顶部、底部、中间
- 尺寸：最小宽度、内边距
- 圆角
- 阴影
- 图标：成功、警告、错误
- 自动关闭时间
- 动画：滑入、淡入
```

#### 4.4 加载（Loading）

**类型**：
- 旋转加载（Spinner）
- 进度条（Progress Bar）
- 骨架屏（Skeleton）
- 全屏加载

**分析要点**：
```
- 样式：圆形、条形、点状
- 颜色
- 尺寸
- 动画速度
- 文字提示
```

#### 4.5 工具提示（Tooltip）

**分析要点**：
```
- 背景色：通常深色
- 文字色：通常白色
- 圆角
- 箭头：位置、尺寸
- 最大宽度
- 触发方式：悬停、点击
```

### 5. 数据录入组件（Data Entry Components）

#### 5.1 日期选择器（DatePicker）

**分析要点**：
```
- 输入框样式
- 日历面板：尺寸、颜色
- 日期单元格：尺寸、悬停、选中
- 今天标记
- 范围选择样式
- 快捷选项
```

#### 5.2 时间选择器（TimePicker）

**分析要点**：
```
- 输入框样式
- 时间面板：列表或滚轮
- 时间单元格样式
- 确认按钮
```

#### 5.3 上传（Upload）

**类型**：
- 点击上传
- 拖拽上传
- 图片墙
- 头像上传

**分析要点**：
```
- 上传区域：尺寸、边框、背景
- 拖拽状态
- 文件列表样式
- 进度条
- 预览功能
- 删除按钮
```

#### 5.4 评分（Rate）

**分析要点**：
```
- 图标：星星、心形等
- 尺寸
- 颜色：未选中、选中
- 半星支持
- 只读状态
```

### 6. 其他组件（Other Components）

#### 6.1 头像（Avatar）

**分析要点**：
```
- 尺寸：小、中、大
- 形状：圆形、方形
- 边框
- 占位符：图标、文字
- 状态徽章：在线、离线
```

#### 6.2 徽章（Badge）

**分析要点**：
```
- 位置：右上角、右侧
- 尺寸：点状、数字
- 颜色
- 最大数字显示
```

#### 6.3 分页器（Pagination）

**分析要点**：
```
- 按钮样式：上一页、下一页
- 页码样式：默认、激活
- 跳转输入框
- 每页条数选择器
- 总数显示
```

#### 6.4 步骤条（Steps）

**分析要点**：
```
- 方向：横向、纵向
- 步骤节点：圆形、方形
- 连接线：实线、虚线
- 状态：待完成、进行中、已完成、错误
- 标题和描述样式
```

#### 6.5 时间轴（Timeline）

**分析要点**：
```
- 节点样式：圆点、图标
- 连接线：颜色、粗细
- 内容区：标题、时间、描述
- 颜色：不同状态
```

## 组件分析模板

### 标准组件描述格式

```markdown
### [组件名称]

**类型**：[组件类型]

**尺寸**：
- 高度：XXpx
- 宽度：XXpx / 自适应
- 内边距：XXpx

**样式**：
- 背景色：#XXXXXX
- 边框：Xpx solid #XXXXXX
- 圆角：Xpx
- 阴影：X X X rgba(X,X,X,X)

**文字**：
- 字号：XXpx
- 字重：XXX
- 颜色：#XXXXXX

**状态**：
- 默认：[描述]
- 悬停：[描述]
- 点击：[描述]
- 禁用：[描述]

**特殊说明**：
[其他需要注意的细节]
```

## 组件分析检查清单

### 基础检查
- [ ] 组件类型已识别
- [ ] 尺寸已测量
- [ ] 颜色已提取
- [ ] 字体样式已记录

### 交互检查
- [ ] 默认状态已记录
- [ ] 悬停效果已记录
- [ ] 点击效果已记录
- [ ] 禁用状态已记录
- [ ] 加载状态已记录（如适用）

### 细节检查
- [ ] 圆角值已记录
- [ ] 阴影已记录
- [ ] 边框已记录
- [ ] 间距已记录
- [ ] 动画效果已描述

### 响应式检查
- [ ] 移动端适配方案已记录
- [ ] 断点变化已记录

## 实际案例

### 案例：主按钮分析

```markdown
### 主按钮（Primary Button）

**类型**：实心按钮

**尺寸**：
- 高度：40px
- 最小宽度：88px
- 左右内边距：24px
- 上下内边距：0

**样式**：
- 背景色：#1890FF
- 边框：无
- 圆角：4px
- 阴影：0 2px 4px rgba(0,0,0,0.1)

**文字**：
- 字号：14px
- 字重：500
- 颜色：#FFFFFF
- 字母间距：0.5px

**状态**：
- 默认：背景#1890FF
- 悬停：背景#40A9FF，阴影加深为0 4px 8px rgba(0,0,0,0.15)
- 点击：背景#096DD9，轻微向下位移1px
- 禁用：背景#F5F5F5，文字#D9D9D9，无阴影，鼠标not-allowed

**动画**：
- 过渡时间：0.3s
- 缓动函数：ease-in-out

**特殊说明**：
- 按钮内文字不换行
- 图标与文字间距8px
- 加载状态显示旋转图标，文字变为"加载中..."
```

## 组件库参考

分析时可参考主流组件库的设计规范：

- **Ant Design**：企业级UI设计语言
- **Material Design**：Google设计规范
- **Element Plus**：Vue 3组件库
- **Arco Design**：字节跳动设计系统
- **Semi Design**：抖音企业级设计系统

## 注意事项

1. **一致性**：同类组件应保持样式一致
2. **可访问性**：确保组件符合WCAG标准
3. **响应式**：记录不同屏幕尺寸下的变化
4. **性能**：注意动画性能和加载优化
5. **复用性**：识别可复用的组件模式
6. **命名规范**：使用统一的组件命名