From 11c00811ebd37934d49243db9e0a1df13a1681a6 Mon Sep 17 00:00:00 2001
From: CI Bot <ci-bot@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 09:52:58 +0800
Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=E7=94=9F=E6=88=90=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=8F=96=E6=B6=88=E6=8E=A5=E5=8F=A3=20-=20POST=20/tas?=
 =?UTF-8?q?ks/{task=5Fid}/cancel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增生成任务取消接口：
- 支持 pending / running 状态的任务取消
- 取消后状态变为 cancelled，记录取消日志
- 终态（completed/failed/cancelled）不可取消，返回 409
- 权限校验：只能取消自己创建的任务
- 复用领域模型已有的 mark_cancelled 方法
---
 apps/api/app/api/routes/generation_tasks.py | 50 +++++++++++++++++++++
 1 file changed, 50 insertions(+)
 mode change 100644 => 100755 apps/api/app/api/routes/generation_tasks.py

diff --git a/apps/api/app/api/routes/generation_tasks.py b/apps/api/app/api/routes/generation_tasks.py
old mode 100644
new mode 100755
index 7f7b3fa60..4f625ec53
--- a/apps/api/app/api/routes/generation_tasks.py
+++ b/apps/api/app/api/routes/generation_tasks.py
@@ -427,3 +427,53 @@ def retry_generation_task(
             detail="系统繁忙，请稍后再试",
         ) from None
     return _to_generation_task_response(retried)
+
+
+@router.post("/tasks/{task_id}/cancel", response_model=GenerationTaskResponse)
+def cancel_generation_task(
+    task_id: str,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    generation_task_repository: Any = Depends(get_generation_task_repository),
+) -> GenerationTaskResponse:
+    """取消生成任务。
+
+    仅 pending / running 状态的任务可取消；取消后状态变为 cancelled。
+    对于已在运行的 Celery 任务，标记为 cancelled 后，worker 在下次检查点会中止执行。
+    """
+    task = generation_task_repository.get(task_id)
+    if task is None:
+        raise HTTPException(status_code=404, detail="Generation task not found")
+
+    # 权限校验
+    if task.created_by_user_id and task.created_by_user_id != authenticated_user.user.id:
+        raise HTTPException(status_code=403, detail="Access denied to this task")
+
+    status_val = task.status.value if hasattr(task.status, "value") else str(task.status)
+
+    # 终态不可取消
+    if status_val in ("completed", "failed", "cancelled"):
+        raise HTTPException(
+            status_code=409,
+            detail=f"Cannot cancel task in {status_val} status",
+        )
+
+    # 执行取消
+    try:
+        task.mark_cancelled()
+        task.append_log(
+            stage="cancelled",
+            message="用户主动取消任务",
+            level="INFO",
+            cancelled_by=authenticated_user.user.id,
+        )
+        generation_task_repository.update(task)
+        logger.info(
+            "生成任务已取消: task_id=%s user_id=%s previous_status=%s",
+            task_id,
+            authenticated_user.user.id,
+            status_val,
+        )
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e)) from e
+
+    return _to_generation_task_response(task)
-- 
2.54.0


From a08eea16309f705fd8be343dc307d946fd3b14fb Mon Sep 17 00:00:00 2001
From: CI Bot <ci-bot@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 10:06:02 +0800
Subject: [PATCH 02/17] =?UTF-8?q?feat:=20worker=E6=B8=B2=E6=9F=93=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=8F=96=E6=B6=88=E6=A3=80=E6=9F=A5=E7=82=B9=20-=20?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E4=B8=8B=E8=BD=BD=E5=90=8E=E6=A3=80=E6=B5=8B?=
 =?UTF-8?q?cancelled=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在渲染主流程中增加取消检查点：
- 素材下载完成后、启动FFmpeg前，检查generation_task状态
- 如果已被取消（cancelled），立即中止，不启动渲染
- 计划状态从 rendering 切回 editing，用户可继续编辑
- 与 API 层的取消接口配套

不修改 FFmpeg 运行时取消（后续迭代），覆盖排队/下载期间取消的场景
---
 .../worker_app/tasks/edit_plan_generation.py    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/worker/worker_app/tasks/edit_plan_generation.py b/apps/worker/worker_app/tasks/edit_plan_generation.py
index 3eb54cc93..19ce9d826 100755
--- a/apps/worker/worker_app/tasks/edit_plan_generation.py
+++ b/apps/worker/worker_app/tasks/edit_plan_generation.py
@@ -491,6 +491,23 @@ def render_edit_plan(self, plan_id: str) -> dict:
                         gen_task_repo.update(gen_task)
 
                 # 4. 根据引擎选择渲染方式
+                # 取消检查：素材下载完后，确认任务没有被用户取消
+                if generation_task_id:
+                    current_task = gen_task_repo.get(generation_task_id)
+                    if current_task:
+                        task_status = current_task.status.value if hasattr(current_task.status, "value") else str(current_task.status)
+                        if task_status == "cancelled":
+                            logger.info("任务已被取消，中止渲染: plan_id=%s task_id=%s", plan_id, generation_task_id)
+                            # 计划回到 editing 状态，用户可以继续编辑
+                            from packages.domain.edit_plan import EditPlanStatus
+                            if plan.status.value == "rendering":
+                                try:
+                                    plan.resume_editing()
+                                    plan_repo.update(plan)
+                                except ValueError:
+                                    pass
+                            return {"status": "cancelled", "plan_id": plan_id, "message": "任务已取消"}
+
                 if engine == "unified":
                     result = _render_with_unified(
                         plan=plan,
-- 
2.54.0


From 7060fa31248140490519f4efb0c8c15e23ff51c4 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 10:18:22 +0800
Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=E7=94=9F=E6=88=90=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E5=BC=B9=E7=AA=97=E5=A2=9E=E5=8A=A0=E5=8F=96=E6=B6=88?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=20-=20=E5=AF=B9=E6=8E=A5=20cancelGenerationT?=
 =?UTF-8?q?ask=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- EditPlanStatus 新增 cancelled 状态及标签
- 新增 cancelGenerationTask API 函数
- 生成进度弹窗生成中状态增加"取消生成"按钮
- 取消前二次确认，防止误操作
- 轮询检测 cancelled 状态，取消后显示已取消提示
- 保存当前 generation_task_id 用于取消调用
---
 apps/web/src/api/editPlans.ts                 | 15 +++-
 .../pages/editing-planner/EditingPlanner.tsx  | 78 ++++++++++++++++++-
 2 files changed, 89 insertions(+), 4 deletions(-)
 mode change 100644 => 100755 apps/web/src/api/editPlans.ts

diff --git a/apps/web/src/api/editPlans.ts b/apps/web/src/api/editPlans.ts
old mode 100644
new mode 100755
index 93bc13477..7465edba7
--- a/apps/web/src/api/editPlans.ts
+++ b/apps/web/src/api/editPlans.ts
@@ -20,7 +20,12 @@ import type {
 
 /** 剪辑计划状态枚举 */
 export type EditPlanStatus =
-  "draft" | "editing" | "rendering" | "completed" | "failed";
+  | "draft"
+  | "editing"
+  | "rendering"
+  | "completed"
+  | "failed"
+  | "cancelled";
 
 /** 标题配置（对齐后端 title_config） */
 export interface TitleConfig {
@@ -453,6 +458,13 @@ export async function getGenerationTaskResults(
   return response.data.items || response.data || [];
 }
 
+/** 取消生成任务 */
+export async function cancelGenerationTask(
+  taskId: string,
+): Promise<void> {
+  await apiClient.post(`/generation/tasks/${taskId}/cancel`);
+}
+
 /**
  * 获取素材库列表 — 调用 GET /api/v1/assets?library_id=xxx
  * 将后端 AssetResponse 映射为前端 MediaAsset 类型
@@ -553,6 +565,7 @@ export const PLAN_STATUS_LABELS: Record<EditPlanStatus, string> = {
   rendering: "渲染中",
   completed: "已完成",
   failed: "失败",
+  cancelled: "已取消",
 };
 
 /** 质量分筛选选项 */
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index 783e502a4..b4c85dc47 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -37,6 +37,7 @@ import {
   generateEditPlan,
   getGenerationStatus,
   getGenerationTaskResults,
+  cancelGenerationTask,
 } from "@/api/editPlans";
 import { useUndoRedo } from "./hooks/useUndoRedo";
 import type {
@@ -270,6 +271,8 @@ const EditingPlanner: React.FC = () => {
   const [generated, setGenerated] = useState(false);
   const [generatedVideos, setGeneratedVideos] = useState<GeneratedVideo[]>([]);
   const [genError, setGenError] = useState<string | null>(null);
+  const [genCancelled, setGenCancelled] = useState(false);
+  const [currentGenTaskId, setCurrentGenTaskId] = useState<string | null>(null);
   const genTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   /* ── 播放 ── */
@@ -949,6 +952,8 @@ const EditingPlanner: React.FC = () => {
     setGeneratedVideos([]);
     setGenError(null);
     setGenProgress(0);
+    setGenCancelled(false);
+    setCurrentGenTaskId(null);
 
     try {
       const config = buildPlanConfig();
@@ -989,6 +994,7 @@ const EditingPlanner: React.FC = () => {
       // 触发生成
       const genRes = await generateEditPlan(planId);
       setGenTotalClips(genRes.clip_count);
+      setCurrentGenTaskId(genRes.generation_task_id);
       message.info("已提交生成，等待处理...");
 
       // 开始轮询
@@ -1041,6 +1047,13 @@ const EditingPlanner: React.FC = () => {
           return; // 停止轮询
         }
 
+        if (status.plan_status === "cancelled") {
+          setGenerating(false);
+          setGenCancelled(true);
+          message.info("生成已取消");
+          return; // 停止轮询
+        }
+
         // 继续轮询
         genTimerRef.current = setTimeout(poll, 2000);
       } catch (err) {
@@ -1060,6 +1073,30 @@ const EditingPlanner: React.FC = () => {
     };
   }, []);
 
+  /* 取消生成 */
+  const handleCancelGeneration = async () => {
+    if (!currentGenTaskId) return;
+    Modal.confirm({
+      title: "确认取消生成？",
+      content: "取消后已处理的片段不会保留，需要重新生成。",
+      okText: "取消生成",
+      cancelText: "继续等待",
+      okButtonProps: { danger: true },
+      onOk: async () => {
+        try {
+          await cancelGenerationTask(currentGenTaskId);
+          message.info("取消请求已提交，正在停止...");
+          // 停止本地轮询，等待服务端状态通过轮询或下一次检查返回 cancelled
+          // 这里不立即停止，让轮询检测到 cancelled 状态后再收尾，以确保服务端确实处理了
+        } catch (err: any) {
+          console.error("[取消生成失败]", err);
+          const msg = err?.response?.data?.detail || "取消失败，请稍后重试";
+          message.error(msg);
+        }
+      },
+    });
+  };
+
   /* 查看生成历史 */
   const handleViewGenHistory = async () => {
     const targetId = loadedPlanId || loadedTemplateId;
@@ -1288,8 +1325,16 @@ const EditingPlanner: React.FC = () => {
 
       {/* ═══ 生成进度弹窗 ═══ */}
       <Modal
-        title={genError ? "生成失败" : generated ? "生成完成" : "正在生成视频"}
-        open={generating || generated || !!genError}
+        title={
+          genError
+            ? "生成失败"
+            : genCancelled
+              ? "已取消生成"
+              : generated
+                ? "生成完成"
+                : "正在生成视频"
+        }
+        open={generating || generated || !!genError || genCancelled}
         footer={
           generated
             ? [
@@ -1324,7 +1369,26 @@ const EditingPlanner: React.FC = () => {
                   </Button>
                 ),
               ]
-            : null
+            : genCancelled
+              ? [
+                  <Button
+                    key="close"
+                    type="primary"
+                    onClick={() => {
+                      setGenCancelled(false);
+                      setGenerating(false);
+                    }}
+                  >
+                    关闭
+                  </Button>,
+                ]
+              : generating
+                ? [
+                    <Button key="cancel" danger onClick={handleCancelGeneration}>
+                      取消生成
+                    </Button>,
+                  ]
+                : null
         }
         closable={!generating}
         maskClosable={false}
@@ -1341,6 +1405,14 @@ const EditingPlanner: React.FC = () => {
             </p>
           </div>
         )}
+        {genCancelled && (
+          <div style={{ padding: "24px 0", textAlign: "center" }}>
+            <p>生成已取消</p>
+            <p style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+              你可以继续编辑后重新生成
+            </p>
+          </div>
+        )}
         {generated && generatedVideos.length > 0 && (
           <div style={{ padding: "8px 0" }}>
             <video
-- 
2.54.0


From 7e2f35d4dded46621c1d7c2a6625aad6583d939a Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 10:30:19 +0800
Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=E5=89=AA=E8=BE=91=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92=E7=89=87=E6=AE=B5CRUD=E5=89=8D=E7=AB=AF=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=20-=20=E5=88=97=E8=A1=A8=E9=A1=B5=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=20+=20=E7=89=87=E6=AE=B5=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增片段CRUD API 类型与函数（9个接口）
- 新增 useEditPlanClips hook（React Query 缓存 + 乐观更新）
- 新增片段管理页面 PlanClipsManager（列表/增删改/批量删除/排序/素材导入）
- 列表页操作列增加「片段」入口和「复制」按钮
- 对接后端 PR#389 feat/edit-plan-clips-api
---
 apps/web/src/api/editPlans.ts                 | 218 ++++++
 apps/web/src/pages/edit-plans/EditPlans.tsx   |  53 +-
 .../src/pages/edit-plans/PlanClipsManager.tsx | 626 ++++++++++++++++++
 apps/web/src/pages/edit-plans/plan-clips.css  | 203 ++++++
 .../editing-planner/hooks/useEditPlanClips.ts | 246 +++++++
 apps/web/src/router/index.tsx                 |   7 +
 6 files changed, 1352 insertions(+), 1 deletion(-)
 mode change 100644 => 100755 apps/web/src/pages/edit-plans/EditPlans.tsx
 create mode 100755 apps/web/src/pages/edit-plans/PlanClipsManager.tsx
 create mode 100755 apps/web/src/pages/edit-plans/plan-clips.css
 create mode 100755 apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts
 mode change 100644 => 100755 apps/web/src/router/index.tsx

diff --git a/apps/web/src/api/editPlans.ts b/apps/web/src/api/editPlans.ts
index 7465edba7..9c56b1f07 100755
--- a/apps/web/src/api/editPlans.ts
+++ b/apps/web/src/api/editPlans.ts
@@ -465,6 +465,224 @@ export async function cancelGenerationTask(
   await apiClient.post(`/generation/tasks/${taskId}/cancel`);
 }
 
+/* ============================================================
+ * 片段 CRUD（后端 EditPlanClip 独立表）
+ * ============================================================ */
+
+/** 片段状态 */
+export type EditPlanClipStatus =
+  | "pending"
+  | "processing"
+  | "ready"
+  | "failed";
+
+/** 剪辑片段（后端响应） */
+export interface EditPlanClip {
+  id: string;
+  plan_id: string;
+  clip_type: string; // main / intro / outro / overlay / background / b_roll 等
+  order: number;
+  asset_id: string;
+  text_content: string;
+  start_time: number;
+  duration: number;
+  transition_effect: string;
+  transition_duration: number;
+  playback_speed: number;
+  status: EditPlanClipStatus;
+  config: Record<string, unknown>;
+  created_at?: string;
+  updated_at?: string;
+}
+
+/** 创建片段请求 */
+export interface CreateEditPlanClipRequest {
+  clip_type: string;
+  order: number;
+  asset_id?: string;
+  text_content?: string;
+  start_time?: number;
+  duration?: number;
+  transition_effect?: string;
+  transition_duration?: number;
+  playback_speed?: number;
+  config?: Record<string, unknown>;
+}
+
+/** 更新片段请求 */
+export interface UpdateEditPlanClipRequest {
+  clip_type?: string;
+  order?: number;
+  asset_id?: string;
+  text_content?: string;
+  start_time?: number;
+  duration?: number;
+  transition_effect?: string;
+  transition_duration?: number;
+  playback_speed?: number;
+  config?: Record<string, unknown>;
+}
+
+/** 片段列表响应 */
+export interface EditPlanClipListResponse {
+  items: EditPlanClip[];
+  total: number;
+}
+
+/** 片段列表查询参数 */
+export interface EditPlanClipListParams {
+  status?: string;
+  skip?: number;
+  limit?: number;
+}
+
+/** 获取片段列表 */
+export async function getEditPlanClips(
+  planId: string,
+  params?: EditPlanClipListParams,
+): Promise<EditPlanClipListResponse> {
+  const response = await apiClient.get<EditPlanClipListResponse>(
+    `/edit-plans/${planId}/clips`,
+    { params },
+  );
+  return response.data;
+}
+
+/** 获取单个片段详情 */
+export async function getEditPlanClip(
+  planId: string,
+  clipId: string,
+): Promise<EditPlanClip> {
+  const response = await apiClient.get<EditPlanClip>(
+    `/edit-plans/${planId}/clips/${clipId}`,
+  );
+  return response.data;
+}
+
+/** 创建片段 */
+export async function createEditPlanClip(
+  planId: string,
+  data: CreateEditPlanClipRequest,
+): Promise<EditPlanClip> {
+  const response = await apiClient.post<EditPlanClip>(
+    `/edit-plans/${planId}/clips`,
+    data,
+  );
+  return response.data;
+}
+
+/** 更新片段 */
+export async function updateEditPlanClip(
+  planId: string,
+  clipId: string,
+  data: UpdateEditPlanClipRequest,
+): Promise<EditPlanClip> {
+  const response = await apiClient.put<EditPlanClip>(
+    `/edit-plans/${planId}/clips/${clipId}`,
+    data,
+  );
+  return response.data;
+}
+
+/** 删除片段 */
+export async function deleteEditPlanClip(
+  planId: string,
+  clipId: string,
+): Promise<void> {
+  await apiClient.delete(`/edit-plans/${planId}/clips/${clipId}`);
+}
+
+/* ============================================================
+ * 片段批量操作
+ * ============================================================ */
+
+/** 重排序条目 */
+export interface ClipReorderItem {
+  clip_id: string;
+  new_order: number;
+}
+
+/** 重排序响应 */
+export interface ClipReorderResponse {
+  success: boolean;
+  updated_count: number;
+  message: string;
+}
+
+/** 批量删除响应 */
+export interface ClipBatchDeleteResponse {
+  success: boolean;
+  deleted_count: number;
+  message: string;
+}
+
+/** 从素材批量创建响应 */
+export interface ClipsFromAssetsResponse {
+  success: boolean;
+  created_count: number;
+  message: string;
+  clip_ids: string[];
+}
+
+/** 片段重排序（拖拽排序后一次性提交） */
+export async function reorderEditPlanClips(
+  planId: string,
+  items: ClipReorderItem[],
+): Promise<ClipReorderResponse> {
+  const response = await apiClient.post<ClipReorderResponse>(
+    `/edit-plans/${planId}/clips/reorder`,
+    { items },
+  );
+  return response.data;
+}
+
+/** 批量删除片段 */
+export async function batchDeleteEditPlanClips(
+  planId: string,
+  clipIds: string[],
+): Promise<ClipBatchDeleteResponse> {
+  const response = await apiClient.post<ClipBatchDeleteResponse>(
+    `/edit-plans/${planId}/clips/batch-delete`,
+    { clip_ids: clipIds },
+  );
+  return response.data;
+}
+
+/** 从素材批量创建片段（追加到时间线末尾） */
+export async function createClipsFromAssets(
+  planId: string,
+  assetIds: string[],
+  clipType = "main",
+): Promise<ClipsFromAssetsResponse> {
+  const response = await apiClient.post<ClipsFromAssetsResponse>(
+    `/edit-plans/${planId}/clips/from-assets`,
+    { asset_ids: assetIds, clip_type: clipType },
+  );
+  return response.data;
+}
+
+/* ============================================================
+ * 复制计划
+ * ============================================================ */
+
+/** 复制计划请求 */
+export interface CopyEditPlanRequest {
+  name?: string;
+  project_id?: string;
+}
+
+/** 复制剪辑计划（含所有片段配置） */
+export async function copyEditPlan(
+  planId: string,
+  data?: CopyEditPlanRequest,
+): Promise<EditPlan> {
+  const response = await apiClient.post<EditPlan>(
+    `/edit-plans/${planId}/copy`,
+    data || {},
+  );
+  return response.data;
+}
+
 /**
  * 获取素材库列表 — 调用 GET /api/v1/assets?library_id=xxx
  * 将后端 AssetResponse 映射为前端 MediaAsset 类型
diff --git a/apps/web/src/pages/edit-plans/EditPlans.tsx b/apps/web/src/pages/edit-plans/EditPlans.tsx
old mode 100644
new mode 100755
index 87283db3d..26fc1f736
--- a/apps/web/src/pages/edit-plans/EditPlans.tsx
+++ b/apps/web/src/pages/edit-plans/EditPlans.tsx
@@ -24,12 +24,15 @@ import {
   DeleteOutlined,
   FileTextOutlined,
   ThunderboltOutlined,
+  CopyOutlined,
+  UnorderedListOutlined,
 } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import {
   getEditPlans,
   deleteEditPlan,
   generateEditPlan,
+  copyEditPlan,
   type EditPlan,
   type EditPlanStatus,
   type EditPlanListParams,
@@ -184,6 +187,21 @@ export default function EditPlans() {
     },
   });
 
+  // 复制计划
+  const copyMutation = useMutation({
+    mutationFn: ({ planId, name }: { planId: string; name?: string }) =>
+      copyEditPlan(planId, name ? { name } : undefined),
+    onSuccess: (newPlan) => {
+      message.success("计划已复制");
+      queryClient.invalidateQueries({ queryKey: ["edit-plans"] });
+      // 自动跳转到新计划的编辑器
+      navigate(`/app/editing-planner?planId=${newPlan.id}`);
+    },
+    onError: () => {
+      message.error("复制失败，请稍后重试");
+    },
+  });
+
   // 跳转到剪辑编辑器
   const handleEdit = useCallback(
     (plan: EditPlan) => {
@@ -285,10 +303,21 @@ export default function EditPlans() {
     {
       title: "操作",
       key: "action",
-      width: 180,
+      width: 240,
       fixed: "right",
       render: (_: unknown, record: EditPlan) => (
         <div className="plan-actions">
+          <Tooltip title="片段管理">
+            <Button
+              type="link"
+              size="small"
+              icon={<UnorderedListOutlined />}
+              onClick={() => navigate(`/app/edit-plans/${record.id}/clips`)}
+              className="plan-action-btn"
+            >
+              片段
+            </Button>
+          </Tooltip>
           <Button
             type="link"
             size="small"
@@ -317,6 +346,28 @@ export default function EditPlans() {
               </Button>
             </Popconfirm>
           )}
+          <Popconfirm
+            title="复制计划"
+            description="确定要复制这个剪辑计划吗？将创建一个编辑中的新副本。"
+            onConfirm={() =>
+              copyMutation.mutate({
+                planId: record.id,
+                name: `${record.name} 副本`,
+              })
+            }
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button
+              type="link"
+              size="small"
+              icon={<CopyOutlined />}
+              loading={copyMutation.isPending}
+              className="plan-action-btn"
+            >
+              复制
+            </Button>
+          </Popconfirm>
           <Popconfirm
             title="确认删除"
             description="确定要删除这个剪辑计划吗？此操作不可恢复。"
diff --git a/apps/web/src/pages/edit-plans/PlanClipsManager.tsx b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
new file mode 100755
index 000000000..5b3ab4ed4
--- /dev/null
+++ b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
@@ -0,0 +1,626 @@
+/**
+ * 剪辑计划片段管理页面
+ * 对接后端 PR#389 片段 CRUD API
+ * 功能：列表查看、创建、编辑、删除、批量删除、拖拽排序、从素材导入
+ */
+import { useState, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Table,
+  Button,
+  Space,
+  message,
+  Popconfirm,
+  Modal,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Tag,
+  Drawer,
+  Tooltip,
+  Empty,
+  Card,
+} from "antd";
+import {
+  ArrowLeftOutlined,
+  PlusOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  UploadOutlined,
+  OrderedListOutlined,
+  SaveOutlined,
+} from "@ant-design/icons";
+import type { ColumnsType } from "antd/es/table";
+import {
+  getEditPlan,
+  getEditPlanClips,
+  createEditPlanClip,
+  updateEditPlanClip,
+  deleteEditPlanClip,
+  batchDeleteEditPlanClips,
+  reorderEditPlanClips,
+  createClipsFromAssets,
+  getMediaAssets,
+  type EditPlan,
+  type EditPlanClip,
+  type EditPlanClipStatus,
+} from "@/api/editPlans";
+import "./plan-clips.css";
+
+/* ──────────── 常量 ──────────── */
+
+const CLIP_TYPE_OPTIONS = [
+  { value: "main", label: "主片段" },
+  { value: "intro", label: "片头" },
+  { value: "outro", label: "片尾" },
+  { value: "overlay", label: "叠加层" },
+  { value: "background", label: "背景" },
+  { value: "b_roll", label: "B-roll" },
+];
+
+const STATUS_COLORS: Record<EditPlanClipStatus, string> = {
+  pending: "default",
+  processing: "processing",
+  ready: "success",
+  failed: "error",
+};
+
+const STATUS_LABELS: Record<EditPlanClipStatus, string> = {
+  pending: "待处理",
+  processing: "处理中",
+  ready: "就绪",
+  failed: "失败",
+};
+
+const TRANSITION_OPTIONS = [
+  { value: "cut", label: "硬切" },
+  { value: "fade", label: "淡入淡出" },
+  { value: "dissolve", label: "溶解" },
+  { value: "zoom", label: "缩放" },
+  { value: "slide_left", label: "左滑" },
+  { value: "slide_right", label: "右滑" },
+  { value: "slide_up", label: "上滑" },
+  { value: "slide_down", label: "下滑" },
+  { value: "wipe_left", label: "左擦除" },
+  { value: "wipe_right", label: "右擦除" },
+  { value: "wipe_up", label: "上擦除" },
+  { value: "wipe_down", label: "下擦除" },
+  { value: "circlecrop", label: "圆形裁切" },
+  { value: "rectcrop", label: "矩形裁切" },
+];
+
+/* ──────────── 组件 ──────────── */
+
+const PlanClipsManager: React.FC = () => {
+  const { planId } = useParams<{ planId: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  /* ── 计划信息 ── */
+  const { data: plan, isLoading: planLoading } = useQuery({
+    queryKey: ["editPlan", planId],
+    queryFn: () => getEditPlan(planId!),
+    enabled: !!planId,
+  });
+
+  /* ── 片段列表 ── */
+  const { data: clipsData, isLoading: clipsLoading } = useQuery({
+    queryKey: ["editPlanClips", planId],
+    queryFn: () => getEditPlanClips(planId!, { limit: 500 }),
+    enabled: !!planId,
+  });
+
+  const clips = clipsData?.items ?? [];
+
+  /* ── 选中的片段（批量操作） ── */
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  /* ── 编辑弹窗 ── */
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editingClip, setEditingClip] = useState<EditPlanClip | null>(null);
+  const [editForm] = Form.useForm();
+  const [editLoading, setEditLoading] = useState(false);
+
+  /* ── 素材导入抽屉 ── */
+  const [importDrawerOpen, setImportDrawerOpen] = useState(false);
+  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);
+  const [importLoading, setImportLoading] = useState(false);
+
+  const { data: assets } = useQuery({
+    queryKey: ["mediaAssets"],
+    queryFn: () => getMediaAssets(),
+    enabled: importDrawerOpen,
+  });
+
+  /* ── 重新排序模式 ── */
+  const [reorderMode, setReorderMode] = useState(false);
+  const [reorderItems, setReorderItems] = useState<EditPlanClip[]>([]);
+
+  /* ── 列定义 ── */
+  const columns: ColumnsType<EditPlanClip> = [
+    {
+      title: "序号",
+      dataIndex: "order",
+      width: 70,
+      render: (_, __, index) => index + 1,
+    },
+    {
+      title: "类型",
+      dataIndex: "clip_type",
+      width: 100,
+      render: (type: string) => {
+        const opt = CLIP_TYPE_OPTIONS.find((o) => o.value === type);
+        return <Tag>{opt?.label || type}</Tag>;
+      },
+    },
+    {
+      title: "素材",
+      dataIndex: "asset_id",
+      width: 150,
+      ellipsis: true,
+      render: (assetId: string) =>
+        assetId ? <code className="clip-asset-id">{assetId.slice(0, 12)}...</code> : <span style={{ color: "#999" }}>无素材</span>,
+    },
+    {
+      title: "文本内容",
+      dataIndex: "text_content",
+      ellipsis: true,
+      render: (text: string) => text || <span style={{ color: "#999" }}>-</span>,
+    },
+    {
+      title: "时长",
+      dataIndex: "duration",
+      width: 90,
+      render: (d: number) => `${d?.toFixed(1) || 0}s`,
+    },
+    {
+      title: "转场",
+      dataIndex: "transition_effect",
+      width: 100,
+      render: (effect: string) => {
+        const opt = TRANSITION_OPTIONS.find((o) => o.value === effect);
+        return opt?.label || effect || "硬切";
+      },
+    },
+    {
+      title: "播放速度",
+      dataIndex: "playback_speed",
+      width: 90,
+      render: (s: number) => `${s || 1.0}x`,
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      width: 90,
+      render: (status: EditPlanClipStatus) => (
+        <Tag color={STATUS_COLORS[status] || "default"}>
+          {STATUS_LABELS[status] || status}
+        </Tag>
+      ),
+    },
+    {
+      title: "操作",
+      key: "action",
+      width: 140,
+      fixed: "right",
+      render: (_, record) => (
+        <Space size="small">
+          <Button
+            type="link"
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => handleEditClip(record)}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="删除片段"
+            description="确定删除这个片段吗？"
+            onConfirm={() => handleDeleteClip(record.id)}
+            okText="确定"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+          >
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  /* ── 编辑片段 ── */
+  const handleEditClip = useCallback(
+    (clip: EditPlanClip) => {
+      setEditingClip(clip);
+      editForm.setFieldsValue({
+        clip_type: clip.clip_type,
+        asset_id: clip.asset_id,
+        text_content: clip.text_content,
+        duration: clip.duration,
+        start_time: clip.start_time,
+        transition_effect: clip.transition_effect,
+        transition_duration: clip.transition_duration,
+        playback_speed: clip.playback_speed,
+      });
+      setEditModalOpen(true);
+    },
+    [editForm],
+  );
+
+  const handleNewClip = useCallback(() => {
+    setEditingClip(null);
+    editForm.resetFields();
+    editForm.setFieldsValue({
+      clip_type: "main",
+      duration: 5,
+      transition_effect: "cut",
+      transition_duration: 0,
+      playback_speed: 1.0,
+    });
+    setEditModalOpen(true);
+  }, [editForm]);
+
+  const handleSaveClip = async () => {
+    if (!planId) return;
+    try {
+      const values = await editForm.validateFields();
+      setEditLoading(true);
+
+      if (editingClip) {
+        // 更新
+        await updateEditPlanClip(planId, editingClip.id, values);
+        message.success("片段已更新");
+      } else {
+        // 新建
+        const maxOrder = clips.length > 0 ? Math.max(...clips.map((c) => c.order)) : -1;
+        await createEditPlanClip(planId, {
+          ...values,
+          order: maxOrder + 1,
+        });
+        message.success("片段已创建");
+      }
+
+      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] });
+      setEditModalOpen(false);
+    } catch (err) {
+      console.error(err);
+      message.error(editingClip ? "更新失败" : "创建失败");
+    } finally {
+      setEditLoading(false);
+    }
+  };
+
+  /* ── 删除片段 ── */
+  const handleDeleteClip = async (clipId: string) => {
+    if (!planId) return;
+    try {
+      await deleteEditPlanClip(planId, clipId);
+      message.success("已删除");
+      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] });
+      setSelectedRowKeys((prev) => prev.filter((k) => k !== clipId));
+    } catch {
+      message.error("删除失败");
+    }
+  };
+
+  /* ── 批量删除 ── */
+  const handleBatchDelete = async () => {
+    if (!planId || selectedRowKeys.length === 0) return;
+    try {
+      await batchDeleteEditPlanClips(
+        planId,
+        selectedRowKeys.map((k) => String(k)),
+      );
+      message.success(`已删除 ${selectedRowKeys.length} 个片段`);
+      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] });
+      setSelectedRowKeys([]);
+    } catch {
+      message.error("批量删除失败");
+    }
+  };
+
+  /* ── 从素材导入 ── */
+  const handleImportFromAssets = async () => {
+    if (!planId || selectedAssetIds.length === 0) return;
+    try {
+      setImportLoading(true);
+      const res = await createClipsFromAssets(planId, selectedAssetIds);
+      message.success(`已导入 ${res.created_count} 个片段`);
+      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] });
+      setImportDrawerOpen(false);
+      setSelectedAssetIds([]);
+    } catch {
+      message.error("导入失败");
+    } finally {
+      setImportLoading(false);
+    }
+  };
+
+  /* ── 排序模式 ── */
+  const enterReorderMode = () => {
+    setReorderItems([...clips].sort((a, b) => a.order - b.order));
+    setReorderMode(true);
+  };
+
+  const moveClip = (fromIndex: number, toIndex: number) => {
+    if (toIndex < 0 || toIndex >= reorderItems.length) return;
+    const newItems = [...reorderItems];
+    const [moved] = newItems.splice(fromIndex, 1);
+    newItems.splice(toIndex, 0, moved);
+    setReorderItems(newItems);
+  };
+
+  const saveReorder = async () => {
+    if (!planId) return;
+    const items = reorderItems.map((clip, index) => ({
+      clip_id: clip.id,
+      new_order: index,
+    }));
+    try {
+      await reorderEditPlanClips(planId, items);
+      message.success("排序已保存");
+      queryClient.invalidateQueries({ queryKey: ["editPlanClips", planId] });
+      setReorderMode(false);
+    } catch {
+      message.error("排序保存失败");
+    }
+  };
+
+  const cancelReorder = () => {
+    setReorderMode(false);
+    setReorderItems([]);
+  };
+
+  /* ── 渲染 ── */
+  const displayClips = reorderMode
+    ? reorderItems
+    : [...clips].sort((a, b) => a.order - b.order);
+
+  return (
+    <div className="plan-clips-page">
+      {/* 顶部 */}
+      <div className="plan-clips-header">
+        <div className="plan-clips-header-left">
+          <Button
+            type="text"
+            icon={<ArrowLeftOutlined />}
+            onClick={() => navigate("/app/edit-plans")}
+          >
+            返回计划列表
+          </Button>
+          <div className="plan-clips-title">
+            <h2>{plan?.name || "加载中..."}</h2>
+            <p>
+              {planLoading
+                ? "加载中..."
+                : `共 ${clipsData?.total || 0} 个片段 · ${plan?.status || ""}`}
+            </p>
+          </div>
+        </div>
+        <div className="plan-clips-header-right">
+          <Space>
+            <Button
+              icon={<UploadOutlined />}
+              onClick={() => setImportDrawerOpen(true)}
+            >
+              从素材导入
+            </Button>
+            {reorderMode ? (
+              <>
+                <Button onClick={cancelReorder}>取消排序</Button>
+                <Button type="primary" icon={<SaveOutlined />} onClick={saveReorder}>
+                  保存排序
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button
+                  icon={<OrderedListOutlined />}
+                  onClick={enterReorderMode}
+                  disabled={clips.length === 0}
+                >
+                  调整顺序
+                </Button>
+                <Button type="primary" icon={<PlusOutlined />} onClick={handleNewClip}>
+                  添加片段
+                </Button>
+              </>
+            )}
+          </Space>
+        </div>
+      </div>
+
+      {/* 批量操作栏 */}
+      {!reorderMode && selectedRowKeys.length > 0 && (
+        <div className="plan-clips-batch-bar">
+          <span>已选择 {selectedRowKeys.length} 个片段</span>
+          <Popconfirm
+            title="批量删除"
+            description={`确定删除选中的 ${selectedRowKeys.length} 个片段吗？`}
+            onConfirm={handleBatchDelete}
+            okText="确定"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+          >
+            <Button danger icon={<DeleteOutlined />}>
+              批量删除
+            </Button>
+          </Popconfirm>
+        </div>
+      )}
+
+      {/* 排序列表 */}
+      {reorderMode && (
+        <Card className="plan-clips-reorder-card" title="拖拽调整顺序">
+          <div className="plan-clips-reorder-list">
+            {reorderItems.map((clip, index) => (
+              <div key={clip.id} className="plan-clips-reorder-item">
+                <span className="reorder-index">{index + 1}</span>
+                <span className="reorder-type">
+                  {CLIP_TYPE_OPTIONS.find((o) => o.value === clip.clip_type)
+                    ?.label || clip.clip_type}
+                </span>
+                <span className="reorder-content">
+                  {clip.text_content || clip.asset_id || "无内容"}
+                </span>
+                <span className="reorder-duration">{clip.duration.toFixed(1)}s</span>
+                <Space>
+                  <Button
+                    size="small"
+                    onClick={() => moveClip(index, index - 1)}
+                    disabled={index === 0}
+                  >
+                    ↑
+                  </Button>
+                  <Button
+                    size="small"
+                    onClick={() => moveClip(index, index + 1)}
+                    disabled={index === reorderItems.length - 1}
+                  >
+                    ↓
+                  </Button>
+                </Space>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {/* 片段列表 */}
+      {!reorderMode && (
+        <div className="plan-clips-table-wrap">
+          <Table
+            rowKey="id"
+            columns={columns}
+            dataSource={displayClips}
+            loading={clipsLoading}
+            rowSelection={{
+              selectedRowKeys,
+              onChange: setSelectedRowKeys,
+            }}
+            pagination={false}
+            locale={{
+              emptyText: (
+                <Empty
+                  description="暂无片段，点击上方按钮添加或从素材导入"
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                />
+              ),
+            }}
+            scroll={{ x: 1000 }}
+          />
+        </div>
+      )}
+
+      {/* 编辑弹窗 */}
+      <Modal
+        title={editingClip ? "编辑片段" : "添加片段"}
+        open={editModalOpen}
+        onCancel={() => setEditModalOpen(false)}
+        onOk={handleSaveClip}
+        confirmLoading={editLoading}
+        okText="保存"
+        cancelText="取消"
+        width={560}
+      >
+        <Form form={editForm} layout="vertical">
+          <Form.Item
+            label="片段类型"
+            name="clip_type"
+            rules={[{ required: true, message: "请选择类型" }]}
+          >
+            <Select options={CLIP_TYPE_OPTIONS} />
+          </Form.Item>
+          <Form.Item label="素材 ID" name="asset_id">
+            <Input placeholder="关联的素材 ID（可选）" />
+          </Form.Item>
+          <Form.Item label="文本内容" name="text_content">
+            <Input.TextArea rows={3} placeholder="字幕/配音文案等" />
+          </Form.Item>
+          <div style={{ display: "flex", gap: 16 }}>
+            <Form.Item label="起始时间（秒）" name="start_time" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
+            </Form.Item>
+            <Form.Item label="时长（秒）" name="duration" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
+            </Form.Item>
+          </div>
+          <div style={{ display: "flex", gap: 16 }}>
+            <Form.Item label="转场效果" name="transition_effect" style={{ flex: 1 }}>
+              <Select options={TRANSITION_OPTIONS} />
+            </Form.Item>
+            <Form.Item label="转场时长" name="transition_duration" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
+            </Form.Item>
+          </div>
+          <Form.Item label="播放速度" name="playback_speed">
+            <InputNumber min={0.1} max={10} step={0.1} style={{ width: "100%" }} />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {/* 素材导入抽屉 */}
+      <Drawer
+        title="从素材库导入"
+        open={importDrawerOpen}
+        onClose={() => setImportDrawerOpen(false)}
+        width={480}
+        extra={
+          <Button
+            type="primary"
+            onClick={handleImportFromAssets}
+            loading={importLoading}
+            disabled={selectedAssetIds.length === 0}
+          >
+            导入 {selectedAssetIds.length > 0 ? `(${selectedAssetIds.length})` : ""}
+          </Button>
+        }
+      >
+        {assets && assets.length > 0 ? (
+          <div className="asset-import-list">
+            {assets.map((asset) => (
+              <div
+                key={asset.id}
+                className={`asset-import-item ${
+                  selectedAssetIds.includes(asset.id) ? "selected" : ""
+                }`}
+                onClick={() => {
+                  setSelectedAssetIds((prev) =>
+                    prev.includes(asset.id)
+                      ? prev.filter((id) => id !== asset.id)
+                      : [...prev, asset.id],
+                  );
+                }}
+              >
+                <div className="asset-thumb">
+                  {asset.thumbnail_url ? (
+                    <img src={asset.thumbnail_url} alt={asset.name} />
+                  ) : (
+                    <div className="asset-thumb-placeholder">{asset.type}</div>
+                  )}
+                </div>
+                <div className="asset-info">
+                  <div className="asset-name" title={asset.name}>
+                    {asset.name}
+                  </div>
+                  <div className="asset-meta">
+                    {asset.type}
+                    {asset.duration ? ` · ${asset.duration.toFixed(1)}s` : ""}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <Empty description="素材库为空" />
+        )}
+      </Drawer>
+    </div>
+  );
+};
+
+export default PlanClipsManager;
diff --git a/apps/web/src/pages/edit-plans/plan-clips.css b/apps/web/src/pages/edit-plans/plan-clips.css
new file mode 100755
index 000000000..501e9e6e1
--- /dev/null
+++ b/apps/web/src/pages/edit-plans/plan-clips.css
@@ -0,0 +1,203 @@
+/* 剪辑计划片段管理页面 */
+
+.plan-clips-page {
+  padding: 24px;
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+.plan-clips-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.plan-clips-header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.plan-clips-title h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.plan-clips-title p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.plan-clips-batch-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 20px;
+  margin-bottom: 16px;
+  background: #e6f4ff;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #1677ff;
+}
+
+.plan-clips-table-wrap {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.clip-asset-id {
+  font-size: 12px;
+  color: #6b7280;
+  background: #f3f4f6;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* 排序模式 */
+.plan-clips-reorder-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+}
+
+.plan-clips-reorder-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.plan-clips-reorder-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: grab;
+  transition: all 0.2s;
+}
+
+.plan-clips-reorder-item:hover {
+  border-color: #1677ff;
+  background: #f0f7ff;
+}
+
+.reorder-index {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1677ff;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.reorder-type {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: #6b7280;
+  padding: 2px 8px;
+  background: #eef2ff;
+  border-radius: 4px;
+}
+
+.reorder-content {
+  flex: 1;
+  font-size: 14px;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reorder-duration {
+  flex-shrink: 0;
+  font-size: 13px;
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 素材导入 */
+.asset-import-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.asset-import-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.asset-import-item:hover {
+  border-color: #1677ff;
+  background: #f0f7ff;
+}
+
+.asset-import-item.selected {
+  border-color: #1677ff;
+  background: #e6f4ff;
+}
+
+.asset-thumb {
+  width: 56px;
+  height: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f3f4f6;
+  flex-shrink: 0;
+}
+
+.asset-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.asset-thumb-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: #9ca3af;
+  text-transform: uppercase;
+}
+
+.asset-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.asset-name {
+  font-size: 14px;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.asset-meta {
+  font-size: 12px;
+  color: #9ca3af;
+  margin-top: 2px;
+}
diff --git a/apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts b/apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts
new file mode 100755
index 000000000..997fd4c1c
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts
@@ -0,0 +1,246 @@
+/**
+ * 剪辑计划片段管理 Hook
+ * 对接后端 PR#389 片段 CRUD API，替代原来的 config.segments 模式
+ *
+ * 功能：
+ * - 加载/刷新片段列表
+ * - 单个增删改查
+ * - 批量删除
+ * - 拖拽重排序
+ * - 从素材批量导入
+ * - 乐观更新 + 撤销重做
+ */
+import { useCallback, useState } from "react";
+import { message } from "antd";
+import {
+  useQuery,
+  useQueryClient,
+  useMutation,
+} from "@tanstack/react-query";
+import type {
+  EditPlanClip,
+  CreateEditPlanClipRequest,
+  UpdateEditPlanClipRequest,
+  ClipReorderItem,
+} from "@/api/editPlans";
+import {
+  getEditPlanClips,
+  createEditPlanClip,
+  updateEditPlanClip,
+  deleteEditPlanClip,
+  reorderEditPlanClips,
+  batchDeleteEditPlanClips,
+  createClipsFromAssets,
+} from "@/api/editPlans";
+import { useUndoRedo } from "./useUndoRedo";
+
+const QUERY_KEY = "editPlanClips";
+
+export function useEditPlanClips(planId: string | undefined) {
+  const queryClient = useQueryClient();
+
+  /* ── 片段列表查询 ── */
+  const {
+    data: clipListData,
+    isLoading: clipsLoading,
+    refetch: refetchClips,
+  } = useQuery({
+    queryKey: [QUERY_KEY, planId],
+    queryFn: () => getEditPlanClips(planId!, { limit: 500 }),
+    enabled: !!planId,
+    staleTime: 30_000,
+  });
+
+  const clips: EditPlanClip[] = clipListData?.items ?? [];
+  const clipsTotal = clipListData?.total ?? 0;
+
+  /* ── 选中片段 ── */
+  const [selectedClipId, setSelectedClipId] = useState<string | null>(null);
+  const selectedClip = clips.find((c) => c.id === selectedClipId) ?? null;
+
+  /* ── 本地撤销/重做（用于拖拽等即时操作的回退） ── */
+  const {
+    state: localClips,
+    set: setLocalClips,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    reset: resetLocalClips,
+  } = useUndoRedo<EditPlanClip[]>([]);
+
+  // 当服务端数据变化时同步本地
+  // 注意：实际使用时以服务端为准，本地仅用于拖拽等临时操作
+
+  /* ── 创建片段 ── */
+  const createMutation = useMutation({
+    mutationFn: (data: CreateEditPlanClipRequest) =>
+      createEditPlanClip(planId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] });
+      message.success("片段已添加");
+    },
+    onError: () => {
+      message.error("添加片段失败");
+    },
+  });
+
+  const addClip = useCallback(
+    (data: Omit<CreateEditPlanClipRequest, "order"> & { order?: number }) => {
+      if (!planId) return;
+      const order = data.order ?? clips.length;
+      createMutation.mutate({ ...data, order });
+    },
+    [planId, clips.length, createMutation],
+  );
+
+  /* ── 更新片段 ── */
+  const updateMutation = useMutation({
+    mutationFn: ({
+      clipId,
+      data,
+    }: {
+      clipId: string;
+      data: UpdateEditPlanClipRequest;
+    }) => updateEditPlanClip(planId!, clipId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] });
+    },
+    onError: () => {
+      message.error("更新片段失败");
+    },
+  });
+
+  const updateClip = useCallback(
+    (clipId: string, data: UpdateEditPlanClipRequest) => {
+      if (!planId) return;
+      updateMutation.mutate({ clipId, data });
+    },
+    [planId, updateMutation],
+  );
+
+  /* ── 删除片段 ── */
+  const deleteMutation = useMutation({
+    mutationFn: (clipId: string) => deleteEditPlanClip(planId!, clipId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] });
+      message.success("片段已删除");
+    },
+    onError: () => {
+      message.error("删除片段失败");
+    },
+  });
+
+  const removeClip = useCallback(
+    (clipId: string) => {
+      if (!planId) return;
+      if (selectedClipId === clipId) {
+        setSelectedClipId(null);
+      }
+      deleteMutation.mutate(clipId);
+    },
+    [planId, selectedClipId, deleteMutation],
+  );
+
+  /* ── 批量删除 ── */
+  const batchDeleteMutation = useMutation({
+    mutationFn: (clipIds: string[]) =>
+      batchDeleteEditPlanClips(planId!, clipIds),
+    onSuccess: (res) => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] });
+      message.success(`已删除 ${res.deleted_count} 个片段`);
+    },
+    onError: () => {
+      message.error("批量删除失败");
+    },
+  });
+
+  const batchRemoveClips = useCallback(
+    (clipIds: string[]) => {
+      if (!planId || clipIds.length === 0) return;
+      if (selectedClipId && clipIds.includes(selectedClipId)) {
+        setSelectedClipId(null);
+      }
+      batchDeleteMutation.mutate(clipIds);
+    },
+    [planId, selectedClipId, batchDeleteMutation],
+  );
+
+  /* ── 重排序（拖拽结束后一次性提交） ── */
+  const reorderMutation = useMutation({
+    mutationFn: (items: ClipReorderItem[]) =>
+      reorderEditPlanClips(planId!, items),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] });
+    },
+    onError: () => {
+      message.error("排序失败");
+      // 失败后刷新回服务端状态
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] });
+    },
+  });
+
+  const reorderClips = useCallback(
+    (items: ClipReorderItem[]) => {
+      if (!planId || items.length === 0) return;
+      reorderMutation.mutate(items);
+    },
+    [planId, reorderMutation],
+  );
+
+  /* ── 从素材批量导入 ── */
+  const importFromAssetsMutation = useMutation({
+    mutationFn: (assetIds: string[]) =>
+      createClipsFromAssets(planId!, assetIds),
+    onSuccess: (res) => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] });
+      message.success(`已导入 ${res.created_count} 个素材片段`);
+    },
+    onError: () => {
+      message.error("导入素材失败");
+    },
+  });
+
+  const importFromAssets = useCallback(
+    (assetIds: string[]) => {
+      if (!planId || assetIds.length === 0) return;
+      importFromAssetsMutation.mutate(assetIds);
+    },
+    [planId, importFromAssetsMutation],
+  );
+
+  return {
+    // 数据
+    clips,
+    clipsTotal,
+    clipsLoading,
+    selectedClipId,
+    selectedClip,
+    // 选中
+    setSelectedClipId,
+    // 操作
+    addClip,
+    updateClip,
+    removeClip,
+    batchRemoveClips,
+    reorderClips,
+    importFromAssets,
+    refetchClips,
+    // 状态
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    isReordering: reorderMutation.isPending,
+    isImporting: importFromAssetsMutation.isPending,
+    // 本地撤销重做（供拖拽等场景使用）
+    localClips,
+    setLocalClips,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    resetLocalClips,
+  };
+}
+
+export default useEditPlanClips;
diff --git a/apps/web/src/router/index.tsx b/apps/web/src/router/index.tsx
old mode 100644
new mode 100755
index 9edbde161..60449a213
--- a/apps/web/src/router/index.tsx
+++ b/apps/web/src/router/index.tsx
@@ -163,6 +163,13 @@ export const router = createBrowserRouter([
             Component: m.default,
           })),
       },
+      {
+        path: "edit-plans/:planId/clips",
+        lazy: () =>
+          import("@/pages/edit-plans/PlanClipsManager").then((m) => ({
+            Component: m.default,
+          })),
+      },
       {
         path: "voice-clone",
         lazy: () =>
-- 
2.54.0


From 87e739d42f52a6da79a35a09ed8c68ebd64e6657 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 11:03:09 +0800
Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=E7=94=9F=E6=88=90=E5=89=8D?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E7=89=87=E6=AE=B5=E5=88=B0=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?clips=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 编辑器新增 syncClipsToBackend 函数
- 生成前自动将本地片段同步到后端 clips 表
- 并发控制 3 个请求，删除旧片段后批量重建
- 同步失败不阻塞生成（后端有模板兜底）
- 对接后端 PR#389 clips API
---
 .../pages/editing-planner/EditingPlanner.tsx  | 69 ++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index b4c85dc47..485f53ebf 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -38,6 +38,11 @@ import {
   getGenerationStatus,
   getGenerationTaskResults,
   cancelGenerationTask,
+  getEditPlanClips,
+  createEditPlanClip,
+  batchDeleteEditPlanClips,
+  type EditPlanClip,
+  type CreateEditPlanClipRequest,
 } from "@/api/editPlans";
 import { useUndoRedo } from "./hooks/useUndoRedo";
 import type {
@@ -931,10 +936,62 @@ const EditingPlanner: React.FC = () => {
     }
   };
 
+  /**
+   * 将本地编辑的片段同步到后端 clips 表
+   * 策略：先删除后端所有片段，再批量创建（简单可靠，生成前使用）
+   */
+  const syncClipsToBackend = async (planId: string): Promise<void> => {
+    if (clips.length === 0) return;
+
+    // 1. 获取后端现有片段 ID
+    try {
+      const existing = await getEditPlanClips(planId, { limit: 500 });
+      if (existing.items.length > 0) {
+        await batchDeleteEditPlanClips(
+          planId,
+          existing.items.map((c) => c.id),
+        );
+      }
+    } catch (err) {
+      console.warn("[获取后端片段失败，跳过删除]", err);
+    }
+
+    // 2. 批量创建新片段（并发 3 个）
+    const clipDataList: CreateEditPlanClipRequest[] = clips.map((c, i) => ({
+      clip_type: c.type === "voice" ? "voiceover" : "main",
+      order: i,
+      asset_id: c.media_asset_id || "",
+      text_content: c.script_text || "",
+      start_time: 0,
+      duration: c.duration,
+      transition_effect: c.transition?.type || "cut",
+      transition_duration: c.transition?.duration || 0,
+      playback_speed: c.speed?.rate || 1.0,
+      config: {
+        tts_config: c.tts_config || null,
+        trim_config: c.trim_config || null,
+        template_segment_id: c.template_segment_id || null,
+      },
+    }));
+
+    // 并发控制：最多同时 3 个请求
+    const results: EditPlanClip[] = [];
+    const concurrency = 3;
+    for (let i = 0; i < clipDataList.length; i += concurrency) {
+      const batch = clipDataList.slice(i, i + concurrency);
+      const batchResults = await Promise.all(
+        batch.map((data) => createEditPlanClip(planId, data)),
+      );
+      results.push(...batchResults);
+    }
+
+    console.log(`[片段同步] 创建了 ${results.length} 个片段`);
+  };
+
   /**
    * 剪辑计划生成
-   * 1. 有 planId → 更新计划配置 + 触发生成
-   * 2. 无 planId（从模板库直接进入）→ 先创建计划 + 触发生成
+   * 1. 有 planId → 更新计划配置 + 同步片段 + 触发生成
+   * 2. 无 planId（从模板库直接进入）→ 先创建计划 + 同步片段 + 触发生成
    * 3. 触发生成后轮询状态，完成后获取视频结果
    */
   const handleGoToGenerate = async () => {
@@ -991,6 +1048,14 @@ const EditingPlanner: React.FC = () => {
         window.history.replaceState(null, "", `?${params.toString()}`);
       }
 
+      // 同步片段到后端 clips 表（生成前必须同步，后端生成从 clips 表读）
+      try {
+        await syncClipsToBackend(planId);
+      } catch (syncErr) {
+        console.warn("[片段同步失败]", syncErr);
+        // 同步失败不阻塞生成，后端有模板兜底
+      }
+
       // 触发生成
       const genRes = await generateEditPlan(planId);
       setGenTotalClips(genRes.clip_count);
-- 
2.54.0


From da07dbd1de7a09f50253fd4682e44a659385c314 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 11:06:24 +0800
Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=E7=94=9F=E6=88=90=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E5=BC=B9=E7=AA=97=E5=A2=9E=E5=8A=A0=E7=89=87=E6=AE=B5?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 genClipStatuses state 保存每个片段的处理状态
- 生成进度弹窗展示所有片段的实时状态（等待中/处理中/完成/失败）
- 处理中状态带呼吸动画效果
- 使用轮询已有的 clips 数据，无额外请求
---
 .../pages/editing-planner/EditingPlanner.css  | 75 +++++++++++++++++++
 .../pages/editing-planner/EditingPlanner.tsx  | 29 ++++++-
 2 files changed, 103 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
index 892a75d89..6ac2b6a2a 100644
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -6048,3 +6048,78 @@
   color: #ef4444;
   background: #fef2f2;
 }
+
+
+/* ═══ 生成进度 - 片段状态列表 ═══ */
+
+.ep-gen-clip-list {
+  margin-top: 16px;
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 8px;
+  padding: 4px 0;
+}
+
+.ep-gen-clip-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.ep-gen-clip-item + .ep-gen-clip-item {
+  border-top: 1px solid var(--border-color-light, #f3f4f6);
+}
+
+.ep-gen-clip-index {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-secondary, #f3f4f6);
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--text-secondary, #6b7280);
+  flex-shrink: 0;
+}
+
+.ep-gen-clip-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary, #1f2937);
+}
+
+.ep-gen-clip-status {
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.ep-gen-clip-status.status-completed {
+  color: #10b981;
+}
+
+.ep-gen-clip-status.status-failed {
+  color: #ef4444;
+}
+
+.ep-gen-clip-status.status-processing {
+  color: #3b82f6;
+  animation: pulse 1.5s infinite;
+}
+
+.ep-gen-clip-status.status-pending,
+.ep-gen-clip-status.status-queued {
+  color: #9ca3af;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index 485f53ebf..045af65c6 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -278,6 +278,7 @@ const EditingPlanner: React.FC = () => {
   const [genError, setGenError] = useState<string | null>(null);
   const [genCancelled, setGenCancelled] = useState(false);
   const [currentGenTaskId, setCurrentGenTaskId] = useState<string | null>(null);
+  const [genClipStatuses, setGenClipStatuses] = useState<ClipStatusItem[]>([]);
   const genTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   /* ── 播放 ── */
@@ -1084,6 +1085,7 @@ const EditingPlanner: React.FC = () => {
         ).length;
         setGenDoneClips(done);
         setGenTotalClips(total);
+        setGenClipStatuses(status.clips || []);
         setGenProgress(total > 0 ? Math.round((done / total) * 100) : 5);
 
         if (status.plan_status === "completed") {
@@ -1465,7 +1467,32 @@ const EditingPlanner: React.FC = () => {
             <p style={{ marginTop: 8, color: "var(--text-secondary)" }}>
               已处理 {genDoneClips}/{genTotalClips} 个片段
             </p>
-            <p style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+            {genClipStatuses.length > 0 && (
+              <div className="ep-gen-clip-list">
+                {genClipStatuses.map((clip, index) => (
+                  <div key={clip.clip_id || index} className="ep-gen-clip-item">
+                    <span className="ep-gen-clip-index">{index + 1}</span>
+                    <span className="ep-gen-clip-name">
+                      {clip.text_content
+                        ? clip.text_content.slice(0, 20)
+                        : clip.clip_type || `片段${index + 1}`}
+                    </span>
+                    <span
+                      className={`ep-gen-clip-status status-${clip.status}`}
+                    >
+                      {clip.status === "completed"
+                        ? "✓ 完成"
+                        : clip.status === "failed"
+                          ? "✗ 失败"
+                          : clip.status === "processing"
+                            ? "⟳ 处理中"
+                            : "⏳ 等待中"}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+            <p style={{ color: "var(--text-secondary)", fontSize: 12, marginTop: 12 }}>
               请耐心等待，生成过程中请勿关闭页面
             </p>
           </div>
-- 
2.54.0


From 33ccb16bd3e9ef4b1533f9332db636da6dda1fbd Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 11:08:04 +0800
Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E8=AE=A1=E5=88=92=E6=97=B6=E4=BC=98=E5=85=88?=
 =?UTF-8?q?=E4=BB=8E=E5=90=8E=E7=AB=AFclips=E8=A1=A8=E8=BF=98=E5=8E=9F?=
 =?UTF-8?q?=E7=89=87=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 加载计划时并行请求 clips 列表
- 优先从后端 clips 表还原片段（含 config.tts_config / trim_config）
- 无 clips 数据时从 config.segments 兜底（老数据兼容）
- 形成完整闭环：编辑→同步→生成→重新加载
---
 .../pages/editing-planner/EditingPlanner.tsx  | 49 +++++++++++++++++--
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index 045af65c6..d0647d730 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -417,8 +417,16 @@ const EditingPlanner: React.FC = () => {
    */
   useEffect(() => {
     if (!loadedPlanId) return;
-    getEditPlan(loadedPlanId)
-      .then((plan) => {
+
+    // 并行加载计划基本信息 + 片段列表
+    Promise.all([
+      getEditPlan(loadedPlanId),
+      getEditPlanClips(loadedPlanId, { limit: 500 }).catch(() => ({
+        items: [],
+        total: 0,
+      })),
+    ])
+      .then(([plan, clipsRes]) => {
         // 设置关联的模板（触发模板加载 effect）
         setLoadedTemplateId(plan.template_id);
 
@@ -458,8 +466,41 @@ const EditingPlanner: React.FC = () => {
           }));
         }
 
-        // 还原片段 — 延迟设置，等模板加载 effect 先执行 resetClips
-        if (cfg.segments && cfg.segments.length > 0) {
+        // 还原片段：优先从后端 clips 表，其次从 config.segments 兜底
+        const backendClips = clipsRes?.items || [];
+        if (backendClips.length > 0) {
+          // 从后端 clips 表还原
+          const sorted = [...backendClips].sort(
+            (a, b) => a.order - b.order,
+          );
+          const mapped: ClipData[] = sorted.map((clip) => ({
+            id: clip.id,
+            template_segment_id:
+              (clip.config?.template_segment_id as string) || "",
+            type: (clip.clip_type === "voiceover"
+              ? "voice"
+              : "pip") as ClipType,
+            duration: clip.duration || 3,
+            startOffset: 0,
+            script_text: clip.text_content || "",
+            order: clip.order,
+            media_asset_id: clip.asset_id || undefined,
+            transition:
+              clip.transition_effect && clip.transition_effect !== "none"
+                ? {
+                    type: clip.transition_effect as TransitionEffect["type"],
+                    duration: clip.transition_duration || 0.3,
+                  }
+                : undefined,
+            speed: clip.playback_speed
+              ? { rate: clip.playback_speed, pitchCorrection: true }
+              : undefined,
+            tts_config: (clip.config?.tts_config as TtsConfig) || undefined,
+            trim_config: (clip.config?.trim_config as TrimConfig) || undefined,
+          }));
+          setTimeout(() => resetClips(mapped), 100);
+        } else if (cfg.segments && cfg.segments.length > 0) {
+          // 兜底：从 config.segments 还原（老数据兼容）
           const mapped: ClipData[] = cfg.segments.map((seg, idx) => ({
             id: `seg-${idx}`,
             template_segment_id: `seg-${idx}`,
-- 
2.54.0


From 170f295d09dc625b8f3ce60733403aaadf4ad006 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 11:53:08 +0800
Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E6=95=B4=E5=90=88=20-=20=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E6=A0=8F=E7=89=87=E6=AE=B5Tab=20+=20=E5=B0=81=E9=9D=A2?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E8=BF=98=E5=8E=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 右侧栏增加属性/片段Tab切换，编辑器内直接管理片段
- 加载剪辑计划时还原封面配置（cover_config）
- 新增 EditorClipList 紧凑片段列表组件
- 片段Tab支持选中、上下移动、删除、添加操作
---
 .../pages/editing-planner/EditingPlanner.css  | 172 ++++++++++++++++++
 .../pages/editing-planner/EditingPlanner.tsx  | 135 ++++++++++----
 .../components/EditorClipList.tsx             | 166 +++++++++++++++++
 3 files changed, 436 insertions(+), 37 deletions(-)
 mode change 100644 => 100755 apps/web/src/pages/editing-planner/EditingPlanner.css
 create mode 100755 apps/web/src/pages/editing-planner/components/EditorClipList.tsx

diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
old mode 100644
new mode 100755
index 6ac2b6a2a..f365b52df
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -6123,3 +6123,175 @@
   50% { opacity: 0.5; }
 }
 
+/* ═══ 右侧栏 Tab ═══ */
+.ep-right-panel {
+  width: 260px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border-color, #e5e7eb);
+  background: var(--bg-secondary, #f9fafb);
+}
+
+.ep-right-tabs {
+  display: flex;
+  height: 40px;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  background: var(--bg-primary, #fff);
+}
+
+.ep-right-tab {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--text-secondary, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 2px solid transparent;
+}
+
+.ep-right-tab:hover {
+  color: var(--text-primary, #111827);
+}
+
+.ep-right-tab.active {
+  color: var(--primary-color, #3b82f6);
+  border-bottom-color: var(--primary-color, #3b82f6);
+  font-weight: 500;
+}
+
+.ep-right-tab-content {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* ═══ 编辑器内片段列表 ═══ */
+.ep-clip-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ep-clip-list-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  background: var(--bg-primary, #fff);
+}
+
+.ep-clip-list-count {
+  font-size: 12px;
+  color: var(--text-secondary, #6b7280);
+}
+
+.ep-clip-list-count b {
+  color: var(--text-primary, #111827);
+  font-weight: 600;
+}
+
+.ep-clip-list-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.ep-clip-list-item {
+  background: var(--bg-primary, #fff);
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 6px;
+  padding: 8px 10px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ep-clip-list-item:hover {
+  border-color: var(--primary-color, #3b82f6);
+  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
+}
+
+.ep-clip-list-item.selected {
+  border-color: var(--primary-color, #3b82f6);
+  background: rgba(59, 130, 246, 0.04);
+}
+
+.ep-clip-item-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.ep-clip-item-index {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--bg-tertiary, #f3f4f6);
+  color: var(--text-secondary, #6b7280);
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.ep-clip-item-type {
+  font-size: 11px;
+  color: var(--text-secondary, #6b7280);
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.ep-clip-item-type-label {
+  font-size: 11px;
+}
+
+.ep-clip-item-duration {
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+  flex-shrink: 0;
+}
+
+.ep-clip-item-text {
+  font-size: 12px;
+  color: var(--text-secondary, #6b7280);
+  line-height: 1.4;
+  margin-bottom: 6px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ep-clip-item-actions {
+  display: flex;
+  gap: 2px;
+  justify-content: flex-end;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.ep-clip-list-item:hover .ep-clip-item-actions,
+.ep-clip-list-item.selected .ep-clip-item-actions {
+  opacity: 1;
+}
+
+.ep-clip-item-btn {
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0 !important;
+  font-size: 11px !important;
+}
+
+.ep-clip-list-empty {
+  padding: 16px;
+  text-align: center;
+}
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index d0647d730..b8a6e1c44 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -85,6 +85,7 @@ import MediaPanel from "./components/MediaPanel";
 import PreviewPlayer from "./components/PreviewPlayer";
 import TimelinePanel from "./components/TimelinePanel";
 import ClipPropertiesPanel from "./components/ClipPropertiesPanel";
+import EditorClipList from "./components/EditorClipList";
 import BgmSelector from "./components/BgmSelector";
 import SubtitleStylePanel from "./components/SubtitleStylePanel";
 import type { SubtitleStyleConfig } from "./components/SubtitleStylePanel";
@@ -242,6 +243,8 @@ const EditingPlanner: React.FC = () => {
     ...DEFAULT_COVER_CONFIG,
   });
   const [coverDrawerOpen, setCoverDrawerOpen] = useState(false);
+  /* ── 右侧栏 Tab ── */
+  const [rightTab, setRightTab] = useState<"properties" | "clips">("properties");
 
   /* ── 保存弹窗 ── */
   const [saveModalOpen, setSaveModalOpen] = useState(false);
@@ -465,6 +468,20 @@ const EditingPlanner: React.FC = () => {
             music_id: cfg.bgm_config!.music_id || "",
           }));
         }
+        // 还原封面配置
+        if (cfg.cover_config) {
+          setCoverSettings((prev) => ({
+            ...prev,
+            enabled: cfg.cover_config!.enabled ?? prev.enabled,
+            mode: (cfg.cover_config!.mode as CoverConfig["mode"]) || prev.mode,
+            frame_time: cfg.cover_config!.frame_time ?? prev.frame_time,
+            upload_url: cfg.cover_config!.upload_url || prev.upload_url,
+            thumbnail_url:
+              cfg.cover_config!.thumbnail_url || prev.thumbnail_url,
+            ai_suggested_time:
+              cfg.cover_config!.ai_suggested_time ?? prev.ai_suggested_time,
+          }));
+        }
 
         // 还原片段：优先从后端 clips 表，其次从 config.segments 兜底
         const backendClips = clipsRes?.items || [];
@@ -1349,43 +1366,87 @@ const EditingPlanner: React.FC = () => {
         </div>
 
         {/* 右栏 260px：设置面板 */}
-        <ClipPropertiesPanel
-          selectedClip={selectedClip}
-          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 }) as SubtitleStyleConfig,
-            )
-          }
-          onBgmSettingsChange={(partial) =>
-            setBgmSettings((prev) => ({ ...prev, ...partial }))
-          }
-          onClipUpdate={handleClipUpdate}
-          onOpenBgmDrawer={() => setBgmDrawerOpen(true)}
-          onOpenSubtitleDrawer={() => setSubtitleDrawerOpen(true)}
-          voiceMaterials={voiceMaterials}
-          voiceMaterialsLoading={voiceMaterialsQuery.isLoading}
-          onRefreshVoiceMaterials={() => voiceMaterialsQuery.refetch()}
-          onClipVoiceSelect={handleClipVoiceSelect}
-          onOpenTransitionDrawer={handleOpenTransitionDrawer}
-          onOpenSpeedDrawer={handleOpenSpeedDrawer}
-          onOpenTtsDrawer={handleOpenTtsDrawer}
-          onOpenWatermarkDrawer={() => setWatermarkDrawerOpen(true)}
-          onOpenIntroOutroDrawer={() => setIntroOutroDrawerOpen(true)}
-          onOpenPipDrawer={() => setPipDrawerOpen(true)}
-          onOpenFilterDrawer={() => setFilterDrawerOpen(true)}
-          onOpenGreenScreenDrawer={() => setChromaKeyDrawerOpen(true)}
-          onOpenStickerDrawer={() => setStickerDrawerOpen(true)}
-          onOpenCoverDrawer={() => setCoverDrawerOpen(true)}
-        />
+        <div className="ep-right-panel">
+          {/* Tab 切换 */}
+          <div className="ep-right-tabs">
+            <button
+              className={`ep-right-tab${rightTab === "properties" ? " active" : ""}`}
+              onClick={() => setRightTab("properties")}
+            >
+              属性
+            </button>
+            <button
+              className={`ep-right-tab${rightTab === "clips" ? " active" : ""}`}
+              onClick={() => setRightTab("clips")}
+            >
+              片段
+            </button>
+          </div>
+
+          {/* 属性 Tab */}
+          {rightTab === "properties" && (
+            <div className="ep-right-tab-content">
+              <ClipPropertiesPanel
+                selectedClip={selectedClip}
+                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 }) as SubtitleStyleConfig,
+                  )
+                }
+                onBgmSettingsChange={(partial) =>
+                  setBgmSettings((prev) => ({ ...prev, ...partial }))
+                }
+                onClipUpdate={handleClipUpdate}
+                onOpenBgmDrawer={() => setBgmDrawerOpen(true)}
+                onOpenSubtitleDrawer={() => setSubtitleDrawerOpen(true)}
+                voiceMaterials={voiceMaterials}
+                voiceMaterialsLoading={voiceMaterialsQuery.isLoading}
+                onRefreshVoiceMaterials={() => voiceMaterialsQuery.refetch()}
+                onClipVoiceSelect={handleClipVoiceSelect}
+                onOpenTransitionDrawer={handleOpenTransitionDrawer}
+                onOpenSpeedDrawer={handleOpenSpeedDrawer}
+                onOpenTtsDrawer={handleOpenTtsDrawer}
+                onOpenWatermarkDrawer={() => setWatermarkDrawerOpen(true)}
+                onOpenIntroOutroDrawer={() => setIntroOutroDrawerOpen(true)}
+                onOpenPipDrawer={() => setPipDrawerOpen(true)}
+                onOpenFilterDrawer={() => setFilterDrawerOpen(true)}
+                onOpenGreenScreenDrawer={() => setChromaKeyDrawerOpen(true)}
+                onOpenStickerDrawer={() => setStickerDrawerOpen(true)}
+                onOpenCoverDrawer={() => setCoverDrawerOpen(true)}
+              />
+            </div>
+          )}
+
+          {/* 片段 Tab */}
+          {rightTab === "clips" && (
+            <div className="ep-right-tab-content">
+              <EditorClipList
+                clips={clips}
+                selectedClipId={selectedClipId}
+                onSelect={handleClipSelect}
+                onMoveUp={(clipId) => {
+                  const idx = clips.findIndex((c) => c.id === clipId);
+                  if (idx > 0) handleClipReorder(clipId, idx - 1);
+                }}
+                onMoveDown={(clipId) => {
+                  const idx = clips.findIndex((c) => c.id === clipId);
+                  if (idx < clips.length - 1) handleClipReorder(clipId, idx + 1);
+                }}
+                onRemove={handleClipRemove}
+                onAdd={handleAddClip}
+              />
+            </div>
+          )}
+        </div>
       </div>
 
       {/* ═══ 第4行：底栏 40px ═══ */}
diff --git a/apps/web/src/pages/editing-planner/components/EditorClipList.tsx b/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
new file mode 100755
index 000000000..ae9b5c0cb
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
@@ -0,0 +1,166 @@
+/**
+ * 编辑器右侧栏 — 片段列表 Tab
+ * 紧凑版片段管理：选中、上下移动、删除、添加
+ */
+import React from "react";
+import { Button, Tooltip, Empty } from "antd";
+import {
+  UpOutlined,
+  DownOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  ScissorOutlined,
+  SoundOutlined,
+  PictureOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import type { ClipData, ClipType } from "../types";
+
+interface EditorClipListProps {
+  clips: ClipData[];
+  selectedClipId: string | null;
+  onSelect: (clipId: string) => void;
+  onMoveUp: (clipId: string) => void;
+  onMoveDown: (clipId: string) => void;
+  onRemove: (clipId: string) => void;
+  onAdd: () => void;
+  onSplit?: (clipId: string) => void;
+}
+
+const clipTypeIcon: Record<ClipType | string, React.ReactNode> = {
+  video: <VideoCameraOutlined />,
+  image: <PictureOutlined />,
+  voice: <SoundOutlined />,
+  pip: <ScissorOutlined />,
+};
+
+const clipTypeLabel: Record<ClipType | string, string> = {
+  video: "视频",
+  image: "图片",
+  voice: "配音",
+  pip: "画中画",
+};
+
+const formatDuration = (sec: number) => {
+  if (sec < 60) return `${sec.toFixed(1)}s`;
+  const m = Math.floor(sec / 60);
+  const s = (sec % 60).toFixed(0);
+  return `${m}m${s.padStart(2, "0")}s`;
+};
+
+const EditorClipList: React.FC<EditorClipListProps> = ({
+  clips,
+  selectedClipId,
+  onSelect,
+  onMoveUp,
+  onMoveDown,
+  onRemove,
+  onAdd,
+}) => {
+  if (clips.length === 0) {
+    return (
+      <div className="ep-clip-list-empty">
+        <Empty
+          description="暂无片段"
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          style={{ margin: "40px 0" }}
+        />
+        <Button type="primary" icon={<PlusOutlined />} block onClick={onAdd}>
+          添加片段
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ep-clip-list">
+      {/* 顶部工具栏 */}
+      <div className="ep-clip-list-toolbar">
+        <span className="ep-clip-list-count">
+          共 <b>{clips.length}</b> 个片段
+        </span>
+        <Tooltip title="添加片段">
+          <Button
+            type="primary"
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={onAdd}
+          >
+            添加
+          </Button>
+        </Tooltip>
+      </div>
+
+      {/* 片段列表 */}
+      <div className="ep-clip-list-scroll">
+        {clips.map((clip, index) => (
+          <div
+            key={clip.id}
+            className={`ep-clip-list-item${
+              selectedClipId === clip.id ? " selected" : ""
+            }`}
+            onClick={() => onSelect(clip.id)}
+          >
+            {/* 序号 + 类型图标 */}
+            <div className="ep-clip-item-head">
+              <span className="ep-clip-item-index">{index + 1}</span>
+              <span className="ep-clip-item-type">
+                {clipTypeIcon[clip.type] || <ScissorOutlined />}
+                <span className="ep-clip-item-type-label">
+                  {clipTypeLabel[clip.type] || "片段"}
+                </span>
+              </span>
+              <span className="ep-clip-item-duration">
+                {formatDuration(clip.duration)}
+              </span>
+            </div>
+
+            {/* 文案预览 */}
+            {clip.script_text && (
+              <div className="ep-clip-item-text">
+                {clip.script_text.slice(0, 40)}
+                {clip.script_text.length > 40 ? "..." : ""}
+              </div>
+            )}
+
+            {/* 操作按钮 */}
+            <div className="ep-clip-item-actions" onClick={(e) => e.stopPropagation()}>
+              <Tooltip title="上移">
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<UpOutlined />}
+                  disabled={index === 0}
+                  onClick={() => onMoveUp(clip.id)}
+                  className="ep-clip-item-btn"
+                />
+              </Tooltip>
+              <Tooltip title="下移">
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<DownOutlined />}
+                  disabled={index === clips.length - 1}
+                  onClick={() => onMoveDown(clip.id)}
+                  className="ep-clip-item-btn"
+                />
+              </Tooltip>
+              <Tooltip title="删除">
+                <Button
+                  type="text"
+                  size="small"
+                  danger
+                  icon={<DeleteOutlined />}
+                  onClick={() => onRemove(clip.id)}
+                  className="ep-clip-item-btn"
+                />
+              </Tooltip>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default EditorClipList;
-- 
2.54.0


From bebe5a78c6290156476599b98b8fac23f1bbe2c6 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 12:55:29 +0800
Subject: [PATCH 09/17] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4EditorClipList?=
 =?UTF-8?q?=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84onSplit=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/pages/editing-planner/components/EditorClipList.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/pages/editing-planner/components/EditorClipList.tsx b/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
index ae9b5c0cb..1d5582f7c 100755
--- a/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
+++ b/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
@@ -24,7 +24,6 @@ interface EditorClipListProps {
   onMoveDown: (clipId: string) => void;
   onRemove: (clipId: string) => void;
   onAdd: () => void;
-  onSplit?: (clipId: string) => void;
 }
 
 const clipTypeIcon: Record<ClipType | string, React.ReactNode> = {
-- 
2.54.0


From ae20abaed59f5de721e0769bc36adc167ef5c750 Mon Sep 17 00:00:00 2001
From: XiaoXia Bot <bot@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 13:54:15 +0800
Subject: [PATCH 10/17] style: auto-format with black

---
 apps/worker/worker_app/tasks/edit_plan_generation.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/worker/worker_app/tasks/edit_plan_generation.py b/apps/worker/worker_app/tasks/edit_plan_generation.py
index 19ce9d826..b671df4b5 100755
--- a/apps/worker/worker_app/tasks/edit_plan_generation.py
+++ b/apps/worker/worker_app/tasks/edit_plan_generation.py
@@ -495,11 +495,16 @@ def render_edit_plan(self, plan_id: str) -> dict:
                 if generation_task_id:
                     current_task = gen_task_repo.get(generation_task_id)
                     if current_task:
-                        task_status = current_task.status.value if hasattr(current_task.status, "value") else str(current_task.status)
+                        task_status = (
+                            current_task.status.value
+                            if hasattr(current_task.status, "value")
+                            else str(current_task.status)
+                        )
                         if task_status == "cancelled":
                             logger.info("任务已被取消，中止渲染: plan_id=%s task_id=%s", plan_id, generation_task_id)
                             # 计划回到 editing 状态，用户可以继续编辑
                             from packages.domain.edit_plan import EditPlanStatus
+
                             if plan.status.value == "rendering":
                                 try:
                                     plan.resume_editing()
-- 
2.54.0


From 5d0880c323ab0485d4af5ea11d65aa82d7db8088 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 21:26:19 +0800
Subject: [PATCH 11/17] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4PlanClipsManager?=
 =?UTF-8?q?=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84Tooltip=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/pages/edit-plans/PlanClipsManager.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/pages/edit-plans/PlanClipsManager.tsx b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
index 5b3ab4ed4..9c92339d6 100755
--- a/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
+++ b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
@@ -19,7 +19,6 @@ import {
   Select,
   Tag,
   Drawer,
-  Tooltip,
   Empty,
   Card,
 } from "antd";
-- 
2.54.0


From 646217f78cd9f50131baccca9eb7c422ad4a09a1 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 21:48:25 +0800
Subject: [PATCH 12/17] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dlint=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=20-=20=E7=A7=BB=E9=99=A4=E9=87=8D=E5=A4=8DEditPlanCli?=
 =?UTF-8?q?p=E5=AE=9A=E4=B9=89/=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=AF=BC=E5=85=A5/handleClipReorder=E4=BC=A0=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/api/editPlans.ts                  | 18 ------------------
 .../src/pages/edit-plans/PlanClipsManager.tsx  |  1 -
 .../pages/editing-planner/EditingPlanner.tsx   |  4 ++--
 3 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/api/editPlans.ts b/apps/web/src/api/editPlans.ts
index 9c56b1f07..84d8ea9fc 100755
--- a/apps/web/src/api/editPlans.ts
+++ b/apps/web/src/api/editPlans.ts
@@ -281,24 +281,6 @@ export interface CoverResult {
  * 前端 UI 类型（EditingPlanner 组件依赖，保留兼容）
  * ============================================================ */
 
-/** 剪辑计划中的片段（UI 层类型） */
-export interface EditPlanClip {
-  id: string;
-  template_segment_id: string;
-  /** 素材库中的素材 ID */
-  media_asset_id?: string;
-  /** 素材类型 */
-  material_type: "video" | "image" | "audio" | "voiceover";
-  /** 片段文案 */
-  script_text: string;
-  /** 实际时长（秒） */
-  duration: number;
-  /** 转场效果 */
-  transition?: TransitionEffect;
-  /** 排序 */
-  order: number;
-}
-
 /** 转场效果（14 种预设） */
 export interface TransitionEffect {
   type:
diff --git a/apps/web/src/pages/edit-plans/PlanClipsManager.tsx b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
index 9c92339d6..920535ed6 100755
--- a/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
+++ b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
@@ -42,7 +42,6 @@ import {
   reorderEditPlanClips,
   createClipsFromAssets,
   getMediaAssets,
-  type EditPlan,
   type EditPlanClip,
   type EditPlanClipStatus,
 } from "@/api/editPlans";
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index b8a6e1c44..ccc714d0a 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -1435,11 +1435,11 @@ const EditingPlanner: React.FC = () => {
                 onSelect={handleClipSelect}
                 onMoveUp={(clipId) => {
                   const idx = clips.findIndex((c) => c.id === clipId);
-                  if (idx > 0) handleClipReorder(clipId, idx - 1);
+                  if (idx > 0) handleClipReorder(idx, idx - 1);
                 }}
                 onMoveDown={(clipId) => {
                   const idx = clips.findIndex((c) => c.id === clipId);
-                  if (idx < clips.length - 1) handleClipReorder(clipId, idx + 1);
+                  if (idx < clips.length - 1) handleClipReorder(idx, idx + 1);
                 }}
                 onRemove={handleClipRemove}
                 onAdd={handleAddClip}
-- 
2.54.0


From beb447d602a08a76d459a5ad5eac93d562bc655c Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 16 Jul 2026 21:55:34 +0800
Subject: [PATCH 13/17] =?UTF-8?q?fix:=20=E8=A1=A5=E5=85=85ClipStatusItem?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/pages/editing-planner/EditingPlanner.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index ccc714d0a..c57a46603 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -43,6 +43,7 @@ import {
   batchDeleteEditPlanClips,
   type EditPlanClip,
   type CreateEditPlanClipRequest,
+  type ClipStatusItem,
 } from "@/api/editPlans";
 import { useUndoRedo } from "./hooks/useUndoRedo";
 import type {
-- 
2.54.0


From dbc8cb9fb26239e2ffbd300387cfa9f040af7426 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Fri, 17 Jul 2026 07:41:06 +0800
Subject: [PATCH 14/17] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AFlint=E5=92=8C=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- STATUS_CONFIG补充cancelled状态定义
- ClipData类型增加media_asset_id字段
- EditorClipList的onAdd包一层默认参数，修复类型不匹配
- handleClipUpdate改用useCallback包裹，修复exhaustive-deps
- 修复no-explicit-any警告
- 字幕类型和常量抽离到types/subtitle.ts，满足react-refresh规则
---
 apps/web/src/pages/edit-plans/EditPlans.tsx   |  6 +++
 .../pages/editing-planner/EditingPlanner.tsx  | 33 +++++++------
 .../components/SubtitleStylePanel.tsx         | 42 +----------------
 apps/web/src/pages/editing-planner/types.ts   |  2 +
 .../pages/editing-planner/types/subtitle.ts   | 46 +++++++++++++++++++
 5 files changed, 75 insertions(+), 54 deletions(-)
 mode change 100644 => 100755 apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
 mode change 100644 => 100755 apps/web/src/pages/editing-planner/types.ts
 create mode 100755 apps/web/src/pages/editing-planner/types/subtitle.ts

diff --git a/apps/web/src/pages/edit-plans/EditPlans.tsx b/apps/web/src/pages/edit-plans/EditPlans.tsx
index 26fc1f736..4ac6116e0 100755
--- a/apps/web/src/pages/edit-plans/EditPlans.tsx
+++ b/apps/web/src/pages/edit-plans/EditPlans.tsx
@@ -26,6 +26,7 @@ import {
   ThunderboltOutlined,
   CopyOutlined,
   UnorderedListOutlined,
+  StopOutlined,
 } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import {
@@ -82,6 +83,11 @@ const STATUS_CONFIG: Record<
     color: "error",
     icon: <CloseCircleOutlined />,
   },
+  cancelled: {
+    label: "已取消",
+    color: "default",
+    icon: <StopOutlined />,
+  },
 };
 
 /* ──────────── 工具函数 ──────────── */
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index c57a46603..e2635d2f7 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -89,8 +89,8 @@ import ClipPropertiesPanel from "./components/ClipPropertiesPanel";
 import EditorClipList from "./components/EditorClipList";
 import BgmSelector from "./components/BgmSelector";
 import SubtitleStylePanel from "./components/SubtitleStylePanel";
-import type { SubtitleStyleConfig } from "./components/SubtitleStylePanel";
-import { DEFAULT_SUBTITLE_STYLE } from "./components/SubtitleStylePanel";
+import type { SubtitleStyleConfig } from "./types/subtitle";
+import { DEFAULT_SUBTITLE_STYLE } from "./types/subtitle";
 import TransitionSelector from "./components/TransitionSelector";
 import SpeedPanel from "./components/SpeedPanel";
 import TtsPanel from "./components/TtsPanel";
@@ -626,11 +626,14 @@ const EditingPlanner: React.FC = () => {
     if (selectedClipId === clipId) setSelectedClipId(null);
   };
 
-  const handleClipUpdate = (clipId: string, data: Partial<ClipData>) => {
-    setClips((prev) =>
-      prev.map((c) => (c.id === clipId ? { ...c, ...data } : c)),
-    );
-  };
+  const handleClipUpdate = useCallback(
+    (clipId: string, data: Partial<ClipData>) => {
+      setClips((prev) =>
+        prev.map((c) => (c.id === clipId ? { ...c, ...data } : c)),
+      );
+    },
+    [setClips],
+  );
 
   /**
    * 添加片段（不绑定任何素材）
@@ -738,7 +741,7 @@ const EditingPlanner: React.FC = () => {
       }
       // 同时更新全局默认转场（供新片段使用）
     },
-    [transitionTargetClipId],
+    [transitionTargetClipId, handleClipUpdate],
   );
 
   /* ── 打开转场选择器 ── */
@@ -754,7 +757,7 @@ const EditingPlanner: React.FC = () => {
         handleClipUpdate(speedTargetClipId, { speed: config });
       }
     },
-    [speedTargetClipId],
+    [speedTargetClipId, handleClipUpdate],
   );
 
   /* ── 打开调速面板 ── */
@@ -769,7 +772,7 @@ const EditingPlanner: React.FC = () => {
       if (!ttsTargetClipId) return;
       handleClipUpdate(ttsTargetClipId, { tts_config: ttsConfig });
     },
-    [ttsTargetClipId],
+    [ttsTargetClipId, handleClipUpdate],
   );
 
   /* ── 打开 TTS 配音面板 ── */
@@ -782,7 +785,7 @@ const EditingPlanner: React.FC = () => {
   const handleApplySpeedAll = useCallback((config: SpeedConfig) => {
     setClips((prev) => prev.map((c) => ({ ...c, speed: { ...config } })));
     message.success("已应用到所有片段");
-  }, []);
+  }, [setClips]);
 
   /* ── 水印配置变更 ── */
   const handleWatermarkChange = useCallback((config: WatermarkConfig) => {
@@ -1214,9 +1217,11 @@ const EditingPlanner: React.FC = () => {
           message.info("取消请求已提交，正在停止...");
           // 停止本地轮询，等待服务端状态通过轮询或下一次检查返回 cancelled
           // 这里不立即停止，让轮询检测到 cancelled 状态后再收尾，以确保服务端确实处理了
-        } catch (err: any) {
+        } catch (err: unknown) {
           console.error("[取消生成失败]", err);
-          const msg = err?.response?.data?.detail || "取消失败，请稍后重试";
+          const msg =
+            (err as { response?: { data?: { detail?: string } } })?.response
+              ?.data?.detail || "取消失败，请稍后重试";
           message.error(msg);
         }
       },
@@ -1443,7 +1448,7 @@ const EditingPlanner: React.FC = () => {
                   if (idx < clips.length - 1) handleClipReorder(idx, idx + 1);
                 }}
                 onRemove={handleClipRemove}
-                onAdd={handleAddClip}
+                onAdd={() => handleAddClip("pip", 3)}
               />
             </div>
           )}
diff --git a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
old mode 100644
new mode 100755
index 5f75536cf..40aeff7d0
--- a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
@@ -5,46 +5,8 @@
 import React from "react";
 import { Drawer, Slider, ColorPicker, Select } from "antd";
 import type { Color } from "antd/es/color-picker";
-
-/* ──────────── 类型 ──────────── */
-
-export type SubtitleMode = "manual" | "asr";
-
-export interface SubtitleStyleConfig {
-  /** 是否启用字幕 */
-  enabled: boolean;
-  /** 字幕模式：手动输入 / ASR 自动识别 */
-  mode: SubtitleMode;
-  /** 字体大小 px */
-  fontSize: number;
-  /** 字体颜色 */
-  fontColor: string;
-  /** 描边 */
-  stroke: boolean;
-  /** 阴影 */
-  shadow: boolean;
-  /** 字幕位置 */
-  position: "top" | "center" | "bottom";
-  /** 字体 */
-  font: string;
-  /** 动画效果 */
-  animation: string;
-  /** ASR 语言（仅 ASR 模式） */
-  asrLanguage: "zh" | "en";
-}
-
-export const DEFAULT_SUBTITLE_STYLE: SubtitleStyleConfig = {
-  enabled: true,
-  mode: "asr",
-  fontSize: 16,
-  fontColor: "#ffffff",
-  stroke: true,
-  shadow: false,
-  position: "bottom",
-  font: "思源黑体",
-  animation: "none",
-  asrLanguage: "zh",
-};
+import type { SubtitleMode, SubtitleStyleConfig } from "../types/subtitle";
+import { DEFAULT_SUBTITLE_STYLE } from "../types/subtitle";
 
 /* ──────────── 选项常量 ──────────── */
 
diff --git a/apps/web/src/pages/editing-planner/types.ts b/apps/web/src/pages/editing-planner/types.ts
old mode 100644
new mode 100755
index 110bffcdb..3271f0e9b
--- a/apps/web/src/pages/editing-planner/types.ts
+++ b/apps/web/src/pages/editing-planner/types.ts
@@ -512,6 +512,8 @@ export interface ClipData {
   type: ClipType; // 片段类型：voice（口播）或 pip（画中画）
   duration: number; // 时长（秒）
   startOffset: number; // 仅 voice 类型：在口播素材中的起始时间（秒）
+  /** 素材库素材 ID（main/pip 类型片段使用） */
+  media_asset_id?: string;
   // 保留兼容字段（后端序列化需要）
   template_segment_id?: string;
   script_text?: string;
diff --git a/apps/web/src/pages/editing-planner/types/subtitle.ts b/apps/web/src/pages/editing-planner/types/subtitle.ts
new file mode 100755
index 000000000..336effe1f
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/types/subtitle.ts
@@ -0,0 +1,46 @@
+/**
+ * 字幕样式相关类型与常量
+ * 单独抽离以满足 react-refresh/only-export-components 规则
+ */
+
+/* ──────────── 类型 ──────────── */
+
+export type SubtitleMode = "manual" | "asr";
+
+export interface SubtitleStyleConfig {
+  /** 是否启用字幕 */
+  enabled: boolean;
+  /** 字幕模式：手动输入 / ASR 自动识别 */
+  mode: SubtitleMode;
+  /** 字体大小 px */
+  fontSize: number;
+  /** 字体颜色 */
+  fontColor: string;
+  /** 描边 */
+  stroke: boolean;
+  /** 阴影 */
+  shadow: boolean;
+  /** 字幕位置 */
+  position: "top" | "center" | "bottom";
+  /** 字体 */
+  font: string;
+  /** 动画效果 */
+  animation: string;
+  /** ASR 语言（仅 ASR 模式） */
+  asrLanguage: "zh" | "en";
+}
+
+/* ──────────── 默认值 ──────────── */
+
+export const DEFAULT_SUBTITLE_STYLE: SubtitleStyleConfig = {
+  enabled: true,
+  mode: "asr",
+  fontSize: 16,
+  fontColor: "#ffffff",
+  stroke: true,
+  shadow: false,
+  position: "bottom",
+  font: "思源黑体",
+  animation: "none",
+  asrLanguage: "zh",
+};
-- 
2.54.0


From cff4ffda832b35fbb4450ca4c6dab05103e2c1a4 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Fri, 17 Jul 2026 07:46:18 +0800
Subject: [PATCH 15/17] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E6=9C=AA?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84SubtitleMode=E5=92=8CDEFAULT=5FSUBTI?=
 =?UTF-8?q?TLE=5FSTYLE=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/editing-planner/components/SubtitleStylePanel.tsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
index 40aeff7d0..27f252da0 100755
--- a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
@@ -5,8 +5,7 @@
 import React from "react";
 import { Drawer, Slider, ColorPicker, Select } from "antd";
 import type { Color } from "antd/es/color-picker";
-import type { SubtitleMode, SubtitleStyleConfig } from "../types/subtitle";
-import { DEFAULT_SUBTITLE_STYLE } from "../types/subtitle";
+import type { SubtitleStyleConfig } from "../types/subtitle";
 
 /* ──────────── 选项常量 ──────────── */
 
-- 
2.54.0


From a3423c0efaf509adae620a34f1eee2771edea185 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Fri, 17 Jul 2026 07:54:42 +0800
Subject: [PATCH 16/17] =?UTF-8?q?style:=20prettier=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/api/editPlans.ts                 | 17 ++--------
 .../pages/editing-planner/EditingPlanner.tsx  | 33 +++++++++++++------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/api/editPlans.ts b/apps/web/src/api/editPlans.ts
index 84d8ea9fc..5c894f75a 100755
--- a/apps/web/src/api/editPlans.ts
+++ b/apps/web/src/api/editPlans.ts
@@ -20,12 +20,7 @@ import type {
 
 /** 剪辑计划状态枚举 */
 export type EditPlanStatus =
-  | "draft"
-  | "editing"
-  | "rendering"
-  | "completed"
-  | "failed"
-  | "cancelled";
+  "draft" | "editing" | "rendering" | "completed" | "failed" | "cancelled";
 
 /** 标题配置（对齐后端 title_config） */
 export interface TitleConfig {
@@ -441,9 +436,7 @@ export async function getGenerationTaskResults(
 }
 
 /** 取消生成任务 */
-export async function cancelGenerationTask(
-  taskId: string,
-): Promise<void> {
+export async function cancelGenerationTask(taskId: string): Promise<void> {
   await apiClient.post(`/generation/tasks/${taskId}/cancel`);
 }
 
@@ -452,11 +445,7 @@ export async function cancelGenerationTask(
  * ============================================================ */
 
 /** 片段状态 */
-export type EditPlanClipStatus =
-  | "pending"
-  | "processing"
-  | "ready"
-  | "failed";
+export type EditPlanClipStatus = "pending" | "processing" | "ready" | "failed";
 
 /** 剪辑片段（后端响应） */
 export interface EditPlanClip {
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
index e2635d2f7..ab55be640 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx
@@ -245,7 +245,9 @@ const EditingPlanner: React.FC = () => {
   });
   const [coverDrawerOpen, setCoverDrawerOpen] = useState(false);
   /* ── 右侧栏 Tab ── */
-  const [rightTab, setRightTab] = useState<"properties" | "clips">("properties");
+  const [rightTab, setRightTab] = useState<"properties" | "clips">(
+    "properties",
+  );
 
   /* ── 保存弹窗 ── */
   const [saveModalOpen, setSaveModalOpen] = useState(false);
@@ -488,9 +490,7 @@ const EditingPlanner: React.FC = () => {
         const backendClips = clipsRes?.items || [];
         if (backendClips.length > 0) {
           // 从后端 clips 表还原
-          const sorted = [...backendClips].sort(
-            (a, b) => a.order - b.order,
-          );
+          const sorted = [...backendClips].sort((a, b) => a.order - b.order);
           const mapped: ClipData[] = sorted.map((clip) => ({
             id: clip.id,
             template_segment_id:
@@ -782,10 +782,13 @@ const EditingPlanner: React.FC = () => {
   }, []);
 
   /* ── 调速应用到所有片段 ── */
-  const handleApplySpeedAll = useCallback((config: SpeedConfig) => {
-    setClips((prev) => prev.map((c) => ({ ...c, speed: { ...config } })));
-    message.success("已应用到所有片段");
-  }, [setClips]);
+  const handleApplySpeedAll = useCallback(
+    (config: SpeedConfig) => {
+      setClips((prev) => prev.map((c) => ({ ...c, speed: { ...config } })));
+      message.success("已应用到所有片段");
+    },
+    [setClips],
+  );
 
   /* ── 水印配置变更 ── */
   const handleWatermarkChange = useCallback((config: WatermarkConfig) => {
@@ -1559,7 +1562,11 @@ const EditingPlanner: React.FC = () => {
                 ]
               : generating
                 ? [
-                    <Button key="cancel" danger onClick={handleCancelGeneration}>
+                    <Button
+                      key="cancel"
+                      danger
+                      onClick={handleCancelGeneration}
+                    >
                       取消生成
                     </Button>,
                   ]
@@ -1600,7 +1607,13 @@ const EditingPlanner: React.FC = () => {
                 ))}
               </div>
             )}
-            <p style={{ color: "var(--text-secondary)", fontSize: 12, marginTop: 12 }}>
+            <p
+              style={{
+                color: "var(--text-secondary)",
+                fontSize: 12,
+                marginTop: 12,
+              }}
+            >
               请耐心等待，生成过程中请勿关闭页面
             </p>
           </div>
-- 
2.54.0


From 7285ac9b6b3ab7895425528585debaf69b1fae41 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Fri, 17 Jul 2026 09:19:10 +0800
Subject: [PATCH 17/17] =?UTF-8?q?style:=20=E8=A1=A5=E5=85=85prettier?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/edit-plans/PlanClipsManager.tsx | 56 +++++++++++++++----
 .../components/EditorClipList.tsx             |  5 +-
 .../editing-planner/hooks/useEditPlanClips.ts |  6 +-
 3 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/pages/edit-plans/PlanClipsManager.tsx b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
index 920535ed6..41937bee9 100755
--- a/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
+++ b/apps/web/src/pages/edit-plans/PlanClipsManager.tsx
@@ -159,13 +159,18 @@ const PlanClipsManager: React.FC = () => {
       width: 150,
       ellipsis: true,
       render: (assetId: string) =>
-        assetId ? <code className="clip-asset-id">{assetId.slice(0, 12)}...</code> : <span style={{ color: "#999" }}>无素材</span>,
+        assetId ? (
+          <code className="clip-asset-id">{assetId.slice(0, 12)}...</code>
+        ) : (
+          <span style={{ color: "#999" }}>无素材</span>
+        ),
     },
     {
       title: "文本内容",
       dataIndex: "text_content",
       ellipsis: true,
-      render: (text: string) => text || <span style={{ color: "#999" }}>-</span>,
+      render: (text: string) =>
+        text || <span style={{ color: "#999" }}>-</span>,
     },
     {
       title: "时长",
@@ -274,7 +279,8 @@ const PlanClipsManager: React.FC = () => {
         message.success("片段已更新");
       } else {
         // 新建
-        const maxOrder = clips.length > 0 ? Math.max(...clips.map((c) => c.order)) : -1;
+        const maxOrder =
+          clips.length > 0 ? Math.max(...clips.map((c) => c.order)) : -1;
         await createEditPlanClip(planId, {
           ...values,
           order: maxOrder + 1,
@@ -410,7 +416,11 @@ const PlanClipsManager: React.FC = () => {
             {reorderMode ? (
               <>
                 <Button onClick={cancelReorder}>取消排序</Button>
-                <Button type="primary" icon={<SaveOutlined />} onClick={saveReorder}>
+                <Button
+                  type="primary"
+                  icon={<SaveOutlined />}
+                  onClick={saveReorder}
+                >
                   保存排序
                 </Button>
               </>
@@ -423,7 +433,11 @@ const PlanClipsManager: React.FC = () => {
                 >
                   调整顺序
                 </Button>
-                <Button type="primary" icon={<PlusOutlined />} onClick={handleNewClip}>
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={handleNewClip}
+                >
                   添加片段
                 </Button>
               </>
@@ -465,7 +479,9 @@ const PlanClipsManager: React.FC = () => {
                 <span className="reorder-content">
                   {clip.text_content || clip.asset_id || "无内容"}
                 </span>
-                <span className="reorder-duration">{clip.duration.toFixed(1)}s</span>
+                <span className="reorder-duration">
+                  {clip.duration.toFixed(1)}s
+                </span>
                 <Space>
                   <Button
                     size="small"
@@ -540,7 +556,11 @@ const PlanClipsManager: React.FC = () => {
             <Input.TextArea rows={3} placeholder="字幕/配音文案等" />
           </Form.Item>
           <div style={{ display: "flex", gap: 16 }}>
-            <Form.Item label="起始时间（秒）" name="start_time" style={{ flex: 1 }}>
+            <Form.Item
+              label="起始时间（秒）"
+              name="start_time"
+              style={{ flex: 1 }}
+            >
               <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
             </Form.Item>
             <Form.Item label="时长（秒）" name="duration" style={{ flex: 1 }}>
@@ -548,15 +568,28 @@ const PlanClipsManager: React.FC = () => {
             </Form.Item>
           </div>
           <div style={{ display: "flex", gap: 16 }}>
-            <Form.Item label="转场效果" name="transition_effect" style={{ flex: 1 }}>
+            <Form.Item
+              label="转场效果"
+              name="transition_effect"
+              style={{ flex: 1 }}
+            >
               <Select options={TRANSITION_OPTIONS} />
             </Form.Item>
-            <Form.Item label="转场时长" name="transition_duration" style={{ flex: 1 }}>
+            <Form.Item
+              label="转场时长"
+              name="transition_duration"
+              style={{ flex: 1 }}
+            >
               <InputNumber min={0} step={0.1} style={{ width: "100%" }} />
             </Form.Item>
           </div>
           <Form.Item label="播放速度" name="playback_speed">
-            <InputNumber min={0.1} max={10} step={0.1} style={{ width: "100%" }} />
+            <InputNumber
+              min={0.1}
+              max={10}
+              step={0.1}
+              style={{ width: "100%" }}
+            />
           </Form.Item>
         </Form>
       </Modal>
@@ -574,7 +607,8 @@ const PlanClipsManager: React.FC = () => {
             loading={importLoading}
             disabled={selectedAssetIds.length === 0}
           >
-            导入 {selectedAssetIds.length > 0 ? `(${selectedAssetIds.length})` : ""}
+            导入{" "}
+            {selectedAssetIds.length > 0 ? `(${selectedAssetIds.length})` : ""}
           </Button>
         }
       >
diff --git a/apps/web/src/pages/editing-planner/components/EditorClipList.tsx b/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
index 1d5582f7c..015391fa2 100755
--- a/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
+++ b/apps/web/src/pages/editing-planner/components/EditorClipList.tsx
@@ -123,7 +123,10 @@ const EditorClipList: React.FC<EditorClipListProps> = ({
             )}
 
             {/* 操作按钮 */}
-            <div className="ep-clip-item-actions" onClick={(e) => e.stopPropagation()}>
+            <div
+              className="ep-clip-item-actions"
+              onClick={(e) => e.stopPropagation()}
+            >
               <Tooltip title="上移">
                 <Button
                   type="text"
diff --git a/apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts b/apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts
index 997fd4c1c..283177711 100755
--- a/apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts
+++ b/apps/web/src/pages/editing-planner/hooks/useEditPlanClips.ts
@@ -12,11 +12,7 @@
  */
 import { useCallback, useState } from "react";
 import { message } from "antd";
-import {
-  useQuery,
-  useQueryClient,
-  useMutation,
-} from "@tanstack/react-query";
+import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
 import type {
   EditPlanClip,
   CreateEditPlanClipRequest,
-- 
2.54.0