# UIDesignSpec.md - UI设计规范

| 文档类型 | **UI Design Specification** |
| --- | --- |
| **项目名称** | SmartAudit (AI 营销内容合规审核平台) |
| **版本号** | V1.0 |
| **发布日期** | 2026-02-03 |
| **设计稿文件** | `pencil-new.pen` |
| **设计风格** | Apple-style 暗色主题，商业级/高端质感 |

---

## 1. 设计令牌 (Design Tokens)

### 1.1 颜色系统

```css
/* 背景色 */
--bg-page: #0B0B0E;        /* 页面背景 */
--bg-card: #16161A;        /* 卡片背景 */
--bg-elevated: #1A1A1E;    /* 悬浮/高亮背景 */

/* 文字色 */
--text-primary: #FAFAF9;   /* 主要文字 */
--text-secondary: #A1A1AA; /* 次要文字 */
--text-tertiary: #71717A;  /* 辅助文字 */

/* 强调色 */
--accent-indigo: #6366F1;  /* 主强调色（品牌色） */
--accent-green: #32D583;   /* 成功/通过 */
--accent-coral: #E85A4F;   /* 警告/错误 */
--accent-amber: #F59E0B;   /* 中等风险/警告 */

/* 边框色 */
--border-subtle: #27272A;  /* 细微边框 */
```

### 1.2 字体系统

| 用途 | 字体 | 字重 | 字号 |
| --- | --- | --- | --- |
| 页面标题 | DM Sans | 700 (Bold) | 24px |
| 卡片标题 | DM Sans | 700 (Bold) | 22px |
| 区块标题 | DM Sans | 600 (SemiBold) | 16px |
| 正文内容 | DM Sans | 400 (Regular) | 15px |
| 辅助文字 | DM Sans | 400 (Regular) | 13px |
| 小标签 | DM Sans | 400/600 | 12px |
| 底部导航 | DM Sans | 400 (Regular) | 11px |

### 1.3 间距系统

| 用途 | 数值 |
| --- | --- |
| 页面内边距 (移动端) | 24px 左右，16px 上下 |
| 页面内边距 (桌面端) | 32px |
| 卡片内边距 | 14-16px 上下，16-20px 左右 |
| 卡片圆角 | 12px |
| 按钮圆角 | 8px |
| 标签圆角 | 4px |
| 元素间距 (紧凑) | 4-8px |
| 元素间距 (标准) | 12-16px |
| 元素间距 (宽松) | 20-24px |

---

## 2. 图标规范 (Icon System)

### 2.1 图标库

使用 **Lucide Icons** 图标库，确保全局一致性。

### 2.2 标准图标映射

| 功能 | 图标名称 | 使用场景 |
| --- | --- | --- |
| 工作台/首页 | `house` | 底部导航、侧边栏 |
| 任务 | `clipboard-list` | 底部导航、任务列表 |
| 审核/审批 | `circle-check` | 底部导航、审批中心 |
| 审核台 | `clipboard-check` | 侧边栏导航 |
| 消息/通知 | `bell` | 底部导航、消息中心 |
| 个人中心 | `user` | 底部导航、我的 |
| 达人管理 | `users` | 侧边栏导航 |
| 数据看板/报表 | `chart-column` | 底部导航、侧边栏 |
| 舆情预警 | `triangle-alert` | 侧边栏导航 |
| 代理商管理 | `building-2` | 侧边栏导航 |
| 审计日志 | `scroll-text` | 侧边栏导航 |
| 系统设置 | `settings` | 侧边栏导航 |
| Brief管理 | `file-text` | 侧边栏导航 |
| 版本比对 | `git-compare` | 侧边栏导航 |
| 筛选 | `sliders-horizontal` | 筛选按钮 |
| 搜索 | `search` | 搜索框 |
| 添加 | `plus` | 添加按钮 |
| 编辑 | `pencil` | 编辑操作 |
| 查看 | `eye` | 查看详情 |
| 下载/导出 | `download` | 导出按钮 |
| 箭头右 | `chevron-right` | 列表项箭头 |
| 箭头下 | `chevron-down` | 下拉选择 |
| 信号 | `signal` | 状态栏 |
| WiFi | `wifi` | 状态栏 |
| 安全 | `shield-check` | 隐私与安全 |
| 信息 | `info` | 关于我们 |
| 消息气泡 | `message-circle` | 帮助与反馈 |

### 2.3 图标尺寸

| 场景 | 尺寸 |
| --- | --- |
| 底部导航 | 24x24px |
| 侧边栏导航 | 20x20px |
| 按钮内图标 | 16x16px |
| 状态栏图标 | 16x16px |

---

## 3. 组件规范 (Component Specs)

### 3.1 移动端布局 (402x874)

```
┌─────────────────────────────┐
│  状态栏 (44px)              │
│  9:41          📶 📡 🔋    │
├─────────────────────────────┤
│                             │
│  内容区                      │
│  padding: 16px 24px         │
│  gap: 16-20px               │
│  flex: 1                    │
│                             │
├─────────────────────────────┤
│  底部导航 (83px)            │
│  渐变背景 + space-around    │
└─────────────────────────────┘
```

### 3.2 桌面端布局 (1440x900)

```
┌────────────┬────────────────────────────────┐
│            │                                │
│  侧边栏     │  主内容区                       │
│  260px     │  padding: 32px                 │
│  bg-card   │  gap: 24px                     │
│            │                                │
│  Logo      │  标题栏                         │
│  导航菜单   │  内容区域                       │
│            │                                │
└────────────┴────────────────────────────────┘
```

### 3.3 卡片组件

```css
.card {
  background: var(--bg-card);     /* #16161A */
  border-radius: 12px;
  padding: 14px 16px;             /* 移动端 */
  padding: 16px 20px;             /* 桌面端 */
}
```

### 3.4 按钮组件

**主要按钮 (Primary)**
```css
.btn-primary {
  background: var(--accent-indigo);  /* #6366F1 */
  color: #FFFFFF;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
}
```

**次要按钮 (Secondary)**
```css
.btn-secondary {
  background: var(--bg-elevated);    /* #1A1A1E */
  color: var(--text-secondary);      /* #A1A1AA */
  padding: 8px 16px;
  border-radius: 8px;
}
```

### 3.5 状态标签

| 状态 | 背景色 | 文字色 |
| --- | --- | --- |
| 已通过/活跃 | #32D58320 | #32D583 |
| 待处理/进行中 | #6366F120 | #6366F1 |
| 风险/错误 | #E85A4F20 | #E85A4F |
| 警告/中风险 | #F59E0B20 | #F59E0B |

### 3.6 底部导航

```css
.bottom-nav {
  height: 83px;
  padding: 12px 21px;
  background: linear-gradient(180deg, transparent 0%, #0B0B0E 50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nav-item.active {
  color: var(--accent-indigo);  /* #6366F1 */
}

.nav-item.inactive {
  color: var(--text-secondary); /* #A1A1AA */
}
```

### 3.7 侧边栏导航项

```css
.sidebar-nav-item {
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.sidebar-nav-item.active {
  background: var(--bg-elevated);  /* #1A1A1E */
  color: var(--accent-indigo);     /* #6366F1 */
  font-weight: 600;
}
```

---

## 4. 页面清单 (Screen Inventory)

### 4.1 达人端 (Creator)

| 页面名称 | 设备 | 优先级 | 设计稿节点ID |
| --- | --- | --- | --- |
| 任务列表 | Mobile | P0 | PjBJD |
| 智能上传 | Mobile | P0 | ZelCS |
| 审核结果 | Mobile | P0 | Vn3VU |
| AI审核中 | Mobile | P0 | lzdm4 |
| 消息中心 | Mobile | P1 | pF15t |
| 历史记录 | Mobile | P2 | ZKEFl |
| 个人中心 | Mobile | P2 | zCdM1 |
| 任务列表 | Desktop | P0 | HD3eK |
| 智能上传 | Desktop | P0 | N79bL |
| 审核结果 | Desktop | P0 | 3niUa |
| AI审核中 | Desktop | P0 | bxAKT |
| 消息中心 | Desktop | P1 | 8XKLP |

### 4.2 代理商端 (Agency)

| 页面名称 | 设备 | 优先级 | 设计稿节点ID |
| --- | --- | --- | --- |
| 工作台 | Desktop | P0 | RX8V9 |
| 审核决策台 | Desktop | P0 | 2u8Bq |
| Brief配置中心 | Desktop | P0 | djd2K |
| 达人管理 | Desktop | P1 | 5cFMX |
| 数据报表 | Desktop | P1 | An8gw |
| 版本比对 | Desktop | P2 | NDmYh |
| 工作台 | Mobile | P0 | VuH3F |
| 快捷审核 | Mobile | P0 | lrHaj |
| 任务列表 | Mobile | P1 | c6SPa |
| 消息中心 | Mobile | P1 | 9Us9g |
| 个人中心 | Mobile | P2 | 8OCZ3 |

### 4.3 品牌方端 (Brand)

| 页面名称 | 设备 | 优先级 | 设计稿节点ID |
| --- | --- | --- | --- |
| 数据看板 | Desktop | P0 | xUM9m |
| AI服务配置 | Desktop | P0 | 4ppiJ |
| 规则配置 | Desktop | P0 | nhHSF |
| 审计日志 | Desktop | P1 | jELTK |
| 代理商管理 | Desktop | P1 | 2jnnO |
| 舆情预警 | Desktop | P2 | NjCe7 |
| 系统设置 | Desktop | P2 | 4nVj4 |
| 数据看板 | Mobile | P0 | lpVdV |
| 舆情预警 | Mobile | P1 | wWAel |
| 审批中心 | Mobile | P1 | OueOe |
| 消息中心 | Mobile | P2 | 1w9xC |
| 我的 | Mobile | P2 | OJBbT |

---

## 5. 开发实施指南

### 5.1 技术栈建议

- **前端框架**: React / Vue 3
- **样式方案**: Tailwind CSS (推荐) 或 CSS Variables
- **图标库**: `lucide-react` / `lucide-vue-next`
- **字体**: Google Fonts - DM Sans

### 5.2 Tailwind CSS 配置

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'bg-page': '#0B0B0E',
        'bg-card': '#16161A',
        'bg-elevated': '#1A1A1E',
        'text-primary': '#FAFAF9',
        'text-secondary': '#A1A1AA',
        'text-tertiary': '#71717A',
        'accent-indigo': '#6366F1',
        'accent-green': '#32D583',
        'accent-coral': '#E85A4F',
        'accent-amber': '#F59E0B',
        'border-subtle': '#27272A',
      },
      fontFamily: {
        sans: ['DM Sans', 'sans-serif'],
      },
      borderRadius: {
        'card': '12px',
        'btn': '8px',
        'tag': '4px',
      },
    },
  },
}
```

### 5.3 CSS Variables 配置

```css
:root {
  /* 背景 */
  --bg-page: #0B0B0E;
  --bg-card: #16161A;
  --bg-elevated: #1A1A1E;

  /* 文字 */
  --text-primary: #FAFAF9;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;

  /* 强调色 */
  --accent-indigo: #6366F1;
  --accent-green: #32D583;
  --accent-coral: #E85A4F;
  --accent-amber: #F59E0B;

  /* 边框 */
  --border-subtle: #27272A;

  /* 字体 */
  --font-family: 'DM Sans', sans-serif;
}
```

### 5.4 开发检查清单

开发每个页面时，请对照以下检查项：

- [ ] 背景色使用 `--bg-page` (#0B0B0E)
- [ ] 卡片使用 `--bg-card` (#16161A) + 12px圆角
- [ ] 字体统一使用 DM Sans
- [ ] 图标使用 Lucide，按照图标映射表选择正确图标
- [ ] 底部导航高度 83px，渐变背景
- [ ] 侧边栏宽度 260px
- [ ] 状态标签使用对应颜色（通过=绿色，处理中=紫色，错误=红色）
- [ ] 按钮样式符合规范（主要=紫色，次要=深灰色）

---

## 6. 设计稿访问

设计稿文件：`pencil-new.pen`

使用 Pencil 编辑器打开查看完整设计，可通过节点ID定位到具体页面。

---

**文档维护者**: Claude
**最后更新**: 2026-02-03