sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
shenaowei
2026-02-25 23:18:06 +08:00
parent 3e8218658b
commit 8beb4a5508
6 changed files with 1120 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

548
frontend/app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md Normal file
View File

@@ -0,0 +1,548 @@
# 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