sionrui/design-system.md

# 金牌文案大师 - 设计系统文档

## 设计概述

**产品定位**：AI 驱动的文案分析与管理平台
**设计风格**：现代简约、专业高效、数据驱动
**目标用户**：内容创作者、数字营销人员、VIP 会员用户

---

## 1. 色彩系统

### 1.1 主色调 - Slate（石板色）
```css
/* 背景色系 */
--slate-50: #f8fafc   /* 页面背景 */
--slate-100: #f1f5f9  /* 表格头部、分割区域 */
--slate-200: #e2e8f0  /* 边框、分割线 */
--slate-300: #cbd5e1  /* 输入框边框 */
--slate-400: #94a3b8  /* 次要文本 */
--slate-500: #64748b  /* 辅助文本 */
--slate-600: #475569  /* 主要文本 */
--slate-700: #334155  /* 强调文本 */
--slate-800: #1e293b  /* 深色文本 */
--slate-900: #0f172a  /* 头部背景 */

/* 应用场景 */
- 页面背景：slate-50
- 卡片背景：white
- 头部导航：slate-900
- 分割线：slate-100 / slate-200
- 次要文本：slate-500
- 主要文本：slate-700 / slate-800
```

### 1.2 强调色 - Blue（蓝色）
```css
--blue-400: #60a5fa  /* 链接、导航激活态 */
--blue-500: #3b82f6  /* 主按钮、焦点态 */
--blue-600: #2563eb  /* 滑块、强调元素 */
--blue-700: #1d4ed8  /* 深色按钮 */

/* 应用场景 */
- 导航激活状态：text-blue-400 + border-blue-400
- 滑块控件：accent-blue-600
- 焦点状态：ring-2 ring-blue-500
```

### 1.3 辅助色 - Indigo（靛蓝）
```css
--indigo-50: #eef2ff   /* 选中状态背景 */
--indigo-100: #e0e7ff  /* 卡片边框 */
--indigo-500: #6366f1  /* 选中态边框 */
--indigo-600: #4f46e5  /* 主渐变色 */
--indigo-700: #4338ca  /* 悬停态 */
--indigo-800: #3730a3  /* 选中文字 */
--indigo-900: #312e81  /* 标题文字 */

/* 应用场景 */
- 选中态卡片：border-indigo-500 + bg-indigo-50
- Pro 标签推荐：bg-red-500 + text-white
- 渐变按钮：from-indigo-600 to-purple-600
```

### 1.4 功能色
```css
/* 成功/警告 */
--green-500: #10b981   /* 成功状态 */
--yellow-400: #facc15  /* 积分显示 */
--yellow-500: #eab308  /* 会员标识 */

/* 错误/危险 */
--red-500: #ef4444     /* 错误提示 */
--red-800: #991b1b     /* 置顶标签 */

/* 中性色 */
--gray-100: #f3f4f6    /* 头像背景 */
--gray-300: #d1d5db    /* 按钮边框 */
--gray-400: #9ca3af    /* 禁用状态 */
--gray-700: #374151    /* 用户名 */
```

---

## 2. 排版系统

### 2.1 字体族
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
```

### 2.2 字号层级
```css
/* 标题层级 */
text-xs: 12px    /* 标签、徽章、小提示 */
text-sm: 14px    /* 次要文本、按钮文字 */
text-base: 16px  /* 正文、标准文本 */
text-lg: 18px    /* 卡片标题 */
text-xl: 20px    /* Logo、页面标题 */

/* 数字强调 */
text-2xl: 24px   /* 大数字展示（积分） */
```

### 2.3 字重
```css
font-normal: 400   /* 普通文本 */
font-medium: 500   /* 强调文本、标签 */
font-bold: 700     /* 标题、重要数字 */
```

### 2.4 行高
```css
leading-relaxed: 1.625  /* 长文本阅读 */
leading-normal: 1.5     /* 标准行高 */
```

---

## 3. 间距系统

### 3.1 间距变量
```css
space-1: 4px    /* 极小间距 */
space-2: 8px    /* 小间距 */
space-3: 12px   /* 标签间距 */
space-4: 16px   /* 组件内间距 */
space-5: 20px   /* 卡片内边距 */
space-6: 24px   /* 卡片外边距 */
space-8: 32px   /* 区块间距 */
```

### 3.2 内边距
```css
/* 组件内边距 */
p-1: 4px   /* 徽章 */
p-2: 8px   /* 标签 */
p-3: 12px  /* 输入框 */
p-4: 16px  /* 表格单元格 */
p-5: 20px  /* 卡片内容区 */
p-6: 24px  /* 卡片整体 */

/* 按钮内边距 */
py-1: 4px   /* 小按钮 */
py-2: 8px   /* 标准按钮 */
py-3: 12px  /* 大按钮 */
px-4: 16px  /* 水平内边距 */
px-6: 24px  /* 按钮水平间距 */
```

---

## 4. 圆角系统

### 4.1 圆角规范
```css
rounded: 4px    /* 小元素 */
rounded-lg: 8px /* 按钮、输入框 */
rounded-xl: 12px/* 卡片 */
rounded-full: 9999px /* 头像、徽章 */
```

---

## 5. 阴影系统

### 5.1 阴影层级
```css
shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05)  /* 卡片默认 */
shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1) /* 悬停态 */
shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1) /* 重要元素 */
shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1) /* 强调阴影 */

/* 彩色阴影 */
shadow-blue-500/20: 0 10px 15px -3px rgb(59 130 246 / 0.2)
shadow-indigo-500/30: 0 10px 15px -3px rgb(99 102 241 / 0.3)
```

---

## 6. 布局规范

### 6.1 栅格系统
```css
/* 容器最大宽度 */
container: 1200px

/* 网格比例 */
lg:w-2/3: 66.666667%  /* 主内容区 */
lg:w-1/3: 33.333333%  /* 侧边栏 */

/* 响应式断点 */
sm: 640px   /* 手机横屏 */
md: 768px   /* 平板 */
lg: 1024px  /* 笔记本 */
xl: 1280px  /* 桌面 */
```

### 6.2 页面布局
```css
/* 头部导航 */
height: 64px (h-16)
- 固定定位：fixed top-0
- 背景：slate-900
- 阴影：shadow-md

/* 主内容区 */
padding-top: 96px (pt-24)  /* 头部高度 + 间距 */
padding-bottom: 48px (pb-12)
- 横向间距：24px (px-6)
- 垂直间距：24px (space-y-6)

/* 侧边栏 */
sticky top-24  /* 粘性定位，距离顶部 96px */
```

---

## 7. 组件设计规范

### 7.1 按钮系统

#### 主按钮（Primary）
```css
样式：bg-slate-900 hover:bg-slate-800
内边距：px-6 py-2
圆角：rounded-lg
字体：font-medium
阴影：shadow-lg
颜色：text-white
图标：mr-2
```

#### 次按钮（Secondary）
```css
样式：bg-white border border-slate-300
悬停态：hover:bg-slate-50
内边距：px-4 py-1.5
圆角：rounded-lg
字体：text-sm
```

#### 渐变按钮（Gradient）
```css
渐变：bg-gradient-to-r from-indigo-600 to-purple-600
悬停：hover:from-indigo-700 hover:to-purple-700
阴影：shadow-lg shadow-indigo-500/30
图标：group-hover:rotate-12 transition
```

#### 文字按钮（Text）
```css
样式：border border-slate-300
悬停态：hover:bg-white
内边距：py-2
```

### 7.2 输入框（Input）
```css
边框：border border-slate-300
聚焦态：focus:ring-2 focus:ring-blue-500 focus:outline-none
圆角：rounded-lg
内边距：px-4 py-2
过渡：transition
占位符：placeholder:text-slate-400
```

### 7.3 滑块（Range）
```css
轨道：bg-slate-200
滑块：accent-blue-600
高度：h-2
圆角：rounded-lg
```

### 7.4 卡片（Card）
```css
背景：bg-white
边框：border border-slate-200
圆角：rounded-xl
阴影：shadow-sm
内边距：p-6 / p-5
```

### 7.5 表格（Table）
```css
头部：text-xs text-slate-500 uppercase bg-slate-50
悬停态：hover:bg-slate-50
分割线：divide-y divide-slate-100
粘性头部：sticky top-0
```

---

## 8. 状态系统

### 8.1 状态颜色
```css
/* 选中状态 */
bg-blue-50 + border-indigo-500

/* 悬停状态 */
hover:bg-slate-50
hover:bg-slate-100
hover:border-blue-400

/* 禁用状态 */
opacity-50 + cursor-not-allowed
text-slate-400

/* 激活状态 */
text-blue-400 + border-blue-400
```

### 8.2 标签系统
```css
/* 普通标签 */
bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded

/* 置顶标签 */
bg-red-100 text-red-800

/* 推荐标签 */
bg-red-500 text-white text-[10px] px-2 py-0.5 rounded-full font-bold

/* VIP 标签 */
text-yellow-500 border border-yellow-500 rounded px-1 inline-block
```

---

## 9. 图标系统

### 9.1 图标库
```css
/* 使用 Font Awesome 6.0.0 */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
```

### 9.2 常用图标
```css
/* 功能图标 */
fa-magic        /* Logo */
fa-tiktok       /* 平台标识 */
fa-magnifying-glass  /* 搜索 */
fa-download     /* 下载 */
fa-copy         /* 复制 */
fa-floppy-disk  /* 保存 */
fa-wand-magic-sparkles  /* AI 生成 */
fa-coins        /* 积分 */
fa-heart        /* 点赞 */
fa-comment      /* 评论 */
fa-share        /* 转发 */

/* 尺寸规范 */
text-sm: 14px   /* 小图标 */
text-base: 16px /* 标准图标 */
text-lg: 18px   /* 大图标 */
```

---

## 10. 交互规范

### 10.1 过渡动画
```css
/* 标准过渡 */
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1)

/* 悬停旋转 */
group-hover:rotate-12 transition

/* 颜色过渡 */
hover:text-white transition
```

### 10.2 焦点状态
```css
focus:ring-2 focus:ring-blue-500 focus:outline-none
```

---

## 11. 响应式设计

### 11.1 断点策略
```css
/* 手机 */
默认：堆叠布局
- 头部：堆叠用户信息和积分
- 主内容：全宽

/* 平板 (md: 768px+) */
- 头部：横向布局
- 输入框和按钮：横向排列

/* 桌面 (lg: 1024px+) */
- 主体：两栏布局 (2/3 + 1/3)
- 侧边栏：sticky 定位
- 用户信息：完整展示
```

---

## 12. 设计令牌（Design Tokens）

### 12.1 颜色令牌
```json
{
  "color": {
    "background": {
      "page": "#f8fafc",
      "card": "#ffffff",
      "header": "#0f172a",
      "sidebar": "#ffffff"
    },
    "text": {
      "primary": "#334155",
      "secondary": "#64748b",
      "inverse": "#ffffff"
    },
    "border": {
      "default": "#e2e8f0",
      "focus": "#3b82f6",
      "selected": "#6366f1"
    }
  }
}
```

### 12.2 间距令牌
```json
{
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  }
}
```

### 12.3 圆角令牌
```json
{
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "12px",
    "full": "9999px"
  }
}
```

---

## 13. 可访问性（a11y）

### 13.1 对比度要求
```css
- 普通文本：至少 4.5:1
- 大文本（18px+）：至少 3:1
- 交互元素：至少 3:1
```

### 13.2 焦点可见性
```css
/* 必须包含焦点指示器 */
focus:ring-2 focus:ring-blue-500 focus:outline-none
```

### 13.3 语义化 HTML
```html
- 使用 proper heading hierarchy (h1-h6)
- 表单元素关联 label
- 按钮使用 button 元素
- 链接使用 a 元素
```

---

## 14. 实现建议

### 14.1 CSS 框架
```html
<!-- 推荐使用 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
```

### 14.2 组件库建议
```javascript
// 推荐组件库
- Ant Design Vue（完整的企业级组件）
- Element Plus（Vue 3 生态）
- Headless UI（无样式组件库）
```

### 14.3 状态管理
```javascript
// 推荐 Pinia
- 用户信息：useUserStore
- 积分系统：useCreditsStore
- 文案列表：useContentStore
- 分析结果：useAnalysisStore
```

---

## 15. 设计检查清单

### 15.1 视觉一致性
- [ ] 所有按钮使用统一的圆角半径（8px）
- [ ] 所有输入框使用统一的边框和聚焦样式
- [ ] 颜色使用预定义的设计令牌
- [ ] 间距使用 8px 网格系统

### 15.2 交互体验
- [ ] 所有交互元素有明确的悬停状态
- [ ] 所有表单元素有明确的焦点状态
- [ ] 加载状态有明确的视觉反馈
- [ ] 错误状态有明确的错误提示

### 15.3 响应式设计
- [ ] 在移动端（< 768px）正确堆叠
- [ ] 在平板端（768px-1024px）合理调整
- [ ] 在桌面端（> 1024px）使用多栏布局

### 15.4 可访问性
- [ ] 所有交互元素可通过键盘访问
- [ ] 焦点状态清晰可见
- [ ] 文本对比度符合 WCAG 2.1 AA 标准
- [ ] 图片有 alt 属性

---

## 16. 后续优化建议

### 16.1 短期优化
1. **暗色模式支持**：增加 dark: 前缀的样式
2. **加载骨架屏**：为表格和卡片添加加载状态
3. **空状态设计**：完善空数据时的提示页面
4. **微动画**：增加页面切换和组件交互动画

### 16.2 中期优化
1. **主题定制**：允许用户自定义主题色
2. **布局切换**：支持紧凑和宽松两种密度
3. **国际化**：支持多语言切换
4. **深色模式**：完整的暗色主题

### 16.3 长期优化
1. **组件库抽象**：将样式抽象为独立的组件库
2. **设计令牌管理**：使用 CSS 变量统一管理
3. **Storybook 文档**：为组件编写使用文档
4. **自动化测试**：添加视觉回归测试

---

## 设计原则总结

1. **简洁高效**：去除不必要的装饰，专注内容本身
2. **清晰层次**：通过颜色、大小、间距建立清晰的信息层级
3. **一致统一**：统一的设计语言贯穿整个产品
4. **响应灵活**：适配多种设备和屏幕尺寸
5. **无障碍友好**：确保所有用户都能正常使用
6. **性能优先**：优化资源加载和渲染性能
7. **可扩展性**：为未来功能扩展预留空间

---

*本文档基于 Tailwind CSS 框架整理，建议在实际开发中使用设计令牌和组件库来保证设计的一致性。*