From fb8eac470aa0ec543aa6ee3198f01ecc9dabe721 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 30 Jul 2026 07:13:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor(TimelinePanel):=20=E6=8A=BD=E5=8F=96?=
 =?UTF-8?q?=20TimelineHeader=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timeline/TimelineHeader.tsx    | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 apps/web/src/pages/editing-planner/components/timeline/TimelineHeader.tsx

diff --git a/apps/web/src/pages/editing-planner/components/timeline/TimelineHeader.tsx b/apps/web/src/pages/editing-planner/components/timeline/TimelineHeader.tsx
new file mode 100644
index 000000000..4951683ff
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/timeline/TimelineHeader.tsx
@@ -0,0 +1,77 @@
+import React from "react"
+import { formatTime } from "../../utils/timeline"
+
+interface TimelineHeaderProps {
+  /** 总时长（秒） */
+  totalDuration: number
+  /** 缩放：每秒像素数 */
+  pps: number
+  /** 缩放变更回调 */
+  onZoomChange?: (pps: number) => void
+  /** 撤销最后一个片段 */
+  onUndoClip?: () => void
+  /** 片段数量 */
+  clipsCount: number
+}
+
+/**
+ * 时间线头部组件
+ * 包含标题、总时长、缩放控件和操作按钮
+ */
+export const TimelineHeader: React.FC<TimelineHeaderProps> = ({
+  totalDuration,
+  pps,
+  onZoomChange,
+  onUndoClip,
+  clipsCount,
+}) => {
+  return (
+    <div className="ep-timeline-header">
+      <div className="ep-timeline-title">
+        <span>🎬 时间线</span>
+        <span className="ep-timeline-duration">总时长: {formatTime(totalDuration)}</span>
+      </div>
+      <div className="ep-timeline-actions">
+        {/* 缩放控件 */}
+        <div className="ep-timeline-zoom">
+          <button
+            className="ep-zoom-btn"
+            onClick={() => onZoomChange?.(Math.max(10, pps - 10))}
+            title="缩小"
+          >
+            −
+          </button>
+          <input
+            type="range"
+            className="ep-zoom-slider"
+            min={10}
+            max={120}
+            step={5}
+            value={pps}
+            onChange={(e) => onZoomChange?.(Number(e.target.value))}
+          />
+          <button
+            className="ep-zoom-btn"
+            onClick={() => onZoomChange?.(Math.min(120, pps + 10))}
+            title="放大"
+          >
+            +
+          </button>
+          <span className="ep-zoom-label">{pps}px/s</span>
+        </div>
+        <button
+          className="ep-timeline-action-btn"
+          onClick={onUndoClip}
+          title="删除最后一个片段"
+          disabled={clipsCount <= 1}
+        >
+          ↩
+        </button>
+        <button className="ep-timeline-action-btn" title="重做">
+          ↪
+        </button>
+      </div>
+    </div>
+  )
+}
+