模版禁用时长选择

components/pages/create-video/CreateInput/ConfigPanel.tsx

@@ -20,6 +20,8 @@ interface ConfigPanelProps {
     isMobile?: boolean;
     /** Whether it's desktop device */
     isDesktop?: boolean;
+    /** Whether to disable duration selection */
+    disableDuration?: boolean;
 }
 
 /**
@@ -36,6 +38,7 @@ export const ConfigPanel = ({
     onConfigChange,
     isMobile = false,
     isDesktop = true,
+    disableDuration = false,
 }: ConfigPanelProps) => {
     /** Language dropdown menu items */
     const languageMenuItems = LanguageOptions.map((option) => ({
@@ -104,10 +107,16 @@ export const ConfigPanel = ({
                     className: 'bg-[#1a1a1a] border border-white/10'
                 }} 
                 trigger={['click']}
+                disabled={disableDuration}
             >
                 <button
                     data-alt="config-video-duration"
-                    className="h-8 px-2 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 text-gray-300 hover:text-cyan-400"
+                    className={`h-8 px-2 rounded-full border transition-all duration-200 flex items-center gap-2 ${
+                        disableDuration
+                            ? 'opacity-40 cursor-not-allowed border-white/20 bg-transparent text-gray-400'
+                            : 'border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 text-gray-300 hover:text-cyan-400'
+                    }`}
+                    disabled={disableDuration}
                 >
                     <ClockCircleOutlined className="text-base" />
                     <span className="text-sm capitalize">{currentDuration}</span>

components/pages/create-video/CreateInput/MobileConfigModal.tsx

@@ -22,6 +22,8 @@ interface MobileConfigModalProps {
     configOptions: ConfigOptions;
     /** Handler for configuration changes */
     onConfigChange: <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K], exclude?: boolean) => void;
+    /** Whether to disable duration selection */
+    disableDuration?: boolean;
 }
 
 /**
@@ -38,6 +40,7 @@ export function MobileConfigModal({
     onClose,
     configOptions,
     onConfigChange,
+    disableDuration = false,
 }: MobileConfigModalProps) {
     const [animeOptions, setAnimeOptions] = useState<Array<{ name: string; pcode: string }>>([]);
 
@@ -170,14 +173,17 @@ export function MobileConfigModal({
                         <ClockCircleOutlined className="text-base text-cyan-400" />
                         <span className="text-sm text-gray-300">Duration</span>
                     </div>
-                    <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 ${disableDuration ? 'opacity-40' : ''}`}>
                         {VideoDurationOptions.map((option) => (
                             <button
                                 key={option.value}
                                 data-alt={`duration-${option.value}`}
-                                onClick={() => onConfigChange('videoDuration', option.value as VideoDurationValue)}
+                                onClick={() => !disableDuration && onConfigChange('videoDuration', option.value as VideoDurationValue)}
+                                disabled={disableDuration}
                                 className={`h-7 px-3 rounded-md transition-all duration-200 text-xs font-medium ${
-                                    configOptions.videoDuration === option.value
+                                    disableDuration
+                                        ? 'cursor-not-allowed'
+                                        : configOptions.videoDuration === option.value
                                         ? 'bg-cyan-400/20 text-cyan-400'
                                         : 'bg-transparent text-gray-400 hover:text-gray-300'
                                 }`}

components/pages/create-video/CreateInput/VideoCreationForm.tsx

@@ -301,7 +301,7 @@ export default function VideoCreationForm() {
                 language: configOptions.language,
                 aspect_ratio: configOptions.aspect_ratio,
                 expansion_mode: configOptions.expansion_mode,
-                video_duration: configOptions.videoDuration,
+                video_duration: isTemplateSelected ? 'unlimited' : configOptions.videoDuration,
                 use_img2video: photos.length > 0,
                 pcode: configOptions.pcode === 'portrait' ? '' : configOptions.pcode,
             };
@@ -556,6 +556,7 @@ export default function VideoCreationForm() {
                                 onConfigChange={handleConfigChange}
                                 isMobile={isMobile}
                                 isDesktop={isDesktop}
+                                disableDuration={isTemplateSelected ? true : false}
                             />
                         ) : (
                             <button
@@ -590,6 +591,7 @@ export default function VideoCreationForm() {
                 onClose={() => setConfigModalVisible(false)}
                 configOptions={configOptions}
                 onConfigChange={handleConfigChange}
+                disableDuration={isTemplateSelected ? true : false}
             />
 
             {/* Add Item Modal */}