From 0e94adf7b6abbcd58dfbc1193217eb5d03b364e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=B5=E5=BA=94?= <ci-test@xiaoxia.com>
Date: Sat, 4 Jul 2026 20:41:31 +0800
Subject: [PATCH] =?UTF-8?q?P2:=20=E5=89=AA=E8=BE=91=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E8=A7=86=E8=A7=89=E7=B2=BE=E4=BF=AE?=
 =?UTF-8?q?=20=E2=80=94=20=E9=A2=9C=E8=89=B2/=E5=B0=BA=E5=AF=B8/=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E5=85=A8=E9=87=8F=E5=AF=B9=E9=BD=90=20V8=20=E5=8E=9F?=
 =?UTF-8?q?=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

颜色体系：
- 边框统一 #1f1f30（原 #222/#2a2a4a/#1a1a2a）
- 文字统一 #e8e8f0/#9ca3af/#4b5563（原 #e0e0e0/#888/#666/#555/#ccc）
- 顶栏/底栏背景 #13131f（原 #161625）
- 按钮/卡片背景 #1a1a2e（原 #1e1e2e）

尺寸收紧：
- 按钮高度统一 28px（.ep-btn）/ 24px（.ep-btn-sm）
- 圆角统一 4px（按钮/搜索框/chip/标签/卡片）
- 搜索框高度 28px（原 30px）
- 片段卡片高度 96px（原 100px）
- 模板卡片圆角 6px（原 8px）

动画增强：
- 模式栏下划线滑动动画 cubic-bezier(0.4, 0, 0.2, 1)
- 按钮/卡片 hover 过渡统一 0.2s ease

新增样式：
- .ep-cover-ai-btns / .ep-cover-ai-btn（AI 封面操作按钮）
- .ep-playhead（播放头竖线 + 三角标记）
- .ep-clip-track 轨道底色
- 滚动条颜色统一 #1f1f30

内联样式修复：
- ClipPropertiesPanel 秒数标签 #666 → #4b5563
---
 .../pages/editing-planner/EditingPlanner.css  | 412 +++++++++++-------
 .../components/ClipPropertiesPanel.tsx        |   2 +-
 2 files changed, 254 insertions(+), 160 deletions(-)

diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
index 6891b53a6..de9c8c7e8 100644
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -1,8 +1,11 @@
 /**
- * 剪辑计划编辑器 — V8 原型 1:1 还原样式
- * 颜色：背景 #0a0a14、主色 #6c5ce7、卡片 #13131f
+ * 剪辑计划编辑器 — V8 原型 1:1 还原样式（P2 视觉打磨）
+ * 颜色：背景 #0a0a14、主色 #6c5ce7、卡片 #13131f、边框 #1f1f30
+ * 文字：#e8e8f0（主）/ #9ca3af（次）/ #4b5563（辅）
  * 布局：4行（顶栏42 + 模式栏48 + 三栏主体flex + 底栏40）
  * 面板宽度：左220 / 右260
+ * 按钮：高度28px、圆角4px
+ * 字号：12px为主，标题13-14px
  */
 
 /* ═══════════════════════════════════════
@@ -14,9 +17,10 @@
   flex-direction: column;
   height: 100vh;
   background: #0a0a14;
-  color: #e0e0e0;
+  color: #e8e8f0;
   font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
   font-size: 12px;
+  line-height: 1.5;
   overflow: hidden;
 }
 
@@ -27,12 +31,12 @@
 .ep-top-bar {
   height: 42px;
   min-height: 42px;
-  background: #161625;
-  border-bottom: 1px solid #222;
+  background: #13131f;
+  border-bottom: 1px solid #1f1f30;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
+  padding: 0 12px;
 }
 
 .ep-top-bar-left {
@@ -42,43 +46,45 @@
 }
 
 .ep-logo {
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .ep-app-title {
   font-size: 14px;
   font-weight: 600;
-  color: #fff;
+  color: #e8e8f0;
 }
 
 .ep-divider {
-  color: #333;
+  color: #4b5563;
   margin: 0 4px;
 }
 
 .ep-template-name {
-  color: #888;
+  color: #9ca3af;
   font-size: 12px;
 }
 
 .ep-top-bar-right {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
-/* 按钮 */
+/* 按钮 — 统一28px高度、4px圆角 */
 .ep-btn {
-  padding: 6px 14px;
-  border-radius: 6px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
   border: none;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
   display: flex;
   align-items: center;
   gap: 4px;
+  white-space: nowrap;
 }
 
 .ep-btn-primary {
@@ -91,18 +97,25 @@
 }
 
 .ep-btn-secondary {
-  background: #1e1e2e;
-  color: #ccc;
-  border: 1px solid #2a2a4a;
+  background: #1a1a2e;
+  color: #9ca3af;
+  border: 1px solid #1f1f30;
 }
 
 .ep-btn-secondary:hover {
-  background: #2a2a3a;
+  background: #1f1f30;
   border-color: #6c5ce7;
+  color: #e8e8f0;
+}
+
+.ep-btn-secondary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .ep-btn-sm {
-  padding: 4px 10px;
+  height: 24px;
+  padding: 0 8px;
   font-size: 11px;
 }
 
@@ -116,57 +129,59 @@
 }
 
 /* ═══════════════════════════════════════
-   第2行：模式栏 48px
+   第2行：模式栏 48px — 滑动下划线动画
    ═══════════════════════════════════════ */
 
 .ep-mode-bar {
   height: 48px;
   min-height: 48px;
   background: #13131f;
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid #1f1f30;
   display: flex;
   align-items: center;
-  padding: 0 16px;
-  gap: 4px;
+  padding: 0 12px;
+  gap: 2px;
+  position: relative;
 }
 
 .ep-mode-btn {
   position: relative;
   height: 36px;
-  padding: 0 16px;
+  padding: 0 14px;
   background: transparent;
   border: none;
-  color: #888;
+  color: #9ca3af;
   font-size: 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
-  border-radius: 6px;
-  transition: all 0.2s;
+  border-radius: 4px;
+  transition: color 0.25s ease, background 0.25s ease;
 }
 
 .ep-mode-btn:hover {
-  color: #ccc;
-  background: rgba(108, 92, 231, 0.1);
+  color: #e8e8f0;
+  background: rgba(108, 92, 231, 0.08);
 }
 
 .ep-mode-btn.active {
   color: #6c5ce7;
-  background: rgba(108, 92, 231, 0.15);
+  background: rgba(108, 92, 231, 0.12);
 }
 
+/* 滑动下划线 — cubic-bezier 缓动 */
 .ep-mode-btn.active::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: 60%;
+  width: 70%;
   height: 2px;
   background: #6c5ce7;
   border-radius: 1px;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ep-mode-icon {
@@ -190,7 +205,7 @@
   width: 220px;
   min-width: 220px;
   background: #0e0e1a;
-  border-right: 1px solid #222;
+  border-right: 1px solid #1f1f30;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -203,15 +218,19 @@
 
 .ep-search-input {
   width: 100%;
-  height: 30px;
+  height: 28px;
   background: #13131f;
-  border: 1px solid #2a2a4a;
-  border-radius: 6px;
-  padding: 0 10px 0 30px;
-  color: #e0e0e0;
+  border: 1px solid #1f1f30;
+  border-radius: 4px;
+  padding: 0 8px 0 28px;
+  color: #e8e8f0;
   font-size: 12px;
   outline: none;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s ease;
+}
+
+.ep-search-input::placeholder {
+  color: #4b5563;
 }
 
 .ep-search-input:focus {
@@ -223,7 +242,7 @@
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
-  color: #555;
+  color: #4b5563;
   font-size: 12px;
   pointer-events: none;
 }
@@ -231,25 +250,25 @@
 /* Chip 筛选 */
 .ep-filter-chips {
   display: flex;
-  gap: 6px;
+  gap: 4px;
   padding: 0 8px 8px;
   flex-wrap: wrap;
 }
 
 .ep-filter-chip {
-  padding: 3px 10px;
-  border-radius: 12px;
+  padding: 3px 8px;
+  border-radius: 4px;
   font-size: 11px;
   background: #13131f;
-  color: #888;
-  border: 1px solid #2a2a4a;
+  color: #9ca3af;
+  border: 1px solid #1f1f30;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
 .ep-filter-chip:hover {
   border-color: #6c5ce7;
-  color: #ccc;
+  color: #e8e8f0;
 }
 
 .ep-filter-chip.active {
@@ -270,23 +289,23 @@
 }
 
 .ep-template-list::-webkit-scrollbar-thumb {
-  background: #333;
+  background: #1f1f30;
   border-radius: 2px;
 }
 
 .ep-template-card {
   background: #13131f;
-  border: 1px solid #222;
-  border-radius: 8px;
+  border: 1px solid #1f1f30;
+  border-radius: 6px;
   padding: 10px;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
 .ep-template-card:hover {
   border-color: #6c5ce7;
-  background: #1a1a2a;
+  background: #1a1a2e;
 }
 
 .ep-template-card.active {
@@ -304,14 +323,14 @@
 .ep-template-card-name {
   font-size: 12px;
   font-weight: 600;
-  color: #fff;
+  color: #e8e8f0;
 }
 
 .ep-template-card-mode {
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 4px;
-  background: rgba(108, 92, 231, 0.2);
+  background: rgba(108, 92, 231, 0.15);
   color: #6c5ce7;
 }
 
@@ -319,7 +338,7 @@
   display: flex;
   gap: 8px;
   font-size: 10px;
-  color: #666;
+  color: #4b5563;
 }
 
 .ep-template-card-tags {
@@ -333,8 +352,8 @@
   font-size: 10px;
   padding: 1px 6px;
   border-radius: 3px;
-  background: #1a1a2a;
-  color: #888;
+  background: #1a1a2e;
+  color: #9ca3af;
 }
 
 /* Loading / Empty */
@@ -345,7 +364,7 @@
   align-items: center;
   justify-content: center;
   padding: 32px 16px;
-  color: #555;
+  color: #4b5563;
   font-size: 12px;
   gap: 8px;
 }
@@ -370,7 +389,7 @@
   gap: 16px;
   padding: 16px;
   background: #0a0a14;
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid #1f1f30;
 }
 
 /* 手机模型预览 */
@@ -379,7 +398,7 @@
   height: 267px;
   background: #000;
   border-radius: 16px;
-  border: 2px solid #333;
+  border: 2px solid #1f1f30;
   position: relative;
   overflow: hidden;
   flex-shrink: 0;
@@ -393,7 +412,7 @@
   justify-content: space-between;
   padding: 0 10px;
   font-size: 9px;
-  color: #666;
+  color: #4b5563;
 }
 
 .ep-phone-content {
@@ -418,7 +437,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
 .ep-phone-play-btn:hover {
@@ -432,13 +451,13 @@
   left: 0;
   right: 0;
   height: 3px;
-  background: #222;
+  background: #1f1f30;
 }
 
 .ep-phone-progress-fill {
   height: 100%;
   background: #6c5ce7;
-  transition: width 0.3s;
+  transition: width 0.3s ease;
 }
 
 .ep-phone-clip-label {
@@ -448,7 +467,7 @@
   right: 0;
   text-align: center;
   font-size: 9px;
-  color: #888;
+  color: #9ca3af;
 }
 
 /* 封面预览 */
@@ -456,8 +475,8 @@
   width: 150px;
   height: 267px;
   background: #13131f;
-  border-radius: 8px;
-  border: 1px solid #2a2a4a;
+  border-radius: 6px;
+  border: 1px solid #1f1f30;
   position: relative;
   overflow: hidden;
   flex-shrink: 0;
@@ -473,7 +492,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #555;
+  color: #4b5563;
   font-size: 11px;
 }
 
@@ -484,7 +503,42 @@
   right: 0;
   text-align: center;
   font-size: 9px;
-  color: #888;
+  color: #9ca3af;
+}
+
+/* 封面 AI 按钮 */
+.ep-cover-ai-btns {
+  position: absolute;
+  top: 8px;
+  left: 4px;
+  right: 4px;
+  display: flex;
+  gap: 4px;
+}
+
+.ep-cover-ai-btn {
+  flex: 1;
+  height: 22px;
+  background: rgba(108, 92, 231, 0.7);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.ep-cover-ai-btn:hover {
+  background: #6c5ce7;
+}
+
+.ep-cover-ai-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* 封面方案按钮（竖排4个） */
@@ -495,20 +549,23 @@
 }
 
 .ep-cover-tag {
-  padding: 6px 12px;
-  border-radius: 6px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 4px;
   font-size: 11px;
   background: #13131f;
-  color: #888;
-  border: 1px solid #2a2a4a;
+  color: #9ca3af;
+  border: 1px solid #1f1f30;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 }
 
 .ep-cover-tag:hover {
   border-color: #6c5ce7;
-  color: #ccc;
+  color: #e8e8f0;
 }
 
 .ep-cover-tag.active {
@@ -532,13 +589,13 @@
   align-items: center;
   justify-content: space-between;
   padding: 6px 12px;
-  border-bottom: 1px solid #1a1a2a;
+  border-bottom: 1px solid #1f1f30;
 }
 
 .ep-timeline-title {
   font-size: 12px;
   font-weight: 600;
-  color: #fff;
+  color: #e8e8f0;
 }
 
 .ep-timeline-actions {
@@ -547,26 +604,29 @@
 }
 
 .ep-timeline-action-btn {
-  padding: 3px 8px;
+  height: 24px;
+  padding: 0 8px;
   background: #13131f;
-  border: 1px solid #2a2a4a;
+  border: 1px solid #1f1f30;
   border-radius: 4px;
-  color: #888;
+  color: #9ca3af;
   font-size: 11px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
 }
 
 .ep-timeline-action-btn:hover {
   border-color: #6c5ce7;
-  color: #ccc;
+  color: #e8e8f0;
 }
 
 /* 时间标尺 */
 .ep-time-ruler {
   height: 20px;
   background: #13131f;
-  border-bottom: 1px solid #1a1a2a;
+  border-bottom: 1px solid #1f1f30;
   display: flex;
   align-items: center;
   padding: 0 12px;
@@ -583,7 +643,7 @@
 .ep-time-mark {
   position: absolute;
   font-size: 9px;
-  color: #555;
+  color: #4b5563;
   top: 2px;
 }
 
@@ -594,10 +654,10 @@
   left: 0;
   width: 1px;
   height: 6px;
-  background: #333;
+  background: #1f1f30;
 }
 
-/* 水平片段轨道 */
+/* 水平片段轨道 — 带底色 */
 .ep-clip-track {
   flex: 1;
   display: flex;
@@ -606,6 +666,8 @@
   padding: 8px 12px;
   overflow-x: auto;
   overflow-y: hidden;
+  background: #0e0e1a;
+  position: relative;
 }
 
 .ep-clip-track::-webkit-scrollbar {
@@ -613,20 +675,20 @@
 }
 
 .ep-clip-track::-webkit-scrollbar-thumb {
-  background: #333;
+  background: #1f1f30;
   border-radius: 2px;
 }
 
-/* 水平片段卡片 */
+/* 水平片段卡片 — 统一高度96px、圆角6px、hover高亮 */
 .ep-clip-card {
   width: 100px;
   min-width: 100px;
-  height: 100px;
+  height: 96px;
   background: #13131f;
-  border: 1px solid #222;
-  border-radius: 8px;
+  border: 1px solid #1f1f30;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -634,18 +696,19 @@
 }
 
 .ep-clip-card:hover {
-  border-color: #444;
-  transform: translateY(-2px);
+  border-color: #4b5563;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 .ep-clip-card.selected {
   border-color: #6c5ce7;
-  box-shadow: 0 0 8px rgba(108, 92, 231, 0.3);
+  box-shadow: 0 0 0 1px #6c5ce7, 0 2px 8px rgba(108, 92, 231, 0.2);
 }
 
 .ep-clip-card.drag-over {
   border-color: #6c5ce7;
-  background: rgba(108, 92, 231, 0.1);
+  background: rgba(108, 92, 231, 0.08);
 }
 
 .ep-clip-card.dragging {
@@ -653,12 +716,12 @@
 }
 
 .ep-clip-thumbnail {
-  height: 56px;
+  height: 52px;
   background: linear-gradient(135deg, #1a1a2e, #0e0e1a);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  font-size: 18px;
   flex-shrink: 0;
 }
 
@@ -672,7 +735,7 @@
 
 .ep-clip-name {
   font-size: 10px;
-  color: #ccc;
+  color: #e8e8f0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -680,7 +743,7 @@
 
 .ep-clip-duration {
   font-size: 9px;
-  color: #666;
+  color: #4b5563;
 }
 
 .ep-clip-remove {
@@ -705,22 +768,44 @@
   display: flex;
 }
 
+/* 播放头竖线 */
+.ep-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #6c5ce7;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.ep-playhead::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -4px;
+  width: 10px;
+  height: 10px;
+  background: #6c5ce7;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
 /* 空轨道 */
 .ep-track-empty {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #444;
+  color: #4b5563;
   font-size: 12px;
-  min-height: 100px;
+  min-height: 96px;
 }
 
 /* 一镜到底提示 */
 .ep-one-take-hint {
   padding: 4px 12px;
-  background: rgba(255, 165, 2, 0.1);
-  border-bottom: 1px solid rgba(255, 165, 2, 0.2);
+  background: rgba(255, 165, 2, 0.08);
+  border-bottom: 1px solid rgba(255, 165, 2, 0.15);
   color: #ffa502;
   font-size: 11px;
   text-align: center;
@@ -732,7 +817,7 @@
   width: 260px;
   min-width: 260px;
   background: #0e0e1a;
-  border-left: 1px solid #222;
+  border-left: 1px solid #1f1f30;
   overflow-y: auto;
   padding: 12px;
 }
@@ -742,7 +827,7 @@
 }
 
 .ep-right-panel::-webkit-scrollbar-thumb {
-  background: #333;
+  background: #1f1f30;
   border-radius: 2px;
 }
 
@@ -752,9 +837,9 @@
 }
 
 .ep-section-title {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
-  color: #fff;
+  color: #e8e8f0;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
@@ -773,7 +858,7 @@
 .ep-field-label {
   display: block;
   font-size: 11px;
-  color: #888;
+  color: #9ca3af;
   margin-bottom: 4px;
 }
 
@@ -782,13 +867,13 @@
   width: 100%;
   height: 28px;
   background: #13131f;
-  border: 1px solid #2a2a4a;
+  border: 1px solid #1f1f30;
   border-radius: 4px;
   padding: 0 8px;
-  color: #e0e0e0;
-  font-size: 11px;
+  color: #e8e8f0;
+  font-size: 12px;
   outline: none;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s ease;
 }
 
 .ep-form-input:focus,
@@ -810,17 +895,17 @@
 
 .ep-toggle-label {
   font-size: 11px;
-  color: #888;
+  color: #9ca3af;
 }
 
 .ep-toggle {
   width: 36px;
   height: 20px;
-  background: #2a2a4a;
+  background: #1f1f30;
   border-radius: 10px;
   position: relative;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background 0.2s ease;
 }
 
 .ep-toggle.active {
@@ -830,12 +915,12 @@
 .ep-toggle-knob {
   width: 16px;
   height: 16px;
-  background: #fff;
+  background: #e8e8f0;
   border-radius: 50%;
   position: absolute;
   top: 2px;
   left: 2px;
-  transition: left 0.2s;
+  transition: left 0.2s ease;
 }
 
 .ep-toggle.active .ep-toggle-knob {
@@ -853,7 +938,7 @@
   flex: 1;
   -webkit-appearance: none;
   height: 4px;
-  background: #2a2a4a;
+  background: #1f1f30;
   border-radius: 2px;
   outline: none;
 }
@@ -869,7 +954,7 @@
 
 .ep-slider-value {
   font-size: 11px;
-  color: #888;
+  color: #9ca3af;
   min-width: 30px;
   text-align: right;
 }
@@ -884,24 +969,24 @@
   width: 28px;
   height: 28px;
   background: #13131f;
-  border: 1px solid #2a2a4a;
+  border: 1px solid #1f1f30;
   border-radius: 4px;
-  color: #888;
+  color: #9ca3af;
   font-size: 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
 .ep-style-btn:hover {
   border-color: #6c5ce7;
-  color: #ccc;
+  color: #e8e8f0;
 }
 
 .ep-style-btn.active {
-  background: rgba(108, 92, 231, 0.2);
+  background: rgba(108, 92, 231, 0.15);
   border-color: #6c5ce7;
   color: #6c5ce7;
 }
@@ -909,27 +994,36 @@
 /* AI推荐按钮 */
 .ep-ai-recommend-btn {
   width: 100%;
-  padding: 8px;
+  height: 28px;
+  padding: 0 8px;
   background: linear-gradient(135deg, #6c5ce7, #a29bfe);
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
   color: #fff;
   font-size: 12px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
   margin-top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
 }
 
 .ep-ai-recommend-btn:hover {
   opacity: 0.9;
-  transform: translateY(-1px);
+}
+
+.ep-ai-recommend-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* 片段详情卡片 */
 .ep-clip-detail {
   background: #13131f;
-  border: 1px solid #2a2a4a;
-  border-radius: 8px;
+  border: 1px solid #1f1f30;
+  border-radius: 6px;
   padding: 12px;
 }
 
@@ -943,14 +1037,14 @@
 .ep-clip-detail-name {
   font-size: 12px;
   font-weight: 600;
-  color: #fff;
+  color: #e8e8f0;
 }
 
 .ep-clip-detail-type {
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 4px;
-  background: rgba(108, 92, 231, 0.2);
+  background: rgba(108, 92, 231, 0.15);
   color: #6c5ce7;
 }
 
@@ -960,13 +1054,13 @@
 
 .ep-clip-detail-label {
   font-size: 10px;
-  color: #666;
+  color: #4b5563;
   margin-bottom: 3px;
 }
 
 .ep-clip-detail-value {
   font-size: 11px;
-  color: #ccc;
+  color: #e8e8f0;
 }
 
 .ep-clip-detail-row {
@@ -979,10 +1073,10 @@
   width: 60px;
   height: 24px;
   background: #0a0a14;
-  border: 1px solid #2a2a4a;
+  border: 1px solid #1f1f30;
   border-radius: 4px;
   padding: 0 6px;
-  color: #e0e0e0;
+  color: #e8e8f0;
   font-size: 11px;
   outline: none;
   text-align: center;
@@ -999,14 +1093,14 @@
 .ep-status-bar {
   height: 40px;
   min-height: 40px;
-  background: #161625;
-  border-top: 1px solid #222;
+  background: #13131f;
+  border-top: 1px solid #1f1f30;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
+  padding: 0 12px;
   font-size: 11px;
-  color: #888;
+  color: #9ca3af;
 }
 
 .ep-status-left,
@@ -1017,7 +1111,7 @@
 }
 
 .ep-status-sep {
-  color: #333;
+  color: #4b5563;
 }
 
 /* ═══════════════════════════════════════
@@ -1031,16 +1125,16 @@
 .ep-modal-field label {
   display: block;
   font-size: 12px;
-  color: #888;
+  color: #9ca3af;
   margin-bottom: 4px;
 }
 
 .ep-modal-info {
   padding: 8px 12px;
   background: #13131f;
-  border-radius: 6px;
+  border-radius: 4px;
   font-size: 12px;
-  color: #888;
+  color: #9ca3af;
   margin-top: 8px;
 }
 
@@ -1052,7 +1146,7 @@
 .ep-gen-field-label {
   display: block;
   font-size: 12px;
-  color: #888;
+  color: #9ca3af;
   margin-bottom: 6px;
 }
 
@@ -1060,10 +1154,10 @@
   width: 100%;
   height: 32px;
   background: #13131f;
-  border: 1px solid #2a2a4a;
-  border-radius: 6px;
+  border: 1px solid #1f1f30;
+  border-radius: 4px;
   padding: 0 10px;
-  color: #e0e0e0;
+  color: #e8e8f0;
   font-size: 13px;
   outline: none;
   margin-bottom: 12px;
@@ -1075,10 +1169,10 @@
 
 .ep-gen-estimate {
   font-size: 12px;
-  color: #888;
+  color: #9ca3af;
   padding: 8px 12px;
   background: #13131f;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 .ep-gen-progress {
@@ -1103,7 +1197,7 @@
 
 .ep-gen-progress-ring-bg {
   fill: none;
-  stroke: #2a2a4a;
+  stroke: #1f1f30;
   stroke-width: 8;
 }
 
@@ -1125,13 +1219,13 @@
 
 .ep-gen-step-text {
   font-size: 14px;
-  color: #ccc;
+  color: #e8e8f0;
 }
 
 .ep-gen-progress-bar {
   width: 100%;
   height: 6px;
-  background: #2a2a4a;
+  background: #1f1f30;
   border-radius: 3px;
   overflow: hidden;
 }
@@ -1144,7 +1238,7 @@
 
 .ep-gen-task-id {
   font-size: 11px;
-  color: #555;
+  color: #4b5563;
 }
 
 .ep-gen-result {
@@ -1162,12 +1256,12 @@
 .ep-gen-result-title {
   font-size: 18px;
   font-weight: 600;
-  color: #fff;
+  color: #e8e8f0;
 }
 
 .ep-gen-result-msg {
   font-size: 12px;
-  color: #888;
+  color: #9ca3af;
 }
 
 .ep-gen-result-msg--error {
diff --git a/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx b/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx
index cc23169e2..dffad244b 100644
--- a/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx
@@ -367,7 +367,7 @@ const ClipPropertiesPanel: React.FC<ClipPropertiesPanelProps> = ({
                     })
                   }
                 />
-                <span style={{ fontSize: 11, color: "#666" }}>秒</span>
+                <span style={{ fontSize: 11, color: "#4b5563" }}>秒</span>
               </div>
             </div>