From 4c0605e589a7221b22400b3eb18e025fdc0d0925 Mon Sep 17 00:00:00 2001
From: seaislee1209 <seaislee129@gmail.com>
Date: Mon, 16 Mar 2026 01:33:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E5=B0=BE=E5=B8=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=20aspect=20ratio=20=E9=BB=98=E8=AE=A4=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=20adaptive=EF=BC=88=E8=87=AA=E9=80=82=E5=BA=94?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

切换到 keyframe 模式时自动设为 adaptive，API 根据首帧图片比例
自动匹配最接近的输出比例，避免图片与视频比例不匹配。
用户仍可手动选择固定比例覆盖。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/Toolbar.tsx | 36 ++++++++++++++++------------------
 web/src/store/inputBar.ts      |  1 +
 web/src/types/index.ts         |  2 +-
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/web/src/components/Toolbar.tsx b/web/src/components/Toolbar.tsx
index 6c4f484..6db38c0 100644
--- a/web/src/components/Toolbar.tsx
+++ b/web/src/components/Toolbar.tsx
@@ -88,6 +88,11 @@ const ratioItems = [
   { label: '9:16', value: '9:16' as AspectRatio },
 ];
 
+const keyframeRatioItems = [
+  { label: '自适应', value: 'adaptive' as AspectRatio },
+  ...ratioItems,
+];
+
 const durationItems = Array.from({ length: 12 }, (_, i) => {
   const v = i + 4;
   return { label: `${v}s`, value: String(v) };
@@ -175,25 +180,18 @@ export function Toolbar() {
       />
 
       {/* Aspect ratio */}
-      {isKeyframe ? (
-        <button className={styles.btn} style={{ opacity: 0.5, pointerEvents: 'none' }}>
-          <MonitorIcon />
-          <span className={styles.label}>自动匹配</span>
-        </button>
-      ) : (
-        <Dropdown
-          items={ratioItems}
-          value={aspectRatio}
-          onSelect={(v) => setAspectRatio(v as AspectRatio)}
-          minWidth={100}
-          trigger={
-            <button className={styles.btn}>
-              <MonitorIcon />
-              <span className={styles.label}>{aspectRatio}</span>
-            </button>
-          }
-        />
-      )}
+      <Dropdown
+        items={isKeyframe ? keyframeRatioItems : ratioItems}
+        value={aspectRatio}
+        onSelect={(v) => setAspectRatio(v as AspectRatio)}
+        minWidth={100}
+        trigger={
+          <button className={styles.btn}>
+            <MonitorIcon />
+            <span className={styles.label}>{aspectRatio === 'adaptive' ? '自适应' : aspectRatio}</span>
+          </button>
+        }
+      />
 
       {/* Duration */}
       <Dropdown
diff --git a/web/src/store/inputBar.ts b/web/src/store/inputBar.ts
index 981422b..ada92ec 100644
--- a/web/src/store/inputBar.ts
+++ b/web/src/store/inputBar.ts
@@ -214,6 +214,7 @@ export const useInputBarStore = create<InputBarState>((set, get) => ({
         mode,
         prevReferences: state.references,
         references: [],
+        aspectRatio: 'adaptive',
         duration: 5,
       });
     } else {
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index a1b81ff..f66b297 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -1,6 +1,6 @@
 export type CreationMode = 'universal' | 'keyframe';
 export type ModelOption = 'seedance_2.0' | 'seedance_2.0_fast';
-export type AspectRatio = '16:9' | '9:16' | '1:1' | '21:9' | '4:3' | '3:4';
+export type AspectRatio = '16:9' | '9:16' | '1:1' | '21:9' | '4:3' | '3:4' | 'adaptive';
 export type Duration = 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
 export type GenerationType = 'video' | 'image';
 export type UserRole = 'super_admin' | 'team_admin' | 'member';