feat: 添加信息和指标组件以增强充电订单和计量信息的展示

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

@@ -16,10 +16,11 @@ import {
   Table,
   TextField,
 } from "@heroui/react";
-import { ArrowLeft, Pencil, PlugConnection, ArrowRotateRight } from "@gravity-ui/icons";
+import { ArrowLeft, Pencil, ArrowRotateRight } from "@gravity-ui/icons";
 import { api } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
+import InfoSection from "@/components/info-section";
 import { Plug } from "lucide-react";
 
 // ── Status maps ────────────────────────────────────────────────────────────
@@ -270,8 +271,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
       <div className="grid gap-4 md:grid-cols-2">
         {/* Device info — admin only */}
         {isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
+          <InfoSection title="设备信息">
             <dl className="divide-y divide-border">
               {[
                 { label: "品牌", value: cp.chargePointVendor },
@@ -291,13 +291,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </div>
               ))}
             </dl>
-          </div>
+          </InfoSection>
         )}
 
         {/* Operation info — admin only */}
         {isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
+          <InfoSection title="运行配置">
             <dl className="divide-y divide-border">
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">注册状态</dt>
@@ -369,13 +368,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </dd>
               </div>
             </dl>
-          </div>
+          </InfoSection>
         )}
 
         {/* Fee info — user only */}
         {!isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">电价信息</h2>
+          <InfoSection title="电价信息">
             <dl className="divide-y divide-border">
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">单位电价</dt>
@@ -404,7 +402,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </dd>
               </div>
             </dl>
-          </div>
+          </InfoSection>
         )}
       </div>