fix(canvas): cap video duration choices

src/pages/ImageCanvas/index.tsx

@@ -265,6 +265,9 @@ type EditableGenerationParameters = Partial<Pick<
   'resolution' | 'aspectRatio' | 'durationSeconds'
 >>;
 
+const MIN_VIDEO_DURATION_SECONDS = 2;
+const MAX_VIDEO_DURATION_SECONDS = 6;
+
 function quoteDraftFromQuote(quote: DesignGenerationQuote): GenerationQuoteDraft {
   return {
     quoteId: quote.quoteId,
@@ -728,8 +731,15 @@ function QuoteCard({
   onConfirm: () => void;
 }) {
   const availableResolutions = quote.generationOptions.resolutions.filter((option) => !option.disabled);
-  const availableDurations = quote.generationOptions.durations.filter((option) => !option.disabled);
+  const availableDurations = quote.generationOptions.durations.filter((option) => (
+    !option.disabled
+    && option.value >= MIN_VIDEO_DURATION_SECONDS
+    && option.value <= MAX_VIDEO_DURATION_SECONDS
+  ));
   const availableAspectRatios = quote.generationOptions.aspectRatios.filter((option) => !option.disabled);
+  const selectedDuration = availableDurations.some(
+    (option) => option.value === draft.generationParameters.durationSeconds,
+  ) ? String(draft.generationParameters.durationSeconds) : '';
   const updateParameters = (next: EditableGenerationParameters) => {
     onDraftChange({
       ...draft,
@@ -819,9 +829,7 @@ function QuoteCard({
                 aria-label="视频时长"
                 data-testid="design-quote-duration"
                 className="mt-1.5 h-9 bg-background text-xs"
-                value={draft.generationParameters.durationSeconds === null
-                  ? ''
-                  : String(draft.generationParameters.durationSeconds)}
+                value={selectedDuration}
                 disabled={busy}
                 onChange={(event) => {
                   const option = availableDurations.find(
@@ -830,6 +838,9 @@ function QuoteCard({
                   if (option) updateParameters({ durationSeconds: option.value });
                 }}
               >
+                {selectedDuration === '' ? (
+                  <option value="" disabled>请选择时长</option>
+                ) : null}
                 {availableDurations.map((option) => (
                   <option key={option.value} value={option.value}>
                     {option.label}