From 6fb13bd12f081a2a1d98d4aacc57835fd4156cdb Mon Sep 17 00:00:00 2001
From: cc <94575594@qq.com>
Date: Fri, 20 Mar 2026 16:57:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(router):=20=E6=B7=BB=E5=8A=A0=E8=AF=95?=
 =?UTF-8?q?=E9=A2=98=E8=AE=B2=E8=A7=A3=E8=A7=86=E9=A2=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../英语试题讲解视频生成页面开发_a19e6819.md  | 141 +++
 src/router/index.js                           |   6 +
 src/views/HomePage.vue                        |  29 +
 src/views/Speaking.vue                        |  11 +-
 src/views/VideoExplanation.vue                | 895 ++++++++++++++++++
 vite.config.js                                |   1 +
 6 files changed, 1082 insertions(+), 1 deletion(-)
 create mode 100644 .codebuddy/plans/英语试题讲解视频生成页面开发_a19e6819.md
 create mode 100644 src/views/VideoExplanation.vue

diff --git a/.codebuddy/plans/英语试题讲解视频生成页面开发_a19e6819.md b/.codebuddy/plans/英语试题讲解视频生成页面开发_a19e6819.md
new file mode 100644
index 0000000..97c3049
--- /dev/null
+++ b/.codebuddy/plans/英语试题讲解视频生成页面开发_a19e6819.md
@@ -0,0 +1,141 @@
+---
+name: 英语试题讲解视频生成页面开发
+overview: 开发一个英语试题讲解视频生成页面，包含试题文本输入、视频生成按钮、AI模型调用及视频预览区域，支持生成进度展示。
+design:
+  architecture:
+    framework: react
+  styleKeywords:
+    - Dark Glassmorphism
+    - Teal Accent
+    - Smooth Animations
+    - Card-based Layout
+  fontSystem:
+    fontFamily: Inter, PingFang SC, -apple-system, sans-serif
+    heading:
+      size: 1.2rem
+      weight: 600
+    subheading:
+      size: 1rem
+      weight: 600
+    body:
+      size: 0.95rem
+      weight: 400
+  colorSystem:
+    primary:
+      - "#14b8a6"
+      - "#0d9488"
+    background:
+      - "#0a0a0f"
+      - rgba(255,255,255,0.03)
+    text:
+      - "#ffffff"
+      - rgba(255,255,255,0.7)
+    functional:
+      - "#14b8a6 (生成/播放)"
+      - "#f87171 (错误)"
+      - "#fbbf24 (进度)"
+todos:
+  - id: create-video-explanation-page
+    content: 创建 VideoExplanation.vue 页面组件，包含输入区、生成按钮、进度展示和视频预览区
+    status: completed
+  - id: add-router-config
+    content: 在 router/index.js 添加 /video-explanation 路由配置
+    status: completed
+    dependencies:
+      - create-video-explanation-page
+  - id: add-homepage-nav-entry
+    content: 在 HomePage.vue 添加视频讲解功能入口卡片
+    status: completed
+    dependencies:
+      - add-router-config
+---
+
+## 产品概述
+
+开发一个英语试题讲解视频生成页面，用户输入试题内容后，系统调用最优AI模型生成对应的讲解视频。
+
+## 核心功能
+
+1. **试题输入**：提供文本输入框，支持用户粘贴或输入英语试题内容
+2. **视频生成**：调用AI模型生成讲解视频，提供生成进度展示
+3. **视频预览**：在页面右侧展示生成的视频内容，支持播放控制
+4. **状态管理**：处理空闲、生成中、已完成、错误等多种状态
+
+## 界面布局
+
+- 左侧面板：试题文本输入区 + 生成按钮
+- 右侧面板：视频预览区域 + 生成进度
+- 顶部导航栏：包含返回按钮和页面标题
+
+## 技术栈
+
+- **前端框架**：Vue 3 (Composition API + script setup)
+- **路由管理**：Vue Router
+- **HTTP请求**：Axios (支持流式响应)
+- **构建工具**：Vite
+
+## 实现方案
+
+### 架构设计
+
+- 页面组件：VideoExplanation.vue（单文件组件）
+- 路由配置：在 router/index.js 中添加 `/video-explanation` 路由
+- 导航入口：在 HomePage.vue 添加功能入口卡片
+
+### 核心模块
+
+1. **输入模块**：文本输入框，支持内容字数统计
+2. **生成模块**：调用AI视频生成API，实时获取生成进度
+3. **预览模块**：视频播放器组件，支持播放/暂停控制
+4. **状态模块**：统一管理 idle/generating/done/error 状态
+
+### API调用策略
+
+- 使用 Axios 发起 POST 请求调用视频生成接口
+- 支持流式响应解析，实时更新生成进度
+- 进度信息通过 SSE 或增量文本返回
+
+### 目录结构
+
+```
+src/
+├── views/
+│   └── VideoExplanation.vue  # [NEW] 视频讲解页面组件
+├── router/
+│   └── index.js              # [MODIFY] 添加视频讲解路由
+└── views/
+    └── HomePage.vue          # [MODIFY] 添加导航入口卡片
+```
+
+## 设计风格
+
+继承项目现有的深色半透明玻璃态设计语言，保持一致的视觉体验：
+
+- 深色背景 (#0a0a0f) 配合半透明卡片
+- Teal 主色调 (#14b8a6) 用于主要按钮和强调元素
+- 圆角设计 (16-20px) 营造现代感
+- 毛玻璃效果 (backdrop-filter: blur) 增强层次感
+- 柔和阴影和渐变边框提升质感
+
+## 布局设计
+
+### 页面结构
+
+- **顶部导航栏**：返回按钮 + 页面标题（渐变色）
+- **主内容区**：左右分栏布局（420px左侧 + 自适应右侧）
+- **左侧面板**：输入区域 + 操作按钮
+- **右侧面板**：视频预览 + 进度展示
+
+### 视频预览区
+
+- 视频播放器居中展示
+- 支持播放/暂停/进度条控制
+- 生成中显示动画进度指示器
+- 空闲状态显示引导提示
+
+## 动效设计
+
+- 按钮悬停：上浮 + 阴影增强
+- 加载状态：旋转spinner + 脉冲动画
+- 卡片入场：fadeInUp 动画
+- 进度展示：动态进度条 + 百分比
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 543d553..5d54e10 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ 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),
@@ -38,6 +39,11 @@ const router = createRouter({
       path: '/spell-practice',
       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 0f4d41f..23381db 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -53,6 +53,14 @@ 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
@@ -187,6 +195,22 @@ onUnmounted(() => {
               />
             </svg>
 
+            <!-- Video Icon (Play Button) -->
+            <svg
+              v-else-if="feature.icon === 'video'"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
+              />
+            </svg>
+
             <!-- Speaker Icon (Megaphone/Speaker) -->
             <svg
               v-else-if="feature.icon === 'speaker'"
@@ -374,6 +398,11 @@ h1 {
   box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.5);
 }
 
+.card-7 .icon-wrapper {
+  background: linear-gradient(135deg, #f472b6, #db2777);
+  box-shadow: 0 8px 20px -6px rgba(244, 114, 182, 0.5);
+}
+
 .card-title {
   font-size: 1.5rem;
   font-weight: 600;
diff --git a/src/views/Speaking.vue b/src/views/Speaking.vue
index 360ac74..ad1fa24 100644
--- a/src/views/Speaking.vue
+++ b/src/views/Speaking.vue
@@ -110,6 +110,15 @@ let msgIdCounter = 0;
 let currentAudioInstance = null;
 const blobUrls = [];
 
+// 兼容的 UUID 生成函数
+const generateUUID = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+};
+
 const currentScene = computed(() => scenes.find((s) => s.id === activeScene.value));
 
 // 发送场景欢迎语
@@ -173,7 +182,7 @@ const synthesizeAndPlay = async (text, msgId) => {
       "X-Api-App-Id": DOUBAO_APP_ID,
       "X-Api-Access-Key": DOUBAO_ACCESS_TOKEN,
       "X-Api-Resource-Id": DOUBAO_RESOURCE_ID,
-      "X-Api-Request-Id": crypto.randomUUID(),
+      "X-Api-Request-Id": generateUUID(),
     },
     body: JSON.stringify(payload),
   });
diff --git a/src/views/VideoExplanation.vue b/src/views/VideoExplanation.vue
new file mode 100644
index 0000000..3f5047f
--- /dev/null
+++ b/src/views/VideoExplanation.vue
@@ -0,0 +1,895 @@
+<script setup>
+import { ref, computed, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import axios from "axios";
+import { GRS_API_KEY, ESSAY_API_URL } from "@/config";
+
+// ── 状态 ──
+const status = ref("idle"); // idle | generating | done | error
+const textInput = ref("");
+const errorMsg = ref("");
+const videoUrl = ref("");
+const progress = ref(0);
+const progressText = ref("");
+const cancelTokenSource = ref(null);
+
+// ── API 配置 (nano-banana) ──
+const API_KEY = GRS_API_KEY;
+const API_URL = ESSAY_API_URL;
+
+// ── Router ──
+const router = useRouter();
+
+const canGenerate = computed(() => {
+  if (status.value === "generating") return false;
+  return textInput.value.trim().length > 0;
+});
+
+const goBack = () => router.back();
+
+const generateVideo = async () => {
+  if (!canGenerate.value) return;
+
+  if (!API_KEY) {
+    errorMsg.value = "请先在设置中配置 API Key";
+    status.value = "error";
+    return;
+  }
+
+  status.value = "generating";
+  errorMsg.value = "";
+  videoUrl.value = "";
+  progress.value = 0;
+  progressText.value = "正在连接 AI 模型...";
+
+  cancelTokenSource.value = axios.CancelToken.source();
+
+  // 模拟生成进度（与真实 API 进度同步）
+  const progressSteps = [
+    { progress: 10, text: "正在分析试题内容..." },
+    { progress: 25, text: "正在生成讲解脚本..." },
+    { progress: 45, text: "正在调用 nano-banana 生成视频..." },
+    { progress: 70, text: "视频渲染中..." },
+    { progress: 90, text: "视频处理完成..." },
+  ];
+
+  let stepIndex = 0;
+  const progressInterval = setInterval(() => {
+    if (stepIndex < progressSteps.length && status.value === "generating") {
+      progress.value = progressSteps[stepIndex].progress;
+      progressText.value = progressSteps[stepIndex].text;
+      stepIndex++;
+    }
+  }, 1500);
+
+  try {
+    // 调用 nano-banana API 生成视频
+    const response = await axios.post(
+      API_URL,
+      {
+        model: "nano-banana-pro",
+        prompt: `请生成一个英语试题讲解视频。试题内容：${textInput.value}`,
+        aspectRatio: "16:9",
+        duration: 30,
+        webHook: "",
+        shutProgress: true,
+      },
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${API_KEY}`,
+        },
+        cancelToken: cancelTokenSource.value.token,
+        timeout: 300000, // 5分钟超时
+      }
+    );
+
+    clearInterval(progressInterval);
+
+    // 解析 API 响应
+    let responseData = response.data;
+
+    // 处理 SSE 格式响应 (data: {...})
+    if (typeof responseData === "string") {
+      const jsonStr = responseData.replace(/^data:\s*/m, "").trim();
+      try {
+        responseData = JSON.parse(jsonStr);
+      } catch {
+        // 解析失败，使用原始数据
+      }
+    }
+
+    // 支持多种响应格式
+    let generatedVideoUrl = "";
+    if (responseData?.data?.video_url) {
+      // 格式1: { data: { video_url: "..." } }
+      generatedVideoUrl = responseData.data.video_url;
+    } else if (responseData?.data?.url) {
+      // 格式2: { data: { url: "..." } }
+      generatedVideoUrl = responseData.data.url;
+    } else if (responseData?.video_url) {
+      // 格式3: { video_url: "..." }
+      generatedVideoUrl = responseData.video_url;
+    } else if (responseData?.url) {
+      // 格式4: { url: "..." }
+      generatedVideoUrl = responseData.url;
+    } else if (responseData?.results?.[0]?.url) {
+      // 格式5: { results: [{ url: "..." }] }
+      generatedVideoUrl = responseData.results[0].url;
+    } else if (responseData?.output) {
+      // 格式6: { output: "..." }
+      generatedVideoUrl = responseData.output;
+    } else {
+      throw new Error("无法解析视频 URL，请检查 API 响应格式");
+    }
+
+    progress.value = 100;
+    progressText.value = "视频生成完成！";
+    videoUrl.value = generatedVideoUrl;
+    status.value = "done";
+  } catch (err) {
+    clearInterval(progressInterval);
+    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 cancelGeneration = () => {
+  if (cancelTokenSource.value) {
+    cancelTokenSource.value.cancel("用户取消生成");
+  }
+  status.value = "idle";
+  progress.value = 0;
+  progressText.value = "";
+};
+
+const resetAll = () => {
+  status.value = "idle";
+  textInput.value = "";
+  videoUrl.value = "";
+  errorMsg.value = "";
+  progress.value = 0;
+  progressText.value = "";
+};
+
+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 -->
+      <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 === 'generating'"
+          ></textarea>
+          <div class="char-count">{{ textInput.length }} 字符</div>
+        </div>
+
+        <!-- Generate Button -->
+        <div class="btn-wrap">
+          <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-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>
+
+          <button v-if="status === 'done'" class="reset-btn" @click="resetAll">
+            重新生成
+          </button>
+        </div>
+      </div>
+
+      <!-- Right Panel: Video Preview -->
+      <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="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 points="5 3 19 12 5 21 5 3" />
+                </svg>
+              </div>
+            </div>
+            <p class="generating-title">AI 正在生成视频</p>
+            <p class="generating-model">nano-banana</p>
+
+            <!-- Progress Bar -->
+            <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>
+
+        <!-- Done State -->
+        <div v-else-if="status === 'done'" class="video-done">
+          <div class="video-wrapper">
+            <video :src="videoUrl" 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>视频生成完成</span>
+            </div>
+            <p class="video-hint">视频已准备就绪，可以播放查看讲解效果</p>
+          </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;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+.generate-btn {
+  display: flex;
+  align-items: 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);
+}
+.generate-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+.cancel-btn {
+  display: flex;
+  align-items: 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 {
+  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;
+}
+.reset-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+/* 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.5rem;
+  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;
+}
+.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);
+}
+
+/* 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;
+}
+
+/* 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>
diff --git a/vite.config.js b/vite.config.js
index 74545bb..2e8cc78 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,6 +11,7 @@ export default defineConfig({
     }
   },
   server: {
+    host: '0.0.0.0',
     proxy: {
       '/tts-api': {
         target: 'https://openspeech.bytedance.com',