diff --git a/components/ChatInputBox/ChatInputBox.tsx b/components/ChatInputBox/ChatInputBox.tsx index 64d0573..04e219e 100644 --- a/components/ChatInputBox/ChatInputBox.tsx +++ b/components/ChatInputBox/ChatInputBox.tsx @@ -175,7 +175,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) { language: "english", videoDuration: "unlimited", expansion_mode: true, - aspect_ratio: "VIDEO_ASPECT_RATIO_LANDSCAPE", + aspect_ratio: isMobile ? "VIDEO_ASPECT_RATIO_PORTRAIT" : "VIDEO_ASPECT_RATIO_LANDSCAPE", }); // 从 localStorage 初始化配置 @@ -190,19 +190,38 @@ export function ChatInputBox({ noData }: { noData: boolean }) { language: parsed.language || "english", videoDuration: parsed.videoDuration || "unlimited", expansion_mode: typeof parsed.expansion_mode === 'boolean' ? parsed.expansion_mode : true, - aspect_ratio: parsed.aspect_ratio || "VIDEO_ASPECT_RATIO_LANDSCAPE", + aspect_ratio: parsed.aspect_ratio || (isMobile ? "VIDEO_ASPECT_RATIO_PORTRAIT" : "VIDEO_ASPECT_RATIO_LANDSCAPE"), }); } catch (error) { console.warn('解析保存的配置失败,使用默认配置:', error); } } - }, []); + }, [isMobile]); + + // 跟踪用户是否手动修改过宽高比 + const [hasUserChangedAspectRatio, setHasUserChangedAspectRatio] = useState(false); + + // 监听设备类型变化,仅在用户未手动修改时动态调整默认宽高比 + useEffect(() => { + if (!hasUserChangedAspectRatio) { + setConfigOptions(prev => ({ + ...prev, + aspect_ratio: isMobile ? "VIDEO_ASPECT_RATIO_PORTRAIT" : "VIDEO_ASPECT_RATIO_LANDSCAPE" + })); + } + }, [isMobile, hasUserChangedAspectRatio]); const onConfigChange = (key: K, value: ConfigOptions[K]) => { setConfigOptions((prev: ConfigOptions) => ({ ...prev, [key]: value, })); + + // 如果用户手动修改了宽高比,标记为已修改 + if (key === 'aspect_ratio') { + setHasUserChangedAspectRatio(true); + } + if (key === 'videoDuration') { // 当选择 8s 时,强制关闭剧本扩展并禁用开关 if (value === '8s') { diff --git a/components/ChatInputBox/H5PhotoStoryDrawer.tsx b/components/ChatInputBox/H5PhotoStoryDrawer.tsx index b13e0d4..2e46551 100644 --- a/components/ChatInputBox/H5PhotoStoryDrawer.tsx +++ b/components/ChatInputBox/H5PhotoStoryDrawer.tsx @@ -80,7 +80,7 @@ export const H5PhotoStoryDrawer = ({ const { loadingText } = useLoadScriptText(isLoading); const [localLoading, setLocalLoading] = useState(0); - const [aspectUI, setAspectUI] = useState("VIDEO_ASPECT_RATIO_LANDSCAPE"); + const [aspectUI, setAspectUI] = useState("VIDEO_ASPECT_RATIO_PORTRAIT"); const router = useRouter(); const taskProgressRef = useRef(taskProgress); const [cursorPosition, setCursorPosition] = useState(0); diff --git a/components/ChatInputBox/H5TemplateDrawer.tsx b/components/ChatInputBox/H5TemplateDrawer.tsx index 176ad32..5d0b843 100644 --- a/components/ChatInputBox/H5TemplateDrawer.tsx +++ b/components/ChatInputBox/H5TemplateDrawer.tsx @@ -79,7 +79,7 @@ export const H5TemplateDrawer = ({ const [isDescExpanded, setIsDescExpanded] = useState(false); // 自由输入框布局 const [freeInputLayout, setFreeInputLayout] = useState('bottom'); - const [aspectUI, setAspectUI] = useState("VIDEO_ASPECT_RATIO_LANDSCAPE"); + const [aspectUI, setAspectUI] = useState("VIDEO_ASPECT_RATIO_PORTRAIT"); // 顶部列表所在的实际滚动容器(外层 top-section 才是滚动容器) const topSectionRef = useRef(null);