feat(charge-points): add pricing mode for charge points with validation

feat(pricing): implement tariff management with peak, valley, and flat pricing
feat(api): add tariff API for fetching and updating pricing configurations
feat(tariff-schema): create database schema for tariff configuration
feat(pricing-page): create UI for displaying and managing pricing tiers
fix(sidebar): update sidebar to include pricing settings link

apps/web/app/dashboard/charge-points/[id]/page.tsx

@@ -78,6 +78,7 @@ type EditForm = {
   chargePointVendor: string;
   chargePointModel: string;
   registrationStatus: "Accepted" | "Pending" | "Rejected";
+  pricingMode: "fixed" | "tou";
   feePerKwh: string;
 };
 
@@ -96,6 +97,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
     chargePointVendor: "",
     chargePointModel: "",
     registrationStatus: "Pending",
+    pricingMode: "fixed",
     feePerKwh: "0",
   });
 
@@ -121,6 +123,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
       chargePointVendor: cp.chargePointVendor ?? "",
       chargePointModel: cp.chargePointModel ?? "",
       registrationStatus: cp.registrationStatus as EditForm["registrationStatus"],
+      pricingMode: cp.pricingMode,
       feePerKwh: String(cp.feePerKwh),
     });
     setEditOpen(true);
@@ -135,7 +138,8 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
         chargePointVendor: editForm.chargePointVendor,
         chargePointModel: editForm.chargePointModel,
         registrationStatus: editForm.registrationStatus,
-        feePerKwh: fee,
+        pricingMode: editForm.pricingMode,
+        feePerKwh: editForm.pricingMode === "fixed" ? fee : 0,
       });
       await cpQuery.refetch();
       setEditOpen(false);
@@ -309,7 +313,9 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">电价</dt>
                 <dd className="text-sm text-foreground">
-                  {cp.feePerKwh > 0 ? (
+                  {cp.pricingMode === "tou" ? (
+                    <span className="text-accent font-medium">峰谷电价</span>
+                  ) : cp.feePerKwh > 0 ? (
                     <span>
                       {cp.feePerKwh} 分/kWh
                       <span className="ml-1 text-xs text-muted">
@@ -373,7 +379,9 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">单位电价</dt>
                 <dd className="text-sm text-foreground">
-                  {cp.feePerKwh > 0 ? (
+                  {cp.pricingMode === "tou" ? (
+                    <span className="text-accent font-medium">峰谷电价</span>
+                  ) : cp.feePerKwh > 0 ? (
                     <span>
                       <span className="font-semibold">¥{(cp.feePerKwh / 100).toFixed(2)}</span>
                       <span className="ml-1 text-xs text-muted">/kWh</span>
@@ -601,8 +609,33 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                       </Select.Popover>
                     </Select>
                   </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm font-medium">计费模式</Label>
+                    <Select
+                      fullWidth
+                      selectedKey={editForm.pricingMode}
+                      onSelectionChange={(key) =>
+                        setEditForm((f) => ({
+                          ...f,
+                          pricingMode: String(key) as EditForm["pricingMode"],
+                        }))
+                      }
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                        <Select.Indicator />
+                      </Select.Trigger>
+                      <Select.Popover>
+                        <ListBox>
+                          <ListBox.Item id="fixed">固定电价</ListBox.Item>
+                          <ListBox.Item id="tou">峰谷电价</ListBox.Item>
+                        </ListBox>
+                      </Select.Popover>
+                    </Select>
+                  </div>
+                  {editForm.pricingMode === "fixed" && (
                   <TextField fullWidth>
-                    <Label className="text-sm font-medium">电价（分/kWh）</Label>
+                    <Label className="text-sm font-medium">固定电价（分/kWh）</Label>
                     <Input
                       type="number"
                       min="0"
@@ -612,6 +645,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                       onChange={(e) => setEditForm((f) => ({ ...f, feePerKwh: e.target.value }))}
                     />
                   </TextField>
+                  )}
                 </Modal.Body>
                 <Modal.Footer className="flex justify-end gap-2">
                   <Button variant="ghost" onPress={() => setEditOpen(false)}>

apps/web/app/dashboard/charge-points/page.tsx

@@ -100,6 +100,7 @@ type FormData = {
   chargePointVendor: string;
   chargePointModel: string;
   registrationStatus: "Accepted" | "Pending" | "Rejected";
+  pricingMode: "fixed" | "tou";
   feePerKwh: string;
 };
 
@@ -108,6 +109,7 @@ const EMPTY_FORM: FormData = {
   chargePointVendor: "",
   chargePointModel: "",
   registrationStatus: "Pending",
+  pricingMode: "fixed",
   feePerKwh: "0",
 };
 
@@ -142,6 +144,7 @@ export default function ChargePointsPage() {
       chargePointVendor: cp.chargePointVendor ?? "",
       chargePointModel: cp.chargePointModel ?? "",
       registrationStatus: cp.registrationStatus as FormData["registrationStatus"],
+      pricingMode: cp.pricingMode,
       feePerKwh: String(cp.feePerKwh),
     });
     setFormOpen(true);
@@ -158,7 +161,8 @@ export default function ChargePointsPage() {
           chargePointVendor: formData.chargePointVendor,
           chargePointModel: formData.chargePointModel,
           registrationStatus: formData.registrationStatus,
-          feePerKwh: fee,
+          pricingMode: formData.pricingMode,
+          feePerKwh: formData.pricingMode === "fixed" ? fee : 0,
         });
       } else {
         // Create
@@ -167,7 +171,8 @@ export default function ChargePointsPage() {
           chargePointVendor: formData.chargePointVendor.trim() || undefined,
           chargePointModel: formData.chargePointModel.trim() || undefined,
           registrationStatus: formData.registrationStatus,
-          feePerKwh: fee,
+          pricingMode: formData.pricingMode,
+          feePerKwh: formData.pricingMode === "fixed" ? fee : 0,
         });
       }
       await refetchList();
@@ -300,17 +305,45 @@ export default function ChargePointsPage() {
                         </Select.Popover>
                       </Select>
                     </div>
-                    <TextField fullWidth>
-                      <Label className="text-sm font-medium">电价（分/kWh）</Label>
-                      <Input
-                        type="number"
-                        min="0"
-                        step="1"
-                        placeholder="0"
-                        value={formData.feePerKwh}
-                        onChange={(e) => setFormData((f) => ({ ...f, feePerKwh: e.target.value }))}
-                      />
-                    </TextField>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm font-medium">计费模式</Label>
+                      <Select
+                        fullWidth
+                        selectedKey={formData.pricingMode}
+                        onSelectionChange={(key) =>
+                          setFormData((f) => ({
+                            ...f,
+                            pricingMode: String(key) as FormData["pricingMode"],
+                          }))
+                        }
+                      >
+                        <Select.Trigger>
+                          <Select.Value />
+                          <Select.Indicator />
+                        </Select.Trigger>
+                        <Select.Popover>
+                          <ListBox>
+                            <ListBox.Item id="fixed">固定电价</ListBox.Item>
+                            <ListBox.Item id="tou">峰谷电价</ListBox.Item>
+                          </ListBox>
+                        </Select.Popover>
+                      </Select>
+                    </div>
+                    {formData.pricingMode === "fixed" && (
+                      <TextField fullWidth>
+                        <Label className="text-sm font-medium">固定电价（分/kWh）</Label>
+                        <Input
+                          type="number"
+                          min="0"
+                          step="1"
+                          placeholder="0"
+                          value={formData.feePerKwh}
+                          onChange={(e) =>
+                            setFormData((f) => ({ ...f, feePerKwh: e.target.value }))
+                          }
+                        />
+                      </TextField>
+                    )}
                     {!isEdit && (
                       <p className="text-xs text-muted">
                         自动注册的充电桩默认状态为 Pending，需手动改为 Accepted 后才可正常上线。
@@ -365,7 +398,7 @@ export default function ChargePointsPage() {
                       .filter((c) => c.connectorId > 0)
                       .sort((a, b) => a.connectorId - b.connectorId)
                       .map((conn) => {
-                        const url = `${qrOrigin}/dashboard/charge?cpId=${qrTarget.id}&connector=${conn.connectorId}`;
+                        const url = `${qrOrigin}/charge?cpId=${qrTarget.id}&connector=${conn.connectorId}`;
                         return (
                           <div
                             key={conn.id}
@@ -401,7 +434,7 @@ export default function ChargePointsPage() {
               <Table.Column isRowHeader>标识符</Table.Column>
               {isAdmin && <Table.Column>品牌 / 型号</Table.Column>}
               {isAdmin && <Table.Column>注册状态</Table.Column>}
-              <Table.Column>电价（分/kWh）</Table.Column>
+              <Table.Column>计费模式</Table.Column>
               <Table.Column>最后发现</Table.Column>
               <Table.Column>状态</Table.Column>
               <Table.Column>接口</Table.Column>
@@ -482,8 +515,10 @@ export default function ChargePointsPage() {
                       </Chip>
                     </Table.Cell>
                   )}
-                  <Table.Cell className="tabular-nums">
-                    {cp.feePerKwh > 0 ? (
+                  <Table.Cell>
+                    {cp.pricingMode === "tou" ? (
+                      <span className="text-accent font-medium">峰谷电价</span>
+                    ) : cp.feePerKwh > 0 ? (
                       <span>
                         {cp.feePerKwh} 分
                         <span className="ml-1 text-xs text-muted">

apps/web/app/dashboard/charge/page.tsx

@@ -11,6 +11,7 @@ import dayjs from "@/lib/dayjs";
 import { EvCharger, Plug } from "lucide-react";
 import Link from "next/link";
 import { IdTagCard } from "@/components/id-tag-card";
+import router from "next/router";
 
 // ── Status maps (same as charge-points page) ────────────────────────────────
 
@@ -333,12 +334,8 @@ function ChargePageContent() {
           </div>
         </div>
         <div className="space-y-2">
-          <h2 className="text-2xl font-bold text-foreground">充电指令已发送</h2>
-          <p className="text-sm text-muted leading-relaxed">
-            充电桩正在响应，充电将自动开始
-            <br />
-            可在「充电记录」中查看实时进度
-          </p>
+          <h2 className="text-2xl font-bold text-foreground">正在启动中</h2>
+          <p className="text-sm text-muted leading-relaxed">充电桩正在响应，稍候将自动开始</p>
         </div>
         <div className="w-full max-w-xs rounded-2xl border border-border bg-surface p-4 text-left space-y-2">
           <div className="flex justify-between text-sm">
@@ -354,10 +351,12 @@ function ChargePageContent() {
             <span className="font-mono font-medium text-foreground">{selectedIdTag}</span>
           </div>
         </div>
-        <Button size="lg" onPress={resetAll} className="w-full max-w-xs">
-          <ThunderboltFill className="size-4" />
-          再次充电
-        </Button>
+        <Link href="/dashboard/transactions" className="w-full max-w-xs">
+          <Button size="lg" className="w-full">
+            <ThunderboltFill className="size-4" />
+            充电记录
+          </Button>
+        </Link>
       </div>
     );
   }
@@ -498,7 +497,9 @@ function ChargePageContent() {
                             /{cp.connectors.length} 空闲
                           </span>
                         </span>
-                        {cp.feePerKwh > 0 ? (
+                        {cp.pricingMode === "tou" ? (
+                          <span className="text-sm font-medium text-accent">峰谷电价</span>
+                        ) : cp.feePerKwh > 0 ? (
                           <span className="text-sm font-medium text-foreground">
                             ¥{(cp.feePerKwh / 100).toFixed(2)}
                             <span className="text-xs text-muted font-normal">/kWh</span>

apps/web/app/dashboard/pricing/page.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Spinner } from "@heroui/react";
+import { TagDollar, ChartLine } from "@gravity-ui/icons";
+import { api, type PriceTier, type TariffConfig, type TariffSlot } from "@/lib/api";
+
+// ── Tier meta (matches admin pricing editor colors) ───────────────────────────
+
+const TIER_META: Record<
+  PriceTier,
+  { label: string; sublabel: string; cellBg: string; text: string; border: string; dot: string }
+> = {
+  peak: {
+    label: "峰时",
+    sublabel: "高峰时段",
+    cellBg: "bg-orange-500/70",
+    text: "text-orange-500",
+    border: "border-orange-500/40",
+    dot: "bg-orange-500",
+  },
+  flat: {
+    label: "平时",
+    sublabel: "肩峰时段",
+    cellBg: "bg-neutral-400/45",
+    text: "text-neutral-400",
+    border: "border-neutral-400/40",
+    dot: "bg-neutral-400",
+  },
+  valley: {
+    label: "谷时",
+    sublabel: "低谷时段",
+    cellBg: "bg-blue-500/65",
+    text: "text-blue-500",
+    border: "border-blue-500/40",
+    dot: "bg-blue-500",
+  },
+};
+
+// ── Slot cards ────────────────────────────────────────────────────────────────
+
+function SlotCards({ tariff }: { tariff: TariffConfig }) {
+  const sorted = [...tariff.slots].sort((a, b) => a.start - b.start);
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {sorted.map((slot: TariffSlot, i) => {
+        const meta = TIER_META[slot.tier];
+        const p = tariff.prices[slot.tier];
+        const total = p.electricityPrice + p.serviceFee;
+        return (
+          <div key={i} className={`rounded-xl border bg-surface p-4 space-y-3 ${meta.border}`}>
+            {/* Header */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className={`size-2.5 rounded-sm ${meta.cellBg}`} />
+                <span className={`text-sm font-semibold ${meta.text}`}>{meta.label}</span>
+                <span className="text-xs text-muted">{meta.sublabel}</span>
+              </div>
+              <span className="tabular-nums text-xs font-medium text-muted">
+                {String(slot.start).padStart(2, "0")}:00 – {String(slot.end).padStart(2, "0")}:00
+              </span>
+            </div>
+            {/* Prices */}
+            <div className="divide-y divide-border rounded-lg border border-border overflow-hidden text-sm">
+              <div className="flex divide-x divide-border">
+                <div className="flex-1 flex items-center justify-between bg-surface-secondary px-3 py-2">
+                  <span className="text-muted">电费</span>
+                  <span className="tabular-nums font-medium text-foreground">
+                    ¥{p.electricityPrice.toFixed(4)}
+                    <span className="text-xs text-muted font-normal">/kWh</span>
+                  </span>
+                </div>
+                <div className="flex-1 flex items-center justify-between bg-surface-secondary px-3 py-2">
+                  <span className="text-muted">服务费</span>
+                  <span className="tabular-nums font-medium text-foreground">
+                    ¥{p.serviceFee.toFixed(4)}
+                    <span className="text-xs text-muted font-normal">/kWh</span>
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center justify-between bg-surface px-3 py-2">
+                <span className="font-semibold text-foreground">单价</span>
+                <span className={`tabular-nums font-bold ${meta.text}`}>
+                  ¥{total.toFixed(4)}
+                  <span className="text-xs font-normal">/kWh</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Page ─────────────────────────────────────────────────────────────────────
+
+export default function PricingPage() {
+  const {
+    data: tariff,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["tariff"],
+    queryFn: () => api.tariff.get(),
+  });
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex size-9 items-center justify-center rounded-xl bg-accent/10">
+          <TagDollar className="size-5 text-accent" />
+        </div>
+        <div>
+          <h1 className="text-xl font-bold text-foreground">电价标准</h1>
+          <p className="text-sm text-muted">今日实行的电价标准</p>
+        </div>
+      </div>
+
+      {isLoading && (
+        <div className="flex justify-center py-20">
+          <Spinner />
+        </div>
+      )}
+
+      {isError && (
+        <div className="rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">
+          电价信息加载失败，请刷新页面重试。
+        </div>
+      )}
+
+      {!isLoading && !isError && !tariff && (
+        <div className="rounded-2xl border border-border bg-surface px-6 py-12 text-center">
+          <TagDollar className="mx-auto mb-3 size-10 text-muted" />
+          <p className="font-medium text-foreground">尚未配置峰谷电价</p>
+          <p className="mt-1 text-sm text-muted">
+            各充电桩使用独立固定电价，请查看充电桩详情页了解具体费率。
+          </p>
+        </div>
+      )}
+
+      {tariff && (
+        <>
+          {/* Timeline + legend */}
+          <div className="rounded-xl border border-border bg-surface-secondary">
+            <div className="flex items-center gap-3 border-b border-border px-5 py-4">
+              <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
+                <ChartLine className="size-5 text-accent" />
+              </div>
+              <div>
+                <p className="text-sm font-semibold text-foreground">24 小时时段分布</p>
+                <p className="text-xs text-muted">实际扣费以交易完成时系统计算为准</p>
+              </div>
+            </div>
+
+            <div className="space-y-3 px-5 py-5">
+              {/* Tick labels */}
+              <div className="relative h-4">
+                {[0, 6, 12, 18, 24].map((h) => (
+                  <span
+                    key={h}
+                    className="absolute text-[10px] tabular-nums text-muted"
+                    style={{
+                      left: `${(h / 24) * 100}%`,
+                      transform:
+                        h === 24 ? "translateX(-100%)" : h > 0 ? "translateX(-50%)" : undefined,
+                    }}
+                  >
+                    {String(h).padStart(2, "0")}:00
+                  </span>
+                ))}
+              </div>
+
+              {/* Colored bar */}
+              <div className="flex h-12 overflow-hidden rounded-lg">
+                {(() => {
+                  const hourTier: PriceTier[] = Array(24).fill("flat" as PriceTier);
+                  for (const slot of tariff.slots) {
+                    for (let h = slot.start; h < slot.end; h++) hourTier[h] = slot.tier;
+                  }
+                  return hourTier.map((tier, h) => (
+                    <div
+                      key={h}
+                      className={`flex-1 ${TIER_META[tier].cellBg} transition-opacity hover:opacity-100 opacity-90 flex items-center justify-center`}
+                      title={`${String(h).padStart(2, "0")}:00 — ${TIER_META[tier].label}`}
+                    >
+                      <span className="hidden text-[10px] font-semibold text-white drop-shadow lg:block">
+                        {String(h).padStart(2, "0")}
+                      </span>
+                    </div>
+                  ));
+                })()}
+              </div>
+
+              {/* Legend */}
+              <div className="flex flex-wrap items-center gap-3 gap-y-1 pt-0.5">
+                {(["peak", "flat", "valley"] as PriceTier[]).map((tier) => {
+                  const meta = TIER_META[tier];
+                  const hours = tariff.slots
+                    .filter((s) => s.tier === tier)
+                    .reduce((acc, s) => acc + (s.end - s.start), 0);
+                  const total =
+                    tariff.prices[tier].electricityPrice + tariff.prices[tier].serviceFee;
+                  return (
+                    <div key={tier} className="flex items-center gap-1.5">
+                      <span className={`size-3 rounded-sm ${meta.cellBg}`} />
+                      <span className="text-xs text-muted">
+                        <span className={`font-semibold ${meta.text}`}>{meta.label}</span>
+                        <span className="ml-1 text-muted/70">
+                          {hours}h · ¥{total.toFixed(4)}/kWh
+                        </span>
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* Slot cards */}
+          <div className="space-y-3">
+            <h2 className="text-sm font-semibold text-foreground">各时段费率</h2>
+            <SlotCards tariff={tariff} />
+            <p className="text-xs text-muted">
+              合计费率 = 电费 + 服务费。实际扣费以交易完成时系统计算为准。
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

apps/web/app/dashboard/settings/pricing/page.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { useState, useCallback, useEffect, useRef } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Button, Input, Label, Spinner, TextField, toast } from "@heroui/react";
 import { TagDollar, Lock, ArrowRotateRight, ChartLine } from "@gravity-ui/icons";
 // TagDollar is used in the page header badge
 import { useSession } from "@/lib/auth-client";
+import { api } from "@/lib/api";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types  (designed for future backend API integration)
@@ -155,6 +157,14 @@ const DEFAULT_PRICES: Record<PriceTier, TierPricing> = {
 export default function PricingPage() {
   const { data: session } = useSession();
   const isAdmin = session?.user?.role === "admin";
+  const queryClient = useQueryClient();
+
+  // Load current tariff from API
+  const { data: remoteTariff, isLoading: loadingTariff } = useQuery({
+    queryKey: ["tariff"],
+    queryFn: () => api.tariff.get(),
+    enabled: isAdmin,
+  });
 
   const [schedule, setSchedule] = useState<PriceTier[]>([...DEFAULT_SCHEDULE]);
 
@@ -176,6 +186,26 @@ export default function PricingPage() {
   const [saving, setSaving] = useState(false);
   const [showPayload, setShowPayload] = useState(false);
 
+  // Populate state once remote tariff loads
+  useEffect(() => {
+    if (!remoteTariff) return;
+    // Reconstruct 24-element schedule from slots
+    const s: PriceTier[] = [];
+    for (let i = 0; i < 24; i++) s.push("flat");
+    for (const slot of remoteTariff.slots) {
+      for (let h = slot.start; h < slot.end; h++) s[h] = slot.tier as PriceTier;
+    }
+    setSchedule(s);
+    const p = remoteTariff.prices as Record<PriceTier, TierPricing>;
+    setPrices(p);
+    setPriceStrings({
+      peak: toStrings(p.peak),
+      valley: toStrings(p.valley),
+      flat: toStrings(p.flat),
+    });
+    setIsDirty(false);
+  }, [remoteTariff]);
+
   // ── Drag state via ref (avoids stale closures in global handler) ─────────
   const dragRef = useRef({
     active: false,
@@ -239,14 +269,16 @@ export default function PricingPage() {
     setIsDirty(false);
   };
 
-  // ── Save (stub: simulates API call) ─────────────────────────────────────
+  // ── Save ──────────────────────────────────────────────────────────────────────
   const handleSave = async () => {
     setSaving(true);
     try {
-      // Future: await apiFetch("/api/tariff", { method: "PUT", body: JSON.stringify(apiPayload) })
-      await new Promise<void>((r) => setTimeout(r, 700));
+      await api.tariff.put({ slots, prices });
       setIsDirty(false);
+      queryClient.invalidateQueries({ queryKey: ["tariff"] });
       toast.success("电价配置已保存");
+    } catch {
+      toast.warning("保存失败，请稍候重试");
     } finally {
       setSaving(false);
     }
@@ -269,6 +301,14 @@ export default function PricingPage() {
     );
   }
 
+  if (loadingTariff) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
   return (
     <div className="mx-auto max-w-3xl space-y-6">
       {/* ── Page header ───────────────────────────────────────────────────── */}
@@ -479,28 +519,6 @@ export default function PricingPage() {
         </ul>
       </div>
 
-      {/* ── API Payload preview ───────────────────────────────────────────── */}
-      <div className="overflow-hidden rounded-xl border border-border bg-surface-secondary">
-        <button
-          type="button"
-          className="flex w-full items-center justify-between px-5 py-4 text-left transition-colors hover:bg-surface-tertiary"
-          onClick={() => setShowPayload((v) => !v)}
-        >
-          <div>
-            <p className="text-sm font-semibold text-foreground">API 载荷预览</p>
-            <p className="text-xs text-muted">等效的后端 PUT /api/tariff 请求体</p>
-          </div>
-          <span className="shrink-0 text-xs text-muted">{showPayload ? "收起 ▲" : "展开 ▼"}</span>
-        </button>
-        {showPayload && (
-          <div className="border-t border-border px-5 py-4">
-            <pre className="overflow-x-auto rounded-lg bg-surface-tertiary p-4 text-xs leading-5 text-foreground">
-              {JSON.stringify(apiPayload, null, 2)}
-            </pre>
-          </div>
-        )}
-      </div>
-
       {/* ── Actions ───────────────────────────────────────────────────────── */}
       <div className="flex items-center justify-between pb-2">
         <Button variant="danger-soft" size="sm" onPress={handleReset} isDisabled={saving}>