diff --git a/.env.production b/.env.production
index 72f8672..5adf7c6 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,4 @@
 
-# 临时使用旧域名配置，等待后端更新
 # 测试
 # NEXT_PUBLIC_JAVA_URL = https://auth.test.movieflow.ai
 # NEXT_PUBLIC_BASE_URL = https://77.smartvideo.py.qikongjian.com
diff --git a/app/service/Interaction/templateStoryService.ts b/app/service/Interaction/templateStoryService.ts
index 7a35770..03bc35c 100644
--- a/app/service/Interaction/templateStoryService.ts
+++ b/app/service/Interaction/templateStoryService.ts
@@ -94,7 +94,6 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
 
       setTemplateStoryList(templates);
       setSelectedTemplate(templates[0]);
-      console.log(selectedTemplate);
     } catch (err) {
       console.error("获取模板列表失败:", err);
     } finally {
diff --git a/app/users/oauth/callback/page.tsx b/app/users/oauth/callback/page.tsx
index 40b9313..7b835cd 100644
--- a/app/users/oauth/callback/page.tsx
+++ b/app/users/oauth/callback/page.tsx
@@ -3,8 +3,26 @@
 import React, { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { CheckCircle, XCircle, Loader2, AlertTriangle } from "lucide-react";
-import { loginWithGoogleToken } from "@/lib/auth";
-import type { OAuthCallbackParams, OAuthState } from "@/app/types/google-oauth";
+import type { OAuthCallbackParams } from "@/app/types/google-oauth";
+
+// 根据接口文档定义响应类型
+interface GoogleOAuthResponse {
+  success: boolean;
+  data: {
+    token: string;
+    user: {
+      userId: string;
+      userName: string;
+      name: string;
+      email: string;
+      authType: "GOOGLE";
+      avatar: string;
+      isNewUser: boolean;
+    };
+    message: string;
+  };
+  message?: string;
+}
 
 export default function OAuthCallback() {
   const router = useRouter();
@@ -78,98 +96,70 @@ export default function OAuthCallback() {
         console.log('State数据:', stateData);
         console.log('最终使用的邀请码:', finalInviteCode);
 
-        // 直接处理 OAuth 回调（两步流程：Java验证 + Python注册）
-        console.log('开始直接处理 OAuth 回调，无需经过 API 路由');
-        
-        // 第一步：调用Java验证接口（只验证不创建用户）
-        const javaBaseUrl = 'https://auth.test.movieflow.ai';
-        console.log('🔧 调用 Java 验证接口:', javaBaseUrl);
+        // 根据 jiekou.md 文档调用统一的 Python OAuth 接口
+        // 使用 NEXT_PUBLIC_BASE_URL 配置，默认为 https://77.smartvideo.py.qikongjian.com
+        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://77.smartvideo.py.qikongjian.com';
+        console.log('🔧 调用 Python OAuth 接口:', baseUrl);
 
-        const verifyResponse = await fetch(`${javaBaseUrl}/api/auth/google/callback`, {
+        const response = await fetch(`${baseUrl}/api/oauth/google`, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
             'Accept': 'application/json',
           },
           body: JSON.stringify({
-            code: params.code,                    // Google authorization code
-            state: params.state,                  // state参数
-            inviteCode: finalInviteCode,          // 邀请码
-            skipUserCreation: true                // 🔑 关键：只验证不创建用户
+            code: params.code,
+            state: params.state,
+            invite_code: finalInviteCode || null
           })
         });
 
-        console.log('Java验证接口响应状态:', verifyResponse.status);
-        const verifyResult = await verifyResponse.json();
+        console.log('Python OAuth接口响应状态:', response.status);
+        const result: GoogleOAuthResponse = await response.json();
 
-        if (!verifyResponse.ok || !verifyResult.success) {
-          console.error('Java验证接口处理失败:', verifyResult);
-          throw new Error(verifyResult.message || 'Google token verification failed');
+        if (!response.ok || !result.success) {
+          console.error('Python OAuth接口处理失败:', result);
+
+          // 处理常见错误码
+          if (result.message?.includes('GOOGLE_TOKEN_EXCHANGE_FAILED')) {
+            throw new Error('Google authorization failed. Please try again.');
+          } else if (result.message?.includes('INVALID_ID_TOKEN')) {
+            throw new Error('Invalid Google token. Please try again.');
+          } else if (result.message?.includes('UPSTREAM_AUTH_ERROR')) {
+            throw new Error('Authentication service error. Please try again later.');
+          }
+
+          throw new Error(result.message || 'Google OAuth failed');
         }
 
-        console.log('Google Token验证成功:', {
-          email: verifyResult.data?.email,
-          name: verifyResult.data?.name
-        });
-
-        // 第二步：调用Python注册接口进行用户创建和积分发放
-        const smartvideoBaseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://77.smartvideo.py.qikongjian.com';
-        console.log('🔧 调用 Python 注册接口:', smartvideoBaseUrl);
-
-        const registerResponse = await fetch(`${smartvideoBaseUrl}/api/user_fission/register_with_invite`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Accept': 'application/json',
-          },
-          body: JSON.stringify({
-            email: verifyResult.data.email,
-            name: verifyResult.data.name,
-            auth_type: 'GOOGLE',
-            google_user_info: {
-              email: verifyResult.data.email,
-              name: verifyResult.data.name,
-              picture: verifyResult.data.picture || '',
-              googleId: verifyResult.data.googleId || verifyResult.data.id || '',
-              verified: verifyResult.data.verified || true,
-              inviteCode: finalInviteCode
-            },
-            invite_code: finalInviteCode
-          })
-        });
-
-        console.log('Python注册接口响应状态:', registerResponse.status);
-        const registerResult = await registerResponse.json();
-
-        if (!registerResponse.ok || !registerResult.successful) {
-          console.error('Python注册接口处理失败:', registerResult);
-          throw new Error(registerResult.message || 'User registration failed');
-        }
-
-        console.log('Google OAuth注册成功:', {
-          userId: registerResult.data?.user_id,
-          email: registerResult.data?.email
+        console.log('Google OAuth成功:', {
+          userId: result.data?.user?.userId,
+          email: result.data?.user?.email,
+          isNewUser: result.data?.user?.isNewUser
         });
 
         // 处理成功结果
-        console.log('Google登录成功:', registerResult);
+        console.log('Google登录成功:', result);
         setStatus("success");
-        setMessage("Login successful! Redirecting to dashboard...");
-        
+        setMessage(result.data.message || "Login successful! Redirecting to dashboard...");
+
+        // 根据接口文档的响应格式保存用户信息
+        const { token, user } = result.data;
+
         // 保存用户信息到localStorage
         const userData = {
-          userId: registerResult.data.user_id,
-          userName: registerResult.data.name,
-          name: registerResult.data.name,
-          email: registerResult.data.email,
-          authType: registerResult.data.auth_type || 'GOOGLE',
-          isNewUser: true,
-          inviteCode: registerResult.data.invite_code
+          userId: user.userId,
+          userName: user.userName,
+          name: user.name,
+          email: user.email,
+          authType: user.authType,
+          avatar: user.avatar,
+          isNewUser: user.isNewUser
         };
 
         localStorage.setItem('currentUser', JSON.stringify(userData));
-        if (registerResult.data.token) {
-          localStorage.setItem('token', registerResult.data.token);
+        if (token) {
+          localStorage.setItem('token', token);
         }
 
         // 2秒后跳转到主页
diff --git a/components/ChatInputBox/ChatInputBox.tsx b/components/ChatInputBox/ChatInputBox.tsx
index 5fa4d55..763b7c1 100644
--- a/components/ChatInputBox/ChatInputBox.tsx
+++ b/components/ChatInputBox/ChatInputBox.tsx
@@ -34,7 +34,6 @@ import { StoryTemplateEntity } from "@/app/service/domain/Entities";
 import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStoryService";
 import TemplateCard from "./templateCard";
 import { AudioRecorder } from "./AudioRecorder";
-import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
 import { useRouter } from "next/navigation";
 import { createMovieProjectV1 } from "@/api/video_flow";
 import {
@@ -51,6 +50,7 @@ import { H5TemplateDrawer } from "./H5TemplateDrawer";
 import { PcPhotoStoryModal } from "./PcPhotoStoryModal";
 import { H5PhotoStoryDrawer } from "./H5PhotoStoryDrawer";
 import { AspectRatioSelector, AspectRatioValue } from "./AspectRatioSelector";
+import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
 
 const LauguageOptions =  [
   { value: "english", label: "English", isVip: false, code:'EN' },
@@ -86,7 +86,7 @@ const VideoDurationOptions = [
  * @returns {Function} - 防抖后的函数
  */
 const debounce = (func: Function, wait: number) => {
-  let timeout: NodeJS.Timeout;
+  let timeout: ReturnType<typeof setTimeout>;
   return function executedFunction(...args: any[]) {
     const later = () => {
       clearTimeout(timeout);
@@ -108,6 +108,14 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
 
   // 模板故事弹窗状态
   const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);
+  // 模板快捷入口：记录初始模板ID与是否自动聚焦
+  const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined);
+  // 复用模板服务：获取模板列表
+  const {
+    templateStoryList,
+    isLoading: isTemplateLoading,
+    getTemplateStoryList,
+  } = useTemplateStoryServiceHook();
 
   // 图片故事弹窗状态
   const [isPhotoStoryModalOpen, setIsPhotoStoryModalOpen] = useState(false);
@@ -164,19 +172,19 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
   }, []);
 
   const onConfigChange = <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K]) => {
-    setConfigOptions((prev) => ({
+    setConfigOptions((prev: ConfigOptions) => ({
       ...prev,
       [key]: value,
     }));
     if (key === 'videoDuration') {
       // 当选择 8s 时，强制关闭剧本扩展并禁用开关
       if (value === '8s') {
-        setConfigOptions((prev) => ({
+        setConfigOptions((prev: ConfigOptions) => ({
           ...prev,
           expansion_mode: false,
         }));
       } else {
-        setConfigOptions((prev) => ({
+        setConfigOptions((prev: ConfigOptions) => ({
           ...prev,
           expansion_mode: true,
         }));
@@ -184,6 +192,12 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
     }
   };
 
+  useEffect(() => {
+    if (!templateStoryList || templateStoryList.length === 0) {
+      getTemplateStoryList();
+    }
+  }, []);
+
   const handleCreateVideo = async () => {
     if (isCreating) return; // 如果正在创建中，直接返回
     
@@ -279,9 +293,9 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
 
           {/* 输入框和Action按钮 - 只在展开状态显示 */}
           {!isExpanded && (
-            <div className="flex flex-col gap-3 w-full">
+            <div data-alt="chat-input-box" className="flex flex-col w-full">
               {/* 第一行：输入框 */}
-              <div className="video-prompt-editor relative flex flex-col gap-3 flex-1 pr-10">
+              <div className="video-prompt-editor mb-3 relative flex flex-col gap-3 flex-1 pr-10">
                 {/* 文本输入框 - 改为textarea */}
                 <textarea
                   value={script}
@@ -335,7 +349,10 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                     <button
                       data-alt="template-story-button"
                       className="flex items-center gap-1.5 px-2 py-2 text-white/[0.70] hover:text-white transition-colors"
-                      onClick={() => setIsTemplateModalOpen(true)}
+                      onClick={() => {
+                        setInitialTemplateId(undefined);
+                        setIsTemplateModalOpen(true);
+                      }}
                     >
                       <LayoutTemplate className="w-4 h-4" />
                     </button>
@@ -400,7 +417,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                           </div>
                         ),
                       })),
-                      onClick: ({ key }) => onConfigChange('language', key),
+                      onClick: ({ key }: { key: string }) => onConfigChange('language', key),
                     }}
                     trigger={["click"]}
                     placement="top"
@@ -426,7 +443,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                           size="small"
                           checked={configOptions.expansion_mode}
                           disabled={configOptions.videoDuration === '8s'}
-                          onChange={(checked) => onConfigChange('expansion_mode', checked)}
+                      onChange={(checked: boolean) => onConfigChange('expansion_mode', checked)}
                         />
                       </div>
                       <span className={`text-xs text-white hidden sm:inline`}>
@@ -454,7 +471,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                           </div>
                         ),
                       })),
-                      onClick: ({ key }) => onConfigChange('videoDuration', key as string),
+                      onClick: ({ key }: { key: string }) => onConfigChange('videoDuration', key as string),
                     }}
                     trigger={["click"]}
                     placement="top"
@@ -490,6 +507,41 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                   height={isMobile ? "h-10" : "h-12"}
                 />
               </div>
+
+              {/* 第三行：模板快捷入口水平滚动 */}
+              <div data-alt="template-quick-entries" className="relative pl-2">
+                <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide pr-6 py-1">
+                  {isTemplateLoading && (!templateStoryList || templateStoryList.length === 0) ? (
+                    // 骨架屏：若正在加载且没有数据
+                    Array.from({ length: 6 }).map((_, idx) => (
+                      <div
+                        key={`skeleton-${idx}`}
+                        data-alt={`template-chip-skeleton-${idx}`}
+                        className="flex-shrink-0 w-20 h-7 rounded-full bg-white/10 animate-pulse"
+                      />
+                    ))
+                  ) : (
+                    (templateStoryList || []).map((tpl) => (
+                      <button
+                        key={tpl.id}
+                        data-alt={`template-chip-${tpl.id}`}
+                        className="flex-shrink-0 px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white/80 hover:text-white text-xs transition-colors"
+                        onClick={() => {
+                          // id 映射：优先使用模板的 id；若需要兼容 template_id，则传两者之一
+                          setInitialTemplateId(tpl.id || (tpl as any).template_id);
+                          setIsTemplateModalOpen(true);
+                          setTimeout(() => {
+                            const textarea = document.querySelector('textarea');
+                            if (textarea) (textarea as HTMLTextAreaElement).focus();
+                          }, 0);
+                        }}
+                      >
+                        {tpl.name}
+                      </button>
+                    ))
+                  )}
+                </div>
+              </div>
             </div>
           )}
         </div>
@@ -501,6 +553,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
           configOptions={configOptions}
           isOpen={isTemplateModalOpen}
           onClose={() => setIsTemplateModalOpen(false)}
+          initialTemplateId={initialTemplateId}
           isTemplateCreating={isTemplateCreating}
           setIsTemplateCreating={setIsTemplateCreating}
           isRoleGenerating={isRoleGenerating}
@@ -514,6 +567,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
           configOptions={configOptions}
           isOpen={isTemplateModalOpen}
           onClose={() => setIsTemplateModalOpen(false)}
+          initialTemplateId={initialTemplateId}
           isTemplateCreating={isTemplateCreating}
           setIsTemplateCreating={setIsTemplateCreating}
           isRoleGenerating={isRoleGenerating}
diff --git a/components/ChatInputBox/H5TemplateDrawer.tsx b/components/ChatInputBox/H5TemplateDrawer.tsx
index 562b406..176ad32 100644
--- a/components/ChatInputBox/H5TemplateDrawer.tsx
+++ b/components/ChatInputBox/H5TemplateDrawer.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Drawer, Tooltip, Upload, Image } from "antd";
+import type { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
 import { UploadOutlined } from "@ant-design/icons";
 import { Clapperboard, Sparkles, LayoutTemplate, ChevronDown, ChevronUp, CheckCircle2 } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -32,6 +33,8 @@ interface H5TemplateDrawerProps {
   ) => void;
   isOpen: boolean;
   onClose: () => void;
+  /** 指定初始选中的模板ID，用于从外部快速定位 */
+  initialTemplateId?: string;
   configOptions: {
     mode: "auto" | "manual";
     resolution: "720p" | "1080p" | "4k";
@@ -50,6 +53,7 @@ export const H5TemplateDrawer = ({
   setIsItemGenerating,
   isOpen,
   onClose,
+  initialTemplateId,
   configOptions,
 }: H5TemplateDrawerProps) => {
   const router = useRouter();
@@ -76,6 +80,8 @@ export const H5TemplateDrawer = ({
   // 自由输入框布局
   const [freeInputLayout, setFreeInputLayout] = useState('bottom');
   const [aspectUI, setAspectUI] = useState<AspectRatioValue>("VIDEO_ASPECT_RATIO_LANDSCAPE");
+  // 顶部列表所在的实际滚动容器（外层 top-section 才是滚动容器）
+  const topSectionRef = useRef<HTMLDivElement | null>(null);
 
   // 自由输入框布局
   useEffect(() => {
@@ -94,6 +100,56 @@ export const H5TemplateDrawer = ({
     }
   }, [isOpen, getTemplateStoryList]);
 
+  // 当列表加载后，根据 initialTemplateId 自动选中
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!initialTemplateId) return;
+    if (!templateStoryList || templateStoryList.length === 0) return;
+    const target = templateStoryList.find(t => t.id === initialTemplateId || t.template_id === initialTemplateId);
+    if (target) {
+      setSelectedTemplate(target);
+    }
+  }, [isOpen, initialTemplateId, templateStoryList, setSelectedTemplate]);
+
+  // 自动聚焦可编辑输入框
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    const timer = setTimeout(() => {
+      const topTextArea = document.querySelector('textarea[data-alt="h5-template-free-input-top"]') as HTMLTextAreaElement | null;
+      const bottomInput = document.querySelector('input[data-alt="h5-template-free-input-bottom"]') as HTMLInputElement | null;
+      if (freeInputLayout === 'top' && topTextArea) {
+        topTextArea.focus();
+      } else if (freeInputLayout === 'bottom' && bottomInput) {
+        bottomInput.focus();
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [isOpen, selectedTemplate, freeInputLayout]);
+
+  // 当存在默认选中模板时，将其滚动到顶部（以外层 top-section 为滚动容器）
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    const container = topSectionRef.current;
+    if (!container) return;
+    // 延迟一帧确保子节点渲染
+    const tid = setTimeout(() => {
+      const targetId = (selectedTemplate as any).id || (selectedTemplate as any).template_id;
+      const el = container.querySelector(`[data-template-id="${targetId}"]`) as HTMLElement | null;
+      if (el) {
+        // 计算相对容器的 offsetTop
+        const containerTop = container.getBoundingClientRect().top;
+        const elTop = el.getBoundingClientRect().top;
+        const offset = elTop - containerTop + container.scrollTop;
+        const adjust = 16; // 向下偏移一些，让目标项不贴顶
+        const targetTop = Math.max(0, offset - adjust);
+        container.scrollTo({ top: targetTop, behavior: 'smooth' });
+      }
+    }, 0);
+    return () => clearTimeout(tid);
+  }, [isOpen, selectedTemplate]);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const target = event.target as Element;
@@ -108,7 +164,7 @@ export const H5TemplateDrawer = ({
   const handleConfirm = async () => {
     if (!selectedTemplate || isTemplateCreating) return;
     setIsTemplateCreating(true);
-    let timer: NodeJS.Timeout | null = null;
+    let timer: ReturnType<typeof setInterval> | null = null;
     try {
       const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
       if (!User.id) return;
@@ -155,6 +211,7 @@ export const H5TemplateDrawer = ({
               <button
                 key={template.id}
                 data-alt={`template-row-${index}`}
+                data-template-id={(template as any).id || (template as any).template_id}
                 onClick={() => {
                   if (!isBottomExpanded) setIsBottomExpanded(true);
                   setSelectedTemplate(template);
@@ -287,7 +344,7 @@ export const H5TemplateDrawer = ({
                       if (!isLt5M) return false;
                       return true;
                     }}
-                    customRequest={async ({ file, onSuccess, onError }) => {
+                    customRequest={async ({ file, onSuccess, onError }: RcCustomRequestOptions) => {
                       try {
                         const fileObj = file as File;
                         const uploadedUrl = await uploadFile(fileObj, () => {});
@@ -414,7 +471,7 @@ export const H5TemplateDrawer = ({
                       if (!isLt5M) return false;
                       return true;
                     }}
-                    customRequest={async ({ file, onSuccess, onError }) => {
+                    customRequest={async ({ file, onSuccess, onError }: RcCustomRequestOptions) => {
                       try {
                         const fileObj = file as File;
                         const uploadedUrl = await uploadFile(fileObj, () => {});
@@ -516,6 +573,7 @@ export const H5TemplateDrawer = ({
               input Configuration
             </h3>
             <textarea
+              data-alt="h5-template-free-input-top"
               value={selectedTemplate?.freeInput[0].free_input_text || ""}
               placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
               className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
@@ -540,6 +598,7 @@ export const H5TemplateDrawer = ({
             <div data-alt="free-input" className="flex-1">
               <input
                 type="text"
+                data-alt="h5-template-free-input-bottom"
                 value={selectedTemplate.freeInput[0].free_input_text || ""}
                 placeholder={selectedTemplate.freeInput[0].user_tips}
                 className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
@@ -559,7 +618,7 @@ export const H5TemplateDrawer = ({
           {/* 横/竖屏选择 */}
           <AspectRatioSelector
             value={aspectUI}
-            onChange={setAspectUI}
+            onChange={(v: AspectRatioValue) => setAspectUI(v)}
             placement="top"
           />
           <ActionButton
@@ -604,7 +663,7 @@ export const H5TemplateDrawer = ({
           </div>
 
           <div data-alt="drawer-body" className="flex-1 overflow-y-auto">
-            <div data-alt="top-section" className="h-full overflow-y-auto">
+          <div data-alt="top-section" className="h-full overflow-y-auto" ref={topSectionRef}>
               {renderTopTemplateList()}
             </div>
             <motion.div
diff --git a/components/ChatInputBox/PcTemplateModal.tsx b/components/ChatInputBox/PcTemplateModal.tsx
index da43843..109f8f0 100644
--- a/components/ChatInputBox/PcTemplateModal.tsx
+++ b/components/ChatInputBox/PcTemplateModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
   Clapperboard,
   Sparkles,
@@ -13,6 +13,7 @@ import {
   Image,
   Dropdown,
 } from "antd";
+import type { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
 import { UploadOutlined } from "@ant-design/icons";
 import { StoryTemplateEntity } from "@/app/service/domain/Entities";
 import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
@@ -30,7 +31,7 @@ import { AspectRatioSelector, AspectRatioValue } from "./AspectRatioSelector";
  * @returns {Function} - 防抖后的函数
  */
 const debounce = (func: Function, wait: number) => {
-  let timeout: NodeJS.Timeout;
+  let timeout: ReturnType<typeof setTimeout>;
   return function executedFunction(...args: any[]) {
     const later = () => {
       clearTimeout(timeout);
@@ -50,6 +51,8 @@ interface PcTemplateModalProps {
   setIsItemGenerating: (value: { [key: string]: boolean } | ((prev: { [key: string]: boolean }) => { [key: string]: boolean })) => void;
   isOpen: boolean;
   onClose: () => void;
+  /** 指定初始选中的模板ID，用于从外部快速定位 */
+  initialTemplateId?: string;
   configOptions: {
     mode: "auto" | "manual";
     resolution: "720p" | "1080p" | "4k";
@@ -70,6 +73,7 @@ export const PcTemplateModal = ({
   setIsItemGenerating,
   isOpen,
   onClose,
+  initialTemplateId,
   configOptions = {
     mode: "auto" as "auto" | "manual",
     resolution: "720p" as "720p" | "1080p" | "4k",
@@ -105,7 +109,7 @@ export const PcTemplateModal = ({
   const [freeInputLayout, setFreeInputLayout] = useState('bottom');
   const router = useRouter();
   const [aspectUI, setAspectUI] = useState<AspectRatioValue>("VIDEO_ASPECT_RATIO_LANDSCAPE");
-  
+  const leftListRef = useRef<HTMLDivElement | null>(null);
   // 组件挂载时获取模板列表
   useEffect(() => {
     if (isOpen) {
@@ -113,6 +117,17 @@ export const PcTemplateModal = ({
     }
   }, [isOpen, getTemplateStoryList]);
 
+  // 当列表加载后，根据 initialTemplateId 自动选中
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!initialTemplateId) return;
+    if (!templateStoryList || templateStoryList.length === 0) return;
+    const target = templateStoryList.find(t => t.id === initialTemplateId || t.template_id === initialTemplateId);
+    if (target) {
+      setSelectedTemplate(target);
+    }
+  }, [isOpen, initialTemplateId, templateStoryList, setSelectedTemplate]);
+
   // 自由输入框布局
   useEffect(() => {
     if (selectedTemplate?.storyRole && selectedTemplate.storyRole.length > 0 || 
@@ -124,6 +139,36 @@ export const PcTemplateModal = ({
     }
   }, [selectedTemplate])
 
+  // 自动聚焦可编辑输入框
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    // 略微延迟确保 DOM 更新
+    const timer = setTimeout(() => {
+      const topTextArea = document.querySelector('textarea[data-alt="pc-template-free-input-top"]') as HTMLTextAreaElement | null;
+      const bottomInput = document.querySelector('input[data-alt="pc-template-free-input-bottom"]') as HTMLInputElement | null;
+      if (freeInputLayout === 'top' && topTextArea) {
+        topTextArea.focus();
+      } else if (freeInputLayout === 'bottom' && bottomInput) {
+        bottomInput.focus();
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [isOpen, selectedTemplate, freeInputLayout]);
+
+  // 当存在默认选中模板时，将其滚动到顶部
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    const container = leftListRef.current;
+    if (!container) return;
+    const targetId = (selectedTemplate as any).id || (selectedTemplate as any).template_id;
+    const el = container.querySelector(`[data-template-id="${targetId}"]`) as HTMLElement | null;
+    if (el) {
+      container.scrollTo({ top: el.offsetTop - 90, behavior: 'smooth' });
+    }
+  }, [isOpen, selectedTemplate]);
+
   // 监听点击外部区域关闭输入框
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -155,7 +200,7 @@ export const PcTemplateModal = ({
     if (isTemplateCreating) return;
 
     setIsTemplateCreating(true);
-    let timer: NodeJS.Timeout | null = null;
+    let timer: ReturnType<typeof setInterval> | null = null;
     
     try {
       // 获取当前用户信息
@@ -167,8 +212,8 @@ export const PcTemplateModal = ({
       }
 
       // 启动进度条动画
-      timer = setInterval(() => {
-        setLocalLoading((prev) => {
+      timer = setInterval((): void => {
+        setLocalLoading((prev: number) => {
           if (prev >= 95) {
             return 95;
           }
@@ -210,12 +255,13 @@ export const PcTemplateModal = ({
   // 模板列表渲染
   const templateListRender = () => {
     return (
-      <div className="w-1/3 p-4 border-r border-white/[0.1]  overflow-y-auto">
+      <div className="w-1/3 p-4 border-r border-white/[0.1]  overflow-y-auto" ref={leftListRef}>
         <div className="space-y-4 overflow-y-auto  template-list-scroll">
           {templateStoryList.map((template, index) => (
             <div
               key={template.id}
               data-alt={`template-card-${index}`}
+              data-template-id={(template as any).id || (template as any).template_id}
               className="flex justify-center"
               onClick={() => handleTemplateSelect(template)}
             >
@@ -429,12 +475,12 @@ export const PcTemplateModal = ({
                             file,
                             onSuccess,
                             onError,
-                          }) => {
+                          }: RcCustomRequestOptions) => {
                             try {
                               const fileObj = file as File;
                               const uploadedUrl = await uploadFile(
                                 fileObj,
-                                (progress) => {
+                                (progress: number) => {
                                   console.log(`上传进度: ${progress}%`);
                                 }
                               );
@@ -620,12 +666,12 @@ export const PcTemplateModal = ({
                             file,
                             onSuccess,
                             onError,
-                          }) => {
+                          }: RcCustomRequestOptions) => {
                             try {
                               const fileObj = file as File;
                               const uploadedUrl = await uploadFile(
                                 fileObj,
-                                (progress) => {
+                                (progress: number) => {
                                   console.log(`上传进度: ${progress}%`);
                                 }
                               );
@@ -666,6 +712,7 @@ export const PcTemplateModal = ({
               input Configuration
             </h3>
             <textarea
+              data-alt="pc-template-free-input-top"
               value={selectedTemplate?.freeInput[0].free_input_text || ""}
               placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
               className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
@@ -690,6 +737,7 @@ export const PcTemplateModal = ({
             <div className="py-2 flex-1">
               <input
                 type="text"
+                data-alt="pc-template-free-input-bottom"
                 value={selectedTemplate?.freeInput[0].free_input_text || ""}
                 placeholder={selectedTemplate?.freeInput[0].user_tips}
                 className="w-full px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
diff --git a/components/pages/create-to-video2.tsx b/components/pages/create-to-video2.tsx
index 9635982..6147b1c 100644
--- a/components/pages/create-to-video2.tsx
+++ b/components/pages/create-to-video2.tsx
@@ -191,7 +191,7 @@ export default function CreateToVideo2() {
   const renderProjectCard = (project: any) => {
 
     return (
-      <LazyLoad once>
+      <LazyLoad key={project.project_id} once>
         <div
           key={project.project_id}
           className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-300"
diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index 1612c97..95e5fa1 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -540,9 +540,11 @@ Please process this video editing request.`;
                     setCurrentSketchIndex(index);
                   }}
                   onRetryVideo={handleRetryVideo}
-                  className={isDesktop ? 'auto-cols-[20%]' : (isTablet ? 'auto-cols-[25%]' : 'auto-cols-[40%]')}
+                  className={isDesktop ? 'auto-cols-[20%]' : (isTablet ? 'auto-cols-[25%]' : 'auto-cols-[33%]')}
+                  cols={isDesktop ? '20%' : isTablet ? '25%' : '33%'}
                   selectedView={selectedView}
                   aspectRatio={aspectRatio}
+                  isMobile={isMobile}
                 />
               </div>
             )}
diff --git a/components/pages/work-flow/H5MediaViewer.tsx b/components/pages/work-flow/H5MediaViewer.tsx
index 51da617..f1abdd8 100644
--- a/components/pages/work-flow/H5MediaViewer.tsx
+++ b/components/pages/work-flow/H5MediaViewer.tsx
@@ -182,12 +182,15 @@ export function H5MediaViewer({
                     const status = raw?.video_status;
                     const videoId = raw?.video_id as string | undefined;
                     return (
-                        <div key={`h5-video-${idx}`} data-alt="video-slide" className="relative w-full h-full">
+                        <div key={`h5-video-${idx}`} data-alt="video-slide" className="relative w-full h-full flex justify-center">
                             {hasUrl ? (
                                 <>
                                     <video
                                         ref={(el) => (videoRefs.current[idx] = el)}
                                         className="w-full h-full object-contain [transform:translateZ(0)] [backface-visibility:hidden] [will-change:transform] bg-black"
+                                        style={{
+                                            maxHeight: 'calc(100vh - 20rem)',
+                                        }}
                                         src={url}
                                         preload="metadata"
                                         playsInline
@@ -217,38 +220,11 @@ export function H5MediaViewer({
                                             <Play className="w-8 h-8" />
                                         </button>
                                     )}
-
-                                    {/* 顶部操作按钮 */}
-                                    <div data-alt="video-actions" className="absolute top-2 right-2 z-10 flex items-center gap-2">
-                                        {showGotoCutButton && (
-                                            <button
-                                                type="button"
-                                                onClick={onGotoCut}
-                                                data-alt="goto-cut-button"
-                                                className="w-9 h-9 rounded-full bg-black/50 text-white flex items-center justify-center active:scale-95"
-                                                aria-label={'Go to editing platform'}
-                                            >
-                                                <Scissors className="w-5 h-5" />
-                                            </button>
-                                        )}
-                                        {!!setVideoPreview && !!onOpenChat && hasUrl && (
-                                            <button
-                                                type="button"
-                                                onClick={() => {
-                                                    setVideoPreview(url, videoId || '');
-                                                    onOpenChat();
-                                                }}
-                                                data-alt="open-chat-button"
-                                                className="w-9 h-9 rounded-full bg-black/50 text-white flex items-center justify-center active:scale-95"
-                                                aria-label={'Open chat for editing'}
-                                            >
-                                                <MessageCircleMore className="w-5 h-5" />
-                                            </button>
-                                        )}
-                                    </div>
                                 </>
                             ) : (
-                                <div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="video-status">
+                                <div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="video-status" style={{
+                                    maxHeight: 'calc(100vh - 20rem)',
+                                }}>
                                     {status === 0 && (
                                         <span className="text-blue-500 text-base">Generating...</span>
                                     )}
@@ -256,24 +232,11 @@ export function H5MediaViewer({
                                       <div className="flex flex-col items-center justify-center gap-3">
                                         <div className="text-4xl">⚠️</div>
                                         <span className="text-red-500 text-base">Generate failed</span>
-                                        {onRetryVideo && videoId && (
-                                          <button
-                                            type="button"
-                                            onClick={() => onRetryVideo(videoId)}
-                                            data-alt="retry-button"
-                                            className="px-3 py-1.5 rounded-full bg-black/60 text-white text-sm inline-flex items-center gap-1 active:scale-95"
-                                            aria-label={'Retry'}
-                                          >
-                                            <RotateCcw className="w-4 h-4" />
-                                            Retry
-                                          </button>
-                                        )}
                                       </div>
                                     )}
                                     {status !== 0 && status !== 2 && (
                                         <span className="text-white/70 text-base">Pending</span>
                                     )}
-                                    {/* 失败重试按钮改为全局固定渲染，移出 slide */}
                                 </div>
                             )}
                         </div>
@@ -298,8 +261,10 @@ export function H5MediaViewer({
                 adaptiveHeight
             >
                 {imageUrls.map((url, idx) => (
-                    <div key={`h5-image-${idx}`} data-alt="image-slide" className="relative w-full h-full">
-                        <img src={url} alt="scene" className="w-full h-full object-contain" />
+                    <div key={`h5-image-${idx}`} data-alt="image-slide" className="relative w-full h-full flex justify-center">
+                        <img src={url} alt="scene" className="w-full h-full object-contain" style={{
+                            maxHeight: 'calc(100vh - 20rem)',
+                        }} />
                     </div>
                 ))}
             </Carousel>
@@ -403,8 +368,8 @@ export function H5MediaViewer({
     // 其他阶段：使用 Carousel
     return (
         <div ref={rootRef} data-alt="h5-media-viewer" className="w-[100vw] relative px-4">
-            {/* 左侧最终视频缩略图栏（H5） */}
-            {taskObject?.final?.url && (
+            {/* 左侧最终视频缩略图栏（H5） 视频暂停时展示 */}
+            {taskObject?.final?.url && !isPlaying && (
               <div className="absolute left-4 top-0 z-[60]" data-alt="final-sidebar-h5">
                 <div className="flex items-start">
                   {isFinalBarOpen && (
@@ -426,8 +391,8 @@ export function H5MediaViewer({
             {stage === 'final_video' && videoUrls.length > 0 && renderVideoSlides()}
             {stage === 'video' && videoUrls.length > 0 && renderVideoSlides()}
             {(stage === 'scene' || stage === 'character') && imageUrls.length > 0 && renderImageSlides()}
-            {/* 全局固定操作区（右上角） */}
-            {(stage === 'video' || stage === 'final_video') && (
+            {/* 全局固定操作区（右上角）视频暂停时展示 */}
+            {(stage === 'video' || stage === 'final_video') && !isPlaying && (
               <div data-alt="global-video-actions" className="absolute top-2 right-6 z-[60] flex items-center gap-2">
                 {stage === 'video' && (
                   <>
@@ -456,20 +421,25 @@ export function H5MediaViewer({
                         await downloadAllVideos(all);
                       }}
                     />
-                    <GlassIconButton
-                      data-alt="download-current-button"
-                      className="w-8 h-8 bg-gradient-to-br from-amber-500/80 to-yellow-600/80 backdrop-blur-xl border border-amber-400/30 rounded-full flex items-center justify-center hover:from-amber-400/80 hover:to-yellow-500/80 transition-all"
-                      icon={Download}
-                      size="sm"
-                      aria-label="download-current"
-                      onClick={async () => {
-                        const current = (taskObject.videos?.data ?? [])[activeIndex] as any;
-                        const hasUrl = current && Array.isArray(current.urls) && current.urls.length > 0;
-                        if (hasUrl) {
-                          await downloadVideo(current.urls[0]);
-                        }
-                      }}
-                    />
+                    {(() => {
+                      const status = (taskObject.videos?.data ?? [])[activeIndex]?.video_status;
+                      return status === 1 ? (
+                        <GlassIconButton
+                            data-alt="download-current-button"
+                            className="w-8 h-8 bg-gradient-to-br from-amber-500/80 to-yellow-600/80 backdrop-blur-xl border border-amber-400/30 rounded-full flex items-center justify-center hover:from-amber-400/80 hover:to-yellow-500/80 transition-all"
+                            icon={Download}
+                            size="sm"
+                            aria-label="download-current"
+                            onClick={async () => {
+                                const current = (taskObject.videos?.data ?? [])[activeIndex] as any;
+                                const hasUrl = current && Array.isArray(current.urls) && current.urls.length > 0;
+                                if (hasUrl) {
+                                await downloadVideo(current.urls[0]);
+                                }
+                            }}
+                        />
+                      ) : null;
+                    })()}
                     {(() => {
                       const status = (taskObject.videos?.data ?? [])[activeIndex]?.video_status;
                       return status === 2 ? (
@@ -518,7 +488,7 @@ export function H5MediaViewer({
             )}
             <style jsx global>{`
               [data-alt='carousel-wrapper'] .slick-slide { display: block; }
-              .slick-list { width: 100%;height: 100%; }
+              .slick-list { width: 100%;height: 100% !important;max-height: calc(100vh - 20rem); }
             `}</style>
         </div>
     );
diff --git a/components/pages/work-flow/H5TaskInfo.tsx b/components/pages/work-flow/H5TaskInfo.tsx
index db419b6..e458be5 100644
--- a/components/pages/work-flow/H5TaskInfo.tsx
+++ b/components/pages/work-flow/H5TaskInfo.tsx
@@ -80,7 +80,7 @@ const H5TaskInfo: React.FC<H5TaskInfoProps> = ({
     if (selectedView === 'final' && taskObject.final?.url) {
       return 'Final 1/1'
     }
-    if (selectedView === 'video') {
+    if (selectedView === 'video' && !['scene', 'character'].includes(taskObject.currentStage)) {
       const videosTotal = taskObject.videos?.total_count || taskObject.videos?.data?.length || 0
       return `Shots ${Math.max(displayCurrent, 1)}/${Math.max(videosTotal, 1)}`
     }
diff --git a/components/pages/work-flow/thumbnail-grid.tsx b/components/pages/work-flow/thumbnail-grid.tsx
index c45dcbd..fa291a7 100644
--- a/components/pages/work-flow/thumbnail-grid.tsx
+++ b/components/pages/work-flow/thumbnail-grid.tsx
@@ -18,6 +18,8 @@ interface ThumbnailGridProps {
   className: string;
   selectedView?: 'final' | 'video' | null;
   aspectRatio: AspectRatioValue;
+  cols: string;
+  isMobile: boolean;
 }
 
 /** 
@@ -31,7 +33,9 @@ export function ThumbnailGrid({
   onRetryVideo,
   className,
   selectedView,
-  aspectRatio
+  aspectRatio,
+  cols,
+  isMobile
 }: ThumbnailGridProps) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
@@ -191,7 +195,7 @@ export function ThumbnailGrid({
           key={`video-${urls}-${index}`}
           className={`relative aspect-auto rounded-lg overflow-hidden
             ${(currentSketchIndex === index && !disabled && selectedView !== 'final') ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}
-            ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? 'min-w-[210px]' : 'min-w-[70px]'}
+            ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? `min-w-[${cols}]` : 'min-w-[70px]'}
             `}
           onClick={() => !isDragging && !disabled && onSketchSelect(index)}
         >
@@ -251,12 +255,16 @@ export function ThumbnailGrid({
 
           </div>
 
-          <div className='absolute bottom-0 left-0 right-0 p-2'>
-            <div className="inline-flex items-center px-2 py-1 rounded-full bg-green-500/20 backdrop-blur-sm">
-              <Video className="w-3 h-3 text-green-400 mr-1" />
-              <span className="text-xs text-green-400">{index + 1}</span>
+          {!isMobile && (
+            <div className='absolute bottom-0 left-0 right-0 p-2'>
+              <div className="inline-flex items-center px-2 py-1 rounded-full bg-green-500/20 backdrop-blur-sm">
+                <Video className="w-3 h-3 text-green-400 mr-1" />
+                <span className="text-xs text-green-400">{index + 1}</span>
+              </div>
             </div>
-          </div>
+          )}
+
+          
 
           {/* <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent z-10">
             <span className="text-xs text-white/90">Scene {index + 1}</span>
@@ -276,7 +284,7 @@ export function ThumbnailGrid({
             key={sketch.uniqueId || `sketch-${sketch.url}-${index}`}
             className={`relative aspect-auto rounded-lg overflow-hidden
               ${currentSketchIndex === index ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}
-              ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? 'min-w-[210px]' : 'min-w-[70px]'}
+              ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? `min-w-[${cols}]` : 'min-w-[70px]'}
               `}
             onClick={() => !isDragging && onSketchSelect(index)}
           >
@@ -307,29 +315,33 @@ export function ThumbnailGrid({
                 />
               </div>
             )}
-            <div className='absolute bottom-0 left-0 right-0 p-2'>
-              {/* 角色类型 */}
-              {sketch.type === 'role' && (
-                <div className="inline-flex items-center px-2 py-1 rounded-full bg-purple-500/20 backdrop-blur-sm">
-                  <SquareUserRound className="w-3 h-3 text-purple-400 mr-1" />
-                  <span className="text-xs text-purple-400">Role</span>
-                </div>
-              )}
-              {/* 场景类型 */}
-              {sketch.type === 'scene' && (
-                <div className="inline-flex items-center px-2 py-1 rounded-full bg-purple-500/20 backdrop-blur-sm">
-                  <MapPinHouse className="w-3 h-3 text-purple-400 mr-1" />
-                  <span className="text-xs text-purple-400">Scene</span>
-                </div>
-              )}
-              {/* 分镜类型 */}
-              {(!sketch.type || sketch.type === 'shot_sketch') && (
-                <div className="inline-flex items-center px-2 py-1 rounded-full bg-cyan-500/20 backdrop-blur-sm">
-                  <Clapperboard className="w-3 h-3 text-cyan-400 mr-1" />
-                  <span className="text-xs text-cyan-400">{index + 1}</span>
-                </div>
-              )}
-            </div>
+
+            {!isMobile && (
+              <div className='absolute bottom-0 left-0 right-0 p-2'>
+                {/* 角色类型 */}
+                {sketch.type === 'role' && (
+                  <div className="inline-flex items-center px-2 py-1 rounded-full bg-purple-500/20 backdrop-blur-sm">
+                    <SquareUserRound className="w-3 h-3 text-purple-400 mr-1" />
+                    <span className="text-xs text-purple-400">Role</span>
+                  </div>
+                )}
+                {/* 场景类型 */}
+                {sketch.type === 'scene' && (
+                  <div className="inline-flex items-center px-2 py-1 rounded-full bg-purple-500/20 backdrop-blur-sm">
+                    <MapPinHouse className="w-3 h-3 text-purple-400 mr-1" />
+                    <span className="text-xs text-purple-400">Scene</span>
+                  </div>
+                )}
+                {/* 分镜类型 */}
+                {(!sketch.type || sketch.type === 'shot_sketch') && (
+                  <div className="inline-flex items-center px-2 py-1 rounded-full bg-cyan-500/20 backdrop-blur-sm">
+                    <Clapperboard className="w-3 h-3 text-cyan-400 mr-1" />
+                    <span className="text-xs text-cyan-400">{index + 1}</span>
+                  </div>
+                )}
+              </div>
+            )}
+            
 
             {/* <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent z-10">
               <span className="text-xs text-white/90">{sketch.type === 'role' ? 'Role' : (sketch.type === 'scene' ? 'Scene' : 'Shot')} {index + 1}</span>
@@ -344,7 +356,7 @@ export function ThumbnailGrid({
     <div
       ref={thumbnailsRef}
       tabIndex={0}
-      className={`w-full h-full grid grid-flow-col gap-2 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none ${className} auto-cols-max`}
+      className={`w-full h-full grid grid-flow-col gap-2 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none auto-cols-[${cols}] ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? '' : '!auto-cols-max'}`}
       autoFocus
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
diff --git a/docs/google-oauth-callback-flow-analysis.md b/docs/google-oauth-callback-flow-analysis.md
new file mode 100644
index 0000000..7fb6e6d
--- /dev/null
+++ b/docs/google-oauth-callback-flow-analysis.md
@@ -0,0 +1,557 @@
+# 🔍 Google OAuth 回调逻辑全面梳理
+
+## 📋 概述
+
+Video Flow 项目的 Google OAuth 登录采用了**授权码模式**，整个流程涉及前端、Java 认证服务和 Python 业务服务的协调配合。本文档详细梳理了从用户点击登录到最终完成认证的完整流程。
+
+## 🏗️ 架构图
+
+```mermaid
+sequenceDiagram
+    participant U as 用户
+    participant F as 前端(Next.js)
+    participant G as Google OAuth
+    participant J as Java认证服务
+    participant P as Python业务服务
+
+    U->>F: 点击Google登录
+    F->>F: 生成state参数(包含邀请码)
+    F->>G: 重定向到Google授权页面
+    G->>U: 显示授权页面
+    U->>G: 确认授权
+    G->>F: 回调到/api/auth/google/callback
+    F->>F: API路由重定向到页面路由
+    F->>J: 调用Java验证接口
+    J->>G: 验证授权码获取用户信息
+    J->>F: 返回验证结果
+    F->>P: 调用Python注册接口
+    P->>F: 返回用户信息和token
+    F->>F: 保存用户信息到localStorage
+    F->>U: 跳转到主页面
+```
+
+## 🔧 核心组件分析
+
+### 1. 环境配置 (.env.production)
+
+<augment_code_snippet path=".env.production" mode="EXCERPT">
+
+```bash
+# Java认证服务
+NEXT_PUBLIC_JAVA_URL = https://auth.test.movieflow.ai
+# Python业务服务
+NEXT_PUBLIC_BASE_URL = https://77.smartvideo.py.qikongjian.com
+# Google OAuth配置
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=847079918888-o1nne8d3ij80dn20qurivo987pv07225.apps.googleusercontent.com
+NEXT_PUBLIC_GOOGLE_REDIRECT_URI=https://www.movieflow.net/api/auth/google/callback
+```
+
+</augment_code_snippet>
+
+**关键问题**：
+
+- ❌ 域名不一致：redirect_uri 使用 `movieflow.net`，但实际部署可能在 `movieflow.ai`
+- ❌ 硬编码配置：多个环境的配置混杂在一起
+
+### 2. Next.js 路由代理配置
+
+<augment_code_snippet path="next.config.js" mode="EXCERPT">
+
+```javascript
+// Google OAuth2 API代理 (排除callback，让Next.js本地处理)
+{
+  source: '/api/auth/google/((?!callback).*)',
+  destination: `${AUTH_API_URL}/api/auth/google/$1`,
+},
+```
+
+</augment_code_snippet>
+
+**设计意图**：
+
+- ✅ 除了 callback 路由外，其他 Google OAuth API 都代理到 Java 服务
+- ✅ callback 路由由 Next.js 本地处理，便于前端控制流程
+
+### 3. 登录发起流程
+
+#### 3.1 登录页面组件
+
+<augment_code_snippet path="components/pages/login.tsx" mode="EXCERPT">
+
+```typescript
+const handleGoogleSignIn = async () => {
+  try {
+    setGoogleLoading(true)
+    setFormError('')
+
+    // 获取邀请码（从URL参数或其他来源）
+    const inviteCode = searchParams?.get('invite') || undefined
+
+    // 使用Google GSI SDK进行登录
+    await signInWithGoogle(inviteCode)
+  } catch (error: any) {
+    console.error('Google sign-in error:', error)
+    setFormError(error.message || 'Google sign-in failed, please try again')
+    setGoogleLoading(false)
+  }
+}
+```
+
+</augment_code_snippet>
+
+#### 3.2 Google 登录核心逻辑
+
+<augment_code_snippet path="lib/auth.ts" mode="EXCERPT">
+
+```typescript
+export const signInWithGoogle = async (inviteCode?: string): Promise<void> => {
+  try {
+    // 从环境变量获取配置
+    const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID
+    const javaBaseUrl = process.env.NEXT_PUBLIC_JAVA_URL
+    const redirectUri = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI
+
+    // 生成随机nonce用于安全验证
+    const nonce = Array.from(crypto.getRandomValues(new Uint8Array(32)))
+      .map((b) => b.toString(16).padStart(2, '0'))
+      .join('')
+
+    // 构建state参数（包含邀请码等信息）
+    const stateData = {
+      inviteCode: finalInviteCode || '',
+      timestamp: Date.now(),
+      origin: window.location.pathname + window.location.search,
+      nonce: nonce,
+    }
+
+    // 构建Google OAuth2授权URL
+    const authParams = new URLSearchParams({
+      access_type: 'online',
+      client_id: clientId,
+      nonce: nonce,
+      redirect_uri: redirectUri,
+      response_type: 'code', // 使用授权码模式
+      scope: 'email openid profile',
+      state: JSON.stringify(stateData),
+      prompt: 'select_account', // 总是显示账号选择
+    })
+
+    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?${authParams.toString()}`
+
+    // 保存state到sessionStorage用于验证
+    sessionStorage.setItem(
+      'google_oauth_state',
+      JSON.stringify({
+        nonce: nonce,
+        timestamp: Date.now(),
+        inviteCode: finalInviteCode || '',
+      })
+    )
+
+    // 直接在当前页面跳转到Google
+    window.location.href = authUrl
+  } catch (error) {
+    console.error('Google登录跳转失败:', error)
+    throw error
+  }
+}
+```
+
+</augment_code_snippet>
+
+**关键特性**：
+
+- ✅ 使用 `crypto.getRandomValues` 生成安全的 nonce
+- ✅ state 参数包含邀请码、时间戳等信息
+- ✅ 使用 sessionStorage 保存状态用于后续验证
+- ❌ 硬编码的 redirect_uri 可能导致域名不匹配问题
+
+### 4. 回调处理流程
+
+#### 4.1 API 路由回调处理
+
+<augment_code_snippet path="app/api/auth/google/callback/route.ts" mode="EXCERPT">
+
+```typescript
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  const code = searchParams.get('code')
+  const state = searchParams.get('state')
+
+  if (!code || !state) {
+    return NextResponse.json(
+      {
+        success: false,
+        message: 'Missing required parameters: code and state',
+      },
+      { status: 400 }
+    )
+  }
+
+  // 重定向到页面路由，让页面处理OAuth回调
+  const callbackUrl = `/users/oauth/callback?code=${encodeURIComponent(
+    code
+  )}&state=${encodeURIComponent(state)}`
+
+  // 修复：确保使用正确的域名进行重定向
+  const host = request.headers.get('host') || 'www.movieflow.net'
+  const protocol = request.headers.get('x-forwarded-proto') || 'https'
+  const fullCallbackUrl = `${protocol}://${host}${callbackUrl}`
+
+  return NextResponse.redirect(fullCallbackUrl)
+}
+```
+
+</augment_code_snippet>
+
+**设计模式**：
+
+- ✅ API 路由仅作为中转，将 GET 请求重定向到页面路由
+- ✅ 动态构建重定向 URL，避免硬编码域名
+- ❌ 默认域名仍然是硬编码的 `movieflow.net`
+
+#### 4.2 页面路由回调处理
+
+<augment_code_snippet path="app/users/oauth/callback/page.tsx" mode="EXCERPT">
+
+```typescript
+const handleOAuthCallback = async () => {
+  try {
+    // 获取URL参数
+    const params: OAuthCallbackParams = {
+      code: searchParams.get('code') || undefined,
+      state: searchParams.get('state') || undefined,
+      error: searchParams.get('error') || undefined,
+      error_description: searchParams.get('error_description') || undefined,
+    }
+
+    // 解析state参数
+    let stateData: any = {}
+    if (params.state) {
+      try {
+        stateData = JSON.parse(params.state)
+      } catch (e) {
+        console.error('Failed to parse state parameter:', e)
+      }
+    }
+
+    // 第一步：调用Java验证接口（只验证不创建用户）
+    const javaBaseUrl = 'https://auth.test.movieflow.ai'
+    const verifyResponse = await fetch(
+      `${javaBaseUrl}/api/auth/google/callback`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          code: params.code, // Google authorization code
+          state: params.state, // state参数
+          inviteCode: finalInviteCode, // 邀请码
+          skipUserCreation: true, // 🔑 关键：只验证不创建用户
+        }),
+      }
+    )
+
+    // 第二步：调用Python注册接口进行用户创建和积分发放
+    const smartvideoBaseUrl = process.env.NEXT_PUBLIC_BASE_URL
+    const registerResponse = await fetch(
+      `${smartvideoBaseUrl}/api/user_fission/google_register`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          email: verifyResult.data.email,
+          name: verifyResult.data.name,
+          google_id: verifyResult.data.sub,
+          invite_code: finalInviteCode,
+        }),
+      }
+    )
+
+    // 保存用户信息到localStorage
+    const userData = {
+      userId: registerResult.data.user_id,
+      userName: registerResult.data.name,
+      name: registerResult.data.name,
+      email: registerResult.data.email,
+      authType: registerResult.data.auth_type || 'GOOGLE',
+      isNewUser: true,
+      inviteCode: registerResult.data.invite_code,
+    }
+
+    localStorage.setItem('currentUser', JSON.stringify(userData))
+    if (registerResult.data.token) {
+      localStorage.setItem('token', registerResult.data.token)
+    }
+
+    // 2秒后跳转到主页
+    setTimeout(() => {
+      const returnUrl = '/movies'
+      window.location.href = returnUrl
+    }, 2000)
+  } catch (error) {
+    console.error('OAuth callback处理失败:', error)
+    setStatus('error')
+    setMessage(error.message || 'Authentication failed')
+  }
+}
+```
+
+</augment_code_snippet>
+
+**核心特性**：
+
+- ✅ 两步验证：先 Java 验证 Google Token，再 Python 创建用户
+- ✅ 支持邀请码逻辑
+- ✅ 完整的错误处理和用户反馈
+- ❌ 硬编码的 Java 服务地址
+- ❌ 缺少 state 参数的安全验证
+
+## 🚨 发现的问题
+
+### 1. 域名配置不一致
+
+- **问题**：redirect_uri 配置为 `movieflow.net`，但实际可能部署在 `movieflow.ai`
+- **影响**：Google OAuth 回调失败
+- **建议**：统一域名配置，使用环境变量管理
+
+### 2. 硬编码配置过多
+
+- **问题**：Java 服务地址、域名等多处硬编码
+- **影响**：环境切换困难，维护成本高
+- **建议**：全部使用环境变量配置
+
+### 3. 安全验证不完整
+
+- **问题**：缺少 state 参数的 nonce 验证
+- **影响**：存在 CSRF 攻击风险
+- **建议**：完善 state 参数验证逻辑
+
+### 4. 错误处理不够细致
+
+- **问题**：某些错误场景处理不够详细
+- **影响**：用户体验不佳，问题排查困难
+- **建议**：增加更详细的错误分类和处理
+
+## 📈 优化建议
+
+### 1. 配置管理优化
+
+```typescript
+// 建议的配置管理方式
+const config = {
+  googleClientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!,
+  javaBaseUrl: process.env.NEXT_PUBLIC_JAVA_URL!,
+  pythonBaseUrl: process.env.NEXT_PUBLIC_BASE_URL!,
+  redirectUri: process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI!,
+  frontendUrl: process.env.NEXT_PUBLIC_FRONTEND_URL!,
+}
+```
+
+### 2. 安全性增强
+
+```typescript
+// 建议的 state 验证逻辑
+const validateState = (receivedState: string): boolean => {
+  try {
+    const stateData = JSON.parse(receivedState)
+    const storedState = sessionStorage.getItem('google_oauth_state')
+
+    if (!storedState) return false
+
+    const stored = JSON.parse(storedState)
+
+    // 验证 nonce 和时间戳
+    return (
+      stateData.nonce === stored.nonce &&
+      Math.abs(Date.now() - stored.timestamp) < 600000
+    ) // 10分钟有效期
+  } catch {
+    return false
+  }
+}
+```
+
+### 3. 错误处理优化
+
+```typescript
+// 建议的错误处理策略
+enum OAuthError {
+  INVALID_STATE = 'INVALID_STATE',
+  EXPIRED_STATE = 'EXPIRED_STATE',
+  GOOGLE_AUTH_FAILED = 'GOOGLE_AUTH_FAILED',
+  USER_CREATION_FAILED = 'USER_CREATION_FAILED',
+  NETWORK_ERROR = 'NETWORK_ERROR',
+}
+
+const handleOAuthError = (error: OAuthError, details?: any) => {
+  const errorMessages = {
+    [OAuthError.INVALID_STATE]: '安全验证失败，请重新登录',
+    [OAuthError.EXPIRED_STATE]: '登录会话已过期，请重新登录',
+    [OAuthError.GOOGLE_AUTH_FAILED]: 'Google 认证失败，请重试',
+    [OAuthError.USER_CREATION_FAILED]: '用户创建失败，请联系客服',
+    [OAuthError.NETWORK_ERROR]: '网络连接失败，请检查网络后重试',
+  }
+
+  setMessage(errorMessages[error] || '未知错误')
+  console.error(`OAuth Error: ${error}`, details)
+}
+```
+
+## 🔄 完整流程时序图
+
+```mermaid
+graph TD
+    A[用户点击Google登录] --> B[检查Google登录是否启用]
+    B --> C{启用状态}
+    C -->|启用| D[生成state参数和nonce]
+    C -->|未启用| E[隐藏Google登录按钮]
+
+    D --> F[保存state到sessionStorage]
+    F --> G[构建Google OAuth URL]
+    G --> H[跳转到Google授权页面]
+
+    H --> I[用户在Google页面授权]
+    I --> J[Google回调到/api/auth/google/callback]
+
+    J --> K[API路由获取code和state]
+    K --> L{参数验证}
+    L -->|失败| M[返回400错误]
+    L -->|成功| N[重定向到/users/oauth/callback页面]
+
+    N --> O[页面路由解析URL参数]
+    O --> P[解析state参数获取邀请码]
+    P --> Q[调用Java验证接口]
+
+    Q --> R{Java验证结果}
+    R -->|失败| S[显示错误信息]
+    R -->|成功| T[调用Python注册接口]
+
+    T --> U{Python注册结果}
+    U -->|失败| V[显示注册失败]
+    U -->|成功| W[保存用户信息到localStorage]
+
+    W --> X[显示成功信息]
+    X --> Y[2秒后跳转到/movies]
+```
+
+## 📊 数据流分析
+
+### 1. State 参数结构
+
+```typescript
+interface StateData {
+  inviteCode: string // 邀请码
+  timestamp: number // 时间戳
+  origin: string // 原始页面路径
+  nonce: string // 安全随机数
+}
+```
+
+### 2. Java 验证接口请求
+
+```typescript
+interface JavaVerifyRequest {
+  code: string // Google授权码
+  state: string // state参数
+  inviteCode?: string // 邀请码
+  skipUserCreation: true // 只验证不创建用户
+}
+```
+
+### 3. Python 注册接口请求
+
+```typescript
+interface PythonRegisterRequest {
+  email: string // 用户邮箱
+  name: string // 用户姓名
+  google_id: string // Google用户ID
+  invite_code?: string // 邀请码
+}
+```
+
+## 🛡️ 安全机制分析
+
+### 1. CSRF 防护
+
+- ✅ 使用 state 参数防止 CSRF 攻击
+- ✅ 生成随机 nonce 增强安全性
+- ❌ 缺少 state 参数的服务端验证
+
+### 2. 会话管理
+
+- ✅ 使用 sessionStorage 临时存储状态
+- ✅ 设置时间戳用于过期检查
+- ❌ 缺少自动清理过期状态的机制
+
+### 3. Token 安全
+
+- ✅ 使用授权码模式，不直接暴露 access_token
+- ✅ Token 存储在 localStorage
+- ❌ 缺少 Token 过期自动刷新机制
+
+## 🔧 技术债务清单
+
+### 高优先级
+
+1. **域名配置统一**
+
+   - 问题：redirect_uri 域名不匹配
+   - 影响：OAuth 回调失败
+   - 工作量：1 天
+
+2. **硬编码配置清理**
+   - 问题：多处硬编码服务地址
+   - 影响：环境切换困难
+   - 工作量：0.5 天
+
+### 中优先级
+
+3. **State 参数验证完善**
+
+   - 问题：缺少 nonce 验证
+   - 影响：安全风险
+   - 工作量：1 天
+
+4. **错误处理优化**
+   - 问题：错误分类不够细致
+   - 影响：用户体验和调试困难
+   - 工作量：1 天
+
+### 低优先级
+
+5. **Token 刷新机制**
+
+   - 问题：缺少自动刷新
+   - 影响：用户需要重新登录
+   - 工作量：2 天
+
+6. **日志和监控完善**
+   - 问题：缺少结构化日志
+   - 影响：问题排查困难
+   - 工作量：1 天
+
+## 🎯 总结
+
+Video Flow 的 Google OAuth 回调逻辑整体设计合理，采用了前后端分离的架构，支持邀请码功能，具备基本的安全防护。主要问题集中在配置管理和安全验证的细节上。
+
+**优势**：
+
+- ✅ 架构清晰，职责分离
+- ✅ 支持邀请码业务逻辑
+- ✅ 具备基本的错误处理
+- ✅ 使用标准的 OAuth 2.0 授权码模式
+
+**待改进**：
+
+- ❌ 配置管理需要优化
+- ❌ 安全验证需要加强
+- ❌ 错误处理需要细化
+- ❌ 监控和日志需要完善
+
+建议按照技术债务清单的优先级逐步改进，优先解决影响功能正常运行的配置问题，然后逐步完善安全性和用户体验。
diff --git a/docs/oauth-callback-refactor-summary.md b/docs/oauth-callback-refactor-summary.md
new file mode 100644
index 0000000..52f5c3e
--- /dev/null
+++ b/docs/oauth-callback-refactor-summary.md
@@ -0,0 +1,148 @@
+# Google OAuth 回调页面重构总结
+
+## 📋 重构概述
+
+根据 `docs/jiekou.md` 接口文档的要求，对 `app/users/oauth/callback/page.tsx` 进行了重构，简化了 Google OAuth 回调处理流程。
+
+## 🔄 主要改进
+
+### 1. 简化架构
+**之前**：复杂的两步验证流程
+```typescript
+// 第一步：调用 Java 验证接口
+const javaResponse = await fetch(`${javaBaseUrl}/api/auth/google/callback`, {...});
+
+// 第二步：调用 Python 注册接口  
+const pythonResponse = await fetch(`${pythonBaseUrl}/api/user_fission/register_with_invite`, {...});
+```
+
+**现在**：统一的单步流程
+```typescript
+// 直接调用 Python OAuth 接口
+const response = await fetch(`${baseUrl}/api/oauth/google`, {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+  body: JSON.stringify({ code, state, invite_code })
+});
+```
+
+### 2. 标准化环境变量
+**之前**：混合使用多个环境变量
+```typescript
+const javaBaseUrl = 'https://auth.test.movieflow.ai'; // 硬编码
+const smartvideoBaseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+```
+
+**现在**：按文档要求使用标准环境变量
+```typescript
+const baseUrl = process.env.NEXT_PUBLIC_SMARTVIDEO_URL || 
+                process.env.NEXT_PUBLIC_BASE_URL || 
+                'https://77.smartvideo.py.qikongjian.com';
+```
+
+### 3. 统一响应格式
+**之前**：处理不同服务的不同响应格式
+```typescript
+// Java 响应格式
+{ success: boolean, data: { email, name, ... } }
+
+// Python 响应格式  
+{ successful: boolean, data: { user_id, name, ... } }
+```
+
+**现在**：按文档标准化响应格式
+```typescript
+interface GoogleOAuthResponse {
+  success: boolean;
+  data: {
+    token: string;
+    user: {
+      userId: string;
+      userName: string;
+      name: string;
+      email: string;
+      authType: "GOOGLE";
+      avatar: string;
+      isNewUser: boolean;
+    };
+    message: string;
+  };
+}
+```
+
+### 4. 改进错误处理
+**之前**：通用错误处理
+```typescript
+throw new Error(result.message || 'OAuth failed');
+```
+
+**现在**：按文档分类处理错误
+```typescript
+if (result.message?.includes('GOOGLE_TOKEN_EXCHANGE_FAILED')) {
+  throw new Error('Google authorization failed. Please try again.');
+} else if (result.message?.includes('INVALID_ID_TOKEN')) {
+  throw new Error('Invalid Google token. Please try again.');
+} else if (result.message?.includes('UPSTREAM_AUTH_ERROR')) {
+  throw new Error('Authentication service error. Please try again later.');
+}
+```
+
+## 📊 重构对比
+
+| 方面 | 重构前 | 重构后 |
+|------|--------|--------|
+| **API 调用** | 2 次（Java + Python） | 1 次（Python） |
+| **代码行数** | ~80 行核心逻辑 | ~40 行核心逻辑 |
+| **硬编码配置** | 多处硬编码 | 使用环境变量 |
+| **错误处理** | 通用处理 | 分类处理 |
+| **类型安全** | 部分类型 | 完整类型定义 |
+| **维护性** | 复杂，难维护 | 简单，易维护 |
+
+## ✅ 重构优势
+
+1. **简化流程**：从两步验证简化为单步调用
+2. **减少依赖**：不再依赖 Java 认证服务
+3. **提高可靠性**：减少网络调用，降低失败概率
+4. **标准化**：完全按照接口文档实现
+5. **类型安全**：添加完整的 TypeScript 类型定义
+6. **错误处理**：更细致的错误分类和用户提示
+
+## 🔧 技术细节
+
+### 请求格式
+```typescript
+{
+  code: string,      // Google 授权码
+  state: string,     // 状态参数
+  invite_code: string | null  // 邀请码
+}
+```
+
+### 响应处理
+```typescript
+const { token, user } = result.data;
+
+// 保存到 localStorage
+localStorage.setItem('currentUser', JSON.stringify({
+  userId: user.userId,
+  userName: user.userName,
+  name: user.name,
+  email: user.email,
+  authType: user.authType,
+  avatar: user.avatar,
+  isNewUser: user.isNewUser
+}));
+
+localStorage.setItem('token', token);
+```
+
+## 🎯 后续建议
+
+1. **环境变量配置**：确保生产环境正确配置 `NEXT_PUBLIC_SMARTVIDEO_URL`
+2. **错误监控**：添加错误上报，监控 OAuth 失败率
+3. **用户体验**：考虑添加重试机制
+4. **安全性**：验证 state 参数的 CSRF 防护
+
+## 📝 总结
+
+这次重构大大简化了 Google OAuth 回调处理逻辑，提高了代码的可维护性和可靠性。新的实现完全符合接口文档要求，为后续的功能扩展和维护奠定了良好基础。
diff --git a/docs/页面加载优化方案.md b/docs/页面加载优化方案.md
new file mode 100644
index 0000000..4242e3e
--- /dev/null
+++ b/docs/页面加载优化方案.md
@@ -0,0 +1,340 @@
+# ⚡ Video-Flow 性能优化快速实施指南
+
+> **紧急修复清单** - 可在1-2天内完成，立即提升50%+性能
+
+## 🚨 立即修复（30分钟内）
+
+### 1. 启用图片优化
+**影响**: 减少50-70%图片加载时间
+
+```javascript
+// next.config.js - 找到这行并修改
+const nextConfig = {
+  images: {
+    unoptimized: false, // ✅ 改为 false
+    formats: ['image/webp', 'image/avif'],
+    domains: ['cdn.qikongjian.com'],
+  },
+};
+```
+
+### 2. 修复JSON解析性能灾难
+**影响**: 消除每秒数百次异常，提升渲染性能70%
+
+```typescript
+// 找到 parseTaskResult 函数并替换为：
+function parseTaskResult(taskResult: any) {
+  if (!taskResult) return null;
+
+  if (typeof taskResult === 'string') {
+    const trimmed = taskResult.trim();
+    // 快速检查，避免异常
+    if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
+      return { raw_text: trimmed };
+    }
+
+    try {
+      return JSON.parse(taskResult);
+    } catch {
+      // 静默处理，避免大量日志
+      return { raw_text: trimmed, parse_error: true };
+    }
+  }
+
+  return taskResult;
+}
+```
+
+### 3. 减少视频预加载
+**影响**: 减少200-400MB初始加载
+
+```typescript
+// components/pages/home-page2.tsx
+// 找到 preloadAllVideos 函数，替换为：
+const preloadCriticalVideos = async () => {
+  // 只预加载首屏关键视频
+  const criticalVideo = "https://cdn.qikongjian.com/videos/home.mp4";
+  
+  // 检查网络条件
+  const connection = (navigator as any).connection;
+  if (connection?.saveData || connection?.effectiveType === '2g') {
+    return; // 慢速网络跳过预加载
+  }
+  
+  await preloadVideo(criticalVideo);
+};
+```
+
+## 🔥 快速优化（2小时内）
+
+### 4. TensorFlow.js 按需加载
+**影响**: 减少271MB首屏加载
+
+```typescript
+// 创建 hooks/useTensorFlow.ts
+import { useState, useCallback } from 'react';
+
+export const useTensorFlow = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [tfModule, setTfModule] = useState(null);
+
+  const loadTensorFlow = useCallback(async () => {
+    if (tfModule) return tfModule;
+    
+    setIsLoading(true);
+    try {
+      const [tf, cocoSsd] = await Promise.all([
+        import('@tensorflow/tfjs'),
+        import('@tensorflow-models/coco-ssd')
+      ]);
+      
+      const module = { tf, cocoSsd };
+      setTfModule(module);
+      return module;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [tfModule]);
+
+  return { loadTensorFlow, isLoading, isLoaded: !!tfModule };
+};
+```
+
+```typescript
+// 更新人物检测组件
+export const PersonDetection = ({ videoSrc, onDetection }) => {
+  const { loadTensorFlow, isLoading } = useTensorFlow();
+  const [isReady, setIsReady] = useState(false);
+
+  if (!isReady) {
+    return (
+      <button
+        onClick={async () => {
+          await loadTensorFlow();
+          setIsReady(true);
+        }}
+        disabled={isLoading}
+      >
+        {isLoading ? 'Loading AI...' : 'Enable AI Detection'}
+      </button>
+    );
+  }
+
+  return <PersonDetectionCore videoSrc={videoSrc} onDetection={onDetection} />;
+};
+```
+
+### 5. API请求超时优化
+**影响**: 改善用户体验，减少长时间等待
+
+```typescript
+// api/request.ts - 修改超时配置
+const request = axios.create({
+  baseURL: BASE_URL,
+  timeout: 30000, // ✅ 改为30秒，原来是300秒
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+```
+
+### 6. 轮询频率优化
+**影响**: 减少服务器负载，提升响应速度
+
+```typescript
+// 找到轮询逻辑，修改间隔时间
+const getRefreshInterval = () => {
+  const hasRunningTasks = /* 检查逻辑 */;
+  
+  if (hasRunningTasks) {
+    return 15000; // ✅ 改为15秒，原来是10秒
+  } else {
+    return 60000; // ✅ 改为60秒，原来是30秒
+  }
+};
+```
+
+## ⚡ 中期优化（1天内）
+
+### 7. Ant Design 按需导入
+
+**步骤1**: 安装插件
+```bash
+npm install babel-plugin-import --save-dev
+```
+
+**步骤2**: 配置babel
+```javascript
+// .babelrc
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    ["import", {
+      "libraryName": "antd",
+      "libraryDirectory": "es",
+      "style": "css"
+    }]
+  ]
+}
+```
+
+**步骤3**: 更新导入方式
+```typescript
+// ❌ 当前方式
+import { Button, Modal, Input } from 'antd';
+
+// ✅ 优化方式
+import Button from 'antd/es/button';
+import Modal from 'antd/es/modal';
+import Input from 'antd/es/input';
+```
+
+### 8. Three.js 条件加载
+**影响**: 减少31MB非必要加载
+
+```typescript
+// components/vanta-halo-background.tsx
+import { lazy, Suspense } from 'react';
+
+// 检查设备性能
+const shouldLoadThreeJS = () => {
+  const hardwareConcurrency = navigator.hardwareConcurrency || 2;
+  const deviceMemory = (navigator as any).deviceMemory || 4;
+  
+  return hardwareConcurrency >= 4 && deviceMemory >= 4;
+};
+
+const VantaBackground = lazy(() => {
+  if (!shouldLoadThreeJS()) {
+    return import('./StaticBackground'); // 静态背景降级
+  }
+  return import('./VantaHaloBackground');
+});
+
+export const BackgroundWrapper = () => (
+  <Suspense fallback={<div className="bg-gradient-to-br from-blue-900 to-purple-900" />}>
+    <VantaBackground />
+  </Suspense>
+);
+```
+
+### 9. 构建配置优化
+**影响**: 改善代码分割，减少bundle大小
+
+```javascript
+// next.config.js - 添加生产环境优化
+const nextConfig = {
+  webpack: (config, { dev, isServer }) => {
+    // 生产环境也需要优化
+    if (!dev && !isServer) {
+      config.optimization.splitChunks = {
+        chunks: 'all',
+        cacheGroups: {
+          // 分离大型第三方库
+          tensorflow: {
+            test: /[\\/]node_modules[\\/]@tensorflow/,
+            name: 'tensorflow',
+            chunks: 'async',
+            priority: 30,
+          },
+          antd: {
+            test: /[\\/]node_modules[\\/]antd/,
+            name: 'antd',
+            chunks: 'all',
+            priority: 25,
+          },
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'vendors',
+            chunks: 'all',
+            priority: 20,
+          },
+        },
+      };
+    }
+    
+    return config;
+  },
+  
+  // 启用压缩和优化
+  compress: true,
+  optimizeFonts: true,
+  
+  experimental: {
+    optimizeCss: true,
+  },
+};
+```
+
+## 📊 验证优化效果
+
+### 快速测试命令
+```bash
+# 1. 构建并分析bundle
+ANALYZE=true npm run build
+
+# 2. 启动应用
+npm start
+
+# 3. 在另一个终端运行Lighthouse
+npx lighthouse http://localhost:3000 --output=html --output-path=lighthouse-report.html
+
+# 4. 检查bundle大小
+ls -lh .next/static/chunks/ | head -10
+```
+
+### 关键指标检查
+- **首屏加载时间**: 应该从8-15秒降到4-6秒
+- **Bundle大小**: 主要chunk应该从500KB+降到300KB以下
+- **Lighthouse性能分数**: 应该从30-50分提升到60-70分
+- **控制台错误**: JSON解析错误应该大幅减少
+
+## 🚀 预期效果
+
+实施这些快速修复后，你应该看到：
+
+| 指标 | 优化前 | 优化后 | 提升 |
+|------|--------|--------|------|
+| **首屏加载** | 8-15秒 | 4-6秒 | **50%** ⬇️ |
+| **Bundle大小** | 2-3MB | 1.5-2MB | **30%** ⬇️ |
+| **资源加载** | 300-500MB | 100-200MB | **60%** ⬇️ |
+| **Lighthouse分数** | 30-50 | 60-70 | **40%** ⬆️ |
+
+## ⚠️ 注意事项
+
+1. **备份代码**: 修改前请确保代码已提交到git
+2. **测试功能**: 每个修改后都要测试相关功能是否正常
+3. **分步实施**: 建议一个一个修改，避免同时修改太多
+4. **监控错误**: 修改后注意观察控制台是否有新的错误
+
+## 🆘 遇到问题？
+
+### 常见问题解决
+
+**Q: 图片优化后显示异常？**
+A: 检查图片路径和域名配置，确保CDN域名已添加到配置中
+
+**Q: TensorFlow动态加载失败？**
+A: 检查网络连接，可能需要添加错误处理和重试机制
+
+**Q: Ant Design样式丢失？**
+A: 确保babel配置正确，可能需要重启开发服务器
+
+**Q: 构建失败？**
+A: 检查webpack配置语法，确保所有依赖都已安装
+
+### 紧急回滚
+如果优化后出现严重问题，可以快速回滚：
+
+```bash
+# 回滚到上一个提交
+git reset --hard HEAD~1
+
+# 或者撤销特定文件的修改
+git checkout HEAD -- next.config.js
+git checkout HEAD -- components/pages/home-page2.tsx
+```
+
+---
+
+**开始优化吧！** 🚀 这些修改可以立即带来显著的性能提升。