From 066345d568b1a090d85c155ff3a160a6ea9929ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?= <7854742+wang_rumeng@user.noreply.gitee.com> Date: Sat, 18 Oct 2025 16:07:24 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80create=E5=85=A5=E5=8F=A3?= =?UTF-8?q?=EF=BC=9AH5=E7=AB=AFsetting=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreateInput/MobileConfigModal.tsx | 269 ++++++++++++++++++ .../CreateInput/VideoCreationForm.tsx | 35 ++- 2 files changed, 297 insertions(+), 7 deletions(-) create mode 100644 components/pages/create-video/CreateInput/MobileConfigModal.tsx diff --git a/components/pages/create-video/CreateInput/MobileConfigModal.tsx b/components/pages/create-video/CreateInput/MobileConfigModal.tsx new file mode 100644 index 0000000..e2a42d6 --- /dev/null +++ b/components/pages/create-video/CreateInput/MobileConfigModal.tsx @@ -0,0 +1,269 @@ +"use client"; + +import { + GlobalOutlined, + ClockCircleOutlined, + CloseOutlined, + DownOutlined +} from '@ant-design/icons'; +import { WandSparkles, RectangleHorizontal, RectangleVertical, Palette } from 'lucide-react'; +import { Modal, Dropdown, Menu } from 'antd'; +import { LanguageOptions, VideoDurationOptions } from './config-options'; +import type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options'; +import { useEffect, useState } from 'react'; +import { fetchSettingByCode } from '@/api/serversetting'; + +interface MobileConfigModalProps { + /** Modal visibility state */ + visible: boolean; + /** Close handler */ + onClose: () => void; + /** Current configuration options */ + configOptions: ConfigOptions; + /** Handler for configuration changes */ + onConfigChange: (key: K, value: ConfigOptions[K]) => void; +} + +/** + * Mobile configuration modal with card-style selections. + * Provides a modern, non-traditional form interface for video settings. + * @param {boolean} visible - Modal visibility + * @param {Function} onClose - Close handler + * @param {ConfigOptions} configOptions - Current configuration + * @param {Function} onConfigChange - Handler for config changes + * @returns {JSX.Element} + */ +export function MobileConfigModal({ + visible, + onClose, + configOptions, + onConfigChange, +}: MobileConfigModalProps) { + const [animeOptions, setAnimeOptions] = useState>([]); + + useEffect(() => { + let mounted = true; + (async () => { + const list = await fetchSettingByCode>('comic_config', []); + if (!mounted) return; + if (Array.isArray(list) && list.length > 0) { + setAnimeOptions(list); + } else { + setAnimeOptions([ + { name: 'Korean Comics Long', pcode: 'STANDARD_V1_734684_116483' }, + ]); + } + })(); + return () => { mounted = false; }; + }, []); + + const isPortrait = configOptions.pcode === 'portrait'; + const currentLanguage = LanguageOptions.find(opt => opt.value === configOptions.language); + + /** Language dropdown menu */ + const languageMenu = ( + onConfigChange('language', key as LanguageValue)} + items={LanguageOptions.map((option) => ({ + key: option.value, + label: ( + + {option.label} + + ), + }))} + /> + ); + + /** Anime dropdown menu */ + const animeMenu = ( + onConfigChange('pcode', key)} + items={animeOptions.map((option) => ({ + key: option.pcode, + label: ( + + {option.name} + + ), + }))} + /> + ); + + return ( + } + width="90%" + style={{ maxWidth: '420px' }} + styles={{ + mask: { backdropFilter: 'blur(2px)', backgroundColor: 'transparent' }, + content: { + padding: 0, + backdropFilter: 'blur(4px)', + backgroundColor: 'rgba(0, 0, 0, 0.7)', + border: '1px solid rgba(255, 255, 255, 0.1)', + borderRadius: '20px', + }, + }} + > +
+ {/* Header */} +
+

Video Settings

+
+ + {/* Language Row */} +
+
+ + Language +
+ + + +
+ + {/* AutoScript Row */} +
+
+ + AI Copilot +
+ +
+ + {/* Video Duration Row */} +
+
+ + Duration +
+
+ {VideoDurationOptions.map((option) => ( + + ))} +
+
+ + {/* Aspect Ratio Row */} +
+
+ + Aspect Ratio +
+
+ + +
+
+ + {/* Video Style Row */} +
+
+ + Video Style +
+
+
+ + + + +
+
+
+
+ + ); +} + diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx index 27edadd..da1b0bd 100644 --- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx +++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx @@ -9,9 +9,11 @@ import { CameraOutlined, BulbOutlined, ArrowRightOutlined, + SettingOutlined, } from '@ant-design/icons'; import { Dropdown, Menu } from 'antd'; import { ConfigPanel } from './ConfigPanel'; +import { MobileConfigModal } from './MobileConfigModal'; import { defaultConfig } from './config-options'; import type { ConfigOptions } from './config-options'; import { useDeviceType } from '@/hooks/useDeviceType'; @@ -20,6 +22,7 @@ export default function VideoCreationForm() { const [photos, setPhotos] = useState([]); const [inputText, setInputText] = useState(''); const [configOptions, setConfigOptions] = useState(defaultConfig); + const [configModalVisible, setConfigModalVisible] = useState(false); const { isMobile, isDesktop } = useDeviceType(); @@ -168,13 +171,23 @@ export default function VideoCreationForm() { @ - {/* Configuration Panel */} - + {/* Configuration - Desktop: Full Panel, Mobile: Setting Icon */} + {isDesktop ? ( + + ) : ( + + )} {/* Right Side - Create Button */} @@ -187,6 +200,14 @@ export default function VideoCreationForm() { + + {/* Mobile Configuration Modal */} + setConfigModalVisible(false)} + configOptions={configOptions} + onConfigChange={handleConfigChange} + /> ); }