# Yudao Cloud B端设计规范提示词

> **定位**: B端生产力工具 | 简约高效 | 专业可信 | 创新体验
> **技术栈**: Vue 3 + TypeScript + Ant Design Vue + TailwindCSS
> **业务**: AI/媒体功能增强的Spring Boot快速开发平台

---

## 设计哲学

```
简约而不简单，高效且具辨识
- 每个像素都有目的
- 每个交互都有反馈
- 每个元素都有秩序
```

**核心原则**:
1. **认知减负** - 减少用户思考成本
2. **操作高效** - 最短路径完成任务
3. **视觉一致** - 建立可预测的心智模型
4. **创新克制** - 在熟悉中创造惊喜

---

## 一、色彩系统 (Color System)

### 1.1 品牌主色 - 科技蓝

```css
/* 主色阶 - 用于品牌识别、主要操作 */
--color-primary-50:  #EFF6FF;   /* 悬浮背景 */
--color-primary-100: #DBEAFE;   /* 选中背景 */
--color-primary-200: #BFDBFE;   /* 边框高亮 */
--color-primary-300: #93C5FD;   /* 禁用状态 */
--color-primary-400: #60A5FA;   /* 悬浮状态 */
--color-primary-500: #3B82F6;   /* 标准主色 */
--color-primary-600: #2563EB;   /* 按下状态 */
--color-primary-700: #1D4ED8;   /* 强调状态 */
```

**使用规则**:
- 主按钮、关键操作使用 `primary-500`
- 悬浮状态提升至 `primary-400`
- 按下状态加深至 `primary-600`
- 大面积背景仅用 `primary-50/100`

### 1.2 中性色 - 专业灰

```css
/* 灰度系统 - 用于文字、边框、背景 */
--color-gray-50:  #F9FAFB;   /* 页面背景 */
--color-gray-100: #F3F4F6;   /* 卡片背景 */
--color-gray-200: #E5E7EB;   /* 分割线 */
--color-gray-300: #D1D5DB;   /* 边框 */
--color-gray-400: #9CA3AF;   /* 占位符 */
--color-gray-500: #6B7280;   /* 辅助文字 */
--color-gray-600: #4B5563;   /* 正文 */
--color-gray-700: #374151;   /* 标题 */
--color-gray-800: #1F2937;   /* 强调标题 */
--color-gray-900: #111827;   /* 最高对比 */
```

### 1.3 功能色

```css
/* 成功 - 绿色系 */
--color-success-light: #DCFCE7;
--color-success:       #22C55E;
--color-success-dark:  #16A34A;

/* 警告 - 琥珀系 */
--color-warning-light: #FEF3C7;
--color-warning:       #F59E0B;
--color-warning-dark:  #D97706;

/* 错误 - 红色系 */
--color-error-light:   #FEE2E2;
--color-error:         #EF4444;
--color-error-dark:    #DC2626;

/* 信息 - 蓝色系 */
--color-info-light:    #DBEAFE;
--color-info:          #3B82F6;
--color-info-dark:     #2563EB;
```

### 1.4 语义映射

| 场景 | 颜色 | 示例 |
|------|------|------|
| 主要操作 | primary-500 | 提交、保存、确认 |
| 次要操作 | gray-600 + border | 取消、返回 |
| 危险操作 | error-500 | 删除、清空 |
| 成功反馈 | success-500 | 完成提示 |
| 数据展示 | gray-700 | 表格正文 |
| 辅助说明 | gray-500 | 表头、注释 |

---

## 二、字体排版 (Typography)

### 2.1 字体家族

```css
/* 主字体 - 中文优先思源黑体，西文 Inter */
--font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", sans-serif;

/* 等宽字体 - 代码、数字 */
--font-family-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
```

### 2.2 字号阶梯

```css
/* 字号系统 - 基于 14px 基准 */
--font-size-xs:   12px;   /* 辅助标签、时间戳 */
--font-size-sm:   13px;   /* 表头、次要文字 */
--font-size-base: 14px;   /* 正文、输入框 */
--font-size-md:   16px;   /* 小标题、强调 */
--font-size-lg:   18px;   /* 卡片标题 */
--font-size-xl:   20px;   /* 区块标题 */
--font-size-2xl:  24px;   /* 页面标题 */
--font-size-3xl:  30px;   /* 大标题 */
```

### 2.3 行高规范

```css
--line-height-tight:  1.25;  /* 标题 */
--line-height-base:   1.5;   /* 正文 */
--line-height-relaxed: 1.75; /* 长文本 */
```

### 2.4 字重规范

```css
--font-weight-normal:  400;  /* 正文 */
--font-weight-medium:  500;  /* 强调 */
--font-weight-semibold: 600; /* 小标题 */
--font-weight-bold:    700;  /* 大标题 */
```

### 2.5 使用规则

| 元素 | 字号 | 字重 | 行高 |
|------|------|------|------|
| 页面标题 | 24px | 600 | 1.25 |
| 卡片标题 | 16px | 500 | 1.5 |
| 正文内容 | 14px | 400 | 1.5 |
| 辅助说明 | 12px | 400 | 1.5 |
| 表格数据 | 14px | 400 | 1.5 |
| 按钮文字 | 14px | 500 | 1 |

---

## 三、间距系统 (Spacing)

### 3.1 基础单位

```css
/* 基于 4px 网格系统 */
--space-0:   0;
--space-1:   4px;    /* 紧凑间距 */
--space-2:   8px;    /* 元素内间距 */
--space-3:   12px;   /* 小组件间距 */
--space-4:   16px;   /* 标准间距 */
--space-5:   20px;   /* 卡片内边距 */
--space-6:   24px;   /* 区块间距 */
--space-8:   32px;   /* 大区块间距 */
--space-10:  40px;   /* 章节间距 */
--space-12:  48px;   /* 页面边距 */
--space-16:  64px;   /* 主要分隔 */
```

### 3.2 语义映射

| 场景 | 间距值 | 示例 |
|------|--------|------|
| 图标与文字 | 4-8px | `gap: 8px` |
| 按钮内边距 | 8-16px | `padding: 8px 16px` |
| 表单字段间距 | 16-24px | `margin-bottom: 16px` |
| 卡片内边距 | 16-24px | `padding: 20px` |
| 卡片之间 | 16-24px | `gap: 16px` |
| 区块之间 | 24-32px | `margin-top: 24px` |
| 页面边距 | 24px | `padding: 24px` |

---

## 四、圆角规范 (Border Radius)

### 4.1 圆角系统

```css
--radius-none:  0;
--radius-sm:    4px;    /* 小按钮、标签 */
--radius-base:  6px;    /* 输入框、小卡片 */
--radius-md:    8px;    /* 按钮、下拉框 */
--radius-lg:    12px;   /* 卡片、弹窗 */
--radius-xl:    16px;   /* 大卡片 */
--radius-2xl:   24px;   /* 特殊容器 */
--radius-full:  9999px; /* 圆形、药丸 */
```

### 4.2 使用规则

| 元素 | 圆角 | 说明 |
|------|------|------|
| 按钮 | 6px | 标准圆角 |
| 输入框 | 6px | 与按钮一致 |
| 小标签 | 4px | 轻量感 |
| 卡片 | 12px | 柔和边界 |
| 弹窗 | 12px | 与卡片一致 |
| 头像 | 9999px | 圆形 |
| 抽屉 | 0 | 左侧直角 |

---

## 五、阴影系统 (Shadows)

### 5.1 阴影层级

```css
/* 层级递进 - 从平面到立体 */
--shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
```

### 5.2 使用场景

| 层级 | 阴影 | 示例 |
|------|------|------|
| 层级0 | none | 页面背景 |
| 层级1 | sm | 输入框聚焦 |
| 层级2 | base | 卡片默认 |
| 层级3 | md | 卡片悬浮 |
| 层级4 | lg | 下拉菜单 |
| 层级5 | xl | 弹窗、抽屉 |

---

## 六、图标系统 (Icons)

### 6.1 图标规范

```css
/* 图标尺寸 */
--icon-xs:  12px;   /* 内联图标 */
--icon-sm:  16px;   /* 列表图标 */
--icon-md:  20px;   /* 标准图标 */
--icon-lg:  24px;   /* 导航图标 */
--icon-xl:  32px;   /* 功能图标 */

/* 图标描边 */
--icon-stroke: 1.5px;
```

### 6.2 使用规则

- **图标库**: 统一使用 Lucide Icons 或 Ant Design Icons
- **风格**: 线性图标，圆角端点
- **颜色**: 继承文字颜色或使用 gray-500
- **对齐**: 与文字垂直居中，间距 4-8px

---

## 七、组件规范 (Components)

### 7.1 按钮

```css
/* 尺寸规范 */
--btn-height-sm:   28px;
--btn-height-base: 32px;
--btn-height-lg:   40px;

/* 内边距 */
--btn-padding-sm:   0 12px;
--btn-padding-base: 0 16px;
--btn-padding-lg:   0 24px;
```

**按钮类型**:
| 类型 | 样式 | 使用场景 |
|------|------|----------|
| 主要 | primary-500 填充 | 提交、确认、下一步 |
| 次要 | gray-600 边框 | 取消、返回、重置 |
| 文字 | 无边框透明 | 次要操作、链接跳转 |
| 危险 | error-500 填充 | 删除、清空、禁用 |

### 7.2 输入框

```css
--input-height:      32px;
--input-padding:     0 12px;
--input-border:      1px solid var(--color-gray-300);
--input-radius:      6px;
--input-focus-ring:  0 0 0 3px rgba(59, 130, 246, 0.1);
```

### 7.3 卡片

```css
--card-bg:          var(--color-gray-50);
--card-border:      1px solid var(--color-gray-200);
--card-radius:      12px;
--card-padding:     20px;
--card-shadow:      var(--shadow-base);
--card-hover-shadow: var(--shadow-md);
```

### 7.4 表格

```css
--table-header-bg:    var(--color-gray-50);
--table-row-hover:    var(--color-gray-50);
--table-border:       1px solid var(--color-gray-200);
--table-cell-padding: 12px 16px;
```

---

## 八、布局系统 (Layout)

### 8.1 栅格系统

```css
/* 12列栅格 */
--grid-columns: 12;
--grid-gutter:  24px;
```

### 8.2 页面布局

```css
/* 侧边栏 */
--sidebar-width:        240px;
--sidebar-collapsed:    64px;

/* 顶部导航 */
--header-height:        56px;

/* 内容区域 */
--content-max-width:    1200px;
--content-padding:      24px;
```

### 8.3 Z-Index 层级

```css
--z-dropdown:   1000;
--z-sticky:     1020;
--z-fixed:      1030;
--z-modal-backdrop: 1040;
--z-modal:      1050;
--z-popover:    1060;
--z-tooltip:   1070;
```

---

## 九、交互反馈 (Interaction)

### 9.1 状态颜色

| 状态 | 背景 | 边框 | 文字 |
|------|------|------|------|
| 默认 | white | gray-300 | gray-700 |
| 悬浮 | gray-50 | gray-300 | gray-700 |
| 聚焦 | white | primary-500 | gray-700 |
| 激活 | primary-50 | primary-500 | primary-600 |
| 禁用 | gray-100 | gray-200 | gray-400 |
| 错误 | error-50 | error-500 | error-600 |
| 成功 | success-50 | success-500 | success-600 |

### 9.2 反馈方式

| 场景 | 反馈 |
|------|------|
| 按钮点击 | 缩放 0.98 + 背景加深 |
| 输入聚焦 | 边框变色 + 外发光 |
| 加载中 | 旋转图标 + 禁用交互 |
| 操作成功 | Toast 提示 + 图标动画 |
| 操作失败 | Toast 错误 + 抖动动画 |

---

## 十、动效规范 (Motion)

### 10.1 时长

```css
--duration-instant:  100ms;  /* 微交互 */
--duration-fast:     150ms;  /* 悬浮 */
--duration-base:     200ms;  /* 状态切换 */
--duration-slow:     300ms;  /* 展开/收起 */
--duration-slower:   500ms;  /* 页面过渡 */
```

### 10.2 缓动函数

```css
--ease-in:      cubic-bezier(0.4, 0, 1, 1);
--ease-out:     cubic-bezier(0, 0, 0.2, 1);
--ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
```

### 10.3 动效原则

1. **目的性** - 每个动效都要服务于用户理解
2. **克制** - B端产品动效要低调、高效
3. **一致性** - 相同交互使用相同动效
4. **可关闭** - 尊重 prefers-reduced-motion

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## 十一、响应式设计 (Responsive)

### 11.1 断点系统

```css
/* 移动优先 */
--breakpoint-sm:  640px;   /* 小屏手机 */
--breakpoint-md:  768px;   /* 平板竖屏 */
--breakpoint-lg:  1024px;  /* 平板横屏/小桌面 */
--breakpoint-xl:  1280px;  /* 标准桌面 */
--breakpoint-2xl: 1536px;  /* 大屏桌面 */
```

### 11.2 响应策略

| 断点 | 布局 | 导航 | 侧边栏 |
|------|------|------|--------|
| < 768px | 单列 | 底部 | 抽屉 |
| 768-1024 | 双列 | 顶部 | 可折叠 |
| > 1024 | 多列 | 顶部 | 固定展开 |

---

## 十二、深色模式 (Dark Mode)

### 12.1 深色色板

```css
[data-theme="dark"] {
  /* 背景层级 */
  --color-bg-base:     #0F172A;   /* 页面背景 */
  --color-bg-elevated: #1E293B;   /* 卡片背景 */
  --color-bg-overlay:  #334155;   /* 弹窗背景 */

  /* 文字 */
  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #64748B;

  /* 边框 */
  --color-border:       #334155;
  --color-border-light: #1E293B;

  /* 主色调整 - 深色下提亮 */
  --color-primary-500: #60A5FA;
}
```

### 12.2 切换策略

- 跟随系统: `prefers-color-scheme`
- 手动切换: localStorage 持久化
- 无闪烁: CSS 变量 + preload 设置

---

## 实施指南

### 优先级排序

1. **P0 - 立即统一**
   - 品牌主色 (三套主色 → 统一蓝色系)
   - 字体大小 (移除硬编码)
   - 间距系统 (使用 CSS 变量)

2. **P1 - 短期完善**
   - TailwindCSS 配置整合
   - Ant Design 主题配置
   - 组件样式清理

3. **P2 - 中期优化**
   - 动效系统
   - 深色模式
   - 响应式适配

### 代码迁移示例

**Before (问题代码)**:
```css
/* HistoryPanel.vue */
@primary: #6366f1;
.button {
  background: @primary;
  padding: 16px;
  font-size: 14px;
}
```

**After (规范代码)**:
```css
/* 使用全局变量 */
.button {
  background: var(--color-primary-500);
  padding: var(--space-4);
  font-size: var(--font-size-base);
}
```

---

## 设计检查清单

- [ ] 颜色使用 CSS 变量，无硬编码
- [ ] 字体大小在定义的阶梯内
- [ ] 间距使用 4px 倍数
- [ ] 圆角使用预定义值
- [ ] 阴影层级正确
- [ ] 图标风格统一
- [ ] 交互状态完整
- [ ] 动效时长合理
- [ ] 响应式断点正确
- [ ] 深色模式适配

---

> **版本**: v1.0
> **更新日期**: 2026-02-25
> **适用项目**: Yudao Cloud Frontend