From 7c18cea16d1c03152b6c12491674c4b4d67bd146 Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Wed, 12 Aug 2026 21:38:42 +0800
Subject: [PATCH] refactor: use dropdown for vision prompt mode

---
 .../editor/vision-config-section.tsx          | 88 ++++++++-----------
 .../src/components/workflow/graph-settings.ts |  8 +-
 .../workflow/panels/GlobalSettingsPanel.tsx   |  4 +-
 3 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/editor/vision-config-section.tsx b/frontend/src/components/editor/vision-config-section.tsx
index 1aa60c5..b97a5c8 100644
--- a/frontend/src/components/editor/vision-config-section.tsx
+++ b/frontend/src/components/editor/vision-config-section.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Camera, Check } from "lucide-react";
+import { Camera } from "lucide-react";
 
 import {
   ResourceSelectField,
@@ -20,16 +20,16 @@ const promptModes: Array<{
   title: string;
   description: string;
 }> = [
+  {
+    value: "runtime",
+    title: "运行时自动生成（默认）",
+    description: "模型结合当前对话，临时生成看图问题。",
+  },
   {
     value: "fixed",
     title: "固定提示词",
     description: "每次获取画面都发送同一个问题。",
   },
-  {
-    value: "runtime",
-    title: "运行时自动生成",
-    description: "模型结合当前对话，临时生成看图问题。",
-  },
   {
     value: "guided",
     title: "固定提示词引导",
@@ -72,6 +72,10 @@ export function VisionConfigSection({
   const independentModelOptions = modelOptions.filter(
     (option) => option.value !== mainModelResourceId,
   );
+  const effectivePromptMode = promptMode || "runtime";
+  const selectedPromptMode =
+    promptModes.find((option) => option.value === effectivePromptMode) ??
+    promptModes[0];
 
   return (
     <SectionCard
@@ -99,54 +103,32 @@ export function VisionConfigSection({
               当前模型未标记支持图片输入，请选择独立视觉模型。
             </p>
           )}
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-foreground">
-              看图问题生成方式
-            </label>
-            <div role="radiogroup" aria-label="看图问题生成方式" className="space-y-2">
-              {promptModes.map((option) => {
-                const selected = promptMode === option.value;
-                return (
-                  <button
-                    key={option.value}
-                    type="button"
-                    role="radio"
-                    aria-checked={selected}
-                    onClick={() => onPromptModeChange(option.value)}
-                    className={[
-                      "flex w-full items-start gap-3 rounded-xl border px-3.5 py-3 text-left transition-colors",
-                      selected
-                        ? "border-primary bg-surface-strong/70 ring-1 ring-primary"
-                        : "border-hairline bg-background hover:border-hairline-strong",
-                    ].join(" ")}
-                  >
-                    <span
-                      className={[
-                        "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border",
-                        selected
-                          ? "border-primary bg-primary text-primary-foreground"
-                          : "border-hairline-strong text-transparent",
-                      ].join(" ")}
-                    >
-                      <Check size={12} />
-                    </span>
-                    <span className="min-w-0">
-                      <span className="block text-sm font-medium text-foreground">
-                        {option.title}
-                      </span>
-                      <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">
-                        {option.description}
-                      </span>
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
+          <div className="space-y-1.5">
+            <ResourceSelectField
+              label="看图问题生成方式"
+              value={effectivePromptMode}
+              options={promptModes.map((option) => ({
+                value: option.value,
+                label: option.title,
+              }))}
+              onChange={(value) =>
+                onPromptModeChange(
+                  value === "fixed" || value === "guided"
+                    ? value
+                    : "runtime",
+                )
+              }
+            />
+            <p className="text-[11px] leading-5 text-muted-soft">
+              {selectedPromptMode.description}
+            </p>
           </div>
-          {promptMode !== "runtime" && (
+          {effectivePromptMode !== "runtime" && (
             <div className="space-y-1.5">
               <label className="text-sm font-medium text-foreground">
-                {promptMode === "fixed" ? "固定视觉提示词" : "运行时提示词引导"}
+                {effectivePromptMode === "fixed"
+                  ? "固定视觉提示词"
+                  : "运行时提示词引导"}
               </label>
               <Textarea
                 value={prompt}
@@ -154,14 +136,14 @@ export function VisionConfigSection({
                 rows={5}
                 onChange={(event) => onPromptChange(event.target.value)}
                 placeholder={
-                  promptMode === "fixed"
+                  effectivePromptMode === "fixed"
                     ? "例如：请识别画面中的车辆数量、碰撞位置、明显损伤和人员状态。"
                     : "例如：问题应聚焦车辆数量、碰撞位置和人员状态；只询问画面中可直接判断的信息。"
                 }
                 className="field-sizing-fixed min-h-28 resize-y border-hairline-strong bg-background text-sm leading-6 text-foreground placeholder:text-muted-soft"
               />
               <p className="text-[11px] leading-5 text-muted-soft">
-                {promptMode === "fixed"
+                {effectivePromptMode === "fixed"
                   ? "工具调用时不会让模型改写这段内容。"
                   : "模型会结合当前对话生成具体问题，并受到这段内容约束。"}
               </p>
diff --git a/frontend/src/components/workflow/graph-settings.ts b/frontend/src/components/workflow/graph-settings.ts
index d3b55d9..47792a6 100644
--- a/frontend/src/components/workflow/graph-settings.ts
+++ b/frontend/src/components/workflow/graph-settings.ts
@@ -15,8 +15,8 @@ export function settingsFromWorkflowGraph(
     tts: graph.settings.defaultTtsResourceId,
     visionEnabled: graph.settings.visionEnabled,
     visionModelResourceId: graph.settings.visionModelResourceId,
-    visionPromptMode: graph.settings.visionPromptMode,
-    visionPrompt: graph.settings.visionPrompt,
+    visionPromptMode: graph.settings.visionPromptMode ?? "runtime",
+    visionPrompt: graph.settings.visionPrompt ?? "",
     toolIds: graph.settings.toolIds,
     knowledgeBaseId: graph.settings.knowledgeBaseId,
     knowledgeRetrievalConfig: {
@@ -46,8 +46,8 @@ export function workflowGraphWithSettings(
       defaultTtsResourceId: settings.tts ?? "",
       visionEnabled: settings.visionEnabled,
       visionModelResourceId: settings.visionModelResourceId,
-      visionPromptMode: settings.visionPromptMode,
-      visionPrompt: settings.visionPrompt,
+      visionPromptMode: settings.visionPromptMode ?? "runtime",
+      visionPrompt: settings.visionPrompt ?? "",
       toolIds: settings.toolIds,
       knowledgeBaseId: settings.knowledgeBaseId,
       knowledgeMode: settings.knowledgeRetrievalConfig.mode,
diff --git a/frontend/src/components/workflow/panels/GlobalSettingsPanel.tsx b/frontend/src/components/workflow/panels/GlobalSettingsPanel.tsx
index 4c7ee2d..58f8768 100644
--- a/frontend/src/components/workflow/panels/GlobalSettingsPanel.tsx
+++ b/frontend/src/components/workflow/panels/GlobalSettingsPanel.tsx
@@ -184,8 +184,8 @@ export function GlobalSettingsPanel({
           }
           enabled={settings.visionEnabled}
           modelResourceId={settings.visionModelResourceId}
-          promptMode={settings.visionPromptMode}
-          prompt={settings.visionPrompt}
+          promptMode={settings.visionPromptMode ?? "runtime"}
+          prompt={settings.visionPrompt ?? ""}
           mainModelResourceId={
             settings.runtimeMode === "realtime"
               ? settings.realtime ?? ""