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

17
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 { Modal, Dropdown } from 'antd';
import { LanguageOptions, VideoDurationOptions } from './config-options'; import { LanguageOptions, VideoDurationOptions } from './config-options';
import type { ConfigOptions, LanguageValue, VideoDurationValue } 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'; import { fetchSettingByCode } from '@/api/serversetting';
interface MobileConfigModalProps { interface MobileConfigModalProps {
@ -21,7 +21,7 @@ interface MobileConfigModalProps {
/** Current configuration options */ /** Current configuration options */
configOptions: ConfigOptions; configOptions: ConfigOptions;
/** Handler for configuration changes */ /** 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; }; 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 isPortrait = configOptions.pcode === 'portrait';
const currentLanguage = LanguageOptions.find(opt => opt.value === configOptions.language); 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"> <div className="flex items-center p-0.5 rounded-lg border border-white/20 bg-black/20">
<button <button
data-alt="style-portrait" 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 ${ className={`h-7 px-3 rounded-md transition-all duration-200 text-xs font-medium whitespace-nowrap ${
isPortrait isPortrait
? 'bg-cyan-400/20 text-cyan-400' ? 'bg-cyan-400/20 text-cyan-400'
@ -237,7 +242,7 @@ export function MobileConfigModal({
<Dropdown <Dropdown
menu={{ menu={{
items: animeMenuItems, items: animeMenuItems,
onClick: ({ key }) => onConfigChange('pcode', key), onClick: ({ key }) => onConfigChange('pcode', key, true),
className: 'bg-[#1a1a1a] border border-white/10' className: 'bg-[#1a1a1a] border border-white/10'
}} }}
trigger={['click']} trigger={['click']}
@ -246,12 +251,14 @@ export function MobileConfigModal({
data-alt="style-anime" data-alt="style-anime"
onClick={() => { onClick={() => {
if (isPortrait && animeOptions.length > 0) { 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 ${ className={`h-7 px-3 rounded-md transition-all duration-200 text-xs font-medium max-w-[120px] flex items-center gap-1 ${
!isPortrait !isPortrait
? isValidAnimeChoice
? 'bg-cyan-400/20 text-cyan-400' ? 'bg-cyan-400/20 text-cyan-400'
: 'bg-transparent text-gray-400 cursor-not-allowed'
: 'bg-transparent text-gray-400 hover:text-gray-300' : '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 */ /** Handle configuration change */
const handleConfigChange = <K extends keyof ConfigOptions>( const handleConfigChange = <K extends keyof ConfigOptions>(
key: K, 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 })); setConfigOptions(prev => ({ ...prev, [key]: value }));
}; };
@ -245,7 +256,7 @@ export default function VideoCreationForm() {
const handleCreate = async () => { const handleCreate = async () => {
if (isCreating) return; if (isCreating) return;
if (!inputText.trim()) { if (shouldShowInput && !inputText.trim()) {
window.msg?.warning('Please enter your story description'); window.msg?.warning('Please enter your story description');
return; return;
} }
@ -307,6 +318,7 @@ export default function VideoCreationForm() {
} }
console.log('Creating video with params:', requestParams); console.log('Creating video with params:', requestParams);
return;
/** Call MovieProjectService V4 API */ /** Call MovieProjectService V4 API */
const result = await MovieProjectService.createProject<CreateMovieProjectV4Request>( const result = await MovieProjectService.createProject<CreateMovieProjectV4Request>(