@@ -315,6 +569,80 @@ onUnmounted(() => {
+
+
+
+
-
AI 正在生成视频
-
nano-banana
-
+
+ {{
+ phase === "script"
+ ? "AI 正在解析试题"
+ : phase === "firstFrame"
+ ? `AI 正在生成第 ${currentClipIndex || 1}/${
+ storyboard.length || MAX_CLIPS
+ } 段首帧图片`
+ : phase === "lastFrame"
+ ? `AI 正在生成第 ${currentClipIndex || 1}/${
+ storyboard.length || MAX_CLIPS
+ } 段尾帧图片`
+ : `AI 正在生成第 ${currentClipIndex || 1}/${
+ storyboard.length || MAX_CLIPS
+ } 段视频`
+ }}
+
+
+ {{
+ phase === "script"
+ ? "GPT-4o · 脚本生成"
+ : phase === "firstFrame" || phase === "lastFrame"
+ ? `${IMAGE_MODEL} · 图片生成`
+ : `${VIDEO_MODEL} · 视频生成`
+ }}
+
+
+
+
+
+
+
+
+ {{ scriptContent.slice(0, 120)
+ }}{{ scriptContent.length > 120 ? "..." : "" }}
+
+
+
+
+
+
![首帧]()
+
![尾帧]()
+
{{ imgData.index }}
+
+
+ +{{ storyboardImages.length - 3 }} 个分镜...
+
+
+
+
+
+
+
{{ shot.index }}
+
+ {{ shot.desc }}
+ {{ shot.visual }}
+
+
+
+ +{{ storyboard.length - 3 }} 个分镜...
+
+
+
-
@@ -371,9 +820,24 @@ onUnmounted(() => {
>
-
视频生成完成
+
视频生成完成 · {{ videoClips.length }} 段 · 约
+ {{ videoClips.length * CLIP_DURATION }}s
+
+
+ 多段视频已自动拼接播放,总计约
+ {{ ((videoClips.length * CLIP_DURATION) / 60).toFixed(1) }} 分钟
+
+
-
视频已准备就绪,可以播放查看讲解效果
@@ -803,6 +1267,224 @@ onUnmounted(() => {
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;
+}
+
+/* Phase Steps 阶段步骤 */
+.phase-steps {
+ display: flex;
+ align-items: center;
+ gap: 0;
+ 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));
+}
+
+/* Script Preview 脚本预览 */
+.script-preview {
+ width: 100%;
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid var(--card-border);
+ border-radius: 14px;
+ padding: 1rem 1.25rem;
+ text-align: left;
+ animation: fadeInUp 0.3s ease both;
+}
+.script-preview-header {
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+ color: #14b8a6;
+ font-size: 0.85rem;
+ font-weight: 500;
+ margin-bottom: 0.6rem;
+}
+.script-preview-header svg {
+ flex-shrink: 0;
+}
+.storyboard-count {
+ margin-left: auto;
+ font-size: 0.78rem;
+ opacity: 0.7;
+ background: rgba(20, 184, 166, 0.12);
+ padding: 0.15rem 0.5rem;
+ border-radius: 50px;
+}
+.script-preview-text {
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ line-height: 1.6;
+ margin: 0 0 0.75rem 0;
+ opacity: 0.85;
+}
+.storyboard-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+}
+.storyboard-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 0.6rem;
+ padding: 0.5rem 0.6rem;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.04);
+}
+.shot-index {
+ width: 22px;
+ height: 22px;
+ border-radius: 6px;
+ background: rgba(244, 114, 182, 0.15);
+ color: #f472b6;
+ font-size: 0.72rem;
+ 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.15rem;
+ min-width: 0;
+}
+.shot-desc {
+ font-size: 0.82rem;
+ color: var(--text-primary);
+ line-height: 1.4;
+}
+.shot-visual {
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ opacity: 0.7;
+ line-height: 1.4;
+}
+.storyboard-more {
+ font-size: 0.78rem;
+ color: var(--text-secondary);
+ opacity: 0.5;
+ text-align: center;
+ padding: 0.25rem 0;
+}
+
+/* 图片预览 */
+.image-preview-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+ margin-top: 0.75rem;
+}
+.image-preview-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ position: relative;
+ padding: 0.4rem;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.04);
+}
+.image-preview-item .shot-index {
+ position: absolute;
+ left: 0.4rem;
+ top: 0.4rem;
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ background: rgba(244, 114, 182, 0.15);
+ color: #f472b6;
+ font-size: 0.7rem;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.preview-thumb {
+ width: 80px;
+ height: 45px;
+ object-fit: cover;
+ border-radius: 4px;
+ background: rgba(0, 0, 0, 0.2);
+}
+
+/* Generating Card 适配 */
+.generating-card {
+ gap: 1.25rem;
+ max-width: 420px;
+ width: 100%;
+}
/* Error Banner */
.error-banner {
diff --git a/vite.config.js b/vite.config.js
index 2e8cc78..d088d70 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -22,6 +22,11 @@ export default defineConfig({
target: 'https://ark.cn-beijing.volces.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/ark-api/, '')
+ },
+ '/dashscope-api': {
+ target: 'https://dashscope.aliyuncs.com',
+ changeOrigin: true,
+ rewrite: (path) => path.replace(/^\/dashscope-api/, '')
}
}
}