diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
index 5f5b6b1ab..6891b53a6 100644
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -1,1183 +1,1092 @@
 /**
- * 剪辑计划编辑器 - V21 设计系统样式
- * 三栏布局：素材面板 / 时间线 / 片段属性
- * 统一使用 CSS 变量，支持深色/浅色主题
+ * 剪辑计划编辑器 — V8 原型 1:1 还原样式
+ * 颜色：背景 #0a0a14、主色 #6c5ce7、卡片 #13131f
+ * 布局：4行（顶栏42 + 模式栏48 + 三栏主体flex + 底栏40）
+ * 面板宽度：左220 / 右260
  */
-@import "../../styles/global.css";
 
-/* ============================================================
-   页面容器
-   ============================================================ */
-.ep-page {
+/* ═══════════════════════════════════════
+   根容器 — 全屏四行布局
+   ═══════════════════════════════════════ */
+
+.ep-v8-root {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  background: var(--bg-secondary);
+  height: 100vh;
+  background: #0a0a14;
+  color: #e0e0e0;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 12px;
+  overflow: hidden;
 }
 
-/* ── 顶部工具栏 ─────────────────────────────────────────────── */
-.ep-toolbar {
+/* ═══════════════════════════════════════
+   第1行：顶栏 42px
+   ═══════════════════════════════════════ */
+
+.ep-top-bar {
+  height: 42px;
+  min-height: 42px;
+  background: #161625;
+  border-bottom: 1px solid #222;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-md) var(--space-lg);
-  background: var(--bg-primary);
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
-  gap: var(--space-md);
-  flex-wrap: wrap;
+  padding: 0 16px;
 }
 
-.ep-toolbar-left {
+.ep-top-bar-left {
   display: flex;
   align-items: center;
-  gap: var(--space-md);
+  gap: 8px;
 }
 
-.ep-toolbar-center {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+.ep-logo {
+  font-size: 18px;
 }
 
-.ep-toolbar-template-name {
-  font-size: var(--font-size-sm);
+.ep-app-title {
+  font-size: 14px;
   font-weight: 600;
-  color: var(--text-primary);
-  padding: 4px 12px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
+  color: #fff;
 }
 
-.ep-toolbar-plan-badge {
+.ep-divider {
+  color: #333;
+  margin: 0 4px;
+}
+
+.ep-template-name {
+  color: #888;
   font-size: 12px;
-  font-weight: 600;
-  color: var(--success-color);
-  background: var(--success-soft);
-  border: 1px solid var(--success-border);
-  padding: 2px 8px;
-  border-radius: 999px;
 }
 
-.ep-toolbar-right {
+.ep-top-bar-right {
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
+  gap: 8px;
 }
 
-/* ── 模式切换 — 圆角胶囊样式 ────────────────────────────────── */
-.ep-mode-switch {
-  display: flex;
-  gap: 6px;
-  padding: 4px;
-  background: var(--bg-secondary);
-  border-radius: 999px;
-  border: 1px solid var(--border-color);
-}
-
-.ep-mode-btn {
-  padding: 6px 16px;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
+/* 按钮 */
+.ep-btn {
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-size: 12px;
   font-weight: 500;
+  border: none;
   cursor: pointer;
-  transition: var(--transition-all);
-  white-space: nowrap;
-  user-select: none;
+  transition: all 0.2s;
   display: flex;
   align-items: center;
   gap: 4px;
-  line-height: 1.4;
+}
+
+.ep-btn-primary {
+  background: #6c5ce7;
+  color: #fff;
+}
+
+.ep-btn-primary:hover {
+  background: #7c6cf7;
+}
+
+.ep-btn-secondary {
+  background: #1e1e2e;
+  color: #ccc;
+  border: 1px solid #2a2a4a;
+}
+
+.ep-btn-secondary:hover {
+  background: #2a2a3a;
+  border-color: #6c5ce7;
+}
+
+.ep-btn-sm {
+  padding: 4px 10px;
+  font-size: 11px;
+}
+
+.ep-btn-danger {
+  background: #ff4757;
+  color: #fff;
+}
+
+.ep-btn-danger:hover {
+  background: #ff6b81;
+}
+
+/* ═══════════════════════════════════════
+   第2行：模式栏 48px
+   ═══════════════════════════════════════ */
+
+.ep-mode-bar {
+  height: 48px;
+  min-height: 48px;
+  background: #13131f;
+  border-bottom: 1px solid #222;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 4px;
+}
+
+.ep-mode-btn {
+  position: relative;
+  height: 36px;
+  padding: 0 16px;
+  background: transparent;
+  border: none;
+  color: #888;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 6px;
+  transition: all 0.2s;
 }
 
 .ep-mode-btn:hover {
-  color: var(--primary-color);
-  background: var(--primary-soft);
+  color: #ccc;
+  background: rgba(108, 92, 231, 0.1);
 }
 
 .ep-mode-btn.active {
-  background: var(--primary-soft);
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-  font-weight: 600;
+  color: #6c5ce7;
+  background: rgba(108, 92, 231, 0.15);
 }
 
-/* ============================================================
-   三栏主体布局
-   ============================================================ */
-.ep-body {
-  display: flex;
+.ep-mode-btn.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60%;
+  height: 2px;
+  background: #6c5ce7;
+  border-radius: 1px;
+  transition: all 0.3s ease;
+}
+
+.ep-mode-icon {
+  font-size: 14px;
+}
+
+/* ═══════════════════════════════════════
+   第3行：三栏主体
+   ═══════════════════════════════════════ */
+
+.ep-main-body {
   flex: 1;
+  display: flex;
   overflow: hidden;
   min-height: 0;
 }
 
-/* ── 左侧素材面板 ───────────────────────────────────────────── */
-.ep-left {
-  width: 280px;
-  flex-shrink: 0;
+/* ─── 左栏 220px ─── */
+
+.ep-left-panel {
+  width: 220px;
+  min-width: 220px;
+  background: #0e0e1a;
+  border-right: 1px solid #222;
   display: flex;
   flex-direction: column;
-  background: var(--bg-primary);
-  border-right: 1px solid var(--border-color);
   overflow: hidden;
 }
 
-/* Tab 切换 */
-.ep-left-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
+/* 搜索 */
+.ep-search-wrap {
+  padding: 8px;
 }
 
-.ep-left-tab {
-  flex: 1;
-  padding: 10px 12px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-all);
-  text-align: center;
-  position: relative;
+.ep-search-input {
+  width: 100%;
+  height: 30px;
+  background: #13131f;
+  border: 1px solid #2a2a4a;
+  border-radius: 6px;
+  padding: 0 10px 0 30px;
+  color: #e0e0e0;
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.2s;
 }
 
-.ep-left-tab:hover {
-  color: var(--text-primary);
-  background: var(--bg-secondary);
+.ep-search-input:focus {
+  border-color: #6c5ce7;
 }
 
-.ep-left-tab.active {
-  color: var(--primary-color);
-  font-weight: 600;
-}
-
-.ep-left-tab.active::after {
-  content: "";
+.ep-search-icon {
   position: absolute;
-  bottom: 0;
-  left: 16px;
-  right: 16px;
-  height: 2px;
-  background: var(--primary-color);
-  border-radius: 2px 2px 0 0;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #555;
+  font-size: 12px;
+  pointer-events: none;
 }
 
-.ep-left-header {
-  padding: var(--space-md);
-  border-bottom: 1px solid var(--border-color);
+/* Chip 筛选 */
+.ep-filter-chips {
   display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  flex-shrink: 0;
+  gap: 6px;
+  padding: 0 8px 8px;
+  flex-wrap: wrap;
 }
 
-.ep-left-list {
+.ep-filter-chip {
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  background: #13131f;
+  color: #888;
+  border: 1px solid #2a2a4a;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ep-filter-chip:hover {
+  border-color: #6c5ce7;
+  color: #ccc;
+}
+
+.ep-filter-chip.active {
+  background: #6c5ce7;
+  color: #fff;
+  border-color: #6c5ce7;
+}
+
+/* 模板列表 */
+.ep-template-list {
   flex: 1;
   overflow-y: auto;
-  padding: var(--space-sm);
+  padding: 0 8px 8px;
 }
 
-.ep-left-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-2xl) var(--space-md);
-  text-align: center;
-  color: var(--text-secondary);
+.ep-template-list::-webkit-scrollbar {
+  width: 4px;
 }
 
-.ep-left-empty-icon {
-  font-size: 40px;
-  margin-bottom: var(--space-sm);
-  opacity: 0.5;
+.ep-template-list::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 2px;
 }
 
-.ep-left-empty p {
-  margin: 0;
-  font-size: var(--font-size-sm);
-}
-
-/* 模板卡片 */
 .ep-template-card {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: 12px;
-  margin-bottom: var(--space-sm);
+  background: #13131f;
+  border: 1px solid #222;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 8px;
   cursor: pointer;
-  transition: var(--transition-all);
+  transition: all 0.2s;
 }
 
 .ep-template-card:hover {
-  border-color: var(--primary-color);
-  box-shadow: var(--shadow-sm);
+  border-color: #6c5ce7;
+  background: #1a1a2a;
 }
 
-.ep-template-card.selected {
-  border-color: var(--primary-color);
-  background: var(--primary-soft);
+.ep-template-card.active {
+  border-color: #6c5ce7;
+  background: rgba(108, 92, 231, 0.1);
+}
+
+.ep-template-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
 }
 
 .ep-template-card-name {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 6px;
+  color: #fff;
+}
+
+.ep-template-card-mode {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(108, 92, 231, 0.2);
+  color: #6c5ce7;
+}
+
+.ep-template-card-meta {
+  display: flex;
+  gap: 8px;
+  font-size: 10px;
+  color: #666;
 }
 
 .ep-template-card-tags {
   display: flex;
   gap: 4px;
+  margin-top: 6px;
   flex-wrap: wrap;
 }
 
-.ep-template-card-meta {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-top: 6px;
+.ep-template-tag {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: #1a1a2a;
+  color: #888;
 }
 
-/* 素材卡片（可拖拽） */
-.ep-asset-card {
+/* Loading / Empty */
+.ep-loading,
+.ep-empty {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: var(--space-sm);
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: 10px 12px;
-  margin-bottom: var(--space-sm);
-  cursor: grab;
-  transition: var(--transition-all);
-  user-select: none;
+  justify-content: center;
+  padding: 32px 16px;
+  color: #555;
+  font-size: 12px;
+  gap: 8px;
 }
 
-.ep-asset-card:hover {
-  border-color: var(--primary-color);
-  box-shadow: var(--shadow-sm);
+/* ─── 中栏 flex-1 ─── */
+
+.ep-center-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
 }
 
-.ep-asset-card:active {
-  cursor: grabbing;
-  opacity: 0.7;
-}
-
-.ep-asset-card-icon {
-  font-size: 24px;
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
+/* 上半部：预览 + 封面 (320px) */
+.ep-preview-area {
+  height: 320px;
+  min-height: 280px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
+  gap: 16px;
+  padding: 16px;
+  background: #0a0a14;
+  border-bottom: 1px solid #222;
 }
 
-.ep-asset-card-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.ep-asset-card-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  white-space: nowrap;
+/* 手机模型预览 */
+.ep-phone-preview {
+  width: 150px;
+  height: 267px;
+  background: #000;
+  border-radius: 16px;
+  border: 2px solid #333;
+  position: relative;
   overflow: hidden;
-  text-overflow: ellipsis;
+  flex-shrink: 0;
 }
 
-.ep-asset-card-meta {
-  font-size: 11px;
-  color: var(--text-secondary);
-  margin-top: 2px;
+.ep-phone-status-bar {
+  height: 20px;
+  background: #111;
   display: flex;
   align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 10px;
+  font-size: 9px;
+  color: #666;
 }
 
-.ep-asset-card-tags {
-  display: inline-flex;
-  gap: 3px;
-}
-
-.ep-asset-card-tag {
-  padding: 1px 4px;
-  background: var(--bg-secondary);
-  border-radius: 3px;
-  font-size: 10px;
-}
-
-.ep-asset-card-drag-hint {
-  color: var(--text-secondary);
-  font-size: 16px;
-  opacity: 0.4;
-  flex-shrink: 0;
-  transition: var(--transition-all);
-}
-
-.ep-asset-card:hover .ep-asset-card-drag-hint {
-  opacity: 0.8;
-}
-
-.ep-left-footer {
-  padding: var(--space-sm) var(--space-md);
-  border-top: 1px solid var(--border-color);
-  flex-shrink: 0;
-}
-
-.ep-new-template-btn {
-  width: 100%;
-  padding: 8px;
-  border: 1px dashed var(--border-color);
-  border-radius: var(--radius-md);
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  transition: var(--transition-all);
-}
-
-.ep-new-template-btn:hover {
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-  background: var(--primary-soft);
-}
-
-/* 素材 Tab — AssetSelector 容器 */
-.ep-left-media {
+.ep-phone-content {
   flex: 1;
-  overflow-y: auto;
-  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1a1a2e, #0a0a14);
+  height: calc(100% - 20px);
+  position: relative;
 }
 
-.ep-left-media-footer {
-  padding: var(--space-sm) var(--space-md);
-  border-top: 1px solid var(--border-color);
+.ep-phone-play-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(108, 92, 231, 0.8);
+  border: none;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.ep-phone-play-btn:hover {
+  background: #6c5ce7;
+  transform: scale(1.1);
+}
+
+.ep-phone-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #222;
+}
+
+.ep-phone-progress-fill {
+  height: 100%;
+  background: #6c5ce7;
+  transition: width 0.3s;
+}
+
+.ep-phone-clip-label {
+  position: absolute;
+  bottom: 8px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 9px;
+  color: #888;
+}
+
+/* 封面预览 */
+.ep-cover-preview {
+  width: 150px;
+  height: 267px;
+  background: #13131f;
+  border-radius: 8px;
+  border: 1px solid #2a2a4a;
+  position: relative;
+  overflow: hidden;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* ── 中间时间线 ──────────────────────────────────────────────── */
-.ep-center {
+.ep-cover-image {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #1a1a2e, #13131f);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #555;
+  font-size: 11px;
+}
+
+.ep-cover-label {
+  position: absolute;
+  bottom: 8px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 9px;
+  color: #888;
+}
+
+/* 封面方案按钮（竖排4个） */
+.ep-cover-tags {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ep-cover-tag {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  background: #13131f;
+  color: #888;
+  border: 1px solid #2a2a4a;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.ep-cover-tag:hover {
+  border-color: #6c5ce7;
+  color: #ccc;
+}
+
+.ep-cover-tag.active {
+  background: #6c5ce7;
+  color: #fff;
+  border-color: #6c5ce7;
+}
+
+/* ─── 下半部：水平时间线 ─── */
+
+.ep-timeline-area {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-width: 0;
-  background: var(--bg-primary);
+  background: #0e0e1a;
 }
 
-/* 可视化时长条 */
-.ep-timeline-bar {
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
-}
-
-.ep-timeline-bar-label {
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.ep-timeline-bar-duration {
-  font-weight: 400;
-  color: var(--text-secondary);
-  font-size: 12px;
-}
-
-.ep-timeline-bar-track {
-  display: flex;
-  height: 28px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  gap: 2px;
-}
-
-.ep-timeline-bar-segment {
-  height: 100%;
-  border-radius: 3px;
-  transition: var(--transition-all);
-  min-width: 8px;
-  position: relative;
-}
-
-.ep-timeline-bar-segment:hover {
-  opacity: 0.85;
-  transform: scaleY(1.1);
-}
-
-.ep-timeline-bar-empty {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary);
-  font-size: 12px;
-  opacity: 0.6;
-}
-
-/* 时间线头部 */
 .ep-timeline-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-md) var(--space-lg);
-  flex-shrink: 0;
+  padding: 6px 12px;
+  border-bottom: 1px solid #1a1a2a;
 }
 
-.ep-timeline-header h3 {
-  margin: 0;
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-}
-
-/* 片段列表 */
-.ep-timeline-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 var(--space-lg) var(--space-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-/* 空状态拖放区 */
-.ep-timeline-empty-drop {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-2xl);
-  border: 2px dashed var(--border-color);
-  border-radius: var(--radius-lg);
-  text-align: center;
-  color: var(--text-secondary);
-  transition: var(--transition-all);
-  min-height: 120px;
-}
-
-.ep-timeline-empty-drop.active {
-  border-color: var(--primary-color);
-  background: var(--primary-soft);
-  color: var(--primary-color);
-}
-
-.ep-timeline-empty-drop .ep-timeline-empty-icon {
-  font-size: 40px;
-  margin-bottom: var(--space-sm);
-  opacity: 0.5;
-}
-
-.ep-timeline-empty-drop p {
-  margin: 0 0 4px;
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-}
-
-.ep-timeline-empty-drop span {
+.ep-timeline-title {
   font-size: 12px;
-  opacity: 0.7;
+  font-weight: 600;
+  color: #fff;
 }
 
-/* 拖放指示器 */
-.ep-timeline-drop-indicator {
-  height: 3px;
-  background: var(--primary-color);
-  border-radius: 2px;
-  margin: -2px 0;
-  animation: ep-drop-pulse 0.6s ease infinite alternate;
+.ep-timeline-actions {
+  display: flex;
+  gap: 4px;
 }
 
-@keyframes ep-drop-pulse {
-  from {
-    opacity: 0.6;
-  }
-  to {
-    opacity: 1;
-  }
+.ep-timeline-action-btn {
+  padding: 3px 8px;
+  background: #13131f;
+  border: 1px solid #2a2a4a;
+  border-radius: 4px;
+  color: #888;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-/* 片段卡片 */
-.ep-clip-card {
+.ep-timeline-action-btn:hover {
+  border-color: #6c5ce7;
+  color: #ccc;
+}
+
+/* 时间标尺 */
+.ep-time-ruler {
+  height: 20px;
+  background: #13131f;
+  border-bottom: 1px solid #1a1a2a;
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: 10px 12px;
+  padding: 0 12px;
+  overflow: hidden;
+}
+
+.ep-time-ruler-inner {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  position: relative;
+}
+
+.ep-time-mark {
+  position: absolute;
+  font-size: 9px;
+  color: #555;
+  top: 2px;
+}
+
+.ep-time-mark::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 1px;
+  height: 6px;
+  background: #333;
+}
+
+/* 水平片段轨道 */
+.ep-clip-track {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.ep-clip-track::-webkit-scrollbar {
+  height: 4px;
+}
+
+.ep-clip-track::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 2px;
+}
+
+/* 水平片段卡片 */
+.ep-clip-card {
+  width: 100px;
+  min-width: 100px;
+  height: 100px;
+  background: #13131f;
+  border: 1px solid #222;
+  border-radius: 8px;
   cursor: pointer;
-  transition: var(--transition-all);
-  user-select: none;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
 }
 
 .ep-clip-card:hover {
-  border-color: var(--primary-color);
-  box-shadow: var(--shadow-sm);
+  border-color: #444;
+  transform: translateY(-2px);
 }
 
 .ep-clip-card.selected {
-  border-color: var(--primary-color);
-  background: var(--primary-soft);
-  box-shadow: 0 0 0 1px var(--primary-color);
+  border-color: #6c5ce7;
+  box-shadow: 0 0 8px rgba(108, 92, 231, 0.3);
 }
 
 .ep-clip-card.drag-over {
-  border-color: var(--primary-color);
-  border-style: dashed;
-  background: var(--primary-soft);
+  border-color: #6c5ce7;
+  background: rgba(108, 92, 231, 0.1);
 }
 
-.ep-clip-card[draggable="true"]:active {
-  opacity: 0.6;
-}
-
-.ep-clip-drag {
-  cursor: grab;
-  color: var(--text-secondary);
-  font-size: 16px;
-  user-select: none;
-  flex-shrink: 0;
+.ep-clip-card.dragging {
   opacity: 0.5;
-  transition: var(--transition-all);
 }
 
-.ep-clip-card:hover .ep-clip-drag {
-  opacity: 1;
-}
-
-.ep-clip-drag:active {
-  cursor: grabbing;
-}
-
-.ep-clip-index {
-  width: 26px;
-  height: 26px;
-  border-radius: var(--radius-sm);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
+.ep-clip-thumbnail {
+  height: 56px;
+  background: linear-gradient(135deg, #1a1a2e, #0e0e1a);
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 20px;
   flex-shrink: 0;
 }
 
 .ep-clip-info {
+  padding: 4px 6px;
   flex: 1;
-  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
-.ep-clip-info-top {
+.ep-clip-name {
+  font-size: 10px;
+  color: #ccc;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ep-clip-duration {
+  font-size: 9px;
+  color: #666;
+}
+
+.ep-clip-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(255, 71, 87, 0.8);
+  border: none;
+  color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.ep-clip-card:hover .ep-clip-remove {
+  display: flex;
+}
+
+/* 空轨道 */
+.ep-track-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #444;
+  font-size: 12px;
+  min-height: 100px;
+}
+
+/* 一镜到底提示 */
+.ep-one-take-hint {
+  padding: 4px 12px;
+  background: rgba(255, 165, 2, 0.1);
+  border-bottom: 1px solid rgba(255, 165, 2, 0.2);
+  color: #ffa502;
+  font-size: 11px;
+  text-align: center;
+}
+
+/* ─── 右栏 260px ─── */
+
+.ep-right-panel {
+  width: 260px;
+  min-width: 260px;
+  background: #0e0e1a;
+  border-left: 1px solid #222;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.ep-right-panel::-webkit-scrollbar {
+  width: 4px;
+}
+
+.ep-right-panel::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 2px;
+}
+
+/* 设置区块 */
+.ep-settings-section {
+  margin-bottom: 16px;
+}
+
+.ep-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 6px;
+}
+
+.ep-section-icon {
+  font-size: 14px;
+}
+
+/* 表单字段 */
+.ep-field {
+  margin-bottom: 8px;
+}
+
+.ep-field-label {
+  display: block;
+  font-size: 11px;
+  color: #888;
   margin-bottom: 4px;
 }
 
-.ep-clip-type-icon {
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.ep-clip-script {
-  font-size: 13px;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.ep-clip-script-empty {
-  color: var(--text-secondary);
-  font-style: italic;
-  opacity: 0.6;
-}
-
-.ep-clip-info-bottom {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.ep-clip-duration-bar {
-  flex: 1;
-  height: 4px;
-  background: var(--bg-secondary);
-  border-radius: 2px;
-  overflow: hidden;
-  max-width: 100px;
-}
-
-.ep-clip-duration-fill {
-  height: 100%;
-  border-radius: 2px;
-  transition: width 0.2s ease;
-}
-
-.ep-clip-duration-text {
+.ep-form-input,
+.ep-form-select {
+  width: 100%;
+  height: 28px;
+  background: #13131f;
+  border: 1px solid #2a2a4a;
+  border-radius: 4px;
+  padding: 0 8px;
+  color: #e0e0e0;
   font-size: 11px;
-  color: var(--text-secondary);
-  font-weight: 600;
-  white-space: nowrap;
+  outline: none;
+  transition: border-color 0.2s;
 }
 
-.ep-clip-asset-badge {
-  font-size: 12px;
-  opacity: 0.7;
+.ep-form-input:focus,
+.ep-form-select:focus {
+  border-color: #6c5ce7;
 }
 
-.ep-clip-transition-badge {
-  font-size: 10px;
-  color: var(--primary-color);
-  background: var(--primary-soft);
-  padding: 1px 6px;
-  border-radius: 999px;
-  white-space: nowrap;
-}
-
-.ep-clip-actions {
-  flex-shrink: 0;
-}
-
-.ep-clip-action-btn {
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 14px;
+.ep-form-select {
   cursor: pointer;
-  border-radius: var(--radius-sm);
+}
+
+/* Toggle 开关 */
+.ep-toggle-row {
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: var(--transition-all);
-  opacity: 0;
+  justify-content: space-between;
+  margin-bottom: 8px;
 }
 
-.ep-clip-card:hover .ep-clip-action-btn {
-  opacity: 1;
+.ep-toggle-label {
+  font-size: 11px;
+  color: #888;
 }
 
-.ep-clip-action-btn:hover {
-  background: var(--error-soft);
-  color: var(--error-color);
+.ep-toggle {
+  width: 36px;
+  height: 20px;
+  background: #2a2a4a;
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s;
 }
 
-/* ============================================================
-   右侧片段属性面板
-   ============================================================ */
-.ep-right {
-  width: 300px;
-  flex-shrink: 0;
+.ep-toggle.active {
+  background: #6c5ce7;
+}
+
+.ep-toggle-knob {
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: left 0.2s;
+}
+
+.ep-toggle.active .ep-toggle-knob {
+  left: 18px;
+}
+
+/* 滑块 */
+.ep-slider-row {
   display: flex;
-  flex-direction: column;
-  background: var(--bg-primary);
-  border-left: 1px solid var(--border-color);
-  overflow-y: auto;
-}
-
-.ep-right-section {
-  padding: var(--space-md);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.ep-right-section:last-child {
-  border-bottom: none;
-}
-
-.ep-right-section h3 {
-  margin: 0 0 var(--space-md);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-}
-
-/* 空状态 */
-.ep-clip-props-empty {
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: var(--space-2xl);
-  text-align: center;
-  color: var(--text-secondary);
+  gap: 8px;
+}
+
+.ep-slider {
   flex: 1;
+  -webkit-appearance: none;
+  height: 4px;
+  background: #2a2a4a;
+  border-radius: 2px;
+  outline: none;
 }
 
-.ep-clip-props-empty-icon {
-  font-size: 48px;
-  margin-bottom: var(--space-md);
-  opacity: 0.4;
+.ep-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  background: #6c5ce7;
+  border-radius: 50%;
+  cursor: pointer;
 }
 
-.ep-clip-props-empty h3 {
-  margin: 0 0 4px;
-  font-size: var(--font-size-base);
-  color: var(--text-primary);
+.ep-slider-value {
+  font-size: 11px;
+  color: #888;
+  min-width: 30px;
+  text-align: right;
 }
 
-.ep-clip-props-empty p {
-  margin: 0;
-  font-size: var(--font-size-sm);
-}
-
-.ep-clip-props-summary {
-  margin-top: var(--space-lg);
+/* 样式按钮组 */
+.ep-style-btns {
   display: flex;
-  gap: var(--space-lg);
-}
-
-.ep-clip-props-summary-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   gap: 4px;
 }
 
-.ep-clip-props-summary-label {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.ep-clip-props-summary-value {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-/* 片段信息头 */
-.ep-clip-props-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.ep-clip-props-header-icon {
-  font-size: 28px;
-}
-
-.ep-clip-props-header h3 {
-  margin: 0 0 2px;
-  font-size: var(--font-size-base);
-}
-
-.ep-clip-props-header-type {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-/* 字段 */
-.ep-clip-props-field {
-  margin-bottom: var(--space-sm);
-}
-
-.ep-clip-props-field:last-child {
-  margin-bottom: 0;
-}
-
-.ep-clip-props-field-hint {
-  font-size: 11px;
-  color: var(--text-secondary);
-  text-align: right;
-  margin-top: 4px;
-}
-
-.ep-clip-props-label {
-  display: block;
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-}
-
-/* 文案文本框 */
-.ep-clip-props-textarea {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-family: inherit;
-  resize: vertical;
-  transition: var(--transition-all);
-  line-height: 1.5;
-}
-
-.ep-clip-props-textarea:focus {
-  outline: none;
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--primary-soft);
-}
-
-.ep-clip-props-textarea::placeholder {
-  color: var(--text-secondary);
-  opacity: 0.6;
-}
-
-/* 时长控制 */
-.ep-clip-props-duration-control {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.ep-clip-props-range {
-  flex: 1;
-  height: 4px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: var(--bg-secondary);
-  border-radius: 2px;
-  outline: none;
-}
-
-.ep-clip-props-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--primary-color);
-  cursor: pointer;
-  border: 2px solid var(--bg-primary);
-  box-shadow: var(--shadow-sm);
-}
-
-.ep-clip-props-range::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--primary-color);
-  cursor: pointer;
-  border: 2px solid var(--bg-primary);
-  box-shadow: var(--shadow-sm);
-}
-
-.ep-clip-props-duration-value {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  min-width: 36px;
-  text-align: right;
-}
-
-/* 转场效果网格 */
-.ep-clip-props-transition-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-}
-
-.ep-clip-props-transition-btn {
-  padding: 6px 8px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
+.ep-style-btn {
+  width: 28px;
+  height: 28px;
+  background: #13131f;
+  border: 1px solid #2a2a4a;
+  border-radius: 4px;
+  color: #888;
   font-size: 12px;
   cursor: pointer;
-  transition: var(--transition-all);
-  text-align: center;
-}
-
-.ep-clip-props-transition-btn:hover {
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-}
-
-.ep-clip-props-transition-btn.active {
-  background: var(--primary-soft);
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-  font-weight: 600;
-}
-
-/* 关联素材 */
-.ep-clip-props-asset-linked {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: 8px 12px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-color);
-}
-
-.ep-clip-props-asset-icon {
-  font-size: 20px;
-}
-
-.ep-clip-props-asset-name {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ep-clip-props-asset-unlink {
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s;
+}
+
+.ep-style-btn:hover {
+  border-color: #6c5ce7;
+  color: #ccc;
+}
+
+.ep-style-btn.active {
+  background: rgba(108, 92, 231, 0.2);
+  border-color: #6c5ce7;
+  color: #6c5ce7;
+}
+
+/* AI推荐按钮 */
+.ep-ai-recommend-btn {
+  width: 100%;
+  padding: 8px;
+  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
+  border: none;
+  border-radius: 6px;
+  color: #fff;
   font-size: 12px;
-  transition: var(--transition-all);
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 8px;
 }
 
-.ep-clip-props-asset-unlink:hover {
-  background: var(--error-soft);
-  color: var(--error-color);
+.ep-ai-recommend-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
 }
 
-.ep-clip-props-asset-empty {
+/* 片段详情卡片 */
+.ep-clip-detail {
+  background: #13131f;
+  border: 1px solid #2a2a4a;
+  border-radius: 8px;
   padding: 12px;
+}
+
+.ep-clip-detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.ep-clip-detail-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.ep-clip-detail-type {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(108, 92, 231, 0.2);
+  color: #6c5ce7;
+}
+
+.ep-clip-detail-field {
+  margin-bottom: 8px;
+}
+
+.ep-clip-detail-label {
+  font-size: 10px;
+  color: #666;
+  margin-bottom: 3px;
+}
+
+.ep-clip-detail-value {
+  font-size: 11px;
+  color: #ccc;
+}
+
+.ep-clip-detail-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ep-duration-input {
+  width: 60px;
+  height: 24px;
+  background: #0a0a14;
+  border: 1px solid #2a2a4a;
+  border-radius: 4px;
+  padding: 0 6px;
+  color: #e0e0e0;
+  font-size: 11px;
+  outline: none;
   text-align: center;
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  border: 1px dashed var(--border-color);
 }
 
-.ep-clip-props-asset-empty p {
-  margin: 0;
+.ep-duration-input:focus {
+  border-color: #6c5ce7;
 }
 
-/* ============================================================
-   保存 / 生成弹窗
-   ============================================================ */
+/* ═══════════════════════════════════════
+   第4行：底栏 40px
+   ═══════════════════════════════════════ */
+
+.ep-status-bar {
+  height: 40px;
+  min-height: 40px;
+  background: #161625;
+  border-top: 1px solid #222;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  font-size: 11px;
+  color: #888;
+}
+
+.ep-status-left,
+.ep-status-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ep-status-sep {
+  color: #333;
+}
+
+/* ═══════════════════════════════════════
+   弹窗补充样式
+   ═══════════════════════════════════════ */
+
 .ep-modal-field {
-  margin-bottom: var(--space-md);
-}
-
-.ep-modal-field:last-child {
-  margin-bottom: 0;
+  margin-bottom: 12px;
 }
 
 .ep-modal-field label {
   display: block;
-  margin-bottom: 6px;
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 4px;
 }
 
 .ep-modal-info {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: 10px 14px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  margin-bottom: var(--space-md);
+  padding: 8px 12px;
+  background: #13131f;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #888;
+  margin-top: 8px;
 }
 
-.ep-modal-info strong {
-  color: var(--text-primary);
-}
-
-/* ============================================================
-   简易 Toast 提示
-   ============================================================ */
-.ep-toast {
-  position: fixed;
-  top: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 10px 24px;
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  z-index: 1000;
-  animation: ep-toast-in 0.3s ease;
-  pointer-events: none;
-  box-shadow: var(--shadow-md);
-}
-
-.ep-toast--success {
-  background: var(--success-soft);
-  color: var(--success-color);
-  border: 1px solid var(--success-border);
-}
-
-.ep-toast--error {
-  background: var(--error-soft);
-  color: var(--error-color);
-  border: 1px solid var(--error-border);
-}
-
-.ep-toast--warning {
-  background: var(--warning-soft);
-  color: var(--warning-color);
-  border: 1px solid var(--warning-border);
-}
-
-@keyframes ep-toast-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-/* ============================================================
-   响应式
-   ============================================================ */
-@media (max-width: 1200px) {
-  .ep-right {
-    width: 260px;
-  }
-
-  .ep-left {
-    width: 240px;
-  }
-}
-
-@media (max-width: 900px) {
-  .ep-body {
-    flex-direction: column;
-  }
-
-  .ep-left,
-  .ep-right {
-    width: 100%;
-    max-height: 220px;
-    border-right: none;
-    border-left: none;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .ep-right {
-    border-bottom: none;
-    border-top: 1px solid var(--border-color);
-  }
-
-  .ep-toolbar {
-    flex-wrap: wrap;
-    gap: var(--space-sm);
-  }
-
-  .ep-mode-switch {
-    order: 3;
-    width: 100%;
-    justify-content: center;
-  }
-}
-
-@media (max-width: 768px) {
-  .ep-left,
-  .ep-right {
-    max-height: 180px;
-  }
-
-  .ep-timeline-bar {
-    padding: var(--space-sm) var(--space-md);
-  }
-
-  .ep-timeline-header {
-    padding: var(--space-sm) var(--space-md);
-  }
-
-  .ep-timeline-list {
-    padding: 0 var(--space-md) var(--space-md);
-  }
-
-  .ep-clip-props-transition-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 480px) {
-  .ep-toolbar {
-    padding: var(--space-sm) var(--space-md);
-  }
-
-  .ep-mode-btn {
-    padding: 4px 12px;
-    font-size: var(--font-size-xs);
-  }
-
-  .ep-clip-card {
-    padding: 8px 10px;
-    gap: 6px;
-  }
-
-  .ep-asset-card {
-    padding: 8px 10px;
-  }
-}
-
-/* ============================================================
-   生成进度弹窗 — 任务 2.17
-   ============================================================ */
-
-/* ── setup 阶段 ─────────────────────────────────────────────── */
-
+/* 生成弹窗 */
 .ep-gen-setup {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
+  padding: 8px 0;
 }
 
 .ep-gen-field-label {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: -4px;
+  display: block;
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 6px;
+}
+
+.ep-gen-duration-input {
+  width: 100%;
+  height: 32px;
+  background: #13131f;
+  border: 1px solid #2a2a4a;
+  border-radius: 6px;
+  padding: 0 10px;
+  color: #e0e0e0;
+  font-size: 13px;
+  outline: none;
+  margin-bottom: 12px;
+}
+
+.ep-gen-duration-input:focus {
+  border-color: #6c5ce7;
 }
 
 .ep-gen-estimate {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: #888;
   padding: 8px 12px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
+  background: #13131f;
+  border-radius: 6px;
 }
 
-.ep-gen-estimate strong {
-  color: var(--primary-color);
-  font-weight: 600;
-}
-
-/* ── progress 阶段 ──────────────────────────────────────────── */
-
 .ep-gen-progress {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-lg) 0;
+  padding: 16px 0;
+  gap: 16px;
 }
 
 .ep-gen-progress-ring-wrap {
@@ -1194,7 +1103,7 @@
 
 .ep-gen-progress-ring-bg {
   fill: none;
-  stroke: var(--border-color);
+  stroke: #2a2a4a;
   stroke-width: 8;
 }
 
@@ -1202,9 +1111,7 @@
   fill: none;
   stroke-width: 8;
   stroke-linecap: round;
-  transition:
-    stroke-dashoffset 0.5s ease,
-    stroke 0.3s ease;
+  transition: stroke-dashoffset 0.5s ease, stroke 0.3s;
 }
 
 .ep-gen-progress-pct {
@@ -1214,20 +1121,17 @@
   transform: translate(-50%, -50%);
   font-size: 24px;
   font-weight: 700;
-  font-family: var(--font-mono, monospace);
 }
 
 .ep-gen-step-text {
-  font-size: var(--font-size-base);
-  color: var(--text-primary);
-  font-weight: 500;
-  text-align: center;
+  font-size: 14px;
+  color: #ccc;
 }
 
 .ep-gen-progress-bar {
   width: 100%;
   height: 6px;
-  background: var(--bg-secondary);
+  background: #2a2a4a;
   border-radius: 3px;
   overflow: hidden;
 }
@@ -1235,58 +1139,43 @@
 .ep-gen-progress-bar-fill {
   height: 100%;
   border-radius: 3px;
-  transition:
-    width 0.5s ease,
-    background-color 0.3s ease;
+  transition: width 0.5s ease;
 }
 
 .ep-gen-task-id {
-  font-size: var(--font-size-xs);
-  color: var(--text-muted, #9ca3af);
-  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+  color: #555;
 }
 
-/* ── 结果阶段（completed / failed）──────────────────────────── */
-
 .ep-gen-result {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-lg) 0;
-  text-align: center;
+  padding: 24px 0;
+  gap: 12px;
 }
 
 .ep-gen-result-icon {
   font-size: 48px;
-  line-height: 1;
 }
 
 .ep-gen-result-title {
-  font-size: var(--font-size-lg);
+  font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: #fff;
 }
 
 .ep-gen-result-msg {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  max-width: 320px;
-  line-height: 1.5;
+  font-size: 12px;
+  color: #888;
 }
 
 .ep-gen-result-msg--error {
-  color: var(--error-color, #ef4444);
-}
-
-.ep-gen-result-count {
-  font-size: var(--font-size-sm);
-  color: var(--success-color, #10b981);
-  font-weight: 500;
+  color: #ff4757;
 }
 
 .ep-gen-result-actions {
   display: flex;
-  gap: var(--space-sm);
-  margin-top: var(--space-sm);
+  gap: 8px;
+  margin-top: 8px;
 }
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index c9df24ec2..39e71dd14 100644
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -1,638 +1,565 @@
 /**
- * 剪辑计划编辑器 — V21 设计系统（完整版）
- * 任务 2.14：三栏布局 — 素材面板 / 时间线 / 片段属性
- * 支持拖拽排序、素材关联、转场编辑、剪辑计划 CRUD
+ * 剪辑计划编辑器 — V8 原型 1:1 还原
+ * 四行布局：顶栏(42px) → 模式栏(48px) → 三栏主体 → 底栏(40px)
  */
-import React, { useState, useEffect, useCallback } from "react";
-import "./EditingPlanner.css";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button } from "@/components/ui";
+import React, { useState, useCallback, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
-import {
-  getEditingTemplates,
-  getTemplateCategories,
-  createEditingTemplate,
-  updateEditingTemplate,
-  MODE_LABELS,
-  type EditingTemplate,
-  type TemplateMode,
-  type SaveTemplatePayload,
+// 简易消息工具（UI 库未导出 message）
+const msg = {
+  success: (s: string) => console.log(`✅ ${s}`),
+  error: (s: string) => console.error(`❌ ${s}`),
+  warning: (s: string) => console.warn(`⚠️ ${s}`),
+  info: (s: string) => console.info(`ℹ️ ${s}`),
+};
+import type {
+  EditingTemplate,
+  TemplateCategory,
+  TemplateMode,
+  SaveTemplatePayload,
 } from "@/api/editingPlanner";
 import {
-  createEditPlan,
-  updateEditPlan,
-  type EditPlanClip,
-  type MediaAsset,
-} from "@/api/editPlans";
-import {
-  createGenerationTask,
-  getTask,
-  retryTask,
-  type TaskItem,
-} from "@/api/tasks";
+  getEditingTemplates,
+  getEditingTemplate,
+  updateEditingTemplate,
+  getTemplateCategories,
+  generateFromTemplate,
+  MODE_LABELS,
+} from "@/api/editingPlanner";
+import type { EditPlanClip, MediaAsset } from "@/api/editPlans";
+import { getMediaAssets, MATERIAL_TYPE_LABELS } from "@/api/editPlans";
+import type { TaskItem } from "@/api/tasks";
+import { createGenerationTask, getTask, retryTask } from "@/api/tasks";
 
-/* ── 子组件 ── */
 import MediaPanel from "./components/MediaPanel";
+import PreviewPlayer from "./components/PreviewPlayer";
 import TimelinePanel from "./components/TimelinePanel";
 import ClipPropertiesPanel from "./components/ClipPropertiesPanel";
-import PreviewPlayer from "./components/PreviewPlayer";
 import SaveModal from "./components/SaveModal";
-import GenerationProgressModal, {
-  type GenPhase,
-} from "./components/GenerationProgressModal";
+import GenerationProgressModal from "./components/GenerationProgressModal";
+import type { GenPhase } from "./components/GenerationProgressModal";
+import "./EditingPlanner.css";
+
+/* ──────────── 类型 ──────────── */
+
+interface ClipData extends EditPlanClip {
+  name: string;
+  thumbnail?: string;
+  assetName?: string;
+}
 
 /* ──────────── 常量 ──────────── */
 
-let _clipId = 0;
-const newClipId = () => `clip-new-${++_clipId}`;
+const MODE_LIST: { key: TemplateMode; label: string; icon: string }[] = [
+  { key: "pip", label: "画中画", icon: "🖼️" },
+  { key: "voice_over", label: "人物口播", icon: "🎙️" },
+  { key: "one_take", label: "一镜到底", icon: "🎥" },
+  { key: "voice_pip", label: "口播+画中画", icon: "🎭" },
+];
 
-let _segId = 0;
-const newSegId = () => `seg-new-${++_segId}`;
+const COVER_SCHEMES = [
+  { key: "ai_frame", label: "AI选帧" },
+  { key: "manual", label: "手动选" },
+  { key: "upload", label: "上传" },
+  { key: "ai_reselect", label: "AI重选" },
+];
 
-/* ──────────── 简易 Toast ──────────── */
-type ToastType = "success" | "error" | "warning";
-
-const useToast = () => {
-  const [toast, setToast] = useState<{
-    message: string;
-    type: ToastType;
-  } | null>(null);
-
-  const show = useCallback((message: string, type: ToastType = "success") => {
-    setToast({ message, type });
-    setTimeout(() => setToast(null), 2500);
-  }, []);
-
-  const ToastNode = toast ? (
-    <div className={`ep-toast ep-toast--${toast.type}`}>{toast.message}</div>
-  ) : null;
-
-  return { show, ToastNode };
-};
+const FILTER_CATEGORIES = ["全部", "种草", "知识", "日常", "推荐"];
 
 /* ──────────── 组件 ──────────── */
 
 const EditingPlanner: React.FC = () => {
-  const queryClient = useQueryClient();
   const [searchParams] = useSearchParams();
-  const { show: showToast, ToastNode } = useToast();
+  const urlTemplateId = searchParams.get("templateId") || "";
 
-  /* ── URL 参数 ── */
-  const urlTemplateId = searchParams.get("template");
-  const urlGenerate = searchParams.get("generate");
-
-  /* ── 数据查询：模板 ── */
-  const { data: templates = [], isLoading: tplLoading } = useQuery<
-    EditingTemplate[]
-  >({
-    queryKey: ["editing-templates"],
-    queryFn: () => getEditingTemplates(),
-  });
-
-  const { data: categories = [] } = useQuery({
-    queryKey: ["template-categories"],
-    queryFn: getTemplateCategories,
-  });
-
-  /* ── 编辑器状态 ── */
+  /* ── 模板列表 ── */
+  const [templates, setTemplates] = useState<EditingTemplate[]>([]);
+  const [categories, setCategories] = useState<TemplateCategory[]>([]);
+  const [loadingTemplates, setLoadingTemplates] = useState(false);
+  const [loadedTemplateId, setLoadedTemplateId] = useState<string | null>(
+    urlTemplateId || null,
+  );
   const [currentMode, setCurrentMode] = useState<TemplateMode>("pip");
-  const [clips, setClips] = useState<EditPlanClip[]>([
-    {
-      id: newClipId(),
-      template_segment_id: newSegId(),
-      material_type: "video",
-      script_text: "",
-      duration: 10,
-      transition: { type: "none", duration: 0 },
-      order: 0,
-    },
-  ]);
-  const [selectedClipId, setSelectedClipId] = useState<string | null>(null);
-  const [loadedTemplateId, setLoadedTemplateId] = useState<string | null>(null);
-  const [editPlanId, setEditPlanId] = useState<string | null>(null);
 
-  /* ── UI 状态 ── */
+  /* ── 片段 ── */
+  const [clips, setClips] = useState<ClipData[]>([]);
+  const [selectedClipId, setSelectedClipId] = useState<string | null>(null);
+
+  /* ── 封面方案 ── */
+  const [currentCoverScheme, setCurrentCoverScheme] =
+    useState<string>("ai_frame");
+
+  /* ── 左栏筛选 ── */
+  const [currentFilter, setCurrentFilter] = useState("全部");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  /* ── 标题/字幕/BGM 设置 ── */
+  const [titleSettings, setTitleSettings] = useState({
+    aiAutoSelect: true,
+    title: "",
+    position: "top",
+    font: "思源黑体",
+    size: 24,
+    bold: false,
+    italic: false,
+    stroke: true,
+    shadow: true,
+  });
+
+  const [subtitleSettings, setSubtitleSettings] = useState({
+    enabled: true,
+    position: "bottom",
+    font: "思源黑体",
+    size: 16,
+    animation: "none",
+  });
+
+  const [bgmSettings, setBgmSettings] = useState({
+    music: "none",
+  });
+
+  /* ── 保存弹窗 ── */
   const [saveModalOpen, setSaveModalOpen] = useState(false);
-  const [generateModalOpen, setGenerateModalOpen] = useState(false);
-  const [genPhase, setGenPhase] = useState<GenPhase>("setup");
-  const [taskId, setTaskId] = useState<string | null>(null);
   const [draftName, setDraftName] = useState("");
   const [draftCategory, setDraftCategory] = useState("");
   const [draftTags, setDraftTags] = useState("");
+  const [saveLoading, setSaveLoading] = useState(false);
+
+  /* ── 生成弹窗 ── */
+  const [genModalOpen, setGenModalOpen] = useState(false);
+  const [genPhase, setGenPhase] = useState<GenPhase>("setup");
+  const [genTask, setGenTask] = useState<TaskItem | null>(null);
+  const [genSubmitting, setGenSubmitting] = useState(false);
   const [voiceoverDuration, setVoiceoverDuration] = useState<number | null>(
     null,
   );
 
-  /* ── 自动加载 URL 指定的模板 ── */
-  useEffect(() => {
-    if (urlTemplateId && templates.length > 0 && !loadedTemplateId) {
-      const tpl = templates.find((t) => t.id === urlTemplateId);
-      if (tpl) {
-        loadTemplate(tpl);
-        if (urlGenerate === "1") {
-          setGenerateModalOpen(true);
-        }
-      }
+  /* ── 素材库 ── */
+  const [mediaAssets, setMediaAssets] = useState<MediaAsset[]>([]);
+
+  /* ── 播放 ── */
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  /* ──────────── 加载 ──────────── */
+
+  const loadTemplates = useCallback(async () => {
+    setLoadingTemplates(true);
+    try {
+      const [tpls, cats, assets] = await Promise.all([
+        getEditingTemplates(),
+        getTemplateCategories(),
+        getMediaAssets(),
+      ]);
+      setTemplates(tpls);
+      setCategories(cats);
+      setMediaAssets(assets);
+    } catch {
+      msg.error("加载模板失败");
+    } finally {
+      setLoadingTemplates(false);
     }
-  }, [urlTemplateId, templates, loadedTemplateId, urlGenerate]);
+  }, []);
 
-  /* ── Mutations：模板 ── */
-  const createMutation = useMutation({
-    mutationFn: createEditingTemplate,
-    onSuccess: () => {
-      showToast("模板已保存", "success");
-      queryClient.invalidateQueries({ queryKey: ["editing-templates"] });
-      setSaveModalOpen(false);
-    },
-    onError: (err: unknown) => {
-      if (!(err as { __msgShown?: boolean })?.__msgShown)
-        showToast("保存失败", "error");
-    },
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: SaveTemplatePayload }) =>
-      updateEditingTemplate(id, data),
-    onSuccess: () => {
-      showToast("模板已更新", "success");
-      queryClient.invalidateQueries({ queryKey: ["editing-templates"] });
-      setSaveModalOpen(false);
-    },
-    onError: (err: unknown) => {
-      if (!(err as { __msgShown?: boolean })?.__msgShown)
-        showToast("保存失败", "error");
-    },
-  });
-
-  /* ── Mutations：剪辑计划 ── */
-  const savePlanMutation = useMutation({
-    mutationFn: createEditPlan,
-    onSuccess: (plan) => {
-      showToast("剪辑计划已保存", "success");
-      setEditPlanId(plan.id);
-      setSaveModalOpen(false);
-    },
-    onError: () => showToast("保存失败", "error"),
-  });
-
-  const updatePlanMutation = useMutation({
-    mutationFn: ({
-      id,
-      data,
-    }: {
-      id: string;
-      data: {
-        name?: string;
-        config?: Record<string, unknown>;
-        total_duration?: number;
-      };
-    }) => updateEditPlan(id, data),
-    onSuccess: () => {
-      showToast("剪辑计划已更新", "success");
-    },
-    onError: () => showToast("更新失败", "error"),
-  });
-
-  /* ── 任务轮询 ── */
-  const { data: taskData } = useQuery<TaskItem>({
-    queryKey: ["task", taskId],
-    queryFn: () => getTask(taskId!),
-    enabled: !!taskId && genPhase === "progress",
-    refetchInterval: (query) => {
-      const data = query.state.data;
-      if (!data) return 2000;
-      // 终态停止轮询
-      if (data.status === "completed" || data.status === "failed") return false;
-      return 2000;
-    },
-  });
-
-  /* 监听任务状态变化，自动切换阶段 */
   useEffect(() => {
-    if (!taskData) return;
-    if (taskData.status === "completed") {
-      setGenPhase("completed");
-    } else if (taskData.status === "failed") {
-      setGenPhase("failed");
-    }
-  }, [taskData]);
+    loadTemplates();
+  }, [loadTemplates]);
 
-  const generateMutation = useMutation({
-    mutationFn: ({ templateId }: { templateId: string; duration: number }) =>
-      createGenerationTask({
-        template_id: templateId,
-        asset_ids: clips
-          .filter((c) => c.media_asset_id)
-          .map((c) => c.media_asset_id!),
-        title_ids: [],
-        voice_ids: clips
-          .filter((c) => c.material_type === "voiceover" && c.media_asset_id)
-          .map((c) => c.media_asset_id!),
-      }),
-    onSuccess: (data) => {
-      setTaskId(data.id);
-      setGenPhase("progress");
-      showToast("生成任务已提交", "success");
-    },
-    onError: (err: unknown) => {
-      if (!(err as { __msgShown?: boolean })?.__msgShown)
-        showToast("生成失败", "error");
-      setGenPhase("setup");
-    },
+  /* 加载模板详情 */
+  useEffect(() => {
+    if (!loadedTemplateId) return;
+    getEditingTemplate(loadedTemplateId)
+      .then((tpl) => {
+        if (!tpl) return;
+        setCurrentMode(tpl.mode);
+        const mapped: ClipData[] = tpl.segments.map((seg, idx) => ({
+          id: seg.id || `seg-${idx}`,
+          template_segment_id: seg.id || `seg-${idx}`,
+          name: `片段${idx + 1} · ${MATERIAL_TYPE_LABELS[seg.material_type || "video"] || "视频"}`,
+          material_type:
+            (seg.material_type as ClipData["material_type"]) || "video",
+          script_text: "",
+          duration: (seg.duration_min + seg.duration_max) / 2,
+          order: seg.segment_order,
+          assetName: undefined,
+          transition: { type: "none", duration: 0 },
+        }));
+        setClips(mapped);
+
+        setTitleSettings((prev) => ({
+          ...prev,
+          aiAutoSelect: tpl.title_config.ai_auto_select,
+          title: tpl.title_config.content,
+          position: tpl.title_config.position,
+          font: tpl.title_config.font_preset,
+          size: tpl.title_config.font_size,
+        }));
+        setSubtitleSettings({
+          enabled: tpl.subtitle_config.enabled,
+          position: tpl.subtitle_config.position,
+          font: tpl.subtitle_config.font,
+          size: tpl.subtitle_config.size,
+          animation: tpl.subtitle_config.animation,
+        });
+        setBgmSettings({
+          music: tpl.bgm_config.music_id || "none",
+        });
+        setDraftName(tpl.name);
+        setDraftCategory(tpl.category);
+        setDraftTags(tpl.tags.join(", "));
+      })
+      .catch(() => msg.error("加载模板详情失败"));
+  }, [loadedTemplateId]);
+
+  /* ──────────── 计算 ──────────── */
+
+  const currentTemplate = templates.find((t) => t.id === loadedTemplateId);
+  const totalDuration = clips.reduce((sum, c) => sum + c.duration, 0);
+  const selectedClip = clips.find((c) => c.id === selectedClipId) || null;
+
+  const filteredTemplates = templates.filter((t) => {
+    if (currentFilter !== "全部" && t.category !== currentFilter) return false;
+    if (
+      searchQuery &&
+      !t.name.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+      return false;
+    return true;
   });
 
-  const saving =
-    createMutation.isPending ||
-    updateMutation.isPending ||
-    savePlanMutation.isPending ||
-    updatePlanMutation.isPending;
+  /* ──────────── 事件 ──────────── */
 
-  /* ──────────── 片段操作 ──────────── */
-
-  const handleSelectClip = useCallback((clipId: string | null) => {
-    setSelectedClipId(clipId);
-  }, []);
-
-  const handleUpdateClip = useCallback(
-    (clipId: string, updates: Partial<EditPlanClip>) => {
-      setClips((prev) =>
-        prev.map((c) => (c.id === clipId ? { ...c, ...updates } : c)),
-      );
-    },
-    [],
-  );
-
-  const handleRemoveClip = useCallback(
-    (clipId: string) => {
-      setClips((prev) => {
-        const next = prev
-          .filter((c) => c.id !== clipId)
-          .map((c, i) => ({ ...c, order: i }));
-        return next;
-      });
-      if (selectedClipId === clipId) {
-        setSelectedClipId(null);
-      }
-    },
-    [selectedClipId],
-  );
-
-  const handleReorderClips = useCallback((fromIdx: number, toIdx: number) => {
-    setClips((prev) => {
-      const next = [...prev];
-      const [moved] = next.splice(fromIdx, 1);
-      next.splice(toIdx, 0, moved);
-      return next.map((c, i) => ({ ...c, order: i }));
-    });
-  }, []);
-
-  const handleAssetDrop = useCallback(
-    (asset: MediaAsset, insertIdx: number) => {
-      const newClip: EditPlanClip = {
-        id: newClipId(),
-        template_segment_id: newSegId(),
-        media_asset_id: asset.id,
-        material_type: asset.type as EditPlanClip["material_type"],
-        script_text: "",
-        duration: asset.duration || 10,
-        transition: { type: "none", duration: 0 },
-        order: insertIdx,
-      };
-      setClips((prev) => {
-        const next = [...prev];
-        next.splice(insertIdx, 0, newClip);
-        return next.map((c, i) => ({ ...c, order: i }));
-      });
-      setSelectedClipId(newClip.id);
-      showToast(`已添加素材: ${asset.name}`, "success");
-    },
-    [showToast],
-  );
-
-  const handleAddClip = useCallback(() => {
-    const newClip: EditPlanClip = {
-      id: newClipId(),
-      template_segment_id: newSegId(),
-      material_type: "video",
-      script_text: "",
-      duration: 10,
-      transition: { type: "none", duration: 0 },
-      order: clips.length,
-    };
-    setClips((prev) => [...prev, newClip]);
-    setSelectedClipId(newClip.id);
-  }, [clips.length]);
-
-  const handleAssetDragStart = useCallback((_asset: MediaAsset) => {
-    // 素材拖拽开始时的回调（可用于高亮时间线等）
-  }, []);
-
-  /* ── 批量添加素材到时间线 ── */
-  const handleBatchAddAssets = useCallback(
-    (assets: MediaAsset[], insertIdx?: number) => {
-      const at = insertIdx ?? clips.length;
-      const newClips: EditPlanClip[] = assets.map((asset, i) => ({
-        id: newClipId(),
-        template_segment_id: newSegId(),
-        media_asset_id: asset.id,
-        material_type: asset.type as EditPlanClip["material_type"],
-        script_text: "",
-        duration: asset.duration || 10,
-        transition: { type: "none", duration: 0 },
-        order: at + i,
-      }));
-      setClips((prev) => {
-        const next = [...prev];
-        next.splice(at, 0, ...newClips);
-        return next.map((c, i) => ({ ...c, order: i }));
-      });
-      if (newClips.length > 0) {
-        setSelectedClipId(newClips[0].id);
-      }
-      showToast(`已批量添加 ${assets.length} 个素材`, "success");
-    },
-    [clips.length, showToast],
-  );
-
-  /* ──────────── 模式切换 ──────────── */
+  const handleLoadTemplate = (templateId: string) => {
+    setLoadedTemplateId(templateId);
+    setSelectedClipId(null);
+  };
 
   const handleModeChange = (mode: TemplateMode) => {
     setCurrentMode(mode);
   };
 
-  /* ──────────── 模板操作 ──────────── */
-
-  const loadTemplate = (tpl: EditingTemplate) => {
-    setLoadedTemplateId(tpl.id);
-    setCurrentMode(tpl.mode);
-    // 将模板片段转换为剪辑片段
-    const newClips: EditPlanClip[] = tpl.segments.map((seg, i) => ({
-      id: newClipId(),
-      template_segment_id: seg.id || `seg-${i}`,
-      material_type:
-        (seg.material_type as EditPlanClip["material_type"]) || "video",
-      script_text: "",
-      duration: Math.round((seg.duration_min + seg.duration_max) / 2),
-      transition: { type: "none", duration: 0 },
-      order: i,
-    }));
-    setClips(newClips);
-    setSelectedClipId(null);
+  const handleClipSelect = (clipId: string) => {
+    setSelectedClipId(clipId);
   };
 
-  const resetEditor = () => {
-    setLoadedTemplateId(null);
-    setEditPlanId(null);
-    setCurrentMode("pip");
-    setClips([
-      {
-        id: newClipId(),
-        template_segment_id: newSegId(),
-        material_type: "video",
-        script_text: "",
-        duration: 10,
-        transition: { type: "none", duration: 0 },
-        order: 0,
-      },
-    ]);
-    setSelectedClipId(null);
-  };
-
-  /* ──────────── 保存/生成 ──────────── */
-
-  const openSaveModal = () => {
-    if (clips.length === 0) {
-      showToast("请至少添加一个片段", "warning");
-      return;
-    }
-    setDraftName(
-      loadedTemplateId
-        ? templates.find((t) => t.id === loadedTemplateId)?.name || ""
-        : "",
-    );
-    setDraftCategory(
-      loadedTemplateId
-        ? templates.find((t) => t.id === loadedTemplateId)?.category || ""
-        : "",
-    );
-    setDraftTags(
-      loadedTemplateId
-        ? templates.find((t) => t.id === loadedTemplateId)?.tags.join(", ") ||
-            ""
-        : "",
-    );
-    setSaveModalOpen(true);
-  };
-
-  const handleSave = () => {
-    if (!draftName.trim()) {
-      showToast("请输入名称", "warning");
-      return;
-    }
-
-    // 保存剪辑计划 — 字段严格匹配后端 Schema
-    if (editPlanId) {
-      updatePlanMutation.mutate({
-        id: editPlanId,
-        data: {
-          name: draftName.trim(),
-          config: { clips },
-        },
-      });
-    } else {
-      const totalDuration = clips.reduce((s, c) => s + c.duration, 0);
-      savePlanMutation.mutate({
-        template_id: loadedTemplateId || "default",
-        name: draftName.trim(),
-        config: {
-          mode: currentMode,
-          clips: clips.map(({ id: _id, ...rest }) => rest),
-        },
-        total_duration: totalDuration,
-      });
-    }
-
-    // 同时保存模板（如果有 loadedTemplateId）
-    if (loadedTemplateId) {
-      const estimatedDuration = clips.reduce((s, c) => s + c.duration, 0);
-      const payload: SaveTemplatePayload = {
-        name: draftName.trim(),
-        mode: currentMode,
-        category: draftCategory,
-        tags: draftTags
-          .split(/[,，]/)
-          .map((t) => t.trim())
-          .filter(Boolean),
-        title_config: {
-          ai_auto_select: true,
-          content: "",
-          font_preset: "思源黑体",
-          font_color: "#ffffff",
-          font_size: 32,
-          position: "top",
-        },
-        subtitle_config: {
-          enabled: true,
-          position: "bottom",
-          font: "思源黑体",
-          color: "#ffffff",
-          size: 24,
-          animation: "fade",
-        },
-        bgm_config: { enabled: false, music_id: "" },
-        estimated_duration: estimatedDuration,
-        segments: clips.map((c) => ({
-          id: c.template_segment_id,
-          segment_order: c.order + 1,
-          duration_min: Math.max(1, c.duration - 3),
-          duration_max: c.duration + 3,
-          material_type:
-            c.material_type === "voiceover" ? null : c.material_type,
-        })),
-      };
-      updateMutation.mutate({ id: loadedTemplateId, data: payload });
-    }
-  };
-
-  const handleGenerate = () => {
-    if (!loadedTemplateId) {
-      showToast("请先选择模板", "warning");
-      return;
-    }
-    setGenPhase("setup");
-    setTaskId(null);
-    setGenerateModalOpen(true);
-  };
-
-  const doGenerate = () => {
-    if (!voiceoverDuration || voiceoverDuration <= 0) {
-      showToast("请输入配音时长", "warning");
-      return;
-    }
-    generateMutation.mutate({
-      templateId: loadedTemplateId!,
-      duration: voiceoverDuration,
+  const handleClipReorder = (fromIdx: number, toIdx: number) => {
+    setClips((prev) => {
+      const updated = [...prev];
+      const [moved] = updated.splice(fromIdx, 1);
+      updated.splice(toIdx, 0, moved);
+      return updated.map((c, i) => ({ ...c, order: i }));
     });
   };
 
-  const handleRetry = () => {
-    if (!taskId) return;
-    retryTask(taskId)
-      .then(() => {
-        setGenPhase("progress");
-        showToast("任务已重新提交", "success");
-      })
-      .catch(() => {
-        showToast("重试失败", "error");
-      });
+  const handleClipRemove = (clipId: string) => {
+    setClips((prev) => prev.filter((c) => c.id !== clipId));
+    if (selectedClipId === clipId) setSelectedClipId(null);
   };
 
-  const handleCloseProgressModal = () => {
-    setGenerateModalOpen(false);
+  const handleClipUpdate = (clipId: string, data: Partial<ClipData>) => {
+    setClips((prev) =>
+      prev.map((c) => (c.id === clipId ? { ...c, ...data } : c)),
+    );
+  };
+
+  const handleAssetDropToClip = (clipId: string, asset: MediaAsset) => {
+    handleClipUpdate(clipId, {
+      media_asset_id: asset.id,
+      assetName: asset.name,
+      thumbnail: asset.thumbnail_url,
+    });
+  };
+
+  const handleAssetDropToTimeline = (asset: MediaAsset) => {
+    const newClip: ClipData = {
+      id: `clip-${Date.now()}`,
+      template_segment_id: "",
+      name: `片段${clips.length + 1} · ${MATERIAL_TYPE_LABELS[asset.type]}`,
+      material_type:
+        asset.type === "audio"
+          ? "voiceover"
+          : asset.type === "image"
+            ? "image"
+            : "video",
+      script_text: "",
+      duration: asset.duration || 5,
+      order: clips.length,
+      media_asset_id: asset.id,
+      assetName: asset.name,
+      thumbnail: asset.thumbnail_url,
+      transition: { type: "none", duration: 0 },
+    };
+    setClips((prev) => [...prev, newClip]);
+  };
+
+  /* 保存 */
+  const handleOpenSaveModal = () => {
+    if (!loadedTemplateId) {
+      msg.warning("请先加载一个模板");
+      return;
+    }
+    setSaveModalOpen(true);
+  };
+
+  const handleSave = async () => {
+    if (!draftName.trim()) {
+      msg.warning("请输入模板名称");
+      return;
+    }
+    if (!loadedTemplateId) return;
+    setSaveLoading(true);
+    try {
+      const payload: SaveTemplatePayload = {
+        name: draftName,
+        mode: currentMode,
+        category: draftCategory,
+        tags: draftTags
+          .split(",")
+          .map((t) => t.trim())
+          .filter(Boolean),
+        title_config: {
+          ai_auto_select: titleSettings.aiAutoSelect,
+          content: titleSettings.title,
+          font_preset: titleSettings.font,
+          font_color: "#ffffff",
+          font_size: titleSettings.size,
+          position: titleSettings.position,
+        },
+        subtitle_config: {
+          enabled: subtitleSettings.enabled,
+          position: subtitleSettings.position,
+          font: subtitleSettings.font,
+          color: "#ffffff",
+          size: subtitleSettings.size,
+          animation: subtitleSettings.animation,
+        },
+        bgm_config: {
+          enabled: bgmSettings.music !== "none",
+          music_id: bgmSettings.music,
+        },
+        estimated_duration: totalDuration,
+        segments: clips.map((c, i) => ({
+          segment_order: i,
+          duration_min: Math.max(1, c.duration - 2),
+          duration_max: c.duration + 2,
+          material_type: c.material_type,
+        })),
+      };
+      await updateEditingTemplate(loadedTemplateId, payload);
+      msg.success("模板保存成功");
+      setSaveModalOpen(false);
+      loadTemplates();
+    } catch {
+      msg.error("保存失败");
+    } finally {
+      setSaveLoading(false);
+    }
+  };
+
+  /* 生成 */
+  const handleOpenGenerateModal = () => {
+    if (!loadedTemplateId) {
+      msg.warning("请先加载一个模板");
+      return;
+    }
     setGenPhase("setup");
-    setTaskId(null);
+    setGenTask(null);
+    setGenModalOpen(true);
   };
 
-  const totalDuration = clips.reduce((s, c) => s + c.duration, 0);
-  const selectedClip = clips.find((c) => c.id === selectedClipId) || null;
+  const handleGenerate = async () => {
+    if (!loadedTemplateId) return;
+    setGenSubmitting(true);
+    try {
+      await generateFromTemplate(loadedTemplateId, {
+        voiceover_duration: voiceoverDuration || totalDuration,
+      });
+      const task = await createGenerationTask({
+        template_id: loadedTemplateId,
+        asset_ids: clips
+          .map((c) => c.media_asset_id)
+          .filter((v): v is string => !!v),
+        title_ids: [],
+        voice_ids: [],
+      });
+      setGenTask(task as unknown as TaskItem);
+      setGenPhase("progress");
+      msg.info("生成任务已创建");
+    } catch {
+      msg.error("创建生成任务失败");
+    } finally {
+      setGenSubmitting(false);
+    }
+  };
+
+  /* 轮询任务状态 */
+  useEffect(() => {
+    if (genPhase !== "progress" || !genTask?.id) return;
+    const timer = setInterval(async () => {
+      try {
+        const t = await getTask(genTask.id);
+        setGenTask(t);
+        if (t.status === "completed") {
+          setGenPhase("completed");
+          clearInterval(timer);
+        } else if (t.status === "failed") {
+          setGenPhase("failed");
+          clearInterval(timer);
+        }
+      } catch {
+        /* ignore */
+      }
+    }, 3000);
+    return () => clearInterval(timer);
+  }, [genPhase, genTask?.id]);
+
+  const handleRetry = async () => {
+    if (!genTask?.id) return;
+    setGenSubmitting(true);
+    try {
+      const t = await retryTask(genTask.id);
+      setGenTask(t);
+      setGenPhase("progress");
+    } catch {
+      msg.error("重试失败");
+    } finally {
+      setGenSubmitting(false);
+    }
+  };
+
+  const handleCancelGen = () => {
+    setGenModalOpen(false);
+    setGenPhase("setup");
+    setGenTask(null);
+    setVoiceoverDuration(null);
+  };
 
   /* ──────────── 渲染 ──────────── */
 
   return (
-    <div className="ep-page">
-      {ToastNode}
-
-      {/* ═══ 顶部工具栏 ═══ */}
-      <div className="ep-toolbar">
-        <div className="ep-toolbar-left">
-          <div className="ep-mode-switch">
-            {(
-              ["pip", "voice_over", "one_take", "voice_pip"] as TemplateMode[]
-            ).map((mode) => (
-              <button
-                key={mode}
-                className={`ep-mode-btn${currentMode === mode ? " active" : ""}`}
-                onClick={() => handleModeChange(mode)}
-                title={MODE_LABELS[mode]}
-              >
-                {MODE_LABELS[mode]}
-              </button>
-            ))}
-          </div>
+    <div className="ep-v8-root">
+      {/* ═══ 第1行：顶栏 42px ═══ */}
+      <div className="ep-top-bar">
+        <div className="ep-top-bar-left">
+          <span className="ep-logo">✂️</span>
+          <span className="ep-app-title">小虾剪辑编排器</span>
+          <span className="ep-divider">|</span>
+          <span className="ep-template-name">
+            {currentTemplate?.name || "未选择模板"}
+          </span>
         </div>
-        <div className="ep-toolbar-center">
-          {loadedTemplateId && (
-            <span className="ep-toolbar-template-name">
-              📋{" "}
-              {templates.find((t) => t.id === loadedTemplateId)?.name ||
-                "未命名模板"}
-            </span>
-          )}
-          {editPlanId && <span className="ep-toolbar-plan-badge">已保存</span>}
-        </div>
-        <div className="ep-toolbar-right">
-          <Button buttonType="ghost" buttonSize="sm" onClick={openSaveModal}>
-            💾 保存
-          </Button>
-          <Button
-            buttonType="primary"
-            buttonSize="sm"
-            onClick={handleGenerate}
-            disabled={!loadedTemplateId}
+        <div className="ep-top-bar-right">
+          <button
+            className="ep-btn ep-btn-secondary"
+            onClick={handleOpenSaveModal}
           >
-            🎬 生成视频
-          </Button>
+            💾 保存模板
+          </button>
+          <button
+            className="ep-btn ep-btn-primary"
+            onClick={handleOpenGenerateModal}
+          >
+            🎬 使用此模板生成
+          </button>
         </div>
       </div>
 
-      {/* ═══ 三栏主体 ═══ */}
-      <div className="ep-body">
-        {/* 左侧：素材面板（模板+素材 Tab） */}
+      {/* ═══ 第2行：模式栏 48px ═══ */}
+      <div className="ep-mode-bar">
+        {MODE_LIST.map((m) => (
+          <button
+            key={m.key}
+            className={`ep-mode-btn ${currentMode === m.key ? "active" : ""}`}
+            onClick={() => handleModeChange(m.key)}
+          >
+            <span className="ep-mode-icon">{m.icon}</span>
+            {m.label}
+          </button>
+        ))}
+      </div>
+
+      {/* ═══ 第3行：三栏主体 ═══ */}
+      <div className="ep-main-body">
+        {/* 左栏 220px：模板列表 */}
         <MediaPanel
-          templates={templates}
-          categories={categories}
-          isLoadingTemplates={tplLoading}
+          templates={filteredTemplates}
+          loading={loadingTemplates}
+          searchQuery={searchQuery}
+          currentFilter={currentFilter}
+          filterCategories={FILTER_CATEGORIES}
           loadedTemplateId={loadedTemplateId}
-          onTemplateSelect={loadTemplate}
-          onNewTemplate={resetEditor}
-          onAssetDragStart={handleAssetDragStart}
-          onBatchAddAssets={handleBatchAddAssets}
+          onLoadTemplate={handleLoadTemplate}
+          onSearchChange={setSearchQuery}
+          onFilterChange={setCurrentFilter}
         />
 
-        {/* 中间：预览播放器 + 时间线 */}
-        <div className="ep-center">
+        {/* 中栏 flex-1 */}
+        <div className="ep-center-col">
+          {/* 上半部：视频预览 + 封面预览 */}
           <PreviewPlayer
             clips={clips}
-            totalDuration={totalDuration}
             selectedClipId={selectedClipId}
-            onSelectClip={handleSelectClip}
+            isPlaying={isPlaying}
+            currentCoverScheme={currentCoverScheme}
+            coverSchemes={COVER_SCHEMES}
+            onClipSelect={handleClipSelect}
+            onCoverSchemeChange={setCurrentCoverScheme}
+            onPlayPause={() => setIsPlaying(!isPlaying)}
           />
+
+          {/* 下半部：水平时间线 */}
           <TimelinePanel
             clips={clips}
             selectedClipId={selectedClipId}
-            onSelectClip={handleSelectClip}
-            onRemoveClip={handleRemoveClip}
-            onReorderClips={handleReorderClips}
-            onAssetDrop={handleAssetDrop}
-            onBatchAssetDrop={handleBatchAddAssets}
-            onAddClip={handleAddClip}
-            totalDuration={totalDuration}
+            currentMode={currentMode}
+            onClipSelect={handleClipSelect}
+            onClipReorder={handleClipReorder}
+            onClipRemove={handleClipRemove}
+            onAssetDropToTimeline={handleAssetDropToTimeline}
+            onAssetDropToClip={handleAssetDropToClip}
+            mediaAssets={mediaAssets}
           />
         </div>
 
-        {/* 右侧：片段属性 */}
+        {/* 右栏 260px：设置面板 */}
         <ClipPropertiesPanel
           selectedClip={selectedClip}
-          onUpdateClip={handleUpdateClip}
-          clips={clips}
+          titleSettings={titleSettings}
+          subtitleSettings={subtitleSettings}
+          bgmSettings={bgmSettings}
+          clipsCount={clips.length}
+          totalDuration={totalDuration}
+          currentMode={currentMode}
+          onTitleSettingsChange={(partial) =>
+            setTitleSettings((prev) => ({ ...prev, ...partial }))
+          }
+          onSubtitleSettingsChange={(partial) =>
+            setSubtitleSettings((prev) => ({ ...prev, ...partial }))
+          }
+          onBgmSettingsChange={(partial) =>
+            setBgmSettings((prev) => ({ ...prev, ...partial }))
+          }
+          onClipUpdate={handleClipUpdate}
         />
       </div>
 
-      {/* 保存模板弹窗 */}
+      {/* ═══ 第4行：底栏 40px ═══ */}
+      <div className="ep-status-bar">
+        <div className="ep-status-left">
+          <span>📋 片段: {clips.length}</span>
+          <span className="ep-status-sep">|</span>
+          <span>⏱️ 总时长: {totalDuration.toFixed(1)}s</span>
+        </div>
+        <div className="ep-status-right">
+          <span>🎬 {MODE_LABELS[currentMode]}</span>
+          <span className="ep-status-sep">|</span>
+          <span>📐 模板片段: {currentTemplate?.segments.length || 0}</span>
+        </div>
+      </div>
+
+      {/* ═══ 弹窗 ═══ */}
       <SaveModal
         open={saveModalOpen}
-        loading={saving}
-        isUpdate={!!editPlanId}
+        loading={saveLoading}
+        isUpdate={!!loadedTemplateId}
         draftName={draftName}
         draftCategory={draftCategory}
         draftTags={draftTags}
@@ -645,19 +572,18 @@ const EditingPlanner: React.FC = () => {
         onCancel={() => setSaveModalOpen(false)}
       />
 
-      {/* 生成进度弹窗 */}
       <GenerationProgressModal
-        open={generateModalOpen}
+        open={genModalOpen}
         phase={genPhase}
         voiceoverDuration={voiceoverDuration}
         estimatedDuration={totalDuration}
         onDurationChange={setVoiceoverDuration}
-        onGenerate={doGenerate}
-        task={taskData || null}
-        submitting={generateMutation.isPending}
-        onCancel={handleCloseProgressModal}
+        onGenerate={handleGenerate}
+        task={genTask}
+        submitting={genSubmitting}
+        onCancel={handleCancelGen}
         onRetry={handleRetry}
-        onClose={handleCloseProgressModal}
+        onClose={handleCancelGen}
       />
     </div>
   );
diff --git a/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx b/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx
index 3e6dbaf22..71f41595f 100644
--- a/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx
@@ -1,204 +1,428 @@
 /**
- * 右侧片段属性面板 — V21 设计系统
- * 选中片段后编辑：文案、时长、转场效果
- * 未选中时显示全局设置（标题/字幕/BGM）
+ * 右栏设置面板 — V8 原型 1:1 还原
+ * 标题设置(AI toggle) + 字幕设置 + BGM设置 + 片段详情
  */
 import React from "react";
-import type { EditPlanClip, TransitionEffect } from "@/api/editPlans";
-import { TRANSITION_OPTIONS, MATERIAL_TYPE_ICONS } from "@/api/editPlans";
+import type { TemplateMode } from "@/api/editingPlanner";
+import { MATERIAL_TYPE_LABELS } from "@/api/editPlans";
+
+interface ClipData {
+  id: string;
+  name: string;
+  duration: number;
+  material_type: "video" | "image" | "audio" | "voiceover";
+  thumbnail?: string;
+  assetName?: string;
+  media_asset_id?: string;
+  template_segment_id?: string;
+  script_text?: string;
+}
+
+interface TitleSettings {
+  aiAutoSelect: boolean;
+  title: string;
+  position: string;
+  font: string;
+  size: number;
+  bold: boolean;
+  italic: boolean;
+  stroke: boolean;
+  shadow: boolean;
+}
+
+interface SubtitleSettings {
+  enabled: boolean;
+  position: string;
+  font: string;
+  size: number;
+  animation: string;
+}
+
+interface BgmSettings {
+  music: string;
+}
 
 interface ClipPropertiesPanelProps {
-  /** 当前选中的片段 */
-  selectedClip: EditPlanClip | null;
-  /** 更新片段属性 */
-  onUpdateClip: (clipId: string, updates: Partial<EditPlanClip>) => void;
-  /** 所有片段列表（用于显示上下文） */
-  clips: EditPlanClip[];
+  selectedClip: ClipData | null;
+  titleSettings: TitleSettings;
+  subtitleSettings: SubtitleSettings;
+  bgmSettings: BgmSettings;
+  clipsCount: number;
+  totalDuration: number;
+  currentMode: TemplateMode;
+  onTitleSettingsChange: (partial: Partial<TitleSettings>) => void;
+  onSubtitleSettingsChange: (partial: Partial<SubtitleSettings>) => void;
+  onBgmSettingsChange: (partial: Partial<BgmSettings>) => void;
+  onClipUpdate: (clipId: string, data: Partial<ClipData>) => void;
 }
 
+const POSITION_OPTIONS = [
+  { value: "top", label: "顶部" },
+  { value: "center", label: "居中" },
+  { value: "bottom", label: "底部" },
+];
+
+const FONT_OPTIONS = ["思源黑体", "思源宋体", "苹方", "PingFang", "微软雅黑"];
+
+const ANIMATION_OPTIONS = [
+  { value: "none", label: "无" },
+  { value: "fade", label: "淡入淡出" },
+  { value: "slide", label: "滑动" },
+  { value: "typewriter", label: "打字机" },
+];
+
+const BGM_OPTIONS = [
+  { value: "none", label: "无背景音乐" },
+  { value: "bgm_01", label: "🎵 轻快节奏" },
+  { value: "bgm_02", label: "🎵 温馨舒缓" },
+  { value: "bgm_03", label: "🎵 动感活力" },
+  { value: "bgm_04", label: "🎵 科技感" },
+];
+
 const ClipPropertiesPanel: React.FC<ClipPropertiesPanelProps> = ({
   selectedClip,
-  onUpdateClip,
-  clips,
+  titleSettings,
+  subtitleSettings,
+  bgmSettings,
+  clipsCount,
+  totalDuration,
+  currentMode,
+  onTitleSettingsChange,
+  onSubtitleSettingsChange,
+  onBgmSettingsChange,
+  onClipUpdate,
 }) => {
-  if (!selectedClip) {
-    return (
-      <div className="ep-right">
-        <div className="ep-clip-props-empty">
-          <div className="ep-clip-props-empty-icon">👆</div>
-          <h3>选择一个片段</h3>
-          <p>点击时间线上的片段来编辑属性</p>
-          <div className="ep-clip-props-summary">
-            <div className="ep-clip-props-summary-item">
-              <span className="ep-clip-props-summary-label">总片段数</span>
-              <span className="ep-clip-props-summary-value">
-                {clips.length}
-              </span>
-            </div>
-            <div className="ep-clip-props-summary-item">
-              <span className="ep-clip-props-summary-label">总时长</span>
-              <span className="ep-clip-props-summary-value">
-                {clips.reduce((s, c) => s + c.duration, 0)}s
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const transition = selectedClip.transition ?? {
-    type: "none" as const,
-    duration: 0,
-  };
-
-  const handleTransitionTypeChange = (type: TransitionEffect["type"]) => {
-    const duration = type === "none" ? 0 : transition.duration || 0.5;
-    onUpdateClip(selectedClip.id, {
-      transition: { type, duration },
-    });
-  };
-
-  const handleTransitionDurationChange = (duration: number) => {
-    onUpdateClip(selectedClip.id, {
-      transition: { ...transition, duration },
-    });
-  };
-
   return (
-    <div className="ep-right">
-      {/* 片段信息头 */}
-      <div className="ep-right-section">
-        <div className="ep-clip-props-header">
-          <span className="ep-clip-props-header-icon">
-            {MATERIAL_TYPE_ICONS[selectedClip.material_type] || "📄"}
-          </span>
-          <div>
-            <h3>片段 {selectedClip.order + 1}</h3>
-            <span className="ep-clip-props-header-type">
-              {selectedClip.material_type} · {selectedClip.duration}s
-            </span>
-          </div>
+    <div className="ep-right-panel">
+      {/* ═══ 标题设置 ═══ */}
+      <div className="ep-settings-section">
+        <div className="ep-section-title">
+          <span className="ep-section-icon">📝</span>
+          标题设置
         </div>
-      </div>
 
-      {/* 文案编辑 */}
-      <div className="ep-right-section">
-        <h3>📝 文案</h3>
-        <div className="ep-clip-props-field">
-          <textarea
-            className="ep-clip-props-textarea"
-            placeholder="输入片段文案..."
-            value={selectedClip.script_text}
-            onChange={(e) =>
-              onUpdateClip(selectedClip.id, {
-                script_text: e.target.value,
+        <div className="ep-toggle-row">
+          <span className="ep-toggle-label">AI 自动选择</span>
+          <div
+            className={`ep-toggle ${titleSettings.aiAutoSelect ? "active" : ""}`}
+            onClick={() =>
+              onTitleSettingsChange({
+                aiAutoSelect: !titleSettings.aiAutoSelect,
               })
             }
-            rows={4}
-          />
-          <div className="ep-clip-props-field-hint">
-            {selectedClip.script_text.length} 字
+          >
+            <div className="ep-toggle-knob" />
           </div>
         </div>
-      </div>
 
-      {/* 时长调整 */}
-      <div className="ep-right-section">
-        <h3>⏱️ 时长</h3>
-        <div className="ep-clip-props-field">
-          <div className="ep-clip-props-duration-control">
-            <input
-              type="range"
-              className="ep-clip-props-range"
-              min={1}
-              max={60}
-              step={1}
-              value={selectedClip.duration}
-              onChange={(e) =>
-                onUpdateClip(selectedClip.id, {
-                  duration: Number(e.target.value),
-                })
-              }
-            />
-            <span className="ep-clip-props-duration-value">
-              {selectedClip.duration}s
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* 转场效果 */}
-      <div className="ep-right-section">
-        <h3>✨ 转场效果</h3>
-        <div className="ep-clip-props-field">
-          <label className="ep-clip-props-label">转场类型</label>
-          <div className="ep-clip-props-transition-grid">
-            {TRANSITION_OPTIONS.map((opt) => (
-              <button
-                key={opt.value}
-                className={`ep-clip-props-transition-btn${transition.type === opt.value ? " active" : ""}`}
-                onClick={() => handleTransitionTypeChange(opt.value)}
-              >
-                {opt.label}
-              </button>
-            ))}
-          </div>
-        </div>
-        {transition.type !== "none" && (
-          <div className="ep-clip-props-field">
-            <label className="ep-clip-props-label">转场时长</label>
-            <div className="ep-clip-props-duration-control">
-              <input
-                type="range"
-                className="ep-clip-props-range"
-                min={0.1}
-                max={2}
-                step={0.1}
-                value={transition.duration}
+        {!titleSettings.aiAutoSelect && (
+          <>
+            <div className="ep-field">
+              <label className="ep-field-label">位置</label>
+              <select
+                className="ep-form-select"
+                value={titleSettings.position}
                 onChange={(e) =>
-                  handleTransitionDurationChange(Number(e.target.value))
+                  onTitleSettingsChange({ position: e.target.value })
                 }
-              />
-              <span className="ep-clip-props-duration-value">
-                {transition.duration.toFixed(1)}s
-              </span>
+              >
+                {POSITION_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
             </div>
-          </div>
+
+            <div className="ep-field">
+              <label className="ep-field-label">字体</label>
+              <select
+                className="ep-form-select"
+                value={titleSettings.font}
+                onChange={(e) =>
+                  onTitleSettingsChange({ font: e.target.value })
+                }
+              >
+                {FONT_OPTIONS.map((f) => (
+                  <option key={f} value={f}>
+                    {f}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="ep-field">
+              <label className="ep-field-label">大小</label>
+              <div className="ep-slider-row">
+                <input
+                  className="ep-slider"
+                  type="range"
+                  min={12}
+                  max={48}
+                  value={titleSettings.size}
+                  onChange={(e) =>
+                    onTitleSettingsChange({ size: Number(e.target.value) })
+                  }
+                />
+                <span className="ep-slider-value">{titleSettings.size}px</span>
+              </div>
+            </div>
+
+            <div className="ep-field">
+              <label className="ep-field-label">样式</label>
+              <div className="ep-style-btns">
+                <button
+                  className={`ep-style-btn ${titleSettings.bold ? "active" : ""}`}
+                  onClick={() =>
+                    onTitleSettingsChange({ bold: !titleSettings.bold })
+                  }
+                  title="粗体"
+                >
+                  <b>B</b>
+                </button>
+                <button
+                  className={`ep-style-btn ${titleSettings.italic ? "active" : ""}`}
+                  onClick={() =>
+                    onTitleSettingsChange({ italic: !titleSettings.italic })
+                  }
+                  title="斜体"
+                >
+                  <i>I</i>
+                </button>
+                <button
+                  className={`ep-style-btn ${titleSettings.stroke ? "active" : ""}`}
+                  onClick={() =>
+                    onTitleSettingsChange({ stroke: !titleSettings.stroke })
+                  }
+                  title="描边"
+                >
+                  S
+                </button>
+                <button
+                  className={`ep-style-btn ${titleSettings.shadow ? "active" : ""}`}
+                  onClick={() =>
+                    onTitleSettingsChange({ shadow: !titleSettings.shadow })
+                  }
+                  title="阴影"
+                >
+                  ☁
+                </button>
+              </div>
+            </div>
+          </>
         )}
       </div>
 
-      {/* 素材关联 */}
-      <div className="ep-right-section">
-        <h3>🔗 关联素材</h3>
-        <div className="ep-clip-props-field">
-          {selectedClip.media_asset_id ? (
-            <div className="ep-clip-props-asset-linked">
-              <span className="ep-clip-props-asset-icon">
-                {MATERIAL_TYPE_ICONS[selectedClip.material_type]}
-              </span>
-              <span className="ep-clip-props-asset-name">
-                {selectedClip.media_asset_id}
-              </span>
-              <button
-                className="ep-clip-props-asset-unlink"
-                onClick={() =>
-                  onUpdateClip(selectedClip.id, {
-                    media_asset_id: undefined,
-                  })
+      {/* ═══ 字幕设置 ═══ */}
+      <div className="ep-settings-section">
+        <div className="ep-section-title">
+          <span className="ep-section-icon">💬</span>
+          字幕设置
+        </div>
+
+        <div className="ep-toggle-row">
+          <span className="ep-toggle-label">启用字幕</span>
+          <div
+            className={`ep-toggle ${subtitleSettings.enabled ? "active" : ""}`}
+            onClick={() =>
+              onSubtitleSettingsChange({
+                enabled: !subtitleSettings.enabled,
+              })
+            }
+          >
+            <div className="ep-toggle-knob" />
+          </div>
+        </div>
+
+        {subtitleSettings.enabled && (
+          <>
+            <div className="ep-field">
+              <label className="ep-field-label">位置</label>
+              <select
+                className="ep-form-select"
+                value={subtitleSettings.position}
+                onChange={(e) =>
+                  onSubtitleSettingsChange({ position: e.target.value })
                 }
-                title="取消关联"
               >
-                ✕
-              </button>
+                {POSITION_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
             </div>
-          ) : (
-            <div className="ep-clip-props-asset-empty">
-              <p>从左侧素材库拖拽素材到此片段</p>
+
+            <div className="ep-field">
+              <label className="ep-field-label">字体</label>
+              <select
+                className="ep-form-select"
+                value={subtitleSettings.font}
+                onChange={(e) =>
+                  onSubtitleSettingsChange({ font: e.target.value })
+                }
+              >
+                {FONT_OPTIONS.map((f) => (
+                  <option key={f} value={f}>
+                    {f}
+                  </option>
+                ))}
+              </select>
             </div>
-          )}
+
+            <div className="ep-field">
+              <label className="ep-field-label">大小</label>
+              <div className="ep-slider-row">
+                <input
+                  className="ep-slider"
+                  type="range"
+                  min={10}
+                  max={32}
+                  value={subtitleSettings.size}
+                  onChange={(e) =>
+                    onSubtitleSettingsChange({ size: Number(e.target.value) })
+                  }
+                />
+                <span className="ep-slider-value">{subtitleSettings.size}px</span>
+              </div>
+            </div>
+
+            <div className="ep-field">
+              <label className="ep-field-label">动画</label>
+              <select
+                className="ep-form-select"
+                value={subtitleSettings.animation}
+                onChange={(e) =>
+                  onSubtitleSettingsChange({ animation: e.target.value })
+                }
+              >
+                {ANIMATION_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* ═══ BGM 设置 ═══ */}
+      <div className="ep-settings-section">
+        <div className="ep-section-title">
+          <span className="ep-section-icon">🎵</span>
+          BGM 设置
+        </div>
+
+        <div className="ep-field">
+          <label className="ep-field-label">背景音乐</label>
+          <select
+            className="ep-form-select"
+            value={bgmSettings.music}
+            onChange={(e) =>
+              onBgmSettingsChange({ music: e.target.value })
+            }
+          >
+            {BGM_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
         </div>
       </div>
+
+      {/* ═══ 片段详情（选中时显示） ═══ */}
+      {selectedClip && (
+        <div className="ep-settings-section">
+          <div className="ep-section-title">
+            <span className="ep-section-icon">🎞️</span>
+            片段详情
+          </div>
+
+          <div className="ep-clip-detail">
+            <div className="ep-clip-detail-header">
+              <span className="ep-clip-detail-name">{selectedClip.name}</span>
+              <span className="ep-clip-detail-type">
+                {MATERIAL_TYPE_LABELS[selectedClip.material_type] || "视频"}
+              </span>
+            </div>
+
+            <div className="ep-clip-detail-field">
+              <div className="ep-clip-detail-label">时长范围</div>
+              <div className="ep-clip-detail-row">
+                <input
+                  className="ep-duration-input"
+                  type="number"
+                  min={1}
+                  max={120}
+                  value={selectedClip.duration}
+                  onChange={(e) =>
+                    onClipUpdate(selectedClip.id, {
+                      duration: Number(e.target.value),
+                    })
+                  }
+                />
+                <span style={{ fontSize: 11, color: "#666" }}>秒</span>
+              </div>
+            </div>
+
+            {selectedClip.assetName && (
+              <div className="ep-clip-detail-field">
+                <div className="ep-clip-detail-label">关联素材</div>
+                <div className="ep-clip-detail-value">
+                  🔗 {selectedClip.assetName}
+                </div>
+              </div>
+            )}
+
+            <div className="ep-clip-detail-field">
+              <div className="ep-clip-detail-label">素材类型</div>
+              <div className="ep-clip-detail-value">
+                {MATERIAL_TYPE_LABELS[selectedClip.material_type] || "视频"}
+              </div>
+            </div>
+
+            <button className="ep-ai-recommend-btn">
+              ✨ AI 推荐素材
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* ═══ 统计信息（始终显示） ═══ */}
+      {!selectedClip && (
+        <div className="ep-settings-section">
+          <div className="ep-section-title">
+            <span className="ep-section-icon">📊</span>
+            编辑统计
+          </div>
+          <div className="ep-clip-detail">
+            <div className="ep-clip-detail-field">
+              <div className="ep-clip-detail-label">片段数</div>
+              <div className="ep-clip-detail-value">{clipsCount}</div>
+            </div>
+            <div className="ep-clip-detail-field">
+              <div className="ep-clip-detail-label">总时长</div>
+              <div className="ep-clip-detail-value">
+                {totalDuration.toFixed(1)}s
+              </div>
+            </div>
+            <div className="ep-clip-detail-field">
+              <div className="ep-clip-detail-label">当前模式</div>
+              <div className="ep-clip-detail-value">
+                {currentMode === "pip"
+                  ? "画中画"
+                  : currentMode === "voice_over"
+                    ? "人物口播"
+                    : currentMode === "one_take"
+                      ? "一镜到底"
+                      : "口播+画中画"}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/apps/web/src/pages/editing-planner/components/MediaPanel.tsx b/apps/web/src/pages/editing-planner/components/MediaPanel.tsx
index d15feb2a7..e2fd442b0 100644
--- a/apps/web/src/pages/editing-planner/components/MediaPanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/MediaPanel.tsx
@@ -1,222 +1,102 @@
 /**
- * 左侧素材面板 — V21 设计系统
- * Tab 切换：模板列表 / 素材库
- * 素材 Tab 集成 AssetSelector 组件
+ * 左侧模板面板 — V8 原型 1:1 还原
+ * 纯模板列表 + chip 分类筛选（无素材 Tab）
  */
-import React, { useState, useCallback } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Input, Select, Tag, Button } from "@/components/ui";
-import {
-  MODE_LABELS,
-  MODE_COLORS,
-  type EditingTemplate,
-  type TemplateCategory,
-  type TemplateMode,
-} from "@/api/editingPlanner";
-import { getMediaAssets, type MediaAsset } from "@/api/editPlans";
-import { getAssetLibraries } from "@/api/assets";
-import AssetSelector from "@/components/AssetSelector/AssetSelector";
-
-/** antd Tag color → V21 Tag variant */
-const modeVariantMap: Record<
-  string,
-  "primary" | "success" | "warning" | "info"
-> = {
-  blue: "primary",
-  green: "success",
-  orange: "warning",
-  purple: "info",
-};
-
-type LeftTab = "templates" | "assets";
+import React from "react";
+import type { EditingTemplate } from "@/api/editingPlanner";
+import { MODE_LABELS } from "@/api/editingPlanner";
 
 interface MediaPanelProps {
-  /* 模板相关 */
   templates: EditingTemplate[];
-  categories: TemplateCategory[];
-  isLoadingTemplates: boolean;
+  loading: boolean;
+  searchQuery: string;
+  currentFilter: string;
+  filterCategories: string[];
   loadedTemplateId: string | null;
-  onTemplateSelect: (tpl: EditingTemplate) => void;
-  onNewTemplate: () => void;
-  /* 素材相关 */
-  onAssetDragStart?: (asset: MediaAsset) => void;
-  onBatchAddAssets?: (assets: MediaAsset[]) => void;
+  onLoadTemplate: (id: string) => void;
+  onSearchChange: (q: string) => void;
+  onFilterChange: (f: string) => void;
 }
 
 const MediaPanel: React.FC<MediaPanelProps> = ({
   templates,
-  categories,
-  isLoadingTemplates,
+  loading,
+  searchQuery,
+  currentFilter,
+  filterCategories,
   loadedTemplateId,
-  onTemplateSelect,
-  onNewTemplate,
-  onAssetDragStart,
-  onBatchAddAssets,
+  onLoadTemplate,
+  onSearchChange,
+  onFilterChange,
 }) => {
-  const [activeTab, setActiveTab] = useState<LeftTab>("templates");
-  const [searchText, setSearchText] = useState("");
-  const [filterCategory, setFilterCategory] = useState("");
-  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);
-
-  /* 先获取素材库列表，再用第一个 library_id 获取素材 */
-  const { data: libraries = [] } = useQuery({
-    queryKey: ["asset-libraries"],
-    queryFn: getAssetLibraries,
-  });
-  const libraryId = libraries.length > 0 ? libraries[0].id : undefined;
-
-  /* 素材数据查询 */
-  const { data: assets = [] } = useQuery({
-    queryKey: ["media-assets", libraryId],
-    queryFn: () => getMediaAssets(libraryId),
-    enabled: libraryId !== undefined,
-  });
-
-  /* 过滤模板 */
-  const filteredTemplates = templates.filter((tpl) => {
-    if (
-      searchText &&
-      !tpl.name.toLowerCase().includes(searchText.toLowerCase())
-    )
-      return false;
-    if (filterCategory && tpl.category !== filterCategory) return false;
-    return true;
-  });
-
-  /* 获取选中的素材 */
-  const selectedAssets = assets.filter((a) => selectedAssetIds.includes(a.id));
-
-  /* 批量添加到时间线 */
-  const handleBatchAdd = useCallback(() => {
-    if (selectedAssets.length > 0 && onBatchAddAssets) {
-      onBatchAddAssets(selectedAssets);
-      setSelectedAssetIds([]);
-    }
-  }, [selectedAssets, onBatchAddAssets]);
-
   return (
-    <div className="ep-left">
-      {/* Tab 切换 */}
-      <div className="ep-left-tabs">
-        <button
-          className={`ep-left-tab${activeTab === "templates" ? " active" : ""}`}
-          onClick={() => setActiveTab("templates")}
-        >
-          📂 模板
-        </button>
-        <button
-          className={`ep-left-tab${activeTab === "assets" ? " active" : ""}`}
-          onClick={() => setActiveTab("assets")}
-        >
-          🎬 素材
-        </button>
+    <div className="ep-left-panel">
+      {/* 搜索 */}
+      <div className="ep-search-wrap" style={{ position: "relative" }}>
+        <span className="ep-search-icon">🔍</span>
+        <input
+          className="ep-search-input"
+          placeholder="搜索模板..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+        />
       </div>
 
-      {/* 内容区 */}
-      {activeTab === "templates" ? (
-        <>
-          {/* 搜索栏 */}
-          <div className="ep-left-header">
-            <Input.Search
-              placeholder="搜索模板..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              allowClear
-            />
-            <Select
-              placeholder="按分类筛选"
-              value={filterCategory || undefined}
-              onChange={(v: string) => setFilterCategory(v || "")}
-              allowClear
-              options={categories.map((c) => ({
-                value: c.name,
-                label: c.name,
-              }))}
-            />
-          </div>
+      {/* Chip 分类筛选 */}
+      <div className="ep-filter-chips">
+        {filterCategories.map((cat) => (
+          <button
+            key={cat}
+            className={`ep-filter-chip ${currentFilter === cat ? "active" : ""}`}
+            onClick={() => onFilterChange(cat)}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
 
-          {/* 模板列表 */}
-          <div className="ep-left-list">
-            {isLoadingTemplates ? (
-              <div className="ep-left-empty">
-                <div className="ep-left-empty-icon">⏳</div>
-                <p>加载中...</p>
+      {/* 模板列表 */}
+      <div className="ep-template-list">
+        {loading ? (
+          <div className="ep-loading">
+            <span>⏳</span>
+            <span>加载中...</span>
+          </div>
+        ) : templates.length === 0 ? (
+          <div className="ep-empty">
+            <span>📭</span>
+            <span>暂无模板</span>
+          </div>
+        ) : (
+          templates.map((tpl) => (
+            <div
+              key={tpl.id}
+              className={`ep-template-card ${loadedTemplateId === tpl.id ? "active" : ""}`}
+              onClick={() => onLoadTemplate(tpl.id)}
+            >
+              <div className="ep-template-card-header">
+                <span className="ep-template-card-name">{tpl.name}</span>
+                <span className="ep-template-card-mode">
+                  {MODE_LABELS[tpl.mode]}
+                </span>
               </div>
-            ) : filteredTemplates.length === 0 ? (
-              <div className="ep-left-empty">
-                <div className="ep-left-empty-icon">📭</div>
-                <p>暂无模板</p>
+              <div className="ep-template-card-meta">
+                <span>⏱️ {tpl.estimated_duration}s</span>
+                <span>📐 {tpl.segments.length}片段</span>
               </div>
-            ) : (
-              filteredTemplates.map((tpl) => {
-                const modeColor =
-                  MODE_COLORS[tpl.mode as TemplateMode] || "blue";
-                const variant = modeVariantMap[modeColor] || "primary";
-                return (
-                  <div
-                    key={tpl.id}
-                    className={`ep-template-card${loadedTemplateId === tpl.id ? " selected" : ""}`}
-                    onClick={() => onTemplateSelect(tpl)}
-                  >
-                    <div className="ep-template-card-name">{tpl.name}</div>
-                    <div className="ep-template-card-tags">
-                      <Tag variant={variant}>
-                        {MODE_LABELS[tpl.mode as TemplateMode] || tpl.mode}
-                      </Tag>
-                      {tpl.tags.slice(0, 2).map((tag) => (
-                        <Tag key={tag} variant="info">
-                          {tag}
-                        </Tag>
-                      ))}
-                    </div>
-                    <div className="ep-template-card-meta">
-                      {tpl.segments.length} 片段 · ~{tpl.estimated_duration}s
-                    </div>
-                  </div>
-                );
-              })
-            )}
-          </div>
-
-          {/* 底部操作 */}
-          {loadedTemplateId && (
-            <div className="ep-left-footer">
-              <button className="ep-new-template-btn" onClick={onNewTemplate}>
-                ✨ 新建空白模板
-              </button>
+              {tpl.tags.length > 0 && (
+                <div className="ep-template-card-tags">
+                  {tpl.tags.map((tag) => (
+                    <span key={tag} className="ep-template-tag">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
             </div>
-          )}
-        </>
-      ) : (
-        <>
-          {/* 素材 Tab — 使用 AssetSelector */}
-          <div className="ep-left-media">
-            <AssetSelector
-              assets={assets}
-              selectedIds={selectedAssetIds}
-              onSelectionChange={setSelectedAssetIds}
-              onAssetDragStart={onAssetDragStart}
-              showQualityFilter
-              showBatchSelect
-              compact
-            />
-          </div>
-
-          {/* 批量添加按钮 */}
-          {selectedAssetIds.length > 0 && onBatchAddAssets && (
-            <div className="ep-left-media-footer">
-              <Button
-                buttonType="primary"
-                buttonSize="sm"
-                onClick={handleBatchAdd}
-                block
-              >
-                📦 添加选中素材到时间线 ({selectedAssetIds.length})
-              </Button>
-            </div>
-          )}
-        </>
-      )}
+          ))
+        )}
+      </div>
     </div>
   );
 };
diff --git a/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx b/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx
index a399d891b..824dfba7f 100644
--- a/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx
+++ b/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx
@@ -1,416 +1,113 @@
 /**
- * 预览播放器 — V21 设计系统
- * 模拟播放 EditPlan 片段序列，支持播放/暂停、进度条拖拽、时间线点击跳转
- * 任务 2.16
+ * 预览区 — V8 原型 1:1 还原
+ * 手机模型预览(150x267) + 封面预览(150x267) 并排
+ * 封面右侧竖排4个方案按钮
  */
-import React, { useState, useRef, useCallback, useEffect } from "react";
-import "./PreviewPlayer.css";
-import type { EditPlanClip } from "@/api/editPlans";
-import { MATERIAL_TYPE_ICONS } from "@/api/editPlans";
+import React from "react";
 
-interface PreviewPlayerProps {
-  clips: EditPlanClip[];
-  totalDuration: number;
-  selectedClipId: string | null;
-  onSelectClip: (clipId: string | null) => void;
+interface ClipData {
+  id: string;
+  name: string;
+  duration: number;
+  material_type: string;
+  thumbnail?: string;
+  assetName?: string;
 }
 
-/* ── 片段颜色（与 TimelinePanel 保持一致） ── */
-const CLIP_COLORS = [
-  "#4f46e5",
-  "#7c3aed",
-  "#2563eb",
-  "#0891b2",
-  "#059669",
-  "#d97706",
-];
-const getClipColor = (idx: number) => CLIP_COLORS[idx % CLIP_COLORS.length];
+interface CoverScheme {
+  key: string;
+  label: string;
+}
 
-/* ── 格式化时间 mm:ss ── */
-const formatTime = (seconds: number): string => {
-  const m = Math.floor(seconds / 60);
-  const s = Math.floor(seconds % 60);
-  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-};
+interface PreviewPlayerProps {
+  clips: ClipData[];
+  selectedClipId: string | null;
+  isPlaying: boolean;
+  currentCoverScheme: string;
+  coverSchemes: CoverScheme[];
+  onClipSelect: (clipId: string) => void;
+  onCoverSchemeChange: (scheme: string) => void;
+  onPlayPause: () => void;
+}
 
-/* ── 根据播放进度计算当前片段索引 ── */
-const getClipIndexAtTime = (clips: EditPlanClip[], time: number): number => {
-  let elapsed = 0;
-  for (let i = 0; i < clips.length; i++) {
-    elapsed += clips[i].duration;
-    if (time < elapsed) return i;
-  }
-  return Math.max(0, clips.length - 1);
-};
-
-/* ── 根据片段索引计算起始时间 ── */
-const getClipStartTime = (clips: EditPlanClip[], clipIndex: number): number => {
-  let time = 0;
-  for (let i = 0; i < clipIndex; i++) {
-    time += clips[i].duration;
-  }
-  return time;
+const MATERIAL_ICONS: Record<string, string> = {
+  video: "🎬",
+  image: "🖼️",
+  audio: "🎵",
+  voiceover: "🎙️",
 };
 
 const PreviewPlayer: React.FC<PreviewPlayerProps> = ({
   clips,
-  totalDuration,
   selectedClipId,
-  onSelectClip,
+  isPlaying,
+  currentCoverScheme,
+  coverSchemes,
+  onCoverSchemeChange,
+  onPlayPause,
 }) => {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const progressRef = useRef<HTMLDivElement>(null);
-  const wasPlayingRef = useRef(false);
-
-  const currentClipIndex =
-    clips.length > 0 ? getClipIndexAtTime(clips, currentTime) : -1;
-  const currentClip = currentClipIndex >= 0 ? clips[currentClipIndex] : null;
-  const clipStartTime =
-    currentClipIndex >= 0 ? getClipStartTime(clips, currentClipIndex) : 0;
-  const clipProgress =
-    currentClip && currentClip.duration > 0
-      ? ((currentTime - clipStartTime) / currentClip.duration) * 100
-      : 0;
-  const overallProgress =
-    totalDuration > 0 ? (currentTime / totalDuration) * 100 : 0;
-
-  /* ── 播放控制 ── */
-  const stopPlayback = useCallback(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-    setIsPlaying(false);
-  }, []);
-
-  const startPlayback = useCallback(() => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    timerRef.current = setInterval(() => {
-      setCurrentTime((prev) => {
-        const next = prev + 0.1;
-        if (next >= totalDuration) {
-          // 播放结束
-          if (timerRef.current) clearInterval(timerRef.current);
-          timerRef.current = null;
-          setIsPlaying(false);
-          return 0; // 回到起点
-        }
-        return next;
-      });
-    }, 100);
-    setIsPlaying(true);
-  }, [totalDuration]);
-
-  const togglePlay = useCallback(() => {
-    if (clips.length === 0) return;
-    if (isPlaying) {
-      stopPlayback();
-    } else {
-      // 如果在末尾，从头开始
-      if (currentTime >= totalDuration - 0.05) {
-        setCurrentTime(0);
-      }
-      startPlayback();
-    }
-  }, [
-    isPlaying,
-    currentTime,
-    totalDuration,
-    clips.length,
-    startPlayback,
-    stopPlayback,
-  ]);
-
-  /* ── 停止/重置 ── */
-  const handleStop = useCallback(() => {
-    stopPlayback();
-    setCurrentTime(0);
-  }, [stopPlayback]);
-
-  /* ── 上一段/下一段 ── */
-  const handlePrevClip = useCallback(() => {
-    if (currentClipIndex <= 0) {
-      setCurrentTime(0);
-    } else {
-      setCurrentTime(getClipStartTime(clips, currentClipIndex - 1));
-    }
-  }, [currentClipIndex, clips]);
-
-  const handleNextClip = useCallback(() => {
-    if (currentClipIndex < clips.length - 1) {
-      setCurrentTime(getClipStartTime(clips, currentClipIndex + 1));
-    } else {
-      setCurrentTime(totalDuration);
-    }
-  }, [currentClipIndex, clips, totalDuration]);
-
-  /* ── 进度条拖拽 ── */
-  const updateTimeFromMouse = useCallback(
-    (clientX: number) => {
-      if (!progressRef.current || totalDuration === 0) return;
-      const rect = progressRef.current.getBoundingClientRect();
-      const ratio = Math.max(
-        0,
-        Math.min(1, (clientX - rect.left) / rect.width),
-      );
-      setCurrentTime(ratio * totalDuration);
-    },
-    [totalDuration],
-  );
-
-  const handleProgressMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      setIsDragging(true);
-      wasPlayingRef.current = isPlaying;
-      if (isPlaying) stopPlayback();
-      updateTimeFromMouse(e.clientX);
-    },
-    [isPlaying, stopPlayback, updateTimeFromMouse],
-  );
-
-  useEffect(() => {
-    if (!isDragging) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      updateTimeFromMouse(e.clientX);
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      if (wasPlayingRef.current) {
-        startPlayback();
-      }
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, updateTimeFromMouse, startPlayback]);
-
-  /* ── 点击时间线片段跳转 ── */
-  const handleTimelineSegmentClick = useCallback(
-    (idx: number) => {
-      setCurrentTime(getClipStartTime(clips, idx));
-      onSelectClip(clips[idx].id);
-    },
-    [clips, onSelectClip],
-  );
-
-  /* ── 组件卸载时清理定时器 ── */
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-    };
-  }, []);
-
-  /* ── 片段变化时同步播放位置（外部选中片段跳转） ── */
-  useEffect(() => {
-    if (selectedClipId && !isPlaying) {
-      const idx = clips.findIndex((c) => c.id === selectedClipId);
-      if (idx >= 0) {
-        const startTime = getClipStartTime(clips, idx);
-        // 只在当前不在该片段范围内时跳转
-        const endTime = startTime + clips[idx].duration;
-        if (currentTime < startTime || currentTime >= endTime) {
-          setCurrentTime(startTime);
-        }
-      }
-    }
-  }, [selectedClipId, clips, isPlaying]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  /* ── 空状态 ── */
-  if (clips.length === 0) {
-    return (
-      <div className="ep-preview">
-        <div className="ep-preview-screen">
-          <div className="ep-preview-empty">
-            <div className="ep-preview-empty-icon">🎬</div>
-            <p>添加片段后预览</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  const selectedClip = clips.find((c) => c.id === selectedClipId);
+  const displayClip = selectedClip || clips[0];
 
   return (
-    <div className="ep-preview">
-      {/* ── 预览画面 ── */}
-      <div className="ep-preview-screen">
-        {/* 背景渐变（模拟视频画面） */}
-        <div
-          className="ep-preview-visual"
-          style={{
-            background: `linear-gradient(135deg, ${getClipColor(currentClipIndex)}33, ${getClipColor(currentClipIndex)}11)`,
-          }}
-        >
-          {/* 片段类型图标 */}
-          <div className="ep-preview-type-icon">
-            {currentClip
-              ? MATERIAL_TYPE_ICONS[currentClip.material_type] || "📄"
-              : "🎬"}
-          </div>
-
-          {/* 文案字幕 */}
-          {currentClip?.script_text && (
-            <div className="ep-preview-subtitle">{currentClip.script_text}</div>
-          )}
-
-          {/* 片段序号角标 */}
-          <div
-            className="ep-preview-clip-badge"
-            style={{ backgroundColor: getClipColor(currentClipIndex) }}
-          >
-            #{currentClipIndex + 1}
-          </div>
-
-          {/* 素材类型标签 */}
-          {currentClip && (
-            <div className="ep-preview-material-tag">
-              {MATERIAL_TYPE_ICONS[currentClip.material_type]}{" "}
-              {currentClip.material_type}
-            </div>
-          )}
+    <div className="ep-preview-area">
+      {/* 手机模型预览 */}
+      <div className="ep-phone-preview">
+        <div className="ep-phone-status-bar">
+          <span>9:41</span>
+          <span>📶 🔋</span>
         </div>
-      </div>
-
-      {/* ── 控制栏 ── */}
-      <div className="ep-preview-controls">
-        {/* 左侧：时间 */}
-        <div className="ep-preview-time">
-          <span className="ep-preview-time-current">
-            {formatTime(currentTime)}
-          </span>
-          <span className="ep-preview-time-sep">/</span>
-          <span className="ep-preview-time-total">
-            {formatTime(totalDuration)}
-          </span>
-        </div>
-
-        {/* 中间：播放控制按钮 */}
-        <div className="ep-preview-buttons">
-          <button
-            className="ep-preview-btn"
-            onClick={handlePrevClip}
-            title="上一段"
-          >
-            ⏮
-          </button>
-          <button
-            className="ep-preview-btn ep-preview-btn-play"
-            onClick={togglePlay}
-            title={isPlaying ? "暂停" : "播放"}
-          >
-            {isPlaying ? "⏸" : "▶"}
-          </button>
-          <button className="ep-preview-btn" onClick={handleStop} title="停止">
-            ⏹
-          </button>
-          <button
-            className="ep-preview-btn"
-            onClick={handleNextClip}
-            title="下一段"
-          >
-            ⏭
-          </button>
-        </div>
-
-        {/* 右侧：片段信息 */}
-        <div className="ep-preview-clip-info">
-          {currentClip && (
+        <div className="ep-phone-content">
+          {displayClip ? (
             <>
-              <span className="ep-preview-clip-idx">
-                片段 {currentClipIndex + 1}/{clips.length}
-              </span>
-              <span className="ep-preview-clip-dur">
-                {currentClip.duration}s
-              </span>
+              <button className="ep-phone-play-btn" onClick={onPlayPause}>
+                {isPlaying ? "⏸" : "▶"}
+              </button>
+              <div className="ep-phone-progress">
+                <div
+                  className="ep-phone-progress-fill"
+                  style={{ width: isPlaying ? "45%" : "0%" }}
+                />
+              </div>
+              <div className="ep-phone-clip-label">
+                {displayClip.name}
+              </div>
             </>
+          ) : (
+            <span style={{ color: "#444", fontSize: 11 }}>暂无片段</span>
           )}
         </div>
       </div>
 
-      {/* ── 进度条（可拖拽） ── */}
-      <div
-        className="ep-preview-progress"
-        ref={progressRef}
-        onMouseDown={handleProgressMouseDown}
-      >
-        <div className="ep-preview-progress-track">
-          {/* 片段色块背景 */}
-          {clips.map((clip, idx) => (
-            <div
-              key={clip.id}
-              className="ep-preview-progress-segment"
-              style={{
-                width: `${(clip.duration / totalDuration) * 100}%`,
-                backgroundColor: getClipColor(idx),
-                opacity: idx === currentClipIndex ? 0.6 : 0.25,
-              }}
-            />
-          ))}
-          {/* 已播放覆盖层 */}
-          <div
-            className="ep-preview-progress-fill"
-            style={{ width: `${overallProgress}%` }}
-          />
+      {/* 封面预览 */}
+      <div className="ep-cover-preview">
+        <div className="ep-cover-image">
+          {displayClip ? (
+            <span style={{ fontSize: 24 }}>
+              {MATERIAL_ICONS[displayClip.material_type] || "🎬"}
+            </span>
+          ) : (
+            <span>暂无封面</span>
+          )}
+        </div>
+        <div className="ep-cover-label">
+          {coverSchemes.find((s) => s.key === currentCoverScheme)?.label ||
+            "封面预览"}
         </div>
-        {/* 拖拽手柄 */}
-        <div
-          className="ep-preview-progress-handle"
-          style={{ left: `${overallProgress}%` }}
-        />
       </div>
 
-      {/* ── 迷你时间线（可点击跳转） ── */}
-      <div className="ep-preview-timeline">
-        {clips.map((clip, idx) => {
-          const isActive = idx === currentClipIndex;
-          const isSelected = clip.id === selectedClipId;
-          return (
-            <div
-              key={clip.id}
-              className={`ep-preview-timeline-seg${isActive ? " active" : ""}${isSelected ? " selected" : ""}`}
-              style={{
-                width: `${(clip.duration / totalDuration) * 100}%`,
-                backgroundColor: isActive
-                  ? getClipColor(idx)
-                  : `${getClipColor(idx)}55`,
-              }}
-              onClick={() => handleTimelineSegmentClick(idx)}
-              title={`片段 ${idx + 1}: ${clip.duration}s`}
-            >
-              <span className="ep-preview-timeline-seg-label">
-                {MATERIAL_TYPE_ICONS[clip.material_type]}
-              </span>
-            </div>
-          );
-        })}
-        {/* 播放头指示器 */}
-        <div
-          className="ep-preview-playhead"
-          style={{ left: `${overallProgress}%` }}
-        />
+      {/* 封面方案按钮（竖排4个） */}
+      <div className="ep-cover-tags">
+        {coverSchemes.map((scheme) => (
+          <button
+            key={scheme.key}
+            className={`ep-cover-tag ${currentCoverScheme === scheme.key ? "active" : ""}`}
+            onClick={() => onCoverSchemeChange(scheme.key)}
+          >
+            {scheme.label}
+          </button>
+        ))}
       </div>
-
-      {/* ── 片段内进度 ── */}
-      {currentClip && (
-        <div className="ep-preview-clip-progress">
-          <div
-            className="ep-preview-clip-progress-fill"
-            style={{
-              width: `${clipProgress}%`,
-              backgroundColor: getClipColor(currentClipIndex),
-            }}
-          />
-        </div>
-      )}
     </div>
   );
 };
diff --git a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
index edafbfda3..a560fe147 100644
--- a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
@@ -1,322 +1,224 @@
 /**
- * 中间时间线面板 — V21 设计系统
- * 可视化时长条 + 片段卡片 + 拖拽排序 + 素材拖入
+ * 水平轨道时间线 — V8 原型 1:1 还原
+ * 时间标尺(20px) + 水平片段卡片轨道(100x100) + HTML5拖拽排序
  */
 import React, { useState, useRef } from "react";
-import { Button } from "@/components/ui";
-import type { EditPlanClip, MediaAsset } from "@/api/editPlans";
-import { MATERIAL_TYPE_ICONS, TRANSITION_OPTIONS } from "@/api/editPlans";
+import type { MediaAsset } from "@/api/editPlans";
+
+interface ClipData {
+  id: string;
+  name: string;
+  duration: number;
+  material_type: string;
+  thumbnail?: string;
+  assetName?: string;
+  media_asset_id?: string;
+  template_segment_id?: string;
+  script_text?: string;
+  order?: number;
+}
 
 interface TimelinePanelProps {
-  clips: EditPlanClip[];
+  clips: ClipData[];
   selectedClipId: string | null;
-  onSelectClip: (clipId: string | null) => void;
-  onRemoveClip: (clipId: string) => void;
-  onReorderClips: (fromIdx: number, toIdx: number) => void;
-  onAssetDrop: (asset: MediaAsset, insertIdx: number) => void;
-  onBatchAssetDrop?: (assets: MediaAsset[], insertIdx: number) => void;
-  onAddClip: () => void;
-  totalDuration: number;
+  currentMode: string;
+  onClipSelect: (clipId: string) => void;
+  onClipReorder: (fromIdx: number, toIdx: number) => void;
+  onClipRemove: (clipId: string) => void;
+  onAssetDropToTimeline: (asset: MediaAsset) => void;
+  onAssetDropToClip: (clipId: string, asset: MediaAsset) => void;
+  mediaAssets: MediaAsset[];
 }
 
+const MATERIAL_ICONS: Record<string, string> = {
+  video: "🎬",
+  image: "🖼️",
+  audio: "🎵",
+  voiceover: "🎙️",
+};
+
 const TimelinePanel: React.FC<TimelinePanelProps> = ({
   clips,
   selectedClipId,
-  onSelectClip,
-  onRemoveClip,
-  onReorderClips,
-  onAssetDrop,
-  onBatchAssetDrop,
-  onAddClip,
-  totalDuration,
+  currentMode,
+  onClipSelect,
+  onClipReorder,
+  onClipRemove,
+  onAssetDropToTimeline,
+  onAssetDropToClip,
 }) => {
+  const [dragIdx, setDragIdx] = useState<number | null>(null);
   const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
-  const [isDragOverEmpty, setIsDragOverEmpty] = useState(false);
-  const dragIdxRef = useRef<number | null>(null);
+  const dragRef = useRef<number | null>(null);
 
-  /* ── 内部片段拖拽排序 ── */
-  const handleClipDragStart = (e: React.DragEvent, idx: number) => {
-    dragIdxRef.current = idx;
-    e.dataTransfer.setData("application/x-clip-index", String(idx));
+  /* ── 片段拖拽排序 ── */
+  const handleDragStart = (e: React.DragEvent, idx: number) => {
+    dragRef.current = idx;
+    setDragIdx(idx);
+    e.dataTransfer.setData("application/x-clip-drag", String(idx));
     e.dataTransfer.effectAllowed = "move";
   };
 
-  const handleClipDragOver = (e: React.DragEvent, idx: number) => {
+  const handleDragOver = (e: React.DragEvent, idx: number) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     setDragOverIdx(idx);
   };
 
-  const handleClipDragEnd = () => {
-    dragIdxRef.current = null;
+  const handleDragEnd = () => {
+    dragRef.current = null;
+    setDragIdx(null);
     setDragOverIdx(null);
   };
 
-  /* ── 外部素材拖入 ── */
-  const isAssetDrag = (e: React.DragEvent) =>
-    e.dataTransfer.types.includes("application/x-media-asset") ||
-    e.dataTransfer.types.includes("application/x-media-assets");
-
-  const handleAssetDragOver = (e: React.DragEvent) => {
-    if (isAssetDrag(e)) {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "copy";
-    }
-  };
-
-  const handleDropOnClip = (e: React.DragEvent, insertIdx: number) => {
+  const handleDrop = (e: React.DragEvent, toIdx: number) => {
     e.preventDefault();
     setDragOverIdx(null);
-
-    // 内部片段排序
-    const clipIdx = e.dataTransfer.getData("application/x-clip-index");
-    if (clipIdx !== "") {
-      const fromIdx = Number(clipIdx);
-      if (fromIdx !== insertIdx && fromIdx !== insertIdx - 1) {
-        const adjustedTo = fromIdx < insertIdx ? insertIdx - 1 : insertIdx;
-        onReorderClips(fromIdx, adjustedTo);
+    const fromStr = e.dataTransfer.getData("application/x-clip-drag");
+    if (fromStr !== "") {
+      const fromIdx = Number(fromStr);
+      if (fromIdx !== toIdx) {
+        onClipReorder(fromIdx, toIdx);
       }
       return;
     }
-
-    // 批量素材拖入
-    const assetsJson = e.dataTransfer.getData("application/x-media-assets");
-    if (assetsJson) {
-      try {
-        const assets: MediaAsset[] = JSON.parse(assetsJson);
-        if (onBatchAssetDrop) {
-          onBatchAssetDrop(assets, insertIdx);
-        } else {
-          assets.forEach((asset, i) => onAssetDrop(asset, insertIdx + i));
-        }
-      } catch {
-        // ignore
-      }
-      return;
-    }
-
-    // 单个素材拖入
+    // 素材拖到片段上
     const assetJson = e.dataTransfer.getData("application/x-media-asset");
     if (assetJson) {
       try {
         const asset: MediaAsset = JSON.parse(assetJson);
-        onAssetDrop(asset, insertIdx);
+        onAssetDropToClip(clips[toIdx].id, asset);
       } catch {
-        // ignore
+        /* ignore */
       }
     }
   };
 
-  const handleDropOnEmpty = (e: React.DragEvent) => {
+  /* ── 空轨道区域拖入 ── */
+  const handleEmptyDrop = (e: React.DragEvent) => {
     e.preventDefault();
-    setIsDragOverEmpty(false);
-
-    // 批量素材拖入
-    const assetsJson = e.dataTransfer.getData("application/x-media-assets");
-    if (assetsJson) {
-      try {
-        const assets: MediaAsset[] = JSON.parse(assetsJson);
-        if (onBatchAssetDrop) {
-          onBatchAssetDrop(assets, clips.length);
-        } else {
-          assets.forEach((asset, i) => onAssetDrop(asset, clips.length + i));
-        }
-      } catch {
-        // ignore
-      }
-      return;
-    }
-
-    // 单个素材拖入
     const assetJson = e.dataTransfer.getData("application/x-media-asset");
     if (assetJson) {
       try {
         const asset: MediaAsset = JSON.parse(assetJson);
-        onAssetDrop(asset, clips.length);
+        onAssetDropToTimeline(asset);
       } catch {
-        // ignore
+        /* ignore */
       }
     }
   };
 
   const handleEmptyDragOver = (e: React.DragEvent) => {
-    if (isAssetDrag(e)) {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "copy";
-      setIsDragOverEmpty(true);
-    }
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
   };
 
-  /* ── 转场标签 ── */
-  const getTransitionLabel = (clip: EditPlanClip) => {
-    if (!clip.transition || clip.transition.type === "none") return null;
-    const opt = TRANSITION_OPTIONS.find(
-      (o) => o.value === clip.transition?.type,
-    );
-    return opt ? opt.label : clip.transition.type;
-  };
-
-  /* ── 时长条宽度百分比 ── */
-  const getClipWidth = (clip: EditPlanClip) => {
-    if (totalDuration === 0) return 100 / Math.max(clips.length, 1);
-    return (clip.duration / totalDuration) * 100;
-  };
-
-  /* ── 片段颜色 ── */
-  const clipColors = [
-    "#4f46e5",
-    "#7c3aed",
-    "#2563eb",
-    "#0891b2",
-    "#059669",
-    "#d97706",
-  ];
-  const getClipColor = (idx: number) => clipColors[idx % clipColors.length];
+  /* ── 时间标尺 ── */
+  const totalDuration = clips.reduce((s, c) => s + c.duration, 0);
+  const rulerMarks: number[] = [];
+  const step = totalDuration <= 30 ? 5 : totalDuration <= 60 ? 10 : 15;
+  for (let t = 0; t <= totalDuration + step; t += step) {
+    rulerMarks.push(t);
+  }
 
   return (
-    <div>
-      {/* 可视化时长条 */}
-      <div className="ep-timeline-bar">
-        <div className="ep-timeline-bar-label">
-          时间线{" "}
-          <span className="ep-timeline-bar-duration">{totalDuration}s</span>
-        </div>
-        <div className="ep-timeline-bar-track">
-          {clips.map((clip, idx) => (
-            <div
-              key={clip.id}
-              className="ep-timeline-bar-segment"
-              style={{
-                width: `${getClipWidth(clip)}%`,
-                backgroundColor: getClipColor(idx),
-              }}
-              title={`片段 ${idx + 1}: ${clip.duration}s`}
-            />
-          ))}
-          {clips.length === 0 && (
-            <div className="ep-timeline-bar-empty">拖入素材开始编辑</div>
-          )}
-        </div>
-      </div>
-
-      {/* 片段列表 */}
+    <div className="ep-timeline-area">
+      {/* 时间线头部 */}
       <div className="ep-timeline-header">
-        <h3>片段列表 ({clips.length})</h3>
-        <Button buttonType="secondary" buttonSize="sm" onClick={onAddClip}>
-          ＋ 添加片段
-        </Button>
+        <span className="ep-timeline-title">
+          时间线 · {clips.length} 个片段
+        </span>
+        <div className="ep-timeline-actions">
+          <button
+            className="ep-timeline-action-btn"
+            onClick={() => {
+              if (clips.length > 1) {
+                const last = clips[clips.length - 1];
+                onClipRemove(last.id);
+              }
+            }}
+            title="删除最后一个片段"
+          >
+            ✕ 末尾
+          </button>
+        </div>
       </div>
 
-      <div className="ep-timeline-list">
+      {/* 一镜到底提示 */}
+      {currentMode === "one_take" && (
+        <div className="ep-one-take-hint">
+          🎥 一镜到底模式：所有片段将无缝衔接，不可添加转场
+        </div>
+      )}
+
+      {/* 时间标尺 */}
+      <div className="ep-time-ruler">
+        <div
+          className="ep-time-ruler-inner"
+          style={{ width: Math.max(clips.length * 108, 300) }}
+        >
+          {rulerMarks.map((t) => (
+            <span
+              key={t}
+              className="ep-time-mark"
+              style={{
+                left:
+                  totalDuration > 0
+                    ? `${(t / totalDuration) * clips.length * 108}px`
+                    : `${t * 20}px`,
+              }}
+            >
+              {t}s
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* 水平片段轨道 */}
+      <div
+        className="ep-clip-track"
+        onDrop={handleEmptyDrop}
+        onDragOver={handleEmptyDragOver}
+      >
         {clips.length === 0 ? (
-          <div
-            className={`ep-timeline-empty-drop${isDragOverEmpty ? " active" : ""}`}
-            onDragOver={handleEmptyDragOver}
-            onDragLeave={() => setIsDragOverEmpty(false)}
-            onDrop={handleDropOnEmpty}
-          >
-            <div className="ep-timeline-empty-icon">🎬</div>
-            <p>从左侧拖拽素材到这里</p>
-            <span>或点击「添加片段」手动创建</span>
+          <div className="ep-track-empty">
+            🎬 拖入素材或从模板加载片段
           </div>
         ) : (
-          clips.map((clip, idx) => {
-            const isSelected = clip.id === selectedClipId;
-            const transitionLabel = getTransitionLabel(clip);
+          clips.map((clip, idx) => (
+            <div
+              key={clip.id}
+              className={`ep-clip-card ${selectedClipId === clip.id ? "selected" : ""} ${dragIdx === idx ? "dragging" : ""} ${dragOverIdx === idx ? "drag-over" : ""}`}
+              draggable
+              onDragStart={(e) => handleDragStart(e, idx)}
+              onDragOver={(e) => handleDragOver(e, idx)}
+              onDragEnd={handleDragEnd}
+              onDrop={(e) => handleDrop(e, idx)}
+              onClick={() => onClipSelect(clip.id)}
+            >
+              {/* 缩略图区域 */}
+              <div className="ep-clip-thumbnail">
+                {MATERIAL_ICONS[clip.material_type] || "🎬"}
+              </div>
 
-            return (
-              <React.Fragment key={clip.id}>
-                {/* 拖放插入指示器 */}
-                {dragOverIdx === idx && (
-                  <div className="ep-timeline-drop-indicator" />
-                )}
+              {/* 片段信息 */}
+              <div className="ep-clip-info">
+                <span className="ep-clip-name">{clip.name}</span>
+                <span className="ep-clip-duration">{clip.duration}s</span>
+              </div>
 
-                <div
-                  className={`ep-clip-card${isSelected ? " selected" : ""}${dragOverIdx === idx ? " drag-over" : ""}`}
-                  draggable
-                  onDragStart={(e) => handleClipDragStart(e, idx)}
-                  onDragOver={(e) => {
-                    handleClipDragOver(e, idx);
-                    handleAssetDragOver(e);
-                  }}
-                  onDragEnd={handleClipDragEnd}
-                  onDrop={(e) => handleDropOnClip(e, idx)}
-                  onClick={() => onSelectClip(clip.id)}
-                >
-                  {/* 拖拽手柄 */}
-                  <span className="ep-clip-drag">⠿</span>
-
-                  {/* 序号徽标 */}
-                  <span
-                    className="ep-clip-index"
-                    style={{ backgroundColor: getClipColor(idx) }}
-                  >
-                    #{idx + 1}
-                  </span>
-
-                  {/* 片段信息 */}
-                  <div className="ep-clip-info">
-                    <div className="ep-clip-info-top">
-                      <span className="ep-clip-type-icon">
-                        {MATERIAL_TYPE_ICONS[clip.material_type] || "📄"}
-                      </span>
-                      <span className="ep-clip-script">
-                        {clip.script_text || (
-                          <em className="ep-clip-script-empty">未填写文案</em>
-                        )}
-                      </span>
-                    </div>
-                    <div className="ep-clip-info-bottom">
-                      <div className="ep-clip-duration-bar">
-                        <div
-                          className="ep-clip-duration-fill"
-                          style={{
-                            width: `${Math.min(100, (clip.duration / 60) * 100)}%`,
-                            backgroundColor: getClipColor(idx),
-                          }}
-                        />
-                      </div>
-                      <span className="ep-clip-duration-text">
-                        {clip.duration}s
-                      </span>
-                      {clip.media_asset_id && (
-                        <span
-                          className="ep-clip-asset-badge"
-                          title="已关联素材"
-                        >
-                          🔗
-                        </span>
-                      )}
-                      {transitionLabel && (
-                        <span className="ep-clip-transition-badge">
-                          ✨ {transitionLabel}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* 操作按钮 */}
-                  <div className="ep-clip-actions">
-                    <button
-                      className="ep-clip-action-btn"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onRemoveClip(clip.id);
-                      }}
-                      title="删除片段"
-                    >
-                      ✕
-                    </button>
-                  </div>
-                </div>
-              </React.Fragment>
-            );
-          })
-        )}
-
-        {/* 末尾插入指示器 */}
-        {clips.length > 0 && dragOverIdx === clips.length && (
-          <div className="ep-timeline-drop-indicator" />
+              {/* 删除按钮 */}
+              <button
+                className="ep-clip-remove"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClipRemove(clip.id);
+                }}
+              >
+                ✕
+              </button>
+            </div>
+          ))
         )}
       </div>
     </div>