diff --git a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
index 2a2f6f87f..c89dccc9c 100644
--- a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
@@ -10,25 +10,24 @@
  */
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from "react"
 import type { ClipData, ClipType, TrimConfig } from "../types"
-import { TRANSITION_OPTIONS } from "@/api/template-editor"
 import {
-  CLIP_TYPE_ICONS,
-  CLIP_TYPE_LABELS,
   DEFAULT_PIXELS_PER_SECOND,
   MIN_PIXELS_PER_SECOND,
   MAX_PIXELS_PER_SECOND,
   ZOOM_STEP,
-  MIN_CLIP_WIDTH,
-  ADD_PICKER_WIDTH,
-  TRACK_GAP,
   MIN_TRIM_DURATION,
   DEFAULT_ADD_DURATION,
   MIN_ADD_DURATION,
   MAX_ADD_DURATION,
-  MIN_TRACK_WIDTH,
-  getRulerStep,
+  TRACK_GAP,
+  ADD_PICKER_WIDTH,
 } from "../constants/timeline"
-import { formatTime, formatTrimTime, generateRulerMarks } from "../utils/timeline"
+import { formatTime } from "../utils/timeline"
+import { ClipCard } from "./timeline/ClipCard"
+import { TimeRuler } from "./timeline/TimeRuler"
+import { AddClipPicker } from "./timeline/AddClipPicker"
+import { TrimPreview } from "./timeline/TrimPreview"
+import { ContextMenu } from "./timeline/ContextMenu"
 
 interface TimelinePanelProps {
   clips: ClipData[]
@@ -431,10 +430,6 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     setContextMenu(null)
   }, [contextMenu, onClipRemove])
 
-  /* ── 时间标尺 ── */
-  const trackWidth = Math.max(totalDuration * pps, MIN_TRACK_WIDTH)
-  const step = getRulerStep(totalDuration)
-  const rulerMarks = generateRulerMarks(totalDuration, step)
 
   return (
     <div className="ep-timeline-area">
@@ -495,15 +490,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
       {/* 时间标尺 */}
       {currentMode !== "one_take" && (
-        <div className="ep-time-ruler" onClick={handleRulerClick}>
-          <div className="ep-time-ruler-inner" style={{ width: trackWidth }}>
-            {rulerMarks.map((t) => (
-              <span key={t} className="ep-time-mark" style={{ left: `${t * pps}px` }}>
-                {t}s
-              </span>
-            ))}
-          </div>
-        </div>
+        <TimeRuler totalDuration={totalDuration} pps={pps} onClick={handleRulerClick} />
       )}
 
       {/* 水平片段轨道 */}
@@ -525,115 +512,30 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
               <div className="ep-track-empty-text">点击右侧 + 添加片段</div>
             </div>
           ) : (
-            clips.map((clip, idx) => {
-              /* 转场指示器 */
-              const trans = clip.transition
-              const showTransition = idx > 0 && trans && trans.type !== "none"
-              const transOpt = showTransition
-                ? TRANSITION_OPTIONS.find((o) => o.value === trans!.type)
-                : undefined
-
-              /* 速度徽章 */
-              const speed = clip.speed
-              const showSpeed = speed && Math.abs(speed.rate - 1.0) > 0.01
-
-              /* 裁剪状态 */
-              const hasTrim = !!clip.trim_config
-              const isHovered = hoveredClipId === clip.id
-
-              return (
-                <React.Fragment key={clip.id}>
-                  {/* 转场指示器 */}
-                  {showTransition && transOpt && (
-                    <div
-                      className="ep-transition-indicator"
-                      title={`${transOpt.label} · ${trans!.duration.toFixed(1)}s`}
-                    >
-                      <span className="ep-trans-icon">{transOpt.icon}</span>
-                      <span className="ep-trans-duration">{trans!.duration.toFixed(1)}s</span>
-                    </div>
-                  )}
-
-                  <div
-                    className={`ep-clip-card ${selectedClipId === clip.id ? "selected" : ""} ${dragIdx === idx ? "dragging" : ""} ${dragOverIdx === idx ? "drag-over" : ""} ${hasTrim ? "trimmed" : ""}`}
-                    style={{ width: Math.max(clip.duration * pps, MIN_CLIP_WIDTH) }}
-                    draggable={!trimDrag}
-                    onDragStart={(e) => handleDragStart(e, idx)}
-                    onDragOver={(e) => handleDragOver(e, idx)}
-                    onDragEnd={handleDragEnd}
-                    onDrop={(e) => handleDrop(e, idx)}
-                    onClick={() => onClipSelect(clip.id)}
-                    onContextMenu={(e) => handleContextMenu(e, clip.id)}
-                    onMouseEnter={() => setHoveredClipId(clip.id)}
-                    onMouseLeave={() => setHoveredClipId(null)}
-                  >
-                    {/* 左裁剪手柄 */}
-                    {isHovered && onClipTrim && (
-                      <div
-                        className="ep-trim-handle ep-trim-handle-left"
-                        onMouseDown={(e) => handleTrimHandleMouseDown(e, clip.id, "left")}
-                        title="拖动调整入点"
-                      >
-                        <div className="ep-trim-handle-line" />
-                      </div>
-                    )}
-
-                    {/* 类型图标 */}
-                    <div className="ep-clip-thumbnail">{CLIP_TYPE_ICONS[clip.type] || "🎬"}</div>
-
-                    {/* 片段信息 */}
-                    <div className="ep-clip-info">
-                      <span className="ep-clip-name">
-                        {CLIP_TYPE_LABELS[clip.type] || "片段"} {idx + 1}
-                      </span>
-                      <span className="ep-clip-duration">
-                        {clip.duration}s
-                        {hasTrim && (
-                          <span className="ep-trim-indicator" title="已裁剪">
-                            ✂
-                          </span>
-                        )}
-                      </span>
-                    </div>
-
-                    {/* 速度徽章 */}
-                    {showSpeed && <span className="ep-speed-badge">{speed!.rate.toFixed(1)}x</span>}
-
-                    {/* 裁剪徽章 */}
-                    {hasTrim && (
-                      <span
-                        className="ep-trim-badge"
-                        title={`入点 ${clip.trim_config!.start_time.toFixed(1)}s / 出点 ${clip.trim_config!.end_time.toFixed(1)}s`}
-                      >
-                        ✂
-                      </span>
-                    )}
-
-                    {/* 右裁剪手柄 */}
-                    {isHovered && onClipTrim && (
-                      <div
-                        className="ep-trim-handle ep-trim-handle-right"
-                        onMouseDown={(e) => handleTrimHandleMouseDown(e, clip.id, "right")}
-                        title="拖动调整出点"
-                      >
-                        <div className="ep-trim-handle-line" />
-                      </div>
-                    )}
-
-                    {/* 删除按钮 */}
-                    <button
-                      className="ep-clip-remove"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onClipRemove(clip.id)
-                      }}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                </React.Fragment>
-              )
-            })
+            clips.map((clip, idx) => (
+              <ClipCard
+                key={clip.id}
+                clip={clip}
+                idx={idx}
+                isSelected={selectedClipId === clip.id}
+                isDragging={dragIdx === idx}
+                isDragOver={dragOverIdx === idx}
+                isHovered={hoveredClipId === clip.id}
+                pps={pps}
+                trimDragActive={!!trimDrag}
+                showTrimHandles={!!onClipTrim}
+                onDragStart={handleDragStart}
+                onDragOver={handleDragOver}
+                onDragEnd={handleDragEnd}
+                onDrop={handleDrop}
+                onSelect={onClipSelect}
+                onContextMenu={handleContextMenu}
+                onMouseEnter={() => setHoveredClipId(clip.id)}
+                onMouseLeave={() => setHoveredClipId(null)}
+                onTrimHandleMouseDown={handleTrimHandleMouseDown}
+                onRemove={onClipRemove}
+              />
+            ))
           )}
 
           {/* ── 轨道末尾 "+" 添加卡片 ── */}
@@ -652,114 +554,42 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
       {/* 裁剪预览 tooltip */}
       {trimPreview && (
-        <div
-          className="ep-trim-preview"
-          style={{
-            position: "fixed",
-            left: trimPreview.x + 12,
-            top: trimPreview.y - 40,
-          }}
-        >
-          <div className="ep-trim-preview-row">
-            <span className="ep-trim-preview-label">入点</span>
-            <span className="ep-trim-preview-value">{formatTrimTime(trimPreview.startTime)}</span>
-          </div>
-          <div className="ep-trim-preview-row">
-            <span className="ep-trim-preview-label">出点</span>
-            <span className="ep-trim-preview-value">{formatTrimTime(trimPreview.endTime)}</span>
-          </div>
-          <div className="ep-trim-preview-row ep-trim-preview-duration">
-            <span className="ep-trim-preview-label">时长</span>
-            <span className="ep-trim-preview-value">{formatTrimTime(trimPreview.duration)}</span>
-          </div>
-        </div>
+        <TrimPreview
+          startTime={trimPreview.startTime}
+          endTime={trimPreview.endTime}
+          duration={trimPreview.duration}
+          x={trimPreview.x}
+          y={trimPreview.y}
+        />
       )}
 
       {/* 右键菜单 */}
       {contextMenu && (
-        <div
-          ref={contextMenuRef}
-          className="ep-context-menu"
-          style={{
-            position: "fixed",
-            left: contextMenu.x,
-            top: contextMenu.y,
-          }}
-        >
-          <div className="ep-context-menu-item" onClick={handleContextSplit}>
-            <span className="ep-context-menu-icon">✂️</span>
-            <span>分割片段</span>
-          </div>
-          {clips.find((c) => c.id === contextMenu.clipId)?.trim_config && (
-            <div className="ep-context-menu-item" onClick={handleContextResetTrim}>
-              <span className="ep-context-menu-icon">↩️</span>
-              <span>恢复原始长度</span>
-            </div>
-          )}
-          <div className="ep-context-menu-divider" />
-          <div
-            className="ep-context-menu-item ep-context-menu-item-danger"
-            onClick={handleContextDelete}
-          >
-            <span className="ep-context-menu-icon">🗑️</span>
-            <span>删除片段</span>
-          </div>
-        </div>
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          menuRef={contextMenuRef}
+          hasTrim={!!clips.find((c) => c.id === contextMenu.clipId)?.trim_config}
+          onSplit={handleContextSplit}
+          onResetTrim={handleContextResetTrim}
+          onDelete={handleContextDelete}
+        />
       )}
 
       {/* 类型+时长选择面板 */}
       {showAddPicker && (
-        <div
-          ref={pickerRef}
-          className="ep-add-clip-picker ep-add-clip-picker--portal"
-          style={{
-            position: "fixed",
-            top: pickerPos.top,
-            right: pickerPos.right,
-          }}
-        >
-          <div className="ep-add-clip-picker-title">添加片段</div>
-
-          {/* 类型选择 */}
-          <div className="ep-add-clip-type-row">
-            <span className="ep-add-clip-type-label">类型:</span>
-            {availableTypes.map((t) => (
-              <button
-                key={t}
-                className={`ep-add-clip-type-btn${addType === t ? " active" : ""}`}
-                onClick={() => setAddType(t)}
-              >
-                {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
-              </button>
-            ))}
-          </div>
-
-          {/* 时长输入 */}
-          <div className="ep-add-clip-duration-row">
-            <span className="ep-add-clip-type-label">时长:</span>
-            <input
-              type="number"
-              className="ep-duration-input"
-              min={MIN_ADD_DURATION}
-              max={MAX_ADD_DURATION}
-              value={addDuration}
-              onChange={(e) =>
-                setAddDuration(
-                  Math.max(
-                    MIN_ADD_DURATION,
-                    Math.min(MAX_ADD_DURATION, Number(e.target.value) || MIN_ADD_DURATION),
-                  ),
-                )
-              }
-            />
-            <span className="ep-add-clip-duration-unit">秒</span>
-          </div>
-
-          {/* 确认按钮 */}
-          <button className="ep-add-clip-confirm-btn" onClick={handleConfirmAdd}>
-            添加
-          </button>
-        </div>
+        <AddClipPicker
+          pickerRef={pickerRef}
+          position={pickerPos}
+          availableTypes={availableTypes}
+          addType={addType}
+          addDuration={addDuration}
+          minDuration={MIN_ADD_DURATION}
+          maxDuration={MAX_ADD_DURATION}
+          onTypeChange={setAddType}
+          onDurationChange={setAddDuration}
+          onConfirm={handleConfirmAdd}
+        />
       )}
     </div>
   )
diff --git a/apps/web/src/pages/editing-planner/components/timeline/AddClipPicker.tsx b/apps/web/src/pages/editing-planner/components/timeline/AddClipPicker.tsx
new file mode 100644
index 000000000..ecab58aa5
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/timeline/AddClipPicker.tsx
@@ -0,0 +1,80 @@
+import React from "react"
+import type { ClipType } from "../../types"
+import { CLIP_TYPE_ICONS, CLIP_TYPE_LABELS } from "../../constants/timeline"
+
+interface AddClipPickerProps {
+  pickerRef: React.RefObject<HTMLDivElement>
+  position: { top: number; right: number }
+  availableTypes: ClipType[]
+  addType: ClipType
+  addDuration: number
+  onTypeChange: (type: ClipType) => void
+  onDurationChange: (duration: number) => void
+  onConfirm: () => void
+  minDuration?: number
+  maxDuration?: number
+}
+
+export const AddClipPicker: React.FC<AddClipPickerProps> = ({
+  pickerRef,
+  position,
+  availableTypes,
+  addType,
+  addDuration,
+  onTypeChange,
+  onDurationChange,
+  onConfirm,
+  minDuration = 1,
+  maxDuration = 120,
+}) => {
+  return (
+    <div
+      ref={pickerRef}
+      className="ep-add-clip-picker ep-add-clip-picker--portal"
+      style={{
+        position: "fixed",
+        top: position.top,
+        right: position.right,
+      }}
+    >
+      <div className="ep-add-clip-picker-title">添加片段</div>
+
+      {/* 类型选择 */}
+      <div className="ep-add-clip-type-row">
+        <span className="ep-add-clip-type-label">类型:</span>
+        {availableTypes.map((t) => (
+          <button
+            key={t}
+            className={`ep-add-clip-type-btn${addType === t ? " active" : ""}`}
+            onClick={() => onTypeChange(t)}
+          >
+            {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
+          </button>
+        ))}
+      </div>
+
+      {/* 时长输入 */}
+      <div className="ep-add-clip-duration-row">
+        <span className="ep-add-clip-type-label">时长:</span>
+        <input
+          type="number"
+          className="ep-duration-input"
+          min={minDuration}
+          max={maxDuration}
+          value={addDuration}
+          onChange={(e) =>
+            onDurationChange(
+              Math.max(minDuration, Math.min(maxDuration, Number(e.target.value) || minDuration)),
+            )
+          }
+        />
+        <span className="ep-add-clip-duration-unit">秒</span>
+      </div>
+
+      {/* 确认按钮 */}
+      <button className="ep-add-clip-confirm-btn" onClick={onConfirm}>
+        添加
+      </button>
+    </div>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/timeline/ClipCard.tsx b/apps/web/src/pages/editing-planner/components/timeline/ClipCard.tsx
new file mode 100644
index 000000000..a7c402ba7
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/timeline/ClipCard.tsx
@@ -0,0 +1,155 @@
+import React from "react"
+import type { ClipData } from "../../types"
+import { TRANSITION_OPTIONS } from "@/api/template-editor"
+import { CLIP_TYPE_ICONS, CLIP_TYPE_LABELS, MIN_CLIP_WIDTH } from "../../constants/timeline"
+
+interface ClipCardProps {
+  clip: ClipData
+  idx: number
+  isSelected: boolean
+  isDragging: boolean
+  isDragOver: boolean
+  isHovered: boolean
+  pps: number
+  trimDragActive: boolean
+  showTrimHandles: boolean
+  onDragStart: (e: React.DragEvent, idx: number) => void
+  onDragOver: (e: React.DragEvent, idx: number) => void
+  onDragEnd: () => void
+  onDrop: (e: React.DragEvent, idx: number) => void
+  onSelect: (clipId: string) => void
+  onContextMenu: (e: React.MouseEvent, clipId: string) => void
+  onMouseEnter: () => void
+  onMouseLeave: () => void
+  onTrimHandleMouseDown: (e: React.MouseEvent, clipId: string, direction: "left" | "right") => void
+  onRemove: (clipId: string) => void
+}
+
+export const ClipCard: React.FC<ClipCardProps> = ({
+  clip,
+  idx,
+  isSelected,
+  isDragging,
+  isDragOver,
+  isHovered,
+  pps,
+  trimDragActive,
+  showTrimHandles,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onDrop,
+  onSelect,
+  onContextMenu,
+  onMouseEnter,
+  onMouseLeave,
+  onTrimHandleMouseDown,
+  onRemove,
+}) => {
+  /* 转场指示器 */
+  const trans = clip.transition
+  const showTransition = idx > 0 && trans && trans.type !== "none"
+  const transOpt = showTransition
+    ? TRANSITION_OPTIONS.find((o) => o.value === trans!.type)
+    : undefined
+
+  /* 速度徽章 */
+  const speed = clip.speed
+  const showSpeed = speed && Math.abs(speed.rate - 1.0) > 0.01
+
+  /* 裁剪状态 */
+  const hasTrim = !!clip.trim_config
+
+  return (
+    <React.Fragment key={clip.id}>
+      {/* 转场指示器 */}
+      {showTransition && transOpt && (
+        <div
+          className="ep-transition-indicator"
+          title={`${transOpt.label} · ${trans!.duration.toFixed(1)}s`}
+        >
+          <span className="ep-trans-icon">{transOpt.icon}</span>
+          <span className="ep-trans-duration">{trans!.duration.toFixed(1)}s</span>
+        </div>
+      )}
+
+      <div
+        className={`ep-clip-card ${isSelected ? "selected" : ""} ${isDragging ? "dragging" : ""} ${isDragOver ? "drag-over" : ""} ${hasTrim ? "trimmed" : ""}`}
+        style={{ width: Math.max(clip.duration * pps, MIN_CLIP_WIDTH) }}
+        draggable={!trimDragActive}
+        onDragStart={(e) => onDragStart(e, idx)}
+        onDragOver={(e) => onDragOver(e, idx)}
+        onDragEnd={onDragEnd}
+        onDrop={(e) => onDrop(e, idx)}
+        onClick={() => onSelect(clip.id)}
+        onContextMenu={(e) => onContextMenu(e, clip.id)}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {/* 左裁剪手柄 */}
+        {isHovered && showTrimHandles && (
+          <div
+            className="ep-trim-handle ep-trim-handle-left"
+            onMouseDown={(e) => onTrimHandleMouseDown(e, clip.id, "left")}
+            title="拖动调整入点"
+          >
+            <div className="ep-trim-handle-line" />
+          </div>
+        )}
+
+        {/* 类型图标 */}
+        <div className="ep-clip-thumbnail">{CLIP_TYPE_ICONS[clip.type] || "🎬"}</div>
+
+        {/* 片段信息 */}
+        <div className="ep-clip-info">
+          <span className="ep-clip-name">
+            {CLIP_TYPE_LABELS[clip.type] || "片段"} {idx + 1}
+          </span>
+          <span className="ep-clip-duration">
+            {clip.duration}s
+            {hasTrim && (
+              <span className="ep-trim-indicator" title="已裁剪">
+                ✂
+              </span>
+            )}
+          </span>
+        </div>
+
+        {/* 速度徽章 */}
+        {showSpeed && <span className="ep-speed-badge">{speed!.rate.toFixed(1)}x</span>}
+
+        {/* 裁剪徽章 */}
+        {hasTrim && (
+          <span
+            className="ep-trim-badge"
+            title={`入点 ${clip.trim_config!.start_time.toFixed(1)}s / 出点 ${clip.trim_config!.end_time.toFixed(1)}s`}
+          >
+            ✂
+          </span>
+        )}
+
+        {/* 右裁剪手柄 */}
+        {isHovered && showTrimHandles && (
+          <div
+            className="ep-trim-handle ep-trim-handle-right"
+            onMouseDown={(e) => onTrimHandleMouseDown(e, clip.id, "right")}
+            title="拖动调整出点"
+          >
+            <div className="ep-trim-handle-line" />
+          </div>
+        )}
+
+        {/* 删除按钮 */}
+        <button
+          className="ep-clip-remove"
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove(clip.id)
+          }}
+        >
+          ✕
+        </button>
+      </div>
+    </React.Fragment>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/timeline/ContextMenu.tsx b/apps/web/src/pages/editing-planner/components/timeline/ContextMenu.tsx
new file mode 100644
index 000000000..8042aa563
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/timeline/ContextMenu.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+
+interface ContextMenuProps {
+  x: number
+  y: number
+  menuRef: React.RefObject<HTMLDivElement>
+  hasTrim: boolean
+  onSplit: () => void
+  onResetTrim: () => void
+  onDelete: () => void
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({
+  x,
+  y,
+  menuRef,
+  hasTrim,
+  onSplit,
+  onResetTrim,
+  onDelete,
+}) => {
+  return (
+    <div
+      ref={menuRef}
+      className="ep-context-menu"
+      style={{
+        position: "fixed",
+        left: x,
+        top: y,
+      }}
+    >
+      <div className="ep-context-menu-item" onClick={onSplit}>
+        <span className="ep-context-menu-icon">✂️</span>
+        <span>分割片段</span>
+      </div>
+      {hasTrim && (
+        <div className="ep-context-menu-item" onClick={onResetTrim}>
+          <span className="ep-context-menu-icon">↩️</span>
+          <span>恢复原始长度</span>
+        </div>
+      )}
+      <div className="ep-context-menu-divider" />
+      <div className="ep-context-menu-item ep-context-menu-item-danger" onClick={onDelete}>
+        <span className="ep-context-menu-icon">🗑️</span>
+        <span>删除片段</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/timeline/TimeRuler.tsx b/apps/web/src/pages/editing-planner/components/timeline/TimeRuler.tsx
new file mode 100644
index 000000000..5d1588360
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/timeline/TimeRuler.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import { getRulerStep, MIN_TRACK_WIDTH } from "../../constants/timeline"
+import { generateRulerMarks } from "../../utils/timeline"
+
+interface TimeRulerProps {
+  totalDuration: number
+  pps: number
+  onClick: (e: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export const TimeRuler: React.FC<TimeRulerProps> = ({ totalDuration, pps, onClick }) => {
+  const trackWidth = Math.max(totalDuration * pps, MIN_TRACK_WIDTH)
+  const step = getRulerStep(totalDuration)
+  const marks = generateRulerMarks(totalDuration, step)
+
+  return (
+    <div className="ep-time-ruler" onClick={onClick}>
+      <div className="ep-time-ruler-inner" style={{ width: trackWidth }}>
+        {marks.map((t) => (
+          <span key={t} className="ep-time-mark" style={{ left: `${t * pps}px` }}>
+            {t}s
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/timeline/TrimPreview.tsx b/apps/web/src/pages/editing-planner/components/timeline/TrimPreview.tsx
new file mode 100644
index 000000000..84399fb3c
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/timeline/TrimPreview.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import { formatTrimTime } from "../../utils/timeline"
+
+interface TrimPreviewProps {
+  startTime: number
+  endTime: number
+  duration: number
+  x: number
+  y: number
+}
+
+export const TrimPreview: React.FC<TrimPreviewProps> = ({ startTime, endTime, duration, x, y }) => {
+  return (
+    <div
+      className="ep-trim-preview"
+      style={{
+        position: "fixed",
+        left: x + 12,
+        top: y - 40,
+      }}
+    >
+      <div className="ep-trim-preview-row">
+        <span className="ep-trim-preview-label">入点</span>
+        <span className="ep-trim-preview-value">{formatTrimTime(startTime)}</span>
+      </div>
+      <div className="ep-trim-preview-row">
+        <span className="ep-trim-preview-label">出点</span>
+        <span className="ep-trim-preview-value">{formatTrimTime(endTime)}</span>
+      </div>
+      <div className="ep-trim-preview-row ep-trim-preview-duration">
+        <span className="ep-trim-preview-label">时长</span>
+        <span className="ep-trim-preview-value">{formatTrimTime(duration)}</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/test/pages/editing-planner/smoke.test.tsx b/apps/web/src/test/pages/editing-planner/smoke.test.tsx
index 1ef59fc39..ae48d3995 100644
--- a/apps/web/src/test/pages/editing-planner/smoke.test.tsx
+++ b/apps/web/src/test/pages/editing-planner/smoke.test.tsx
@@ -38,6 +38,11 @@ import "@/pages/editing-planner/components/StatusBar"
 import "@/pages/editing-planner/components/StickerPanel"
 import "@/pages/editing-planner/components/SubtitleStylePanel"
 import "@/pages/editing-planner/components/TimelinePanel"
+import "@/pages/editing-planner/components/timeline/ClipCard"
+import "@/pages/editing-planner/components/timeline/TimeRuler"
+import "@/pages/editing-planner/components/timeline/AddClipPicker"
+import "@/pages/editing-planner/components/timeline/TrimPreview"
+import "@/pages/editing-planner/components/timeline/ContextMenu"
 import "@/pages/editing-planner/components/TopBar"
 import "@/pages/editing-planner/components/TransitionSelector"
 import "@/pages/editing-planner/components/TtsPanel"