# 间距规范指南 (Spacing Guide)

## 间距系统

基于 4px 网格系统，提供统一的视觉节奏：

| 变量 | 值 | 使用场景 |
|------|-----|----------|
| `--spacing-2xs` | 2px | 微调控件、边框线、极细间距 |
| `--spacing-xs` | 4px | 紧凑间隙、图标边距、行内元素 |
| `--spacing-sm` | 8px | 小间隙、按钮内边距-y、列表项 |
| `--spacing-md` | 12px | 标准间隙、卡片内边距、表单字段 |
| `--spacing-lg` | 16px | 大间隙、区块间距、内容分组 |
| `--spacing-xl` | 24px | 页面区块、主要内容分隔 |
| `--spacing-2xl` | 32px | 大区块间距、页面边距 |
| `--spacing-3xl` | 48px | 页面级间距、Hero 区域 |

## 使用原则

1. **优先使用变量**，禁止随意写死数值
2. **就近取整**：6px → 4px 或 8px；10px → 8px 或 12px
3. **保持一致性**：同一场景下使用相同间距
4. **响应式设计**：大屏适当增加，小屏适当减少

## 常见场景规范

### 组件间距
```css
/* 按钮内边距 */
.btn-sm { padding: var(--spacing-xs) var(--spacing-sm); }  /* 4px 8px */
.btn-md { padding: var(--spacing-sm) var(--spacing-md); } /* 8px 12px */
.btn-lg { padding: var(--spacing-sm) var(--spacing-lg); } /* 8px 16px */

/* 卡片内边距 */
.card-sm { padding: var(--spacing-sm); }  /* 8px */
.card-md { padding: var(--spacing-md); }  /* 12px */
.card-lg { padding: var(--spacing-lg); }  /* 16px */

/* 列表间隙 */
.list-xs { gap: var(--spacing-xs); }  /* 4px */
.list-sm { gap: var(--spacing-sm); }  /* 8px */
.list-md { gap: var(--spacing-md); }  /* 12px */
```

### 页面布局
```css
/* 页面边距 */
.page-padding { padding: var(--spacing-lg) var(--spacing-xl); }  /* 16px 24px */

/* 区块间距 */
.section-gap { margin-bottom: var(--spacing-xl); }  /* 24px */

/* 表单字段间距 */
.form-field-gap { margin-bottom: var(--spacing-md); }  /* 12px */
```

## 迁移指南

| 旧值 | 新值 | 说明 |
|------|------|------|
| 2px | `--spacing-2xs` | 直接替换 |
| 4px | `--spacing-xs` | 直接替换 |
| 6px | `--spacing-xs` 或 `--spacing-sm` | 根据视觉轻重选择 4px 或 8px |
| 8px | `--spacing-sm` | 直接替换 |
| 10px | `--spacing-sm` 或 `--spacing-md` | 选择 8px 或 12px |
| 12px | `--spacing-md` | 直接替换 |
| 14px | `--spacing-md` 或 `--spacing-lg` | 选择 12px 或 16px |
| 15px | `--spacing-lg` | 改为 16px |
| 16px | `--spacing-lg` | 直接替换 |
| 18px | `--spacing-lg` | 改为 16px |
| 20px | `--spacing-xl` | 改为 24px 或保留特殊情况 |
| 24px | `--spacing-xl` | 直接替换 |
| 32px | `--spacing-2xl` | 直接替换 |
| 40px | `--spacing-2xl` 或 `--spacing-3xl` | 选择 32px 或 48px |
| 48px | `--spacing-3xl` | 直接替换 |

## 迁移进度

### ✅ 已完成
- [x] variables.css - 添加 --spacing-2xs: 2px
- [x] ContentManagement.css - 全部标准化
- [x] VideoGeneration.css - 主要间距标准化
- [x] ScriptCreation.css - 间距标准化
- [x] global.css - Badge 组件间距标准化
- [x] Toast.css - 间距标准化
- [x] CoverDesign.tsx - 间距标准化
- [x] VideoGeneration.tsx - 间距标准化
- [x] ScriptCreation.tsx - 间距标准化
- [x] VideoCompositeDebug.tsx - 间距标准化
- [x] VideoComposite.tsx - 间距标准化
- [x] AvatarUploadModal.tsx - 间距标准化

### 🔄 待处理（设计相关，需单独评估）
- [ ] VideoCreation.css - 封面模板样式（约 25 处，有设计注释）
  - 这些值用于视觉对齐，需要设计师确认后再调整
