diff --git a/.gitignore b/.gitignore
index 43903825..43d5506e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,8 @@ storage/
 __pycache__/
 .claude/
 .vscode/
+.trae/
+dist/
 
 # 使用通配符
 *.log
diff --git a/folder-alias.json b/folder-alias.json
new file mode 100644
index 00000000..9e26dfee
--- /dev/null
+++ b/folder-alias.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/private-folder-alias.json b/private-folder-alias.json
new file mode 100644
index 00000000..9e26dfee
--- /dev/null
+++ b/private-folder-alias.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/video-gen-api/.env b/video-gen-api/.env
index 4c3bba2f..d64f4fbb 100644
--- a/video-gen-api/.env
+++ b/video-gen-api/.env
@@ -8,7 +8,7 @@ SECRET_KEY=local-dev-secret-key-not-for-production
 DATABASE_URL=postgresql+asyncpg://videogen:7k33pnXdPL62Yyb4@180.184.42.66:5432/videogen
 
 # Redis (leave empty to disable - rate limiting and captcha will use in-memory fallback)
-REDIS_URL=redis://localhost:6379/0
+REDIS_URL=redis://localhost:6379/3
 
 # JWT
 JWT_ALGORITHM=HS256
diff --git a/video-gen-app/folder-alias.json b/video-gen-app/folder-alias.json
new file mode 100644
index 00000000..9e26dfee
--- /dev/null
+++ b/video-gen-app/folder-alias.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/video-gen-app/package-lock.json b/video-gen-app/package-lock.json
index 488e1e75..48e91e00 100644
--- a/video-gen-app/package-lock.json
+++ b/video-gen-app/package-lock.json
@@ -12,6 +12,7 @@
         "antd": "^6.3.7",
         "dayjs": "^1.11.20",
         "plyr-react": "^6.0.0",
+        "qrcode.react": "^4.2.0",
         "react": "^19.2.5",
         "react-dom": "^19.2.5",
         "react-router-dom": "^7.15.0",
@@ -3997,6 +3998,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/video-gen-app/package.json b/video-gen-app/package.json
index 0b264020..cc5a4029 100644
--- a/video-gen-app/package.json
+++ b/video-gen-app/package.json
@@ -14,6 +14,7 @@
     "antd": "^6.3.7",
     "dayjs": "^1.11.20",
     "plyr-react": "^6.0.0",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-router-dom": "^7.15.0",
diff --git a/video-gen-app/private-folder-alias.json b/video-gen-app/private-folder-alias.json
new file mode 100644
index 00000000..9e26dfee
--- /dev/null
+++ b/video-gen-app/private-folder-alias.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/video-gen-app/src/App.tsx b/video-gen-app/src/App.tsx
index d5b10537..57372339 100644
--- a/video-gen-app/src/App.tsx
+++ b/video-gen-app/src/App.tsx
@@ -8,10 +8,24 @@ import ProjectsPage from './pages/ProjectsPage';
 import GeneratePage from './pages/GeneratePage';
 import RecordsPage from './pages/RecordsPage';
 import CreditsPage from './pages/CreditsPage';
+import GenerateConver from './pages/GenerateConver';
+import InitialReplication from './pages/InitialReplication';
+import RemoveLens from './pages/RemoveLens';
+
+
+
+
 import { useAuthStore } from './store/useAuthStore';
 
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  const { user, loading } = useAuthStore();
+  const { user, loading, checkAuth } = useAuthStore();
+
+  useEffect(() => {
+    const token = localStorage.getItem('auth_token');
+    if (!token && !loading && !user) {
+      window.location.href = '/login';
+    }
+  }, [user, loading]);
 
   if (loading) {
     return (
@@ -20,11 +34,10 @@ const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
       </div>
     );
   }
-
   if (!user) {
-    return <Navigate to="/login" replace />;
+    window.location.href = '/login';
+    return null;
   }
-
   return <>{children}</>;
 };
 
@@ -75,6 +88,12 @@ const App = () => {
               <Route path="projects/:projectId/generate" element={<GeneratePage />} />
               <Route path="records" element={<RecordsPage />} />
               <Route path="credits" element={<CreditsPage />} />
+              <Route path="conversation" element={<GenerateConver />} />
+              <Route path="initial" element={<InitialReplication />} />
+              <Route path="removelens" element={<RemoveLens />} />
+
+
+
             </Route>
             <Route path="*" element={<Navigate to="/projects" replace />} />
           </Routes>
diff --git a/video-gen-app/src/api/client.ts b/video-gen-app/src/api/client.ts
index c23a4d7a..9deb7932 100644
--- a/video-gen-app/src/api/client.ts
+++ b/video-gen-app/src/api/client.ts
@@ -106,10 +106,11 @@ export async function apiRequest<T>(path: string, options: RequestOptions = {}):
   }
 
   // Handle error responses
-  if (!res.ok) {
+if (!res.ok) {
     const msg = parsed?.detail || `请求失败 (${res.status})`;
     if (res.status === 401) {
       clearToken();
+      window.location.href = '/login';
     }
     throw new Error(msg);
   }
diff --git a/video-gen-app/src/api/index.ts b/video-gen-app/src/api/index.ts
index 90fee567..3c833cf1 100644
--- a/video-gen-app/src/api/index.ts
+++ b/video-gen-app/src/api/index.ts
@@ -77,11 +77,15 @@ export async function optimizePrompt(
 ): Promise<OptimizeResult> {
   if (USE_MOCK) return mock.mockOptimizePrompt(projectId, params as any);
   return api.post('/generation-records/optimize', {
-    project_id: projectId,
+    project_id: projectId,//项目id
+    gen_type:params.genType,//生成类型
     prompt: params.prompt,
     duration: params.duration,
     references: params.references || null,
     idempotency_key: params.idempotencyKey || null,
+    image_size: params.image_size || null,
+    image_proportion: params.image_proportion || null,
+    image_px: params.image_px || null,
   });
 }
 
@@ -160,8 +164,13 @@ export async function getSiteInfo(): Promise<{ siteName: string; siteLogo: strin
 
 export async function getVideoEngines(): Promise<{ items: { id: string; name: string; provider: string; supportedRatios: string[]; supportedResolutions: string[]; supportedDurations: number[] }[] }> {
   if (USE_MOCK) return { items: [{ id: 'mock', name: 'Seedance', provider: 'seedance', supportedRatios: ['16:9', '9:16', '1:1', '4:3', '3:4', '21:9'], supportedResolutions: ['480p', '720p', '1080p'], supportedDurations: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] }] };
-  return api.get('/video-engines', false);
+  return api.get('/video-engines');
 }
+// 参数选择（图片）Parameters
+export async function getParameters(): Promise<any[]> {
+  return api.get('/image-engines');
+}
+
 
 // ── SMS ───────────────────────────────────────────────────
 
@@ -266,3 +275,11 @@ export async function getMenuConfigs(): Promise<any[]> {
 export async function getRechargePackages(): Promise<any[]> {
   return api.get('/recharge-packages');
 }
+
+
+export async function getCreditRatios(): Promise<any[]> {
+  return api.get('/credits/ratios');
+}
+
+
+
diff --git a/video-gen-app/src/api/mock.ts b/video-gen-app/src/api/mock.ts
index af722496..88b8669d 100644
--- a/video-gen-app/src/api/mock.ts
+++ b/video-gen-app/src/api/mock.ts
@@ -3,6 +3,7 @@ import type {
   CreditRecord,
   Project,
   GenerationRecord,
+  GenerateParams,
   OptimizeParams,
   OptimizeResult,
   LoginParams,
@@ -55,10 +56,14 @@ let MOCK_RECORDS: GenerationRecord[] = [
     resolution: '1080p',
     status: 'completed',
     videoUrl: 'https://example.com/video1.mp4',
-    textCreditsCost: 10,
-    textTokensUsed: 850,
     creditsCost: 120,
-    videoTokensUsed: 0,
+    textCreditsCost: 0,
+    textTokensUsed: 0,
+    videoTokensUsed: 120,
+    imageSize: '1080p',
+    imageProportion: '9:16',
+    imagePx: '1080x1920',
+    imageUrl: '',
     createdAt: '2026-04-29 14:22:00',
     generatedAt: '2026-04-29 14:25:00',
   },
@@ -73,10 +78,14 @@ let MOCK_RECORDS: GenerationRecord[] = [
     resolution: '1080p',
     status: 'completed',
     videoUrl: 'https://example.com/video2.mp4',
-    textCreditsCost: 8,
-    textTokensUsed: 720,
     creditsCost: 80,
-    videoTokensUsed: 0,
+    textCreditsCost: 0,
+    textTokensUsed: 0,
+    videoTokensUsed: 80,
+    imageSize: '1080p',
+    imageProportion: '16:9',
+    imagePx: '1920x1080',
+    imageUrl: '',
     createdAt: '2026-04-30 09:15:00',
     generatedAt: '2026-04-30 09:18:00',
   },
@@ -90,10 +99,14 @@ let MOCK_RECORDS: GenerationRecord[] = [
     aspectRatio: '16:9',
     resolution: '4K',
     status: 'prompt_optimized',
-    textCreditsCost: 12,
-    textTokensUsed: 960,
     creditsCost: 120,
-    videoTokensUsed: 0,
+    textCreditsCost: 0,
+    textTokensUsed: 0,
+    videoTokensUsed: 120,
+    imageSize: '4K',
+    imageProportion: '16:9',
+    imagePx: '3840x2160',
+    imageUrl: '',
     createdAt: '2026-05-01 16:40:00',
   },
   {
@@ -106,10 +119,14 @@ let MOCK_RECORDS: GenerationRecord[] = [
     aspectRatio: '16:9',
     resolution: '4K',
     status: 'prompt_optimized',
-    textCreditsCost: 10,
-    textTokensUsed: 880,
     creditsCost: 100,
-    videoTokensUsed: 0,
+    textCreditsCost: 0,
+    textTokensUsed: 0,
+    videoTokensUsed: 100,
+    imageSize: '4K',
+    imageProportion: '16:9',
+    imagePx: '3840x2160',
+    imageUrl: '',
     createdAt: '2026-05-03 08:30:00',
   },
 ];
@@ -169,15 +186,14 @@ export async function mockDeleteProject(id: string): Promise<void> {
 export async function mockOptimizePrompt(
   projectId: string,
   params: OptimizeParams
-): Promise<OptimizeResult> {
+): Promise<OptimizeResult & { record: GenerationRecord }> {
   await delay(1500);
 
   const project = MOCK_PROJECTS.find((p) => p.id === projectId);
-  const textCredits = Math.max(1, Math.ceil(params.prompt.length * 0.3));
-  const textTokens = Math.round(params.prompt.length * 1.2);
+  const cost = Math.round(80 + params.prompt.length * 0.5 + params.duration * 2);
 
   if (currentUser) {
-    currentUser.credits -= textCredits;
+    currentUser.credits -= cost;
   }
 
   const optimizedPromptMap: Record<string, string> = {
@@ -195,7 +211,7 @@ export async function mockOptimizePrompt(
   if (matched) {
     optimizedPrompt = optimizedPromptMap[matched];
   } else {
-    optimizedPrompt = `精心构图的画面中，${params.prompt}。采用电影级镜头语言，自然光线与人工光源完美结合，营造出沉浸式视觉体验。画面色彩饱满而真实，细节丰富。运镜流畅自然，节奏张弛有度，完美适配${params.duration}秒时长。`;
+    optimizedPrompt = `精心构图的画面中，${params.prompt}。采用电影级镜头语言，自然光线与人工光源完美结合，营造出沉浸式视觉体验。画面色彩饱满而真实，细节丰富。运镜流畅自然，节奏张弛有度，完美适配${params.duration}秒时长。${params.aspectRatio}比例构图，${params.resolution}高清画质呈现。`;
   }
 
   const record: GenerationRecord = {
@@ -205,17 +221,23 @@ export async function mockOptimizePrompt(
     originalPrompt: params.prompt,
     optimizedPrompt,
     duration: params.duration,
+    aspectRatio: params.aspectRatio as any,
+    resolution: params.resolution as any,
     status: 'prompt_optimized',
-    textCreditsCost: textCredits,
-    textTokensUsed: textTokens,
-    creditsCost: 0,
+    creditsCost: cost,
+    textCreditsCost: cost,
+    textTokensUsed: 0,
     videoTokensUsed: 0,
+    imageSize: params.resolution || '1080p',
+    imageProportion: params.aspectRatio || '16:9',
+    imagePx: '1920x1080',
+    imageUrl: '',
     createdAt: new Date().toLocaleString('zh-CN'),
   };
 
   MOCK_RECORDS.unshift(record);
 
-  return { optimizedPrompt, textCreditsCost: textCredits, textTokensUsed: textTokens, record };
+  return { optimizedPrompt, textCreditsCost: cost, textTokensUsed: 0, record };
 }
 
 export async function mockGenerateVideo(recordId: string): Promise<GenerationRecord> {
@@ -241,10 +263,10 @@ export async function mockGetGenerationRecords(projectId?: string): Promise<Gene
 // ── Admin Mock Data ───────────────────────────────────
 
 const MOCK_ADMIN_USERS: AdminUser[] = [
-  { id: 'u-001', username: 'videomaker', email: 'demo@videogen.ai', credits: 2680, isActive: true, isAdmin: false, userType: 'normal', createdAt: '2026-04-15', lastLoginAt: '2026-05-06 14:30' },
-  { id: 'u-002', username: 'designer', email: 'designer@example.com', credits: 520, isActive: true, isAdmin: false, userType: 'normal', createdAt: '2026-04-20', lastLoginAt: '2026-05-05 09:12' },
-  { id: 'u-003', username: 'marketer', email: 'mkt@company.com', phone: '13800138000', credits: 0, isActive: true, isAdmin: false, userType: 'normal', createdAt: '2026-04-25', lastLoginAt: '2026-05-04 16:45' },
-  { id: 'u-004', username: 'editor', email: 'editor@studio.com', credits: 1500, isActive: false, isAdmin: false, userType: 'normal', createdAt: '2026-04-10', lastLoginAt: '2026-04-28 11:20' },
+  { id: 'u-001', username: 'videomaker', email: 'demo@videogen.ai', credits: 2680, isActive: true, isAdmin: false, userType: 'regular', createdAt: '2026-04-15', lastLoginAt: '2026-05-06 14:30' },
+  { id: 'u-002', username: 'designer', email: 'designer@example.com', credits: 520, isActive: true, isAdmin: false, userType: 'regular', createdAt: '2026-04-20', lastLoginAt: '2026-05-05 09:12' },
+  { id: 'u-003', username: 'marketer', email: 'mkt@company.com', phone: '13800138000', credits: 0, isActive: true, isAdmin: false, userType: 'regular', createdAt: '2026-04-25', lastLoginAt: '2026-05-04 16:45' },
+  { id: 'u-004', username: 'editor', email: 'editor@studio.com', credits: 1500, isActive: false, isAdmin: false, userType: 'regular', createdAt: '2026-04-10', lastLoginAt: '2026-04-28 11:20' },
   { id: 'u-005', username: 'admin', email: 'admin@videogen.ai', credits: 10000, isActive: true, isAdmin: true, userType: 'admin', createdAt: '2026-04-01', lastLoginAt: '2026-05-07 08:00' },
 ];
 
diff --git a/video-gen-app/src/components/Layout/AppLayout.tsx b/video-gen-app/src/components/Layout/AppLayout.tsx
index 70aabde0..6e596a0d 100644
--- a/video-gen-app/src/components/Layout/AppLayout.tsx
+++ b/video-gen-app/src/components/Layout/AppLayout.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { Layout, Avatar, Dropdown, Space, Modal, Form, Input, message, Tooltip, Tag, Button, Typography } from 'antd';
+import { QRCodeSVG } from 'qrcode.react';
 import {
   PlayCircleOutlined,
   WalletOutlined,
@@ -18,6 +19,7 @@ import {
   FireFilled,
   CrownFilled,
   BankFilled,
+  QrcodeOutlined,
   CloseOutlined,
 } from '@ant-design/icons';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
@@ -81,6 +83,8 @@ const AppLayout: React.FC = () => {
   const [unreadCount, setUnreadCount] = useState(0);
   const [siteName, setSiteName] = useState('VideoGen.AI');
   const [siteLogo, setSiteLogo] = useState('');
+  const [qrCodeModalOpen, setQrCodeModalOpen] = useState(false);
+  const [currentPaymentInfo, setCurrentPaymentInfo] = useState<{ price: number; credits: number; qrCode: string } | null>(null);
 
   useEffect(() => {
     getSiteInfo().then(info => {
@@ -240,7 +244,7 @@ const AppLayout: React.FC = () => {
         </div>
 
         {/* Menu */}
-        <div style={{ flex: 1, padding: '8px 8px', overflow: 'hidden' }}>
+        <div style={{ flex: 1, padding: '8px 8px', overflow: 'auto' }}>
           {!collapsed && (
             <div style={{ color: 'rgba(148,163,184,0.4)', fontSize: 11, fontWeight: 600, padding: '8px 12px 6px', letterSpacing: 1 }}>
               导航
@@ -500,7 +504,27 @@ const AppLayout: React.FC = () => {
           <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-end' }}>
             <Button size="large" onClick={() => { setRechargeModalOpen(false); setSelectedPlan(null); }} style={{ borderRadius: 10, marginRight: 12 }}>取消</Button>
             <Button type="primary" size="large" disabled={!selectedPlan}
-              onClick={() => { message.success('支付功能对接后端后开放'); setRechargeModalOpen(false); setSelectedPlan(null); }}
+              onClick={() => {
+                const plan = rechargeOptions.find((opt: any) => opt.id === selectedPlan);
+                if (plan) {
+                  const totalCredits = (plan.credits || 0) + (plan.bonus_credits || plan.bonusCredits || 0);
+                  // 生成随机支付内容（模拟微信支付订单号）
+                  const orderId = `WX${Date.now()}${Math.random().toString(36).substr(2, 6).toUpperCase()}`;
+                  const paymentContent = JSON.stringify({
+                    orderId,
+                    amount: plan.price,
+                    credits: totalCredits,
+                    timestamp: Date.now()
+                  });
+                  setCurrentPaymentInfo({
+                    price: plan.price,
+                    credits: totalCredits,
+                    qrCode: paymentContent
+                  });
+                  setRechargeModalOpen(false);
+                  setQrCodeModalOpen(true);
+                }
+              }}
               style={{
                 borderRadius: 10, fontWeight: 600,
                 background: selectedPlan ? 'linear-gradient(135deg, #6366f1, #8b5cf6)' : '#d1d5db',
@@ -512,6 +536,125 @@ const AppLayout: React.FC = () => {
         </div>
       </Modal>
 
+      {/* QR Code Payment Modal */}
+      <Modal
+        open={qrCodeModalOpen}
+        onCancel={() => { setQrCodeModalOpen(false); setCurrentPaymentInfo(null); }}
+        footer={null}
+        width={400}
+        closable={false}
+        styles={{
+          body: { padding: 0, borderRadius: 16, overflow: 'hidden' },
+        }}
+      >
+        <div style={{ padding: '24px' }}>
+          {/* Header */}
+          <div style={{ textAlign: 'center', marginBottom: 24 }}>
+            <div style={{
+              width: 48, height: 48,
+              background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+              borderRadius: 16,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              margin: '0 auto 12px',
+            }}>
+              <QrcodeOutlined style={{ fontSize: 24, color: '#fff' }} />
+            </div>
+            <Typography.Title level={4} style={{ margin: 0 }}>微信支付</Typography.Title>
+            <Typography.Text style={{ color: '#94a3b8', fontSize: 13 }}>请使用微信扫描二维码完成支付</Typography.Text>
+          </div>
+
+          {/* QR Code */}
+          <div style={{
+            background: '#fff',
+            borderRadius: 16,
+            padding: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
+          }}>
+            <div style={{
+              width: 180,
+              height: 180,
+              borderRadius: 12,
+              overflow: 'hidden',
+              background: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+              {currentPaymentInfo && (
+                <QRCodeSVG
+                  value={currentPaymentInfo.qrCode}
+                  size={160}
+                  level="M"
+                  includeMargin={false}
+                />
+              )}
+            </div>
+            <div style={{ marginTop: 16, textAlign: 'center' }}>
+              <div style={{
+                fontSize: 28,
+                fontWeight: 700,
+                color: '#1a1a2e',
+              }}>
+                ¥{currentPaymentInfo?.price || 0}
+              </div>
+              <div style={{
+                fontSize: 13,
+                color: '#64748b',
+                marginTop: 4,
+              }}>
+                购买 {currentPaymentInfo?.credits || 0} 积分
+              </div>
+            </div>
+          </div>
+
+          {/* Tips */}
+          <div style={{ marginTop: 20, padding: 16, background: '#fef3c7', borderRadius: 12 }}>
+            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
+              <div style={{ fontSize: 16, marginTop: -2 }}>💡</div>
+              <div style={{ fontSize: 13, color: '#92400e' }}>
+                <div style={{ fontWeight: 500, marginBottom: 4 }}>支付提示</div>
+                <ul style={{ margin: 0, paddingLeft: 16 }}>
+                  <li style={{ marginBottom: 2 }}>请在支付后等待页面自动跳转</li>
+                  <li>如支付成功但未到账，请联系客服</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer Buttons */}
+          <div style={{ marginTop: 20, display: 'flex', gap: 12 }}>
+            <Button
+              size="large"
+              onClick={() => { setQrCodeModalOpen(false); setCurrentPaymentInfo(null); }}
+              style={{ flex: 1, borderRadius: 10 }}
+            >
+              取消支付
+            </Button>
+            <Button
+              type="primary"
+              size="large"
+              onClick={() => {
+                message.success('支付成功！积分已到账');
+                setQrCodeModalOpen(false);
+                setCurrentPaymentInfo(null);
+                setSelectedPlan(null);
+              }}
+              style={{
+                flex: 1,
+                borderRadius: 10,
+                background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+                border: 'none',
+              }}
+            >
+              已完成支付
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
       {/* Message Center Modal */}
       <Modal
         open={msgModalOpen}
diff --git a/video-gen-app/src/index.css b/video-gen-app/src/index.css
index 03e45f8a..1b0d4315 100644
--- a/video-gen-app/src/index.css
+++ b/video-gen-app/src/index.css
@@ -210,11 +210,133 @@ html, body {
 
   /* Video player fits mobile */
   video { max-width: 100% !important; }
+
+  /* InitialReplication page */
+  .replication-container {
+    flex-direction: column !important;
+    gap: 16px !important;
+    padding: 16px !important;
+    height: calc(100vh - 64px) !important;
+  }
+  .replication-preview {
+    width: 100% !important;
+    height: 30vh !important;
+    border-radius: 12px !important;
+  }
+  .replication-form {
+    width: 100% !important;
+    height: auto !important;
+    max-height: calc(70vh - 32px) !important;
+    border-radius: 12px !important;
+  }
+  .replication-form-content {
+    padding: 16px !important;
+    max-height: calc(70vh - 64px) !important;
+  }
 }
 
 /* ── Date Display ──────────────────────── */
 .date-display { font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; }
 
+/* ── Small Mobile Breakpoint (max-width: 480px) ────────────── */
 @media (max-width: 480px) {
+  /* Base styles */
+  html, body { font-size: 14px !important; }
+
+  /* Login page */
   .login-card { width: 100% !important; }
+  .login-right { padding: 16px !important; }
+
+  /* Header adjustments */
+  .gen-header { padding: 12px 14px !important; }
+
+  /* Form elements */
+  .gen-form-row { gap: 8px !important; }
+  
+  /* Button adjustments */
+  .ant-btn { height: 36px !important; font-size: 13px !important; padding: 0 12px !important; }
+  
+  /* Input adjustments */
+  .ant-input, .ant-input-affix-wrapper, .ant-select-selector { 
+    height: 36px !important; 
+    font-size: 13px !important;
+  }
+
+  /* Card padding */
+  .ant-card { padding: 12px !important; }
+
+  /* Mobile bottom nav adjustments */
+  .mobile-bottom-nav { height: 56px !important; }
+  .mobile-bottom-nav .nav-item .nav-icon { font-size: 18px !important; }
+  .mobile-bottom-nav .nav-item { font-size: 9px !important; gap: 2px !important; }
+
+  /* InitialReplication page - Small Mobile */
+  .replication-container {
+    padding: 12px !important;
+    gap: 12px !important;
+  }
+  .replication-preview {
+    height: 25vh !important;
+    border-radius: 10px !important;
+  }
+  .replication-form-content {
+    padding: 12px !important;
+  }
+  .replication-form-content .ant-btn {
+    height: 36px !important;
+    font-size: 13px !important;
+  }
+  .replication-form-content .ant-input,
+  .replication-form-content .ant-input-affix-wrapper {
+    height: 36px !important;
+    font-size: 13px !important;
+  }
+
+  /* Video and image containers */
+  video, img { 
+    max-height: 160px !important; 
+    border-radius: 6px !important;
+  }
+
+  /* Upload areas */
+  .upload-area { padding: 12px !important; }
+
+  /* Spacing adjustments */
+  .mobile-p-16 { padding: 12px !important; }
+  .mobile-gap-12 { gap: 8px !important; }
+
+  /* Font size adjustments */
+  h1 { font-size: 18px !important; }
+  h2 { font-size: 16px !important; }
+  h3 { font-size: 14px !important; }
+  p { font-size: 12px !important; }
+
+  /* Button text */
+  .btn-text-sm { font-size: 12px !important; }
+
+  /* Margin adjustments */
+  .mobile-mb-8 { margin-bottom: 8px !important; }
+  .mobile-mb-12 { margin-bottom: 12px !important; }
+}
+
+/* ── Tablet Breakpoint (768px to 1024px) ────────────── */
+@media (min-width: 769px) and (max-width: 1024px) {
+  /* Desktop sidebar adjustments */
+  .desktop-sidebar { width: 180px !important; }
+  .desktop-content { margin-left: 180px !important; }
+
+  /* Card max-width */
+  .ant-card { max-width: calc(50% - 8px) !important; }
+
+  /* Font adjustments */
+  html, body { font-size: 15px !important; }
+}
+
+/* ── Large Desktop Breakpoint (min-width: 1200px) ────────────── */
+@media (min-width: 1200px) {
+  /* Max width container */
+  .max-w-container { max-width: 1400px; margin: 0 auto; }
+
+  /* Card grid */
+  .card-grid { grid-template-columns: repeat(3, 1fr) !important; }
 }
diff --git a/video-gen-app/src/pages/CreditsPage.tsx b/video-gen-app/src/pages/CreditsPage.tsx
index c28bbe34..2f17e42c 100644
--- a/video-gen-app/src/pages/CreditsPage.tsx
+++ b/video-gen-app/src/pages/CreditsPage.tsx
@@ -23,7 +23,7 @@ const AnimatedNumber: React.FC<{ value: number; duration?: number }> = ({ value,
       const elapsed = now - startTime;
       const progress = Math.min(elapsed / duration, 1);
       const eased = 1 - Math.pow(1 - progress, 3);
-      setDisplay(Math.round(start + diff * eased));
+      setDisplay(start + diff * eased);
       if (progress < 1) ref.current = requestAnimationFrame(animate);
     };
     ref.current = requestAnimationFrame(animate);
diff --git a/video-gen-app/src/pages/GenerateConver.tsx b/video-gen-app/src/pages/GenerateConver.tsx
new file mode 100644
index 00000000..2f339269
--- /dev/null
+++ b/video-gen-app/src/pages/GenerateConver.tsx
@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import {
+  Layout,
+  Button,
+  Input,
+  Select,
+  Upload,
+  message,
+  Space,
+  Typography,
+} from 'antd';
+import {
+  PlusOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  SendOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+
+const { Header, Sider, Content } = Layout;
+const { TextArea } = Input;
+const { Option } = Select;
+const { Text } = Typography;
+
+const AIChatPage: React.FC = () => {
+  // 侧边栏收起/展开状态
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  // 输入框内容
+  const [inputValue, setInputValue] = useState<string>('');
+  // 第一个选择器：文件类型（图片/视频）
+  const [mediaType, setMediaType] = useState<string>('image');
+  // 第二个选择器：1/2/3
+  const [countType, setCountType] = useState<string>('1');
+
+  // 模拟“新对话”点击
+  const handleNewChat = () => {
+    message.info('开启新对话');
+    setInputValue('');
+  };
+
+  // 发送消息
+  const handleSend = () => {
+    if (!inputValue.trim()) {
+      message.warning('请输入内容');
+      return;
+    }
+    console.log('发送消息:', inputValue, mediaType, countType);
+    message.success('消息已发送');
+    setInputValue('');
+  };
+
+  // 文件上传前校验（仅示意）
+  const beforeUpload = (file: File) => {
+    const isImageOrVideo = file.type.startsWith('image/') || file.type.startsWith('video/');
+    if (!isImageOrVideo) {
+      message.error('只能上传图片或视频文件');
+    }
+    return isImageOrVideo;
+  };
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      {/* 左侧边栏 */}
+      <Sider
+        trigger={null}
+        collapsible
+        collapsed={collapsed}
+        width={180}
+        style={{
+          background: '#fff',
+          borderRight: '1px solid #f0f0f0',
+        }}
+      >
+        <div style={{ padding: 16 }}>
+          <Button
+            type="text"
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setCollapsed(!collapsed)}
+            style={{ marginBottom: 16 }}
+          />
+          {!collapsed && (
+            <Button
+              block
+              icon={<PlusOutlined />}
+              onClick={handleNewChat}
+            >
+              新对话
+            </Button>
+          )}
+        </div>
+      </Sider>
+
+      {/* 主内容区 */}
+      <Layout>
+        <Header
+          style={{
+            background: '#fff',
+            padding: '0 16px',
+            borderBottom: '1px solid #f0f0f0',
+          }}
+        >
+          <Text strong>开启创作</Text>
+        </Header>
+
+        <Content
+          style={{
+            margin: 0,
+            background: '#fafafa',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: '24px 16px',
+          }}
+        >
+          {/* 中间提示语 */}
+          <div style={{ marginBottom: 24 }}>
+            <h2 style={{ textAlign: 'center' }}>你好，想创作什么？</h2>
+          </div>
+
+          {/* 底部输入区域 */}
+          <div
+            style={{
+              width: '100%',
+              maxWidth: 700,
+              background: '#fff',
+              borderRadius: 12,
+              border: '1px solid #e8e8e8',
+              padding: 16,
+            }}
+          >
+            <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
+              {/* 文件上传按钮 */}
+              <Upload
+                beforeUpload={beforeUpload}
+                showUploadList={false}
+              >
+                <Button icon={<UploadOutlined />} />
+              </Upload>
+
+              {/* 文本输入框 */}
+              <TextArea
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                placeholder="输入想法、剧本或上传参考，支持“/”使用技能，@添加主体，和Agent一起创作"
+                autoSize={{ minRows: 1, maxRows: 4 }}
+                style={{ flex: 1 }}
+              />
+
+              {/* 发送按钮 */}
+              <Button
+                type="primary"
+                shape="circle"
+                icon={<SendOutlined />}
+                onClick={handleSend}
+              />
+            </div>
+
+            {/* 底部两个选择器 */}
+            <Space size="middle">
+              {/* 第一个选择器：图片/视频 */}
+              <Select
+                value={mediaType}
+                onChange={(val) => setMediaType(val)}
+                style={{ width: 120 }}
+              >
+                <Option value="image">图片</Option>
+                <Option value="video">视频</Option>
+              </Select>
+
+              {/* 第二个选择器：1/2/3 */}
+              <Select
+                value={countType}
+                onChange={(val) => setCountType(val)}
+                style={{ width: 120 }}
+              >
+                <Option value="1">1</Option>
+                <Option value="2">2</Option>
+                <Option value="3">3</Option>
+              </Select>
+            </Space>
+          </div>
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default AIChatPage;
diff --git a/video-gen-app/src/pages/GeneratePage.tsx b/video-gen-app/src/pages/GeneratePage.tsx
index 8680fbc2..2ea205c3 100644
--- a/video-gen-app/src/pages/GeneratePage.tsx
+++ b/video-gen-app/src/pages/GeneratePage.tsx
@@ -1,45 +1,90 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
-  Button, Card, Form, Input, Modal,
-  message, Space, Tag, Tooltip, Typography, Upload, Image,
-} from 'antd';
+  Button,
+  Card,
+  Form,
+  Input,
+  Modal,
+  Radio,
+  message,
+  Space,
+  Tag,
+  Tooltip,
+  Typography,
+  Upload,
+  Image,
+} from "antd";
 import {
-  ArrowLeftOutlined, PlayCircleOutlined, ClockCircleOutlined,
-  CheckCircleOutlined, LoadingOutlined, ThunderboltOutlined,
-  CopyOutlined, CloseCircleOutlined, EditOutlined,
-  RocketOutlined, WalletOutlined,
-  CaretRightOutlined, CaretDownOutlined, VideoCameraOutlined,
-  DownloadOutlined, DeleteOutlined,
+  ArrowLeftOutlined,
+  PlayCircleOutlined,
+  ClockCircleOutlined,
+  CheckCircleOutlined,
+  LoadingOutlined,
+  ThunderboltOutlined,
+  CopyOutlined,
+  CloseCircleOutlined,
+  EditOutlined,
+  RocketOutlined,
+  CaretRightOutlined,
+  CaretDownOutlined,
+  VideoCameraOutlined,
+  DownloadOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useAppStore } from '../store/useAppStore';
-import { useAuthStore } from '../store/useAuthStore';
-import type { GenerationRecord, AspectRatio, Resolution, MediaReference, OptionGroup } from '../types';
-import { getIndustries, getVideoEngines, uploadImage, uploadVideo, deleteUpload, updateRecordPrompt } from '../api';
-import { formatDate } from '../utils/formatDate';
+  PictureOutlined,
+  SwapOutlined,
+} from "@ant-design/icons";
+import { useNavigate, useParams } from "react-router-dom";
+import { useAppStore } from "../store/useAppStore";
+import { useAuthStore } from "../store/useAuthStore";
+import type {
+  GenerationRecord,
+  AspectRatio,
+  Resolution,
+  MediaReference,
+  OptionGroup,
+} from "../types";
+import {
+  getIndustries,
+  getParameters,
+  getVideoEngines,
+  uploadImage,
+  uploadVideo,
+  deleteUpload,
+  updateRecordPrompt,
+  getCreditRatios,
+  login,
+} from "../api";
+import { formatDate } from "../utils/formatDate";
+import { generateUUID } from "../utils/uuid";
 
-const calcVideoCredits = (duration: number, resolution: Resolution): number => {
-  const configs: Record<string, { base: number; perSecond: number; ratio: number }> = {
-    '480p': { base: 50, perSecond: 1, ratio: 0.8 },
-    '720p': { base: 80, perSecond: 2, ratio: 1.0 },
-    '1080p': { base: 120, perSecond: 3, ratio: 1.5 },
-  };
-  const cfg = configs[resolution] || configs['720p'];
-  return Math.round((cfg.base + cfg.perSecond * duration) * cfg.ratio);
-};
+// const calcVideoCredits = (duration: number, resolution: Resolution): number => {
+//   const configs: Record<
+//     string,
+//     { base: number; perSecond: number; ratio: number }
+//   > = {
+//     "480p": { base: 50, perSecond: 1, ratio: 0.8 },
+//     "720p": { base: 80, perSecond: 2, ratio: 1.0 },
+//     "1080p": { base: 120, perSecond: 3, ratio: 1.5 },
+//   };
+//   const cfg = configs[resolution] || configs["720p"];
+//   return Math.round((cfg.base + cfg.perSecond * duration) * cfg.ratio);
+// };
 
 /** Video thumbnail: captures a frame at 1s and shows duration */
-const VideoThumb: React.FC<{ src: string; width?: number; height?: number }> = ({ src, width = 48, height = 48 }) => {
+const VideoThumb: React.FC<{
+  src: string;
+  width?: number;
+  height?: number;
+}> = ({ src, width = 48, height = 48 }) => {
   const [thumbnail, setThumbnail] = useState<string | null>(null);
   const [duration, setDuration] = useState<number | null>(null);
 
   useEffect(() => {
-    const video = document.createElement('video');
+    const video = document.createElement("video");
     video.muted = true;
-    video.preload = 'metadata';
-    video.crossOrigin = 'anonymous';
+    video.preload = "metadata";
+    video.crossOrigin = "anonymous";
 
     const onMeta = () => {
       setDuration(video.duration);
@@ -47,39 +92,78 @@ const VideoThumb: React.FC<{ src: string; width?: number; height?: number }> = (
     };
     const onSeeked = () => {
       try {
-        const canvas = document.createElement('canvas');
+        const canvas = document.createElement("canvas");
         canvas.width = width * 2;
         canvas.height = height * 2;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
         if (ctx) {
           ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-          setThumbnail(canvas.toDataURL('image/jpeg', 0.7));
+          setThumbnail(canvas.toDataURL("image/jpeg", 0.7));
         }
-      } catch { /* CORS */ }
+      } catch {
+        /* CORS */
+      }
     };
 
-    video.addEventListener('loadedmetadata', onMeta);
-    video.addEventListener('seeked', onSeeked);
+    video.addEventListener("loadedmetadata", onMeta);
+    video.addEventListener("seeked", onSeeked);
     video.src = src;
-    return () => { video.removeEventListener('loadedmetadata', onMeta); video.removeEventListener('seeked', onSeeked); };
+    return () => {
+      video.removeEventListener("loadedmetadata", onMeta);
+      video.removeEventListener("seeked", onSeeked);
+    };
   }, [src, width, height]);
 
   const fmt = (s: number) => `${Math.round(s)}s`;
 
   return (
-    <div style={{ width: '100%', height: '100%', position: 'relative', background: '#1a1a2e' }}>
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        background: "#1a1a2e",
+      }}
+    >
       {thumbnail ? (
-        <img src={thumbnail} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+        <img
+          src={thumbnail}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block",
+          }}
+        />
       ) : (
-        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <PlayCircleOutlined style={{ color: '#fff', fontSize: 18 }} />
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <PlayCircleOutlined style={{ color: "#fff", fontSize: 18 }} />
         </div>
       )}
       {duration != null && (
-        <span style={{
-          position: 'absolute', bottom: 2, right: 2, fontSize: 9, color: '#fff',
-          background: 'rgba(0,0,0,0.6)', borderRadius: 4, padding: '1px 4px', lineHeight: 1.3,
-        }}>{fmt(duration)}</span>
+        <span
+          style={{
+            position: "absolute",
+            bottom: 2,
+            right: 2,
+            fontSize: 9,
+            color: "#fff",
+            background: "rgba(0,0,0,0.6)",
+            borderRadius: 4,
+            padding: "1px 4px",
+            lineHeight: 1.3,
+          }}
+        >
+          {fmt(duration)}
+        </span>
       )}
     </div>
   );
@@ -89,43 +173,70 @@ const GeneratePage: React.FC = () => {
   const { projectId } = useParams<{ projectId: string }>();
   const navigate = useNavigate();
   const [form] = Form.useForm();
-  const { projects, records, fetchProjects, fetchRecords, optimizePrompt, generateVideo } = useAppStore();
+  const {
+    projects,
+    records,
+    fetchProjects,
+    fetchRecords,
+    optimizePrompt,
+    generateVideo,
+  } = useAppStore();
   const { user } = useAuthStore();
 
   const [optimizing, setOptimizing] = useState(false);
   const [showOptimized, setShowOptimized] = useState(false);
-  const [currentRecord, setCurrentRecord] = useState<GenerationRecord | null>(null);
-  const [editedPrompt, setEditedPrompt] = useState('');
+  const [currentRecord, setCurrentRecord] = useState<GenerationRecord | null>(
+    null,
+  );
+  const [editedPrompt, setEditedPrompt] = useState("");
   const [isEditingOptimized, setIsEditingOptimized] = useState(false);
   const [generating, setGenerating] = useState<Record<string, boolean>>({});
-  const [recordStates, setRecordStates] = useState<Record<string, 'idle' | 'generating' | 'done' | 'failed'>>({});
-  const [editablePrompts, setEditablePrompts] = useState<Record<string, string>>({});
+  const [recordStates, setRecordStates] = useState<
+    Record<string, "idle" | "generating" | "done" | "failed">
+  >({});
+  const [editablePrompts, setEditablePrompts] = useState<
+    Record<string, string>
+  >({});
   const [editingRecordId, setEditingRecordId] = useState<string | null>(null);
-  const [expandedHistoryId, setExpandedHistoryId] = useState<string | null>(null);
+  const [expandedHistoryId, setExpandedHistoryId] = useState<string | null>(
+    null,
+  );
   const [references, setReferences] = useState<MediaReference[]>([]);
   const [uploading, setUploading] = useState(false);
-  const [promptText, setPromptText] = useState('');
+  const [promptText, setPromptText] = useState("");
   const [showMention, setShowMention] = useState(false);
-  const [mentionFilter, setMentionFilter] = useState('');
+  const [mentionFilter, setMentionFilter] = useState("");
   const promptRef = useRef<any>(null);
-  const [industryLabels, setIndustryLabels] = useState<Record<string, string>>({});
-  const [industryOptionGroups, setIndustryOptionGroups] = useState<Record<string, OptionGroup[]>>({});
-  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({});
+  const [industryLabels, setIndustryLabels] = useState<Record<string, string>>(
+    {},
+  );
+  const [industryOptionGroups, setIndustryOptionGroups] = useState<
+    Record<string, OptionGroup[]>
+  >({});
+  const [selectedOptions, setSelectedOptions] = useState<
+    Record<string, string>
+  >({});
   const [expandedGroup, setExpandedGroup] = useState<string | null>(null);
   // Per-record param selections for history prompt_optimized records
-  const [historyParams, setHistoryParams] = useState<Record<string, { aspectRatio: AspectRatio; resolution: Resolution }>>({});
+  const [historyParams, setHistoryParams] = useState<
+    Record<string, { aspectRatio: AspectRatio; resolution: Resolution }>
+  >({});
 
   // Video preview modal
   const [previewVideoUrl, setPreviewVideoUrl] = useState<string | null>(null);
 
   // Video params for step 2
   const [videoDuration, setVideoDuration] = useState(5);
-  const [videoAspectRatio, setVideoAspectRatio] = useState<AspectRatio>('16:9');
-  const [videoResolution, setVideoResolution] = useState<Resolution>('720p');
+  const [videoAspectRatio, setVideoAspectRatio] = useState<AspectRatio>("16:9");
+  const [videoResolution, setVideoResolution] = useState<Resolution>("720p");
   const [expandedEngine, setExpandedEngine] = useState<string | null>(null);
-  const [engineOptions, setEngineOptions] = useState<{ ratios: string[]; resolutions: string[]; durations: number[] }>({
-    ratios: ['16:9', '4:3', '1:1', '3:4', '9:16', '21:9'],
-    resolutions: ['720p', '1080p'],
+  const [engineOptions, setEngineOptions] = useState<{
+    ratios: string[];
+    resolutions: string[];
+    durations: number[];
+  }>({
+    ratios: ["16:9", "4:3", "1:1", "3:4", "9:16", "21:9"],
+    resolutions: ["720p", "1080p"],
     durations: [5, 8, 10, 12, 15],
   });
 
@@ -133,49 +244,277 @@ const GeneratePage: React.FC = () => {
   const [lastTextCredits, setLastTextCredits] = useState(0);
   const [lastTextTokens, setLastTextTokens] = useState(0);
 
+  // Media type: 1 for image, 2 for video
+  const [mediaType, setMediaType] = useState<any>("image");
+
+  // Image parameters
+  const [selectedRatio, setSelectedRatio] = useState<string>("1:1");
+  const [selectedResolution, setSelectedResolution] = useState<string>("2K");
+  const [width, setWidth] = useState<number>(2048);
+  const [height, setHeight] = useState<number>(2048);
+  const [showImageSettingsModal, setShowImageSettingsModal] = useState(false);
+
+  const [creditRatios, setCreditRatios] = useState<any>([]);
+  const [cimage, setCimage] = useState<any>([]);
+
+
+
+
+
+
+  // 点击空白处关闭图片设置浮层
   useEffect(() => {
-    getIndustries().then(data => {
-      setIndustryLabels(Object.fromEntries(data.map(d => [d.key, d.label])));
-      setIndustryOptionGroups(Object.fromEntries(data.map(d => [d.key, d.optionGroups || []])));
-    }).catch(() => {});
-    getVideoEngines().then(data => {
-      if (data.items?.length) {
-        const e = data.items[0];
-        setEngineOptions({
-          ratios: e.supportedRatios?.length ? e.supportedRatios : ['16:9', '4:3', '1:1', '3:4', '9:16', '21:9'],
-          resolutions: e.supportedResolutions?.length ? e.supportedResolutions : ['720p', '1080p'],
-          durations: e.supportedDurations?.length ? e.supportedDurations : [5, 8, 10, 12, 15],
-        });
+    getCreditRatios().then((data: any) => {
+      // console.log('123123', data);
+      setCreditRatios(data.video);
+      setCimage(data.image);
+      // console.log('creditRatios (直接使用data.values):', data.values);
+
+    })
+    if (!showImageSettingsModal) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        !target.closest(".image-settings-popover") &&
+        !target.closest(".image-settings-trigger")
+      ) {
+        setShowImageSettingsModal(false);
       }
-    }).catch(() => {});
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [showImageSettingsModal]);
+
+
+  const calcVideoCredits = (duration: number, resolution: Resolution): any => {
+
+    // console.log(duration,resolution);
+    for (let i = 0; i < creditRatios.length; i++) {
+      const ratio = creditRatios[i];
+      if (ratio.resolution === resolution) {
+        const cfg = ratio;
+        return Math.round((cfg.baseCredits + cfg.perSecondCredits * duration) * cfg.ratio);
+      }
+    }
+    
+    // if (condition) {
+      
+    // }
+
+    // return Math.round((cfg.base + cfg.perSecond * duration) * cfg.ratio);
+  };
+
+  // 根据图片分辨率获取积分
+  const getImageCredits = (imageSize: string): any => {
+    
+    // 将 imageSize 转换为 creditRatios 中的 resolution 格式
+    const resolution = imageSize === '2k' ? '2048' : imageSize === '4k' ? '4096' : imageSize;
+    
+    for (let i = 0; i < cimage.length; i++) {
+      const ratio = cimage[i];
+      if (ratio.resolution === resolution) {
+        return ratio.baseCredits;
+      }
+    }
+    return 0;
+  };
+
+  // 根据比例计算尺寸
+  const calculateSizeFromRatione = (ratio: string) => {
+    setBlindex(ratio);
+
+    // const resolution = selectedResolution === '4k' ? 4096 : 2048;
+    // const ratioParts = ratio.split(':');
+    // if (ratio === 'auto') {
+    //   // 智能模式保持当前尺寸
+    //   return;
+    // }
+    // const w = parseInt(ratioParts[0]);
+    // const h = parseInt(ratioParts[1]);
+    // if (w >= h) {
+    //   // 横向或正方形
+    //   setWidth(resolution);
+    //   setHeight(Math.round(resolution * h / w));
+    // } else {
+    //   // 纵向
+    //   setHeight(resolution);
+    //   setWidth(Math.round(resolution * w / h));
+    // }
+  };
+  const calculateSizeFromRatiotwo = (ratio: string) => {
+    setFBlindex(parseInt(ratio));
+  };
+
+  // 图片比例选项
+  const [ratioOptions, setRatioOptions] = useState([]);
+
+  // 图片分辨率选项
+  const [resolutionOptions, setResolutionOptions] = useState([]);
+  const [widthandheight, setWidthandHeight] = useState([]);
+  const [blindex, setBlindex] = useState<any>(0);
+  const [fblindex, setFBlindex] = useState<any>(0);
+
+  // 监听 blindex 状态变化（解决异步问题）
+  useEffect(() => {
+    // blindex 更新后执行的逻辑
+    // 安全检查：确保数组存在后再访问
+    if (
+      widthandheight[fblindex] &&
+      widthandheight[fblindex][blindex] !== undefined
+    ) {
+      setWidth(widthandheight[fblindex][blindex].substring(0, 4));
+      setHeight(widthandheight[fblindex][blindex].substring(5));
+    } else {
+    }
+
+    // 这里可以添加 blindex 更新后需要执行的其他操作
+  }, [blindex]);
+
+  useEffect(() => {
+    // fblindex 更新后执行的逻辑
+    // 安全检查：确保数组存在后再访问
+    if (
+      widthandheight[fblindex] &&
+      widthandheight[fblindex][blindex] !== undefined
+    ) {
+      setWidth(widthandheight[fblindex][blindex].substring(0, 4));
+      setHeight(widthandheight[fblindex][blindex].substring(5));
+    } else {
+    }
+
+    // 这里可以添加 fblindex 更新后需要执行的其他操作
+  }, [fblindex]);
+  // 获取图片比例选项
+
+  // { value: '2k', label: '高清 2K' },
+  // { value: '4k', label: '超清 4K' },
+
+  // 交换宽高
+  const handleSwap = () => {
+    setWidth(height);
+    setHeight(width);
+  };
+
+  // 处理媒体类型选择变化
+  const handleMediaTypeChange = (e: any) => {
+    // console.log(e.target.value);
+
+    // 获取选中的值（'image' 或 'video'）
+    const selectedValue = e.target.value;
+    // 转换为数字：image→1，video→2
+    const numericValue = selectedValue === "image" ? "image" : "video";
+    // 输出到控制台
+    // console.log(numericValue);
+    // 更新状态（使用转换后的数字值）
+    setMediaType(numericValue);
+  };
+
+  useEffect(() => {
+    getIndustries()
+      .then((data) => {
+        setIndustryLabels(
+          Object.fromEntries(data.map((d) => [d.key, d.label])),
+        );
+        setIndustryOptionGroups(
+          Object.fromEntries(data.map((d) => [d.key, d.optionGroups || []])),
+        );
+      })
+      .catch(() => { });
+
+    getParameters()
+      .then((data) => {
+        let supportedSizes = (data as any).items?.[0]?.supportedSizes || {};
+        let supportedResolutions = [];
+        let twokwidth = [];
+        let fourkwidth = [];
+
+        for (let key in supportedSizes["2K"]) {
+          supportedResolutions.push(key);
+          twokwidth.push(supportedSizes["2K"][key]);
+        }
+
+        supportedResolutions.forEach((res, index) => {
+          setRatioOptions((prev) => [
+            ...prev,
+            { value: res, label: String(index) },
+          ]);
+        });
+
+        for (let key in supportedSizes["4K"]) {
+          fourkwidth.push(supportedSizes["4K"][key]);
+        }
+
+        const newWidthandHeight = [twokwidth, fourkwidth];
+        setWidthandHeight(newWidthandHeight);
+
+        let supportedRatios = [];
+        for (let key in supportedSizes) {
+          supportedRatios.push(key);
+        }
+        supportedRatios.forEach((ratio, index) => {
+          setResolutionOptions((prev) => [
+            ...prev,
+            { value: ratio, label: String(index) },
+          ]);
+        });
+      })
+      .catch(() => { });
+    getVideoEngines()
+      .then((data) => {
+        if (data.items?.length) {
+          const e = data.items[0];
+          setEngineOptions({
+            ratios: e.supportedRatios?.length
+              ? e.supportedRatios
+              : ["16:9", "4:3", "1:1", "3:4", "9:16", "21:9"],
+            resolutions: e.supportedResolutions?.length
+              ? e.supportedResolutions
+              : ["720p", "1080p"],
+            durations: e.supportedDurations?.length
+              ? e.supportedDurations
+              : [5, 8, 10, 12, 15],
+          });
+        }
+      })
+      .catch(() => { });
   }, []);
 
-  useEffect(() => { fetchProjects(); fetchRecords(projectId); }, [projectId]);
+  useEffect(() => {
+    fetchProjects();
+    fetchRecords(projectId);
+    // console.log(fetchRecords(projectId));
+    
+  }, [projectId]);
 
   // Auto-poll: if any records are still generating/optimizing after page load, start polling
   const autoPollStartedRef = useRef(false);
   useEffect(() => {
     if (autoPollStartedRef.current || records.length === 0) return;
     autoPollStartedRef.current = true;
-    records.forEach(r => {
-      if (r.projectId === projectId && r.status === 'generating') {
-        setRecordStates((p) => ({ ...p, [r.id]: 'generating' }));
+
+    console.log('aaaa',records);
+    
+    records.forEach((r) => {
+      if (r.projectId === projectId && r.status === "generating") {
+        setRecordStates((p) => ({ ...p, [r.id]: "generating" }));
         startPolling(r.id);
       }
-      if (r.projectId === projectId && r.status === 'optimizing') {
+      if (r.projectId === projectId && r.status === "optimizing") {
         // Poll until optimizing completes
         startOptimizingPoll(r.id);
       }
     });
   }, [records, projectId]);
 
-  // Poll for optimizing records until they transition
+  // Poll for optimizing records until they trans ition
   const startOptimizingPoll = (recordId: string) => {
     if (pollTimers.current[recordId]) return;
     pollTimers.current[recordId] = setInterval(async () => {
       await fetchRecords(projectId);
-      const latest = useAppStore.getState().records.find(r => r.id === recordId);
-      if (!latest || latest.status !== 'optimizing') {
+      const latest = useAppStore
+        .getState()
+        .records.find((r) => r.id === recordId);
+      if (!latest || latest.status !== "optimizing") {
         clearInterval(pollTimers.current[recordId]);
         delete pollTimers.current[recordId];
       }
@@ -187,146 +526,316 @@ const GeneratePage: React.FC = () => {
   const inFlightOptimizeKey = useRef<string | null>(null);
   useEffect(() => {
     if (recoveredRef.current || records.length === 0) return;
-    const pending = localStorage.getItem('pending_optimize');
+    const pending = localStorage.getItem("pending_optimize");
     if (!pending) return;
     try {
       const { key, projectId: pId, prompt, duration, ts } = JSON.parse(pending);
       if (Date.now() - ts > 5 * 60 * 1000 || pId !== projectId) {
-        localStorage.removeItem('pending_optimize');
+        localStorage.removeItem("pending_optimize");
         return;
       }
       // Skip if this is the current in-flight optimize (not a recovery)
       if (inFlightOptimizeKey.current === key) return;
       // Find matching record in already-loaded records
-      const match = records.find(r =>
-        r.projectId === pId
-        && r.originalPrompt === prompt
-        && r.duration === duration
-        && r.status === 'prompt_optimized'
-        && new Date(r.createdAt).getTime() > ts - 10000
+      const match = records.find(
+        (r) =>
+          r.projectId === pId &&
+          r.originalPrompt === prompt &&
+          r.duration === duration &&
+          r.status === "prompt_optimized" &&
+          new Date(r.createdAt).getTime() > ts - 10000,
       );
       if (match) {
         recoveredRef.current = true;
-        localStorage.removeItem('pending_optimize');
+        localStorage.removeItem("pending_optimize");
         setCurrentRecord(match);
-        setEditedPrompt(match.optimizedPrompt || '');
+        setEditedPrompt(match.optimizedPrompt || "");
         setLastTextCredits(match.textCreditsCost);
         setLastTextTokens(match.textTokensUsed);
         setShowOptimized(true);
-        message.success({ content: `优化请求已恢复，消耗 ${match.textCreditsCost} 积分`, key: 'recovery' });
+        message.success({
+          content: `优化请求已恢复，消耗 ${match.textCreditsCost} 积分`,
+          key: "recovery",
+        });
       } else if (Date.now() - ts > 30000) {
         // No match found after 30s — original request likely failed
-        localStorage.removeItem('pending_optimize');
+        localStorage.removeItem("pending_optimize");
       }
     } catch {
-      localStorage.removeItem('pending_optimize');
+      localStorage.removeItem("pending_optimize");
     }
   }, [records, projectId]);
 
   const project = projects.find((p) => p.id === projectId);
   const projectRecords = records.filter((r) => r.projectId === projectId);
-  const projectName = project?.name ?? '项目';
-  const currentOptionGroups = project ? (industryOptionGroups[project.industry] || []) : [];
+  const projectName = project?.name ?? "项目";
+  const currentOptionGroups = project
+    ? industryOptionGroups[project.industry] || []
+    : [];
   const userCredits = user?.credits ?? 0;
 
+  // 根据图片分辨率从 cimage 获取积分
+  const getImageCreditsFromCimage = (imageSize: string): number => {
+    // 将 imageSize 转换为 cimage 中的 resolution 格式
+    const resolution = imageSize === '2k' ? '2048' : imageSize === '4k' ? '4096' : imageSize;
+    
+    for (let i = 0; i < cimage.length; i++) {
+      const item = cimage[i];
+      if (item.resolution === resolution) {
+        return item.baseCredits;
+      }
+    }
+    return 0;
+  };
+
   // Video credits estimate for step 2
-  const estimatedVideoCredits = calcVideoCredits(videoDuration, videoResolution);
+  const estimatedVideoCredits = calcVideoCredits(
+    videoDuration,
+    videoResolution,
+  );
   const canAffordVideo = userCredits >= estimatedVideoCredits;
 
   // Step 1: Optimize prompt (text credits)
   const handleOptimize = async () => {
     try {
+      if (!projectId) {
+        message.error("项目ID为空，请先选择项目");
+        return;
+      }
       const values = await form.validateFields();
-      if (!projectId) return;
+      if (!values.prompt || !values.prompt.trim()) {
+        message.error("请输入视频/图片描述");
+        return;
+      }
+
       setOptimizing(true);
-      const optionEntries = Object.entries(selectedOptions).map(([k, v]) => `@${k}：${v}`);
-      const fullPrompt = optionEntries.length > 0
-        ? `${values.prompt}\n\n${optionEntries.join('；')}`
-        : values.prompt;
+      const optionEntries = Object.entries(selectedOptions).map(
+        ([k, v]) => `@${k}：${v}`,
+      );
+      const fullPrompt =
+        optionEntries.length > 0
+          ? `${values.prompt}\n\n${optionEntries.join("；")}`
+          : values.prompt;
       // Generate idempotency key for dedup on refresh
-      const idempotencyKey = crypto.randomUUID();
-      localStorage.setItem('pending_optimize', JSON.stringify({
-        key: idempotencyKey, projectId, prompt: fullPrompt, duration: videoDuration, ts: Date.now(),
-      }));
+      const idempotencyKey = generateUUID();
+      localStorage.setItem(
+        "pending_optimize",
+        JSON.stringify({
+          key: idempotencyKey,
+          projectId,
+          prompt: fullPrompt,
+          duration: videoDuration,
+          ts: Date.now(),
+        }),
+      );
       inFlightOptimizeKey.current = idempotencyKey;
       const result = await optimizePrompt(projectId, {
         prompt: fullPrompt,
         duration: videoDuration,
+        genType: mediaType,
+        resolution: selectedResolution,
         references: references.length > 0 ? references : undefined,
         idempotencyKey,
+        image_size: selectedResolution,
+        image_proportion: selectedRatio,
+        image_px: width + "x" + height,
       });
+      // console.log("按钮触发", result);
+
       // Clear in-flight flag so recovery effect doesn't fire during normal flow
-      localStorage.removeItem('pending_optimize');
+      localStorage.removeItem("pending_optimize");
       inFlightOptimizeKey.current = null;
       setCurrentRecord(result.record);
-      setEditedPrompt(result.record.optimizedPrompt || '');
+      setEditedPrompt(result.record.optimizedPrompt || "");
       setLastTextCredits(result.textCreditsCost);
       setLastTextTokens(result.textTokensUsed);
       setShowOptimized(true);
-      message.success({ content: `「${projectName}」提示词优化完成，消耗 ${result.textCreditsCost} 积分`, key: 'optimize' });
-    } catch { /* validation */ }
-    finally { setOptimizing(false); localStorage.removeItem('pending_optimize'); inFlightOptimizeKey.current = null; }
+      message.success({
+        content: `「${projectName}」提示词优化完成，消耗 ${result.textCreditsCost} 积分`,
+        key: "optimize",
+      });
+    } catch (error: any) {
+      console.error("优化提示词失败:", error);
+      const errorMsg =
+        error?.response?.data?.message ||
+        error?.message ||
+        "操作失败，请稍后重试";
+      message.error(errorMsg);
+    } finally {
+      setOptimizing(false);
+      localStorage.removeItem("pending_optimize");
+      inFlightOptimizeKey.current = null;
+    }
   };
 
   // Step 2: Generate video (video credits)
+  /**
+   * 轮询定时器管理对象
+   * 类型说明：Record<string, ReturnType<typeof setInterval>>
+   * - key: recordId（任务ID）
+   * - value: setInterval 返回的定时器ID
+   * 
+   * 使用 useRef 的原因：
+   * 1. 定时器ID需要在组件生命周期中持久保存
+   * 2. 避免闭包捕获过时的状态值
+   * 3. 支持动态增删，不受 React 渲染周期影响
+   */
   const pollTimers = useRef<Record<string, ReturnType<typeof setInterval>>>({});
 
+  /**
+   * 启动任务状态轮询
+   * 
+   * @param recordId - 任务ID，用于标识唯一的轮询任务
+   * 
+   * 轮询流程：
+   * 1. 检查是否已存在相同任务的轮询（防止重复启动）
+   * 2. 创建定时任务，每5秒执行一次
+   * 3. 每次轮询：
+   *    - 拉取最新任务列表
+   *    - 查询当前任务的最新状态
+   *    - 判断是否需要终止轮询
+   * 4. 终止条件：任务状态变为非 generating
+   *    - completed: 任务完成，更新状态并显示成功提示
+   *    - failed: 任务失败，更新状态并显示错误提示
+   *    - 其他: 停止轮询（如已删除、已取消等）
+   */
   const startPolling = (recordId: string) => {
+    // 防止重复启动：如果该任务已在轮询中，则直接返回
     if (pollTimers.current[recordId]) return;
+
+    /**
+     * 创建定时轮询任务
+     * 轮询间隔：5000ms（5秒）
+     * 
+     * 使用 async 函数的原因：
+     * - fetchRecords 是异步操作
+     * - 需要等待数据更新后再进行状态判断
+     */
     pollTimers.current[recordId] = setInterval(async () => {
-      await fetchRecords(projectId);
-      const latest = useAppStore.getState().records.find(r => r.id === recordId);
-      if (!latest || latest.status !== 'generating') {
-        clearInterval(pollTimers.current[recordId]);
-        delete pollTimers.current[recordId];
-        if (latest?.status === 'completed') {
-          setRecordStates((p) => ({ ...p, [recordId]: 'done' }));
-          setCurrentRecord(prev => prev?.id === recordId ? latest : prev);
-          message.success({ content: `「${projectName}」视频生成完成！`, key: recordId, duration: 5 });
-        } else if (latest?.status === 'failed') {
-          setRecordStates((p) => ({ ...p, [recordId]: 'failed' }));
-          setCurrentRecord(prev => prev?.id === recordId ? latest : prev);
-          message.error({ content: `「${projectName}」视频生成失败: ${latest.errorMessage || '未知错误'}`, key: recordId, duration: 5 });
+      try {
+        // 拉取最新的任务列表（从后端获取）
+        await fetchRecords(projectId);
+        
+
+        // 从全局状态中查找当前任务的最新状态
+        const latest = useAppStore
+          .getState()
+          .records.find((r) => r.id === recordId);
+
+        /**
+         * 轮询终止条件判断：
+         * 1. 任务不存在（已被删除）
+         * 2. 任务状态不再是 generating
+         */
+        if (!latest || latest.status !== "generating") {
+          // 清除定时器
+          clearInterval(pollTimers.current[recordId]);
+          // 从管理对象中移除，释放引用
+          delete pollTimers.current[recordId];
+
+          // 根据最终状态执行不同的处理逻辑
+          if (latest?.status === "completed") {
+            // 任务完成：更新本地状态，显示成功消息
+            setRecordStates((p) => ({ ...p, [recordId]: "done" }));
+            setCurrentRecord((prev) => (prev?.id === recordId ? latest : prev));
+            message.success({
+              content: `「${projectName}」视频生成完成！`,
+              key: recordId,
+              duration: 5,
+            });
+          } else if (latest?.status === "failed") {
+            // 任务失败：更新本地状态，显示错误消息
+            setRecordStates((p) => ({ ...p, [recordId]: "failed" }));
+            setCurrentRecord((prev) => (prev?.id === recordId ? latest : prev));
+            message.error({
+              content: `「${projectName}」视频生成失败: ${latest.errorMessage || "未知错误"}`,
+              key: recordId,
+              duration: 5,
+            });
+          }
+          // 其他状态（如 cancelled、archived 等）：静默停止轮询
         }
+      } catch (error) {
+        // 轮询过程中发生错误
+        console.error(`Polling error for record ${recordId}:`, error);
+        // 可选：可以在这里添加错误重试逻辑或通知用户
       }
-    }, 5000);
+    }, 5000);  // 轮询间隔：5秒
   };
 
+  /**
+   * 组件卸载时清理所有轮询定时器
+   * 
+   * 使用空依赖数组 [] 的原因：
+   * - 只在组件挂载时执行一次
+   * - 返回的清理函数在组件卸载时执行
+   * 
+   * 清理逻辑：
+   * 1. 获取所有定时器ID
+   * 2. 逐个清除定时器
+   * 3. pollTimers.current 会被自动垃圾回收
+   */
   useEffect(() => {
-    return () => { Object.values(pollTimers.current).forEach(clearInterval); };
+    return () => {
+      // 遍历所有定时器并清除
+      Object.values(pollTimers.current).forEach(clearInterval);
+    };
   }, []);
 
   const handleGenerate = async (recordId: string) => {
-    if (!canAffordVideo) { message.error('积分不足，请先充值'); return; }
+    if (!canAffordVideo) {
+      message.error("积分不足，请先充值");
+      return;
+    }
     setGenerating((p) => ({ ...p, [recordId]: true }));
-    setRecordStates((p) => ({ ...p, [recordId]: 'generating' }));
-    message.loading({ content: `「${projectName}」正在提交视频生成...`, duration: 0, key: recordId });
+    setRecordStates((p) => ({ ...p, [recordId]: "generating" }));
+    message.loading({
+      content: `「${projectName}」正在提交视频生成...`,
+      duration: 0,
+      key: recordId,
+    });
     try {
       const result = await generateVideo(recordId, {
         aspectRatio: videoAspectRatio,
         resolution: videoResolution,
       });
-      if (result.status === 'failed') {
-        setRecordStates((p) => ({ ...p, [recordId]: 'failed' }));
-        message.error({ content: `「${projectName}」提交失败`, key: recordId, duration: 3 });
+      if (result.status === "failed") {
+        setRecordStates((p) => ({ ...p, [recordId]: "failed" }));
+        message.error({
+          content: `「${projectName}」提交失败`,
+          key: recordId,
+          duration: 3,
+        });
       } else {
-        message.success({ content: `「${projectName}」已提交，正在生成中...`, key: recordId, duration: 3 });
+        message.success({
+          content: `「${projectName}」已提交，正在生成中...`,
+          key: recordId,
+          duration: 3,
+        });
         startPolling(recordId);
       }
     } catch {
-      setRecordStates((p) => ({ ...p, [recordId]: 'failed' }));
-      message.error({ content: `「${projectName}」提交失败`, key: recordId, duration: 3 });
+      setRecordStates((p) => ({ ...p, [recordId]: "failed" }));
+      message.error({
+        content: `「${projectName}」提交失败`,
+        key: recordId,
+        duration: 3,
+      });
     } finally {
       setGenerating((p) => ({ ...p, [recordId]: false }));
     }
   };
 
   const handleRetryGeneration = async (recordId: string) => {
-    const record = projectRecords.find(r => r.id === recordId);
+    const record = projectRecords.find((r) => r.id === recordId);
     if (!record) return;
     setGenerating((p) => ({ ...p, [recordId]: true }));
-    setRecordStates((p) => ({ ...p, [recordId]: 'generating' }));
-    message.loading({ content: `「${projectName}」正在重新提交...`, duration: 0, key: recordId });
+    setRecordStates((p) => ({ ...p, [recordId]: "generating" }));
+    message.loading({
+      content: `「${projectName}」正在重新提交...`,
+      duration: 0,
+      key: recordId,
+    });
     try {
       // Save edited prompt first if changed
       const editedPrompt = editablePrompts[recordId];
@@ -334,122 +843,259 @@ const GeneratePage: React.FC = () => {
         await updateRecordPrompt(recordId, editedPrompt);
       }
       const result = await generateVideo(recordId, {
-        aspectRatio: record.aspectRatio || '16:9',
-        resolution: record.resolution || '720p',
+        aspectRatio: record.aspectRatio || "16:9",
+        resolution: record.resolution || "720p",
       });
-      if (result.status === 'failed') {
-        setRecordStates((p) => ({ ...p, [recordId]: 'failed' }));
-        message.error({ content: `「${projectName}」提交失败`, key: recordId, duration: 3 });
+      if (result.status === "failed") {
+        setRecordStates((p) => ({ ...p, [recordId]: "failed" }));
+        message.error({
+          content: `「${projectName}」提交失败`,
+          key: recordId,
+          duration: 3,
+        });
       } else {
-        message.success({ content: `「${projectName}」已提交，正在生成中...`, key: recordId, duration: 3 });
+        message.success({
+          content: `「${projectName}」已提交，正在生成中...`,
+          key: recordId,
+          duration: 3,
+        });
         startPolling(recordId);
       }
     } catch {
-      setRecordStates((p) => ({ ...p, [recordId]: 'failed' }));
-      message.error({ content: `「${projectName}」提交失败`, key: recordId, duration: 3 });
+      setRecordStates((p) => ({ ...p, [recordId]: "failed" }));
+      message.error({
+        content: `「${projectName}」提交失败`,
+        key: recordId,
+        duration: 3,
+      });
     } finally {
       setGenerating((p) => ({ ...p, [recordId]: false }));
     }
   };
 
   const getRecordStatus = (record: GenerationRecord) => {
+    // console.log('返回的数据:', record);
+
     const state = recordStates[record.id];
-    if (state === 'generating') return 'generating';
-    if (state === 'done') return 'completed';
-    if (state === 'failed') return 'failed';
+    if (state === "generating") return "generating";
+    if (state === "done") return "completed";
+    if (state === "failed") return "failed";
     return record.status;
   };
 
-  const statusConfig: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
-    optimizing: { color: 'processing', text: '优化中', icon: <LoadingOutlined style={{ animation: 'spinSlow 1s linear infinite' }} /> },
-    prompt_optimized: { color: 'processing', text: '待生成', icon: <ClockCircleOutlined /> },
-    generating: { color: 'warning', text: '生成中', icon: <LoadingOutlined style={{ animation: 'spinSlow 1s linear infinite' }} /> },
-    completed: { color: 'success', text: '已完成', icon: <CheckCircleOutlined /> },
-    failed: { color: 'error', text: '失败', icon: <CloseCircleOutlined /> },
+  const statusConfig: Record<
+    string,
+    { color: string; text: string; icon: React.ReactNode }
+  > = {
+    optimizing: {
+      color: "processing",
+      text: "优化中",
+      icon: (
+        <LoadingOutlined style={{ animation: "spinSlow 1s linear infinite" }} />
+      ),
+    },
+    prompt_optimized: {
+      color: "processing",
+      text: "待生成",
+      icon: <ClockCircleOutlined />,
+    },
+    generating: {
+      color: "warning",
+      text: "生成中",
+      icon: (
+        <LoadingOutlined style={{ animation: "spinSlow 1s linear infinite" }} />
+      ),
+    },
+    completed: {
+      color: "success",
+      text: "已完成",
+      icon: <CheckCircleOutlined />,
+    },
+    failed: { color: "error", text: "失败", icon: <CloseCircleOutlined /> },
   };
 
   // Portal-based dropdown that renders menu at document.body level (above trigger)
   const PortalDropdown: React.FC<{
-    label: string; value: string; options: string[]; suffix?: string; expanded: boolean;
-    onToggle: () => void; onSelect: (val: string) => void; onClose: () => void;
-  }> = ({ label, value, options, suffix, expanded, onToggle, onSelect, onClose }) => {
-    const triggerRef = useRef<HTMLDivElement>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const expandedRef = useRef(expanded);
-    const [pos, setPos] = useState<{ bottom: number; left: number; width: number } | null>(null);
+    label: string;
+    value: string;
+    options: string[];
+    suffix?: string;
+    expanded: boolean;
+    onToggle: () => void;
+    onSelect: (val: string) => void;
+    onClose: () => void;
+  }> = ({
+    label,
+    value,
+    options,
+    suffix,
+    expanded,
+    onToggle,
+    onSelect,
+    onClose,
+  }) => {
+      const triggerRef = useRef<HTMLDivElement>(null);
+      const menuRef = useRef<HTMLDivElement>(null);
+      const expandedRef = useRef(expanded);
+      const [pos, setPos] = useState<{
+        bottom: number;
+        left: number;
+        width: number;
+      } | null>(null);
 
-    expandedRef.current = expanded;
+      expandedRef.current = expanded;
 
-    useEffect(() => {
-      if (expanded && triggerRef.current) {
-        const rect = triggerRef.current.getBoundingClientRect();
-        setPos({ bottom: window.innerHeight - rect.top + 4, left: rect.left, width: Math.max(rect.width, 100) });
-      } else {
-        setPos(null);
-      }
-    }, [expanded]);
+      useEffect(() => {
+        if (expanded && triggerRef.current) {
+          const rect = triggerRef.current.getBoundingClientRect();
+          setPos({
+            bottom: window.innerHeight - rect.top + 4,
+            left: rect.left,
+            width: Math.max(rect.width, 100),
+          });
+        } else {
+          setPos(null);
+        }
+      }, [expanded]);
 
-    useEffect(() => {
-      if (!expanded) return;
-      const handler = (e: MouseEvent) => {
-        if (triggerRef.current?.contains(e.target as Node)) return;
-        if (menuRef.current?.contains(e.target as Node)) return;
-        if (expandedRef.current) onClose();
-      };
-      document.addEventListener('mousedown', handler);
-      return () => document.removeEventListener('mousedown', handler);
-    }, [expanded, onClose]);
+      useEffect(() => {
+        if (!expanded) return;
+        const handler = (e: MouseEvent) => {
+          if (triggerRef.current?.contains(e.target as Node)) return;
+          if (menuRef.current?.contains(e.target as Node)) return;
+          if (expandedRef.current) onClose();
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+      }, [expanded, onClose]);
 
-    return (
-      <>
-        <div ref={triggerRef} onClick={onToggle} translate="no" style={{
-          display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px',
-          borderRadius: 8, cursor: 'pointer', userSelect: 'none', transition: 'background 0.2s, border-color 0.2s',
-          background: expanded ? 'rgba(99,102,241,0.08)' : '#f8f9fc',
-          border: expanded ? '1px solid #6366f1' : '1px solid #e2e8f0',
-          minWidth: 70, whiteSpace: 'nowrap', flexShrink: 0,
-        }}>
-          <span style={{ fontSize: 12, color: '#6366f1', fontWeight: 500, lineHeight: '18px' }}>{value}{suffix}</span>
-          <CaretDownOutlined style={{ fontSize: 9, color: '#94a3b8', transition: 'transform 0.2s', transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }} />
-        </div>
-        {pos && createPortal(
-          <div ref={menuRef} style={{
-            position: 'fixed', bottom: pos.bottom, left: pos.left, minWidth: pos.width,
-            background: '#fff', borderRadius: 12, padding: 6, zIndex: 99999,
-            boxShadow: '0 8px 30px rgba(0,0,0,0.12)', border: '1px solid #e2e8f0',
-          }}>
-            <Typography.Text style={{ fontSize: 10, color: '#94a3b8', display: 'block', padding: '2px 6px 4px' }}>{label}</Typography.Text>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              {options.map((opt, oi) => {
-                const isSelected = value === opt;
-                return (
-                  <div key={oi} onClick={() => { onSelect(opt); onClose(); }} style={{
-                    padding: '6px 10px', borderRadius: 8, fontSize: 13, cursor: 'pointer', transition: 'all 0.15s',
-                    background: isSelected ? 'linear-gradient(135deg, #6366f1, #8b5cf6)' : 'transparent',
-                    color: isSelected ? '#fff' : '#1a1a2e', fontWeight: isSelected ? 600 : 400,
+      return (
+        <>
+          <div
+            ref={triggerRef}
+            onClick={onToggle}
+            translate="no"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "5px 12px",
+              borderRadius: 8,
+              cursor: "pointer",
+              userSelect: "none",
+              transition: "background 0.2s, border-color 0.2s",
+              background: expanded ? "rgba(99,102,241,0.08)" : "#f8f9fc",
+              border: expanded ? "1px solid #6366f1" : "1px solid #e2e8f0",
+              minWidth: 70,
+              whiteSpace: "nowrap",
+              flexShrink: 0,
+            }}
+          >
+            <span
+              style={{
+                fontSize: 12,
+                color: "#6366f1",
+                fontWeight: 500,
+                lineHeight: "18px",
+              }}
+            >
+              {value}
+              {suffix}
+            </span>
+            <CaretDownOutlined
+              style={{
+                fontSize: 9,
+                color: "#94a3b8",
+                transition: "transform 0.2s",
+                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+              }}
+            />
+          </div>
+          {pos &&
+            createPortal(
+              <div
+                ref={menuRef}
+                style={{
+                  position: "fixed",
+                  bottom: pos.bottom,
+                  left: pos.left,
+                  minWidth: pos.width,
+                  background: "#fff",
+                  borderRadius: 12,
+                  padding: 6,
+                  zIndex: 99999,
+                  boxShadow: "0 8px 30px rgba(0,0,0,0.12)",
+                  border: "1px solid #e2e8f0",
+                }}
+              >
+                <Typography.Text
+                  style={{
+                    fontSize: 10,
+                    color: "#94a3b8",
+                    display: "block",
+                    padding: "2px 6px 4px",
                   }}
-                    onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = '#f1f5f9'; }}
-                    onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}
-                  >{opt}</div>
-                );
-              })}
-            </div>
-          </div>,
-          document.body
-        )}
-      </>
-    );
-  };
+                >
+                  {label}
+                </Typography.Text>
+                <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                  {options.map((opt, oi) => {
+                    const isSelected = value === opt;
+                    return (
+                      <div
+                        key={oi}
+                        onClick={() => {
+                          onSelect(opt);
+                          onClose();
+                        }}
+                        style={{
+                          padding: "6px 10px",
+                          borderRadius: 8,
+                          fontSize: 13,
+                          cursor: "pointer",
+                          transition: "all 0.15s",
+                          background: isSelected
+                            ? "linear-gradient(135deg, #6366f1, #8b5cf6)"
+                            : "transparent",
+                          color: isSelected ? "#fff" : "#1a1a2e",
+                          fontWeight: isSelected ? 600 : 400,
+                        }}
+                        onMouseEnter={(e) => {
+                          if (!isSelected)
+                            e.currentTarget.style.background = "#f1f5f9";
+                        }}
+                        onMouseLeave={(e) => {
+                          if (!isSelected)
+                            e.currentTarget.style.background = "transparent";
+                        }}
+                      >
+                        {opt}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>,
+              document.body,
+            )}
+        </>
+      );
+    };
 
   // Portal-based option group dropdown for industry options (above trigger)
   const PortalOptionGroup: React.FC<{
-    group: OptionGroup; selected: string | undefined; expanded: boolean;
-    onToggle: () => void; onSelect: (opt: string) => void; onClose: () => void;
+    group: OptionGroup;
+    selected: string | undefined;
+    expanded: boolean;
+    onToggle: () => void;
+    onSelect: (opt: string) => void;
+    onClose: () => void;
   }> = ({ group, selected, expanded, onToggle, onSelect, onClose }) => {
     const triggerRef = useRef<HTMLDivElement>(null);
     const menuRef = useRef<HTMLDivElement>(null);
     const expandedRef = useRef(expanded);
-    const [pos, setPos] = useState<{ bottom: number; left: number } | null>(null);
+    const [pos, setPos] = useState<{ bottom: number; left: number } | null>(
+      null,
+    );
 
     expandedRef.current = expanded;
 
@@ -469,41 +1115,112 @@ const GeneratePage: React.FC = () => {
         if (menuRef.current?.contains(e.target as Node)) return;
         if (expandedRef.current) onClose();
       };
-      document.addEventListener('mousedown', handler);
-      return () => document.removeEventListener('mousedown', handler);
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
     }, [expanded, onClose]);
 
     return (
       <>
-        <div ref={triggerRef} onClick={onToggle} style={{
-          display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 8, cursor: 'pointer', userSelect: 'none', transition: 'all 0.2s',
-          background: selected ? 'rgba(99,102,241,0.08)' : '#f8f9fc',
-          border: expanded ? '1px solid #6366f1' : '1px solid #e2e8f0',
-        }}>
-          <Typography.Text style={{ fontSize: 12, color: selected ? '#6366f1' : '#64748b', fontWeight: selected ? 600 : 400 }}>{selected || group.name}</Typography.Text>
-          <CaretDownOutlined style={{ fontSize: 9, color: selected ? '#6366f1' : '#94a3b8', transition: 'transform 0.2s', transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }} />
+        <div
+          ref={triggerRef}
+          onClick={onToggle}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "5px 12px",
+            borderRadius: 8,
+            cursor: "pointer",
+            userSelect: "none",
+            transition: "all 0.2s",
+            background: selected ? "rgba(99,102,241,0.08)" : "#f8f9fc",
+            border: expanded ? "1px solid #6366f1" : "1px solid #e2e8f0",
+          }}
+        >
+          <Typography.Text
+            style={{
+              fontSize: 12,
+              color: selected ? "#6366f1" : "#64748b",
+              fontWeight: selected ? 600 : 400,
+            }}
+          >
+            {selected || group.name}
+          </Typography.Text>
+          <CaretDownOutlined
+            style={{
+              fontSize: 9,
+              color: selected ? "#6366f1" : "#94a3b8",
+              transition: "transform 0.2s",
+              transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+            }}
+          />
         </div>
-        {pos && createPortal(
-          <div ref={menuRef} style={{ position: 'fixed', bottom: pos.bottom, left: pos.left, background: '#fff', borderRadius: 12, padding: 8, minWidth: 160, zIndex: 99999, boxShadow: '0 8px 30px rgba(0,0,0,0.12)', border: '1px solid #e2e8f0' }}>
-            <Typography.Text style={{ fontSize: 10, color: '#94a3b8', display: 'block', padding: '2px 6px 4px' }}>{group.name}</Typography.Text>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              {group.options.map((opt, oi) => {
-                const isSelected = selected === opt;
-                return (
-                  <div key={oi} onClick={() => { onSelect(opt); onClose(); }} style={{
-                    padding: '6px 10px', borderRadius: 8, fontSize: 13, cursor: 'pointer', transition: 'all 0.15s',
-                    background: isSelected ? 'linear-gradient(135deg, #6366f1, #8b5cf6)' : 'transparent',
-                    color: isSelected ? '#fff' : '#1a1a2e', fontWeight: isSelected ? 600 : 400,
-                  }}
-                    onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = '#f1f5f9'; }}
-                    onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}
-                  >{opt}</div>
-                );
-              })}
-            </div>
-          </div>,
-          document.body
-        )}
+        {pos &&
+          createPortal(
+            <div
+              ref={menuRef}
+              style={{
+                position: "fixed",
+                bottom: pos.bottom,
+                left: pos.left,
+                background: "#fff",
+                borderRadius: 12,
+                padding: 8,
+                minWidth: 160,
+                zIndex: 99999,
+                boxShadow: "0 8px 30px rgba(0,0,0,0.12)",
+                border: "1px solid #e2e8f0",
+              }}
+            >
+              <Typography.Text
+                style={{
+                  fontSize: 10,
+                  color: "#94a3b8",
+                  display: "block",
+                  padding: "2px 6px 4px",
+                }}
+              >
+                {group.name}
+              </Typography.Text>
+              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                {group.options.map((opt, oi) => {
+                  const isSelected = selected === opt;
+                  return (
+                    <div
+                      key={oi}
+                      onClick={() => {
+                        onSelect(opt);
+                        onClose();
+                      }}
+                      style={{
+                        padding: "6px 10px",
+                        borderRadius: 8,
+                        fontSize: 13,
+                        cursor: "pointer",
+                        transition: "all 0.15s",
+                        background: isSelected
+                          ? "linear-gradient(135deg, #6366f1, #8b5cf6)"
+                          : "transparent",
+                        color: isSelected ? "#fff" : "#1a1a2e",
+                        fontWeight: isSelected ? 600 : 400,
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected)
+                          e.currentTarget.style.background = "#f1f5f9";
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSelected)
+                          e.currentTarget.style.background = "transparent";
+                      }}
+                    >
+                      {opt}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>,
+            document.body,
+          )}
       </>
     );
   };
@@ -511,27 +1228,87 @@ const GeneratePage: React.FC = () => {
   return (
     <div>
       {/* Header */}
-      <div className="gen-header animate-fadeInUp" style={{
-        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-        marginBottom: 24, padding: '20px 28px', borderRadius: 16,
-        background: 'linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)',
-        position: 'relative', overflow: 'hidden',
-      }}>
-        <div style={{ position: 'absolute', right: -30, bottom: -30, width: 160, height: 160, borderRadius: '50%', background: 'rgba(255,255,255,0.05)' }} />
-        <div style={{ display: 'flex', alignItems: 'center', gap: 14, position: 'relative' }}>
-          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/projects')}
-            style={{ background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', borderRadius: 10 }} />
+      <div
+        className="gen-header animate-fadeInUp"
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 24,
+          padding: "20px 28px",
+          borderRadius: 16,
+          background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            right: -30,
+            bottom: -30,
+            width: 160,
+            height: 160,
+            borderRadius: "50%",
+            background: "rgba(255,255,255,0.05)",
+          }}
+        />
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            position: "relative",
+          }}
+        >
+          <Button
+            icon={<ArrowLeftOutlined />}
+            onClick={() => navigate("/projects")}
+            style={{
+              background: "rgba(255,255,255,0.1)",
+              border: "1px solid rgba(255,255,255,0.2)",
+              color: "#fff",
+              borderRadius: 10,
+            }}
+          />
           <div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <Typography.Title level={4} style={{ margin: 0, color: '#fff', fontWeight: 700 }}>{projectName}</Typography.Title>
-              {project && <Tag style={{ background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.2)', color: 'rgba(255,255,255,0.8)', borderRadius: 6 }}>
-                {industryLabels[project.industry] || project.industry}
-              </Tag>}
+            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <Typography.Title
+                level={4}
+                style={{ margin: 0, color: "#fff", fontWeight: 700 }}
+              >
+                {projectName}
+              </Typography.Title>
+              {project && (
+                <Tag
+                  style={{
+                    background: "rgba(255,255,255,0.12)",
+                    border: "1px solid rgba(255,255,255,0.2)",
+                    color: "rgba(255,255,255,0.8)",
+                    borderRadius: 6,
+                  }}
+                >
+                  {industryLabels[project.industry] || project.industry}
+                </Tag>
+              )}
             </div>
-            <Typography.Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13 }}>描述视频 → AI优化 → 生成视频</Typography.Text>
+            <Typography.Text
+              style={{ color: "rgba(255,255,255,0.5)", fontSize: 13 }}
+            >
+              描述视频 → AI优化 → 生成视频
+            </Typography.Text>
           </div>
         </div>
-        <Tag style={{ background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', borderRadius: 20, fontSize: 13, padding: '4px 14px' }}>
+        <Tag
+          style={{
+            background: "rgba(255,255,255,0.1)",
+            border: "1px solid rgba(255,255,255,0.2)",
+            color: "#fff",
+            borderRadius: 20,
+            fontSize: 13,
+            padding: "4px 14px",
+          }}
+        >
           剩余 {userCredits} 积分
         </Tag>
       </div>
@@ -540,186 +1317,967 @@ const GeneratePage: React.FC = () => {
       {!showOptimized && (
         <>
           {/* Flow steps */}
-          <div className="animate-fadeInUp" style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            marginBottom: 24, padding: '16px 20px', borderRadius: 16,
-            background: '#fff', border: '1px solid #f0f0f5',
-            boxShadow: '0 2px 12px rgba(0,0,0,0.03)',
-          }}>
-            {[
-              { icon: <EditOutlined />, label: '描述视频+时长', color: '#6366f1' },
-              { icon: <ThunderboltOutlined />, label: 'AI智能优化', color: '#8b5cf6' },
-              { icon: <RocketOutlined />, label: '选择参数生成', color: '#10b981' },
-            ].map((step, i) => (
-              <React.Fragment key={i}>
-                {i > 0 && <div style={{ width: 40, height: 1, background: 'linear-gradient(90deg, #e2e8f0, #cbd5e1, #e2e8f0)', margin: '0 12px', flexShrink: 0 }} />}
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <div style={{ width: 32, height: 32, borderRadius: 10, background: `${step.color}12`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                    <span style={{ color: step.color, fontSize: 15 }}>{step.icon}</span>
-                  </div>
-                  <Typography.Text style={{ fontSize: 13, fontWeight: 500, color: '#1a1a2e' }}>{step.label}</Typography.Text>
-                </div>
-              </React.Fragment>
-            ))}
+          <div
+            className="animate-fadeInUp"
+            style={{
+              marginBottom: 24,
+              padding: "16px 20px",
+              borderRadius: 16,
+              background: "#fff",
+              border: "1px solid #f0f0f5",
+              boxShadow: "0 2px 12px rgba(0,0,0,0.03)",
+            }}
+          >
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-start",
+              }}
+            >
+              {/* 媒体类型选择区域 */}
+              <div
+                style={{
+                  marginRight: 70,
+                  position: "relative",
+                }}
+              >
+                {/* 标签文字 */}
+                <Typography.Text
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: "#475569",
+                    marginRight: 16,
+                  }}
+                >
+                  生成类型:
+                </Typography.Text>
+
+                {/* 单选按钮组 */}
+                <Radio.Group
+                  defaultValue="image"
+                  buttonStyle="solid"
+                  onChange={handleMediaTypeChange}
+                >
+                  {/* 图片选项 */}
+                  <Radio.Button value="image" style={{ zIndex: 0 }}>
+                    <PictureOutlined style={{ marginRight: 6, fontSize: 14 }} />{" "}
+                    {/* 图片图标 */}
+                    图片
+                  </Radio.Button>
+                  {/* 视频选项 */}
+                  <Radio.Button value="video">
+                    <VideoCameraOutlined
+                      style={{ marginRight: 6, fontSize: 14 }}
+                    />{" "}
+                    {/* 视频图标 */}
+                    视频
+                  </Radio.Button>
+                </Radio.Group>
+              </div>
+              {mediaType === "video" &&
+                [
+                  {
+                    icon: <EditOutlined />,
+                    label: "描述视频+时长",
+                    color: "#6366f1",
+                  },
+                  {
+                    icon: <ThunderboltOutlined />,
+                    label: "AI智能优化",
+                    color: "#8b5cf6",
+                  },
+                  {
+                    icon: <RocketOutlined />,
+                    label: "选择参数生成",
+                    color: "#10b981",
+                  },
+                ].map((step, i) => (
+                  <React.Fragment key={i}>
+                    {i > 0 && (
+                      <div
+                        style={{
+                          width: 40,
+                          height: 1,
+                          background:
+                            "linear-gradient(90deg, #e2e8f0, #cbd5e1, #e2e8f0)",
+                          margin: "0 12px",
+                          flexShrink: 0,
+                        }}
+                      />
+                    )}
+                    <div
+                      style={{ display: "flex", alignItems: "center", gap: 8 }}
+                    >
+                      <div
+                        style={{
+                          width: 32,
+                          height: 32,
+                          borderRadius: 10,
+                          background: `${step.color}12`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <span style={{ color: step.color, fontSize: 15 }}>
+                          {step.icon}
+                        </span>
+                      </div>
+                      <Typography.Text
+                        style={{
+                          fontSize: 13,
+                          fontWeight: 500,
+                          color: "#1a1a2e",
+                        }}
+                      >
+                        {step.label}
+                      </Typography.Text>
+                    </div>
+                  </React.Fragment>
+                ))}
+              {mediaType === "image" &&
+                [
+                  {
+                    icon: <EditOutlined />,
+                    label: "描述图片+尺寸",
+                    color: "#6366f1",
+                  },
+                  {
+                    icon: <ThunderboltOutlined />,
+                    label: "AI智能优化",
+                    color: "#8b5cf6",
+                  },
+                  {
+                    icon: <RocketOutlined />,
+                    label: "图片生成",
+                    color: "#10b981",
+                  },
+                ].map((step, i) => (
+                  <React.Fragment key={i}>
+                    {i > 0 && (
+                      <div
+                        style={{
+                          width: 40,
+                          height: 1,
+                          background:
+                            "linear-gradient(90deg, #e2e8f0, #cbd5e1, #e2e8f0)",
+                          margin: "0 12px",
+                          flexShrink: 0,
+                        }}
+                      />
+                    )}
+                    <div
+                      style={{ display: "flex", alignItems: "center", gap: 8 }}
+                    >
+                      <div
+                        style={{
+                          width: 32,
+                          height: 32,
+                          borderRadius: 10,
+                          background: `${step.color}12`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <span style={{ color: step.color, fontSize: 15 }}>
+                          {step.icon}
+                        </span>
+                      </div>
+                      <Typography.Text
+                        style={{
+                          fontSize: 13,
+                          fontWeight: 500,
+                          color: "#1a1a2e",
+                        }}
+                      >
+                        {step.label}
+                      </Typography.Text>
+                    </div>
+                  </React.Fragment>
+                ))}
+            </div>
           </div>
 
           {/* Input form */}
           <Form form={form} initialValues={{}}>
-            <Form.Item name="prompt" noStyle rules={[{ required: true, message: '请输入视频描述' }]} style={{ display: 'none' }} />
-            <div className="animate-fadeInUp" style={{
-              borderRadius: 20, background: '#fff', border: '1px solid #f0f0f5',
-              boxShadow: '0 4px 24px rgba(0,0,0,0.04)', overflow: 'visible',
-            }}>
+            <Form.Item
+              name="prompt"
+              noStyle
+              rules={[{ required: true, message: "请输入视频描述" }]}
+              style={{ display: "none" }}
+            />
+            <div
+              className="animate-fadeInUp"
+              style={{
+                borderRadius: 20,
+                background: "#fff",
+                border: "1px solid #f0f0f5",
+                boxShadow: "0 4px 24px rgba(0,0,0,0.04)",
+                overflow: "visible",
+              }}
+            >
               {/* Reference uploads */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px 0', minHeight: 60 }}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  padding: "12px 16px 0",
+                  minHeight: 60,
+                }}
+              >
                 {references.map((ref, i) => (
-                  <div key={i} className="ref-thumb" style={{ position: 'relative', width: 48, height: 48, borderRadius: 12, overflow: 'visible', flexShrink: 0 }}>
-                    <div style={{ width: 48, height: 48, borderRadius: 12, overflow: 'hidden', border: '1px solid #e2e8f0', cursor: 'pointer' }}
+                  <div
+                    key={i}
+                    className="ref-thumb"
+                    style={{
+                      position: "relative",
+                      width: 48,
+                      height: 48,
+                      borderRadius: 12,
+                      overflow: "visible",
+                      flexShrink: 0,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 48,
+                        height: 48,
+                        borderRadius: 12,
+                        overflow: "hidden",
+                        border: "1px solid #e2e8f0",
+                        cursor: "pointer",
+                      }}
                       onClick={() => {
-                        if (ref.type === 'video') {
-                          setPreviewVideoUrl(`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`);
+                        if (ref.type === "video") {
+                          setPreviewVideoUrl(
+                            `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`,
+                          );
                         }
-                      }}>
-                      {ref.type === 'image' ? (
-                        <Image src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`}
-                          style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                      }}
+                    >
+                      {ref.type === "image" ? (
+                        <Image
+                          src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "cover",
+                          }}
+                        />
                       ) : (
-                        <VideoThumb src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`} />
+                        <VideoThumb
+                          src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`}
+                        />
                       )}
                     </div>
                     {/* Delete button - shows on hover, physically deletes file */}
-                    <div className="ref-delete" onClick={(e) => {
-                      e.stopPropagation();
-                      deleteUpload(ref.url).catch(() => {});
-                      setReferences(prev => prev.filter((_, j) => j !== i));
-                    }}
+                    <div
+                      className="ref-delete"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        deleteUpload(ref.url).catch(() => { });
+                        setReferences((prev) => prev.filter((_, j) => j !== i));
+                      }}
                       style={{
-                        position: 'absolute', top: -4, right: -4, width: 16, height: 16, borderRadius: '50%',
-                        background: 'rgba(0,0,0,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        cursor: 'pointer', zIndex: 10, opacity: 0, transition: 'opacity 0.15s',
-                        backdropFilter: 'blur(4px)',
-                      }}>
-                      <CloseCircleOutlined style={{ color: '#fff', fontSize: 10 }} />
+                        position: "absolute",
+                        top: -4,
+                        right: -4,
+                        width: 16,
+                        height: 16,
+                        borderRadius: "50%",
+                        background: "rgba(0,0,0,0.55)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        cursor: "pointer",
+                        zIndex: 10,
+                        opacity: 0,
+                        transition: "opacity 0.15s",
+                        backdropFilter: "blur(4px)",
+                      }}
+                    >
+                      <CloseCircleOutlined
+                        style={{ color: "#fff", fontSize: 10 }}
+                      />
                     </div>
                   </div>
                 ))}
-                <Upload accept="image/*,video/*" showUploadList={false} multiple
+                <Upload
+                  accept="image/*,video/*"
+                  showUploadList={false}
+                  multiple
                   beforeUpload={(file) => {
-                    const isImage = file.type.startsWith('image/');
-                    const isVideo = file.type.startsWith('video/');
-                    if (!isImage && !isVideo) { message.error('仅支持图片或视频文件'); return false; }
+                    const isImage = file.type.startsWith("image/");
+                    const isVideo = file.type.startsWith("video/");
+                    if (!isImage && !isVideo) {
+                      message.error("仅支持图片或视频文件");
+                      return false;
+                    }
                     const maxMB = isVideo ? 100 : 10;
-                    if (file.size / 1024 / 1024 > maxMB) { message.error(`${isVideo ? '视频' : '图片'}大小不能超过${maxMB}MB`); return false; }
-                    const imageCount = references.filter(r => r.type === 'image').length;
-                    const videoCount = references.filter(r => r.type === 'video').length;
-                    if (isImage && imageCount >= 10) { message.error('最多上传10张图片'); return false; }
-                    if (isVideo && videoCount >= 3) { message.error('最多上传3个视频'); return false; }
+                    if (file.size / 1024 / 1024 > maxMB) {
+                      message.error(
+                        `${isVideo ? "视频" : "图片"}大小不能超过${maxMB}MB`,
+                      );
+                      return false;
+                    }
+                    const imageCount = references.filter(
+                      (r) => r.type === "image",
+                    ).length;
+                    const videoCount = references.filter(
+                      (r) => r.type === "video",
+                    ).length;
+                    if (isImage && imageCount >= 10) {
+                      message.error("最多上传10张图片");
+                      return false;
+                    }
+                    if (isVideo && videoCount >= 3) {
+                      message.error("最多上传3个视频");
+                      return false;
+                    }
                     setUploading(true);
                     const uploadFn = isImage ? uploadImage : uploadVideo;
-                    uploadFn(file).then(res => {
-                      const typeLabel = isImage ? '图片' : '视频';
-                      const typeCount = isImage ? imageCount + 1 : videoCount + 1;
-                      setReferences(prev => [...prev, { url: res.url, type: isImage ? 'image' : 'video', name: `${typeLabel}${typeCount}` }]);
-                      message.success(`${typeLabel}上传成功`);
-                    }).catch(() => message.error('上传失败')).finally(() => setUploading(false));
+                    uploadFn(file)
+                      .then((res) => {
+                        const typeLabel = isImage ? "图片" : "视频";
+                        const typeCount = isImage
+                          ? imageCount + 1
+                          : videoCount + 1;
+                        setReferences((prev) => [
+                          ...prev,
+                          {
+                            url: res.url,
+                            type: isImage ? "image" : "video",
+                            name: `${typeLabel}${typeCount}`,
+                          },
+                        ]);
+                        message.success(`${typeLabel}上传成功`);
+                      })
+                      .catch(() => message.error("上传失败"))
+                      .finally(() => setUploading(false));
                     return false;
                   }}
                 >
                   <Tooltip title={`参考内容（${references.length}/10）`}>
-                    <div style={{ width: 48, height: 48, borderRadius: 12, border: '1.5px dashed #d9d9d9', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.2s', flexShrink: 0 }}
-                      onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.background = 'rgba(99,102,241,0.04)'; }}
-                      onMouseLeave={e => { e.currentTarget.style.borderColor = '#d9d9d9'; e.currentTarget.style.background = 'transparent'; }}
+                    <div
+                      style={{
+                        width: 48,
+                        height: 48,
+                        borderRadius: 12,
+                        border: "1.5px dashed #d9d9d9",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        cursor: "pointer",
+                        transition: "all 0.2s",
+                        flexShrink: 0,
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.borderColor = "#6366f1";
+                        e.currentTarget.style.background =
+                          "rgba(99,102,241,0.04)";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.borderColor = "#d9d9d9";
+                        e.currentTarget.style.background = "transparent";
+                      }}
                     >
-                      {uploading ? <LoadingOutlined style={{ fontSize: 18, color: '#6366f1' }} /> : <PlusOutlined style={{ fontSize: 18, color: '#94a3b8' }} />}
+                      {uploading ? (
+                        <LoadingOutlined
+                          style={{ fontSize: 18, color: "#6366f1" }}
+                        />
+                      ) : (
+                        <PlusOutlined
+                          style={{ fontSize: 18, color: "#94a3b8" }}
+                        />
+                      )}
                     </div>
                   </Tooltip>
                 </Upload>
               </div>
 
               {/* Textarea */}
-              <div style={{ padding: '8px 16px 4px' }}>
-                <Input.TextArea ref={promptRef} value={promptText}
+              <div style={{ padding: "8px 16px 4px" }}>
+                <Input.TextArea
+                  ref={promptRef}
+                  value={promptText}
                   onChange={(e) => {
                     const val = e.target.value;
                     setPromptText(val);
                     form.setFieldsValue({ prompt: val });
-                    const lastAt = val.lastIndexOf('@');
+                    const lastAt = val.lastIndexOf("@");
                     if (lastAt >= 0) {
                       const afterAt = val.slice(lastAt + 1);
-                      if (!afterAt.includes(' ') && !afterAt.includes('\n')) { setShowMention(true); setMentionFilter(afterAt); return; }
+                      if (!afterAt.includes(" ") && !afterAt.includes("\n")) {
+                        setShowMention(true);
+                        setMentionFilter(afterAt);
+                        return;
+                      }
                     }
                     setShowMention(false);
                   }}
-                  rows={3} placeholder="上传参考素材、输入文字，自由组合图、文多元素。输入 @ 可引用参考内容..."
-                  maxLength={500} bordered={false} autoSize={{ minRows: 2, maxRows: 6 }}
-                  style={{ padding: '6px 2px', fontSize: 15, lineHeight: 1.7, resize: 'none', caretColor: '#6366f1' }}
+                  rows={3}
+                  placeholder="上传参考素材、输入文字，自由组合图、文多元素。输入 @ 可引用参考内容..."
+                  maxLength={500}
+                  bordered={false}
+                  autoSize={{ minRows: 2, maxRows: 6 }}
+                  style={{
+                    padding: "6px 2px",
+                    fontSize: 15,
+                    lineHeight: 1.7,
+                    resize: "none",
+                    caretColor: "#6366f1",
+                  }}
                 />
               </div>
 
               {/* @ mention dropdown */}
               {showMention && references.length > 0 && (
-                <div style={{ margin: '0 16px 8px', background: '#fff', borderRadius: 10, boxShadow: '0 6px 24px rgba(0,0,0,0.12)', border: '1px solid #e2e8f0', padding: 6, maxHeight: 180, overflowY: 'auto' }}>
-                  {references.filter(r => !mentionFilter || r.name.includes(mentionFilter)).map((ref, i) => (
-                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8, cursor: 'pointer', transition: 'background 0.15s' }}
-                      onMouseEnter={e => e.currentTarget.style.background = '#f1f5f9'}
-                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-                      onMouseDown={(e) => {
-                        e.preventDefault();
-                        const textarea = (promptRef.current as any)?.resizableTextArea?.textArea || promptRef.current?.nativeElement?.querySelector('textarea') || promptRef.current;
-                        if (!textarea || !textarea.value) return;
-                        const val = textarea.value;
-                        const lastAt = val.lastIndexOf('@');
-                        const newVal = val.slice(0, lastAt) + `@${ref.name} `;
-                        setPromptText(newVal);
-                        form.setFieldValue('prompt', newVal);
-                        setShowMention(false);
-                        setTimeout(() => { textarea.focus(); textarea.selectionStart = newVal.length; textarea.selectionEnd = newVal.length; }, 50);
-                      }}
-                    >
-                      <div style={{ width: 32, height: 32, borderRadius: 8, overflow: 'hidden', background: ref.type === 'image' ? '#f1f5f9' : '#1a1a2e', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                        {ref.type === 'image' ? <img src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <PlayCircleOutlined style={{ color: '#fff', fontSize: 14 }} />}
+                <div
+                  style={{
+                    margin: "0 16px 8px",
+                    background: "#fff",
+                    borderRadius: 10,
+                    boxShadow: "0 6px 24px rgba(0,0,0,0.12)",
+                    border: "1px solid #e2e8f0",
+                    padding: 6,
+                    maxHeight: 180,
+                    overflowY: "auto",
+                  }}
+                >
+                  {references
+                    .filter(
+                      (r) => !mentionFilter || r.name.includes(mentionFilter),
+                    )
+                    .map((ref, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 10,
+                          padding: "8px 10px",
+                          borderRadius: 8,
+                          cursor: "pointer",
+                          transition: "background 0.15s",
+                        }}
+                        onMouseEnter={(e) =>
+                          (e.currentTarget.style.background = "#f1f5f9")
+                        }
+                        onMouseLeave={(e) =>
+                          (e.currentTarget.style.background = "transparent")
+                        }
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          const textarea =
+                            (promptRef.current as any)?.resizableTextArea
+                              ?.textArea ||
+                            promptRef.current?.nativeElement?.querySelector(
+                              "textarea",
+                            ) ||
+                            promptRef.current;
+                          if (!textarea || !textarea.value) return;
+                          const val = textarea.value;
+                          const lastAt = val.lastIndexOf("@");
+                          const newVal = val.slice(0, lastAt) + `@${ref.name} `;
+                          setPromptText(newVal);
+                          form.setFieldValue("prompt", newVal);
+                          setShowMention(false);
+                          setTimeout(() => {
+                            textarea.focus();
+                            textarea.selectionStart = newVal.length;
+                            textarea.selectionEnd = newVal.length;
+                          }, 50);
+                        }}
+                      >
+                        <div
+                          style={{
+                            width: 32,
+                            height: 32,
+                            borderRadius: 8,
+                            overflow: "hidden",
+                            background:
+                              ref.type === "image" ? "#f1f5f9" : "#1a1a2e",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexShrink: 0,
+                          }}
+                        >
+                          {ref.type === "image" ? (
+                            <img
+                              src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`}
+                              style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "cover",
+                              }}
+                            />
+                          ) : (
+                            <PlayCircleOutlined
+                              style={{ color: "#fff", fontSize: 14 }}
+                            />
+                          )}
+                        </div>
+                        <Typography.Text style={{ fontSize: 13 }}>
+                          {ref.name}
+                        </Typography.Text>
+                        <Tag style={{ marginLeft: "auto", fontSize: 11 }}>
+                          {ref.type === "image" ? "图片" : "视频"}
+                        </Tag>
                       </div>
-                      <Typography.Text style={{ fontSize: 13 }}>{ref.name}</Typography.Text>
-                      <Tag style={{ marginLeft: 'auto', fontSize: 11 }}>{ref.type === 'image' ? '图片' : '视频'}</Tag>
-                    </div>
-                  ))}
+                    ))}
                 </div>
               )}
 
               {/* Toolbar: duration + industry options + optimize button */}
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px 12px', gap: 8, flexWrap: 'wrap', position: 'relative', zIndex: 50, minHeight: 48 }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, flex: 1, flexWrap: 'wrap' }}>
-                  {/* Duration selector */}
-                  <PortalDropdown label="时长" value={`${videoDuration}`}
-                    options={engineOptions.durations.map(d => `${d}`)}
-                    suffix="秒"
-                    expanded={expandedEngine === 'duration'}
-                    onToggle={() => setExpandedEngine(expandedEngine === 'duration' ? null : 'duration')}
-                    onSelect={(v) => setVideoDuration(parseInt(v))}
-                    onClose={() => setExpandedEngine(null)}
-                  />
-                  {currentOptionGroups.map((group, gi) => {
-                    const isExpanded = expandedGroup === group.name;
-                    const selected = selectedOptions[group.name];
-                    return (
-                      <PortalOptionGroup key={`og-${gi}`}
-                        group={group} selected={selected} expanded={isExpanded}
-                        onToggle={() => setExpandedGroup(isExpanded ? null : group.name)}
-                        onSelect={(opt) => {
-                          setSelectedOptions(prev => {
-                            const next = { ...prev };
-                            if (next[group.name] === opt) { delete next[group.name]; } else { next[group.name] = opt; }
-                            return next;
-                          });
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 12px 12px",
+                  gap: 8,
+                  flexWrap: "wrap",
+                  position: "relative",
+                  zIndex: 50,
+                  minHeight: 48,
+                }}
+              >
+                {/* 媒体类型为视频（mediaType=2）时显示时长选择器和行业选项 */}
+                {mediaType !== "image" && (
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                      flex: 1,
+                      flexWrap: "wrap",
+                    }}
+                  >
+                    {/* Duration selector */}
+                    <PortalDropdown
+                      label="时长"
+                      value={`${videoDuration}`}
+                      options={engineOptions.durations.map((d) => `${d}`)}
+                      suffix="秒"
+                      expanded={expandedEngine === "duration"}
+                      onToggle={() =>
+                        setExpandedEngine(
+                          expandedEngine === "duration" ? null : "duration",
+                        )
+                      }
+                      onSelect={(v) => setVideoDuration(parseInt(v))}
+                      onClose={() => setExpandedEngine(null)}
+                    />
+                    {currentOptionGroups.map((group, gi) => {
+                      const isExpanded = expandedGroup === group.name;
+                      const selected = selectedOptions[group.name];
+                      return (
+                        <PortalOptionGroup
+                          key={`og-${gi}`}
+                          group={group}
+                          selected={selected}
+                          expanded={isExpanded}
+                          onToggle={() =>
+                            setExpandedGroup(isExpanded ? null : group.name)
+                          }
+                          onSelect={(opt) => {
+                            setSelectedOptions((prev) => {
+                              const next = { ...prev };
+                              if (next[group.name] === opt) {
+                                delete next[group.name];
+                              } else {
+                                next[group.name] = opt;
+                              }
+                              return next;
+                            });
+                          }}
+                          onClose={() => setExpandedGroup(null)}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+                {mediaType == "image" && (
+                  <div
+                    style={{ position: "relative", display: "inline-block" }}
+                  >
+                    <button
+                      onClick={() =>
+                        setShowImageSettingsModal(!showImageSettingsModal)
+                      }
+                      className="image-settings-trigger"
+                      style={{
+                        minWidth: 220,
+                        padding: "0px 16px",
+                        height: 30,
+                        borderRadius: 10,
+                        border: "1px solid #e2e8f0",
+                        backgroundColor: "#f8f9fc",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 12,
+                        transition: "all 0.2s",
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 10,
                         }}
-                        onClose={() => setExpandedGroup(null)}
+                      >
+                        {/* 比例图标 */}
+
+                        <div style={{ textAlign: "left" }}>
+                          <Typography.Text
+                            style={{
+                              fontSize: 13,
+                              fontWeight: 600,
+                              color: "#374151",
+                              marginRight: 10,
+                            }}
+                          >
+                            {selectedRatio === "auto" ? "智能" : selectedRatio}
+                          </Typography.Text>
+                          <Typography.Text
+                            style={{ fontSize: 12, color: "#9ca3af" }}
+                          >
+                            {selectedResolution == "2K" ? "高清 2K" : "超清 4K"}
+                            | {width}×{height}
+                            {/* {selectedResolution === '2k' ? '高清 2K' : '超清 4K'} | {width}×{height} */}
+                          </Typography.Text>
+                        </div>
+                      </div>
+                      <CaretDownOutlined
+                        style={{ fontSize: 14, color: "#9ca3af" }}
                       />
-                    );
-                  })}
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-                  <Button type="primary" size="large" onClick={handleOptimize} loading={optimizing}
-                    style={{ borderRadius: 10, fontWeight: 600, minWidth: 140, height: 40, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 16px rgba(99,102,241,0.35)' }}>
+                    </button>
+
+                    {showImageSettingsModal && (
+                      <div
+                        className="image-settings-popover"
+                        style={{
+                          position: "absolute",
+                          bottom: "calc(100% + 8px)",
+                          left: 0,
+                          width: 520,
+                          backgroundColor: "#fff",
+                          borderRadius: 16,
+                          boxShadow: "0 10px 40px rgba(0,0,0,0.15)",
+                          padding: 20,
+                          border: "none",
+                          zIndex: 9999,
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {/* 选择比例 */}
+                        <div style={{ marginBottom: 20 }}>
+                          <Typography.Text
+                            style={{
+                              display: "block",
+                              marginBottom: 10,
+                              fontSize: 13,
+                              fontWeight: 500,
+                              color: "#666666",
+                            }}
+                          >
+                            选择比例
+                          </Typography.Text>
+                          <div
+                            style={{
+                              display: "flex",
+                              flexWrap: "wrap",
+                              gap: 6,
+                            }}
+                          >
+                            {ratioOptions.map((item) => (
+                              <button
+                                key={item.value}
+                                onClick={() => {
+                                  setSelectedRatio(item.value);
+                                  calculateSizeFromRatione(item.label);
+                                }}
+                                style={{
+                                  flex: "0 0 calc(11.11% - 5px)",
+                                  minWidth: 48,
+                                  height: 56,
+                                  borderRadius: 8,
+                                  border:
+                                    selectedRatio === item.value
+                                      ? "2px solid #6366f1"
+                                      : "1px solid #e5e7eb",
+                                  backgroundColor:
+                                    selectedRatio === item.value
+                                      ? "#fff"
+                                      : "#f9fafb",
+                                  cursor: "pointer",
+                                  display: "flex",
+                                  flexDirection: "column",
+                                  justifyContent: "center",
+                                  alignItems: "center",
+                                  transition: "all 0.2s",
+                                }}
+                              >
+                                <div
+                                  style={{
+                                    width: item.value === "auto" ? 16 : 20,
+                                    height: item.value === "auto" ? 16 : 20,
+                                    border: `2px solid ${selectedRatio === item.value ? "#6366f1" : "#9ca3af"}`,
+                                    borderRadius: item.value === "auto" ? 3 : 3,
+                                    marginBottom: 3,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                  }}
+                                >
+                                  {item.value === "auto" && (
+                                    <span
+                                      style={{
+                                        fontSize: 8,
+                                        color:
+                                          selectedRatio === item.value
+                                            ? "#6366f1"
+                                            : "#9ca3af",
+                                      }}
+                                    >
+                                      智
+                                    </span>
+                                  )}
+                                </div>
+                                <span
+                                  style={{
+                                    fontSize: 10,
+                                    color:
+                                      selectedRatio === item.value
+                                        ? "#6366f1"
+                                        : "#6b7280",
+                                    fontWeight:
+                                      selectedRatio === item.value ? 600 : 400,
+                                  }}
+                                >
+                                  {item.value}
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+
+                        {/* 选择分辨率 */}
+                        <div style={{ marginBottom: 20 }}>
+                          <Typography.Text
+                            style={{
+                              display: "block",
+                              marginBottom: 10,
+                              fontSize: 13,
+                              fontWeight: 500,
+                              color: "#666666",
+                            }}
+                          >
+                            选择分辨率
+                          </Typography.Text>
+                          <div style={{ display: "flex", gap: 8 }}>
+                            {resolutionOptions.map((item) => (
+                              <button
+                                key={item.value}
+                                onClick={() => {
+                                  setSelectedResolution(item.value);
+                                  calculateSizeFromRatiotwo(item.label);
+                                }}
+                                style={{
+                                  flex: 1,
+                                  height: 48,
+                                  borderRadius: 8,
+                                  border:
+                                    selectedResolution === item.value
+                                      ? "2px solid #6366f1"
+                                      : "1px solid #e5e7eb",
+                                  backgroundColor:
+                                    selectedResolution === item.value
+                                      ? "#6366f1"
+                                      : "#f9fafb",
+                                  cursor: "pointer",
+                                  display: "flex",
+                                  justifyContent: "center",
+                                  alignItems: "center",
+                                  transition: "all 0.2s",
+                                }}
+                              >
+                                <span
+                                  style={{
+                                    fontSize: 13,
+                                    fontWeight: 600,
+                                    color:
+                                      selectedResolution === item.value
+                                        ? "#fff"
+                                        : "#4b5563",
+                                  }}
+                                >
+                                  {item.value}
+                                  {item.value === "4k" && (
+                                    <span style={{ marginLeft: 3 }}>✨</span>
+                                  )}
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+
+                        {/* 尺寸 */}
+                        <div>
+                          <Typography.Text
+                            style={{
+                              display: "block",
+                              marginBottom: 10,
+                              fontSize: 13,
+                              fontWeight: 500,
+                              color: "#666666",
+                            }}
+                          >
+                            尺寸
+                          </Typography.Text>
+                          <div
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 8,
+                            }}
+                          >
+                            <div
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                flex: 1,
+                                maxWidth: 140,
+                              }}
+                            >
+                              <span
+                                style={{
+                                  color: "#9ca3af",
+                                  fontSize: 12,
+                                  marginRight: 6,
+                                }}
+                              >
+                                W
+                              </span>
+                              <Input
+                                value={width}
+                                onChange={(e) =>
+                                  setWidth(Number(e.target.value) || 0)
+                                }
+                                style={{
+                                  flex: 1,
+                                  textAlign: "center",
+                                  borderRadius: 6,
+                                  height: 40,
+                                  border: "1px solid #e5e7eb",
+                                  backgroundColor: "#f9fafb",
+                                  fontSize: 14,
+                                  fontWeight: 600,
+                                  color: "#1f2937",
+                                }}
+                              />
+                            </div>
+
+                            <button
+                              onClick={handleSwap}
+                              style={{
+                                width: 28,
+                                height: 28,
+                                borderRadius: 6,
+                                border: "1px solid #e5e7eb",
+                                backgroundColor: "#fff",
+                                cursor: "pointer",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                color: "#6366f1",
+                              }}
+                            >
+                              <SwapOutlined style={{ fontSize: 12 }} />
+                            </button>
+
+                            <div
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                flex: 1,
+                                maxWidth: 140,
+                              }}
+                            >
+                              <span
+                                style={{
+                                  color: "#9ca3af",
+                                  fontSize: 12,
+                                  marginRight: 6,
+                                }}
+                              >
+                                H
+                              </span>
+                              <Input
+                                value={height}
+                                onChange={(e) =>
+                                  setHeight(Number(e.target.value) || 0)
+                                }
+                                style={{
+                                  flex: 1,
+                                  textAlign: "center",
+                                  borderRadius: 6,
+                                  height: 40,
+                                  border: "1px solid #e5e7eb",
+                                  backgroundColor: "#f9fafb",
+                                  fontSize: 14,
+                                  fontWeight: 600,
+                                  color: "#1f2937",
+                                }}
+                              />
+                            </div>
+
+                            <span style={{ color: "#9ca3af", fontSize: 12 }}>
+                              PX
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    flexShrink: 0,
+                  }}
+                >
+                  {mediaType === "image" && (
+                    <span style={{ color: "#7c7c7c", fontSize: 14 }}>
+                      （请在左侧选择图片比例和尺寸）
+                    </span>
+                  )}
+                  <Button
+                    type="primary"
+                    size="large"
+                    onClick={handleOptimize}
+                    loading={optimizing}
+                    style={{
+                      borderRadius: 10,
+                      fontWeight: 600,
+                      minWidth: 140,
+                      height: 40,
+                      background:
+                        "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+                      border: "none",
+                      boxShadow: "0 4px 16px rgba(99,102,241,0.35)",
+                    }}
+                  >
                     AI优化提示词
                   </Button>
                 </div>
@@ -731,179 +2289,667 @@ const GeneratePage: React.FC = () => {
 
       {/* ========== STEP 2: Review + Generate ========== */}
       {showOptimized && currentRecord && (
-        <Card className="animate-fadeInUp" style={{ borderRadius: 16 }} styles={{ body: { padding: '24px 28px' } }}>
+        <Card
+          className="animate-fadeInUp"
+          style={{ borderRadius: 16 }}
+          styles={{ body: { padding: "24px 28px" } }}
+        >
           {/* Text credits info */}
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24, padding: '14px 18px', borderRadius: 12,
-            background: 'linear-gradient(135deg, rgba(16,185,129,0.06), rgba(5,150,105,0.06))',
-            border: '1px solid rgba(16,185,129,0.15)',
-          }}>
-            <CheckCircleOutlined style={{ color: '#10b981', fontSize: 22 }} />
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              marginBottom: 24,
+              padding: "14px 18px",
+              borderRadius: 12,
+              background:
+                "linear-gradient(135deg, rgba(16,185,129,0.06), rgba(5,150,105,0.06))",
+              border: "1px solid rgba(16,185,129,0.15)",
+            }}
+          >
+            <CheckCircleOutlined style={{ color: "#10b981", fontSize: 22 }} />
             <div>
-              <Typography.Text strong style={{ fontSize: 15, display: 'block' }}>提示词优化完成</Typography.Text>
-              <Typography.Text style={{ fontSize: 12, color: '#94a3b8' }}>
-                文本优化消耗 {lastTextCredits} 积分 ({lastTextTokens} tokens) · 您可以编辑提示词后选择参数生成视频
+              <Typography.Text
+                strong
+                style={{ fontSize: 15, display: "block" }}
+              >
+                提示词优化完成
+              </Typography.Text>
+              <Typography.Text style={{ fontSize: 12, color: "#94a3b8" }}>
+                文本优化消耗 {lastTextCredits} 积分·
+                您可以编辑提示词后选择参数生成视频
               </Typography.Text>
             </div>
           </div>
 
           {/* Prompts comparison */}
-          <div className="gen-prompt-row" style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
-            <div style={{ flex: '1 1 45%', minWidth: 240 }}>
-              <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 8 }}>原始提示词</Typography.Text>
-              <div style={{ padding: 14, borderRadius: 12, background: '#f8f9fc', border: '1px solid #f0f0f5', minHeight: 100 }}>
-                <Typography.Text style={{ fontSize: 14, color: '#64748b', lineHeight: 1.7 }}>{currentRecord.originalPrompt}</Typography.Text>
+          <div
+            className="gen-prompt-row"
+            style={{ display: "flex", gap: 20, flexWrap: "wrap" }}
+          >
+            <div style={{ flex: "1 1 45%", minWidth: 240 }}>
+              <Typography.Text
+                style={{
+                  fontSize: 12,
+                  color: "#94a3b8",
+                  display: "block",
+                  marginBottom: 8,
+                }}
+              >
+                原始提示词
+              </Typography.Text>
+              <div
+                style={{
+                  padding: 14,
+                  borderRadius: 12,
+                  background: "#f8f9fc",
+                  border: "1px solid #f0f0f5",
+                  minHeight: 100,
+                }}
+              >
+                <Typography.Text
+                  style={{ fontSize: 14, color: "#64748b", lineHeight: 1.7 }}
+                >
+                  {currentRecord.originalPrompt}
+                </Typography.Text>
               </div>
             </div>
-            <div style={{ flex: '1 1 45%', minWidth: 240 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-                <Typography.Text style={{ fontSize: 12, color: '#94a3b8' }}>
-                  优化后的提示词 {!isEditingOptimized && <span style={{ color: '#6366f1' }}>（可编辑）</span>}
+            <div style={{ flex: "1 1 45%", minWidth: 240 }}>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: 8,
+                }}
+              >
+                <Typography.Text style={{ fontSize: 12, color: "#94a3b8" }}>
+                  优化后的提示词{" "}
+                  {!isEditingOptimized && (
+                    <span style={{ color: "#6366f1" }}>（可编辑）</span>
+                  )}
                 </Typography.Text>
                 {!isEditingOptimized && (
                   <Space size={4}>
-                    <Tooltip title="复制"><Button type="text" size="small" icon={<CopyOutlined />} onClick={() => { navigator.clipboard.writeText(editedPrompt); message.success('已复制'); }} style={{ color: '#94a3b8' }} /></Tooltip>
-                    <Tooltip title="编辑"><Button type="text" size="small" icon={<EditOutlined />} onClick={() => setIsEditingOptimized(true)} style={{ color: '#6366f1' }} /></Tooltip>
+                    <Tooltip title="复制">
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<CopyOutlined />}
+                        onClick={() => {
+                          navigator.clipboard.writeText(editedPrompt);
+                          message.success("已复制");
+                        }}
+                        style={{ color: "#94a3b8" }}
+                      />
+                    </Tooltip>
+                    <Tooltip title="编辑">
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<EditOutlined />}
+                        onClick={() => setIsEditingOptimized(true)}
+                        style={{ color: "#6366f1" }}
+                      />
+                    </Tooltip>
                   </Space>
                 )}
               </div>
               {isEditingOptimized ? (
                 <div>
-                  <Input.TextArea value={editedPrompt} onChange={(e) => setEditedPrompt(e.target.value)} rows={5}
-                    style={{ borderRadius: 12, fontSize: 14, lineHeight: 1.7, border: '1px solid rgba(99,102,241,0.25)', background: 'rgba(99,102,241,0.02)' }} />
-                  <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 8 }}>
-                    <Button size="small" onClick={() => { setEditedPrompt(currentRecord.optimizedPrompt || ''); setIsEditingOptimized(false); }}>取消</Button>
-                    <Button size="small" type="primary" onClick={() => { setIsEditingOptimized(false); message.success('提示词已更新'); }}
-                      style={{ borderRadius: 6, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', border: 'none' }}>保存</Button>
+                  <Input.TextArea
+                    value={editedPrompt}
+                    onChange={(e) => setEditedPrompt(e.target.value)}
+                    rows={5}
+                    style={{
+                      borderRadius: 12,
+                      fontSize: 14,
+                      lineHeight: 1.7,
+                      border: "1px solid rgba(99,102,241,0.25)",
+                      background: "rgba(99,102,241,0.02)",
+                    }}
+                  />
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "flex-end",
+                      gap: 8,
+                      marginTop: 8,
+                    }}
+                  >
+                    <Button
+                      size="small"
+                      onClick={() => {
+                        setEditedPrompt(currentRecord.optimizedPrompt || "");
+                        setIsEditingOptimized(false);
+                      }}
+                    >
+                      取消
+                    </Button>
+                    <Button
+                      size="small"
+                      type="primary"
+                      onClick={() => {
+                        setIsEditingOptimized(false);
+                        message.success("提示词已更新");
+                      }}
+                      style={{
+                        borderRadius: 6,
+                        background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
+                        border: "none",
+                      }}
+                    >
+                      保存
+                    </Button>
                   </div>
                 </div>
               ) : (
-                <div style={{ padding: 14, borderRadius: 12, background: 'rgba(99,102,241,0.02)', border: '1px solid rgba(99,102,241,0.1)', minHeight: 100 }}>
-                  <Typography.Text style={{ fontSize: 14, color: '#1a1a2e', lineHeight: 1.7 }}>{editedPrompt}</Typography.Text>
+                <div
+                  style={{
+                    padding: 14,
+                    borderRadius: 12,
+                    background: "rgba(99,102,241,0.02)",
+                    border: "1px solid rgba(99,102,241,0.1)",
+                    minHeight: 100,
+                  }}
+                >
+                  <Typography.Text
+                    style={{ fontSize: 14, color: "#1a1a2e", lineHeight: 1.7 }}
+                  >
+                    {editedPrompt}
+                  </Typography.Text>
                 </div>
               )}
             </div>
           </div>
 
           {/* Video params selection */}
-          <div style={{ marginTop: 24 }}>
-            <Typography.Text style={{ fontSize: 13, color: '#1a1a2e', fontWeight: 600, display: 'block', marginBottom: 12 }}>选择视频参数</Typography.Text>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 8, background: '#f8f9fc', border: '1px solid #e2e8f0' }}>
-                <Typography.Text style={{ fontSize: 12, color: '#94a3b8' }}>时长</Typography.Text>
-                <Typography.Text strong style={{ fontSize: 13, color: '#6366f1' }}>{videoDuration}s</Typography.Text>
+          {/* {mediaType !== 'image' && (
+            <div style={{ marginTop: 24 }}>
+              <Typography.Text style={{ fontSize: 13, color: '#1a1a2e', fontWeight: 600, display: 'block', marginBottom: 12 }}>选择视频参数</Typography.Text>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 8, background: '#f8f9fc', border: '1px solid #e2e8f0' }}>
+                  <Typography.Text style={{ fontSize: 12, color: '#94a3b8' }}>时长</Typography.Text>
+                  <Typography.Text strong style={{ fontSize: 13, color: '#6366f1' }}>{videoDuration}s</Typography.Text>
+                </div>
+                <PortalDropdown label="比例" value={videoAspectRatio}
+                  options={engineOptions.ratios}
+                  expanded={expandedEngine === 'ratio'}
+                  onToggle={() => setExpandedEngine(expandedEngine === 'ratio' ? null : 'ratio')}
+                  onSelect={(v) => setVideoAspectRatio(v as AspectRatio)}
+                  onClose={() => setExpandedEngine(null)}
+                />
+                <PortalDropdown label="分辨率" value={videoResolution}
+                  options={engineOptions.resolutions}
+                  expanded={expandedEngine === 'resolution'}
+                  onToggle={() => setExpandedEngine(expandedEngine === 'resolution' ? null : 'resolution')}
+                  onSelect={(v) => setVideoResolution(v as Resolution)}
+                  onClose={() => setExpandedEngine(null)}
+                />
               </div>
-              <PortalDropdown label="比例" value={videoAspectRatio}
-                options={engineOptions.ratios}
-                expanded={expandedEngine === 'ratio'}
-                onToggle={() => setExpandedEngine(expandedEngine === 'ratio' ? null : 'ratio')}
-                onSelect={(v) => setVideoAspectRatio(v as AspectRatio)}
-                onClose={() => setExpandedEngine(null)}
-              />
-              <PortalDropdown label="分辨率" value={videoResolution}
-                options={engineOptions.resolutions}
-                expanded={expandedEngine === 'resolution'}
-                onToggle={() => setExpandedEngine(expandedEngine === 'resolution' ? null : 'resolution')}
-                onSelect={(v) => setVideoResolution(v as Resolution)}
-                onClose={() => setExpandedEngine(null)}
-              />
             </div>
-          </div>
+          )} */}
+
+          {/* Image params selection
+          {mediaType === 'image' && currentRecord && (
+            <div style={{ marginTop: 24, padding: 16, borderRadius: 12, background: '#f8f9fc' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+                <div style={{ textAlign: 'center' }}>
+                  <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block', marginBottom: 4 }}>分辨率</Typography.Text>
+                  <Typography.Text strong style={{ fontSize: 14, color: '#1a1a2e' }}>{currentRecord.imageSize || '-'}</Typography.Text>
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block', marginBottom: 4 }}>画面比例</Typography.Text>
+                  <Typography.Text strong style={{ fontSize: 14, color: '#1a1a2e' }}>{currentRecord.imageProportion || '-'}</Typography.Text>
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block', marginBottom: 4 }}>画面尺寸</Typography.Text>
+                  <Typography.Text strong style={{ fontSize: 14, color: '#1a1a2e' }}>{currentRecord.imagePx || '-'}</Typography.Text>
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block', marginBottom: 4 }}>消耗积分</Typography.Text>
+                  <Typography.Text strong style={{ fontSize: 14, color: '#1a1a2e' }}>-</Typography.Text>
+                </div>
+              </div>
+            </div>
+          )} */}
 
           {/* Video credits + generate button */}
-          <div style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-            marginTop: 20, padding: '14px 18px', borderRadius: 12, background: '#f8f9fc',
-            border: '1px solid #f0f0f5',
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-              <div>
-                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>文字积分</Typography.Text>
-                <Typography.Text strong style={{ fontSize: 14, color: '#6366f1' }}>{lastTextCredits}</Typography.Text>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginTop: 20,
+              padding: "14px 18px",
+              borderRadius: 12,
+              background: "#f8f9fc",
+              border: "1px solid #f0f0f5",
+            }}
+          >
+            {/* Video params selection */}
+            {mediaType !== "image" && (
+              <div
+                style={{
+                  marginTop: 24,
+                  borderRadius: 12,
+                  background: "#f8f9fc",
+                  width: "25%",
+                }}
+              >
+                <Typography.Text
+                  style={{
+                    fontSize: 13,
+                    color: "#1a1a2e",
+                    fontWeight: 600,
+                    display: "block",
+                    marginBottom: 12,
+                  }}
+                >
+                  选择视频参数
+                </Typography.Text>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                      padding: "5px 12px",
+                      borderRadius: 8,
+                      background: "#f8f9fc",
+                      border: "1px solid #e2e8f0",
+                    }}
+                  >
+                    <Typography.Text style={{ fontSize: 12, color: "#94a3b8" }}>
+                      时长
+                    </Typography.Text>
+                    <Typography.Text
+                      strong
+                      style={{ fontSize: 13, color: "#6366f1" }}
+                    >
+                      {videoDuration}s
+                    </Typography.Text>
+                  </div>
+                  <PortalDropdown
+                    label="比例"
+                    value={videoAspectRatio}
+                    options={engineOptions.ratios}
+                    expanded={expandedEngine === "ratio"}
+                    onToggle={() =>
+                      setExpandedEngine(
+                        expandedEngine === "ratio" ? null : "ratio",
+                      )
+                    }
+                    onSelect={(v) => setVideoAspectRatio(v as AspectRatio)}
+                    onClose={() => setExpandedEngine(null)}
+                  />
+                  <PortalDropdown
+                    label="分辨率"
+                    value={videoResolution}
+                    options={engineOptions.resolutions}
+                    expanded={expandedEngine === "resolution"}
+                    onToggle={() =>
+                      setExpandedEngine(
+                        expandedEngine === "resolution" ? null : "resolution",
+                      )
+                    }
+                    onSelect={(v) => setVideoResolution(v as Resolution)}
+                    onClose={() => setExpandedEngine(null)}
+                  />
+                </div>
               </div>
-              <Typography.Text style={{ color: '#cbd5e1', fontSize: 18 }}>+</Typography.Text>
-              <div>
-                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>预估视频积分</Typography.Text>
-                <Typography.Text strong style={{ fontSize: 14, color: '#10b981' }}>{estimatedVideoCredits}</Typography.Text>
+            )}
+            {/* Image params selection */}
+            {mediaType == "image" && currentRecord && (
+              <div
+                style={{
+                  marginTop: 24,
+                  borderRadius: 12,
+                  background: "#f8f9fc",
+                  width: "25%",
+                }}
+              >
+                <div
+                  style={{ display: "flex", justifyContent: "space-around" }}
+                >
+                  <div style={{ textAlign: "center" }}>
+                    <Typography.Text
+                      style={{
+                        fontSize: 11,
+                        color: "#94a3b8",
+                        display: "block",
+                        marginBottom: 4,
+                      }}
+                    >
+                      分辨率
+                    </Typography.Text>
+                    <Typography.Text
+                      strong
+                      style={{ fontSize: 14, color: "#1a1a2e" }}
+                    >
+                      {currentRecord.imageSize || "-"}
+                    </Typography.Text>
+                  </div>
+                  <div style={{ textAlign: "center" }}>
+                    <Typography.Text
+                      style={{
+                        fontSize: 11,
+                        color: "#94a3b8",
+                        display: "block",
+                        marginBottom: 4,
+                      }}
+                    >
+                      画面比例
+                    </Typography.Text>
+                    <Typography.Text
+                      strong
+                      style={{ fontSize: 14, color: "#1a1a2e" }}
+                    >
+                      {currentRecord.imageProportion || "-"}
+                    </Typography.Text>
+                  </div>
+                  <div style={{ textAlign: "center" }}>
+                    <Typography.Text
+                      style={{
+                        fontSize: 11,
+                        color: "#94a3b8",
+                        display: "block",
+                        marginBottom: 4,
+                      }}
+                    >
+                      画面尺寸
+                    </Typography.Text>
+                    <Typography.Text
+                      strong
+                      style={{ fontSize: 14, color: "#1a1a2e" }}
+                    >
+                      {currentRecord.imagePx || "-"}
+                    </Typography.Text>
+                  </div>
+                  {/* <div style={{ textAlign: 'center' }}>
+                    <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block', marginBottom: 4 }}>消耗积分</Typography.Text>
+                    <Typography.Text strong style={{ fontSize: 14, color: '#1a1a2e' }}>-</Typography.Text>
+                  </div> */}
+                </div>
               </div>
-              <Typography.Text style={{ color: '#cbd5e1', fontSize: 18 }}>=</Typography.Text>
+            )}
+            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
               <div>
-                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>总计</Typography.Text>
-                <Typography.Text strong style={{ fontSize: 16, color: '#1a1a2e' }}>{lastTextCredits + estimatedVideoCredits}</Typography.Text>
+                <Typography.Text
+                  style={{ fontSize: 11, color: "#94a3b8", display: "block" }}
+                >
+                  文字积分
+                </Typography.Text>
+                <Typography.Text
+                  strong
+                  style={{ fontSize: 14, color: "#6366f1" }}
+                >
+                  {lastTextCredits}
+                </Typography.Text>
+              </div>
+              <Typography.Text style={{ color: "#cbd5e1", fontSize: 18 }}>
+                +
+              </Typography.Text>
+              <div>
+                <Typography.Text
+                  style={{ fontSize: 11, color: "#94a3b8", display: "block" }}
+                >
+                  预估{mediaType === "image" ? "图片" : "视频"}积分
+                </Typography.Text>
+                <Typography.Text
+                  strong
+                  style={{ fontSize: 14, color: "#10b981" }}
+                >
+                  {mediaType === "image" && currentRecord.imageSize 
+                    ? getImageCreditsFromCimage(currentRecord.imageSize) || estimatedVideoCredits
+                    : calcVideoCredits(videoDuration, videoResolution)}
+                </Typography.Text>
+              </div>
+              <Typography.Text style={{ color: "#cbd5e1", fontSize: 18 }}>
+                =
+              </Typography.Text>
+              <div>
+                <Typography.Text
+                  style={{ fontSize: 11, color: "#94a3b8", display: "block" }}
+                >
+                  总计
+                </Typography.Text>
+                <Typography.Text
+                  strong
+                  style={{ fontSize: 16, color: "#1a1a2e" }}
+                >
+                  {lastTextCredits + (mediaType === "image" ? getImageCreditsFromCimage(currentRecord.imageSize) : calcVideoCredits(videoDuration, videoResolution))}
+                </Typography.Text>
               </div>
             </div>
-            <div style={{ display: 'flex', gap: 12 }}>
-              <Button size="large" onClick={() => { setShowOptimized(false); setCurrentRecord(null); setEditedPrompt(''); setPromptText(''); setReferences([]); setSelectedOptions({}); setExpandedGroup(null); setExpandedEngine(null); form.resetFields(); }}
-                style={{ borderRadius: 12, minWidth: 120, height: 44, fontWeight: 500 }}>
-                配置新视频
+            <div style={{ display: "flex", gap: 12 }}>
+              <Button
+                size="large"
+                onClick={() => {
+                  setShowOptimized(false);
+                  setCurrentRecord(null);
+                  setEditedPrompt("");
+                  setPromptText("");
+                  setReferences([]);
+                  setSelectedOptions({});
+                  setExpandedGroup(null);
+                  setExpandedEngine(null);
+                  form.resetFields();
+                }}
+                style={{
+                  borderRadius: 12,
+                  minWidth: 120,
+                  height: 44,
+                  fontWeight: 500,
+                }}
+              >
+                配置新{mediaType === "image" ? "图片" : "视频"}
               </Button>
-              <Tooltip title={!canAffordVideo ? '积分不足' : ''}>
-                <Button type="primary" size="large" icon={<RocketOutlined />}
+              <Tooltip title={!canAffordVideo ? "积分不足" : ""}>
+                <Button
+                  type="primary"
+                  size="large"
+                  icon={<RocketOutlined />}
                   onClick={() => handleGenerate(currentRecord.id)}
-                  loading={recordStates[currentRecord.id] === 'generating'}
-                  disabled={!canAffordVideo || recordStates[currentRecord.id] === 'generating' || recordStates[currentRecord.id] === 'done'}
+                  loading={recordStates[currentRecord.id] === "generating"}
+                  disabled={
+                    !canAffordVideo ||
+                    recordStates[currentRecord.id] === "generating" ||
+                    recordStates[currentRecord.id] === "done"
+                  }
                   style={{
-                    borderRadius: 12, minWidth: 180, height: 44, fontWeight: 600,
-                    background: recordStates[currentRecord.id] === 'done' ? '#10b981' : canAffordVideo ? 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)' : '#d1d5db',
-                    border: 'none', boxShadow: canAffordVideo ? '0 8px 24px rgba(99,102,241,0.3)' : 'none',
-                  }}>
-                  {recordStates[currentRecord.id] === 'done' ? '生成完成' : recordStates[currentRecord.id] === 'generating' ? '生成中...' : `生成视频 (${estimatedVideoCredits}积分)`}
+                    borderRadius: 12,
+                    minWidth: 180,
+                    height: 44,
+                    fontWeight: 600,
+                    background:
+                      recordStates[currentRecord.id] === "done"
+                        ? "#10b981"
+                        : canAffordVideo
+                          ? "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)"
+                          : "#d1d5db",
+                    border: "none",
+                    boxShadow: canAffordVideo
+                      ? "0 8px 24px rgba(99,102,241,0.3)"
+                      : "none",
+                  }}
+                >
+                  {recordStates[currentRecord.id] === "done"
+                    ? "生成完成"
+                    : recordStates[currentRecord.id] === "generating"
+                      ? "生成中..."
+                      : `生成${mediaType === "image" ? "图片" : "视频"} (${ (mediaType === "image" ? getImageCreditsFromCimage(currentRecord.imageSize) : calcVideoCredits(videoDuration, videoResolution))}积分)`}
                 </Button>
               </Tooltip>
             </div>
           </div>
 
           {/* Generation state */}
-          {recordStates[currentRecord.id] && recordStates[currentRecord.id] !== 'idle' && (
-            <div style={{
-              marginTop: 18, padding: '16px 18px', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12,
-              background: recordStates[currentRecord.id] === 'failed' ? 'rgba(239,68,68,0.04)' : recordStates[currentRecord.id] === 'done' ? 'rgba(16,185,129,0.04)' : 'rgba(99,102,241,0.04)',
-              border: `1px solid ${recordStates[currentRecord.id] === 'failed' ? 'rgba(239,68,68,0.12)' : recordStates[currentRecord.id] === 'done' ? 'rgba(16,185,129,0.12)' : 'rgba(99,102,241,0.12)'}`,
-            }}>
-              {recordStates[currentRecord.id] === 'generating' && <LoadingOutlined style={{ color: '#6366f1', fontSize: 18 }} spin />}
-              {recordStates[currentRecord.id] === 'done' && <CheckCircleOutlined style={{ color: '#10b981', fontSize: 18 }} />}
-              {recordStates[currentRecord.id] === 'failed' && <CloseCircleOutlined style={{ color: '#ef4444', fontSize: 18 }} />}
-              <Typography.Text strong style={{ fontSize: 14, color: recordStates[currentRecord.id] === 'failed' ? '#ef4444' : recordStates[currentRecord.id] === 'done' ? '#10b981' : '#6366f1' }}>
-                {recordStates[currentRecord.id] === 'generating' && '视频生成中，请稍候...'}
-                {recordStates[currentRecord.id] === 'done' && '视频生成成功'}
-                {recordStates[currentRecord.id] === 'failed' && '视频生成失败，请重试'}
-              </Typography.Text>
-            </div>
-          )}
+          {recordStates[currentRecord.id] &&
+            recordStates[currentRecord.id] !== "idle" && (
+              <div
+                style={{
+                  marginTop: 18,
+                  padding: "16px 18px",
+                  borderRadius: 12,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  background:
+                    recordStates[currentRecord.id] === "failed"
+                      ? "rgba(239,68,68,0.04)"
+                      : recordStates[currentRecord.id] === "done"
+                        ? "rgba(16,185,129,0.04)"
+                        : "rgba(99,102,241,0.04)",
+                  border: `1px solid ${recordStates[currentRecord.id] === "failed" ? "rgba(239,68,68,0.12)" : recordStates[currentRecord.id] === "done" ? "rgba(16,185,129,0.12)" : "rgba(99,102,241,0.12)"}`,
+                }}
+              >
+                {recordStates[currentRecord.id] === "generating" && (
+                  <LoadingOutlined
+                    style={{ color: "#6366f1", fontSize: 18 }}
+                    spin
+                  />
+                )}
+                {recordStates[currentRecord.id] === "done" && (
+                  <CheckCircleOutlined
+                    style={{ color: "#10b981", fontSize: 18 }}
+                  />
+                )}
+                {recordStates[currentRecord.id] === "failed" && (
+                  <CloseCircleOutlined
+                    style={{ color: "#ef4444", fontSize: 18 }}
+                  />
+                )}
+                <Typography.Text
+                  strong
+                  style={{
+                    fontSize: 14,
+                    color:
+                      recordStates[currentRecord.id] === "failed"
+                        ? "#ef4444"
+                        : recordStates[currentRecord.id] === "done"
+                          ? "#10b981"
+                          : "#6366f1",
+                  }}
+                >
+                  {recordStates[currentRecord.id] === "generating" &&
+                    `${mediaType === "image" ? "图片" : "视频"}生成中，请稍候...`}
+                  {recordStates[currentRecord.id] === "done" &&
+                    `${mediaType === "image" ? "图片" : "视频"}生成成功`}
+                  {recordStates[currentRecord.id] === "failed" &&
+                    `${mediaType === "image" ? "图片" : "视频"}生成失败，请重试`}
+                </Typography.Text>
+              </div>
+            )}
 
           {/* Completed video player */}
-          {recordStates[currentRecord.id] === 'done' && currentRecord.videoUrl && (
-            <div style={{ marginTop: 18 }}>
-              <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 8 }}>生成视频</Typography.Text>
-              <div style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid #f0f0f5', background: '#000' }}>
-                <video
-                  src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${currentRecord.videoUrl}`}
-                  controls
-                  style={{ width: '100%', maxHeight: 400, display: 'block' }}
-                />
+          {recordStates[currentRecord.id] === "done" &&
+            currentRecord.videoUrl && (
+              <div style={{ marginTop: 18 }}>
+                <Typography.Text
+                  style={{
+                    fontSize: 12,
+                    color: "#94a3b8",
+                    display: "block",
+                    marginBottom: 8,
+                  }}
+                >
+                  生成视频
+                </Typography.Text>
+                <div
+                  style={{
+                    borderRadius: 12,
+                    overflow: "hidden",
+                    border: "1px solid #f0f0f5",
+                    background: "#000",
+                  }}
+                >
+                  <video
+                    src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${currentRecord.videoUrl}`}
+                    controls
+                    style={{ width: "100%", maxHeight: 400, display: "block" }}
+                  />
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
           {/* Reference thumbnails */}
           {currentRecord.references && currentRecord.references.length > 0 && (
             <div style={{ marginTop: 16 }}>
-              <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 8 }}>参考内容</Typography.Text>
-              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <Typography.Text
+                style={{
+                  fontSize: 12,
+                  color: "#94a3b8",
+                  display: "block",
+                  marginBottom: 8,
+                }}
+              >
+                参考内容
+              </Typography.Text>
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                 {currentRecord.references.map((ref, i) => (
-                  <div key={i}
-                    style={{ width: 64, height: 64, borderRadius: 10, overflow: 'hidden', border: '1px solid #e2e8f0', position: 'relative', cursor: 'pointer' }}
+                  <div
+                    key={i}
+                    style={{
+                      width: 64,
+                      height: 64,
+                      borderRadius: 10,
+                      overflow: "hidden",
+                      border: "1px solid #e2e8f0",
+                      position: "relative",
+                      cursor: "pointer",
+                    }}
                     onClick={() => {
-                      if (ref.type === 'video') {
-                        setPreviewVideoUrl(`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`);
+                      if (ref.type === "video") {
+                        setPreviewVideoUrl(
+                          `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`,
+                        );
                       }
-                    }}>
-                    {ref.type === 'image' ? (
-                      <Image src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} preview />
+                    }}
+                  >
+                    {ref.type === "image" ? (
+                      <Image
+                        src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`}
+                        style={{
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
+                        }}
+                        preview
+                      />
                     ) : (
-                      <VideoThumb src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`} width={64} height={64} />
+                      <VideoThumb
+                        src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`}
+                        width={64}
+                        height={64}
+                      />
                     )}
-                    <Tag style={{ position: 'absolute', bottom: 0, left: 0, right: 0, margin: 0, fontSize: 9, textAlign: 'center', borderRadius: '0 0 8px 8px', background: 'rgba(0,0,0,0.5)', border: 'none', color: '#fff', padding: '0 2px' }}>{ref.name}</Tag>
+                    <Tag
+                      style={{
+                        position: "absolute",
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        margin: 0,
+                        fontSize: 9,
+                        textAlign: "center",
+                        borderRadius: "0 0 8px 8px",
+                        background: "rgba(0,0,0,0.5)",
+                        border: "none",
+                        color: "#fff",
+                        padding: "0 2px",
+                      }}
+                    >
+                      {ref.name}
+                    </Tag>
                   </div>
                 ))}
               </div>
@@ -915,233 +2961,1178 @@ const GeneratePage: React.FC = () => {
       {/* ========== History records ========== */}
       {projectRecords.length > 0 && (
         <div style={{ marginTop: 24 }}>
-          <Typography.Text strong style={{ fontSize: 15, display: 'block', marginBottom: 12 }}>本项目生成记录</Typography.Text>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }} className="stagger-children">
+          <Typography.Text
+            strong
+            style={{ fontSize: 15, display: "block", marginBottom: 12 }}
+          >
+            本项目生成记录
+          </Typography.Text>
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: 8 }}
+            className="stagger-children"
+          >
             {projectRecords.map((record, i) => {
               const status = getRecordStatus(record);
-              const prompt = editablePrompts[record.id] ?? (record.optimizedPrompt || record.originalPrompt);
+              const prompt =
+                editablePrompts[record.id] ??
+                (record.optimizedPrompt || record.originalPrompt);
               const isExpanded = expandedHistoryId === record.id;
+              const type: any = record.genType || "image";
+              // console.log(record.genType);
 
               return (
-                <div key={record.id} className="animate-slideInCard" style={{ animationDelay: `${i * 0.05}s` }}>
-                  <div className="record-item"
-                    onClick={() => setExpandedHistoryId(isExpanded ? null : record.id)}
+                <div
+                  key={record.id}
+                  className="animate-slideInCard"
+                  style={{ animationDelay: `${i * 0.05}s` }}
+                >
+                  <div
+                    className="record-item"
+                    onClick={() =>
+                      setExpandedHistoryId(isExpanded ? null : record.id)
+                    }
                     style={{
-                      padding: '12px 16px', borderRadius: isExpanded ? '12px 12px 0 0' : 12,
-                      background: '#fff', border: '1px solid #f0f0f5', cursor: 'pointer', transition: 'all 0.2s',
-                      display: 'flex', alignItems: 'center', gap: 10,
-                    }}>
-                    {isExpanded ? <CaretDownOutlined style={{ color: '#6366f1', fontSize: 11, flexShrink: 0 }} /> : <CaretRightOutlined style={{ color: '#cbd5e1', fontSize: 11, flexShrink: 0 }} />}
-                    <Tag color={statusConfig[status]?.color} icon={statusConfig[status]?.icon} style={{ margin: 0 }}>{statusConfig[status]?.text}</Tag>
-                    <Typography.Text style={{ flex: 1, fontSize: 13, color: '#475569', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{prompt}</Typography.Text>
-                    {status === 'prompt_optimized' && <Tag color="processing" style={{ padding: '3px 10px', fontSize: 12, margin: 0, flexShrink: 0 }}>待配置</Tag>}
-                    <span className="mobile-meta" translate="no" style={{ fontSize: 12, color: '#94a3b8', flexShrink: 0 }}>
-                      {record.duration ? `${record.duration}秒` : '-'} · {record.aspectRatio || '-'} · {record.resolution || '-'} · <span className="date-display" translate="no">{formatDate(record.createdAt)}</span>
-                    </span>
-                    <div className="record-actions" onClick={(e) => e.stopPropagation()}>
+                      padding: "12px 16px",
+                      borderRadius: isExpanded ? "12px 12px 0 0" : 12,
+                      background: "#fff",
+                      border: "1px solid #f0f0f5",
+                      cursor: "pointer",
+                      transition: "all 0.2s",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 10,
+                    }}
+                  >
+                    {/* <div style={{ width: 28, height: 28, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, }}>
+                        {type === 'image' ? <span style={{ color: '#d97706', fontSize: 12 }} >图片</span> : <span style={{ color: '#2563eb', fontSize: 12 }} >视频</span>}
+                      </div> */}
+                    <div
+                      style={{
+                        width: 28,
+                        height: 28,
+                        borderRadius: 8,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        background: type === "image" ? "#fef3c7" : "#dbeafe",
+                      }}
+                    >
+                      {type === "image" ? (
+                        <PictureOutlined
+                          style={{ color: "#d97706", fontSize: 12 }}
+                        />
+                      ) : (
+                        <VideoCameraOutlined
+                          style={{ color: "#2563eb", fontSize: 12 }}
+                        />
+                      )}
+                    </div>
+                    {isExpanded ? (
+                      <CaretDownOutlined
+                        style={{
+                          color: "#6366f1",
+                          fontSize: 11,
+                          flexShrink: 0,
+                        }}
+                      />
+                    ) : (
+                      <CaretRightOutlined
+                        style={{
+                          color: "#cbd5e1",
+                          fontSize: 11,
+                          flexShrink: 0,
+                        }}
+                      />
+                    )}
+                    <Tag
+                      color={statusConfig[status]?.color}
+                      icon={statusConfig[status]?.icon}
+                      style={{ margin: 0 }}
+                    >
+                      {statusConfig[status]?.text}
+                    </Tag>
+                    <Typography.Text
+                      style={{
+                        flex: 1,
+                        fontSize: 13,
+                        color: "#475569",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {prompt}
+                    </Typography.Text>
+                    {status === "prompt_optimized" && (
+                      <Tag
+                        color="processing"
+                        style={{
+                          padding: "3px 10px",
+                          fontSize: 12,
+                          margin: 0,
+                          flexShrink: 0,
+                        }}
+                      >
+                        待配置
+                      </Tag>
+                    )}
+
+                    {type === "image" ? (
+                      <span
+                        className="mobile-meta"
+                        translate="no"
+                        style={{
+                          fontSize: 12,
+                          color: "#94a3b8",
+                          flexShrink: 0,
+                        }}
+                      >
+                        {record.duration ? `${record.imageSize}` : "-"} ·{" "}
+                        {record.imageProportion || "-"} ·{" "}
+                        {record.imagePx || "-"} ·{" "}
+                        <span className="date-display" translate="no">
+                          {formatDate(record.createdAt)}
+                        </span>
+                      </span>
+                    ) : (
+                      <span
+                        className="mobile-meta"
+                        translate="no"
+                        style={{
+                          fontSize: 12,
+                          color: "#94a3b8",
+                          flexShrink: 0,
+                        }}
+                      >
+                        {record.duration ? `${record.duration}秒` : "-"} ·{" "}
+                        {record.aspectRatio || "-"} · {record.resolution || "-"}{" "}
+                        ·{" "}
+                        <span className="date-display" translate="no">
+                          {formatDate(record.createdAt)}
+                        </span>
+                      </span>
+                    )}
+                    <div
+                      className="record-actions"
+                      onClick={(e) => e.stopPropagation()}
+                    >
                       <Space>
-                        {status === 'failed' && (
-                          <Button type="primary" danger size="small" icon={<PlayCircleOutlined />}
+                        {status === "failed" && (
+                          <Button
+                            type="primary"
+                            danger
+                            size="small"
+                            icon={<PlayCircleOutlined />}
                             loading={generating[record.id]}
-                            onClick={() => handleRetryGeneration(record.id)} style={{ borderRadius: 8 }}>重试</Button>
+                            onClick={() => handleRetryGeneration(record.id)}
+                            style={{ borderRadius: 8 }}
+                          >
+                            重试
+                          </Button>
                         )}
                       </Space>
                     </div>
                   </div>
 
                   {isExpanded && (
-                    <div style={{ background: '#fff', border: '1px solid #f0f0f5', borderTop: 'none', borderRadius: '0 0 12px 12px', padding: '18px 20px', animation: 'fadeInUp 0.25s ease both' }}>
-                      <div className="gen-detail-row" style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
-                        <div style={{ flex: '1 1 50%', minWidth: 260 }}>
+                    <div
+                      style={{
+                        background: "#fff",
+                        border: "1px solid #f0f0f5",
+                        borderTop: "none",
+                        borderRadius: "0 0 12px 12px",
+                        padding: "18px 20px",
+                        animation: "fadeInUp 0.25s ease both",
+                      }}
+                    >
+                      <div
+                        className="gen-detail-row"
+                        style={{ display: "flex", gap: 20, flexWrap: "wrap" }}
+                      >
+                        <div style={{ flex: "1 1 50%", minWidth: 260 }}>
                           {/* Original prompt */}
                           <div style={{ marginBottom: 14 }}>
-                            <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 6 }}>原始提示词</Typography.Text>
-                            <div style={{ padding: 12, borderRadius: 10, background: '#f8f9fc', border: '1px solid #f0f0f5' }}>
-                              <Typography.Text style={{ fontSize: 13, color: '#64748b', lineHeight: 1.7 }}>{record.originalPrompt}</Typography.Text>
+                            <Typography.Text
+                              style={{
+                                fontSize: 12,
+                                color: "#94a3b8",
+                                display: "block",
+                                marginBottom: 6,
+                              }}
+                            >
+                              原始提示词
+                            </Typography.Text>
+                            <div
+                              style={{
+                                padding: 12,
+                                borderRadius: 10,
+                                background: "#f8f9fc",
+                                border: "1px solid #f0f0f5",
+                              }}
+                            >
+                              <Typography.Text
+                                style={{
+                                  fontSize: 13,
+                                  color: "#64748b",
+                                  lineHeight: 1.7,
+                                }}
+                              >
+                                {record.originalPrompt}
+                              </Typography.Text>
                             </div>
                           </div>
 
                           {/* Optimized prompt */}
                           <div style={{ marginBottom: 14 }}>
-                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
-                              <Typography.Text style={{ fontSize: 12, color: '#94a3b8' }}>
-                                优化后的提示词 {(status === 'prompt_optimized' || status === 'failed') && editingRecordId !== record.id && <span style={{ color: '#6366f1' }}>（可编辑）</span>}
+                            <div
+                              style={{
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                marginBottom: 6,
+                              }}
+                            >
+                              <Typography.Text
+                                style={{ fontSize: 12, color: "#94a3b8" }}
+                              >
+                                优化后的提示词{" "}
+                                {(status === "prompt_optimized" ||
+                                  status === "failed") &&
+                                  editingRecordId !== record.id && (
+                                    <span style={{ color: "#6366f1" }}>
+                                      （可编辑）
+                                    </span>
+                                  )}
                               </Typography.Text>
                               {editingRecordId !== record.id && (
                                 <Space size={4}>
-                                  <Tooltip title="复制"><Button type="text" size="small" icon={<CopyOutlined />} onClick={() => { navigator.clipboard.writeText(prompt); message.success('已复制'); }} style={{ color: '#94a3b8' }} /></Tooltip>
-                                  {(status === 'prompt_optimized' || status === 'failed') && (
-                                    <Tooltip title="编辑"><Button type="text" size="small" icon={<EditOutlined />}
-                                      onClick={() => { setEditingRecordId(record.id); setEditablePrompts((p) => ({ ...p, [record.id]: p[record.id] ?? record.optimizedPrompt ?? '' })); }}
-                                      style={{ color: '#6366f1' }} /></Tooltip>
-                                  )}
+                                  <Tooltip title="复制">
+                                    <Button
+                                      type="text"
+                                      size="small"
+                                      icon={<CopyOutlined />}
+                                      onClick={() => {
+                                        navigator.clipboard.writeText(prompt);
+                                        message.success("已复制");
+                                      }}
+                                      style={{ color: "#94a3b8" }}
+                                    />
+                                  </Tooltip>
+                                  {(status === "prompt_optimized" ||
+                                    status === "failed") && (
+                                      <Tooltip title="编辑">
+                                        <Button
+                                          type="text"
+                                          size="small"
+                                          icon={<EditOutlined />}
+                                          onClick={() => {
+                                            setEditingRecordId(record.id);
+                                            setEditablePrompts((p) => ({
+                                              ...p,
+                                              [record.id]:
+                                                p[record.id] ??
+                                                record.optimizedPrompt ??
+                                                "",
+                                            }));
+                                          }}
+                                          style={{ color: "#6366f1" }}
+                                        />
+                                      </Tooltip>
+                                    )}
                                 </Space>
                               )}
                             </div>
                             {editingRecordId === record.id ? (
                               <div>
-                                <Input.TextArea value={prompt} onChange={(e) => setEditablePrompts((p) => ({ ...p, [record.id]: e.target.value }))} rows={4}
-                                  style={{ borderRadius: 10, fontSize: 13, lineHeight: 1.7, border: '1px solid rgba(99,102,241,0.25)', background: 'rgba(99,102,241,0.02)' }} />
-                                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 8 }}>
-                                  <Button size="small" onClick={() => setEditingRecordId(null)}>取消</Button>
-                                  <Button size="small" type="primary" onClick={() => { setEditablePrompts((p) => ({ ...p, [record.id]: prompt })); setEditingRecordId(null); message.success('提示词已更新'); }}
-                                    style={{ borderRadius: 6, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', border: 'none' }}>保存</Button>
+                                <Input.TextArea
+                                  value={prompt}
+                                  onChange={(e) =>
+                                    setEditablePrompts((p) => ({
+                                      ...p,
+                                      [record.id]: e.target.value,
+                                    }))
+                                  }
+                                  rows={4}
+                                  style={{
+                                    borderRadius: 10,
+                                    fontSize: 13,
+                                    lineHeight: 1.7,
+                                    border: "1px solid rgba(99,102,241,0.25)",
+                                    background: "rgba(99,102,241,0.02)",
+                                  }}
+                                />
+                                <div
+                                  style={{
+                                    display: "flex",
+                                    justifyContent: "flex-end",
+                                    gap: 8,
+                                    marginTop: 8,
+                                  }}
+                                >
+                                  <Button
+                                    size="small"
+                                    onClick={() => setEditingRecordId(null)}
+                                  >
+                                    取消
+                                  </Button>
+                                  <Button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                      setEditablePrompts((p) => ({
+                                        ...p,
+                                        [record.id]: prompt,
+                                      }));
+                                      setEditingRecordId(null);
+                                      message.success("提示词已更新");
+                                    }}
+                                    style={{
+                                      borderRadius: 6,
+                                      background:
+                                        "linear-gradient(135deg, #6366f1, #8b5cf6)",
+                                      border: "none",
+                                    }}
+                                  >
+                                    保存
+                                  </Button>
                                 </div>
                               </div>
                             ) : (
-                              <div style={{ padding: 12, borderRadius: 10, background: status === 'prompt_optimized' ? 'rgba(99,102,241,0.02)' : '#f8f9fc', border: status === 'prompt_optimized' ? '1px solid rgba(99,102,241,0.1)' : '1px solid #f0f0f5' }}>
-                                <Typography.Text style={{ fontSize: 13, color: '#1a1a2e', lineHeight: 1.7 }}>{prompt}</Typography.Text>
+                              <div
+                                style={{
+                                  padding: 12,
+                                  borderRadius: 10,
+                                  background:
+                                    status === "prompt_optimized"
+                                      ? "rgba(99,102,241,0.02)"
+                                      : "#f8f9fc",
+                                  border:
+                                    status === "prompt_optimized"
+                                      ? "1px solid rgba(99,102,241,0.1)"
+                                      : "1px solid #f0f0f5",
+                                }}
+                              >
+                                <Typography.Text
+                                  style={{
+                                    fontSize: 13,
+                                    color: "#1a1a2e",
+                                    lineHeight: 1.7,
+                                  }}
+                                >
+                                  {prompt}
+                                </Typography.Text>
                               </div>
                             )}
                           </div>
 
                           {/* Credits info */}
-                          <div style={{ display: 'flex', gap: 14, padding: '10px 14px', borderRadius: 10, background: '#f8f9fc' }}>
-                            {[
-                              { label: '文字积分', value: `${record.textCreditsCost || 0}` },
-                              { label: '视频积分', value: `${record.creditsCost || 0}` },
-                              { label: '时长', value: record.duration ? `${record.duration}秒` : '-' },
-                              { label: '比例', value: record.aspectRatio || '-' },
-                              { label: '分辨率', value: record.resolution || '-' },
-                            ].map((item, j) => (
-                              <div key={j} style={{ flex: 1 }}>
-                                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>{item.label}</Typography.Text>
-                                <Typography.Text strong style={{ fontSize: 13, color: '#1a1a2e' }}>{item.value}</Typography.Text>
-                              </div>
-                            ))}
-                          </div>
+                          {type === "image" ? (
+                            <div
+                              style={{
+                                display: "flex",
+                                gap: 14,
+                                padding: "10px 14px",
+                                borderRadius: 10,
+                                background: "#f8f9fc",
+                              }}
+                            >
+                              {[
+                                {
+                                  label: "文字积分",
+                                  value: `${record.textCreditsCost || 0}`,
+                                },
+                                {
+                                  label: "图片积分",
+                                  value: `${record.creditsCost || 0}`,
+                                },
+                                {
+                                  label: "分辨率",
+                                  value: record.imageSize
+                                    ? `${record.imageSize}`
+                                    : "-",
+                                },
+                                {
+                                  label: "比例",
+                                  value: record.imageProportion || "-",
+                                },
+                                { label: "尺寸", value: record.imagePx || "-" },
+                              ].map((item, j) => (
+                                <div key={j} style={{ flex: 1 }}>
+                                  <Typography.Text
+                                    style={{
+                                      fontSize: 11,
+                                      color: "#94a3b8",
+                                      display: "block",
+                                    }}
+                                  >
+                                    {item.label}
+                                  </Typography.Text>
+                                  <Typography.Text
+                                    strong
+                                    style={{ fontSize: 13, color: "#1a1a2e" }}
+                                  >
+                                    {item.value}
+                                  </Typography.Text>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <div
+                              style={{
+                                display: "flex",
+                                gap: 14,
+                                padding: "10px 14px",
+                                borderRadius: 10,
+                                background: "#f8f9fc",
+                              }}
+                            >
+                              {[
+                                {
+                                  label: "文字积分",
+                                  value: `${record.textCreditsCost || 0}`,
+                                },
+                                {
+                                  label: "视频积分",
+                                  value: `${record.creditsCost || 0}`,
+                                },
+                                {
+                                  label: "时长",
+                                  value: record.duration
+                                    ? `${record.duration}秒`
+                                    : "-",
+                                },
+                                {
+                                  label: "比例",
+                                  value: record.aspectRatio || "-",
+                                },
+                                {
+                                  label: "分辨率",
+                                  value: record.resolution || "-",
+                                },
+                              ].map((item, j) => (
+                                <div key={j} style={{ flex: 1 }}>
+                                  <Typography.Text
+                                    style={{
+                                      fontSize: 11,
+                                      color: "#94a3b8",
+                                      display: "block",
+                                    }}
+                                  >
+                                    {item.label}
+                                  </Typography.Text>
+                                  <Typography.Text
+                                    strong
+                                    style={{ fontSize: 13, color: "#1a1a2e" }}
+                                  >
+                                    {item.value}
+                                  </Typography.Text>
+                                </div>
+                              ))}
+                            </div>
+                          )}
 
                           {/* Error message for failed records */}
-                          {status === 'failed' && record.errorMessage && (
+                          {/* {status === 'failed' && record.errorMessage && (
                             <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, background: 'rgba(239,68,68,0.04)', border: '1px solid rgba(239,68,68,0.15)' }}>
                               <Typography.Text style={{ fontSize: 12, color: '#ef4444' }}>
                                 <CloseCircleOutlined style={{ marginRight: 6 }} />
                                 失败原因：{record.errorMessage}
                               </Typography.Text>
                             </div>
-                          )}
+                          )} */}
 
                           {/* Reference materials */}
-                          {((record.references && record.references.length > 0) || status === 'failed') && (
-                            <div style={{ marginTop: 14 }}>
-                              <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 8 }}>
-                                参考素材 {status === 'failed' && <span style={{ color: '#6366f1' }}>（可删除/添加后重试）</span>}
-                              </Typography.Text>
-                              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-                                {(record.references || []).map((ref: any, ri: number) => (
-                                  <div key={ri}
-                                    style={{ width: 64, height: 64, borderRadius: 10, overflow: 'visible', border: '1px solid #e2e8f0', position: 'relative', cursor: 'pointer' }}
-                                    onClick={() => {
-                                      if (ref.type === 'video') {
-                                        setPreviewVideoUrl(`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`);
-                                      }
-                                    }}>
-                                    <div style={{ width: 64, height: 64, borderRadius: 10, overflow: 'hidden' }}>
-                                      {ref.type === 'image' ? (
-                                        <Image src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} preview />
-                                      ) : (
-                                        <VideoThumb src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${ref.url}`} width={64} height={64} />
-                                      )}
-                                    </div>
-                                    <Tag style={{ position: 'absolute', bottom: 0, left: 0, right: 0, margin: 0, fontSize: 9, textAlign: 'center', borderRadius: '0 0 8px 8px', background: 'rgba(0,0,0,0.5)', border: 'none', color: '#fff', padding: '0 2px' }}>{ref.name}</Tag>
-                                    {status === 'failed' && (
-                                      <div className="ref-delete" onClick={(e) => {
-                                        e.stopPropagation();
-                                        deleteUpload(ref.url).catch(() => {});
-                                        // Remove from record references via store update
-                                        const newRefs = record.references!.filter((_: any, j: number) => j !== ri);
-                                        useAppStore.getState().updateRecordReferences(record.id, newRefs);
-                                      }}
+                          {((record.references &&
+                            record.references.length > 0) ||
+                            status === "failed") && (
+                              <div style={{ marginTop: 14 }}>
+                                <Typography.Text
+                                  style={{
+                                    fontSize: 12,
+                                    color: "#94a3b8",
+                                    display: "block",
+                                    marginBottom: 8,
+                                  }}
+                                >
+                                  参考素材{" "}
+                                  {status === "failed" && (
+                                    <span style={{ color: "#6366f1" }}>
+                                      （可删除/添加后重试）
+                                    </span>
+                                  )}
+                                </Typography.Text>
+                                <div
+                                  style={{
+                                    display: "flex",
+                                    gap: 8,
+                                    flexWrap: "wrap",
+                                  }}
+                                >
+                                  {record.references?.map(
+                                    (ref: any, ri: number) => (
+                                      <div
+                                        key={ri}
                                         style={{
-                                          position: 'absolute', top: -4, right: -4, width: 16, height: 16, borderRadius: '50%',
-                                          background: 'rgba(239,68,68,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                          cursor: 'pointer', zIndex: 10, opacity: 0, transition: 'opacity 0.15s',
-                                        }}>
-                                        <CloseCircleOutlined style={{ color: '#fff', fontSize: 10 }} />
-                                      </div>
-                                    )}
-                                  </div>
-                                ))}
-                                {status === 'failed' && (
-                                  <Upload accept="image/*,video/*" showUploadList={false} multiple
-                                    beforeUpload={(file) => {
-                                      const isImage = file.type.startsWith('image/');
-                                      const isVideo = file.type.startsWith('video/');
-                                      if (!isImage && !isVideo) { message.error('仅支持图片或视频文件'); return false; }
-                                      const uploadFn = isImage ? uploadImage : uploadVideo;
-                                      uploadFn(file).then(res => {
-                                        const newRef = { url: res.url, type: isImage ? 'image' as const : 'video' as const, name: file.name || (isImage ? '图片' : '视频') };
-                                        const curRefs = record.references || [];
-                                        useAppStore.getState().updateRecordReferences(record.id, [...curRefs, newRef]);
-                                        message.success('上传成功');
-                                      }).catch(() => message.error('上传失败'));
-                                      return false;
-                                    }}
-                                  >
-                                    <Tooltip title="添加参考素材">
-                                      <div style={{ width: 64, height: 64, borderRadius: 10, border: '1.5px dashed #d9d9d9', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.2s' }}
-                                        onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; }}
-                                        onMouseLeave={e => { e.currentTarget.style.borderColor = '#d9d9d9'; }}
+                                          width: 64,
+                                          height: 64,
+                                          borderRadius: 10,
+                                          overflow: "visible",
+                                          border: "1px solid #e2e8f0",
+                                          position: "relative",
+                                          cursor: "pointer",
+                                        }}
+                                        onClick={() => {
+                                          if (ref.type === "video") {
+                                            setPreviewVideoUrl(
+                                              `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`,
+                                            );
+                                          }
+                                        }}
                                       >
-                                        <PlusOutlined style={{ fontSize: 18, color: '#94a3b8' }} />
+                                        <div
+                                          style={{
+                                            width: 64,
+                                            height: 64,
+                                            borderRadius: 10,
+                                            overflow: "hidden",
+                                          }}
+                                        >
+                                          {ref.type === "image" ? (
+                                            <Image
+                                              src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`}
+                                              style={{
+                                                width: "100%",
+                                                height: "100%",
+                                                objectFit: "cover",
+                                              }}
+                                              preview
+                                            />
+                                          ) : (
+                                            <VideoThumb
+                                              src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`}
+                                              width={64}
+                                              height={64}
+                                            />
+                                          )}
+                                        </div>
+                                        <Tag
+                                          style={{
+                                            position: "absolute",
+                                            bottom: 0,
+                                            left: 0,
+                                            right: 0,
+                                            margin: 0,
+                                            fontSize: 9,
+                                            textAlign: "center",
+                                            borderRadius: "0 0 8px 8px",
+                                            background: "rgba(0,0,0,0.5)",
+                                            border: "none",
+                                            color: "#fff",
+                                            padding: "0 2px",
+                                          }}
+                                        >
+                                          {ref.name}
+                                        </Tag>
+                                        {status === "failed" && (
+                                          <div
+                                            className="ref-delete"
+                                            onClick={(e) => {
+                                              e.stopPropagation();
+                                              deleteUpload(ref.url).catch(
+                                                () => { },
+                                              );
+                                              // Remove from record references via store update
+                                              const newRefs =
+                                                record.references!.filter(
+                                                  (_: any, j: number) => j !== ri,
+                                                );
+                                              useAppStore
+                                                .getState()
+                                                .updateRecordReferences(
+                                                  record.id,
+                                                  newRefs,
+                                                );
+                                            }}
+                                            style={{
+                                              position: "absolute",
+                                              top: -4,
+                                              right: -4,
+                                              width: 16,
+                                              height: 16,
+                                              borderRadius: "50%",
+                                              background: "rgba(239,68,68,0.8)",
+                                              display: "flex",
+                                              alignItems: "center",
+                                              justifyContent: "center",
+                                              cursor: "pointer",
+                                              zIndex: 10,
+                                              opacity: 0,
+                                              transition: "opacity 0.15s",
+                                            }}
+                                          >
+                                            <CloseCircleOutlined
+                                              style={{
+                                                color: "#fff",
+                                                fontSize: 10,
+                                              }}
+                                            />
+                                          </div>
+                                        )}
                                       </div>
-                                    </Tooltip>
-                                  </Upload>
-                                )}
+                                    ),
+                                  )}
+                                  {status === "failed" && (
+                                    <Upload
+                                      accept="image/*,video/*"
+                                      showUploadList={false}
+                                      multiple
+                                      beforeUpload={(file) => {
+                                        const isImage =
+                                          file.type.startsWith("image/");
+                                        const isVideo =
+                                          file.type.startsWith("video/");
+                                        if (!isImage && !isVideo) {
+                                          message.error("仅支持图片或视频文件");
+                                          return false;
+                                        }
+                                        const uploadFn = isImage
+                                          ? uploadImage
+                                          : uploadVideo;
+                                        uploadFn(file)
+                                          .then((res) => {
+                                            const newRef = {
+                                              url: res.url,
+                                              type: isImage
+                                                ? ("image" as const)
+                                                : ("video" as const),
+                                              name:
+                                                file.name ||
+                                                (isImage ? "图片" : "视频"),
+                                            };
+                                            const curRefs =
+                                              record.references || [];
+                                            useAppStore
+                                              .getState()
+                                              .updateRecordReferences(record.id, [
+                                                ...curRefs,
+                                                newRef,
+                                              ]);
+                                            message.success("上传成功");
+                                          })
+                                          .catch(() => message.error("上传失败"));
+                                        return false;
+                                      }}
+                                    >
+                                      <Tooltip title="添加参考素材">
+                                        <div
+                                          style={{
+                                            width: 64,
+                                            height: 64,
+                                            borderRadius: 10,
+                                            border: "1.5px dashed #d9d9d9",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            cursor: "pointer",
+                                            transition: "all 0.2s",
+                                          }}
+                                          onMouseEnter={(e) => {
+                                            e.currentTarget.style.borderColor =
+                                              "#6366f1";
+                                          }}
+                                          onMouseLeave={(e) => {
+                                            e.currentTarget.style.borderColor =
+                                              "#d9d9d9";
+                                          }}
+                                        >
+                                          <PlusOutlined
+                                            style={{
+                                              fontSize: 18,
+                                              color: "#94a3b8",
+                                            }}
+                                          />
+                                        </div>
+                                      </Tooltip>
+                                    </Upload>
+                                  )}
+                                </div>
                               </div>
-                            </div>
-                          )}
+                            )}
                         </div>
 
                         {/* Right: video or status */}
-                        <div style={{ flex: '1 1 40%', minWidth: 220 }}>
-                          {status === 'generating' ? (
-                            <div style={{ height: '100%', minHeight: 180, borderRadius: 12, background: 'linear-gradient(135deg, rgba(99,102,241,0.04), rgba(139,92,246,0.04))', border: '1px dashed rgba(99,102,241,0.2)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
-                              <LoadingOutlined style={{ color: '#6366f1', fontSize: 28 }} spin />
-                              <Typography.Text style={{ color: '#94a3b8', fontSize: 13 }}>视频生成中...</Typography.Text>
+                        <div
+                          style={{
+                            flex: "1 1 40%",
+                            minWidth: 220,
+                            position: "relative",
+                          }}
+                        >
+                          {/* 将参数选择和视频生成按钮放到视频视频框 */}
+                          {status === "prompt_optimized" && (
+                            <div
+                              style={{
+                                marginTop: 16,
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: "100%",
+                                backgroundColor: "transparent",
+                              }}
+                            >
+                              {type === "video" && (
+                                <div
+                                  style={{
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 12,
+                                    flexWrap: "wrap",
+                                    marginBottom: 12,
+                                  }}
+                                >
+                                  <div
+                                    translate="no"
+                                    style={{
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 6,
+                                      padding: "5px 12px",
+                                      borderRadius: 8,
+                                      background: "#f8f9fc",
+                                      border: "1px solid #e2e8f0",
+                                      marginLeft: 12,
+                                    }}
+                                  >
+                                    <Typography.Text
+                                      style={{ fontSize: 12, color: "#94a3b8" }}
+                                    >
+                                      时长
+                                    </Typography.Text>
+                                    <Typography.Text
+                                      strong
+                                      style={{ fontSize: 13, color: "#6366f1" }}
+                                    >
+                                      {record.duration}秒
+                                    </Typography.Text>
+                                  </div>
+                                  <PortalDropdown
+                                    label="比例"
+                                    value={
+                                      historyParams[record.id]?.aspectRatio ||
+                                      "选择比例"
+                                    }
+                                    options={engineOptions.ratios}
+                                    expanded={
+                                      expandedEngine === `ratio-${record.id}`
+                                    }
+                                    onToggle={() =>
+                                      setExpandedEngine(
+                                        expandedEngine === `ratio-${record.id}`
+                                          ? null
+                                          : `ratio-${record.id}`,
+                                      )
+                                    }
+                                    onSelect={(v) =>
+                                      setHistoryParams((prev) => ({
+                                        ...prev,
+                                        [record.id]: {
+                                          ...prev[record.id],
+                                          aspectRatio: v as AspectRatio,
+                                          resolution:
+                                            prev[record.id]?.resolution || "",
+                                        },
+                                      }))
+                                    }
+                                    onClose={() => setExpandedEngine(null)}
+                                  />
+                                  <PortalDropdown
+                                    label="分辨率"
+                                    value={
+                                      historyParams[record.id]?.resolution ||
+                                      "选择分辨率"
+                                    }
+                                    options={engineOptions.resolutions}
+                                    expanded={
+                                      expandedEngine === `res-${record.id}`
+                                    }
+                                    onToggle={() =>
+                                      setExpandedEngine(
+                                        expandedEngine === `res-${record.id}`
+                                          ? null
+                                          : `res-${record.id}`,
+                                      )
+                                    }
+                                    onSelect={(v) =>
+                                      setHistoryParams((prev) => ({
+                                        ...prev,
+                                        [record.id]: {
+                                          ...prev[record.id],
+                                          aspectRatio:
+                                            prev[record.id]?.aspectRatio || "",
+                                          resolution: v as Resolution,
+                                        },
+                                      }))
+                                    }
+                                    onClose={() => setExpandedEngine(null)}
+                                  />
+                                </div>
+                              )}
+                              <Button
+                                type="primary"
+                                size="large"
+                                icon={<RocketOutlined />}
+                                block
+                                loading={generating[record.id]}
+                                disabled={
+                                  type === "video" &&
+                                  (!historyParams[record.id]?.aspectRatio ||
+                                    !historyParams[record.id]?.resolution)
+                                }
+                                onClick={async () => {
+                                  const params = historyParams[record.id];
+                                  // 视频类型需要检查比例和分辨率
+                                  if (type === "video") {
+                                    if (
+                                      !params?.aspectRatio ||
+                                      !params?.resolution
+                                    ) {
+                                      message.error("请选择比例和分辨率");
+                                      return;
+                                    }
+                                    if (
+                                      userCredits <
+                                      calcVideoCredits(
+                                        record.duration || 5,
+                                        params.resolution,
+                                      )
+                                    ) {
+                                      message.error("积分不足，请先充值");
+                                      return;
+                                    }
+                                  }
+                                  setGenerating((p) => ({
+                                    ...p,
+                                    [record.id]: true,
+                                  }));
+                                  setRecordStates((p) => ({
+                                    ...p,
+                                    [record.id]: "generating",
+                                  }));
+                                  const mediaText =
+                                    type === "video" ? "视频" : "图片";
+                                  message.loading({
+                                    content: `「${projectName}」正在生成${mediaText}...`,
+                                    duration: 0,
+                                    key: record.id,
+                                  });
+                                  try {
+                                    await generateVideo(record.id, {
+                                      aspectRatio: params?.aspectRatio,
+                                      resolution: params?.resolution,
+                                    });
+                                    setRecordStates((p) => ({
+                                      ...p,
+                                      [record.id]: "done",
+                                    }));
+                                    message.success({
+                                      content: `「${projectName}」${mediaText}生成成功！`,
+                                      key: record.id,
+                                      duration: 3,
+                                    });
+                                  } catch {
+                                    setRecordStates((p) => ({
+                                      ...p,
+                                      [record.id]: "failed",
+                                    }));
+                                    message.error({
+                                      content: `「${projectName}」${mediaText}生成失败`,
+                                      key: record.id,
+                                      duration: 3,
+                                    });
+                                  } finally {
+                                    setGenerating((p) => ({
+                                      ...p,
+                                      [record.id]: false,
+                                    }));
+                                  }
+                                }}
+                                style={{
+                                  borderRadius: 12,
+                                  fontWeight: 600,
+                                  color: "#fff",
+                                  height: 48,
+                                  background:
+                                    "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+                                  border: "none",
+                                  position: "absolute",
+                                  bottom: 18,
+                                  left: 0,
+                                }}
+                              >
+                                生成{type === "video" ? "视频" : "图片"}
+                                {type === "video" ? (
+                                  <span
+                                    style={{
+                                      color: "#d2d2d2",
+                                      fontSize: "14px",
+                                      marginLeft: "6px",
+                                    }}
+                                  >
+                                    (请选择上方的比例分辨率)
+                                  </span>
+                                ) : (
+                                  ""
+                                )}{" "}
+                                {/* {type === "video" &&
+                                  historyParams[record.id]?.resolution
+                                  ? `(${calcVideoCredits(record.duration || 5, historyParams[record.id].resolution)}积分)`
+                                  : ""} */}
+                                {type === "video" &&
+                                  historyParams[record.id]?.resolution
+                                  ? `(${calcVideoCredits(record.duration || 5, historyParams[record.id].resolution)}积分)`
+                                  : ""}
+                                {type === "image" && record.imageSize
+                                  ? `(${getImageCredits(record.imageSize)}积分)`
+                                  : type === "image"
+                                  ? `(积分)`
+                                  : ""}
+                              </Button>
                             </div>
-                          ) : status === 'completed' && record.videoUrl ? (
-                            <div style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid #f0f0f5', position: 'relative' }}>
-                              <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 10 }}>
-                                <Tooltip title="下载视频">
-                                  <Button size="small" icon={<DownloadOutlined />}
-                                    onClick={() => { const a = document.createElement('a'); a.href = `${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${record.videoUrl}`; a.download = `${record.projectName}.mp4`; a.click(); }}
-                                    style={{ background: 'rgba(0,0,0,0.5)', border: 'none', color: '#fff', backdropFilter: 'blur(4px)', borderRadius: 8 }}>下载</Button>
+                          )}
+                          {status === "failed" && (
+                            <div
+                              style={{
+                                position: "absolute",
+                                bottom: 18,
+                                right: 20,
+                              }}
+                            >
+                              <Button
+                                type="primary"
+                                danger
+                                size="large"
+                                icon={<PlayCircleOutlined />}
+                                block
+                                loading={generating[record.id]}
+                                onClick={() => handleRetryGeneration(record.id)}
+                                style={{
+                                  borderRadius: 12,
+                                  fontWeight: 600,
+                                  height: 48,
+                                }}
+                              >
+                                重新生成{type === "video" ? "视频" : "图片"}
+                              </Button>
+                            </div>
+                          )}
+
+                          {status === "generating" ? (
+                            <div
+                              style={{
+                                height: "100%",
+                                minHeight: 180,
+                                borderRadius: 12,
+                                background:
+                                  "linear-gradient(135deg, rgba(99,102,241,0.04), rgba(139,92,246,0.04))",
+                                border: "1px dashed rgba(99,102,241,0.2)",
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                gap: 10,
+                              }}
+                            >
+                              <LoadingOutlined
+                                style={{ color: "#6366f1", fontSize: 28 }}
+                                spin
+                              />
+                              <Typography.Text
+                                style={{ color: "#94a3b8", fontSize: 13 }}
+                              >
+                                {type === "video" ? "视频" : "图片"}生成中...
+                              </Typography.Text>
+                            </div>
+                          ) : (status === "completed" && record.videoUrl) ||
+                            record.imageUrl ? (
+                            <div
+                              style={{
+                                borderRadius: 12,
+                                overflow: "hidden",
+                                border: "1px solid #f0f0f5",
+                                position: "relative",
+                              }}
+                            >
+                              <div
+                                style={{
+                                  position: "absolute",
+                                  top: 10,
+                                  right: 10,
+                                  zIndex: 10,
+                                }}
+                              >
+                                <Tooltip
+                                  title={`下载${type === "video" ? "视频" : "图片"}`}
+                                >
+                                  <Button
+                                    size="small"
+                                    icon={<DownloadOutlined />}
+                                    onClick={() => {
+                                      const a = document.createElement("a");
+                                      a.href = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${type === "video" ? record.videoUrl : record.imageUrl}`;
+                                      a.download = `${record.projectName}${type === "video" ? ".mp4" : ".png"}`;
+                                      a.click();
+                                    }}
+                                    style={{
+                                      background: "rgba(0,0,0,0.5)",
+                                      border: "none",
+                                      color: "#fff",
+                                      backdropFilter: "blur(4px)",
+                                      borderRadius: 8,
+                                    }}
+                                  >
+                                    下载
+                                  </Button>
                                 </Tooltip>
                               </div>
-                              <div style={{ minHeight: 180, overflow: 'hidden' }}>
-                                <video
-                                  src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${record.videoUrl}`}
-                                  controls
-                                  preload="metadata"
-                                  style={{ width: '100%', display: 'block', borderRadius: 0 }}
-                                />
+                              <div
+                                style={{ minHeight: 180, overflow: "hidden" }}
+                              >
+                                {type === "video" ? (
+                                  <video
+                                    src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${record.videoUrl}`}
+                                    controls
+                                    preload="metadata"
+                                    style={{
+                                      width: "100%",
+                                      height: "400px",
+                                      borderRadius: 0,
+                                    }}
+                                  />
+                                ) : (
+                                  <img
+                                    src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${record.imageUrl}`}
+                                    alt={record.projectName}
+                                    style={{
+                                      width: "100%",
+                                      maxHeight: "400px",
+                                      objectFit: "contain",
+                                      borderRadius: 0,
+                                    }}
+                                  />
+                                )}
                               </div>
-                              <div style={{ padding: '8px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#fafbff' }}>
-                                <Space><VideoCameraOutlined style={{ color: '#6366f1', fontSize: 13 }} /><Typography.Text style={{ fontSize: 12, color: '#475569' }}>{record.projectName}</Typography.Text></Space>
-                                {record.generatedAt && <span className="date-display" translate="no" style={{ fontSize: 11, color: '#94a3b8' }}>{formatDate(record.generatedAt)}</span>}
+                              <div
+                                style={{
+                                  padding: "8px 12px",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "space-between",
+                                  background: "#fafbff",
+                                }}
+                              >
+                                <Space>
+                                  {type === "video" ? (
+                                    <VideoCameraOutlined
+                                      style={{ color: "#6366f1", fontSize: 13 }}
+                                    />
+                                  ) : (
+                                    <PictureOutlined
+                                      style={{ color: "#6366f1", fontSize: 13 }}
+                                    />
+                                  )}
+                                  <Typography.Text
+                                    style={{ fontSize: 12, color: "#475569" }}
+                                  >
+                                    {record.projectName}
+                                  </Typography.Text>
+                                </Space>
+                                {record.generatedAt && (
+                                  <span
+                                    className="date-display"
+                                    translate="no"
+                                    style={{ fontSize: 11, color: "#94a3b8" }}
+                                  >
+                                    {formatDate(record.generatedAt)}
+                                  </span>
+                                )}
                               </div>
                             </div>
-                          ) : status === 'failed' ? (
-                            <div style={{ height: '100%', minHeight: 180, borderRadius: 12, background: 'rgba(239,68,68,0.03)', border: '1px dashed rgba(239,68,68,0.2)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 16 }}>
-                              <CloseCircleOutlined style={{ color: '#ef4444', fontSize: 28 }} />
-                              <Typography.Text style={{ color: '#ef4444', fontSize: 14, fontWeight: 600 }}>视频生成失败</Typography.Text>
+                          ) : status === "failed" ? (
+                            <div
+                              style={{
+                                height: "100%",
+                                minHeight: 180,
+                                borderRadius: 12,
+                                background: "rgba(239,68,68,0.03)",
+                                border: "1px dashed rgba(239,68,68,0.2)",
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                gap: 10,
+                                padding: 16,
+                              }}
+                            >
+                              <CloseCircleOutlined
+                                style={{ color: "#ef4444", fontSize: 28 }}
+                              />
+                              <Typography.Text
+                                style={{
+                                  color: "#ef4444",
+                                  fontSize: 14,
+                                  fontWeight: 600,
+                                }}
+                              >
+                                {type === "video" ? "视频" : "图片"}生成失败
+                              </Typography.Text>
                               {record.errorMessage && (
-                                <Typography.Text style={{ color: '#ef4444', fontSize: 12, textAlign: 'center', lineHeight: 1.6 }}>{record.errorMessage}</Typography.Text>
+                                <Typography.Text
+                                  style={{
+                                    color: "#ef4444",
+                                    fontSize: 12,
+                                    textAlign: "center",
+                                    lineHeight: 1.6,
+                                  }}
+                                >
+                                  {record.errorMessage}
+                                </Typography.Text>
                               )}
                             </div>
                           ) : (
-                            <div style={{ height: '100%', minHeight: 180, borderRadius: 12, background: '#f8f9fc', border: '1px dashed #e2e8f0', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
-                              <ClockCircleOutlined style={{ color: '#94a3b8', fontSize: 28 }} />
-                              <Typography.Text style={{ color: '#94a3b8', fontSize: 13 }}>
-                                {status === 'prompt_optimized' ? '待配置视频参数' : '待生成视频'}
+                            <div
+                              style={{
+                                height: "100%",
+                                minHeight: 180,
+                                borderRadius: 12,
+                                background: "#f8f9fc",
+                                border: "1px dashed #e2e8f0",
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                gap: 10,
+                              }}
+                            >
+                              <ClockCircleOutlined
+                                style={{ color: "#94a3b8", fontSize: 28 }}
+                              />
+                              <Typography.Text
+                                style={{ color: "#94a3b8", fontSize: 13 }}
+                              >
+                                {type === "image"
+                                  ? "待生成图片"
+                                  : status === "prompt_optimized"
+                                    ? "待配置视频参数"
+                                    : "待生成视频"}
                               </Typography.Text>
                             </div>
                           )}
                         </div>
 
                         {/* Generate buttons for history records */}
-                        {status === 'prompt_optimized' && (
+                        {/* {status === 'prompt_optimized' && (
                           <div style={{ marginTop: 16, width: '100%' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
                               <div translate="no" style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 8, background: '#f8f9fc', border: '1px solid #e2e8f0' }}>
@@ -1152,14 +4143,14 @@ const GeneratePage: React.FC = () => {
                                 options={engineOptions.ratios}
                                 expanded={expandedEngine === `ratio-${record.id}`}
                                 onToggle={() => setExpandedEngine(expandedEngine === `ratio-${record.id}` ? null : `ratio-${record.id}`)}
-                                onSelect={(v) => setHistoryParams(prev => ({ ...prev, [record.id]: { ...prev[record.id], aspectRatio: v as AspectRatio, resolution: prev[record.id]?.resolution || '720p' } }))}
+                                onSelect={(v) => setHistoryParams(prev => ({ ...prev, [record.id]: { ...prev[record.id], aspectRatio: v as AspectRatio, resolution: prev[record.id]?.resolution || '' } }))}
                                 onClose={() => setExpandedEngine(null)}
                               />
                               <PortalDropdown label="分辨率" value={historyParams[record.id]?.resolution || '选择分辨率'}
                                 options={engineOptions.resolutions}
                                 expanded={expandedEngine === `res-${record.id}`}
                                 onToggle={() => setExpandedEngine(expandedEngine === `res-${record.id}` ? null : `res-${record.id}`)}
-                                onSelect={(v) => setHistoryParams(prev => ({ ...prev, [record.id]: { ...prev[record.id], aspectRatio: prev[record.id]?.aspectRatio || '16:9', resolution: v as Resolution } }))}
+                                onSelect={(v) => setHistoryParams(prev => ({ ...prev, [record.id]: { ...prev[record.id], aspectRatio: prev[record.id]?.aspectRatio || '', resolution: v as Resolution } }))}
                                 onClose={() => setExpandedEngine(null)}
                               />
                             </div>
@@ -1196,7 +4187,7 @@ const GeneratePage: React.FC = () => {
                               onClick={() => handleRetryGeneration(record.id)}
                               style={{ borderRadius: 12, fontWeight: 600, height: 48 }}>重新生成视频</Button>
                           </div>
-                        )}
+                        )} */}
                       </div>
                     </div>
                   )}
@@ -1208,21 +4199,52 @@ const GeneratePage: React.FC = () => {
       )}
 
       {/* Video preview modal */}
-      <Modal open={!!previewVideoUrl} onCancel={() => setPreviewVideoUrl(null)} footer={null}
-        width={480} centered destroyOnClose closable={false} title={null}
-        styles={{ body: { padding: 0, background: '#000', position: 'relative' } }}>
+      <Modal
+        open={!!previewVideoUrl}
+        onCancel={() => setPreviewVideoUrl(null)}
+        footer={null}
+        width={480}
+        centered
+        destroyOnClose
+        closable={false}
+        title={null}
+        styles={{
+          body: { padding: 0, background: "#000", position: "relative" },
+        }}
+      >
         {previewVideoUrl && (
           <>
-            <video src={previewVideoUrl} controls autoPlay style={{ width: '100%', display: 'block', maxHeight: '70vh' }} />
-            <div onClick={() => setPreviewVideoUrl(null)}
+            <video
+              src={previewVideoUrl}
+              controls
+              autoPlay
+              style={{ width: "100%", display: "block", maxHeight: "70vh" }}
+            />
+            <div
+              onClick={() => setPreviewVideoUrl(null)}
               style={{
-                position: 'absolute', top: 8, right: 8, width: 28, height: 28, borderRadius: '50%',
-                background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                cursor: 'pointer', zIndex: 10, transition: 'background 0.15s',
+                position: "absolute",
+                top: 8,
+                right: 8,
+                width: 28,
+                height: 28,
+                borderRadius: "50%",
+                background: "rgba(0,0,0,0.6)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                cursor: "pointer",
+                zIndex: 10,
+                transition: "background 0.15s",
               }}
-              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0,0,0,0.85)'; }}
-              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(0,0,0,0.6)'; }}>
-              <CloseCircleOutlined style={{ color: '#fff', fontSize: 16 }} />
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = "rgba(0,0,0,0.85)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = "rgba(0,0,0,0.6)";
+              }}
+            >
+              <CloseCircleOutlined style={{ color: "#fff", fontSize: 16 }} />
             </div>
           </>
         )}
diff --git a/video-gen-app/src/pages/InitialReplication.tsx b/video-gen-app/src/pages/InitialReplication.tsx
new file mode 100644
index 00000000..5db88124
--- /dev/null
+++ b/video-gen-app/src/pages/InitialReplication.tsx
@@ -0,0 +1,538 @@
+import React, { useState } from 'react';
+import {
+  Layout,
+  Button,
+  Input,
+  Upload,
+  message,
+  Card,
+  Modal,
+  Table,
+  Space,
+} from 'antd';
+import {
+  PlusOutlined,
+  VideoCameraOutlined,
+  PictureOutlined,
+} from '@ant-design/icons';
+
+const { Header, Content } = Layout;
+const { TextArea } = Input;
+
+const GenerateConver: React.FC = () => {
+
+  const [tableData, setTableData] = useState<any[]>(
+    // [
+    //         {
+    //           id: 1,
+    //           image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=product%20image%20red%20gift%20box%20with%20hearts&image_size=square',
+    //           originalName: '进圈',
+    //           productName: '他趣',
+    //           status: '视频成功',
+    //           createTime: '2026-05-14 17:49:20',
+    //         },
+    //         {
+    //           id: 2,
+    //           image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=luxury%20perfume%20bottle%20golden%20elegant&image_size=square',
+    //           originalName: '香水',
+    //           productName: '面霜',
+    //           status: '视频提示词成功',
+    //           createTime: '2026-05-08 08:57:46',
+    //         },
+    //       ]
+  );
+
+
+  // 表单数据
+  const [originalProductName, setOriginalProductName] = useState<string>('');
+  const [ownProductName, setOwnProductName] = useState<string>('');
+  const [productSellingPoints, setProductSellingPoints] = useState<string>('');
+
+  // 文件状态
+  const [videoFile, setVideoFile] = useState<File | null>(null);
+  const [videoUrl, setVideoUrl] = useState<string>('');
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imageUrl, setImageUrl] = useState<string>('');
+
+  // 弹窗状态
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // 文件上传前校验
+  const beforeVideoUpload = (file: File) => {
+    const isVideo = file.type.startsWith('video/');
+    if (!isVideo) {
+      message.error('只能上传视频文件');
+      return false;
+    }
+    const isLt50M = file.size / 1024 / 1024 < 50;
+    if (!isLt50M) {
+      message.error('视频大小不能超过50MB');
+      return false;
+    }
+
+    // 检查视频时长
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.onloadedmetadata = () => {
+      if (video.duration > 15) {
+        message.error('视频时长不能超过15秒');
+        URL.revokeObjectURL(videoUrl);
+        setVideoFile(null);
+        setVideoUrl('');
+        return;
+      }
+    };
+    video.src = URL.createObjectURL(file);
+
+    setVideoFile(file);
+    setVideoUrl(URL.createObjectURL(file));
+    return false;
+  };
+
+  const beforeImageUpload = (file: File) => {
+    const isImage = file.type.startsWith('image/');
+    if (!isImage) {
+      message.error('只能上传图片文件');
+      return false;
+    }
+
+    // 检查图片比例
+    const img = new Image();
+    img.onload = () => {
+      const ratio = img.width / img.height;
+      const isRatioValid = Math.abs(ratio - 0.75) < 0.1 || Math.abs(ratio - 0.5625) < 0.1;
+      // if (!isRatioValid) {
+      //   message.warning('建议使用3:4或9:16比例的图片以获得最佳效果');
+      // }
+    };
+    img.src = URL.createObjectURL(file);
+
+    setImageFile(file);
+    setImageUrl(URL.createObjectURL(file));
+    return false;
+  };
+
+  // 删除视频
+  const handleRemoveVideo = () => {
+    if (videoUrl) {
+      URL.revokeObjectURL(videoUrl);
+    }
+    setVideoFile(null);
+    setVideoUrl('');
+  };
+
+  // 删除图片
+  const handleRemoveImage = () => {
+    if (imageUrl) {
+      URL.revokeObjectURL(imageUrl);
+    }
+    setImageFile(null);
+    setImageUrl('');
+  };
+
+  // 处理生成
+  const handleGenerate = () => {
+    if (!originalProductName.trim()) {
+      message.warning('请输入原视频产品名称');
+      return;
+    }
+    if (!ownProductName.trim()) {
+      message.warning('请输入自有产品名称');
+      return;
+    }
+    if (!productSellingPoints.trim()) {
+      message.warning('请输入产品卖点');
+      return;
+    }
+    message.success('正在生成爆款开头复刻视频...');
+    console.log('生成参数:', {
+      originalProductName,
+      ownProductName,
+      productSellingPoints,
+    });
+  };
+
+  return (
+    <div className="replication-container" style={{ overflow: 'auto', height: '94vh', display: 'flex', justifyContent: 'space-between', gap: '2%' }}>
+
+      <div className="replication-preview" style={{ width: '70%', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column', borderRadius: 15, overflow: 'hidden' }}>
+
+
+
+        {/* 顶部标题栏 */}
+        <Header
+          style={{
+            background: '#fff',
+            padding: '0 24px',
+            borderBottom: '1px solid #e8e8e8',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <h2 style={{ margin: 0, fontSize: 16, fontWeight: 500, color: '#333' }}>
+            爆款开头复刻
+          </h2>
+          <Button
+            type="primary"
+            ghost
+            style={{ borderRadius: 6, padding: '4px 12px', fontSize: 12 }}
+            onClick={() => setIsModalOpen(true)}
+          >
+            创作记录
+          </Button>
+        </Header>
+
+        {/* 左侧预览区域 */}
+        <div style={{ flex: 1, background: '#fff', borderRight: '1px solid #e8e8e8',  }}>
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {/* 占位图标 */}
+            <div
+              style={{
+                width: 100,
+                height: 100,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 20,
+                position: 'relative',
+              }}
+            >
+              {/* 底层卡片 */}
+              <div
+                style={{
+                  width: 55,
+                  height: 65,
+                  background: 'linear-gradient(135deg, #6366f1 0%, #a78bfa 100%)',
+                  borderRadius: 10,
+                  position: 'absolute',
+                  bottom: 0,
+                  right: 5,
+                }}
+              />
+              {/* 上层卡片 */}
+              <div
+                style={{
+                  width: 45,
+                  height: 52,
+                  border: '2px solid #c7d2fe',
+                  borderRadius: 8,
+                  position: 'absolute',
+                  top: 0,
+                  left: 5,
+                }}
+              />
+            </div>
+            <h3 style={{ margin: 0, fontSize: 14, fontWeight: 500, color: '#333', marginBottom: 8 }}>
+              暂无生成内容
+            </h3>
+            <p style={{ margin: 0, fontSize: 12, color: '#999', textAlign: 'center', padding: '0 20px' }}>
+              请完善素材与卖点，生成专属爆款开头复刻视频
+            </p>
+          </div>
+        </div>
+      </div>
+
+
+      <div className="replication-form" style={{ width: '28%', height: '100%', background: '#fff', borderRadius: 15, overflow: 'hidden' }}>
+        {/* 右侧表单区域 */}
+        <div className="replication-form-content" style={{ width: '100%', height: '100%', background: '#fff', padding: 20, overflowY: 'auto' }}>
+          {/* 上传视频 */}
+          <div style={{ marginBottom: 16 }}>
+            <p style={{ margin: 0, fontSize: 13, fontWeight: 500, color: '#333', marginBottom: 8 }}>
+              上传视频
+            </p>
+            {videoUrl ? (
+              <div style={{ position: 'relative' }}>
+                <video
+                  src={videoUrl}
+                  controls
+                  style={{ width: '100%', borderRadius: 8, maxHeight: 200 }}
+                />
+                <button
+                  onClick={handleRemoveVideo}
+                  style={{
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                    width: 24,
+                    height: 24,
+                    border: 'none',
+                    background: 'rgba(0,0,0,0.6)',
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    color: '#fff',
+                    fontSize: 14,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  ×
+                </button>
+                <div style={{ marginTop: 8, fontSize: 11, color: '#999' }}>
+                  {videoFile?.name} ({(videoFile?.size ? (videoFile.size / 1024 / 1024).toFixed(2) : 0)}MB)
+                </div>
+              </div>
+            ) : (
+              <Upload
+                beforeUpload={beforeVideoUpload}
+                showUploadList={false}
+                accept="video/mp4,video/quicktime,.mp4,.mov"
+              >
+                <div
+                  style={{
+                    border: '1px dashed #d9d9d9',
+                    borderRadius: 8,
+                    padding: 20,
+                    textAlign: 'center',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s',
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.borderColor = '#6366f1';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.borderColor = '#d9d9d9';
+                  }}
+                >
+                  <VideoCameraOutlined style={{ fontSize: 18, color: '#999', marginBottom: 6 }} />
+                  <p style={{ margin: 0, fontSize: 12, color: '#666' }}>
+                    您可以通过点击或拖拽上传视频
+                  </p>
+                  <p style={{ margin: 0, fontSize: 11, color: '#bbb', marginTop: 4 }}>
+                    支持的文件类型：MP4、MOV|视频最大时长：15 秒 | 最大大小：50M
+                  </p>
+                </div>
+              </Upload>
+            )}
+          </div>
+
+          {/* 上传产品图片 */}
+          <div style={{ marginBottom: 16 }}>
+            <p style={{ margin: 0, fontSize: 13, fontWeight: 500, color: '#333', marginBottom: 8 }}>
+              上传产品图片
+            </p>
+            {imageUrl ? (
+              <div style={{ position: 'relative' }}>
+                <img
+                  src={imageUrl}
+                  alt="产品图片"
+                  style={{ width: '100%', borderRadius: 8, maxHeight: 200, objectFit: 'contain' }}
+                />
+                <button
+                  onClick={handleRemoveImage}
+                  style={{
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                    width: 24,
+                    height: 24,
+                    border: 'none',
+                    background: 'rgba(0,0,0,0.6)',
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    color: '#fff',
+                    fontSize: 14,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  ×
+                </button>
+                <div style={{ marginTop: 8, fontSize: 11, color: '#999' }}>
+                  {imageFile?.name} ({(imageFile?.size ? (imageFile.size / 1024 / 1024).toFixed(2) : 0)}MB)
+                </div>
+              </div>
+            ) : (
+              <Upload
+                beforeUpload={beforeImageUpload}
+                showUploadList={false}
+                accept="image/jpeg,image/jpg,image/png,.jpg,.jpeg,.png"
+              >
+                <div
+                  style={{
+                    border: '1px dashed #d9d9d9',
+                    borderRadius: 8,
+                    padding: 16,
+                    textAlign: 'center',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s',
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.borderColor = '#6366f1';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.borderColor = '#d9d9d9';
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
+                    <PictureOutlined style={{ fontSize: 14, color: '#999' }} />
+                    <span style={{ fontSize: 12, color: '#666' }}>+ 点击上传</span>
+                  </div>
+                  <p style={{ margin: 0, fontSize: 11, color: '#bbb', marginTop: 4 }}>
+                    支持 JPG,JPEG,PNG 格式，图片比例为 3:4 或 9:16 效果最佳
+                  </p>
+                </div>
+              </Upload>
+            )}
+          </div>
+
+          {/* 原视频产品名称 */}
+          <div style={{ marginBottom: 12 }}>
+            <p style={{ margin: 0, fontSize: 12, color: '#666', marginBottom: 6 }}>
+              原视频产品名称
+            </p>
+            <Input
+              value={originalProductName}
+              onChange={(e) => setOriginalProductName(e.target.value)}
+              placeholder="请输入原视频产品名称"
+              style={{ borderRadius: 6, height: 32, fontSize: 12 }}
+              maxLength={10}
+              suffix={<span style={{ color: '#ccc', fontSize: 11 }}>{originalProductName.length}/10</span>}
+            />
+          </div>
+
+          {/* 自有产品名称 */}
+          <div style={{ marginBottom: 12 }}>
+            <p style={{ margin: 0, fontSize: 12, color: '#666', marginBottom: 6 }}>
+              自有产品名称
+            </p>
+            <Input
+              value={ownProductName}
+              onChange={(e) => setOwnProductName(e.target.value)}
+              placeholder="请输入自有产品名称"
+              style={{ borderRadius: 6, height: 32, fontSize: 12 }}
+              maxLength={10}
+              suffix={<span style={{ color: '#ccc', fontSize: 11 }}>{ownProductName.length}/10</span>}
+            />
+          </div>
+
+          {/* 产品卖点 */}
+          <div style={{ marginBottom: 16 }}>
+            <p style={{ margin: 0, fontSize: 12, color: '#666', marginBottom: 6 }}>
+              产品卖点
+            </p>
+            <div style={{ position: 'relative' }}>
+              <TextArea
+                value={productSellingPoints}
+                onChange={(e) => setProductSellingPoints(e.target.value)}
+                placeholder="请输入产品卖点"
+                style={{ borderRadius: 6, fontSize: 12 }}
+                rows={2}
+                maxLength={30}
+              />
+              <span style={{ position: 'absolute', right: 8, bottom: 6, color: '#ccc', fontSize: 11 }}>
+                {productSellingPoints.length}/30
+              </span>
+            </div>
+          </div>
+
+          {/* 立即生成按钮 */}
+          <Button
+            type="primary"
+            block
+            size="large"
+            onClick={handleGenerate}
+            style={{
+              borderRadius: 8,
+              height: 40,
+              fontWeight: 500,
+              background: 'linear-gradient(135deg, #6366f1 0%, #a78bfa 100%)',
+              border: 'none',
+              fontSize: 14,
+            }}
+          >
+            立即生成+
+          </Button>
+        </div>
+      </div>
+
+      {/* 创作记录弹窗 */}
+      <Modal
+        title="创作记录"
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        width={800}
+        footer={null}
+        style={{ borderRadius: 12 }}
+      >
+        {/* 搜索区域 */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
+          <Input
+            placeholder="搜索产品名称"
+            style={{ width: 200, borderRadius: 6, marginRight: 8 }}
+          />
+          <Button type="primary" style={{ borderRadius: 6 }}>
+            搜索
+          </Button>
+        </div>
+
+        {/* 表格 */}
+        <Table
+          columns={[
+            {
+              title: '产品图片',
+              dataIndex: 'image',
+              key: 'image',
+              width: 90,
+              render: (image: string) => (
+                <img
+                  src={image}
+                  alt="产品图片"
+                  style={{ width: 50, height: 50, objectFit: 'cover', borderRadius: 6 }}
+                />
+              ),
+            },
+            {
+              title: '原产品名称',
+              dataIndex: 'originalName',
+              key: 'originalName',
+            },
+            {
+              title: '产品名称',
+              dataIndex: 'productName',
+              key: 'productName',
+            },
+            {
+              title: '状态',
+              dataIndex: 'status',
+              key: 'status',
+            },
+            {
+              title: '创建时间',
+              dataIndex: 'createTime',
+              key: 'createTime',
+            },
+            {
+              title: '操作',
+              key: 'action',
+              render: () => (
+                <a href="#" style={{ color: '#6366f1', textDecoration: 'none', fontSize: 12 }}>
+                  查看详情
+                </a>
+              ),
+            },
+          ]}
+          dataSource={tableData}
+          rowKey="id"
+          pagination={false}
+          style={{ fontSize: 13 }}
+        />
+      </Modal>
+
+    </div>
+  );
+};
+
+export default GenerateConver;
\ No newline at end of file
diff --git a/video-gen-app/src/pages/ProjectsPage.tsx b/video-gen-app/src/pages/ProjectsPage.tsx
index e97484db..e6f2a874 100644
--- a/video-gen-app/src/pages/ProjectsPage.tsx
+++ b/video-gen-app/src/pages/ProjectsPage.tsx
@@ -156,7 +156,7 @@ const ProjectsPage: React.FC = () => {
                     background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', border: 'none',
                     borderRadius: 10, fontWeight: 600, height: 36,
                     boxShadow: '0 4px 12px rgba(99,102,241,0.25)',
-                  }}>生成视频</Button>
+                  }}>生成</Button>
                 <Popconfirm title="确定删除该项目？" description="项目下的生成记录将一并删除"
                   onConfirm={async (e) => { e?.stopPropagation(); await deleteProject(project.id); message.success('项目已删除'); }}
                   onCancel={(e) => e?.stopPropagation()}>
diff --git a/video-gen-app/src/pages/RecordsPage.tsx b/video-gen-app/src/pages/RecordsPage.tsx
index a5f4cdbf..ab679942 100644
--- a/video-gen-app/src/pages/RecordsPage.tsx
+++ b/video-gen-app/src/pages/RecordsPage.tsx
@@ -25,6 +25,7 @@ import {
   VideoCameraOutlined,
   DownloadOutlined,
   RocketOutlined,
+  PictureOutlined,
 } from '@ant-design/icons';
 import { useAppStore } from '../store/useAppStore';
 import type { GenerationStatus, AspectRatio, Resolution } from '../types';
@@ -68,6 +69,23 @@ const RecordsPage: React.FC = () => {
   };
 
   const openGenModal = (record: any) => {
+    const type: any = record.genType || 'image';
+
+    // 如果是图片类型，直接生成，不需要弹窗
+    if (type === 'image') {
+      setGenerating((p) => ({ ...p, [record.id]: true }));
+      message.loading({ content: `「${record.projectName}」正在生成图片...`, duration: 0, key: record.id });
+      generateVideo(record.id, {}).then(() => {
+        message.success({ content: `「${record.projectName}」图片生成成功！`, key: record.id, duration: 3 });
+      }).catch(() => {
+        message.error({ content: `「${record.projectName}」图片生成失败`, key: record.id, duration: 3 });
+      }).finally(() => {
+        setGenerating((p) => ({ ...p, [record.id]: false }));
+      });
+      return;
+    }
+
+    // 如果是视频类型，显示参数选择弹窗
     setGenModal({
       recordId: record.id,
       projectName: record.projectName,
@@ -124,6 +142,9 @@ const RecordsPage: React.FC = () => {
             const prompt = editablePrompts[record.id] ?? record.optimizedPrompt;
             const isGenerating = generating[record.id];
             const isExpanded = expandedId === record.id;
+            const type: any = record.genType || 'image';
+
+
 
             return (
               <div key={record.id} className="animate-slideInCard" style={{ animationDelay: `${i * 0.04}s` }}>
@@ -138,6 +159,12 @@ const RecordsPage: React.FC = () => {
                     display: 'flex', alignItems: 'center', gap: 12,
                   }}
                 >
+                  {/* <div style={{ width: 28, height: 28, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, }}>
+                        {type === 'image' ? <span style={{ color: '#d97706', fontSize: 12 }} >图片</span> : <span style={{ color: '#2563eb', fontSize: 12 }} >视频</span>}
+                      </div> */}
+                  <div style={{ width: 28, height: 28, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, background: type === 'image' ? '#fef3c7' : '#dbeafe' }}>
+                    {type === 'image' ? <PictureOutlined style={{ color: '#d97706', fontSize: 12 }} /> : <VideoCameraOutlined style={{ color: '#2563eb', fontSize: 12 }} />}
+                  </div>
                   {/* Expand icon */}
                   {isExpanded
                     ? <CaretDownOutlined style={{ color: '#6366f1', fontSize: 12, flexShrink: 0 }} />
@@ -162,9 +189,11 @@ const RecordsPage: React.FC = () => {
                   </Typography.Text>
 
                   {/* Meta */}
-                  <span className="mobile-meta" translate="no" style={{ fontSize: 12, color: '#94a3b8', flexShrink: 0 }}>
+                  {type === 'image' ? <span className="mobile-meta" translate="no" style={{ fontSize: 12, color: '#94a3b8', flexShrink: 0 }}>
+                    {record.duration ? `${record.imageSize}` : '-'} · {record.imageProportion || '-'} · {record.imagePx || '-'} · <span className="date-display" translate="no">{formatDate(record.createdAt)}</span>
+                  </span> : <span className="mobile-meta" translate="no" style={{ fontSize: 12, color: '#94a3b8', flexShrink: 0 }}>
                     {record.duration ? `${record.duration}秒` : '-'} · {record.aspectRatio || '-'} · {record.resolution || '-'} · <span className="date-display" translate="no">{formatDate(record.createdAt)}</span>
-                  </span>
+                  </span>}
 
                   {/* Quick actions */}
                   <div className="record-actions" onClick={(e) => e.stopPropagation()}>
@@ -291,7 +320,17 @@ const RecordsPage: React.FC = () => {
                           display: 'flex', gap: 16, padding: '12px 16px',
                           borderRadius: 10, background: '#f8f9fc',
                         }}>
-                          {[
+                          {type === 'image' ? [
+                            { label: '分辨率', value: record.imageSize ? `${record.imageSize} ` : '-' },
+                            { label: '画面比例', value: record.imageProportion ? `${record.imageProportion} ` : '-' },
+                            { label: '画面尺寸', value: record.imageProportion ? `${record.imageProportion} ` : '-' },
+                            { label: '消耗积分', value: record.creditsCost ? `${record.creditsCost} ` : '-', highlight: !!record.creditsCost },
+                          ].map((item, j) => (
+                            <div key={j} style={{ flex: 1 }}>
+                              <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>{item.label}</Typography.Text>
+                              <Typography.Text strong style={{ fontSize: 14, color: item.highlight ? '#6366f1' : '#1a1a2e' }}>{item.value}</Typography.Text>
+                            </div>
+                          )) : [
                             { label: '时长', value: record.duration ? `${record.duration} 秒` : '-' },
                             { label: '画面比例', value: record.aspectRatio || (record.status === 'prompt_optimized' ? '待选择' : '-') },
                             { label: '分辨率', value: record.resolution || (record.status === 'prompt_optimized' ? '待选择' : '-') },
@@ -315,7 +354,7 @@ const RecordsPage: React.FC = () => {
                                 background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
                                 border: 'none', boxShadow: '0 8px 24px rgba(99,102,241,0.3)',
                               }}>
-                              选择参数生成视频
+                              {type === 'video' ? '选择参数生成视频' : '生成图片'}
                             </Button>
                           </div>
                         )}
@@ -327,7 +366,7 @@ const RecordsPage: React.FC = () => {
                               loading={isGenerating}
                               onClick={() => openGenModal(record)}
                               style={{ borderRadius: 12, fontWeight: 600, height: 44 }}>
-                              重新生成视频
+                              重新生成{type === 'video' ? '视频' : '图片'}
                             </Button>
                           </div>
                         )}
@@ -343,34 +382,42 @@ const RecordsPage: React.FC = () => {
                             display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12,
                           }}>
                             <LoadingOutlined style={{ color: '#6366f1', fontSize: 32 }} spin />
-                            <Typography.Text style={{ color: '#94a3b8', fontSize: 14 }}>视频生成中...</Typography.Text>
+                            <Typography.Text style={{ color: '#94a3b8', fontSize: 14 }}>{type === 'video' ? '视频' : '图片'}生成中...</Typography.Text>
                             <Typography.Text style={{ color: '#cbd5e1', fontSize: 12 }}>请耐心等待，生成完成后将自动展示</Typography.Text>
                           </div>
-                        ) : record.status === 'completed' && record.videoUrl ? (
+                        ) : record.status === 'completed' && (record.videoUrl || record.imageUrl) ? (
                           <div style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid #f0f0f5', position: 'relative' }}>
                             <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 10 }}>
-                              <Tooltip title="下载视频">
+                              <Tooltip title={`下载${type === 'video' ? '视频' : '图片'}`}>
                                 <Button size="small" icon={<DownloadOutlined />}
-                                  onClick={() => { const a = document.createElement('a'); a.href = `${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${record.videoUrl}`; a.download = `${record.projectName}.mp4`; a.click(); }}
+                                  onClick={() => { const a = document.createElement('a'); a.href = `${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${type === 'video' ? record.videoUrl : record.imageUrl}`; a.download = `${record.projectName}${type === 'video' ? '.mp4' : '.png'}`; a.click(); }}
                                   style={{ background: 'rgba(0,0,0,0.5)', border: 'none', color: '#fff', backdropFilter: 'blur(4px)', borderRadius: 8 }}>
                                   下载
                                 </Button>
                               </Tooltip>
                             </div>
                             <div style={{ minHeight: 280, overflow: 'hidden' }}>
-                              <video
-                                src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${record.videoUrl}`}
-                                controls
-                                preload="metadata"
-                                style={{ width: '100%', display: 'block' }}
-                              />
+                              {type === 'video' ? (
+                                <video
+                                  src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${record.videoUrl}`}
+                                  controls
+                                  preload="metadata"
+                                  style={{ width: '100%', height: '400px', display: 'block' }}
+                                />
+                              ) : (
+                                <img
+                                  src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${record.imageUrl}`}
+                                  alt={record.projectName}
+                                  style={{ width: '100%', maxHeight: '400px', objectFit: 'contain', display: 'block' }}
+                                />
+                              )}
                             </div>
                             <div style={{
                               padding: '10px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                               background: '#fafbff',
                             }}>
                               <Space>
-                                <VideoCameraOutlined style={{ color: '#6366f1' }} />
+                                {type === 'video' ? <VideoCameraOutlined style={{ color: '#6366f1' }} /> : <PictureOutlined style={{ color: '#6366f1' }} />}
                                 <Typography.Text style={{ fontSize: 13, color: '#475569' }}>
                                   {record.projectName}
                                 </Typography.Text>
@@ -390,7 +437,7 @@ const RecordsPage: React.FC = () => {
                             display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12,
                           }}>
                             <CloseCircleOutlined style={{ color: '#ef4444', fontSize: 32 }} />
-                            <Typography.Text style={{ color: '#ef4444', fontSize: 14 }}>视频生成失败</Typography.Text>
+                            <Typography.Text style={{ color: '#ef4444', fontSize: 14 }}>{type === 'video' ? '视频' : '图片'}生成失败</Typography.Text>
                             <Typography.Text style={{ color: '#94a3b8', fontSize: 12 }}>请在左侧点击重新生成</Typography.Text>
                           </div>
                         ) : (
@@ -400,7 +447,7 @@ const RecordsPage: React.FC = () => {
                             display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12,
                           }}>
                             <ClockCircleOutlined style={{ color: '#94a3b8', fontSize: 32 }} />
-                            <Typography.Text style={{ color: '#94a3b8', fontSize: 14 }}>待生成视频</Typography.Text>
+                            <Typography.Text style={{ color: '#94a3b8', fontSize: 14 }}>待生成{type === 'video' ? '视频' : '图片'}</Typography.Text>
                             <Typography.Text style={{ color: '#cbd5e1', fontSize: 12 }}>点击左侧生成按钮开始生成</Typography.Text>
                           </div>
                         )}
diff --git a/video-gen-app/src/pages/RemoveLens.tsx b/video-gen-app/src/pages/RemoveLens.tsx
new file mode 100644
index 00000000..4e555bc1
--- /dev/null
+++ b/video-gen-app/src/pages/RemoveLens.tsx
@@ -0,0 +1,613 @@
+import { useState, useRef, useCallback } from 'react';
+
+interface FrameData {
+  url: string;
+  time: number;
+  selected: boolean;
+}
+
+export default function VideoFrameExtractor() {
+  const [videoFile, setVideoFile] = useState<File | null>(null);
+  const [videoUrl, setVideoUrl] = useState<string>('');
+  const [frames, setFrames] = useState<FrameData[]>([]);
+  const [isExtracting, setIsExtracting] = useState(false);
+  const [extractProgress, setExtractProgress] = useState(0);
+  const [selectedFrames, setSelectedFrames] = useState<number[]>([]);
+  const [error, setError] = useState<string>('');
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const cleanupResources = useCallback(() => {
+    if (videoUrl) {
+      URL.revokeObjectURL(videoUrl);
+    }
+    frames.forEach(frame => {
+      if (frame.url.startsWith('blob:')) {
+        URL.revokeObjectURL(frame.url);
+      }
+    });
+    setFrames([]);
+    setVideoUrl('');
+    setVideoFile(null);
+    setError('');
+    setSelectedFrames([]);
+  }, [videoUrl, frames]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('video/')) {
+      setError('请选择视频文件');
+      return;
+    }
+
+    if (file.size > 100 * 1024 * 1024) {
+      setError('视频文件大小不能超过 100MB');
+      return;
+    }
+
+    cleanupResources();
+
+    setVideoFile(file);
+    const url = URL.createObjectURL(file);
+    setVideoUrl(url);
+    setError('');
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('video/')) {
+      setError('请选择视频文件');
+      return;
+    }
+
+    if (file.size > 100 * 1024 * 1024) {
+      setError('视频文件大小不能超过 100MB');
+      return;
+    }
+
+    cleanupResources();
+
+    setVideoFile(file);
+    const url = URL.createObjectURL(file);
+    setVideoUrl(url);
+    setError('');
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  };
+
+  /**
+   * 视频帧提取核心函数 - 拆镜功能的主要实现
+   * 
+   * 功能说明：
+   * - 从上传的视频中按时间间隔提取帧画面
+   * - 每秒提取一帧，确保覆盖整个视频时长
+   * - 默认选中前4秒的帧（4帧），用于后续创作
+   * 
+   * 技术实现：
+   * - 使用 HTML5 Video API 进行视频帧捕获
+   * - 通过 Canvas API 将视频帧转换为图片
+   * - 使用 Promise + 事件监听确保帧数据就绪
+   * - 添加超时机制防止死锁
+   */
+  const extractFrames = useCallback(async () => {
+    // 前置检查：确保视频和画布元素已就绪
+    if (!videoRef.current || !canvasRef.current) return;
+
+    // 初始化提取状态
+    setIsExtracting(true);      // 标记正在提取中
+    setExtractProgress(1);      // 重置进度为0%
+    setSelectedFrames([]);      // 清空已选帧列表
+
+    // 获取视频和画布引用
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;  // Canvas 2D上下文获取失败则退出
+
+    // 计算提取参数
+    const duration = video.duration;                    // 视频总时长（秒）
+    const frameList: FrameData[] = [];                  // 存储提取的帧数据
+    const extractInterval = 1;                          // 提取间隔：每1秒抽一帧
+    const totalFrames = Math.max(1, Math.floor(duration / extractInterval));  // 计算总帧数
+
+    try {
+      // 遍历视频时间轴，按间隔提取帧
+      for (let time = 0; time < duration; time += extractInterval) {
+        // 设置视频当前播放位置到目标时间点
+        video.currentTime = time;
+
+        // 等待帧数据就绪（异步等待）
+        await new Promise<void>((resolve) => {
+          /**
+           * 检查视频就绪状态
+           * readyState >= 2 表示当前帧数据已加载完成
+           * readyState 值说明：
+           * - 0 = HAVE_NOTHING: 无数据
+           * - 1 = HAVE_METADATA: 仅元数据
+           * - 2 = HAVE_CURRENT_DATA: 当前帧数据可用
+           * - 3 = HAVE_FUTURE_DATA: 当前帧和后续帧可用
+           * - 4 = HAVE_ENOUGH_DATA: 所有数据可用
+           */
+          const checkReadyState = () => {
+            if (video.readyState >= 2) {
+              processFrame();
+              return true;
+            }
+            return false;
+          };
+
+          /**
+           * 处理单帧提取的核心函数
+           */
+          const processFrame = () => {
+            // 清理事件监听器，防止内存泄漏
+            video.removeEventListener('seeked', onSeeked);
+            video.removeEventListener('loadeddata', onLoadedData);
+            clearTimeout(timeoutId);  // 清除超时计时器
+            
+            // 设置画布尺寸为视频帧尺寸
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            
+            // 将视频当前帧绘制到画布
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+            // 将画布转换为 Base64 格式的图片 URL（JPEG格式，质量0.9）
+            const frameUrl = canvas.toDataURL('image/jpeg', 0.9);
+            
+            // 将帧数据添加到列表
+            frameList.push({
+              url: frameUrl,      // 帧图片URL
+              time: Math.round(time * 10) / 10,  // 帧对应的时间点（保留一位小数）
+              selected: false,    // 默认未选中
+            });
+
+            // 更新提取进度
+            setExtractProgress(Math.round((frameList.length / totalFrames) * 100));
+            
+            // 完成当前帧提取，继续下一轮
+            resolve();
+          };
+
+          /**
+           * seeked 事件处理：视频定位完成后触发
+           */
+          const onSeeked = () => {
+            checkReadyState();
+          };
+
+          /**
+           * loadeddata 事件处理：帧数据加载完成后触发
+           * 作为 seeked 的备选方案，确保兼容性
+           */
+          const onLoadedData = () => {
+            processFrame();
+          };
+
+          /**
+           * 超时机制：3秒超时防止无限等待
+           * 如果3秒内帧数据仍未就绪，跳过当前帧继续下一帧
+           */
+          const timeoutId = setTimeout(() => {
+            video.removeEventListener('seeked', onSeeked);
+            video.removeEventListener('loadeddata', onLoadedData);
+            console.warn(`Timeout waiting for frame at ${time}s`);
+            resolve();  // 跳过当前帧，继续处理下一帧
+          }, 3000);
+
+          // 先同步检查状态，如果未就绪则注册事件监听器等待
+          if (!checkReadyState()) {
+            video.addEventListener('seeked', onSeeked);
+            video.addEventListener('loadeddata', onLoadedData);
+          }
+        });
+      }
+
+      // 提取完成后，默认选中前4秒的帧（约8帧）
+      const defaultSelected = Math.min(8, frameList.length);
+      const defaultIndices: number[] = [];
+      const updatedFrames = frameList.map((frame, index) => {
+        if (index < defaultSelected) {
+          defaultIndices.push(index);
+          return { ...frame, selected: true };  // 标记为已选中
+        }
+        return frame;
+      });
+
+      // 更新状态：保存提取的帧列表和默认选中的帧索引
+      setFrames(updatedFrames);
+      setSelectedFrames(defaultIndices);
+    } catch (err) {
+      // 提取过程中发生错误
+      setError('拆镜过程中发生错误');
+      console.error('Extract frames error:', err);
+    } finally {
+      // 无论成功或失败，都标记提取完成
+      setIsExtracting(false);
+      setExtractProgress(100);
+    }
+  }, []);
+
+  const toggleFrameSelection = (index: number) => {
+    setSelectedFrames(prev => {
+      if (prev.includes(index)) {
+        return prev.filter(i => i !== index);
+      }
+      return [...prev, index];
+    });
+
+    setFrames(prev =>
+      prev.map((frame, i) =>
+        i === index ? { ...frame, selected: !frame.selected } : frame
+      )
+    );
+  };
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.round(seconds % 60);
+    return `${mins}:${String(secs).padStart(2, '0')}`;
+  };
+
+  const handleRemoveVideo = () => {
+    cleanupResources();
+  };
+
+  return (
+    <div style={{ 
+      minHeight: '100vh', 
+      background: 'linear-gradient(180deg, #f8f9ff 0%, #f0f1ff 100%)',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    }}>
+      <div style={{ padding: '60px 20px', maxWidth: '800px', margin: '0 auto' }}>
+        {/* 标题区域 */}
+        <div style={{ textAlign: 'center', marginBottom: 40 }}>
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'center', 
+            gap: 10,
+            marginBottom: 12
+          }}>
+            <div style={{
+              width: 36,
+              height: 36,
+              background: 'linear-gradient(135deg, #6366f1 0%, #a78bfa 100%)',
+              borderRadius: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 18
+            }}>
+              🎬
+            </div>
+            <h1 style={{ 
+              fontSize: 24, 
+              fontWeight: 600, 
+              color: '#1a1a1a', 
+              margin: 0 
+            }}>
+              拆镜复刻
+            </h1>
+          </div>
+          <p style={{ fontSize: 14, color: '#666', margin: 0 }}>
+            一键拆解画面分镜，助力仿拍或创作
+          </p>
+        </div>
+
+        {/* 错误提示 */}
+        {error && (
+          <div style={{ 
+            backgroundColor: '#fff5f5', 
+            border: '1px solid #ffccc7', 
+            borderRadius: 8, 
+            padding: '12px 16px', 
+            marginBottom: 20,
+            color: '#d93026',
+            fontSize: 14,
+            textAlign: 'center'
+          }}>
+            ⚠️ {error}
+          </div>
+        )}
+
+        {/* 上传/视频区域 */}
+        <div 
+          style={{
+            border: '2px dashed #c7d2fe',
+            borderRadius: 20,
+            padding: 40,
+            background: '#fff',
+            position: 'relative'
+          }}
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+        >
+          {/* 删除按钮 */}
+          {videoUrl && (
+            <button
+              onClick={handleRemoveVideo}
+              style={{
+                position: 'absolute',
+                top: 16,
+                right: 16,
+                width: 32,
+                height: 32,
+                border: 'none',
+                background: '#f5f5f5',
+                borderRadius: 8,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 14,
+                color: '#666'
+              }}
+            >
+              🗑️
+            </button>
+          )}
+
+          {/* 未上传状态 */}
+          {!videoUrl && (
+            <div style={{ textAlign: 'center' }}>
+              <div style={{ 
+                width: 100, 
+                height: 100, 
+                margin: '0 auto 20px',
+                background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%)',
+                borderRadius: 20,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}>
+                <div style={{
+                  width: 50,
+                  height: 50,
+                  background: 'linear-gradient(135deg, #6366f1 0%, #a78bfa 100%)',
+                  borderRadius: 12,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: 20
+                }}>
+                  ☁️
+                </div>
+              </div>
+              <label 
+                style={{
+                  display: 'block',
+                  padding: '14px 32px',
+                  background: 'linear-gradient(135deg, #6366f1 0%, #a78bfa 100%)',
+                  color: 'white',
+                  borderRadius: 30,
+                  cursor: 'pointer',
+                  fontSize: 14,
+                  fontWeight: 500,
+                  marginBottom: 16,
+                  transition: 'opacity 0.2s'
+                }}
+              >
+                点击或拖拽到此上传视频文件
+                <input 
+                  type="file" 
+                  accept="video/*" 
+                  onChange={handleFileChange} 
+                  style={{ display: 'none' }} 
+                />
+              </label>
+              <p style={{ fontSize: 12, color: '#999', margin: 0 }}>
+                支持 MP4、MOV 格式视频，最大支持 100MB 的文件，支持上传 3 分钟内的视频，可处理 4-15 秒片段
+              </p>
+            </div>
+          )}
+
+          {/* 已上传状态 - 视频预览 */}
+          {videoUrl && !frames.length && (
+            <div style={{ textAlign: 'center' }}>
+              <video
+                ref={videoRef}
+                src={videoUrl}
+                controls
+                style={{ 
+                  maxWidth: '100%', 
+                  maxHeight: 300,
+                  borderRadius: 12,
+                  objectFit: 'contain'
+                }}
+              />
+              <p style={{ fontSize: 12, color: '#999', marginTop: 12 }}>
+                时长: {formatTime(videoRef.current?.duration || 0)}
+              </p>
+            </div>
+          )}
+
+          {/* 拆镜结果 */}
+          {frames.length > 0 && (
+            <div>
+              {/* 视频预览 */}
+              <div style={{ textAlign: 'center', marginBottom: 20 }}>
+                <video
+                  ref={videoRef}
+                  src={videoUrl}
+                  controls
+                  style={{ 
+                    maxWidth: '100%', 
+                    maxHeight: 200,
+                    borderRadius: 12,
+                    objectFit: 'contain'
+                  }}
+                />
+              </div>
+
+              {/* 帧选择区域 */}
+              <div style={{ 
+                background: '#f8f9ff', 
+                borderRadius: 12, 
+                padding: 16 
+              }}>
+                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
+                  <button
+                    onClick={() => {}}
+                    style={{
+                      width: 32,
+                      height: 32,
+                      border: 'none',
+                      background: '#e0e7ff',
+                      borderRadius: 8,
+                      cursor: 'pointer',
+                      fontSize: 14,
+                      color: '#6366f1'
+                    }}
+                  >
+                    ▶
+                  </button>
+                  <span style={{ 
+                    fontSize: 12, 
+                    color: '#666', 
+                    marginLeft: 12,
+                    fontFamily: 'monospace'
+                  }}>
+                    00:00:00 / 00:00:{String(Math.round(videoRef.current?.duration || 0)).padStart(2, '0')}
+                  </span>
+                </div>
+
+                {/* 帧缩略图 */}
+                <div style={{ 
+                  display: 'flex', 
+                  gap: 6, 
+                  overflowX: 'auto',
+                  paddingBottom: 8,
+                  scrollbarWidth: 'thin'
+                }}>
+                  {frames.map((frame, index) => (
+                    <div
+                      key={index}
+                      onClick={() => toggleFrameSelection(index)}
+                      style={{
+                        flexShrink: 0,
+                        width: 60,
+                        height: 45,
+                        border: frame.selected ? '2px solid #6366f1' : '1px solid #e5e7eb',
+                        borderRadius: 6,
+                        overflow: 'hidden',
+                        cursor: 'pointer',
+                        position: 'relative'
+                      }}
+                    >
+                      <img
+                        src={frame.url}
+                        alt={`帧 ${index + 1}`}
+                        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                      />
+                      {frame.selected && (
+                        <div style={{
+                          position: 'absolute',
+                          bottom: 2,
+                          right: 2,
+                          width: 14,
+                          height: 14,
+                          background: '#6366f1',
+                          borderRadius: '50%',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          fontSize: 10,
+                          color: 'white'
+                        }}>
+                          ✓
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+
+                <div style={{ textAlign: 'center', marginTop: 8 }}>
+                  <span style={{ fontSize: 12, color: '#999' }}>
+                    已选取 {selectedFrames.length} 帧
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 进度条 */}
+          {isExtracting && (
+            <div style={{ marginTop: 20 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                <span style={{ fontSize: 12, color: '#666' }}>正在拆解...</span>
+                <span style={{ fontSize: 12, color: '#666' }}>{extractProgress}%</span>
+              </div>
+              <div style={{ 
+                height: 4, 
+                backgroundColor: '#e5e7eb', 
+                borderRadius: 2, 
+                overflow: 'hidden' 
+              }}>
+                <div 
+                  style={{ 
+                    height: '100%', 
+                    background: 'linear-gradient(90deg, #6366f1 0%, #a78bfa 100%)', 
+                    width: `${extractProgress}%`,
+                    transition: 'width 0.3s'
+                  }} 
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 操作按钮 */}
+        <div style={{ textAlign: 'center', marginTop: 32 }}>
+          <button
+            onClick={extractFrames}
+            disabled={!videoUrl || isExtracting}
+            style={{
+              padding: '14px 48px',
+              background: isExtracting 
+                ? '#ccc' 
+                : 'linear-gradient(135deg, #6366f1 0%, #a78bfa 100%)',
+              color: 'white',
+              border: 'none',
+              borderRadius: 30,
+              fontSize: 14,
+              fontWeight: 500,
+              cursor: isExtracting ? 'not-allowed' : 'pointer',
+              transition: 'opacity 0.2s'
+            }}
+          >
+            {isExtracting ? '⏳ 拆解中...' : '⚡ 一键拆解'}
+            <span style={{ marginLeft: 8, opacity: 0.8 }}>
+                {/* 预计消耗10个积分 */}
+                </span>
+          </button>
+        </div>
+
+        {/* 创作记录 */}
+        {/* <div style={{ textAlign: 'center', marginTop: 24 }}>
+          <a 
+            href="/records" 
+            style={{ 
+              fontSize: 12, 
+              color: '#6366f1', 
+              textDecoration: 'none'
+            }}
+          >
+            📋 创作记录
+          </a>
+        </div> */}
+      </div>
+
+      {/* 隐藏画布 */}
+      <canvas ref={canvasRef} style={{ display: 'none' }} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/video-gen-app/src/store/useAuthStore.ts b/video-gen-app/src/store/useAuthStore.ts
index 14a15409..0c8ae9ef 100644
--- a/video-gen-app/src/store/useAuthStore.ts
+++ b/video-gen-app/src/store/useAuthStore.ts
@@ -25,11 +25,16 @@ export const useAuthStore = create<AuthState>((set) => ({
     set({ user: null });
   },
 
-  checkAuth: async () => {
+   checkAuth: async () => {
     try {
+      const token = localStorage.getItem('auth_token');
+      if (!token) { set({ user: null, loading: false }); return; }
       const user = await api.getUser();
       set({ user, loading: false });
-    } catch {
+    } catch (error: any) {
+      if (error?.message?.includes('401') || error?.message?.includes('Unauthorized')) {
+        localStorage.removeItem('auth_token');
+      }
       set({ user: null, loading: false });
     }
   },
diff --git a/video-gen-app/src/types/index.ts b/video-gen-app/src/types/index.ts
index 261bcc66..aed2eb2c 100644
--- a/video-gen-app/src/types/index.ts
+++ b/video-gen-app/src/types/index.ts
@@ -65,6 +65,7 @@ export interface GenerationRecord {
   originalPrompt: string;
   optimizedPrompt?: string;
   duration?: number;
+  genType?: number;
   aspectRatio?: AspectRatio;
   resolution?: Resolution;
   status: GenerationStatus;
@@ -77,18 +78,29 @@ export interface GenerationRecord {
   errorMessage?: string;
   createdAt: string;
   generatedAt?: string;
+  imageSize: string;
+  imageProportion: string;
+  imagePx: string;
+  imageUrl: string;
+  
 }
 
 export interface OptimizeParams {
   prompt: string;
   duration: number;
+  genType?: any;
+  resolution?: string;
+  aspectRatio?: string;
   references?: MediaReference[];
   idempotencyKey?: string;
+  image_size:any;
+  image_proportion:any;
+  image_px:any
 }
 
 export interface GenerateParams {
-  aspectRatio: AspectRatio;
-  resolution: Resolution;
+  aspectRatio?: AspectRatio;
+  resolution?: Resolution;
 }
 
 export interface OptimizeResult {
diff --git a/video-gen-app/src/utils/uuid.ts b/video-gen-app/src/utils/uuid.ts
new file mode 100644
index 00000000..5c5f3cf0
--- /dev/null
+++ b/video-gen-app/src/utils/uuid.ts
@@ -0,0 +1,26 @@
+export function generateUUID(): string {
+  // 优先使用现代浏览器的 crypto.randomUUID
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  
+  // 降级方案：使用 crypto.getRandomValues 生成 UUIDv4
+  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+    const bytes = crypto.getRandomValues(new Uint8Array(16));
+    // 设置版本为 4（UUIDv4）
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    // 设置变体为 RFC 4122
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    
+    const hex = Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+  }
+  
+  // 最后降级：使用时间戳和随机数
+  const timestamp = Date.now().toString(16).padStart(12, '0');
+  const random = Math.random().toString(16).slice(2, 10).padStart(8, '0');
+  return `${timestamp}-${random}-4xxx-yxxx-${Math.random().toString(16).slice(2, 12)}`.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+}
\ No newline at end of file
diff --git a/video-gen-app/tsconfig.app.json b/video-gen-app/tsconfig.app.json
index 864e8e73..60d77c34 100644
--- a/video-gen-app/tsconfig.app.json
+++ b/video-gen-app/tsconfig.app.json
@@ -6,6 +6,8 @@
     "module": "esnext",
     "types": ["vite/client"],
     "skipLibCheck": true,
+    "strict": false,
+    "noImplicitAny": false,
 
     /* Bundler mode */
     "moduleResolution": "bundler",