Files

sion123 36195ea55a feat: 重构 IdentifyFace.vue 为 Hooks 架构

- 新增 hooks/ 目录，包含三个专用 Hook：
  * useVoiceGeneration - 语音生成和校验逻辑
  * useDigitalHumanGeneration - 数字人视频生成逻辑
  * useIdentifyFaceController - 协调两个子 Hook 的控制器

- 新增 types/identify-face.ts 完整类型定义

- 重构 IdentifyFace.vue 使用 hooks 架构：
  * 视图层与业务逻辑分离
  * 状态管理清晰化
  * 模块解耦，逻辑清晰

- 遵循单一职责原则，每个 Hook 只负责一个领域
- 提升代码可测试性和可维护性
- 支持两种视频素材来源：素材库选择和直接上传
- 实现语音生成优先校验的业务规则

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-12-28 00:19:17 +08:00

12 KiB

Raw Permalink Blame History

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

设计概述

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

1. 色彩系统

1.1 主色调 - Slate（石板色）

/* 背景色系 */
--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（蓝色）

--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（靛蓝）

--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 功能色

/* 成功/警告 */
--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 字体族

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

2.2 字号层级

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

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

2.3 字重

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

2.4 行高

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

3. 间距系统

3.1 间距变量

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

3.2 内边距

/* 组件内边距 */
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 圆角规范

rounded: 4px    /* 小元素 */
rounded-lg: 8px /* 按钮、输入框 */
rounded-xl: 12px/* 卡片 */
rounded-full: 9999px /* 头像、徽章 */

5. 阴影系统

5.1 阴影层级

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 栅格系统

/* 容器最大宽度 */
container: 1200px

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

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

6.2 页面布局

/* 头部导航 */
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）

样式：bg-slate-900 hover:bg-slate-800
内边距：px-6 py-2
圆角：rounded-lg
字体：font-medium
阴影：shadow-lg
颜色：text-white
图标：mr-2

次按钮（Secondary）

样式：bg-white border border-slate-300
悬停态：hover:bg-slate-50
内边距：px-4 py-1.5
圆角：rounded-lg
字体：text-sm

渐变按钮（Gradient）

渐变：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）

样式：border border-slate-300
悬停态：hover:bg-white
内边距：py-2

7.2 输入框（Input）

边框：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）

轨道：bg-slate-200
滑块：accent-blue-600
高度：h-2
圆角：rounded-lg

7.4 卡片（Card）

背景：bg-white
边框：border border-slate-200
圆角：rounded-xl
阴影：shadow-sm
内边距：p-6 / p-5

7.5 表格（Table）

头部：text-xs text-slate-500 uppercase bg-slate-50
悬停态：hover:bg-slate-50
分割线：divide-y divide-slate-100
粘性头部：sticky top-0

8. 状态系统

8.1 状态颜色

/* 选中状态 */
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 标签系统

/* 普通标签 */
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 图标库

/* 使用 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 常用图标

/* 功能图标 */
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 过渡动画

/* 标准过渡 */
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1)

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

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

10.2 焦点状态

focus:ring-2 focus:ring-blue-500 focus:outline-none

11. 响应式设计

11.1 断点策略

/* 手机 */
默认：堆叠布局
- 头部：堆叠用户信息和积分
- 主内容：全宽

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

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

12. 设计令牌（Design Tokens）

12.1 颜色令牌

{
  "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 间距令牌

{
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  }
}

12.3 圆角令牌

{
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "12px",
    "full": "9999px"
  }
}

13. 可访问性（a11y）

13.1 对比度要求

- 普通文本：至少 4.5:1
- 大文本（18px+）：至少 3:1
- 交互元素：至少 3:1

13.2 焦点可见性

/* 必须包含焦点指示器 */
focus:ring-2 focus:ring-blue-500 focus:outline-none

13.3 语义化 HTML

- 使用 proper heading hierarchy (h1-h6)
- 表单元素关联 label
- 按钮使用 button 元素
- 链接使用 a 元素

14. 实现建议

14.1 CSS 框架

<!-- 推荐使用 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

14.2 组件库建议

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

14.3 状态管理

// 推荐 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 短期优化

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

16.2 中期优化

主题定制：允许用户自定义主题色
布局切换：支持紧凑和宽松两种密度
国际化：支持多语言切换
深色模式：完整的暗色主题

16.3 长期优化

组件库抽象：将样式抽象为独立的组件库
设计令牌管理：使用 CSS 变量统一管理
Storybook 文档：为组件编写使用文档
自动化测试：添加视觉回归测试

设计原则总结

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

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

12 KiB Raw Permalink Blame History Unescape Escape

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

设计概述

1. 色彩系统

1.1 主色调 - Slate（石板色）

1.2 强调色 - Blue（蓝色）

1.3 辅助色 - Indigo（靛蓝）

1.4 功能色

2. 排版系统

2.1 字体族

2.2 字号层级

2.3 字重

2.4 行高

3. 间距系统

3.1 间距变量

3.2 内边距

4. 圆角系统

4.1 圆角规范

5. 阴影系统

5.1 阴影层级

6. 布局规范

6.1 栅格系统

6.2 页面布局

7. 组件设计规范

7.1 按钮系统

主按钮（Primary）

次按钮（Secondary）

渐变按钮（Gradient）

文字按钮（Text）

7.2 输入框（Input）

7.3 滑块（Range）

7.4 卡片（Card）

7.5 表格（Table）

8. 状态系统

8.1 状态颜色

8.2 标签系统

9. 图标系统

9.1 图标库

9.2 常用图标

10. 交互规范

10.1 过渡动画

10.2 焦点状态

11. 响应式设计

11.1 断点策略

12. 设计令牌（Design Tokens）

12.1 颜色令牌

12.2 间距令牌

12.3 圆角令牌

13. 可访问性（a11y）

13.1 对比度要求

13.2 焦点可见性

13.3 语义化 HTML

14. 实现建议

14.1 CSS 框架

14.2 组件库建议

14.3 状态管理

15. 设计检查清单

15.1 视觉一致性

15.2 交互体验

15.3 响应式设计

15.4 可访问性

16. 后续优化建议

16.1 短期优化

16.2 中期优化

16.3 长期优化

设计原则总结

12 KiB

Raw Permalink Blame History