meijiaka-zy/tauri-app/docs/spacing-guide.md

间距规范指南 (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. 响应式设计：大屏适当增加，小屏适当减少

常见场景规范

组件间距

/* 按钮内边距 */
.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 */

页面布局

/* 页面边距 */
.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	直接替换

迁移进度

✅ 已完成

• variables.css - 添加 --spacing-2xs: 2px
• ContentManagement.css - 全部标准化
• VideoGeneration.css - 主要间距标准化
• ScriptCreation.css - 间距标准化
• global.css - Badge 组件间距标准化
• Toast.css - 间距标准化
• CoverDesign.tsx - 间距标准化
• VideoGeneration.tsx - 间距标准化
• ScriptCreation.tsx - 间距标准化
• VideoCompositeDebug.tsx - 间距标准化
• VideoComposite.tsx - 间距标准化
• AvatarUploadModal.tsx - 间距标准化

🔄 待处理（设计相关，需单独评估）

• VideoCreation.css - 封面模板样式（约 25 处，有设计注释）
  • 这些值用于视觉对齐，需要设计师确认后再调整