feat: add configurable vision focus prompts

frontend/src/components/editor/vision-config-section.tsx

@@ -1,12 +1,16 @@
 "use client";
 
-import { Camera } from "lucide-react";
+import { useState } from "react";
+import { Camera, Loader2, Sparkles } from "lucide-react";
 
 import {
   ResourceSelectField,
   ToggleRow,
 } from "@/components/assistant-editor/editor-controls";
 import { SectionCard } from "@/components/editor/section-card";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { assistantsApi } from "@/lib/api";
 
 type VisionModelOption = {
   value: string;
@@ -18,22 +22,32 @@ export function VisionConfigSection({
   hint,
   enabled,
   modelResourceId,
+  focusPrompt,
+  sourcePrompt,
+  generatorModelResourceId,
   mainModelResourceId,
   mainModelSupportsImageInput,
   modelOptions,
   onEnabledChange,
   onModelResourceIdChange,
+  onFocusPromptChange,
 }: {
   description: string;
   hint: string;
   enabled: boolean;
   modelResourceId: string;
+  focusPrompt: string;
+  sourcePrompt: string;
+  generatorModelResourceId: string;
   mainModelResourceId: string;
   mainModelSupportsImageInput?: boolean;
   modelOptions: VisionModelOption[];
   onEnabledChange: (enabled: boolean) => void;
   onModelResourceIdChange: (modelResourceId: string) => void;
+  onFocusPromptChange: (focusPrompt: string) => void;
 }) {
+  const [generating, setGenerating] = useState(false);
+  const [generationError, setGenerationError] = useState("");
   const mainModelSupportsVision =
     mainModelSupportsImageInput ??
     modelOptions.some((option) => option.value === mainModelResourceId);
@@ -41,6 +55,25 @@ export function VisionConfigSection({
     (option) => option.value !== mainModelResourceId,
   );
 
+  async function generateFocusPrompt() {
+    if (!sourcePrompt.trim() || !generatorModelResourceId || generating) return;
+    setGenerating(true);
+    setGenerationError("");
+    try {
+      const result = await assistantsApi.generateVisionFocus({
+        sourcePrompt,
+        modelResourceId: generatorModelResourceId,
+      });
+      onFocusPromptChange(result.focusPrompt);
+    } catch (error) {
+      setGenerationError(
+        error instanceof Error ? error.message : "生成视觉关注目标失败",
+      );
+    } finally {
+      setGenerating(false);
+    }
+  }
+
   return (
     <SectionCard
       icon={<Camera size={15} />}
@@ -67,6 +100,56 @@ export function VisionConfigSection({
               当前模型未标记支持图片输入，请选择独立视觉模型。
             </p>
           )}
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between gap-3">
+              <label className="text-sm font-medium text-foreground">
+                视觉关注目标
+              </label>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1.5 rounded-full px-2.5 text-xs"
+                disabled={
+                  generating || !sourcePrompt.trim() || !generatorModelResourceId
+                }
+                onClick={() => void generateFocusPrompt()}
+                title={
+                  !sourcePrompt.trim()
+                    ? "请先填写助手提示词"
+                    : !generatorModelResourceId
+                      ? "请先选择大语言模型"
+                      : "根据当前助手提示词生成可编辑草稿"
+                }
+              >
+                {generating ? (
+                  <Loader2 size={12} className="animate-spin" />
+                ) : (
+                  <Sparkles size={12} />
+                )}
+                {generating ? "生成中" : "根据提示词生成"}
+              </Button>
+            </div>
+            <Textarea
+              value={focusPrompt}
+              maxLength={4000}
+              rows={5}
+              onChange={(event) => {
+                onFocusPromptChange(event.target.value);
+                if (generationError) setGenerationError("");
+              }}
+              placeholder="例如：优先识别车辆数量、碰撞位置、明显损伤和人员状态；只报告画面中可直接确认的信息。"
+              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">
+              可选。系统仍保留通用视觉安全规则；这里用于让每次看图稳定聚焦业务目标。
+            </p>
+            {generationError && (
+              <p className="text-xs leading-5 text-destructive">
+                {generationError}
+              </p>
+            )}
+          </div>
         </>
       )}
     </SectionCard>