From 02755953aa17eb2a70b20a3ccccdf13148f27740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=B5=E5=BA=94?= <ci-test@xiaoxia.com>
Date: Mon, 6 Jul 2026 16:45:39 +0800
Subject: [PATCH] =?UTF-8?q?fix(editing-planner):=20=E7=89=87=E6=AE=B5?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AF=B9=E9=BD=90V21=E5=8E=9F=E5=9E=8B=20?=
 =?UTF-8?q?=E2=80=94=20=E8=BD=A8=E9=81=93=E6=9C=AB=E5=B0=BE=E8=99=9A?=
 =?UTF-8?q?=E7=BA=BF+=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除时间线头部「＋ 添加片段」按钮
- 在片段轨道末尾添加虚线边框「+」卡片（60×96px），点击展开素材选择面板
- 一镜到底模式下显示🔒锁定状态，不可点击
- 空轨道提示文案改为「点击右侧 + 添加片段，或拖入素材」
- 修复 voiceover 类型比较导致的 TS 错误
- 完全对齐 UI 原型 epAddSegment 虚线卡设计
---
 .../pages/editing-planner/EditingPlanner.css  | 44 +++++++++
 .../components/TimelinePanel.tsx              | 98 +++++++++----------
 2 files changed, 92 insertions(+), 50 deletions(-)

diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
index 08f81184a..9042b4ae4 100644
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -1011,6 +1011,50 @@
   box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
 }
 
+/* 轨道末尾 "+" 添加卡片 — 对齐 V21 原型虚线 "+" 卡 */
+.ep-track-add-card-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.ep-track-add-card {
+  min-width: 60px;
+  height: 96px;
+  border: 2px dashed var(--line, #e2e8f0);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 24px;
+  color: #94a3b8;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.ep-track-add-card:hover {
+  border-color: var(--primary, #6366f1);
+  color: var(--primary, #6366f1);
+  background: var(--primary-soft, #eef2ff);
+}
+
+.ep-track-add-card.locked {
+  cursor: not-allowed;
+  opacity: 0.5;
+  font-size: 18px;
+}
+
+.ep-track-add-card.locked:hover {
+  border-color: var(--line, #e2e8f0);
+  color: #94a3b8;
+  background: none;
+}
+
+.ep-track-add-card-wrapper > .ep-add-clip-picker {
+  top: calc(100% + 6px);
+  right: 0;
+}
+
 /* 添加片段按钮 + 选择器 */
 .ep-add-clip-wrapper {
   position: relative;
diff --git a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
index 4236150e5..d440f82e3 100755
--- a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
@@ -35,7 +35,6 @@ const ASSET_TYPE_ICONS: Record<string, string> = {
   video: "🎬",
   image: "🖼️",
   audio: "🎵",
-  voiceover: "🎙️",
 };
 
 const MATERIAL_ICONS: Record<string, string> = {
@@ -168,46 +167,6 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
           </span>
         </div>
         <div className="ep-timeline-actions">
-          {/* 添加片段按钮 */}
-          <div className="ep-add-clip-wrapper" ref={pickerRef}>
-            <button
-              className="ep-add-clip-btn"
-              onClick={() => setShowAddPicker(!showAddPicker)}
-              title="添加片段"
-            >
-              ＋ 添加片段
-            </button>
-            {showAddPicker && (
-              <div className="ep-add-clip-picker">
-                <div className="ep-add-clip-picker-title">选择素材添加为片段</div>
-                {mediaAssets.length === 0 ? (
-                  <div className="ep-add-clip-picker-empty">
-                    暂无可用素材，请先在左侧素材面板上传
-                  </div>
-                ) : (
-                  <div className="ep-add-clip-picker-list">
-                    {mediaAssets.map((asset) => (
-                      <button
-                        key={asset.id}
-                        className="ep-add-clip-picker-item"
-                        onClick={() => handlePickAsset(asset)}
-                      >
-                        <span className="ep-add-clip-picker-icon">
-                          {ASSET_TYPE_ICONS[asset.type] || "📁"}
-                        </span>
-                        <span className="ep-add-clip-picker-name">
-                          {asset.name}
-                        </span>
-                        <span className="ep-add-clip-picker-type">
-                          {asset.type}
-                        </span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
           <button
             className="ep-timeline-action-btn"
             onClick={() => {
@@ -265,15 +224,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
         {clips.length === 0 ? (
           <div className="ep-track-empty">
             <div className="ep-track-empty-icon">🎬</div>
-            <div className="ep-track-empty-text">
-              点击下方按钮添加片段，或拖入素材
-            </div>
-            <button
-              className="ep-track-empty-add-btn"
-              onClick={() => setShowAddPicker(!showAddPicker)}
-            >
-              ＋ 添加片段
-            </button>
+            <div className="ep-track-empty-text">点击右侧 + 添加片段，或拖入素材</div>
           </div>
         ) : (
           clips.map((clip, idx) => (
@@ -311,6 +262,53 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
             </div>
           ))
         )}
+
+        {/* ── 轨道末尾 "+" 添加卡片（对齐 V21 原型 epAddSegment） ── */}
+        <div className="ep-track-add-card-wrapper" ref={pickerRef}>
+          <div
+            className={`ep-track-add-card${currentMode === "one_take" ? " locked" : ""}`}
+            onClick={() => {
+              if (currentMode !== "one_take") setShowAddPicker((v) => !v);
+            }}
+            title={currentMode === "one_take" ? "一镜到底模式下不可添加" : "添加片段"}
+          >
+            {currentMode === "one_take" ? "🔒" : "+"}
+          </div>
+
+          {/* 素材选择面板 */}
+          {showAddPicker && (
+            <div className="ep-add-clip-picker">
+              <div className="ep-add-clip-picker-title">选择素材添加为片段</div>
+              {mediaAssets.length === 0 ? (
+                <div className="ep-add-clip-picker-empty">
+                  暂无可用素材，请先在左侧素材库导入
+                </div>
+              ) : (
+                <div className="ep-add-clip-picker-list">
+                  {mediaAssets.map((asset) => (
+                    <button
+                      key={asset.id}
+                      className="ep-add-clip-picker-item"
+                      onClick={() => handlePickAsset(asset)}
+                    >
+                      <span className="ep-add-clip-picker-icon">
+                        {ASSET_TYPE_ICONS[asset.type] || "📁"}
+                      </span>
+                      <span className="ep-add-clip-picker-name">{asset.name}</span>
+                      <span className="ep-add-clip-picker-type">
+                        {asset.type === "image"
+                          ? "图片"
+                          : asset.type === "audio"
+                            ? "音频"
+                            : "视频"}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );