Complete all UI designs (P0/P1/P2) and add UI design specification

- Add 23 complete UI screens for Creator, Agency, and Brand portals - Include mobile (402x874) and desktop (1440x900) layouts - Create UIDesignSpec.md with: - Design tokens (colors, typography, spacing) - Icon mapping using Lucide icons - Component specifications - Screen inventory with node IDs - Tailwind CSS configuration - Development checklist Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-03 17:35:50 +08:00 · 2026-02-03 17:35:50 +08:00 · dd06502004
commit dd06502004
parent 2f2f7e0f61
2 changed files with 26885 additions and 6152 deletions
--- a/UIDesignSpec.md
+++ b/UIDesignSpec.md
@ -0,0 +1,391 @@
+# 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
--- a/pencil-new.pen
+++ b/pencil-new.pen