fix: verify and preview generated test images

apps/web/app/globals.css

@@ -1660,6 +1660,33 @@ textarea:focus-visible,
   color: var(--warning) !important;
 }
 
+.model-generation-result {
+  grid-column: 2 / -1;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.model-generation-result .model-test-message {
+  grid-column: auto;
+  flex: 1;
+}
+
+.model-generation-result a {
+  display: block;
+  flex: 0 0 96px;
+}
+
+.model-generation-result img {
+  display: block;
+  width: 96px;
+  height: 72px;
+  object-fit: cover;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-muted);
+}
+
 .model-routing {
   border-top: 1px solid var(--line);
 }

apps/web/components/settings-center.tsx

@@ -452,7 +452,7 @@ export function SettingsCenter({ open, onClose, onReadinessChange }: SettingsCen
 
 type ModelPoolPanelProps = {
   draft: Record<string, unknown>;
-  tests: Record<string, { ok: boolean; message: string }>;
+  tests: Record<string, { ok: boolean; message: string; details?: Record<string, unknown> }>;
   busy: string | null;
   onChange: (key: string, value: unknown) => void;
   onTest: (modelId: string) => void;
@@ -768,7 +768,7 @@ type ModelGroupProps = {
   description: string;
   category: ModelCategory;
   models: ModelPoolItem[];
-  tests: Record<string, { ok: boolean; message: string }>;
+  tests: Record<string, { ok: boolean; message: string; details?: Record<string, unknown> }>;
   busy: string | null;
   onAdd: () => void;
   onEdit: (model: ModelPoolItem) => void;
@@ -800,6 +800,9 @@ function ModelGroup({ title, description, category, models, tests, busy, onAdd,
             const result = tests[target];
             const generationTarget = `generation:${model.id}`;
             const generationResult = tests[generationTarget];
+            const generationImageUrl = typeof generationResult?.details?.result_url === "string"
+              ? generationResult.details.result_url
+              : null;
             return (
               <article className={`model-row ${!model.enabled ? "disabled" : ""}`} key={model.id}>
                 <div className={`model-state ${result?.ok ? "ok" : result ? "failed" : "untested"}`}>
@@ -820,7 +823,11 @@ function ModelGroup({ title, description, category, models, tests, busy, onAdd,
                   </button>
                   {model.capabilities.includes("image_generation") ? (
                     <button className="button button-secondary compact" type="button" onClick={() => onTrial(model.id)} disabled={Boolean(busy) || !model.enabled} title="会消耗一次模型调用额度">
-                      {busy === generationTarget ? <ArrowClockwiseIcon className="spin" size={14} /> : <ImageIcon size={14} />}
+                      {busy === generationTarget
+                        ? <ArrowClockwiseIcon className="spin" size={14} />
+                        : generationResult?.ok
+                          ? <CheckCircleIcon size={14} weight="fill" />
+                          : <ImageIcon size={14} />}
                       试生成
                     </button>
                   ) : null}
@@ -832,7 +839,19 @@ function ModelGroup({ title, description, category, models, tests, busy, onAdd,
                   </button>
                 </div>
                 {result ? <p className={`model-test-message ${result.ok ? "ok" : "failed"}`}>{result.message}</p> : <p className="model-test-message">尚未验证模型 ID。</p>}
-                {generationResult ? <p className={`model-test-message ${generationResult.ok ? "ok" : "failed"}`}>{generationResult.message}</p> : null}
+                {generationResult ? (
+                  <div className="model-generation-result">
+                    <p className={`model-test-message ${generationResult.ok ? "ok" : "failed"}`}>{generationResult.message}</p>
+                    {generationResult.ok && generationImageUrl ? (
+                      <a href={generationImageUrl} target="_blank" rel="noreferrer" title="打开原始测试图片">
+                        {/* eslint-disable-next-line @next/next/no-img-element -- runtime model URLs are not known to Next Image. */}
+                        <img src={generationImageUrl} alt={`${model.name} 真实试生成结果`} />
+                      </a>
+                    ) : null}
+                  </div>
+                ) : model.capabilities.includes("image_generation") ? (
+                  <p className="model-test-message">尚未完成真实生图验证；连接成功不代表已经获得有效图片。</p>
+                ) : null}
               </article>
             );
           })}

apps/web/types/settings.ts

@@ -40,7 +40,7 @@ export type SettingsResponse = {
   categories: SettingCategory[];
   values: Record<string, unknown>;
   configured: Record<string, boolean>;
-  tests: Record<string, { ok: boolean; message: string }>;
+  tests: Record<string, { ok: boolean; message: string; details?: Record<string, unknown> }>;
   readiness: SettingsReadiness;
 };