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
2026-03-12 17:23:06 +08:00
parent 2638af3f7f
commit f7ee298060
17 changed files with 2729 additions and 89 deletions
--- a/apps/csms/drizzle/0003_milky_supreme_intelligence.sql
+++ b/apps/csms/drizzle/0003_milky_supreme_intelligence.sql
@@ -0,0 +1,17 @@
+CREATE TABLE "tariff" (
+	"id" varchar PRIMARY KEY NOT NULL,
+	"slots" jsonb NOT NULL,
+	"peak_electricity_price" integer DEFAULT 0 NOT NULL,
+	"peak_service_fee" integer DEFAULT 0 NOT NULL,
+	"valley_electricity_price" integer DEFAULT 0 NOT NULL,
+	"valley_service_fee" integer DEFAULT 0 NOT NULL,
+	"flat_electricity_price" integer DEFAULT 0 NOT NULL,
+	"flat_service_fee" integer DEFAULT 0 NOT NULL,
+	"is_active" boolean DEFAULT true NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "charge_point" ADD COLUMN "pricing_mode" varchar DEFAULT 'fixed' NOT NULL;--> statement-breakpoint
+ALTER TABLE "transaction" ADD COLUMN "electricity_fee" integer;--> statement-breakpoint
+ALTER TABLE "transaction" ADD COLUMN "service_fee" integer;
--- a/apps/csms/drizzle/meta/0003_snapshot.json
+++ b/apps/csms/drizzle/meta/0003_snapshot.json
--- a/apps/csms/drizzle/meta/_journal.json
+++ b/apps/csms/drizzle/meta/_journal.json
@@ -22,6 +22,13 @@
      "when": 1773293422460,
      "tag": "0002_sweet_the_professor",
      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "7",
+      "when": 1773307380017,
+      "tag": "0003_milky_supreme_intelligence",
+      "breakpoints": true
    }
  ]
 }
--- a/apps/csms/src/db/ocpp-schema.ts
+++ b/apps/csms/src/db/ocpp-schema.ts
@@ -69,9 +69,17 @@ export const chargePoint = pgTable('charge_point', {
  /**
   * 电价（单位：分/kWh，即 0.01 CNY/kWh）
   * 交易结束时按实际用电量从储值卡扣费：fee = ceil(energyWh * feePerKwh / 1000)
-   * 默认为 0，即不计费
+   * 默认为 0，即不计费。仅在 pricingMode = 'fixed' 时生效。
   */
  feePerKwh: integer('fee_per_kwh').notNull().default(0),
+  /**
+   * 计费模式
+   * fixed = 使用本桩固定电价 feePerKwh
+   * tou   = 使用系统峰谷电价配置
+   */
+  pricingMode: varchar('pricing_mode', { enum: ['fixed', 'tou'] })
+    .notNull()
+    .default('fixed'),
  createdAt: timestamp('created_at', { withTimezone: true })
    .notNull()
    .defaultNow(),
@@ -385,6 +393,15 @@ export const transaction = pgTable(
     * null 表示未计费（如免费充电桩或交易异常终止）
     */
    chargeAmount: integer('charge_amount'),
+    /**
+     * 电费部分（单位：分）= 各时段（电价 × 用电量）之和
+     * 注：chargeAmount = electricityFee + serviceFee
+     */
+    electricityFee: integer('electricity_fee'),
+    /**
+     * 服务费部分（单位：分）= 各时段（服务费 × 用电量）之和
+     */
+    serviceFee: integer('service_fee'),
    /**
     * 关联的预约 ID（若本次充电由预约触发）
     * StartTransaction.req.reservationId（optional）
--- a/apps/csms/src/db/schema.ts
+++ b/apps/csms/src/db/schema.ts
@@ -1,2 +1,4 @@
 export * from './auth-schema.ts'
 export * from './ocpp-schema.ts'
+export * from './tariff-schema.ts'
+export * from './tariff-schema.ts'
--- a/apps/csms/src/db/tariff-schema.ts
+++ b/apps/csms/src/db/tariff-schema.ts
@@ -0,0 +1,58 @@
+import { pgTable, timestamp, varchar, integer, jsonb, boolean } from "drizzle-orm/pg-core";
+
+// ---------------------------------------------------------------------------
+// 峰谷电价配置 / Time-of-Use Tariff
+// ---------------------------------------------------------------------------
+
+/**
+ * 时段-电价类型映射
+ * "peak" 峰时 | "valley" 谷时 | "flat" 平时
+ */
+export type PriceTier = "peak" | "valley" | "flat";
+
+/**
+ * 电价时段（紧凑格式）
+ * start：起始小时（含，0–23）
+ * end：结束小时（不含，1–24）
+ * 示例：{ start: 8, end: 12, tier: "peak" } 表示 08:00–12:00 为峰时
+ */
+export type TariffSlot = {
+  start: number;
+  end: number;
+  tier: PriceTier;
+};
+
+/**
+ * 峰谷电价配置表（单例，通过 isActive 标记当前生效的版本）
+ *
+ * 价格以整数"分"存储（1 分 = 0.01 CNY），精度 0.01 元/kWh：
+ *   fen = Math.round(CNY * 100)
+ *   CNY = fen / 100
+ *
+ * 时段列表存储为 JSONB（TariffSlot[]）。
+ * 若无任何 isActive=true 的记录，计费逻辑将回退到 chargePoint.feePerKwh 平均电价。
+ */
+export const tariff = pgTable("tariff", {
+  id: varchar("id").primaryKey(),
+  /** 24 小时时段列表（紧凑格式，TariffSlot[]） */
+  slots: jsonb("slots").notNull().$type<TariffSlot[]>(),
+  /** 峰时电价（分/kWh） */
+  peakElectricityPrice: integer("peak_electricity_price").notNull().default(0),
+  /** 峰时服务费（分/kWh） */
+  peakServiceFee: integer("peak_service_fee").notNull().default(0),
+  /** 谷时电价（分/kWh） */
+  valleyElectricityPrice: integer("valley_electricity_price").notNull().default(0),
+  /** 谷时服务费（分/kWh） */
+  valleyServiceFee: integer("valley_service_fee").notNull().default(0),
+  /** 平时电价（分/kWh） */
+  flatElectricityPrice: integer("flat_electricity_price").notNull().default(0),
+  /** 平时服务费（分/kWh） */
+  flatServiceFee: integer("flat_service_fee").notNull().default(0),
+  /** 是否为当前生效配置（同时只允许一条 isActive=true） */
+  isActive: boolean("is_active").notNull().default(true),
+  createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+  updatedAt: timestamp("updated_at", { withTimezone: true })
+    .notNull()
+    .defaultNow()
+    .$onUpdate(() => new Date()),
+});
--- a/apps/csms/src/index.ts
+++ b/apps/csms/src/index.ts
@@ -15,6 +15,7 @@ import transactionRoutes from './routes/transactions.ts'
 import idTagRoutes from './routes/id-tags.ts'
 import userRoutes from './routes/users.ts'
 import setupRoutes from './routes/setup.ts'
+import tariffRoutes from './routes/tariff.ts'

 import type { HonoEnv } from './types/hono.ts'

@@ -41,7 +42,7 @@ app.use(
  '/api/*',
  cors({
    origin: process.env.WEB_ORIGIN ?? '*',
-    allowMethods: ['GET', 'POST', 'PATCH', 'DELETE', 'OPTIONS'],
+    allowMethods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization'],
    exposeHeaders: ['Content-Length'],
    credentials: true,
@@ -58,6 +59,7 @@ app.route('/api/transactions', transactionRoutes)
 app.route('/api/id-tags', idTagRoutes)
 app.route('/api/users', userRoutes)
 app.route('/api/setup', setupRoutes)
+app.route('/api/tariff', tariffRoutes)

 app.get('/api', (c) => {
  const user = c.get('user')
--- a/apps/csms/src/ocpp/actions/stop-transaction.ts
+++ b/apps/csms/src/ocpp/actions/stop-transaction.ts
@@ -1,7 +1,10 @@
-import { eq, sql } from "drizzle-orm";
+import { asc, eq, sql } from "drizzle-orm";
 import dayjs from "dayjs";
 import { useDrizzle } from "@/lib/db.js";
 import { chargePoint, connector, idTag, meterValue, transaction } from "@/db/schema.js";
+import { tariff } from "@/db/schema.js";
+import type { SampledValue } from "@/db/schema.js";
+import type { TariffSlot, PriceTier } from "@/db/tariff-schema.ts";
 import type {
  StopTransactionRequest,
  StopTransactionResponse,
@@ -64,20 +67,103 @@ export async function handleStopTransaction(

  const energyWh = payload.meterStop - tx.startMeterValue;

-  // Deduct balance from the idTag based on actual energy consumed
+  // Load active tariff and charge point fee
  const [cp] = await db
-    .select({ feePerKwh: chargePoint.feePerKwh })
+    .select({ feePerKwh: chargePoint.feePerKwh, pricingMode: chargePoint.pricingMode })
    .from(chargePoint)
    .where(eq(chargePoint.id, tx.chargePointId))
    .limit(1);

-  const feeFen =
-    cp && cp.feePerKwh > 0 && energyWh > 0 ? Math.ceil((energyWh * cp.feePerKwh) / 1000) : 0;
+  const [activeTariff] = await db.select().from(tariff).where(eq(tariff.isActive, true)).limit(1);
+
+  let electricityFen: number | null = null;
+  let serviceFeeFen: number | null = null;
+  let feeFen = 0;
+
+  if (activeTariff && cp?.pricingMode === 'tou' && energyWh > 0 && tx.startTimestamp) {
+    const stopTs = dayjs(payload.timestamp).toDate();
+    const slots = activeTariff.slots as TariffSlot[];
+
+    const priceMap: Record<PriceTier, { electricity: number; service: number }> = {
+      peak: {
+        electricity: activeTariff.peakElectricityPrice,
+        service: activeTariff.peakServiceFee,
+      },
+      valley: {
+        electricity: activeTariff.valleyElectricityPrice,
+        service: activeTariff.valleyServiceFee,
+      },
+      flat: {
+        electricity: activeTariff.flatElectricityPrice,
+        service: activeTariff.flatServiceFee,
+      },
+    };
+
+    // Build checkpoints from intermediate meter value readings.
+    // Each checkpoint is (timestamp, cumulativeWh), sorted ascending.
+    // Using actual intermediate readings lets each interval's known energy delta
+    // be assigned to its true time slot rather than assuming uniform charging rate.
+    const intervalReadings = await db
+      .select({ timestamp: meterValue.timestamp, sampledValues: meterValue.sampledValues })
+      .from(meterValue)
+      .where(eq(meterValue.transactionId, tx.id))
+      .orderBy(asc(meterValue.timestamp));
+
+    const checkpoints: { ts: Date; wh: number }[] = [
+      { ts: tx.startTimestamp, wh: tx.startMeterValue },
+    ];
+    for (const mv of intervalReadings) {
+      const svList = mv.sampledValues as SampledValue[];
+      // Per OCPP 1.6 §7.17: absent measurand defaults to Energy.Active.Import.Register
+      const energySv = svList.find(
+        (sv) => (!sv.measurand || sv.measurand === "Energy.Active.Import.Register") && !sv.phase,
+      );
+      if (!energySv) continue;
+      const rawVal = parseFloat(energySv.value);
+      if (isNaN(rawVal)) continue;
+      const wh = (energySv.unit ?? "Wh") === "kWh" ? rawVal * 1000 : rawVal;
+      checkpoints.push({ ts: mv.timestamp, wh });
+    }
+    checkpoints.push({ ts: stopTs, wh: payload.meterStop });
+
+    // For each interval, compute actual energy delta and distribute across tiers
+    // by walking minute-by-minute only within that interval.
+    const tierEnergyWh: Record<PriceTier, number> = { peak: 0, valley: 0, flat: 0 };
+    for (let i = 0; i + 1 < checkpoints.length; i++) {
+      const { ts: t1, wh: wh1 } = checkpoints[i];
+      const { ts: t2, wh: wh2 } = checkpoints[i + 1];
+      const deltaWh = Math.max(0, wh2 - wh1);
+      if (deltaWh === 0) continue;
+      const fractions = calcTierFractions(t1, t2, slots);
+      for (const tier of ["peak", "valley", "flat"] as PriceTier[]) {
+        tierEnergyWh[tier] += deltaWh * fractions[tier];
+      }
+    }
+
+    let elecFen = 0;
+    let svcFen = 0;
+    for (const tier of ["peak", "valley", "flat"] as PriceTier[]) {
+      const energyKwh = tierEnergyWh[tier] / 1000;
+      elecFen += energyKwh * priceMap[tier].electricity;
+      svcFen += energyKwh * priceMap[tier].service;
+    }
+    electricityFen = Math.ceil(elecFen);
+    serviceFeeFen = Math.ceil(svcFen);
+    feeFen = electricityFen + serviceFeeFen;
+  } else if (cp && cp.feePerKwh > 0 && energyWh > 0) {
+    // Fallback: flat rate per charge point
+    feeFen = Math.ceil((energyWh * cp.feePerKwh) / 1000);
+  }

  // Always record the charge amount (0 if free)
  await db
    .update(transaction)
-    .set({ chargeAmount: feeFen, updatedAt: dayjs().toDate() })
+    .set({
+      chargeAmount: feeFen,
+      electricityFee: electricityFen,
+      serviceFee: serviceFeeFen,
+      updatedAt: dayjs().toDate(),
+    })
    .where(eq(transaction.id, tx.id));

  if (feeFen > 0) {
@@ -92,7 +178,8 @@ export async function handleStopTransaction(

  console.log(
    `[OCPP] StopTransaction txId=${payload.transactionId} ` +
-      `reason=${payload.reason ?? "none"} energyWh=${energyWh} feeFen=${feeFen}`,
+      `reason=${payload.reason ?? "none"} energyWh=${energyWh} ` +
+      `feeFen=${feeFen} (elec=${electricityFen ?? "flat"} svc=${serviceFeeFen ?? "-"})`,
  );

  // Resolve idTagInfo for the stop tag if provided (no balance check — charging already occurred)
@@ -100,3 +187,48 @@ export async function handleStopTransaction(

  return { idTagInfo };
 }
+
+// ── helpers ────────────────────────────────────────────────────────────────
+
+/**
+ * Given a charging session's start/stop timestamps and the active tariff slots,
+ * returns the fraction of total session duration spent in each price tier.
+ * Fractions sum to 1.0.
+ *
+ * Strategy: walk minute-by-minute over the session and bucket each minute into
+ * its tier. Using minutes keeps the implementation simple and introduces at most
+ * 1 minute of rounding error (negligible for billing amounts in fen).
+ */
+function calcTierFractions(
+  start: Date,
+  stop: Date,
+  slots: TariffSlot[],
+): Record<PriceTier, number> {
+  const totals: Record<PriceTier, number> = { peak: 0, valley: 0, flat: 0 };
+
+  // Build a 24-element hour → tier lookup
+  const hourTier: PriceTier[] = [];
+  for (let i = 0; i < 24; i++) hourTier.push("flat");
+  for (const slot of slots) {
+    for (let h = slot.start; h < slot.end; h++) {
+      hourTier[h] = slot.tier;
+    }
+  }
+
+  const startMs = start.getTime();
+  const stopMs = stop.getTime();
+  const totalMinutes = Math.max(1, Math.round((stopMs - startMs) / 60_000));
+
+  for (let m = 0; m < totalMinutes; m++) {
+    const t = new Date(startMs + m * 60_000);
+    // 北京时间 = UTC + 8h，峰谷时段以北京时间为准
+    const hourBeijing = Math.floor((t.getUTCHours() * 60 + t.getUTCMinutes() + 480) / 60) % 24;
+    totals[hourTier[hourBeijing]]++;
+  }
+
+  return {
+    peak: totals.peak / totalMinutes,
+    valley: totals.valley / totalMinutes,
+    flat: totals.flat / totalMinutes,
+  };
+}
--- a/apps/csms/src/routes/charge-points.ts
+++ b/apps/csms/src/routes/charge-points.ts
@@ -69,6 +69,7 @@ app.post("/", async (c) => {
    chargePointModel?: string;
    registrationStatus?: "Accepted" | "Pending" | "Rejected";
    feePerKwh?: number;
+    pricingMode?: "fixed" | "tou";
  }>();

  if (!body.chargePointIdentifier?.trim()) {
@@ -77,6 +78,9 @@ app.post("/", async (c) => {
  if (body.feePerKwh !== undefined && (!Number.isInteger(body.feePerKwh) || body.feePerKwh < 0)) {
    return c.json({ error: "feePerKwh must be a non-negative integer" }, 400);
  }
+  if (body.pricingMode !== undefined && !['fixed', 'tou'].includes(body.pricingMode)) {
+    return c.json({ error: "pricingMode must be 'fixed' or 'tou'" }, 400);
+  }

  const [created] = await db
    .insert(chargePoint)
@@ -87,6 +91,7 @@ app.post("/", async (c) => {
      chargePointModel: body.chargePointModel?.trim() || "Unknown",
      registrationStatus: body.registrationStatus ?? "Pending",
      feePerKwh: body.feePerKwh ?? 0,
+      pricingMode: body.pricingMode ?? "fixed",
    })
    .returning()
    .catch((err: Error) => {
@@ -125,6 +130,7 @@ app.patch("/:id", async (c) => {
  const id = c.req.param("id");
  const body = await c.req.json<{
    feePerKwh?: number;
+    pricingMode?: "fixed" | "tou";
    registrationStatus?: string;
    chargePointVendor?: string;
    chargePointModel?: string;
@@ -132,6 +138,7 @@ app.patch("/:id", async (c) => {

  const set: {
    feePerKwh?: number;
+    pricingMode?: "fixed" | "tou";
    registrationStatus?: "Accepted" | "Pending" | "Rejected";
    chargePointVendor?: string;
    chargePointModel?: string;
@@ -152,6 +159,12 @@ app.patch("/:id", async (c) => {
  }
  if (body.chargePointVendor !== undefined) set.chargePointVendor = body.chargePointVendor.trim() || "Unknown";
  if (body.chargePointModel !== undefined) set.chargePointModel = body.chargePointModel.trim() || "Unknown";
+  if (body.pricingMode !== undefined) {
+    if (!['fixed', 'tou'].includes(body.pricingMode)) {
+      return c.json({ error: "pricingMode must be 'fixed' or 'tou'" }, 400);
+    }
+    set.pricingMode = body.pricingMode;
+  }

  const [updated] = await db
    .update(chargePoint)
--- a/apps/csms/src/routes/tariff.ts
+++ b/apps/csms/src/routes/tariff.ts
@@ -0,0 +1,98 @@
+import { Hono } from "hono";
+import { eq } from "drizzle-orm";
+import { useDrizzle } from "@/lib/db.js";
+import { tariff } from "@/db/schema.js";
+import type { HonoEnv } from "@/types/hono.ts";
+import type { PriceTier, TariffSlot } from "@/db/tariff-schema.ts";
+
+const app = new Hono<HonoEnv>();
+
+/** GET /api/tariff  —  返回当前生效的电价配置（任何已登录用户） */
+app.get("/", async (c) => {
+  const db = useDrizzle();
+  const [row] = await db.select().from(tariff).where(eq(tariff.isActive, true)).limit(1);
+
+  if (!row) return c.json(null);
+
+  return c.json(rowToPayload(row));
+});
+
+/** PUT /api/tariff  —  更新/初始化电价配置（仅管理员） */
+app.put("/", async (c) => {
+  const currentUser = c.get("user");
+  if (currentUser?.role !== "admin") {
+    return c.json({ error: "Forbidden" }, 403);
+  }
+
+  type TierPricing = { electricityPrice: number; serviceFee: number };
+  type TariffBody = {
+    slots: TariffSlot[];
+    prices: Record<PriceTier, TierPricing>;
+  };
+
+  let body: TariffBody;
+  try {
+    body = await c.req.json<TariffBody>();
+  } catch {
+    return c.json({ error: "Invalid JSON" }, 400);
+  }
+
+  const { slots, prices } = body;
+  if (!Array.isArray(slots) || !prices) {
+    return c.json({ error: "Missing slots or prices" }, 400);
+  }
+
+  const db = useDrizzle();
+
+  // 停用旧配置
+  await db.update(tariff).set({ isActive: false });
+
+  const [row] = await db
+    .insert(tariff)
+    .values({
+      id: crypto.randomUUID(),
+      slots,
+      peakElectricityPrice: fenFromCny(prices.peak?.electricityPrice),
+      peakServiceFee: fenFromCny(prices.peak?.serviceFee),
+      valleyElectricityPrice: fenFromCny(prices.valley?.electricityPrice),
+      valleyServiceFee: fenFromCny(prices.valley?.serviceFee),
+      flatElectricityPrice: fenFromCny(prices.flat?.electricityPrice),
+      flatServiceFee: fenFromCny(prices.flat?.serviceFee),
+      isActive: true,
+    })
+    .returning();
+
+  return c.json(rowToPayload(row));
+});
+
+// ── helpers ────────────────────────────────────────────────────────────────
+
+function fenFromCny(cny: number | undefined): number {
+  if (typeof cny !== "number" || isNaN(cny)) return 0;
+  return Math.round(cny * 100);
+}
+
+function rowToPayload(row: typeof tariff.$inferSelect) {
+  return {
+    id: row.id,
+    slots: row.slots as TariffSlot[],
+    prices: {
+      peak: {
+        electricityPrice: row.peakElectricityPrice / 100,
+        serviceFee: row.peakServiceFee / 100,
+      },
+      valley: {
+        electricityPrice: row.valleyElectricityPrice / 100,
+        serviceFee: row.valleyServiceFee / 100,
+      },
+      flat: {
+        electricityPrice: row.flatElectricityPrice / 100,
+        serviceFee: row.flatServiceFee / 100,
+      },
+    },
+    createdAt: row.createdAt,
+    updatedAt: row.updatedAt,
+  };
+}
+
+export default app;
--- a/apps/web/app/dashboard/charge-points/[id]/page.tsx
+++ b/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)}>
--- a/apps/web/app/dashboard/charge-points/page.tsx
+++ b/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>
+                    <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>
+                        <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 }))}
+                          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">
--- a/apps/web/app/dashboard/charge/page.tsx
+++ b/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">
+        <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>
--- a/apps/web/app/dashboard/pricing/page.tsx
+++ b/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>
+  );
+}
--- a/apps/web/app/dashboard/settings/pricing/page.tsx
+++ b/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}>
--- a/apps/web/components/sidebar.tsx
+++ b/apps/web/components/sidebar.tsx
@@ -20,19 +20,20 @@ import { useSession } from "@/lib/auth-client";

 const chargeItems = [
  { href: "/dashboard/charge", label: "立即充电", icon: ThunderboltFill, adminOnly: false },
+  { href: "/dashboard/pricing", label: "电价标准", icon: TagDollar, adminOnly: false },
 ];

 const navItems = [
  { href: "/dashboard", label: "概览", icon: Thunderbolt, exact: true, adminOnly: false },
  { href: "/dashboard/charge-points", label: "充电桩", icon: PlugConnection, adminOnly: false },
-  { href: "/dashboard/transactions", label: "充电记录", icon: ListCheck, adminOnly: false },
  { href: "/dashboard/id-tags", label: "储值卡", icon: CreditCard, adminOnly: false },
+  { href: "/dashboard/transactions", label: "充电记录", icon: ListCheck, adminOnly: false },
+  { href: "/dashboard/settings/pricing", label: "峰谷电价", icon: TagDollar, adminOnly: true },
  { href: "/dashboard/users", label: "用户管理", icon: Person, adminOnly: true },
 ];

 const settingsItems = [
  { href: "/dashboard/settings/user", label: "账号设置", icon: Gear, adminOnly: false },
-  { href: "/dashboard/settings/pricing", label: "峰谷电价", icon: TagDollar, adminOnly: true },
 ];

 function NavContent({
@@ -114,7 +115,9 @@ function NavContent({
        <p className="mb-1 mt-3 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
          设置
        </p>
-        {settingsItems.filter((item) => !item.adminOnly || isAdmin).map((item) => {
+        {settingsItems
+          .filter((item) => !item.adminOnly || isAdmin)
+          .map((item) => {
            const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
            const Icon = item.icon;
            return (
--- a/apps/web/lib/api.ts
+++ b/apps/web/lib/api.ts
@@ -77,6 +77,7 @@ export type ChargePoint = {
  lastHeartbeatAt: string | null;
  lastBootNotificationAt: string | null;
  feePerKwh: number;
+  pricingMode: "fixed" | "tou";
  connectors: ConnectorSummary[];
  chargePointStatus: string | null;
  chargePointErrorCode: string | null;
@@ -98,6 +99,7 @@ export type ChargePointDetail = {
  lastHeartbeatAt: string | null;
  lastBootNotificationAt: string | null;
  feePerKwh: number;
+  pricingMode: "fixed" | "tou";
  createdAt: string;
  updatedAt: string;
  connectors: ConnectorDetail[];
@@ -121,6 +123,8 @@ export type Transaction = {
  stopIdTag: string | null;
  stopReason: string | null;
  chargeAmount: number | null;
+  electricityFee: number | null;
+  serviceFee: number | null;
 };

 export type IdTag = {
@@ -154,6 +158,29 @@ export type PaginatedTransactions = {
  totalPages: number;
 };

+export type PriceTier = "peak" | "valley" | "flat";
+
+export type TariffSlot = {
+  start: number;
+  end: number;
+  tier: PriceTier;
+};
+
+export type TierPricing = {
+  /** 电价（元/kWh） */
+  electricityPrice: number;
+  /** 服务费（元/kWh） */
+  serviceFee: number;
+};
+
+export type TariffConfig = {
+  id?: string;
+  slots: TariffSlot[];
+  prices: Record<PriceTier, TierPricing>;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
 // ── API functions ──────────────────────────────────────────────────────────

 export type ChartRange = "30d" | "7d" | "24h";
@@ -181,6 +208,7 @@ export const api = {
      chargePointModel?: string;
      registrationStatus?: "Accepted" | "Pending" | "Rejected";
      feePerKwh?: number;
+      pricingMode?: "fixed" | "tou";
    }) =>
      apiFetch<ChargePoint>("/api/charge-points", {
        method: "POST",
@@ -190,6 +218,7 @@ export const api = {
      id: string,
      data: {
        feePerKwh?: number;
+        pricingMode?: "fixed" | "tou";
        registrationStatus?: "Accepted" | "Pending" | "Rejected";
        chargePointVendor?: string;
        chargePointModel?: string;
@@ -287,4 +316,9 @@ export const api = {
    create: (data: { name: string; email: string; username: string; password: string }) =>
      apiFetch<{ success: boolean }>("/api/setup", { method: "POST", body: JSON.stringify(data) }),
  },
+  tariff: {
+    get: () => apiFetch<TariffConfig | null>("/api/tariff"),
+    put: (data: { slots: TariffSlot[]; prices: Record<PriceTier, TierPricing> }) =>
+      apiFetch<TariffConfig>("/api/tariff", { method: "PUT", body: JSON.stringify(data) }),
+  },
 };