feat(web): P0-5 剪辑计划编辑器V21时间线对齐 - 时间线工具栏+标尺浅色主题化

apps/web/src/pages/editing-planner/EditingPlanner.css

@@ -616,63 +616,79 @@
   border-color: var(--ep-accent, #6c5ce7);
 }
 
-/* ─── 下半部：水平时间线 ─── */
+/* ─── 下半部：水平时间线（V21风格）─── */
 
 .ep-timeline-area {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--ep-bg-dark, #0e0e1a);
+  background: var(--bg-primary, #ffffff);
+  border-top: 1px solid var(--line, #e2e8f0);
+  min-height: 0;
 }
 
 .ep-timeline-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--ep-border, #1f1f30);
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--bg-secondary, #f1f5f9);
+  flex-shrink: 0;
 }
 
 .ep-timeline-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-size: 12px;
   font-weight: 600;
-  color: var(--ep-text-primary, #e8e8f0);
+  color: var(--text-secondary, #64748b);
+}
+
+.ep-timeline-duration {
+  font-size: 12px;
+  color: var(--warning, #f59e0b);
+  font-weight: 600;
 }
 
 .ep-timeline-actions {
   display: flex;
-  gap: 4px;
+  gap: 6px;
 }
 
 .ep-timeline-action-btn {
-  height: 24px;
-  padding: 0 8px;
-  background: var(--ep-bg-card, #13131f);
-  border: 1px solid var(--ep-border, #1f1f30);
-  border-radius: 4px;
-  color: var(--ep-text-secondary, #9ca3af);
-  font-size: 11px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: var(--bg-secondary, #f8fafc);
+  border: 1px solid var(--line, #e2e8f0);
+  border-radius: var(--radius-xs, 8px);
+  color: var(--text-muted, #94a3b8);
+  font-size: 12px;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .ep-timeline-action-btn:hover {
-  border-color: var(--ep-accent, #6c5ce7);
-  color: var(--ep-text-primary, #e8e8f0);
+  border-color: var(--primary, #6366f1);
+  color: var(--primary, #6366f1);
+  background: var(--primary-soft, #eef2ff);
 }
 
 /* 时间标尺 */
 .ep-time-ruler {
-  height: 20px;
-  background: var(--ep-bg-card, #13131f);
-  border-bottom: 1px solid var(--ep-border, #1f1f30);
+  height: 24px;
+  background: var(--bg-secondary, #f8fafc);
+  border-bottom: 1px solid var(--bg-secondary, #f1f5f9);
   display: flex;
-  align-items: center;
-  padding: 0 12px;
+  align-items: flex-end;
+  padding: 0 16px;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .ep-time-ruler-inner {
@@ -685,8 +701,8 @@
 .ep-time-mark {
   position: absolute;
   font-size: 9px;
-  color: var(--ep-text-muted, #4b5563);
-  top: 2px;
+  color: var(--text-muted, #cbd5e1);
+  bottom: 4px;
 }
 
 .ep-time-mark::after {

apps/web/src/pages/editing-planner/components/TimelinePanel.tsx

@@ -121,13 +121,21 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     rulerMarks.push(t);
   }
 
+  const totalDuration = clips.reduce((sum, c) => sum + c.duration, 0);
+  const formatTime = (sec: number) => {
+    const m = Math.floor(sec / 60);
+    const s = Math.floor(sec % 60);
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  };
+
   return (
     <div className="ep-timeline-area">
       {/* 时间线头部 */}
       <div className="ep-timeline-header">
-        <span className="ep-timeline-title">
-          时间线 · {clips.length} 个片段
-        </span>
+        <div className="ep-timeline-title">
+          <span>🎬 时间线</span>
+          <span className="ep-timeline-duration">总时长: {formatTime(totalDuration)}</span>
+        </div>
         <div className="ep-timeline-actions">
           <button
             className="ep-timeline-action-btn"
@@ -139,7 +147,13 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
             }}
             title="删除最后一个片段"
           >
-            ✕ 末尾
+            ↩
+          </button>
+          <button
+            className="ep-timeline-action-btn"
+            title="重做"
+          >
+            ↪
           </button>
         </div>
       </div>