From ac5324d86081466ea00520d3203ab67ab1b82cd1 Mon Sep 17 00:00:00 2001
From: CI Test <ci-test@xiaoxia.com>
Date: Fri, 26 Jun 2026 21:16:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E9=9D=A2=E5=AF=B9=E9=BD=90=20?=
 =?UTF-8?q?V21=20=E8=AE=BE=E8=AE=A1=E7=B3=BB=E7=BB=9F=20-=20Indigo?=
 =?UTF-8?q?=E4=B8=BB=E8=89=B2/=E5=A4=A7=E5=9C=86=E8=A7=92/=E6=AF=9B?=
 =?UTF-8?q?=E7=8E=BB=E7=92=83/=E6=B8=90=E5=8F=98=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/index.css                        |  59 ++--
 apps/web/src/main.tsx                         |  62 +++-
 .../web/src/pages/workspace/ProjectAssets.css | 266 +++++++++------
 .../src/pages/workspace/ProjectGeneration.css | 155 +++++++--
 .../src/pages/workspace/ProjectResults.css    | 139 ++++++--
 .../web/src/pages/workspace/ProjectVoices.css | 150 ++++++--
 apps/web/src/styles/global.css                | 321 ++++++++++++++----
 7 files changed, 873 insertions(+), 279 deletions(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index f376d2ac7..419422da0 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,18 +1,6 @@
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
-    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+/**
+ * V21 全局重置样式
+ */
 
 * {
   margin: 0;
@@ -20,17 +8,38 @@
   box-sizing: border-box;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
+html, body, #root {
+  width: 100%;
   min-height: 100vh;
 }
 
-#root {
-  width: 100%;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #0f172a;
+  background-color: #f8fafc;
+}
+
+/* 滚动条 - V21 样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+/* 毛玻璃导航栏效果 */
+.navbar-glass {
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 6d7ac3d4b..9824ce5c7 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,5 +1,6 @@
 /**
  * 更新主入口，引入全局样式
+ * V21 设计系统配置
  */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -23,11 +24,66 @@ const queryClient = new QueryClient({
   },
 });
 
-// Ant Design 主题配置
+// V21 Ant Design 主题配置 - Indigo 主色 / 大圆角
 const theme = {
   token: {
-    colorPrimary: '#1890ff',
-    borderRadius: 4,
+    // 主色调 - Indigo
+    colorPrimary: '#4f46e5',
+    colorSuccess: '#10b981',
+    colorWarning: '#f59e0b',
+    colorError: '#ef4444',
+    colorInfo: '#4f46e5',
+    
+    // 圆角 - V21 大圆角
+    borderRadius: 14,
+    borderRadiusLG: 22,
+    borderRadiusSM: 10,
+    
+    // 文字色
+    colorText: '#0f172a',
+    colorTextSecondary: '#64748b',
+    colorTextTertiary: '#94a3b8',
+    
+    // 背景色
+    colorBgContainer: '#ffffff',
+    colorBgLayout: '#f8fafc',
+    
+    // 边框色
+    colorBorder: '#e2e8f0',
+    colorBorderSecondary: '#f1f5f9',
+    
+    // 阴影
+    boxShadow: '0 10px 30px rgba(15, 23, 42, 0.06)',
+    boxShadowSecondary: '0 24px 70px rgba(15, 23, 42, 0.09)',
+  },
+  components: {
+    Button: {
+      // 按钮圆角
+      borderRadius: 14,
+      // 主按钮渐变通过 CSS 实现
+      colorPrimary: '#4f46e5',
+      colorPrimaryHover: '#6366f1',
+      primaryShadow: '0 14px 26px rgba(79, 70, 229, 0.22)',
+    },
+    Card: {
+      borderRadiusLG: 28,
+      paddingLG: 28,
+    },
+    Input: {
+      borderRadius: 14,
+    },
+    Select: {
+      borderRadius: 14,
+    },
+    Modal: {
+      borderRadiusLG: 28,
+    },
+    InputNumber: {
+      borderRadius: 14,
+    },
+    DatePicker: {
+      borderRadius: 14,
+    },
   },
 };
 
diff --git a/apps/web/src/pages/workspace/ProjectAssets.css b/apps/web/src/pages/workspace/ProjectAssets.css
index 762900c58..0fc675d3a 100644
--- a/apps/web/src/pages/workspace/ProjectAssets.css
+++ b/apps/web/src/pages/workspace/ProjectAssets.css
@@ -1,54 +1,142 @@
-/* V21 素材库 */
+/* V21 素材库页面 - 9:16 竖屏紧凑卡片 */
+
+/* ========== 布局 ========== */
 .xx-project-assets {
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
-.xx-card {
+/* ========== 素材网格 - 竖屏卡片 ========== */
+.xx-assets-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+}
+
+@media (max-width: 1200px) {
+  .xx-assets-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .xx-assets-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .xx-assets-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ========== 素材卡片 - V21 大圆角 ========== */
+.xx-asset-card {
+  border: 1px solid var(--border-color);
   background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 28px;
-  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
-  padding: 28px;
-  margin-bottom: 20px;
-}
-
-.xx-card h3 {
-  font-size: 21px;
-  margin: 0 0 16px;
-  color: #0f172a;
-  font-weight: 850;
-}
-
-.xx-loading {
-  padding: 60px 24px;
-  text-align: center;
-  color: #64748b;
-}
-
-.xx-upload-zone {
-  border: 2px dashed #e2e8f0;
-  border-radius: 24px;
-  padding: 40px;
-  text-align: center;
-  background: #f8fafc;
+  border-radius: var(--radius-xl);
+  padding: 14px;
+  transition: all 0.25s ease;
   cursor: pointer;
-  transition: all 0.2s;
+  overflow: hidden;
 }
 
-.xx-upload-zone:hover {
-  border-color: #4f46e5;
-  background: #eef2ff;
+.xx-asset-card:hover {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-3px);
 }
 
-.xx-upload-zone p {
-  color: #64748b;
-  margin: 12px 0;
+/* ========== 缩略图 - 9:16 竖屏 ========== */
+.xx-asset-thumb {
+  aspect-ratio: 9 / 16;
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, #0ea5e9, #312e81);
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  color: white;
+  margin-bottom: 12px;
+}
+
+.xx-asset-thumb video,
+.xx-asset-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 播放按钮 - 毛玻璃效果 */
+.xx-asset-thumb span {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.22);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  font-size: 18px;
+  transition: all 0.2s ease;
+}
+
+.xx-asset-card:hover .xx-asset-thumb span {
+  background: rgba(255, 255, 255, 0.35);
+  transform: scale(1.1);
+}
+
+/* ========== 素材状态 ========== */
+.xx-asset-status {
+  display: inline-block;
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  font-weight: 850;
+  margin-bottom: 8px;
+}
+
+.xx-asset-status.ready {
+  background: var(--success-soft);
+  color: #15803d;
+}
+
+.xx-asset-status.processing {
+  background: var(--warning-soft);
+  color: #b45309;
+}
+
+.xx-asset-status.failed {
+  background: var(--error-soft);
+  color: #be123c;
+}
+
+/* 卡片文字 */
+.xx-asset-card b {
+  display: block;
+  color: var(--text-primary);
+  font-weight: 850;
   font-size: 14px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+.xx-asset-card p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+/* ========== 视频卡片（横向） ========== */
 .xx-video-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  gap: var(--space-md);
 }
 
 @media (max-width: 1200px) {
@@ -64,134 +152,116 @@
 }
 
 .xx-video-card {
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--border-color);
   background: white;
-  border-radius: 22px;
-  padding: 12px;
-  transition: all 0.2s;
+  border-radius: var(--radius-xl);
+  padding: 14px;
+  transition: all 0.25s ease;
 }
 
 .xx-video-card:hover {
-  border-color: #4f46e5;
-  box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
 }
 
+/* 视频封面 */
 .xx-video-thumb {
   aspect-ratio: 16 / 9;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: linear-gradient(135deg, #0ea5e9, #312e81);
   position: relative;
   overflow: hidden;
   display: grid;
   place-items: center;
   color: white;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
-.mini-play {
-  width: 46px;
-  height: 46px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  background: rgba(255, 255, 255, 0.22);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  backdrop-filter: blur(8px);
-  font-size: 18px;
-}
-
-.xx-video-card b {
-  display: block;
-  color: #0f172a;
-  font-weight: 850;
-}
-
-.xx-video-card p {
-  margin: 5px 0 0;
-  color: #64748b;
-  font-size: 12px;
+/* 加载状态 */
+.xx-loading {
+  padding: 60px 24px;
+  text-align: center;
+  color: var(--text-secondary);
 }
 
+/* ========== 状态标签 ========== */
 .row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 
 .pill {
   font-size: 11px;
-  padding: 3px 7px;
-  border-radius: 999px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
   font-weight: 850;
   white-space: nowrap;
 }
 
 .pill.ok {
-  background: #dcfce7;
+  background: var(--success-soft);
   color: #15803d;
 }
 
 .pill.warn {
-  background: #fef3c7;
+  background: var(--warning-soft);
   color: #b45309;
 }
 
 .pill.bad {
-  background: #ffe4e6;
+  background: var(--error-soft);
   color: #be123c;
 }
 
+/* ========== 操作按钮 ========== */
 .assist-actions {
   display: grid;
   gap: 10px;
-  margin-top: 16px;
+  margin-top: 14px;
   grid-template-columns: 1fr 1fr;
 }
 
-.btn {
+.assist-actions .btn {
   border: 0;
-  border-radius: 14px;
-  padding: 12px 17px;
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
   font-weight: 850;
   cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
+  font-size: 13px;
+  transition: all 0.2s ease;
 }
 
-.btn.primary {
-  background: #4f46e5;
+.assist-actions .btn.primary {
+  background: var(--gradient-primary);
   color: white;
-  box-shadow: 0 16px 28px rgba(79, 70, 229, 0.24);
+  box-shadow: var(--shadow-primary);
 }
 
-.btn.primary:hover {
-  background: #4338ca;
-  box-shadow: 0 20px 36px rgba(79, 70, 229, 0.32);
+.assist-actions .btn.primary:hover {
+  box-shadow: var(--shadow-hover);
+  transform: translateY(-1px);
 }
 
-.btn.primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btn.ghost {
+.assist-actions .btn.ghost {
   background: white;
-  border: 1px solid #e2e8f0;
-  color: #475569;
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
 }
 
-.btn.ghost:hover {
-  background: #f8fafc;
-  border-color: #4f46e5;
-  color: #4f46e5;
+.assist-actions .btn.ghost:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
 }
 
+/* ========== 空状态 ========== */
 .xx-empty-state {
   text-align: center;
-  padding: 40px 24px;
-  color: #64748b;
+  padding: 48px 24px;
+  color: var(--text-secondary);
 }
 
 .xx-empty-state p {
diff --git a/apps/web/src/pages/workspace/ProjectGeneration.css b/apps/web/src/pages/workspace/ProjectGeneration.css
index db7a1de78..8303e7681 100644
--- a/apps/web/src/pages/workspace/ProjectGeneration.css
+++ b/apps/web/src/pages/workspace/ProjectGeneration.css
@@ -1,11 +1,28 @@
-/* V21 视频剪辑 */
+/* V21 视频剪辑页面 */
+
+/* ========== 布局 ========== */
 .xx-project-generation {
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
+.xx-generation-layout {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  gap: var(--space-lg);
+}
+
+@media (max-width: 1200px) {
+  .xx-generation-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ========== 模板网格 - V21 卡片 ========== */
 .xx-template-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 14px;
+  gap: var(--space-md);
 }
 
 @media (max-width: 1200px) {
@@ -20,59 +37,141 @@
   }
 }
 
-.xx-choice {
+/* ========== 模板选择卡片 ========== */
+.xx-choice-card {
   position: relative;
-  border: 2px solid #e2e8f0;
-  border-radius: 18px;
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.94);
   padding: 14px;
-  background: white;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s ease;
+  overflow: hidden;
 }
 
-.xx-choice:hover {
-  border-color: #4f46e5;
+.xx-choice-card:hover {
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
-.xx-choice.selected {
-  border-color: #4f46e5;
+.xx-choice-card.selected {
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
 }
 
-.check {
+/* 选中标记 */
+.xx-choice-card .check {
   position: absolute;
-  right: -7px;
-  top: -7px;
-  width: 26px;
-  height: 26px;
+  right: 10px;
+  top: 10px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  background: #4f46e5;
+  background: var(--gradient-primary);
   color: white;
   display: grid;
   place-items: center;
   font-weight: 900;
+  font-size: 14px;
+  box-shadow: var(--shadow-primary);
 }
 
-.cover {
-  height: 78px;
-  border-radius: 14px;
+/* 模板封面 - 渐变背景 */
+.xx-template-cover {
+  height: 90px;
+  border-radius: var(--radius-md);
   display: grid;
   place-items: center;
   color: white;
-  font-size: 28px;
-  margin-bottom: 10px;
+  font-size: 32px;
+  font-weight: 850;
+  margin-bottom: 12px;
+  position: relative;
+  overflow: hidden;
 }
 
-.xx-choice b {
+.xx-template-cover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+}
+
+/* 渐变预设 */
+.gradient-1 {
+  background: linear-gradient(135deg, #4f46e5, #6366f1);
+}
+
+.gradient-2 {
+  background: linear-gradient(135deg, #10b981, #14b8a6);
+}
+
+.gradient-3 {
+  background: linear-gradient(135deg, #f59e0b, #f97316);
+}
+
+.gradient-4 {
+  background: linear-gradient(135deg, #ec4899, #8b5cf6);
+}
+
+/* 模板信息 */
+.xx-template-info b {
+  display: block;
   font-size: 15px;
   font-weight: 850;
-  color: #0f172a;
-  display: block;
+  color: var(--text-primary);
+  margin-bottom: 4px;
 }
 
-.xx-choice p {
-  margin: 5px 0 0;
-  color: #64748b;
+.xx-template-info p {
+  margin: 0;
+  color: var(--text-secondary);
   font-size: 12px;
   line-height: 1.4;
 }
+
+/* ========== 预览区域 ========== */
+.xx-preview-section {
+  position: sticky;
+  top: var(--space-xl);
+}
+
+.xx-preview-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-sm);
+  transition: all 0.2s ease;
+}
+
+.xx-preview-item:hover {
+  background: var(--primary-soft);
+}
+
+.xx-preview-item .icon {
+  font-size: 28px;
+  width: 52px;
+  height: 52px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+}
+
+.xx-preview-item h4 {
+  font-size: 14px;
+  font-weight: 850;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+}
+
+.xx-preview-item p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
diff --git a/apps/web/src/pages/workspace/ProjectResults.css b/apps/web/src/pages/workspace/ProjectResults.css
index f7c194df4..2e03fe3bc 100644
--- a/apps/web/src/pages/workspace/ProjectResults.css
+++ b/apps/web/src/pages/workspace/ProjectResults.css
@@ -1,11 +1,16 @@
-/* V21 成片库 */
+/* V21 成片库页面 - 9:16 竖屏紧凑卡片 */
+
+/* ========== 布局 ========== */
 .xx-project-results {
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
+/* ========== 竖屏卡片网格 ========== */
 .xx-vertical-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
+  gap: var(--space-md);
 }
 
 .xx-vertical-grid.compact {
@@ -32,32 +37,37 @@
   }
 }
 
+/* ========== 竖屏卡片 - V21 大圆角 ========== */
 .xx-vertical-card {
-  border: 1px solid #e2e8f0;
-  background: white;
-  border-radius: 24px;
-  padding: 12px;
-  transition: all 0.2s;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--radius-xl);
+  padding: 14px;
+  transition: all 0.25s ease;
+  overflow: hidden;
 }
 
 .xx-vertical-card:hover {
-  border-color: #4f46e5;
-  box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-3px);
 }
 
+/* ========== 竖屏缩略图 - 9:16 ========== */
 .xx-vertical-thumb {
   aspect-ratio: 9 / 16;
-  border-radius: 18px;
-  background: linear-gradient(135deg, #0ea5e9, #312e81);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, #4f46e5, #6366f1);
   position: relative;
   overflow: hidden;
   display: grid;
   place-items: center;
   color: white;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   cursor: pointer;
 }
 
+/* 缩略图渐变变体 */
 .xx-vertical-thumb.orange {
   background: linear-gradient(135deg, #f97316, #ef4444);
 }
@@ -70,34 +80,125 @@
   background: linear-gradient(135deg, #10b981, #0284c7);
 }
 
-.xx-vertical-thumb video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.xx-vertical-thumb.purple {
+  background: linear-gradient(135deg, #8b5cf6, #a855f7);
 }
 
+/* 视频/图片填充 */
+.xx-vertical-thumb video,
 .xx-vertical-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
+/* 播放按钮 - 毛玻璃效果 */
+.mini-play {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.22);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  font-size: 20px;
+  color: white;
+  transition: all 0.2s ease;
+}
+
+.mini-play:hover {
+  background: rgba(255, 255, 255, 0.35);
+  transform: scale(1.08);
+}
+
+/* 卡片文字 */
+.xx-vertical-card .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
 .xx-vertical-card b {
   display: block;
-  color: #0f172a;
+  color: var(--text-primary);
   font-weight: 850;
   font-size: 14px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .xx-vertical-card p {
-  margin: 5px 0 0;
-  color: #64748b;
+  margin: 0;
+  color: var(--text-secondary);
   font-size: 12px;
 }
 
+/* ========== 状态标签 ========== */
+.pill {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.pill.ok {
+  background: var(--success-soft);
+  color: #15803d;
+}
+
+.pill.warn {
+  background: var(--warning-soft);
+  color: #b45309;
+}
+
+.pill.bad {
+  background: var(--error-soft);
+  color: #be123c;
+}
+
+/* ========== 操作按钮组 ========== */
 .assist-actions {
   display: grid;
   gap: 8px;
   margin-top: 12px;
   grid-template-columns: 1fr 1fr;
 }
+
+.assist-actions .btn {
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  font-weight: 850;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.assist-actions .btn.primary {
+  background: var(--gradient-primary);
+  color: white;
+  box-shadow: var(--shadow-primary);
+}
+
+.assist-actions .btn.primary:hover {
+  box-shadow: var(--shadow-hover);
+  transform: translateY(-1px);
+}
+
+.assist-actions .btn.ghost {
+  background: white;
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+
+.assist-actions .btn.ghost:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
diff --git a/apps/web/src/pages/workspace/ProjectVoices.css b/apps/web/src/pages/workspace/ProjectVoices.css
index 9c7519033..2d6d4f6aa 100644
--- a/apps/web/src/pages/workspace/ProjectVoices.css
+++ b/apps/web/src/pages/workspace/ProjectVoices.css
@@ -1,11 +1,16 @@
-/* V21 配音库 */
+/* V21 配音库页面 - 波形图样式 */
+
+/* ========== 布局 ========== */
 .xx-project-voices {
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
+/* ========== 配音网格 ========== */
 .xx-voice-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
+  gap: var(--space-md);
 }
 
 @media (max-width: 1200px) {
@@ -20,86 +25,169 @@
   }
 }
 
+@media (max-width: 480px) {
+  .xx-voice-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ========== 配音卡片 - V21 大圆角 ========== */
 .xx-voice {
   text-align: center;
-  border: 2px solid #e2e8f0;
-  border-radius: 18px;
-  background: white;
-  padding: 14px;
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.94);
+  padding: 18px 14px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s ease;
   position: relative;
 }
 
 .xx-voice:hover {
-  border-color: #4f46e5;
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
 .xx-voice.selected {
-  border-color: #4f46e5;
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
 }
 
+/* 选中标记 */
 .xx-voice.selected::after {
   content: '✓';
   position: absolute;
-  right: -7px;
-  top: -7px;
-  width: 26px;
-  height: 26px;
+  right: -8px;
+  top: -8px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  background: #4f46e5;
+  background: var(--gradient-primary);
   color: white;
   display: grid;
   place-items: center;
   font-weight: 900;
+  font-size: 14px;
+  box-shadow: var(--shadow-primary);
 }
 
+/* 音色图标 - 渐变圆形 */
 .voice-icon {
-  width: 54px;
-  height: 54px;
-  margin: 0 auto 9px;
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 12px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: white;
-  font-size: 24px;
-  background: linear-gradient(135deg, #4f46e5, #6366f1);
+  font-size: 26px;
+  background: var(--gradient-primary);
+  box-shadow: var(--shadow-primary);
+  transition: all 0.2s ease;
 }
 
-.xx-voice div {
+.xx-voice:hover .voice-icon {
+  transform: scale(1.08);
+  box-shadow: var(--shadow-hover);
+}
+
+/* ========== 波形图样式 ========== */
+.waveform {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  height: 32px;
+  margin: 10px 0;
+}
+
+.waveform-bar {
+  width: 4px;
+  border-radius: 2px;
+  background: var(--gradient-primary);
+  opacity: 0.7;
+  transition: all 0.2s ease;
+}
+
+.xx-voice:hover .waveform-bar {
+  opacity: 1;
+}
+
+.waveform-bar:nth-child(1) { height: 40%; }
+.waveform-bar:nth-child(2) { height: 70%; }
+.waveform-bar:nth-child(3) { height: 100%; }
+.waveform-bar:nth-child(4) { height: 60%; }
+.waveform-bar:nth-child(5) { height: 80%; }
+.waveform-bar:nth-child(6) { height: 50%; }
+.waveform-bar:nth-child(7) { height: 90%; }
+.waveform-bar:nth-child(8) { height: 65%; }
+.waveform-bar:nth-child(9) { height: 45%; }
+.waveform-bar:nth-child(10) { height: 75%; }
+
+/* 播放中波形动画 */
+.waveform.playing .waveform-bar {
+  animation: wave 0.5s ease-in-out infinite alternate;
+}
+
+.waveform-bar:nth-child(1) { animation-delay: 0s; }
+.waveform-bar:nth-child(2) { animation-delay: 0.05s; }
+.waveform-bar:nth-child(3) { animation-delay: 0.1s; }
+.waveform-bar:nth-child(4) { animation-delay: 0.15s; }
+.waveform-bar:nth-child(5) { animation-delay: 0.2s; }
+.waveform-bar:nth-child(6) { animation-delay: 0.25s; }
+.waveform-bar:nth-child(7) { animation-delay: 0.3s; }
+.waveform-bar:nth-child(8) { animation-delay: 0.35s; }
+.waveform-bar:nth-child(9) { animation-delay: 0.4s; }
+.waveform-bar:nth-child(10) { animation-delay: 0.45s; }
+
+@keyframes wave {
+  from { transform: scaleY(0.6); }
+  to { transform: scaleY(1.2); }
+}
+
+/* 文字样式 */
+.xx-voice div:not(.voice-icon):not(.waveform) {
   font-weight: 850;
   font-size: 14px;
-  color: #0f172a;
+  color: var(--text-primary);
 }
 
 .xx-voice small {
   display: block;
-  color: #64748b;
-  margin-top: 4px;
-  font-size: 11px;
+  color: var(--text-secondary);
+  margin-top: 6px;
+  font-size: 12px;
 }
 
+/* ========== 使用记录列表 ========== */
 .xx-voice-usage-list {
   display: grid;
-  gap: 10px;
+  gap: 12px;
 }
 
 .xx-voice-usage-row {
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--border-color);
   background: white;
-  border-radius: 18px;
-  padding: 13px;
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  transition: all 0.2s ease;
+}
+
+.xx-voice-usage-row:hover {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-xs);
 }
 
 .xx-voice-usage-row b {
   display: block;
-  color: #0f172a;
+  color: var(--text-primary);
   font-weight: 850;
+  margin-bottom: 4px;
 }
 
 .xx-voice-usage-row p {
-  margin: 5px 0 0;
-  color: #64748b;
+  margin: 0;
+  color: var(--text-secondary);
   font-size: 12px;
 }
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 63fcad593..f16ec9bca 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -1,115 +1,257 @@
 /**
- * 全局样式变量
+ * V21 设计系统 - 全局样式
+ * 核心设计规范：Indigo 主色 / 大圆角 / 毛玻璃 / 渐变背景
  */
+
 :root {
-  /* 主色调 */
-  --primary-color: #1890ff;
-  --primary-hover: #40a9ff;
-  --primary-active: #096dd9;
+  /* ========== 主色调 - Indigo ========== */
+  --primary-color: #4f46e5;
+  --primary-hover: #6366f1;
+  --primary-dark: #4338ca;
+  --primary-soft: #eef2ff;
+  --gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
 
-  /* 状态色 */
-  --success-color: #52c41a;
-  --warning-color: #faad14;
-  --error-color: #ff4d4f;
-  --info-color: #1890ff;
+  /* ========== 状态色 ========== */
+  --success-color: #10b981;
+  --success-soft: #dcfce7;
+  --warning-color: #f59e0b;
+  --warning-soft: #fef3c7;
+  --error-color: #ef4444;
+  --error-soft: #ffe4e6;
+  --info-color: #4f46e5;
+  --info-soft: #eef2ff;
 
-  /* 文字颜色 */
-  --text-primary: #262626;
-  --text-secondary: #595959;
+  /* ========== 文字色 ========== */
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
   --text-disabled: #bfbfbf;
 
-  /* 背景色 */
+  /* ========== 背景色 ========== */
   --bg-primary: #ffffff;
-  --bg-secondary: #fafafa;
-  --bg-tertiary: #f5f5f5;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
 
-  /* 边框和分割线 */
-  --border-color: #d9d9d9;
+  /* ========== 边框色 ========== */
+  --border-color: #e2e8f0;
   --divider-color: #f0f0f0;
 
-  /* 间距 */
+  /* ========== 间距 ========== */
   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;
+  --space-2xl: 48px;
 
-  /* 圆角 */
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 8px;
+  /* ========== 圆角 - V21 大圆角 ========== */
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 22px;
+  --radius-xl: 28px;
+  --radius-full: 9999px;
 
-  /* 阴影 */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
-  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
-  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
-}
-
-/* 全局样式重置 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+  /* ========== 阴影 - V21 柔和大阴影 ========== */
+  --shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.04);
+  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 20px 58px rgba(15, 23, 42, 0.10);
+  --shadow-lg: 0 30px 90px rgba(15, 23, 42, 0.15);
+  --shadow-hover: 0 18px 34px rgba(79, 70, 229, 0.28);
+  --shadow-card: 0 24px 70px rgba(15, 23, 42, 0.09);
+  --shadow-primary: 0 14px 26px rgba(79, 70, 229, 0.22);
 }
 
+/* ========== 全局背景装饰层 ========== */
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
-    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  position: relative;
 }
 
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 18% 20%, rgba(79, 70, 229, 0.11), transparent 30%),
+    radial-gradient(circle at 86% 14%, rgba(16, 185, 129, 0.08), transparent 28%),
+    radial-gradient(circle at 48% 80%, rgba(99, 102, 241, 0.08), transparent 34%),
+    #f8fafc;
 }
 
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image: radial-gradient(circle, rgba(79, 70, 229, 0.1) 1px, transparent 1px);
+  background-size: 38px 38px;
+  opacity: 0.32;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+#root {
+  position: relative;
+  z-index: 1;
 }
 
-/* 通用工具类 */
-.text-center {
+/* ========== 页面通用布局 ========== */
+.xx-page {
+  padding: var(--space-xl);
+  min-height: 100vh;
+}
+
+.xx-page-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-xl);
+  padding: var(--space-lg);
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(226, 232, 240, 0.95);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-card);
+}
+
+.xx-page-head h2 {
+  font-size: 26px;
+  font-weight: 850;
+  color: var(--text-primary);
+  margin: 0 0 6px;
+}
+
+.xx-page-head p {
+  color: var(--text-secondary);
+  margin: 0;
+  font-size: 14px;
+}
+
+/* ========== V21 按钮样式 ========== */
+.xx-primary-btn,
+.ant-btn-primary {
+  background: var(--gradient-primary) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: var(--radius-md) !important;
+  font-weight: 850 !important;
+  box-shadow: var(--shadow-primary) !important;
+  padding: 12px 22px !important;
+  transition: all 0.2s ease !important;
+  height: auto !important;
+}
+
+.xx-primary-btn:hover,
+.ant-btn-primary:hover {
+  box-shadow: var(--shadow-hover) !important;
+  transform: translateY(-1px);
+  background: var(--gradient-primary) !important;
+}
+
+.xx-ghost-btn,
+.ant-btn-default {
+  background: var(--bg-primary) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: var(--radius-md) !important;
+  font-weight: 850 !important;
+  padding: 12px 22px !important;
+  transition: all 0.2s ease !important;
+  color: var(--text-primary) !important;
+  height: auto !important;
+}
+
+.xx-ghost-btn:hover,
+.ant-btn-default:hover {
+  border-color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
+}
+
+/* Ant Design Button 圆角覆盖 */
+.ant-btn {
+  border-radius: var(--radius-md) !important;
+}
+
+/* ========== V21 卡片样式 ========== */
+.xx-card {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(226, 232, 240, 0.95);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-card);
+  padding: var(--space-xl);
+  margin-bottom: var(--space-lg);
+  transition: all 0.25s ease;
+}
+
+.xx-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.xx-card h3 {
+  font-size: 20px;
+  font-weight: 850;
+  color: var(--text-primary);
+  margin: 0 0 var(--space-md);
+}
+
+/* ========== 上传区域 ========== */
+.xx-upload-zone {
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 48px;
   text-align: center;
+  background: var(--bg-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.text-right {
-  text-align: right;
+.xx-upload-zone:hover {
+  border-color: var(--primary-color);
+  background: var(--primary-soft);
 }
 
-.mt-sm {
-  margin-top: var(--space-sm);
-}
-
-.mt-md {
-  margin-top: var(--space-md);
-}
-
-.mt-lg {
-  margin-top: var(--space-lg);
-}
-
-.mb-sm {
-  margin-bottom: var(--space-sm);
-}
-
-.mb-md {
+.xx-upload-zone .icon {
+  font-size: 48px;
   margin-bottom: var(--space-md);
 }
 
-.mb-lg {
-  margin-bottom: var(--space-lg);
+.xx-upload-zone p {
+  color: var(--text-secondary);
+  margin: var(--space-sm) 0;
+  font-size: 14px;
 }
 
-/* 卡片hover效果 */
+.xx-upload-btn {
+  margin-top: var(--space-md);
+}
+
+/* ========== 空状态 ========== */
+.xx-empty-state {
+  text-align: center;
+  padding: 48px;
+  color: var(--text-secondary);
+}
+
+.xx-empty-state .icon {
+  font-size: 64px;
+  margin-bottom: var(--space-md);
+}
+
+/* ========== 工具类 ========== */
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-primary { color: var(--primary-color); }
+.text-muted { color: var(--text-secondary); }
+
+.mt-sm { margin-top: var(--space-sm); }
+.mt-md { margin-top: var(--space-md); }
+.mt-lg { margin-top: var(--space-lg); }
+.mb-sm { margin-bottom: var(--space-sm); }
+.mb-md { margin-bottom: var(--space-md); }
+.mb-lg { margin-bottom: var(--space-lg); }
+
+/* ========== 卡片悬浮效果 ========== */
 .card-hover {
-  transition: all 0.3s;
+  transition: all 0.3s ease;
   cursor: pointer;
 }
 
@@ -118,8 +260,37 @@ body {
   box-shadow: var(--shadow-lg);
 }
 
-/* 选中的套餐卡片 */
-.selected-plan {
+/* ========== 选中态 ========== */
+.selected-plan,
+.selected-item {
   border: 2px solid var(--primary-color) !important;
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-md) !important;
+}
+
+/* ========== 网格布局 ========== */
+.xx-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-md);
+}
+
+.xx-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-md);
+}
+
+.xx-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+}
+
+@media (max-width: 1200px) {
+  .xx-grid-4 { grid-template-columns: repeat(3, 1fr); }
+  .xx-grid-3 { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 768px) {
+  .xx-grid-4, .xx-grid-3, .xx-grid-2 { grid-template-columns: 1fr; }
 }