From c8229ced265dd36afe0892f868d7318f8bfab739 Mon Sep 17 00:00:00 2001
From: cc <94575594@qq.com>
Date: Mon, 23 Mar 2026 17:22:28 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20chore:=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E8=AE=B2=E8=A7=A3=E5=8A=9F=E8=83=BD=E5=8F=8A?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js            |    6 -
 src/views/HomePage.vue         |    9 +-
 src/views/VideoExplanation.vue | 2113 --------------------------------
 3 files changed, 1 insertion(+), 2127 deletions(-)
 delete mode 100644 src/views/VideoExplanation.vue

diff --git a/src/router/index.js b/src/router/index.js
index 5d54e10..04b31ba 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,6 @@ import Speaking from '../views/Speaking.vue'
 import EssayCorrection from '../views/EssayCorrection.vue'
 import ExamAnalysis from '../views/ExamAnalysis.vue'
 import SpellPractice from '../views/SpellPractice.vue'
-import VideoExplanation from '../views/VideoExplanation.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -40,11 +39,6 @@ const router = createRouter({
       name: 'spell-practice',
       component: SpellPractice
     },
-    {
-      path: '/video-explanation',
-      name: 'video-explanation',
-      component: VideoExplanation
-    }
   ]
 })
 
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 23381db..920d591 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -53,14 +53,7 @@ const features = ref([
     icon: "speaker",
     route: "/pronunciation",
   },
-  {
-    id: 7,
-    title: "试题讲解视频",
-    desc: "输入英语试题，一键调用 OpenAI Sora 生成专业讲解视频，AI 智能分析考点并生成可视化讲解内容。",
-    class: "card-7",
-    icon: "video",
-    route: "/video-explanation",
-  },
+
 ]);
 
 // Hover effect for glassmorphism glare
diff --git a/src/views/VideoExplanation.vue b/src/views/VideoExplanation.vue
deleted file mode 100644
index 4e43fbb..0000000
--- a/src/views/VideoExplanation.vue
+++ /dev/null
@@ -1,2113 +0,0 @@
-<script setup>
-import { ref, computed, onUnmounted, watch, nextTick } from "vue";
-import { useRouter } from "vue-router";
-import axios from "axios";
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { fetchFile, toBlobURL } from "@ffmpeg/util";
-import { DOUBAO_KEY } from "@/config/index.js";
-
-// ── 状态 ──
-// idle | generating | script-review | images-review | video-step | done | error
-const status = ref("idle");
-// 生成阶段: script | firstFrame | lastFrame | video
-const phase = ref("script");
-const textInput = ref("");
-const errorMsg = ref("");
-const progress = ref(0);
-const progressText = ref("");
-const cancelTokenSource = ref(null);
-
-// 脚本数据
-const scriptContent = ref("");
-const storyboard = ref([]); // [{ index, desc, visual }]
-
-// 多片段视频
-const CLIP_DURATION = 5;
-const MAX_CLIPS = 16;
-const videoClips = ref([]);
-const currentClipIndex = ref(0);
-
-// 配音音频
-const narrationAudioUrl = ref("");
-
-// 分镜图片（首尾帧）
-const storyboardImages = ref([]); // [{ index, firstFrameUrl, lastFrameUrl }]
-const videoPlayerRef = ref(null);
-const currentPlayIndex = ref(0);
-
-// video-step 预览
-const previewVideoRef = ref(null);
-
-// 是否为最后一段视频
-const isLastClip = computed(
-  () => currentClipIndex.value + 1 >= storyboardImages.value.length
-);
-
-// ── API 配置 ──
-const SCRIPT_API_KEY = "sk-aVLnOpoEsktYJh0A51aVnwqM3o5WF6JUf9icmWkOXMnZKvOM";
-const SCRIPT_API_URL = "https://api.oaibest.com/v1/chat/completions";
-const SCRIPT_MODEL = "gpt-4o";
-
-const VIDEO_API_URL = "/ark-api/api/v3/contents/generations/tasks";
-const VIDEO_MODEL = "doubao-seedance-1-5-pro-251215";
-
-// ── TTS 配置（豆包中文语音）──
-const TTS_API_URL = "/tts-api/api/v3/tts/unidirectional";
-const TTS_VOICE = "BV700_streaming";
-
-// ── Router ──
-const router = useRouter();
-
-const canGenerate = computed(() => {
-  if (status.value === "generating") return false;
-  return textInput.value.trim().length > 0;
-});
-
-const goBack = () => router.back();
-
-// ── 统一错误处理 ──
-const handleError = (err) => {
-  if (axios.isCancel(err)) return;
-  console.error("生成失败:", err);
-  errorMsg.value =
-    err?.response?.data?.error?.message ||
-    err?.response?.data?.message ||
-    err?.response?.data?.error ||
-    err.message ||
-    "生成失败，请稍后重试";
-  status.value = "error";
-};
-
-// ── 阶段一：解析试题，生成讲解文案 + 分镜脚本 ──
-const generateScript = async () => {
-  phase.value = "script";
-  progress.value = 5;
-  progressText.value = "正在解析试题...";
-
-  const systemPrompt = `你是一位专业的英语教师，擅长制作试题讲解视频的脚本和分镜设计。
-所有分镜画面必须严格遵循统一的视觉风格，确保整段视频镜头连贯、风格一致。
-
-**统一视觉风格要求（每个分镜的 visual 字段必须体现）：**
-- 风格：2D 扁平化教育动画，简洁现代的信息图风格
-- 配色：深蓝色渐变背景（#1a1a3e → #2d2b55），白色/浅蓝文字，粉色/青色强调色
-- 字体：无衬线粗体标题 + 常规正文，文字全部使用英文，文字居中对齐
-- 布局：核心信息居中展示，四周留白，底部可放置页码或进度指示
-- 严禁：任何中文字符出现在画面上！所有文字必须翻译为英文
-- 严禁：任何真人、卡通人物、人物剪影、手指指引等拟人化元素
-- 元素：仅使用几何图形、箭头、色块、图标、表格、下划线、高亮标记等抽象视觉元素
-
-请根据用户提供的英语试题，严格按照 JSON 格式返回：
-{
-  "script": "完整的讲解文案（中文，包含题目分析、解题思路、答案解析）",
-  "storyboard": [
-    { "index": 1, "desc": "分镜描述（该段讲解的内容概述）", "visual": "画面设计描述，所有画面文字必须为英文（如 Question/Answer/Key Point）。必须包含：深蓝色渐变背景、核心英文文字内容、使用的视觉元素（箭头/色块/高亮）、动画效果描述" },
-    ...
-  ]
-}
-
-**分镜 visual 字段编写规范：**
-1. 每个分镜的 visual 必须以"深蓝色渐变背景"开头，确保背景统一
-2. 描述具体的视觉元素和动画效果，避免模糊描述
-3. 相邻分镜之间应有视觉延续感（如颜色过渡、元素呼应）
-4. 每个分镜聚焦一个核心知识点，视觉元素不要过于复杂
-
-**请根据试题的复杂度自行决定分镜数量（建议 3~8 个，简单题 3~4 个，复杂题 5~8 个），确保讲解充分且每个分镜信息量适中。**`;
-
-  const response = await axios.post(
-    SCRIPT_API_URL,
-    {
-      model: SCRIPT_MODEL,
-      messages: [
-        { role: "system", content: systemPrompt },
-        { role: "user", content: `请解析以下英语试题：\n\n${textInput.value}` },
-      ],
-      temperature: 0.7,
-      response_format: { type: "json_object" },
-    },
-    {
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${SCRIPT_API_KEY}`,
-      },
-      cancelToken: cancelTokenSource.value.token,
-      timeout: 60000,
-    }
-  );
-
-  const raw = response.data?.choices?.[0]?.message?.content || "{}";
-  const parsed = JSON.parse(raw);
-
-  scriptContent.value = parsed.script || "";
-  storyboard.value = Array.isArray(parsed.storyboard) ? parsed.storyboard : [];
-
-  if (!scriptContent.value) {
-    throw new Error("脚本生成失败，请重试");
-  }
-
-  progress.value = 100;
-  progressText.value = "脚本生成完成！";
-};
-
-// ── 阶段二：调用豆包 Seedream 生成分镜首尾帧图片 ──
-const IMAGE_API_URL = "/ark-api/api/v3/images/generations";
-const IMAGE_MODEL = "doubao-seedream-5-0-260128";
-
-const VISUAL_STYLE_PREFIX =
-  "2D扁平化教育动画风格，深蓝色渐变背景（深蓝到暗紫），白色和浅蓝色文字，粉色和青色作为强调色，无衬线粗体字体，简洁现代的信息图布局，核心内容居中，四周留白，无任何真人、人物、卡通形象，仅使用几何图形、箭头、色块、图标、表格、高亮标记等抽象元素";
-
-const generateImageForShot = async (shot, frameType) => {
-  const frameLabel = frameType === "first" ? "首帧" : "尾帧";
-  const frameGuidance =
-    frameType === "first"
-      ? "画面处于初始状态：展示本分镜要讲解的问题或知识点的引入阶段，关键信息尚未完全展开，留有动画过渡的空间。画面右下角标注序号"
-      : "画面处于完成状态：展示本分镜的结论、答案或知识点的最终呈现，与首帧有自然的视觉延续，关键信息完整呈现且突出显示。画面右下角标注序号";
-
-  const prompt = `${VISUAL_STYLE_PREFIX}。${shot.visual}。${frameGuidance}`;
-
-  try {
-    const createResponse = await axios.post(
-      IMAGE_API_URL,
-      {
-        model: IMAGE_MODEL,
-        prompt: prompt,
-        sequential_image_generation: "disabled",
-        response_format: "url",
-        size: "2K",
-        stream: false,
-        watermark: true,
-      },
-      {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${DOUBAO_KEY}`,
-        },
-        cancelToken: cancelTokenSource.value.token,
-        timeout: 180000,
-      }
-    );
-
-    const data = createResponse.data;
-
-    if (data?.error) {
-      throw new Error(
-        `分镜 ${shot.index} ${frameLabel}图片生成失败：${
-          data.error.message || data.error.code
-        }`
-      );
-    }
-
-    const imgUrl = (Array.isArray(data?.data) && data.data[0]?.url) || null;
-
-    if (!imgUrl) {
-      throw new Error(
-        `分镜 ${shot.index} ${frameLabel}图片生成失败，未获取到图片地址`
-      );
-    }
-
-    return imgUrl;
-  } catch (err) {
-    console.error("[Seedream 生图失败]", {
-      status: err?.response?.status,
-      statusText: err?.response?.statusText,
-      data: err?.response?.data,
-      url: IMAGE_API_URL,
-    });
-    throw err;
-  }
-};
-
-const generateImagesFromStoryboard = async () => {
-  phase.value = "firstFrame";
-  storyboardImages.value = [];
-
-  const shots = storyboard.value.slice(0, MAX_CLIPS);
-  const totalClips = shots.length;
-
-  for (let i = 0; i < totalClips; i++) {
-    if (status.value !== "generating") return;
-
-    const shot = shots[i];
-    currentClipIndex.value = i + 1;
-
-    progress.value = Math.round((i / totalClips) * 100);
-    progressText.value = `正在生成第 ${i + 1}/${totalClips} 段首帧图片...`;
-
-    const firstFrameUrl = await generateImageForShot(shot, "first");
-
-    progress.value = Math.round(((i + 0.5) / totalClips) * 100);
-    progressText.value = `正在生成第 ${i + 1}/${totalClips} 段尾帧图片...`;
-
-    const lastFrameUrl = await generateImageForShot(shot, "last");
-
-    storyboardImages.value.push({
-      index: shot.index,
-      firstFrameUrl,
-      lastFrameUrl,
-    });
-  }
-
-  if (storyboardImages.value.length === 0) {
-    throw new Error("所有分镜图片生成失败");
-  }
-
-  progress.value = 100;
-  progressText.value = "图片生成完成！";
-};
-
-// ── TTS：生成中文讲解音频 ──
-const generateNarrationAudio = async (text) => {
-  try {
-    const response = await axios.post(
-      TTS_API_URL,
-      {
-        model: "chat-tts-240830",
-        input: text,
-        voice: TTS_VOICE,
-        stream: false,
-        response_format: "url",
-        speed: 1.0,
-      },
-      {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${DOUBAO_KEY}`,
-        },
-        cancelToken: cancelTokenSource.value.token,
-        timeout: 60000,
-      }
-    );
-
-    const data = response.data;
-    if (data?.error) {
-      throw new Error(`TTS 生成失败：${data.error.message || data.error.code}`);
-    }
-
-    // 返回音频 URL
-    return data?.data?.audio_url || null;
-  } catch (err) {
-    console.error("[TTS 生成失败]", {
-      status: err?.response?.status,
-      data: err?.response?.data,
-    });
-    throw err;
-  }
-};
-
-// ── FFmpeg：合并视频片段和音频 ──
-let ffmpeg = null;
-const initFFmpeg = async () => {
-  if (ffmpeg) return ffmpeg;
-  ffmpeg = new FFmpeg();
-  ffmpeg.on("log", ({ message }) => {
-    console.log("[FFmpeg]", message);
-  });
-  ffmpeg.on("progress", ({ progress }) => {
-    console.log("[FFmpeg progress]", Math.round(progress * 100) + "%");
-  });
-  const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm";
-  await ffmpeg.load({
-    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
-    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
-  });
-  return ffmpeg;
-};
-
-const mergeVideoAndAudio = async (videoUrls, audioUrl) => {
-  progressText.value = "正在合并视频和音频...";
-  progress.value = 80;
-
-  const ff = await initFFmpeg();
-
-  // 写入视频文件
-  for (let i = 0; i < videoUrls.length; i++) {
-    progressText.value = `正在处理第 ${i + 1}/${videoUrls.length} 段视频...`;
-    const videoData = await fetchFile(videoUrls[i]);
-    await ff.writeFile(`input_video_${i}.mp4`, videoData);
-  }
-
-  // 写入音频文件
-  progressText.value = "正在处理音频...";
-  const audioData = await fetchFile(audioUrl);
-  await ff.writeFile("input_audio.mp3", audioData);
-
-  // 创建文件列表用于concat
-  const concatList = videoUrls.map((_, i) => `file 'input_video_${i}.mp4'`).join("\n");
-  await ff.writeFile("concat.txt", concatList);
-
-  // 合并视频片段
-  progressText.value = "正在拼接视频片段...";
-  progress.value = 85;
-  await ff.exec([
-    "-f", "concat", "-safe", "0",
-    "-i", "concat.txt",
-    "-c", "copy",
-    "merged_video.mp4"
-  ]);
-
-  // 合并视频和音频
-  progressText.value = "正在合成最终视频...";
-  progress.value = 90;
-  await ff.exec([
-    "-i", "merged_video.mp4",
-    "-i", "input_audio.mp3",
-    "-c:v", "copy",
-    "-c:a", "aac",
-    "-shortest",
-    "final_output.mp4"
-  ]);
-
-  // 读取最终文件
-  const outputData = await ff.readFile("final_output.mp4");
-  const blob = new Blob([outputData.buffer], { type: "video/mp4" });
-  const url = URL.createObjectURL(blob);
-
-  // 清理临时文件
-  for (let i = 0; i < videoUrls.length; i++) {
-    try { await ff.deleteFile(`input_video_${i}.mp4`); } catch {}
-  }
-  try { await ff.deleteFile("input_audio.mp3"); } catch {}
-  try { await ff.deleteFile("concat.txt"); } catch {}
-  try { await ff.deleteFile("merged_video.mp4"); } catch {}
-  try { await ff.deleteFile("final_output.mp4"); } catch {}
-
-  return url;
-};
-
-// ── 阶段三：根据首尾帧图片调用 Seedance 生成视频 ──
-const generateSingleClip = async (shot, firstFrameUrl, lastFrameUrl) => {
-  const videoPrompt = `2D flat animation style, dark blue gradient background, white and light blue text, pink and cyan accent colors, clean modern infographic layout, centered content with ample margins.
-Core requirements: Smooth transition from first frame to last frame, maintain visual continuity, stable camera without shaking, all visual elements (colors, fonts, icon styles) consistent across shots.
-STRICTLY FORBIDDEN: any real people, characters, fingers, cartoon images, Chinese characters, any text in languages other than English.
-ONLY use: geometric shapes, arrows, color blocks, icons, charts, highlight markers and other abstract educational elements.
-Animation transitions: text fade-in line by line, color blocks slide in smoothly, arrow stroke animations, highlight area gradual appearance, natural and smooth transitions.
-IMPORTANT: All text rendered in the video must be in ENGLISH only. Do not include any Chinese characters in visual text.`;
-
-  const createResponse = await axios.post(
-    VIDEO_API_URL,
-    {
-      model: VIDEO_MODEL,
-      content: [
-        { type: "text", text: videoPrompt },
-        {
-          type: "image_url",
-          image_url: { url: firstFrameUrl },
-          role: "first_frame",
-        },
-        {
-          type: "image_url",
-          image_url: { url: lastFrameUrl },
-          role: "last_frame",
-        },
-      ],
-      generate_audio: false,
-      ratio: "adaptive",
-      duration: CLIP_DURATION,
-      watermark: false,
-    },
-    {
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${DOUBAO_KEY}`,
-      },
-      cancelToken: cancelTokenSource.value.token,
-      timeout: 120000,
-    }
-  );
-
-  const taskId = createResponse.data?.id;
-  if (!taskId) {
-    console.error("[Seedance 视频响应]", createResponse.data);
-    throw new Error(`分镜 ${shot.index} 创建视频任务失败`);
-  }
-
-  const maxPollAttempts = 24;
-  let pollCount = 0;
-
-  while (pollCount < maxPollAttempts) {
-    if (status.value !== "generating") return null;
-
-    await new Promise((resolve) => setTimeout(resolve, 15000));
-    pollCount++;
-
-    const statusResponse = await axios.get(`${VIDEO_API_URL}/${taskId}`, {
-      headers: { Authorization: `Bearer ${DOUBAO_KEY}` },
-      cancelToken: cancelTokenSource.value.token,
-      timeout: 30000,
-    });
-
-    const taskStatus = statusResponse.data?.status;
-
-    if (taskStatus === "succeeded") {
-      return statusResponse.data?.content?.video_url || null;
-    }
-
-    if (taskStatus === "failed") {
-      throw new Error(
-        `分镜 ${shot.index} 视频生成失败：${
-          statusResponse.data?.error?.message || statusResponse.data?.error || "未知错误"
-        }`
-      );
-    }
-  }
-
-  throw new Error(`分镜 ${shot.index} 视频生成超时`);
-};
-
-// 生成 currentClipIndex 指向的视频片段
-const generateNextVideoClip = async () => {
-  const i = currentClipIndex.value;
-  const shot = storyboard.value[i];
-  const imageData = storyboardImages.value[i];
-  const total = storyboardImages.value.length;
-
-  progress.value = Math.round(((i + 0.5) / total) * 100);
-  progressText.value = `正在生成第 ${i + 1}/${total} 段视频...`;
-
-  const url = await generateSingleClip(
-    shot,
-    imageData.firstFrameUrl,
-    imageData.lastFrameUrl
-  );
-
-  if (url) {
-    if (videoClips.value.length > i) {
-      videoClips.value[i] = url;
-    } else {
-      videoClips.value.push(url);
-    }
-  }
-};
-
-// ══════════════════════════════════════
-// ── 测试视频生成（跳过脚本/图片步骤）──
-// ══════════════════════════════════════
-const testVideo = async () => {
-  if (status.value === "generating") return;
-  status.value = "generating";
-  errorMsg.value = "";
-  videoClips.value = [];
-  progress.value = 0;
-  progressText.value = "测试视频生成中...";
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  // 使用公开测试图片
-  const testFirstFrame = "https://ark-project.tos-cn-beijing.volces.com/doc_image/i2v_foxrgirl.png";
-  const testLastFrame = "https://ark-project.tos-cn-beijing.volces.com/doc_image/seepro_last_frame.jpeg";
-
-  try {
-    const url = await generateSingleClip({ index: 1 }, testFirstFrame, testLastFrame);
-    if (!url) throw new Error("未获取到视频地址");
-    videoClips.value = [url];
-    progress.value = 100;
-    progressText.value = "测试视频生成完成！";
-    status.value = "done";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// ══════════════════════════════════════
-// ── 分步流程控制 ──
-// ══════════════════════════════════════
-
-// Step 1: 仅生成脚本 → 进入 script-review
-const generateVideo = async () => {
-  if (!canGenerate.value) return;
-  status.value = "generating";
-  errorMsg.value = "";
-  videoClips.value = [];
-  scriptContent.value = "";
-  storyboard.value = [];
-  storyboardImages.value = [];
-  currentClipIndex.value = 0;
-  progress.value = 0;
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  try {
-    await generateScript();
-    if (status.value !== "generating") return;
-    status.value = "script-review";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// 重新生成脚本
-const regenerateScript = async () => {
-  status.value = "generating";
-  scriptContent.value = "";
-  storyboard.value = [];
-  storyboardImages.value = [];
-  videoClips.value = [];
-  currentClipIndex.value = 0;
-  progress.value = 0;
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  try {
-    await generateScript();
-    if (status.value !== "generating") return;
-    status.value = "script-review";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// 确认脚本 → 生成图片 → 进入 images-review
-const confirmScript = async () => {
-  status.value = "generating";
-  storyboardImages.value = [];
-  videoClips.value = [];
-  currentClipIndex.value = 0;
-  phase.value = "firstFrame";
-  progress.value = 0;
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  try {
-    await generateImagesFromStoryboard();
-    if (status.value !== "generating") return;
-    status.value = "images-review";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// 重新生成图片
-const regenerateImages = async () => {
-  status.value = "generating";
-  storyboardImages.value = [];
-  videoClips.value = [];
-  currentClipIndex.value = 0;
-  phase.value = "firstFrame";
-  progress.value = 0;
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  try {
-    await generateImagesFromStoryboard();
-    if (status.value !== "generating") return;
-    status.value = "images-review";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// 返回脚本审核
-const goBackToScriptReview = () => {
-  storyboardImages.value = [];
-  videoClips.value = [];
-  currentClipIndex.value = 0;
-  status.value = "script-review";
-};
-
-// 确认图片 → 生成第一段视频 → 进入 video-step
-const confirmImages = async () => {
-  status.value = "generating";
-  videoClips.value = [];
-  currentClipIndex.value = 0;
-  phase.value = "video";
-  progress.value = 0;
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  try {
-    await generateNextVideoClip();
-    if (status.value !== "generating") return;
-    progress.value = Math.round(
-      ((currentClipIndex.value + 1) / storyboardImages.value.length) * 100
-    );
-    status.value = "video-step";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// 继续生成下一段视频
-const continueNextClip = async () => {
-  currentClipIndex.value++;
-  if (currentClipIndex.value >= storyboardImages.value.length) {
-    // 所有视频片段已生成，开始合成配音和合并
-    progress.value = 90;
-    progressText.value = "正在生成中文配音...";
-    cancelTokenSource.value = axios.CancelToken.source();
-
-    try {
-      // 生成 TTS 中文配音
-      const audioUrl = await generateNarrationAudio(scriptContent.value);
-      if (!audioUrl) throw new Error("配音生成失败");
-
-      // 合并视频和音频
-      const finalVideoUrl = await mergeVideoAndAudio(videoClips.value, audioUrl);
-
-      narrationAudioUrl.value = finalVideoUrl;
-      progress.value = 100;
-      progressText.value = "视频生成完成！";
-      status.value = "done";
-    } catch (err) {
-      handleError(err);
-    }
-    return;
-  }
-  status.value = "generating";
-  phase.value = "video";
-  progressText.value = `正在生成第 ${currentClipIndex.value + 1}/${storyboardImages.value.length} 段视频...`;
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  try {
-    await generateNextVideoClip();
-    if (status.value !== "generating") return;
-    progress.value = Math.round(
-      ((currentClipIndex.value + 1) / storyboardImages.value.length) * 100
-    );
-    status.value = "video-step";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// 重新生成当前片段
-const regenerateCurrentClip = async () => {
-  narrationAudioUrl.value = ""; // 清空合并视频，重新合并
-  status.value = "generating";
-  phase.value = "video";
-  const i = currentClipIndex.value;
-  progressText.value = `正在重新生成第 ${i + 1}/${storyboardImages.value.length} 段视频...`;
-  cancelTokenSource.value = axios.CancelToken.source();
-
-  try {
-    await generateNextVideoClip();
-    if (status.value !== "generating") return;
-    progress.value = Math.round(
-      ((i + 1) / storyboardImages.value.length) * 100
-    );
-    status.value = "video-step";
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-// 返回图片审核
-const goBackToImagesReview = () => {
-  videoClips.value = [];
-  narrationAudioUrl.value = "";
-  status.value = "images-review";
-};
-
-// 取消当前生成
-const cancelGeneration = () => {
-  if (cancelTokenSource.value) {
-    cancelTokenSource.value.cancel("用户取消生成");
-  }
-  if (phase.value === "script") {
-    status.value = scriptContent.value ? "script-review" : "idle";
-  } else if (phase.value === "firstFrame" || phase.value === "lastFrame") {
-    status.value =
-      storyboardImages.value.length > 0 ? "images-review" : "script-review";
-  } else if (phase.value === "video") {
-    status.value =
-      videoClips.value.length > 0 ? "video-step" : "images-review";
-  } else {
-    status.value = "idle";
-  }
-  progressText.value = "";
-};
-
-// 重置全部
-const resetAll = () => {
-  if (cancelTokenSource.value) {
-    cancelTokenSource.value.cancel("重置");
-  }
-  status.value = "idle";
-  phase.value = "script";
-  textInput.value = "";
-  videoClips.value = [];
-  narrationAudioUrl.value = "";
-  errorMsg.value = "";
-  progress.value = 0;
-  progressText.value = "";
-  scriptContent.value = "";
-  storyboard.value = [];
-  storyboardImages.value = [];
-  currentClipIndex.value = 0;
-};
-
-// ── 多片段视频顺序播放（done 状态） ──
-const setupPlayer = () => {
-  if (!videoPlayerRef.value) return;
-
-  // 优先使用合并后的带配音视频
-  if (narrationAudioUrl.value) {
-    videoPlayerRef.value.src = narrationAudioUrl.value;
-    videoPlayerRef.value.play().catch(() => {});
-    return;
-  }
-
-  // 否则使用原始片段顺序播放（兼容旧状态）
-  if (videoClips.value.length === 0) return;
-  const video = videoPlayerRef.value;
-  currentPlayIndex.value = 0;
-  video.src = videoClips.value[0];
-  video.addEventListener("ended", () => {
-    currentPlayIndex.value++;
-    if (currentPlayIndex.value < videoClips.value.length) {
-      video.src = videoClips.value[currentPlayIndex.value];
-      video.play().catch(() => {});
-    }
-  });
-};
-
-watch(status, async (newVal) => {
-  if (newVal === "done" && videoClips.value.length > 0) {
-    await nextTick();
-    setupPlayer();
-  }
-  if (newVal === "video-step") {
-    await nextTick();
-    if (previewVideoRef.value && videoClips.value.length > 0) {
-      previewVideoRef.value.src =
-        videoClips.value[currentClipIndex.value];
-      previewVideoRef.value.play().catch(() => {});
-    }
-  }
-});
-
-onUnmounted(() => {
-  if (cancelTokenSource.value) {
-    cancelTokenSource.value.cancel("组件卸载，取消生成");
-  }
-});
-</script>
-
-<template>
-  <div class="page-container">
-    <!-- Nav Bar -->
-    <div class="nav-bar">
-      <button class="back-btn" @click="goBack">
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2.2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <polyline points="15 18 9 12 15 6" />
-        </svg>
-        <span>返回</span>
-      </button>
-      <h1 class="nav-title">英语试题讲解视频</h1>
-      <div style="width: 72px"></div>
-    </div>
-
-    <!-- Error Banner -->
-    <div v-if="errorMsg" class="error-banner">
-      <span>{{ errorMsg }}</span>
-      <button class="error-close" @click="errorMsg = ''">✕</button>
-    </div>
-
-    <!-- Main Layout -->
-    <div class="main-layout">
-      <!-- Left Panel: Input + Controls -->
-      <div class="left-panel">
-        <!-- Input Card -->
-        <div class="input-card">
-          <div class="input-header">
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
-              />
-              <polyline points="14 2 14 8 20 8" />
-              <line x1="16" y1="13" x2="8" y2="13" />
-              <line x1="16" y1="17" x2="8" y2="17" />
-            </svg>
-            <span>试题内容</span>
-          </div>
-          <textarea
-            v-model="textInput"
-            class="text-area"
-            placeholder="请输入或粘贴英语试题内容，例如：&#10;&#10;Choose the correct answer:&#10;The teacher asked the students _____ they had finished their homework.&#10;A. that  B. if  C. what  D. whether"
-            :disabled="status !== 'idle' && status !== 'error'"
-          ></textarea>
-          <div class="char-count">{{ textInput.length }} 字符</div>
-        </div>
-
-        <!-- Step Control Buttons -->
-        <div class="btn-wrap">
-          <!-- idle / error: 开始生成 -->
-          <button
-            v-if="status === 'idle' || status === 'error'"
-            class="generate-btn"
-            :disabled="!canGenerate"
-            @click="generateVideo"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polygon points="5 3 19 12 5 21 5 3" />
-            </svg>
-            <span>生成讲解视频</span>
-          </button>
-
-          <button
-            v-if="status === 'idle' || status === 'error'"
-            class="test-btn"
-            @click="testVideo"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polygon points="5 3 19 12 5 21 5 3" />
-            </svg>
-            <span>测试 Seedance 2.0</span>
-          </button>
-
-          <!-- generating: 取消 -->
-          <button
-            v-else-if="status === 'generating'"
-            class="cancel-btn"
-            @click="cancelGeneration"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10" />
-              <line x1="15" y1="9" x2="9" y2="15" />
-              <line x1="9" y1="9" x2="15" y2="15" />
-            </svg>
-            <span>取消生成</span>
-          </button>
-
-          <!-- script-review -->
-          <template v-else-if="status === 'script-review'">
-            <button class="step-btn-primary" @click="confirmScript">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-              确认并生成图片
-            </button>
-            <button class="step-btn-secondary" @click="regenerateScript">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="23 4 23 10 17 10" />
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-              </svg>
-              重新生成脚本
-            </button>
-          </template>
-
-          <!-- images-review -->
-          <template v-else-if="status === 'images-review'">
-            <button class="step-btn-primary" @click="confirmImages">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-              确认并生成视频
-            </button>
-            <button class="step-btn-secondary" @click="regenerateImages">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="23 4 23 10 17 10" />
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-              </svg>
-              重新生成图片
-            </button>
-            <button class="step-btn-back" @click="goBackToScriptReview">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="15 18 9 12 15 6" />
-              </svg>
-              返回修改脚本
-            </button>
-          </template>
-
-          <!-- video-step -->
-          <template v-else-if="status === 'video-step'">
-            <button v-if="!isLastClip" class="step-btn-primary" @click="continueNextClip">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                <polygon points="5 3 19 12 5 21 5 3" />
-              </svg>
-              继续生成下一段
-            </button>
-            <button v-else class="step-btn-primary" @click="continueNextClip">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-              完成全部视频
-            </button>
-            <button class="step-btn-secondary" @click="regenerateCurrentClip">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="23 4 23 10 17 10" />
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-              </svg>
-              重新生成此段
-            </button>
-            <button class="step-btn-back" @click="goBackToImagesReview">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="15 18 9 12 15 6" />
-              </svg>
-              返回查看图片
-            </button>
-          </template>
-
-          <!-- done: 重新生成 -->
-          <button v-else-if="status === 'done'" class="reset-btn" @click="resetAll">
-            重新生成
-          </button>
-        </div>
-      </div>
-
-      <!-- Right Panel: Preview & Review -->
-      <div class="right-panel">
-        <!-- ═══ Idle State ═══ -->
-        <div v-if="status === 'idle'" class="empty-state">
-          <div class="empty-icon">
-            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" />
-              <line x1="7" y1="2" x2="7" y2="22" />
-              <line x1="17" y1="2" x2="17" y2="22" />
-              <line x1="2" y1="12" x2="22" y2="12" />
-              <line x1="2" y1="7" x2="7" y2="7" />
-              <line x1="2" y1="17" x2="7" y2="17" />
-              <line x1="17" y1="17" x2="22" y2="17" />
-              <line x1="17" y1="7" x2="22" y2="7" />
-            </svg>
-          </div>
-          <p class="empty-title">视频预览区</p>
-          <p class="empty-hint">
-            输入试题内容并点击「生成讲解视频」，AI 将分步生成专业的讲解视频
-          </p>
-        </div>
-
-        <!-- ═══ Generating State ═══ -->
-        <div v-else-if="status === 'generating'" class="generating-state">
-          <div class="generating-card">
-            <div class="phase-steps">
-              <div class="phase-step" :class="{ active: phase === 'script', done: phase !== 'script' }">
-                <div class="phase-dot">
-                  <svg v-if="phase !== 'script'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
-                  <span v-else>1</span>
-                </div>
-                <span class="phase-label">解析试题</span>
-              </div>
-              <div class="phase-line" :class="{ done: ['firstFrame','lastFrame','video'].includes(phase) }"></div>
-              <div class="phase-step" :class="{ active: ['firstFrame','lastFrame'].includes(phase), done: phase === 'video' }">
-                <div class="phase-dot">
-                  <svg v-if="phase === 'video'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
-                  <span v-else>2</span>
-                </div>
-                <span class="phase-label">生成图片</span>
-              </div>
-              <div class="phase-line" :class="{ done: phase === 'video' }"></div>
-              <div class="phase-step" :class="{ active: phase === 'video' }">
-                <div class="phase-dot"><span>3</span></div>
-                <span class="phase-label">生成视频</span>
-              </div>
-            </div>
-
-            <div class="generating-icon">
-              <div class="video-icon-wrapper">
-                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                  <polygon v-if="phase === 'video'" points="5 3 19 12 5 21 5 3" />
-                  <template v-else>
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                    <circle cx="8.5" cy="8.5" r="1.5" />
-                    <polyline points="21 15 16 10 5 21" />
-                  </template>
-                </svg>
-              </div>
-            </div>
-
-            <p class="generating-title">{{
-              phase === 'script'
-                ? 'AI 正在解析试题'
-                : phase === 'firstFrame' || phase === 'lastFrame'
-                  ? `AI 正在生成第 ${currentClipIndex || 1}/${storyboard.length || MAX_CLIPS} 段图片`
-                  : `AI 正在生成第 ${currentClipIndex || 1}/${storyboardImages.length || MAX_CLIPS} 段视频`
-            }}</p>
-            <p class="generating-model">{{
-              phase === 'script'
-                ? 'GPT-4o · 脚本生成'
-                : phase === 'firstFrame' || phase === 'lastFrame'
-                  ? `${IMAGE_MODEL} · 图片生成`
-                  : `${VIDEO_MODEL} · 视频生成`
-            }}</p>
-
-            <div class="progress-container">
-              <div class="progress-bar">
-                <div class="progress-fill" :style="{ width: progress + '%' }"></div>
-              </div>
-              <div class="progress-info">
-                <span class="progress-percent">{{ progress }}%</span>
-                <span class="progress-text">{{ progressText }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- ═══ Script Review State ═══ -->
-        <div v-else-if="status === 'script-review'" class="review-panel">
-          <div class="review-header">
-            <div class="review-check">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-            <div>
-              <h2 class="review-title">分镜脚本已生成</h2>
-              <p class="review-subtitle">共 {{ storyboard.length }} 个分镜，请确认无误后继续</p>
-            </div>
-          </div>
-
-          <!-- 讲解文案 -->
-          <div class="review-section">
-            <div class="review-section-header">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14 2 14 8 20 8" />
-              </svg>
-              <span>讲解文案</span>
-            </div>
-            <p class="review-script-text">{{ scriptContent }}</p>
-          </div>
-
-          <!-- 分镜列表 -->
-          <div class="review-section">
-            <div class="review-section-header">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
-              </svg>
-              <span>分镜列表</span>
-              <span class="review-badge">{{ storyboard.length }} 个分镜</span>
-            </div>
-            <div class="review-storyboard">
-              <div
-                v-for="shot in storyboard"
-                :key="shot.index"
-                class="review-shot-item"
-              >
-                <span class="shot-index">{{ shot.index }}</span>
-                <div class="shot-info">
-                  <span class="shot-desc">{{ shot.desc }}</span>
-                  <span class="shot-visual">{{ shot.visual }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- ═══ Images Review State ═══ -->
-        <div v-else-if="status === 'images-review'" class="review-panel">
-          <div class="review-header">
-            <div class="review-check">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-            <div>
-              <h2 class="review-title">分镜图片已生成</h2>
-              <p class="review-subtitle">共 {{ storyboardImages.length }} 组首尾帧，请确认画面效果后继续</p>
-            </div>
-          </div>
-
-          <!-- 图片网格 -->
-          <div class="images-review-grid">
-            <div
-              v-for="imgData in storyboardImages"
-              :key="imgData.index"
-              class="image-review-card"
-            >
-              <div class="image-card-top">
-                <span class="shot-index">{{ imgData.index }}</span>
-                <span class="image-card-desc">{{
-                  storyboard[imgData.index - 1]?.desc || ""
-                }}</span>
-              </div>
-              <div class="image-pair">
-                <div class="image-frame-wrap">
-                  <img :src="imgData.firstFrameUrl" alt="首帧" class="image-frame-img" />
-                  <span class="image-frame-label">首帧</span>
-                </div>
-                <div class="image-arrow">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
-                  </svg>
-                </div>
-                <div class="image-frame-wrap">
-                  <img :src="imgData.lastFrameUrl" alt="尾帧" class="image-frame-img" />
-                  <span class="image-frame-label">尾帧</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- ═══ Video Step State ═══ -->
-        <div v-else-if="status === 'video-step'" class="review-panel">
-          <div class="review-header">
-            <div class="review-check review-check-video">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                <polygon points="5 3 19 12 5 21 5 3" />
-              </svg>
-            </div>
-            <div>
-              <h2 class="review-title">视频片段预览</h2>
-              <p class="review-subtitle">
-                第 {{ currentClipIndex + 1 }}/{{ storyboardImages.length }} 段
-                · 已生成 {{ videoClips.length }} 段
-              </p>
-            </div>
-          </div>
-
-          <!-- 视频预览 -->
-          <div class="video-preview-box">
-            <video ref="previewVideoRef" controls class="video-preview-player">
-              您的浏览器不支持视频播放
-            </video>
-          </div>
-
-          <!-- 片段信息 -->
-          <div class="clip-info-bar">
-            <span class="clip-info-tag">
-              片段 {{ currentClipIndex + 1 }}
-            </span>
-            <span class="clip-info-desc">{{
-              storyboard[currentClipIndex]?.desc || ""
-            }}</span>
-          </div>
-
-          <!-- 进度指示 -->
-          <div class="clip-progress-bar">
-            <div
-              v-for="(_, idx) in storyboardImages"
-              :key="idx"
-              class="clip-progress-dot"
-              :class="{
-                done: idx < videoClips.length && idx !== currentClipIndex,
-                current: idx === currentClipIndex,
-              }"
-            >
-              {{ idx + 1 }}
-            </div>
-          </div>
-        </div>
-
-        <!-- ═══ Done State ═══ -->
-        <div v-else-if="status === 'done'" class="video-done">
-          <div class="video-wrapper">
-            <video ref="videoPlayerRef" controls autoplay class="video-player">
-              您的浏览器不支持视频播放
-            </video>
-          </div>
-          <div class="video-info">
-            <div class="video-badge">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-              <span>
-                视频生成完成{{ narrationAudioUrl ? ' · 含中文配音' : '' }} · {{ videoClips.length }} 段 · 约
-                {{ videoClips.length * CLIP_DURATION }}s
-              </span>
-            </div>
-            <p class="video-hint">
-              多段视频已自动拼接播放，总计约
-              {{ ((videoClips.length * CLIP_DURATION) / 60).toFixed(1) }} 分钟
-            </p>
-            <div class="clip-timeline">
-              <div
-                v-for="(_clip, idx) in videoClips"
-                :key="idx"
-                class="clip-chip"
-              >
-                片段 {{ idx + 1 }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- ═══ Error State ═══ -->
-        <div v-else-if="status === 'error'" class="empty-state error-state">
-          <div class="empty-icon error-icon">
-            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10" />
-              <line x1="12" y1="8" x2="12" y2="12" />
-              <line x1="12" y1="16" x2="12.01" y2="16" />
-            </svg>
-          </div>
-          <p class="empty-title">生成失败</p>
-          <p class="empty-hint">请检查网络连接或 API 配置后重试</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page-container {
-  height: 100vh;
-  overflow: hidden;
-  background: var(--bg);
-  display: flex;
-  flex-direction: column;
-  font-family: "Inter", "PingFang SC", -apple-system, sans-serif;
-}
-
-/* ═══ Nav ═══ */
-.nav-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  background: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid var(--card-border);
-  backdrop-filter: blur(12px);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-.back-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 0.95rem;
-  padding: 0.4rem 0.75rem;
-  border-radius: 8px;
-  transition: all 0.2s;
-}
-.back-btn:hover {
-  background: rgba(255, 255, 255, 0.07);
-  color: var(--text-primary);
-}
-.nav-title {
-  font-size: 1.2rem;
-  font-weight: 600;
-  margin: 0;
-  background: linear-gradient(135deg, #f472b6, #db2777);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-/* ═══ Main Layout ═══ */
-.main-layout {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  overflow: hidden;
-}
-
-/* ═══ Left Panel ═══ */
-.left-panel {
-  width: 420px;
-  min-width: 320px;
-  max-width: 480px;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
-  border-right: 1px solid var(--card-border);
-  overflow-y: auto;
-  flex-shrink: 0;
-}
-
-/* ═══ Right Panel ═══ */
-.right-panel {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
-/* ═══ Input Card ═══ */
-.input-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--card-border);
-  border-radius: 20px;
-  overflow: hidden;
-  backdrop-filter: blur(12px);
-}
-.input-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--card-border);
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-}
-.input-header svg {
-  color: #f472b6;
-}
-.text-area {
-  width: 100%;
-  flex: 1;
-  min-height: 260px;
-  background: rgba(0, 0, 0, 0.2);
-  border: none;
-  border-radius: 0;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  line-height: 1.7;
-  padding: 1.25rem;
-  resize: none;
-  outline: none;
-  transition: background 0.2s;
-  box-sizing: border-box;
-  font-family: inherit;
-}
-.text-area::placeholder {
-  color: var(--text-secondary);
-  opacity: 0.6;
-}
-.text-area:focus {
-  background: rgba(0, 0, 0, 0.25);
-}
-.text-area:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.text-area::-webkit-scrollbar {
-  width: 6px;
-}
-.text-area::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 3px;
-}
-.text-area::-webkit-scrollbar-thumb {
-  background: rgba(244, 114, 182, 0.4);
-  border-radius: 3px;
-}
-.text-area::-webkit-scrollbar-thumb:hover {
-  background: rgba(244, 114, 182, 0.6);
-}
-.char-count {
-  text-align: right;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  padding: 0.5rem 1.25rem;
-  opacity: 0.6;
-  border-top: 1px solid var(--card-border);
-}
-
-/* ═══ Buttons ═══ */
-.btn-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0.6rem;
-}
-.generate-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.6rem;
-  background: linear-gradient(135deg, #f472b6, #db2777);
-  border: none;
-  color: white;
-  font-size: 1rem;
-  font-weight: 600;
-  padding: 0.875rem 2.5rem;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.25s;
-  box-shadow: 0 4px 20px rgba(244, 114, 182, 0.35);
-}
-.generate-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 28px rgba(244, 114, 182, 0.5);
-}
-.test-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-  font-weight: 500;
-  padding: 0.6rem 1.25rem;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.test-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
-}
-.generate-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-  transform: none;
-}
-.cancel-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.6rem;
-  background: rgba(239, 68, 68, 0.15);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  color: #f87171;
-  font-size: 0.95rem;
-  font-weight: 500;
-  padding: 0.75rem 1.75rem;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.cancel-btn:hover {
-  background: rgba(239, 68, 68, 0.25);
-}
-.reset-btn {
-  display: block;
-  width: 100%;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  padding: 0.875rem 1.5rem;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: center;
-}
-.reset-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
-}
-
-/* Step Buttons */
-.step-btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  background: linear-gradient(135deg, #f472b6, #db2777);
-  border: none;
-  color: white;
-  font-size: 0.95rem;
-  font-weight: 600;
-  padding: 0.75rem 1.5rem;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.25s;
-  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.3);
-}
-.step-btn-primary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 6px 24px rgba(244, 114, 182, 0.45);
-}
-.step-btn-secondary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  font-weight: 500;
-  padding: 0.7rem 1.5rem;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.step-btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
-}
-.step-btn-back {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  background: none;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: var(--text-secondary);
-  font-size: 0.82rem;
-  padding: 0.55rem 1rem;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.2s;
-  opacity: 0.7;
-}
-.step-btn-back:hover {
-  opacity: 1;
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* ═══ Empty State ═══ */
-.empty-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  color: var(--text-secondary);
-  opacity: 0.5;
-}
-.empty-icon {
-  color: var(--text-secondary);
-  opacity: 0.4;
-  margin-bottom: 0.5rem;
-}
-.empty-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin: 0;
-  color: var(--text-primary);
-}
-.empty-hint {
-  font-size: 0.9rem;
-  margin: 0;
-  text-align: center;
-  max-width: 320px;
-  line-height: 1.6;
-}
-.error-state {
-  opacity: 1;
-}
-.error-icon {
-  color: #f87171;
-  opacity: 1;
-}
-.error-state .empty-title {
-  color: #fca5a5;
-}
-
-/* ═══ Generating State ═══ */
-.generating-state {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.generating-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.25rem;
-  padding: 3rem 4rem;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--card-border);
-  border-radius: 24px;
-  animation: fadeInUp 0.4s ease both;
-  max-width: 420px;
-  width: 100%;
-}
-.generating-icon {
-  position: relative;
-}
-.video-icon-wrapper {
-  width: 96px;
-  height: 96px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, rgba(244, 114, 182, 0.2), rgba(219, 39, 119, 0.2));
-  border: 2px solid rgba(244, 114, 182, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #f472b6;
-  animation: pulse-ring 2s ease-in-out infinite;
-}
-.video-icon-wrapper svg {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-.generating-title {
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
-}
-.generating-model {
-  font-size: 0.9rem;
-  color: #f472b6;
-  margin: -0.75rem 0 0 0;
-  opacity: 0.8;
-}
-
-/* ═══ Progress Bar ═══ */
-.progress-container {
-  width: 100%;
-  min-width: 280px;
-}
-.progress-bar {
-  height: 8px;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 4px;
-  overflow: hidden;
-}
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #f472b6, #db2777);
-  border-radius: 4px;
-  transition: width 0.5s ease;
-  position: relative;
-}
-.progress-fill::after {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  animation: shimmer 1.5s infinite;
-}
-.progress-info {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 0.75rem;
-  font-size: 0.85rem;
-}
-.progress-percent {
-  color: #f472b6;
-  font-weight: 600;
-}
-.progress-text {
-  color: var(--text-secondary);
-}
-
-/* ═══ Phase Steps ═══ */
-.phase-steps {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  max-width: 320px;
-}
-.phase-step {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  opacity: 0.4;
-  transition: opacity 0.3s;
-}
-.phase-step.active {
-  opacity: 1;
-}
-.phase-dot {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.06);
-  border: 2px solid rgba(255, 255, 255, 0.15);
-  color: var(--text-secondary);
-  transition: all 0.3s;
-  flex-shrink: 0;
-}
-.phase-step.active .phase-dot {
-  background: linear-gradient(135deg, #f472b6, #db2777);
-  border-color: #f472b6;
-  color: white;
-  box-shadow: 0 0 12px rgba(244, 114, 182, 0.4);
-}
-.phase-step.done .phase-dot {
-  background: #14b8a6;
-  border-color: #14b8a6;
-  color: white;
-  box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
-}
-.phase-label {
-  font-size: 0.82rem;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-.phase-step.active .phase-label {
-  color: var(--text-primary);
-  font-weight: 500;
-}
-.phase-line {
-  flex: 1;
-  height: 2px;
-  background: rgba(255, 255, 255, 0.08);
-  margin: 0 0.5rem;
-  border-radius: 1px;
-  transition: background 0.4s;
-  min-width: 24px;
-}
-.phase-line.done {
-  background: linear-gradient(90deg, #14b8a6, rgba(20, 184, 166, 0.3));
-}
-
-/* ═══ Review Panel (shared) ═══ */
-.review-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  animation: fadeInUp 0.4s ease both;
-}
-.review-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid var(--card-border);
-}
-.review-check {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: rgba(20, 184, 166, 0.12);
-  border: 2px solid rgba(20, 184, 166, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #14b8a6;
-  flex-shrink: 0;
-}
-.review-check-video {
-  background: rgba(244, 114, 182, 0.12);
-  border-color: rgba(244, 114, 182, 0.3);
-  color: #f472b6;
-}
-.review-title {
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 0.2rem 0;
-}
-.review-subtitle {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  margin: 0;
-}
-.review-section {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid var(--card-border);
-  border-radius: 16px;
-  padding: 1.25rem;
-}
-.review-section-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #14b8a6;
-  font-size: 0.88rem;
-  font-weight: 500;
-  margin-bottom: 0.85rem;
-}
-.review-badge {
-  margin-left: auto;
-  font-size: 0.75rem;
-  opacity: 0.7;
-  background: rgba(20, 184, 166, 0.12);
-  padding: 0.15rem 0.55rem;
-  border-radius: 50px;
-}
-.review-script-text {
-  font-size: 0.9rem;
-  color: var(--text-primary);
-  line-height: 1.8;
-  margin: 0;
-  white-space: pre-wrap;
-}
-.review-storyboard {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-.review-shot-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.7rem;
-  padding: 0.7rem 0.75rem;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-}
-.shot-index {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  background: rgba(244, 114, 182, 0.15);
-  color: #f472b6;
-  font-size: 0.75rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-.shot-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  min-width: 0;
-}
-.shot-desc {
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  line-height: 1.45;
-  font-weight: 500;
-}
-.shot-visual {
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  opacity: 0.7;
-  line-height: 1.45;
-}
-
-/* ═══ Images Review Grid ═══ */
-.images-review-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.image-review-card {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid var(--card-border);
-  border-radius: 14px;
-  padding: 1rem 1.25rem;
-}
-.image-card-top {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 0.75rem;
-}
-.image-card-desc {
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  font-weight: 500;
-  line-height: 1.4;
-}
-.image-pair {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-.image-frame-wrap {
-  flex: 1;
-  position: relative;
-  border-radius: 10px;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.2);
-}
-.image-frame-img {
-  width: 100%;
-  display: block;
-  aspect-ratio: 16 / 9;
-  object-fit: cover;
-}
-.image-frame-label {
-  position: absolute;
-  bottom: 6px;
-  right: 6px;
-  background: rgba(0, 0, 0, 0.6);
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 0.7rem;
-  padding: 0.15rem 0.45rem;
-  border-radius: 4px;
-  font-weight: 500;
-}
-.image-arrow {
-  color: var(--text-secondary);
-  opacity: 0.4;
-  flex-shrink: 0;
-}
-
-/* ═══ Video Step ═══ */
-.video-preview-box {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 16px;
-  overflow: hidden;
-  border: 1px solid var(--card-border);
-}
-.video-preview-player {
-  width: 100%;
-  display: block;
-  max-height: 440px;
-}
-.clip-info-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.25rem 0;
-}
-.clip-info-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.7rem;
-  border-radius: 50px;
-  background: rgba(244, 114, 182, 0.12);
-  border: 1px solid rgba(244, 114, 182, 0.2);
-  color: #f472b6;
-  font-size: 0.8rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-.clip-info-desc {
-  font-size: 0.88rem;
-  color: var(--text-primary);
-  line-height: 1.4;
-}
-.clip-progress-bar {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  padding-top: 0.5rem;
-  border-top: 1px solid var(--card-border);
-  margin-top: 0.25rem;
-}
-.clip-progress-dot {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.72rem;
-  font-weight: 700;
-  background: rgba(255, 255, 255, 0.05);
-  border: 2px solid rgba(255, 255, 255, 0.1);
-  color: var(--text-secondary);
-  opacity: 0.4;
-  transition: all 0.3s;
-}
-.clip-progress-dot.done {
-  background: rgba(20, 184, 166, 0.15);
-  border-color: rgba(20, 184, 166, 0.3);
-  color: #14b8a6;
-  opacity: 0.7;
-}
-.clip-progress-dot.current {
-  background: rgba(244, 114, 182, 0.2);
-  border-color: rgba(244, 114, 182, 0.5);
-  color: #f472b6;
-  opacity: 1;
-  box-shadow: 0 0 10px rgba(244, 114, 182, 0.25);
-}
-
-/* ═══ Video Done State ═══ */
-.video-done {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  animation: fadeInUp 0.4s ease both;
-}
-.video-wrapper {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 16px;
-  overflow: hidden;
-  border: 1px solid var(--card-border);
-}
-.video-player {
-  width: 100%;
-  display: block;
-  max-height: 480px;
-}
-.video-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.video-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: rgba(20, 184, 166, 0.12);
-  border: 1px solid rgba(20, 184, 166, 0.25);
-  border-radius: 50px;
-  color: #14b8a6;
-  font-size: 0.9rem;
-  font-weight: 500;
-  width: fit-content;
-}
-.video-hint {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  margin: 0;
-}
-.clip-timeline {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-top: 0.5rem;
-}
-.clip-chip {
-  font-size: 0.75rem;
-  padding: 0.25rem 0.65rem;
-  border-radius: 50px;
-  background: rgba(244, 114, 182, 0.1);
-  border: 1px solid rgba(244, 114, 182, 0.2);
-  color: #f472b6;
-}
-
-/* ═══ Error Banner ═══ */
-.error-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: rgba(239, 68, 68, 0.12);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  padding: 0.75rem 1.5rem;
-  color: #fca5a5;
-  font-size: 0.9rem;
-  animation: fadeInUp 0.2s ease;
-  flex-shrink: 0;
-}
-.error-close {
-  background: none;
-  border: none;
-  color: #fca5a5;
-  cursor: pointer;
-  font-size: 1rem;
-  opacity: 0.7;
-  transition: opacity 0.2s;
-}
-.error-close:hover {
-  opacity: 1;
-}
-
-/* ═══ Animations ═══ */
-@keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(12px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.7; transform: scale(0.95); }
-}
-@keyframes pulse-ring {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.4); }
-  50% { box-shadow: 0 0 0 20px rgba(244, 114, 182, 0); }
-}
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-/* ═══ Responsive ═══ */
-@media (max-width: 768px) {
-  .main-layout {
-    flex-direction: column;
-    height: auto;
-    overflow: visible;
-  }
-  .left-panel {
-    width: 100%;
-    max-width: 100%;
-    border-right: none;
-    border-bottom: 1px solid var(--card-border);
-    overflow-y: visible;
-  }
-  .right-panel {
-    padding: 1.25rem 1rem;
-    min-height: 400px;
-  }
-  .generating-card {
-    padding: 2rem 1.5rem;
-  }
-}
-</style>