feat(api): 模型接入 - 统一出网 User-Agent 并支持添加时测试模型

Fixes #39

web/src/pages/settings/channel-video-pricing.tsx

@@ -1,11 +1,16 @@
-import { InputNumber, Segmented, Select } from "antd";
+import { useState } from "react";
+import { App, Button, InputNumber, Segmented, Select } from "antd";
+import { FlaskConical } from "lucide-react";
 
+import { testChannelModelConnection } from "@/lib/model-connection-test";
 import { MODEL_PROTOCOL_OPTIONS, modelProtocolCapability, modelProtocolDefinition, modelProtocolLabel, type ModelProtocol } from "@/lib/model-protocols";
 import { modelMatchesCapability, modelOptionName, type ModelChannel } from "@/stores/use-config-store";
 
 type ModelCost = NonNullable<ModelChannel["modelCosts"]>[number];
 
 export function ChannelModelSettings({ channel, onChange }: { channel: ModelChannel; onChange: (costs: ModelCost[]) => void }) {
+    const { message } = App.useApp();
+    const [testingModel, setTestingModel] = useState("");
     if (!channel.models.length) return null;
 
     const updateCost = (model: string, patch: Partial<ModelCost>) => {
@@ -20,10 +25,22 @@ export function ChannelModelSettings({ channel, onChange }: { channel: ModelChan
         onChange(next.filter((item) => channel.models.includes(item.model)));
     };
 
+    const testModel = async (model: string, capability: ModelCost["capability"], protocol: ModelProtocol) => {
+        setTestingModel(model);
+        try {
+            const detail = await testChannelModelConnection(channel, model, capability, protocol);
+            message.success(`模型测试通过：${detail}`);
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "模型测试失败");
+        } finally {
+            setTestingModel("");
+        }
+    };
+
     return (
         <div className="mt-3 border-t border-border/70 pt-3">
             <div className="mb-2 flex items-center justify-between gap-3">
-                <div><div className="text-xs font-medium">模型请求协议</div><div className="mt-0.5 text-[10px] text-foreground/42">每个模型独立决定请求路径和报文；视频价格仅用于成本记录</div></div>
+                <div><div className="text-xs font-medium">模型请求协议</div><div className="mt-0.5 text-[10px] text-foreground/42">测试会发起真实请求并可能产生供应商费用；视频价格仅用于成本记录</div></div>
                 <span className="text-[10px] text-foreground/35">{channel.models.length} 个模型</span>
             </div>
             <div className="divide-y divide-border/60 rounded-md border border-border/70">
@@ -34,7 +51,7 @@ export function ChannelModelSettings({ channel, onChange }: { channel: ModelChan
                     const capability = cost?.capability || modelProtocolCapability(protocol) || "text";
                     const billingMode = cost?.billingMode || "fixed_request";
                     return (
-                        <div key={model} className="grid gap-2 px-2.5 py-2.5 lg:grid-cols-[minmax(140px,1fr)_minmax(280px,1.6fr)_176px_160px] lg:items-center">
+                        <div key={model} className="grid gap-2 px-2.5 py-2.5 lg:grid-cols-[minmax(140px,1fr)_minmax(280px,1.6fr)_176px_160px_96px] lg:items-center">
                             <div className="min-w-0"><div className="truncate text-xs font-medium" title={model}>{model}</div><div className="mt-0.5 truncate font-mono text-[10px] text-foreground/40" title={modelProtocolDefinition(protocol)?.create}>{modelProtocolDefinition(protocol)?.create}</div></div>
                             <Select<ModelProtocol>
                                 size="small"
@@ -44,6 +61,7 @@ export function ChannelModelSettings({ channel, onChange }: { channel: ModelChan
                             />
                             {capability === "video" ? <Segmented size="small" block value={billingMode} options={[{ label: "按次", value: "fixed_request" }, { label: "按秒", value: "per_second" }]} onChange={(value) => updateCost(model, { billingMode: value as ModelCost["billingMode"] })} /> : <span className="text-center text-[10px] text-foreground/35">{modelProtocolLabel(protocol)}</span>}
                             {capability === "video" ? <InputNumber size="small" min={0} max={1_000_000} precision={6} step={0.1} className="w-full" placeholder={billingMode === "per_second" ? "每秒价格" : "每次价格"} addonAfter={`积分/${billingMode === "per_second" ? "秒" : "次"}`} value={cost ? cost.unitPriceMicrocredits / 1_000_000 : null} onChange={(value) => updateCost(model, { unitPriceMicrocredits: Math.round(Number(value || 0) * 1_000_000) })} /> : <span />}
+                            <Button size="small" icon={<FlaskConical className="size-3.5" />} loading={testingModel === model} disabled={Boolean(testingModel && testingModel !== model)} onClick={() => void testModel(model, capability, protocol)}>测试</Button>
                         </div>
                     );
                 })}

web/src/pages/settings/index.tsx

@@ -153,7 +153,7 @@ export default function SettingsPage() {
         }
         setChannelLoading(channel.id, true);
         try {
-            const models = await fetchChannelModels(channel);
+            const models = await fetchChannelModels(channel, true);
             if (!models.length) {
                 message.warning(`${channel.name || "当前渠道"}未返回模型，已保留现有手工模型`);
                 return;
@@ -190,7 +190,7 @@ export default function SettingsPage() {
             const results = await Promise.all(
                 runnable.map(async (channel) => {
                     try {
-                        const models = await fetchChannelModels(channel);
+                        const models = await fetchChannelModels(channel, true);
                         return { channel, models, error: "" };
                     } catch (error) {
                         return { channel, models: [] as string[], error: error instanceof Error ? error.message : "读取失败" };