From 53f40b2d7a8e5728a69aa841cae32537420867bc Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 12 Jan 2026 11:20:16 +0800
Subject: [PATCH] refactor(ui): unify pricing edit modal with FullScreenPanel

Replace Dialog component with FullScreenPanel in PricingEditModal
to match the UI style of other edit dialogs (provider, MCP).

Changes:
- Switch from small centered Dialog to full-screen panel
- Add back button in header and fixed footer for actions
- Add Save/Plus icons to submit button
---
 src/components/usage/PricingConfigPanel.tsx |   1 +
 src/components/usage/PricingEditModal.tsx   | 254 ++++++++++----------
 2 files changed, 128 insertions(+), 127 deletions(-)

diff --git a/src/components/usage/PricingConfigPanel.tsx b/src/components/usage/PricingConfigPanel.tsx
index 7e81d4128..2f0372102 100644
--- a/src/components/usage/PricingConfigPanel.tsx
+++ b/src/components/usage/PricingConfigPanel.tsx
@@ -202,6 +202,7 @@ export function PricingConfigPanel() {
 
       {editingModel && (
         <PricingEditModal
+          open={!!editingModel}
           model={editingModel}
           isNew={isAddingNew}
           onClose={() => {
diff --git a/src/components/usage/PricingEditModal.tsx b/src/components/usage/PricingEditModal.tsx
index 4e9a759ae..55cb582c3 100644
--- a/src/components/usage/PricingEditModal.tsx
+++ b/src/components/usage/PricingEditModal.tsx
@@ -1,13 +1,8 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
+import { Save, Plus } from "lucide-react";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -15,12 +10,14 @@ import { useUpdateModelPricing } from "@/lib/query/usage";
 import type { ModelPricing } from "@/types/usage";
 
 interface PricingEditModalProps {
+  open: boolean;
   model: ModelPricing;
   isNew?: boolean;
   onClose: () => void;
 }
 
 export function PricingEditModal({
+  open,
   model,
   isNew = false,
   onClose,
@@ -86,139 +83,142 @@ export function PricingEditModal({
   };
 
   return (
-    <Dialog open onOpenChange={onClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            {isNew
-              ? t("usage.addPricing", "新增定价")
-              : `${t("usage.editPricing", "编辑定价")} - ${model.modelId}`}
-          </DialogTitle>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {isNew && (
-            <div className="space-y-2">
-              <Label htmlFor="modelId">{t("usage.modelId", "模型 ID")}</Label>
-              <Input
-                id="modelId"
-                value={formData.modelId}
-                onChange={(e) =>
-                  setFormData({ ...formData, modelId: e.target.value })
-                }
-                placeholder={t("usage.modelIdPlaceholder", {
-                  defaultValue: "例如: claude-3-5-sonnet-20241022",
-                })}
-                required
-              />
-            </div>
+    <FullScreenPanel
+      isOpen={open}
+      title={
+        isNew
+          ? t("usage.addPricing", "新增定价")
+          : `${t("usage.editPricing", "编辑定价")} - ${model.modelId}`
+      }
+      onClose={onClose}
+      footer={
+        <Button
+          type="submit"
+          form="pricing-form"
+          disabled={updatePricing.isPending}
+        >
+          {isNew ? (
+            <Plus className="h-4 w-4 mr-2" />
+          ) : (
+            <Save className="h-4 w-4 mr-2" />
           )}
-
+          {updatePricing.isPending
+            ? t("common.saving", "保存中...")
+            : isNew
+              ? t("common.add", "新增")
+              : t("common.save", "保存")}
+        </Button>
+      }
+    >
+      <form id="pricing-form" onSubmit={handleSubmit} className="space-y-6">
+        {isNew && (
           <div className="space-y-2">
-            <Label htmlFor="displayName">
-              {t("usage.displayName", "显示名称")}
-            </Label>
+            <Label htmlFor="modelId">{t("usage.modelId", "模型 ID")}</Label>
             <Input
-              id="displayName"
-              value={formData.displayName}
+              id="modelId"
+              value={formData.modelId}
               onChange={(e) =>
-                setFormData({ ...formData, displayName: e.target.value })
+                setFormData({ ...formData, modelId: e.target.value })
               }
-              placeholder={t("usage.displayNamePlaceholder", {
-                defaultValue: "例如: Claude 3.5 Sonnet",
+              placeholder={t("usage.modelIdPlaceholder", {
+                defaultValue: "例如: claude-3-5-sonnet-20241022",
               })}
               required
             />
           </div>
+        )}
 
-          <div className="space-y-2">
-            <Label htmlFor="inputCost">
-              {t("usage.inputCostPerMillion", "输入成本 (每百万 tokens, USD)")}
-            </Label>
-            <Input
-              id="inputCost"
-              type="number"
-              step="0.01"
-              min="0"
-              value={formData.inputCost}
-              onChange={(e) =>
-                setFormData({ ...formData, inputCost: e.target.value })
-              }
-              required
-            />
-          </div>
+        <div className="space-y-2">
+          <Label htmlFor="displayName">
+            {t("usage.displayName", "显示名称")}
+          </Label>
+          <Input
+            id="displayName"
+            value={formData.displayName}
+            onChange={(e) =>
+              setFormData({ ...formData, displayName: e.target.value })
+            }
+            placeholder={t("usage.displayNamePlaceholder", {
+              defaultValue: "例如: Claude 3.5 Sonnet",
+            })}
+            required
+          />
+        </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="outputCost">
-              {t("usage.outputCostPerMillion", "输出成本 (每百万 tokens, USD)")}
-            </Label>
-            <Input
-              id="outputCost"
-              type="number"
-              step="0.01"
-              min="0"
-              value={formData.outputCost}
-              onChange={(e) =>
-                setFormData({ ...formData, outputCost: e.target.value })
-              }
-              required
-            />
-          </div>
+        <div className="space-y-2">
+          <Label htmlFor="inputCost">
+            {t("usage.inputCostPerMillion", "输入成本 (每百万 tokens, USD)")}
+          </Label>
+          <Input
+            id="inputCost"
+            type="number"
+            step="0.01"
+            min="0"
+            value={formData.inputCost}
+            onChange={(e) =>
+              setFormData({ ...formData, inputCost: e.target.value })
+            }
+            required
+          />
+        </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="cacheReadCost">
-              {t(
-                "usage.cacheReadCostPerMillion",
-                "缓存读取成本 (每百万 tokens, USD)",
-              )}
-            </Label>
-            <Input
-              id="cacheReadCost"
-              type="number"
-              step="0.01"
-              min="0"
-              value={formData.cacheReadCost}
-              onChange={(e) =>
-                setFormData({ ...formData, cacheReadCost: e.target.value })
-              }
-              required
-            />
-          </div>
+        <div className="space-y-2">
+          <Label htmlFor="outputCost">
+            {t("usage.outputCostPerMillion", "输出成本 (每百万 tokens, USD)")}
+          </Label>
+          <Input
+            id="outputCost"
+            type="number"
+            step="0.01"
+            min="0"
+            value={formData.outputCost}
+            onChange={(e) =>
+              setFormData({ ...formData, outputCost: e.target.value })
+            }
+            required
+          />
+        </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="cacheCreationCost">
-              {t(
-                "usage.cacheCreationCostPerMillion",
-                "缓存写入成本 (每百万 tokens, USD)",
-              )}
-            </Label>
-            <Input
-              id="cacheCreationCost"
-              type="number"
-              step="0.01"
-              min="0"
-              value={formData.cacheCreationCost}
-              onChange={(e) =>
-                setFormData({ ...formData, cacheCreationCost: e.target.value })
-              }
-              required
-            />
-          </div>
+        <div className="space-y-2">
+          <Label htmlFor="cacheReadCost">
+            {t(
+              "usage.cacheReadCostPerMillion",
+              "缓存读取成本 (每百万 tokens, USD)",
+            )}
+          </Label>
+          <Input
+            id="cacheReadCost"
+            type="number"
+            step="0.01"
+            min="0"
+            value={formData.cacheReadCost}
+            onChange={(e) =>
+              setFormData({ ...formData, cacheReadCost: e.target.value })
+            }
+            required
+          />
+        </div>
 
-          <DialogFooter>
-            <Button type="button" variant="outline" onClick={onClose}>
-              {t("common.cancel", "取消")}
-            </Button>
-            <Button type="submit" disabled={updatePricing.isPending}>
-              {updatePricing.isPending
-                ? t("common.saving", "保存中...")
-                : isNew
-                  ? t("common.add", "新增")
-                  : t("common.save", "保存")}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+        <div className="space-y-2">
+          <Label htmlFor="cacheCreationCost">
+            {t(
+              "usage.cacheCreationCostPerMillion",
+              "缓存写入成本 (每百万 tokens, USD)",
+            )}
+          </Label>
+          <Input
+            id="cacheCreationCost"
+            type="number"
+            step="0.01"
+            min="0"
+            value={formData.cacheCreationCost}
+            onChange={(e) =>
+              setFormData({ ...formData, cacheCreationCost: e.target.value })
+            }
+            required
+          />
+        </div>
+      </form>
+    </FullScreenPanel>
   );
 }