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

Fixes #39

web/src/pages/admin/components/channel-model-manager.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { App, Button, Drawer, Form, Input, InputNumber, Popconfirm, Segmented, Select, Space, Switch, Table, Tag } from "antd";
 import type { ColumnsType } from "antd/es/table";
-import { Plus, RefreshCw, Search, Trash2 } from "lucide-react";
+import { FlaskConical, Plus, RefreshCw, Search, Trash2 } from "lucide-react";
 
 import { ListToolbar, TableSurface } from "@/components/layout/workspace-page";
 import { SYSTEM_MODEL_PROTOCOL_OPTIONS, modelProtocolCapability, modelProtocolDefinition, modelProtocolLabel, modelProtocolSummary, type ModelProtocol } from "@/lib/model-protocols";
-import { createAdminChannelModel, deleteAdminChannelModel, fetchAdminChannelModels, listAdminChannelModels, updateAdminChannelModel, type ChannelModel } from "@/services/api/wallet";
+import { createAdminChannelModel, deleteAdminChannelModel, fetchAdminChannelModels, listAdminChannelModels, testAdminChannelModel, updateAdminChannelModel, type ChannelModel } from "@/services/api/wallet";
 import type { ModelChannel } from "@/stores/use-config-store";
 import { AdminPageFrame } from "./admin-shell";
 
@@ -26,6 +26,7 @@ export function ChannelModelManager({ channel, onClose, onChanged }: { channel:
     const [loading, setLoading] = useState(false);
     const [fetching, setFetching] = useState(false);
     const [saving, setSaving] = useState(false);
+    const [testing, setTesting] = useState(false);
     const [editorOpen, setEditorOpen] = useState(false);
     const [keyword, setKeyword] = useState("");
     const [capability, setCapability] = useState<ChannelModel["capability"] | "all">("all");
@@ -116,6 +117,23 @@ export function ChannelModelManager({ channel, onClose, onChanged }: { channel:
         }
     };
 
+    const testModel = async () => {
+        const values = await form.validateFields(["modelKey", "capability", "protocol"]);
+        setTesting(true);
+        try {
+            const result = await testAdminChannelModel(channel.id, {
+                modelKey: values.modelKey.trim(),
+                capability: values.capability,
+                protocol: values.protocol,
+            });
+            message.success(`模型测试通过，耗时 ${(result.durationMs / 1000).toFixed(2)} 秒`);
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "模型测试失败");
+        } finally {
+            setTesting(false);
+        }
+    };
+
     const remove = async (item: ChannelModel) => {
         try {
             await deleteAdminChannelModel(channel.id, item.id);
@@ -216,7 +234,13 @@ export function ChannelModelManager({ channel, onClose, onChanged }: { channel:
                     <Form.Item name="enabled" label="启用" valuePropName="checked">
                         <Switch />
                     </Form.Item>
-                    <Button type="primary" block loading={saving} onClick={() => void save()}>{editing ? "保存修改" : "添加模型"}</Button>
+                    <div className="mb-2 text-xs text-foreground/45">
+                        测试会向上游发起真实请求并可能产生供应商费用{modelCapability === "video" ? "，视频测试可能需要数分钟" : ""}。
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                        <Button icon={<FlaskConical className="size-4" />} loading={testing} disabled={saving} onClick={() => void testModel()}>测试模型</Button>
+                        <Button type="primary" loading={saving} disabled={testing} onClick={() => void save()}>{editing ? "保存修改" : "添加模型"}</Button>
+                    </div>
                 </Form>
             </Drawer>
         </AdminPageFrame>

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 : "读取失败" };