优化复刻视频脚本和下拉框样式

core/frontend/src/routes/quick-create.tsx

@@ -20,6 +20,7 @@ import {
 } from "lucide-react";
 import { api, ApiError, type QuickCreateJob } from "../api";
 import { ConfirmModal, OverlayPortal, useBodyScrollLock } from "../components/overlays";
+import { CustomSelect } from "../components/custom-select";
 import { useFileDrop } from "../components/use-file-drop";
 import { forgetQuickCreateJob, readQuickCreateJobId, rememberQuickCreateJob, stripQuickCreateSuffix } from "../quick-create-lock";
 import type { ModelConfig } from "../types";
@@ -678,33 +679,44 @@ export function QuickCreatePage({
           <div className="quick-parameter-grid" aria-label="视频核心参数">
             <label className="quick-parameter-field">
               <span>视频比例</span>
-              <select value={aspectRatio} onChange={(event) => setAspectRatio(event.target.value)} disabled={isGenerating}>
-                {QUICK_RATIOS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-              </select>
+              <CustomSelect fill value={aspectRatio} onChange={setAspectRatio} disabled={isGenerating} options={QUICK_RATIOS} />
             </label>
             <label className="quick-parameter-field">
               <span>分辨率</span>
-              <select value={resolution} onChange={(event) => setResolution(event.target.value)} disabled={isGenerating}>
-                {QUICK_RESOLUTIONS.map((option) => (
-                  <option key={option.value} value={option.value} disabled={Boolean(supportedResolutions.length && !supportedResolutions.includes(option.value))}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
+              <CustomSelect
+                fill
+                value={resolution}
+                onChange={setResolution}
+                disabled={isGenerating}
+                options={QUICK_RESOLUTIONS.map((option) => ({
+                  ...option,
+                  disabled: Boolean(supportedResolutions.length && !supportedResolutions.includes(option.value)),
+                }))}
+              />
             </label>
             <label className="quick-parameter-field">
               <span>视频时长</span>
-              <select value={totalDuration} onChange={(event) => setTotalDuration(Number(event.target.value))} disabled={isGenerating}>
-                {QUICK_DURATIONS.map((duration) => <option key={duration} value={duration}>{duration / 15} 场（{duration}s）</option>)}
-              </select>
+              <CustomSelect
+                fill
+                value={String(totalDuration)}
+                onChange={(next) => setTotalDuration(Number(next))}
+                disabled={isGenerating}
+                options={QUICK_DURATIONS.map((duration) => ({ value: String(duration), label: `${duration / 15} 场（${duration}s）` }))}
+              />
             </label>
             <label className="quick-parameter-field">
               <span>视频模型</span>
-              <select value={videoModelId} onChange={(event) => setVideoModelId(event.target.value)} disabled={isGenerating || !videoConfigs.length}>
-                {videoConfigs.length ? videoConfigs.map((config) => (
-                  <option key={config.id} value={config.id}>{FC_MODELS.find((item) => item.name === config.name)?.label || config.display_name || modelLabel(config.name)}</option>
-                )) : <option value="">暂无可用视频模型</option>}
-              </select>
+              <CustomSelect
+                fill
+                value={videoModelId}
+                onChange={setVideoModelId}
+                disabled={isGenerating || !videoConfigs.length}
+                placeholder="暂无可用视频模型"
+                options={videoConfigs.map((config) => ({
+                  value: config.id,
+                  label: FC_MODELS.find((item) => item.name === config.name)?.label || config.display_name || modelLabel(config.name),
+                }))}
+              />
             </label>
           </div>