From 72718cc6a393d431f6300ea1d016b628956fa33b Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiaianji.com>
Date: Sun, 5 Jul 2026 23:29:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20P0-5=20=E5=89=AA=E8=BE=91=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92=E7=BC=96=E8=BE=91=E5=99=A8V21=E7=AC=AC=E4=BA=94?=
 =?UTF-8?q?=E6=B3=A2=20-=20=E7=BB=86=E8=8A=82=E6=89=93=E7=A3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 左侧面板：加标题栏 + 搜索/筛选区域底部分隔线
- 筛选chip：字号12→10px，激活态改用primary-soft背景
- 模板卡片：圆角14→12px，hover阴影调优
- 模式按钮：背景#f8fafc→#fff，圆角14→10px，字号12→10px
- 封面方案按钮：从矩形改为胶囊样式
- 片段轨道：背景色#f8fafc→#fff
- 顶栏按钮：ghost样式对齐V21（白底+深灰字），primary阴影加强
- 右侧面板：section标题11px大写样式，section加padding+底部分隔线
- 搜索图标位置适配新的padding
---
 .gitignore                                    |   1 +
 .../pages/editing-planner/EditingPlanner.css  | 136 +++++++++++-------
 .../pages/editing-planner/EditingPlanner.tsx  |   2 +-
 .../editing-planner/components/MediaPanel.tsx |   5 +
 4 files changed, 92 insertions(+), 52 deletions(-)
 mode change 100644 => 100755 apps/web/src/pages/editing-planner/components/MediaPanel.tsx

diff --git a/.gitignore b/.gitignore
index 10838b11b..6e31b35a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,4 @@ build/
 # Tracker temp files
 tracker_tasks.json
 
+frontend-v21-ui-prototype-final.html
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
index 62b114b0b..077d1c58a 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -92,12 +92,13 @@
 .ep-btn-primary {
   background: linear-gradient(135deg, #6366f1, #4f46e5);
   color: #fff;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 14px 26px rgba(79, 70, 229, 0.22);
+  font-weight: 600;
 }
 
 .ep-btn-primary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 18px 34px rgba(79, 70, 229, 0.28);
 }
 
 .ep-btn-primary:active {
@@ -112,15 +113,16 @@
 }
 
 .ep-btn-secondary {
-  background: var(--bg-secondary, #f8fafc);
-  color: var(--text-secondary, #64748b);
+  background: var(--bg-primary, #ffffff);
+  color: #475569;
   border: 1px solid var(--line, #e2e8f0);
+  font-weight: 600;
 }
 
 .ep-btn-secondary:hover {
-  background: var(--primary-soft, #eef2ff);
-  border-color: var(--primary, #6366f1);
-  color: var(--primary, #6366f1);
+  border-color: #c7d2fe;
+  color: #4338ca;
+  background: #f8faff;
 }
 
 .ep-btn-secondary:active {
@@ -184,34 +186,34 @@
 
 .ep-mode-btn {
   position: relative;
-  height: 44px;
-  padding: 0 16px;
-  background: var(--bg-secondary, #f8fafc);
+  padding: 8px 14px;
+  background: var(--bg-primary, #ffffff);
   border: 1px solid var(--line, #e2e8f0);
   color: var(--text-secondary, #64748b);
-  font-size: 12px;
+  font-size: 10px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
-  border-radius: var(--radius-sm, 14px);
-  transition: all 0.25s ease;
-  min-width: 72px;
+  border-radius: 10px;
+  transition: all 0.2s ease;
+  min-width: 64px;
 }
 
 .ep-mode-btn:hover {
-  border-color: var(--primary, #6366f1);
-  color: var(--primary, #6366f1);
-  background: var(--primary-soft, #eef2ff);
+  border-color: var(--primary-light, #a5b4fc);
+  background: var(--primary-soft, #f8faff);
 }
 
 .ep-mode-btn.active {
   border-color: var(--primary, #6366f1);
-  color: var(--primary, #6366f1);
   background: var(--primary-soft, #eef2ff);
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
+}
+
+.ep-mode-btn.active .ep-mode-label {
+  color: var(--primary, #6366f1);
 }
 
 .ep-mode-icon {
@@ -242,10 +244,40 @@
   overflow: hidden;
 }
 
+/* 左栏标题 */
+.ep-left-header {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line, #e2e8f0);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.ep-left-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary, #64748b);
+}
+
+.ep-left-back-btn {
+  font-size: 10px;
+  color: var(--text-tertiary, #94a3b8);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.ep-left-back-btn:hover {
+  color: var(--primary, #6366f1);
+}
+
 /* 搜索 */
 .ep-search-wrap {
-  padding: 12px 16px 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--bg-secondary, #f1f5f9);
   position: relative;
+  flex-shrink: 0;
 }
 
 .ep-search-input {
@@ -273,7 +305,7 @@
 
 .ep-search-icon {
   position: absolute;
-  left: 28px;
+  left: 24px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-tertiary, #94a3b8);
@@ -285,39 +317,41 @@
 .ep-filter-chips {
   display: flex;
   gap: 6px;
-  padding: 0 16px 12px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--bg-secondary, #f1f5f9);
   flex-wrap: wrap;
+  flex-shrink: 0;
 }
 
 .ep-filter-chip {
-  padding: 5px 12px;
+  padding: 4px 10px;
   border-radius: var(--radius-full, 9999px);
-  font-size: 12px;
+  font-size: 10px;
   background: var(--bg-secondary, #f8fafc);
-  color: var(--text-secondary, #64748b);
+  color: var(--text-tertiary, #94a3b8);
   border: 1px solid var(--border-color, #e2e8f0);
   cursor: pointer;
   transition: all 0.2s ease;
   font-weight: 500;
+  line-height: 1.4;
 }
 
 .ep-filter-chip:hover {
   border-color: var(--primary, #6366f1);
-  color: var(--primary, #6366f1);
-  background: var(--primary-soft, #eef2ff);
+  color: var(--text-secondary, #64748b);
 }
 
 .ep-filter-chip.active {
-  background: var(--primary, #6366f1);
-  color: #fff;
   border-color: var(--primary, #6366f1);
+  color: var(--primary, #6366f1);
+  background: var(--primary-soft, #eef2ff);
 }
 
 /* 模板列表 */
 .ep-template-list {
   flex: 1;
   overflow-y: auto;
-  padding: 0 16px 16px;
+  padding: 10px 12px;
 }
 
 .ep-template-list::-webkit-scrollbar {
@@ -332,7 +366,7 @@
 .ep-template-card {
   background: var(--bg-primary, #ffffff);
   border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-sm, 14px);
+  border-radius: 12px;
   padding: 12px;
   margin-bottom: 8px;
   cursor: pointer;
@@ -340,10 +374,8 @@
 }
 
 .ep-template-card:hover {
-  border-color: var(--primary, #6366f1);
-  background: var(--primary-soft, #eef2ff);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
+  border-color: var(--primary-light, #a5b4fc);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
 .ep-template-card.active {
@@ -601,30 +633,30 @@
 }
 
 .ep-cover-tag {
-  height: 32px;
-  padding: 0 14px;
-  border-radius: var(--radius-xs, 8px);
-  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: var(--radius-full, 9999px);
+  font-size: 10px;
   background: var(--bg-secondary, #f8fafc);
-  color: var(--text-secondary, #64748b);
+  color: var(--text-tertiary, #94a3b8);
   border: 1px solid var(--border-color, #e2e8f0);
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
   display: flex;
   align-items: center;
+  justify-content: center;
   font-weight: 500;
+  height: auto;
 }
 
 .ep-cover-tag:hover {
   border-color: var(--primary, #6366f1);
   color: var(--primary, #6366f1);
-  background: var(--primary-soft, #eef2ff);
 }
 
 .ep-cover-tag.active {
-  background: var(--primary, #6366f1);
-  color: #fff;
+  background: var(--primary-soft, #eef2ff);
+  color: var(--primary, #6366f1);
   border-color: var(--primary, #6366f1);
 }
 
@@ -732,11 +764,11 @@
   flex: 1;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   padding: 12px 16px;
   overflow-x: auto;
   overflow-y: hidden;
-  background: var(--bg-secondary, #f8fafc);
+  background: var(--bg-primary, #ffffff);
   position: relative;
 }
 
@@ -909,19 +941,21 @@
 
 /* 设置区块 */
 .ep-settings-section {
-  margin-bottom: 16px;
-  padding: 0 16px;
+  padding: 14px;
+  border-bottom: 1px solid var(--bg-secondary, #f1f5f9);
 }
 
 .ep-section-title {
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 600;
-  color: var(--text-primary, #1e293b);
+  color: var(--text-secondary, #64748b);
+  text-transform: uppercase;
   margin-bottom: 12px;
-  margin-top: 16px;
+  margin-top: 0;
   display: flex;
   align-items: center;
   gap: 6px;
+  letter-spacing: 0.3px;
 }
 
 .ep-section-icon {
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index 50d9ed7e6..3ab13a5f6 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -664,7 +664,7 @@ const EditingPlanner: React.FC = () => {
             onClick={() => handleModeChange(m.key)}
           >
             <span className="ep-mode-icon">{m.icon}</span>
-            <span>{m.label}</span>
+            <span className="ep-mode-label">{m.label}</span>
           </button>
         ))}
       </div>
diff --git a/apps/web/src/pages/editing-planner/components/MediaPanel.tsx b/apps/web/src/pages/editing-planner/components/MediaPanel.tsx
old mode 100644
new mode 100755
index 553eb0b95..a83e96484
--- a/apps/web/src/pages/editing-planner/components/MediaPanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/MediaPanel.tsx
@@ -31,6 +31,11 @@ const MediaPanel: React.FC<MediaPanelProps> = ({
 }) => {
   return (
     <div className="ep-left-panel">
+      {/* 标题栏 */}
+      <div className="ep-left-header">
+        <span className="ep-left-title">📋 已保存模板</span>
+      </div>
+
       {/* 搜索 */}
       <div className="ep-search-wrap ep-media-panel-inner">
         <span className="ep-search-icon">🔍</span>