fix: allow concurrent media playground submits

apps/web/src/pages/PlaygroundPage.tsx

@@ -118,7 +118,6 @@ export function PlaygroundPage(props: {
   const [threadKey, setThreadKey] = useState(0);
   const [mediaSettings, setMediaSettings] = useState(defaultMediaGenerationSettings);
   const [mediaRuns, setMediaRuns] = useState<MediaGenerationRun[]>(readStoredMediaRuns);
-  const [mediaSubmitting, setMediaSubmitting] = useState(false);
   const [mediaMessage, setMediaMessage] = useState('');
   const isMountedRef = useRef(false);
   const resumedTaskIdsRef = useRef(new Set<string>());
@@ -230,7 +229,6 @@ export function PlaygroundPage(props: {
 
     setMediaRuns((current) => [...current, run]);
     setMediaMessage('');
-    setMediaSubmitting(true);
     try {
       const requestPayload = {
         model: selectedModel,
@@ -241,18 +239,27 @@ export function PlaygroundPage(props: {
         ? await createVideoGenerationTask(credential, requestPayload)
         : await createImageGenerationTask(credential, requestPayload);
       setMediaRuns((current) => updateMediaRun(current, localId, { status: response.task.status, task: response.task }));
-      const detail = await pollTaskUntilSettled(credential, response.task);
+      void pollMediaRunUntilSettled(credential, localId, response.task);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : '生成任务提交失败';
+      setMediaMessage(errorMessage);
+      setMediaRuns((current) => updateMediaRun(current, localId, { error: errorMessage, status: 'failed' }));
+    }
+  }
+
+  async function pollMediaRunUntilSettled(credential: string, localId: string, task: GatewayTask) {
+    try {
+      const detail = await pollTaskUntilSettled(credential, task);
+      if (!isMountedRef.current) return;
       setMediaRuns((current) => updateMediaRun(current, localId, {
         error: gatewayTaskErrorText(detail, '任务执行失败'),
         status: detail.status,
         task: detail,
       }));
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : '生成任务提交失败';
+      if (!isMountedRef.current) return;
-      setMediaMessage(errorMessage);
+      const errorMessage = err instanceof Error ? err.message : '任务状态同步失败';
       setMediaRuns((current) => updateMediaRun(current, localId, { error: errorMessage, status: 'failed' }));
-    } finally {
-      setMediaSubmitting(false);
     }
   }
 
@@ -280,7 +287,6 @@ export function PlaygroundPage(props: {
     <Composer
       apiKeySecretsById={props.apiKeySecretsById}
       apiKeys={props.apiKeys}
-      isSubmitting={mediaSubmitting}
       mode={props.mode}
       modelOptions={modelOptions}
       prompt={prompt}
@@ -868,7 +874,6 @@ function Composer(props: {
   apiKeys?: GatewayApiKey[];
   compact?: boolean;
   imageHasReference?: boolean;
-  isSubmitting?: boolean;
   mediaCapabilities?: MediaModelCapabilities;
   mediaSettings?: MediaGenerationSettings;
   mode: PlaygroundMode;
@@ -946,7 +951,7 @@ function Composer(props: {
         <div className="composerQuickPrompts">
           {quickItems.map((item) => <button type="button" key={item} onClick={() => props.onPromptChange(item)}>{item}</button>)}
         </div>
-        <Button type="button" size="icon" aria-label="发送测试" disabled={props.isSubmitting} onClick={props.onSubmit}>
+        <Button type="button" size="icon" aria-label="发送测试" onClick={props.onSubmit}>
           <Send size={15} />
         </Button>
       </div>