xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

统一创建：修复输入框不展示必须输入问题以及pcode互斥清除数据

Browse Source
This commit is contained in:
北枳 2025-10-21 16:45:44 +08:00
parent ae807f33e9
commit 98ab89a1f5
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/pages/create-video/CreateInput/ConfigPanel.tsx
View File

@ -15,7 +15,7 @@ interface ConfigPanelProps {
/** Current configuration options */
configOptions: ConfigOptions;
/** Handler for configuration changes */
onConfigChange: <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K]) => void;
onConfigChange: <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K], exclude?: boolean) => void;
/** Whether it's mobile device */
isMobile?: boolean;
/** Whether it's desktop device */
@ -100,14 +100,7 @@ export const ConfigPanel = ({
<Dropdown
menu={{
items: durationMenuItems,
onClick: ({ key }) => {
onConfigChange('videoDuration', key as VideoDurationValue);
if (key === '8s') {
onConfigChange('expansion_mode', false);
} else {
onConfigChange('expansion_mode', true);
}
},
onClick: ({ key }) => onConfigChange('videoDuration', key as VideoDurationValue),
className: 'bg-[#1a1a1a] border border-white/10'
}}
trigger={['click']}
@ -151,7 +144,7 @@ export const ConfigPanel = ({
{/* Portrait/Anime selector */}
<PortraitAnimeSelector
value={configOptions.pcode}
onChange={(v) => onConfigChange('pcode', v)}
onChange={(v) => onConfigChange('pcode', v, true)}
/>
</div>
);

19
components/pages/create-video/CreateInput/MobileConfigModal.tsx
View File

@ -10,7 +10,7 @@ import { WandSparkles, RectangleHorizontal, RectangleVertical, Palette } from 'l
import { Modal, Dropdown } from 'antd';
import { LanguageOptions, VideoDurationOptions } from './config-options';
import type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options';
import { useEffect, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { fetchSettingByCode } from '@/api/serversetting';
interface MobileConfigModalProps {
@ -21,7 +21,7 @@ interface MobileConfigModalProps {
/** Current configuration options */
configOptions: ConfigOptions;
/** Handler for configuration changes */
onConfigChange: <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K]) => void;
onConfigChange: <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K], exclude?: boolean) => void;
}
/**
@ -57,6 +57,11 @@ export function MobileConfigModal({
return () => { mounted = false; };
}, []);
/** Check if currentAnime is valid in animeOptions */
const isValidAnimeChoice = useMemo(() => {
return animeOptions.some(opt => opt.pcode === configOptions.pcode);
}, [animeOptions, configOptions.pcode]);
const isPortrait = configOptions.pcode === 'portrait';
const currentLanguage = LanguageOptions.find(opt => opt.value === configOptions.language);
@ -225,7 +230,7 @@ export function MobileConfigModal({
<div className="flex items-center p-0.5 rounded-lg border border-white/20 bg-black/20">
<button
data-alt="style-portrait"
onClick={() => onConfigChange('pcode', 'portrait')}
onClick={() => onConfigChange('pcode', 'portrait', true)}
className={`h-7 px-3 rounded-md transition-all duration-200 text-xs font-medium whitespace-nowrap ${
isPortrait
? 'bg-cyan-400/20 text-cyan-400'
@ -237,7 +242,7 @@ export function MobileConfigModal({
<Dropdown
menu={{
items: animeMenuItems,
onClick: ({ key }) => onConfigChange('pcode', key),
onClick: ({ key }) => onConfigChange('pcode', key, true),
className: 'bg-[#1a1a1a] border border-white/10'
}}
trigger={['click']}
@ -246,12 +251,14 @@ export function MobileConfigModal({
data-alt="style-anime"
onClick={() => {
if (isPortrait && animeOptions.length > 0) {
onConfigChange('pcode', animeOptions[0].pcode);
onConfigChange('pcode', animeOptions[0].pcode, true);
}
}}
className={`h-7 px-3 rounded-md transition-all duration-200 text-xs font-medium max-w-[120px] flex items-center gap-1 ${
!isPortrait
? 'bg-cyan-400/20 text-cyan-400'
? isValidAnimeChoice
? 'bg-cyan-400/20 text-cyan-400'
: 'bg-transparent text-gray-400 cursor-not-allowed'
: 'bg-transparent text-gray-400 hover:text-gray-300'
}`}
>

16
components/pages/create-video/CreateInput/VideoCreationForm.tsx
View File

@ -150,8 +150,19 @@ export default function VideoCreationForm() {
/** Handle configuration change */
const handleConfigChange = <K extends keyof ConfigOptions>(
key: K,
value: ConfigOptions[K]
value: ConfigOptions[K],
exclude?: boolean
) => {
if (exclude && key === 'pcode') {
clearTemplateSelection();
}
if (key === 'videoDuration') {
if (value === '8s') {
setConfigOptions(prev => ({ ...prev, expansion_mode: false }));
} else {
setConfigOptions(prev => ({ ...prev, expansion_mode: true }));
}
}
setConfigOptions(prev => ({ ...prev, [key]: value }));
};
@ -245,7 +256,7 @@ export default function VideoCreationForm() {
const handleCreate = async () => {
if (isCreating) return;
if (!inputText.trim()) {
if (shouldShowInput && !inputText.trim()) {
window.msg?.warning('Please enter your story description');
return;
}
@ -307,6 +318,7 @@ export default function VideoCreationForm() {
}
console.log('Creating video with params:', requestParams);
return;
/** Call MovieProjectService V4 API */
const result = await MovieProjectService.createProject<CreateMovieProjectV4Request>(