From 792985fdf8cd6292032acd7d783ebd79f29a5b06 Mon Sep 17 00:00:00 2001
From: ddCat <2695092045@qq.com>
Date: Thu, 6 Aug 2026 16:54:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E6=B8=A0=E9=81=93=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=85=8D=E7=BD=AE=20-=20=E5=9C=A8=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E5=86=85=E5=B9=B3=E9=93=BA=E8=83=BD=E5=8A=9B=E4=B8=8E=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E5=8D=8F=E8=AE=AE=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/settings/channel-video-pricing.tsx  | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/settings/channel-video-pricing.tsx b/web/src/pages/settings/channel-video-pricing.tsx
index f0c2ff527..4805444f7 100644
--- a/web/src/pages/settings/channel-video-pricing.tsx
+++ b/web/src/pages/settings/channel-video-pricing.tsx
@@ -4,9 +4,9 @@ import { ChevronRight, FlaskConical, Settings2 } from "lucide-react";
 
 import { testChannelModelConnection } from "@/lib/model-connection-test";
 import { ModelCapabilityEditor } from "@/components/model-capability-editor";
-import { ModelCapabilityProtocolModal } from "@/components/model-protocol-picker";
+import { CapabilityCardPicker, ProtocolCardPicker } from "@/components/model-protocol-picker";
 import { defaultModelCapabilityConfig } from "@/lib/model-capabilities";
-import { modelProtocolCapability, modelProtocolDefinition, type ModelProtocol } from "@/lib/model-protocols";
+import { MODEL_PROTOCOLS, modelProtocolCapability, modelProtocolDefinition, type ModelProtocol } from "@/lib/model-protocols";
 import { modelMatchesCapability, modelOptionName, type ModelChannel } from "@/stores/use-config-store";
 
 type ModelCost = NonNullable<ModelChannel["modelCosts"]>[number];
@@ -114,17 +114,30 @@ export function ChannelModelSettings({ channel, onChange }: { channel: ModelChan
                             <div className="text-xs font-medium">模型能力与请求协议</div>
                             <div className="mt-1 text-[var(--fs-tiny)] text-foreground/45">这些设置只影响当前渠道的这个模型，保存后会同步到生成校验。</div>
                         </div>
-                        <ModelCapabilityProtocolModal
-                            value={{ capability: activeCapability, protocol: activeProtocol }}
-                            onChange={({ capability: nextCapability, protocol: nextProtocol }) =>
-                                updateCost(activeModel, {
-                                    protocol: nextProtocol,
-                                    capability: nextCapability,
-                                    billingMode: nextCapability === "video" ? activeBillingMode : "fixed_request",
-                                    capabilityConfig: nextCapability === "video" ? defaultModelCapabilityConfig(nextProtocol) : undefined,
-                                })
-                            }
-                        />
+                        <section className="space-y-2">
+                            <div className="text-xs font-medium">模型能力</div>
+                            <CapabilityCardPicker
+                                value={activeCapability}
+                                onChange={(nextCapability) => {
+                                    const nextProtocol = MODEL_PROTOCOLS.find((item) => item.value === activeProtocol && item.capability === nextCapability)?.value || MODEL_PROTOCOLS.find((item) => item.capability === nextCapability)?.value;
+                                    if (!nextProtocol) return;
+                                    updateCost(activeModel, {
+                                        protocol: nextProtocol,
+                                        capability: nextCapability,
+                                        billingMode: nextCapability === "video" ? activeBillingMode : "fixed_request",
+                                        capabilityConfig: nextCapability === "video" ? defaultModelCapabilityConfig(nextProtocol) : undefined,
+                                    });
+                                }}
+                            />
+                        </section>
+                        <section className="space-y-2">
+                            <div className="text-xs font-medium">请求协议</div>
+                            <ProtocolCardPicker
+                                capability={activeCapability}
+                                value={activeProtocol}
+                                onChange={(nextProtocol) => updateCost(activeModel, { protocol: nextProtocol, capabilityConfig: activeCapability === "video" ? defaultModelCapabilityConfig(nextProtocol) : undefined })}
+                            />
+                        </section>
                         {activeCapability === "video" ? (
                             <div className="space-y-2">
                                 <div className="text-xs font-medium">计费方式</div>