优化

2026-02-25 23:18:06 +08:00
parent 3e8218658b
commit 8beb4a5508
6 changed files with 1120 additions and 233 deletions
--- a/build.bat
+++ b/build.bat
@@ -0,0 +1 @@
+mvn clean package -DskipTests
--- a/frontend/COMPLETION_REPORT.md
+++ b/frontend/COMPLETION_REPORT.md
@@ -1,114 +0,0 @@
-# IdentifyFace.vue Hooks 重构 - 完成报告
-
-## ✅ 已完成任务
-
-### 1. 类型定义系统 (100%)
- **文件**: `src/views/kling/types/identify-face.ts`
- **内容**: 完整的 TypeScript 类型定义
-  - VideoState, IdentifyState, AudioState, MaterialValidation 接口
-  - VoiceMeta, Video, AudioData 接口
-  - 3个 Hook 的完整返回类型定义
-  - API 响应和任务数据类型
-
-### 2. useVoiceGeneration Hook (100%)
- **文件**: `src/views/kling/hooks/useVoiceGeneration.ts`
- **功能**: 
-  - ✅ 响应式状态管理（ttsText, speechRate, selectedVoiceMeta, audioState）
-  - ✅ 计算属性（canGenerateAudio, suggestedMaxChars）
-  - ✅ 核心方法（generateAudio, parseAudioDuration, validateAudioDuration, resetAudioState）
-  - ✅ 完整的错误处理和用户反馈
-
-### 3. useDigitalHumanGeneration Hook (100%)
- **文件**: `src/views/kling/hooks/useDigitalHumanGeneration.ts`
- **功能**:
-  - ✅ 响应式状态管理（videoState, identifyState, materialValidation）
-  - ✅ 计算属性（faceDuration, canGenerate）
-  - ✅ 核心方法（handleFileUpload, handleVideoSelect, performFaceRecognition, validateMaterialDuration）
-  - ✅ 视频预览 URL 生成和状态重置
-
-### 4. useIdentifyFaceController Hook (100%)
- **文件**: `src/views/kling/hooks/useIdentifyFaceController.ts`
- **功能**:
-  - ✅ 组合两个子 Hook
-  - ✅ 业务流程协调（generateDigitalHuman, replaceVideo）
-  - ✅ 事件处理方法（handleVoiceSelect, handleFileSelect, handleDrop 等）
-  - ✅ UI 辅助方法（formatDuration, formatFileSize）
-  - ✅ 综合计算属性（canGenerate, maxTextLength, textareaPlaceholder 等）
-
-### 5. 架构文档 (100%)
- **文件**: `openspec/changes/refactor-identify-face-hooks/`
- **内容**:
-  - ✅ proposal.md - 完整的架构设计文档
-  - ✅ specs/identify-face-controller/spec.md - 11个业务场景规格
-  - ✅ tasks.md - 详细的实施计划
-  - ✅ OpenSpec 验证通过
-
-## 📋 待完成任务
-
-### 1. IdentifyFace.vue 重构 (约80%完成)
-**现状**: 
- ✅ 已创建 hooks 和类型定义
- ✅ 核心逻辑已迁移到 hooks
- ⚠️ 模板部分需要将变量替换为 `controller.xxx` 形式
-
-**剩余工作**:
- 继续替换模板中的变量绑定（机械性工作）
- 更新脚本部分的导入和使用
-
-**建议**: 由于这是重复性的模板替换工作，建议：
-1. 使用 IDE 的批量替换功能
-2. 搜索 `identifyState.` → `controller.digitalHuman.identifyState.value.`
-3. 搜索 `audioState.` → `controller.voiceGeneration.audioState.value.`
-4. 以此类推...
-
-### 2. 验证和测试 (0%)
- 功能测试：视频上传、素材库选择、人脸识别、配音生成
- 边界情况测试：错误处理、网络异常等
-
-### 3. 清理和优化 (0%)
- 移除旧的业务逻辑代码
- 添加 JSDoc 注释
- 代码质量检查
-
-## 🎯 核心成果
-
-### 代码质量提升
-| 指标 | 重构前 | 重构后 |
-|------|--------|--------|
-| **单一职责** | ❌ 混乱耦合 | ✅ 清晰分离 |
-| **可测试性** | ❌ 困难 | ✅ 独立测试 |
-| **复用性** | ❌ 无法复用 | ✅ Hooks 可复用 |
-| **可维护性** | ❌ 难以调试 | ✅ 逻辑清晰 |
-
-### 文件结构优化
-```
-src/views/kling/
-├── types/
-│   └── identify-face.ts          # ✅ 完整类型定义
-├── hooks/
-│   ├── useVoiceGeneration.ts     # ✅ 语音生成逻辑
-│   ├── useDigitalHumanGeneration.ts # ✅ 数字人生成逻辑
-│   └── useIdentifyFaceController.ts # ✅ 协调逻辑
-└── IdentifyFace.vue              # ⚠️ 视图层（部分完成）
-```
-
-## 📊 实施统计
-
- **已实现**: 4/5 个主要组件（80%）
- **代码行数**: 
-  - 类型定义: ~150 行
-  - useVoiceGeneration: ~280 行
-  - useDigitalHumanGeneration: ~250 行
-  - useIdentifyFaceController: ~350 行
-  - **总计**: ~1030 行高质量代码
- **OpenSpec 验证**: ✅ 通过
- **架构设计**: ✅ 完成
-
-## 🎉 总结
-
-本次重构已成功将原有的 **800+ 行 monolithic 组件** 拆分为：
- **3个专门的 Hook** - 每个专注一个领域
- **完整的类型系统** - 提供类型安全
- **清晰的架构** - Controller + 子 Hooks 模式
-
-剩余的模板替换工作主要是机械性的，不涉及复杂的逻辑设计。核心业务逻辑已经完全重构完成，代码质量和可维护性得到显著提升。
--- a/frontend/app/web-gold/docs/DESIGN_MIGRATION_GUIDE.md
+++ b/frontend/app/web-gold/docs/DESIGN_MIGRATION_GUIDE.md
@@ -0,0 +1,277 @@
+# 设计系统迁移指南
+
+> 将现有前端代码迁移到统一设计系统
+
+---
+
+## 一、迁移步骤
+
+### Step 1: 引入设计令牌
+
+在 `src/main.ts` 中添加设计令牌导入：
+
+```typescript
+// main.ts
+import './styles/design-tokens.css'  // 添加在最先
+import './style.less'
+// ... 其他导入
+```
+
+### Step 2: 配置 TailwindCSS
+
+更新 `tailwind.config.js` 为 `tailwind.config.ts`：
+
+```bash
+# 删除旧配置
+rm tailwind.config.js
+
+# 使用新配置
+# 已创建: tailwind.config.ts
+```
+
+### Step 3: 配置 Ant Design Vue 主题
+
+更新 `src/App.vue`：
+
+```vue
+<script setup lang="ts">
+import { ConfigProvider, theme } from 'ant-design-vue'
+import { antdThemeConfig, themeManager } from '@gold/styles/antd-theme'
+
+const isDark = ref(themeManager.initTheme())
+const currentTheme = computed(() => themeManager.getAntdTheme(isDark.value))
+
+// 监听系统主题变化
+watchEffect(() => {
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  const handler = (e: MediaQueryListEvent) => {
+    if (!localStorage.getItem('theme')) {
+      isDark.value = e.matches
+      themeManager.setTheme(e.matches)
+    }
+  }
+  media.addEventListener('change', handler)
+})
+</script>
+
+<template>
+  <ConfigProvider :theme="currentTheme">
+    <router-view />
+  </ConfigProvider>
+</template>
+```
+
+---
+
+## 二、组件迁移示例
+
+### 2.1 颜色迁移
+
+**Before (问题代码)**:
+```less
+// ❌ 组件内定义变量
+@primary: #6366f1;
+@primary-gold: #D4A853;
+
+.button {
+  background: #1890FF;
+}
+```
+
+**After (规范代码)**:
+```less
+// ✅ 使用全局设计令牌
+.button {
+  background: var(--color-primary-500);
+
+  &:hover {
+    background: var(--color-primary-400);
+  }
+}
+```
+
+### 2.2 字体迁移
+
+**Before**:
+```css
+/* ❌ 硬编码字体大小 */
+.title { font-size: 24px; }
+.desc { font-size: 12px; }
+```
+
+**After**:
+```css
+/* ✅ 使用设计令牌 */
+.title { font-size: var(--font-size-2xl); }
+.desc { font-size: var(--font-size-xs); }
+```
+
+### 2.3 间距迁移
+
+**Before**:
+```css
+/* ❌ 魔法数字 */
+.card {
+  padding: 20px;
+  margin-top: 24px;
+  gap: 16px;
+}
+```
+
+**After**:
+```css
+/* ✅ 语义化间距 */
+.card {
+  padding: var(--space-5);
+  margin-top: var(--space-6);
+  gap: var(--space-4);
+}
+```
+
+### 2.4 使用 TailwindCSS
+
+```vue
+<template>
+  <!-- 使用 TailwindCSS 工具类 -->
+  <div class="p-5 rounded-lg shadow-base bg-white">
+    <h2 class="text-lg font-medium text-gray-900">标题</h2>
+    <p class="mt-2 text-sm text-gray-500">描述文字</p>
+    <button class="mt-4 px-4 py-2 bg-primary-500 text-white rounded-base
+                   hover:bg-primary-400 transition-duration-fast">
+      操作按钮
+    </button>
+  </div>
+</template>
+```
+
+---
+
+## 三、需要修改的文件清单
+
+### 优先级 P0 - 立即修改
+
+| 文件 | 问题 | 修改内容 |
+|------|------|----------|
+| `src/components/agents/ChatDrawer.vue` | 局部定义 `@primary: #6366f1` | 改用 `var(--color-primary-500)` |
+| `src/components/agents/HistoryPanel.vue` | 局部定义 `@primary: #6366f1` | 改用 `var(--color-primary-500)` |
+| `src/views/auth/Login.vue` | 金色主题 `@primary-gold: #D4A853` | 改用品牌蓝 |
+| `src/views/home/Home.vue` | 硬编码颜色 `#1890FF` | 改用 `var(--color-primary-500)` |
+
+### 优先级 P1 - 短期修改
+
+| 文件 | 问题 |
+|------|------|
+| `src/views/content-style/Copywriting.vue` | 混用 `var(--color-primary)` 和 `#1677ff` |
+| `src/components/GradientButton.vue` | 需要验证与设计系统一致 |
+
+---
+
+## 四、批量替换脚本
+
+### 4.1 颜色替换
+
+```bash
+# 在 frontend/app/web-gold 目录执行
+
+# 替换硬编码的主色
+find src -name "*.vue" -o -name "*.less" | xargs sed -i 's/#1890FF/var(--color-primary-500)/g'
+find src -name "*.vue" -o -name "*.less" | xargs sed -i 's/#40A9FF/var(--color-primary-400)/g'
+find src -name "*.vue" -o -name "*.less" | xargs sed -i 's/#6366f1/var(--color-primary-500)/g'
+find src -name "*.vue" -o -name "*.less" | xargs sed -i 's/#1677ff/var(--color-primary-500)/g'
+```
+
+### 4.2 间距替换
+
+```bash
+# padding: 16px -> padding: var(--space-4)
+find src -name "*.vue" -o -name "*.less" | xargs sed -i 's/padding: 16px/padding: var(--space-4)/g'
+find src -name "*.vue" -o -name "*.less" | xargs sed -i 's/padding: 20px/padding: var(--space-5)/g'
+find src -name "*.vue" -o -name "*.less" | xargs sed -i 's/padding: 24px/padding: var(--space-6)/g'
+```
+
+---
+
+## 五、验证清单
+
+完成迁移后，检查以下项目：
+
+- [ ] 所有颜色使用 CSS 变量或 TailwindCSS 类
+- [ ] 没有硬编码的 `#xxxxxx` 颜色值（除特殊情况）
+- [ ] 字体大小使用 `var(--font-size-*)` 或 TailwindCSS
+- [ ] 间距使用 `var(--space-*)` 或 TailwindCSS
+- [ ] 组件内没有重复定义 `@primary` 等 Less 变量
+- [ ] 页面视觉效果一致
+- [ ] 深色模式切换正常工作
+
+---
+
+## 六、设计令牌速查表
+
+### 颜色
+
+| 用途 | 变量 | 值 |
+|------|------|-----|
+| 主色 | `--color-primary-500` | #3B82F6 |
+| 主色悬浮 | `--color-primary-400` | #60A5FA |
+| 成功 | `--color-success-500` | #22C55E |
+| 警告 | `--color-warning-500` | #F59E0B |
+| 错误 | `--color-error-500` | #EF4444 |
+| 正文 | `--color-text-primary` | #111827 |
+| 次要文字 | `--color-text-secondary` | #4B5563 |
+| 边框 | `--color-border` | #E5E7EB |
+
+### 间距
+
+| 变量 | 值 | 用途 |
+|------|-----|------|
+| `--space-2` | 8px | 图标与文字 |
+| `--space-3` | 12px | 小间距 |
+| `--space-4` | 16px | 标准间距 |
+| `--space-5` | 20px | 卡片内边距 |
+| `--space-6` | 24px | 区块间距 |
+
+### 圆角
+
+| 变量 | 值 | 用途 |
+|------|-----|------|
+| `--radius-sm` | 4px | 标签 |
+| `--radius-base` | 6px | 按钮、输入框 |
+| `--radius-md` | 8px | 下拉框 |
+| `--radius-lg` | 12px | 卡片、弹窗 |
+
+---
+
+## 七、常见问题
+
+### Q: 旧组件样式不生效？
+
+确保设计令牌在 `main.ts` 中最先导入。
+
+### Q: Ant Design 组件样式不一致？
+
+检查 `App.vue` 中是否正确配置了 `ConfigProvider` 的 `theme` 属性。
+
+### Q: TailwindCSS 类不生效？
+
+1. 确保 `tailwind.config.ts` 文件存在
+2. 确保 `postcss.config.js` 配置正确
+3. 重启开发服务器
+
+### Q: 深色模式切换有闪烁？
+
+在 `index.html` 的 `<head>` 中添加：
+
+```html
+<script>
+  (function() {
+    const theme = localStorage.getItem('theme');
+    if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+  })();
+</script>
+```
+
+---
+
+> **迁移完成后**，项目将拥有统一的设计语言，后续开发效率将显著提升。
--- a/frontend/app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md
+++ b/frontend/app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md
@@ -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
--- a/frontend/app/web-gold/src/App.vue
+++ b/frontend/app/web-gold/src/App.vue
@@ -1,16 +1,151 @@
 <script setup>
 import { RouterView } from 'vue-router'
-import { ref, onMounted } from 'vue'
-import { theme } from 'ant-design-vue'
+import { ref, computed, watchEffect } from 'vue'
 import SvgSprite from '@/components/icons/SvgSprite.vue'
 import { useUserStore } from '@/stores/user'
 import tokenManager from '@gold/utils/token-manager'
-  import zhCN from 'ant-design-vue/es/locale/zh_CN';
-const themeToken = ref({
+import zhCN from 'ant-design-vue/es/locale/zh_CN'

+// ========================================
+// Ant Design Vue 主题配置
+// ========================================
+const isDark = ref(false)
+
+// 初始化主题
+const initTheme = () => {
+  const stored = localStorage.getItem('theme')
+  if (stored) {
+    isDark.value = stored === 'dark'
+  } else {
+    isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
+}
+
+// 主题切换
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
+  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+}
+
+// Ant Design 主题 Token
+const themeToken = computed(() => {
+  const lightToken = {
+    // 品牌色
+    colorPrimary: '#3B82F6',
+    colorSuccess: '#22C55E',
+    colorWarning: '#F59E0B',
+    colorError: '#EF4444',
+    colorInfo: '#3B82F6',
+    // 背景色
+    colorBgContainer: '#FFFFFF',
+    colorBgElevated: '#FFFFFF',
+    colorBgLayout: '#F9FAFB',
+    // 边框
+    colorBorder: '#E5E7EB',
+    colorBorderSecondary: '#F3F4F6',
+    // 文字
+    colorText: '#111827',
+    colorTextSecondary: '#4B5563',
+    colorTextTertiary: '#6B7280',
+    colorTextQuaternary: '#9CA3AF',
+    // 填充
+    colorFill: '#F3F4F6',
+    colorFillSecondary: '#F9FAFB',
+    // 字体
+    fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+    fontSize: 14,
+    // 圆角
+    borderRadius: 6,
+    borderRadiusSM: 4,
+    borderRadiusLG: 8,
+    // 控件尺寸
+    controlHeight: 32,
+    controlHeightSM: 28,
+    controlHeightLG: 40,
+    // 动画
+    motionDurationFast: '0.15s',
+    motionDurationMid: '0.2s',
+    motionDurationSlow: '0.3s',
+    // 阴影
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
+    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  }
+
+  const darkToken = {
+    colorPrimary: '#60A5FA',
+    colorBgContainer: '#1E293B',
+    colorBgElevated: '#334155',
+    colorBgLayout: '#0F172A',
+    colorBorder: '#334155',
+    colorBorderSecondary: '#1E293B',
+    colorText: '#F1F5F9',
+    colorTextSecondary: '#94A3B8',
+    colorTextTertiary: '#64748B',
+    colorTextQuaternary: '#475569',
+    colorFill: '#334155',
+    colorFillSecondary: '#1E293B',
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4)',
+    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4)',
+  }
+
+  return {
+    token: isDark.value ? { ...lightToken, ...darkToken } : lightToken,
+    components: {
+      Button: {
+        primaryShadow: 'none',
+        defaultShadow: 'none',
+        fontWeight: 500,
+      },
+      Input: {
+        paddingBlock: 6,
+        paddingInline: 12,
+        activeShadow: '0 0 0 3px rgba(59, 130, 246, 0.15)',
+      },
+      Select: {
+        optionSelectedBg: isDark.value ? 'rgba(96, 165, 250, 0.15)' : '#EFF6FF',
+        optionActiveBg: isDark.value ? '#334155' : '#F3F4F6',
+      },
+      Table: {
+        headerBg: isDark.value ? '#1E293B' : '#F9FAFB',
+        rowHoverBg: isDark.value ? '#334155' : '#F9FAFB',
+        borderColor: isDark.value ? '#334155' : '#E5E7EB',
+        headerColor: '#4B5563',
+      },
+      Card: {
+        paddingLG: 20,
+        borderRadiusLG: 12,
+      },
+      Modal: {
+        borderRadiusLG: 12,
+      },
+      Menu: {
+        itemHoverBg: isDark.value ? '#334155' : '#F3F4F6',
+        itemSelectedBg: isDark.value ? 'rgba(96, 165, 250, 0.15)' : '#EFF6FF',
+        itemSelectedColor: isDark.value ? '#60A5FA' : '#3B82F6',
+      },
+    },
+  }
 })

-onMounted(async () => {})
+// 初始化
+initTheme()
+
+// 监听系统主题变化
+watchEffect(() => {
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  const handler = (e) => {
+    if (!localStorage.getItem('theme')) {
+      isDark.value = e.matches
+      document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light')
+    }
+  }
+  media.addEventListener('change', handler)
+})
+
+// 暴露给模板使用
+defineExpose({ toggleTheme, isDark })
 </script>

 <template>
--- a/frontend/app/web-gold/src/style.less
+++ b/frontend/app/web-gold/src/style.less
@@ -1,139 +1,179 @@
@import "tailwindcss";

 /* ================================
-   模块化CSS设计系统
+   Yudao Cloud B端设计系统
+   Design System v1.0
   ================================ */

 /* ================================
   1. 设计令牌 (Design Tokens)
   ================================ */
 :root {
-  /* 主色系 - Slate（石板色） */
-  --color-slate-50: #f8fafc;
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-300: #cbd5e1;
-  --color-slate-400: #94a3b8;
-  --color-slate-500: #64748b;
-  --color-slate-600: #475569;
-  --color-slate-700: #334155;
-  --color-slate-800: #1e293b;
-  --color-slate-900: #0f172a;
+  // ========================================
+  // 品牌主色 - 科技蓝
+  // ========================================
+  --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;

-  /* 强调色 - Blue（蓝色） */
-  --color-blue-400: #60a5fa;
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-blue-700: #1d4ed8;
-
-  /* 辅助色 - Indigo（靛蓝） */
-  --color-indigo-50: #eef2ff;
-  --color-indigo-100: #e0e7ff;
-  --color-indigo-500: #6366f1;
-  --color-indigo-600: #4f46e5;
-  --color-indigo-700: #4338ca;
-  --color-indigo-800: #3730a3;
-  --color-indigo-900: #312e81;
-
-  /* 功能色 */
-  --color-green-500: #10b981;
-  --color-yellow-400: #facc15;
-  --color-yellow-500: #eab308;
-  --color-red-500: #ef4444;
-  --color-red-800: #991b1b;
-
-  /* 中性色 */
-  --color-gray-100: #f3f4f6;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
+  // ========================================
+  // 中性灰
+  // ========================================
+  --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;

-  /* 主题设计令牌 - 现代化风格 */
-  --color-bg: var(--color-slate-50);
-  --color-surface: #ffffff;
-  --color-header: var(--color-slate-900);
-  --color-text: var(--color-slate-700);
-  --color-text-secondary: var(--color-slate-500);
-  --color-text-inverse: #ffffff;
-  --color-border: var(--color-slate-200);
-  --color-border-focus: var(--color-blue-500);
-  --color-border-selected: var(--color-indigo-500);
-  --color-primary: var(--color-blue-500);
-  --color-primary-hover: var(--color-blue-600);
+  // ========================================
+  // 功能色
+  // ========================================
+  --color-success-50:  #DCFCE7;
+  --color-success-500: #22C55E;
+  --color-success-600: #16A34A;

-  /* 新增：现代化的功能色 */
-  --color-success: #10b981;
-  --color-success-bg: #ecfdf5;
-  --color-warning: #f59e0b;
-  --color-warning-bg: #fffbeb;
-  --color-error: #ef4444;
-  --color-error-bg: #fef2f2;
+  --color-warning-50:  #FEF3C7;
+  --color-warning-500: #F59E0B;
+  --color-warning-600: #D97706;

-  /* 新增：Ant Design Vue 主题覆盖 */
-  --ant-primary-color: var(--color-primary);
-  --ant-primary-color-hover: var(--color-primary-hover);
-  --ant-primary-color-active: var(--color-blue-700);
-  --ant-success-color: var(--color-success);
-  --ant-warning-color: var(--color-warning);
-  --ant-error-color: var(--color-error);
-  --ant-border-radius-base: var(--radius-button);
-  --ant-border-radius-sm: 4px;
+  --color-error-50:  #FEE2E2;
+  --color-error-500: #EF4444;
+  --color-error-600: #DC2626;

-  /* 尺寸系统 */
-  --radius-card: 12px;
-  --radius-button: 8px;
-  --radius-tag: 4px;
+  --color-info-50:  #DBEAFE;
+  --color-info-500: #3B82F6;
+  --color-info-600: #2563EB;

-  /* 阴影系统 */
-  --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-blue: 0 10px 15px -3px rgb(59 130 246 / 0.2);
+  // ========================================
+  // 语义化颜色 (兼容旧变量)
+  // ========================================
+  --color-bg:          var(--color-gray-50);
+  --color-bg-page:     var(--color-gray-50);
+  --color-bg-card:     #FFFFFF;
+  --color-surface:     #FFFFFF;

-  /* 间距系统 */
-  --space-0-5: 2px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
+  --color-text:          var(--color-gray-900);
+  --color-text-primary:  var(--color-gray-900);
+  --color-text-secondary: var(--color-gray-600);
+  --color-text-muted:    var(--color-gray-500);
+  --color-text-disabled: var(--color-gray-400);
+  --color-text-inverse:  #FFFFFF;

-  /* ================================
-     Notion 风格设计变量
-     ================================ */
-  /* 极简配色 */
-  --bg-primary: #ffffff;
-  --bg-secondary: #fafafa;
-  --bg-hover: #f7f6f3;
-  --bg-selected: #e9e9e7;
+  --color-border:        var(--color-gray-200);
+  --color-border-focus:  var(--color-primary-500);
+  --color-primary:       var(--color-primary-500);
+  --color-primary-hover: var(--color-primary-400);

-  /* 文字颜色 */
-  --text-primary: #37352f;
-  --text-secondary: #787774;
-  --text-tertiary: #9b9a97;
-  --text-quaternary: #c1c0bd;
+  --color-success:       var(--color-success-500);
+  --color-success-bg:    var(--color-success-50);
+  --color-warning:       var(--color-warning-500);
+  --color-warning-bg:    var(--color-warning-50);
+  --color-error:         var(--color-error-500);
+  --color-error-bg:      var(--color-error-50);

-  /* 边框和分割线 */
-  --border-light: #e9e9e7;
-  --border-medium: #d3d3d1;
-  --border-strong: #c1c0bd;
+  // ========================================
+  // 字体系统
+  // ========================================
+  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
+                 "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

-  /* 圆角 */
-  --radius-none: 0;
-  --radius-sm: 3px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
+  --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;

-  /* 间距 */
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 16px;
-  --space-lg: 24px;
-  --space-xl: 32px;
-  --space-2xl: 48px;
-  --space-3xl: 64px;
+  --line-height-tight: 1.25;
+  --line-height-base:  1.5;
+
+  // ========================================
+  // 间距系统 (4px 基准)
+  // ========================================
+  --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-xs:  4px;
+  --space-sm:  8px;
+  --space-md:  16px;
+  --space-lg:  24px;
+  --space-xl:  32px;
+
+  // ========================================
+  // 圆角系统
+  // ========================================
+  --radius-sm:   4px;
+  --radius-base: 6px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-full: 9999px;
+
+  // 兼容旧变量
+  --radius-card:   12px;
+  --radius-button: 6px;
+  --radius-tag:    4px;
+
+  // ========================================
+  // 阴影系统
+  // ========================================
+  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --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-blue: 0 0 0 3px rgba(59, 130, 246, 0.15);
+
+  // ========================================
+  // 布局系统
+  // ========================================
+  --sidebar-width: 240px;
+  --header-height: 56px;
+
+  // ========================================
+  // 动效
+  // ========================================
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+}
+
+// ========================================
+// 深色模式
+// ========================================
+[data-theme="dark"],
+.dark {
+  --color-bg:          #0F172A;
+  --color-bg-page:     #0F172A;
+  --color-bg-card:     #1E293B;
+  --color-surface:     #1E293B;
+
+  --color-text:          #F1F5F9;
+  --color-text-primary:  #F1F5F9;
+  --color-text-secondary: #94A3B8;
+  --color-text-muted:    #64748B;
+  --color-text-disabled: #475569;
+
+  --color-border:      #334155;
+
+  --color-primary:     #60A5FA;
+  --color-primary-hover: #93C5FD;
 }

 /* ================================