feat(csms): 充电桩添加 deviceName 字段，区别于 identifier 用于区分设备

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

@@ -77,6 +77,7 @@ function relativeTime(iso: string): string {
 // ── Edit form type ─────────────────────────────────────────────────────────
 
 type EditForm = {
+  deviceName: string;
   chargePointVendor: string;
   chargePointModel: string;
   registrationStatus: "Accepted" | "Pending" | "Rejected";
@@ -96,6 +97,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
   const [editOpen, setEditOpen] = useState(false);
   const [editBusy, setEditBusy] = useState(false);
   const [editForm, setEditForm] = useState<EditForm>({
+    deviceName: "",
     chargePointVendor: "",
     chargePointModel: "",
     registrationStatus: "Pending",
@@ -122,6 +124,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
   const openEdit = () => {
     if (!cp) return;
     setEditForm({
+      deviceName: cp.deviceName ?? "",
       chargePointVendor: cp.chargePointVendor ?? "",
       chargePointModel: cp.chargePointModel ?? "",
       registrationStatus: cp.registrationStatus as EditForm["registrationStatus"],
@@ -142,6 +145,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
         registrationStatus: editForm.registrationStatus,
         pricingMode: editForm.pricingMode,
         feePerKwh: editForm.pricingMode === "fixed" ? fee : 0,
+        deviceName: editForm.deviceName.trim() || null,
       });
       await cpQuery.refetch();
       setEditOpen(false);
@@ -202,9 +206,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="space-y-1.5">
           <div className="flex flex-wrap items-center gap-2">
-            <h1 className="font-mono text-2xl font-semibold text-foreground">
-              {cp.chargePointIdentifier}
+            <h1 className="text-2xl font-semibold text-foreground">
+              {cp.deviceName ?? <span className="font-mono">{cp.chargePointIdentifier}</span>}
             </h1>
+            {isAdmin && cp.deviceName && (
+              <span className="font-mono text-sm text-muted">{cp.chargePointIdentifier}</span>
+            )}
             <Chip
               color={registrationColorMap[cp.registrationStatus] ?? "warning"}
               size="sm"
@@ -561,6 +568,16 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                   <Modal.Heading>编辑充电桩</Modal.Heading>
                 </Modal.Header>
                 <Modal.Body className="space-y-3">
+                  <TextField fullWidth>
+                    <Label className="text-sm font-medium">设备名称</Label>
+                    <Input
+                      placeholder="1号楼A区01号桩"
+                      value={editForm.deviceName}
+                      onChange={(e) =>
+                        setEditForm((f) => ({ ...f, deviceName: e.target.value }))
+                      }
+                    />
+                  </TextField>
                   <div className="grid grid-cols-2 gap-3">
                     <TextField fullWidth>
                       <Label className="text-sm font-medium">品牌</Label>

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

@@ -97,6 +97,7 @@ const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
 
 type FormData = {
   chargePointIdentifier: string;
+  deviceName: string;
   chargePointVendor: string;
   chargePointModel: string;
   registrationStatus: "Accepted" | "Pending" | "Rejected";
@@ -106,6 +107,7 @@ type FormData = {
 
 const EMPTY_FORM: FormData = {
   chargePointIdentifier: "",
+  deviceName: "",
   chargePointVendor: "",
   chargePointModel: "",
   registrationStatus: "Pending",
@@ -141,6 +143,7 @@ export default function ChargePointsPage() {
     setFormTarget(cp);
     setFormData({
       chargePointIdentifier: cp.chargePointIdentifier,
+      deviceName: cp.deviceName ?? "",
       chargePointVendor: cp.chargePointVendor ?? "",
       chargePointModel: cp.chargePointModel ?? "",
       registrationStatus: cp.registrationStatus as FormData["registrationStatus"],
@@ -163,6 +166,7 @@ export default function ChargePointsPage() {
           registrationStatus: formData.registrationStatus,
           pricingMode: formData.pricingMode,
           feePerKwh: formData.pricingMode === "fixed" ? fee : 0,
+          deviceName: formData.deviceName.trim() || null,
         });
       } else {
         // Create
@@ -173,6 +177,7 @@ export default function ChargePointsPage() {
           registrationStatus: formData.registrationStatus,
           pricingMode: formData.pricingMode,
           feePerKwh: formData.pricingMode === "fixed" ? fee : 0,
+          deviceName: formData.deviceName.trim() || undefined,
         });
       }
       await refetchList();
@@ -258,8 +263,18 @@ export default function ChargePointsPage() {
                         }
                       />
                     </TextField>
+                    <TextField fullWidth>
+                      <Label className="text-sm font-medium">设备名称</Label>
+                      <Input
+                        placeholder="1号楼A区01号桩"
+                        value={formData.deviceName}
+                        onChange={(e) =>
+                          setFormData((f) => ({ ...f, deviceName: e.target.value }))
+                        }
+                      />
+                    </TextField>
                     <div className="grid grid-cols-2 gap-3">
-                      <TextField fullWidth>
+                      <TextField fullWidth isReadOnly={isEdit}>
                         <Label className="text-sm font-medium">品牌</Label>
                         <Input
                           placeholder="ABB"
@@ -269,7 +284,7 @@ export default function ChargePointsPage() {
                           }
                         />
                       </TextField>
-                      <TextField fullWidth>
+                      <TextField fullWidth isReadOnly={isEdit}>
                         <Label className="text-sm font-medium">型号</Label>
                         <Input
                           placeholder="Terra AC"
@@ -381,7 +396,9 @@ export default function ChargePointsPage() {
               <Modal.Dialog className="sm:max-w-lg">
                 <Modal.CloseTrigger />
                 <Modal.Header>
-                  <Modal.Heading>{qrTarget?.chargePointIdentifier} — 充电二维码</Modal.Heading>
+                  <Modal.Heading>
+                    {qrTarget?.deviceName ?? qrTarget?.chargePointIdentifier} — 充电二维码
+                  </Modal.Heading>
                 </Modal.Header>
                 <Modal.Body className="space-y-4">
                   <p className="text-sm text-muted">
@@ -431,7 +448,7 @@ export default function ChargePointsPage() {
         <Table.ScrollContainer>
           <Table.Content aria-label="充电桩列表" className="min-w-200">
             <Table.Header>
-              <Table.Column isRowHeader>标识符</Table.Column>
+              <Table.Column isRowHeader>设备名称</Table.Column>
               {isAdmin && <Table.Column>品牌 / 型号</Table.Column>}
               {isAdmin && <Table.Column>注册状态</Table.Column>}
               <Table.Column>计费模式</Table.Column>
@@ -469,12 +486,19 @@ export default function ChargePointsPage() {
                                 : "bg-gray-300"
                             }`}
                           />
-                          <Link
-                            href={`/dashboard/charge-points/${cp.id}`}
-                            className="font-medium text-accent"
-                          >
-                            {cp.chargePointIdentifier}
-                          </Link>
+                          <div className="flex flex-col">
+                            <Link
+                              href={`/dashboard/charge-points/${cp.id}`}
+                              className="font-medium text-accent"
+                            >
+                              {cp.deviceName ?? cp.chargePointIdentifier}
+                            </Link>
+                            {isAdmin && cp.deviceName && (
+                              <span className="font-mono text-xs text-muted">
+                                {cp.chargePointIdentifier}
+                              </span>
+                            )}
+                          </div>
                         </div>
                       </Tooltip.Trigger>
                       <Tooltip.Content placement="start">
@@ -594,9 +618,14 @@ export default function ChargePointsPage() {
                                 <Modal.Body>
                                   <p className="text-sm text-muted">
                                     将删除充电桩{" "}
-                                    <span className="font-mono font-medium text-foreground">
-                                      {cp.chargePointIdentifier}
+                                    <span className="font-medium text-foreground">
+                                      {cp.deviceName ?? cp.chargePointIdentifier}
                                     </span>
+                                    {cp.deviceName && (
+                                      <span className="font-mono ml-1 text-xs text-muted">
+                                        ({cp.chargePointIdentifier})
+                                      </span>
+                                    )}
                                     及其所有连接器和充电记录，此操作不可恢复。
                                   </p>
                                 </Modal.Body>

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

@@ -222,6 +222,7 @@ function QrScanner({ onResult, onClose }: ScannerProps) {
 function ChargePageContent() {
   const searchParams = useSearchParams();
   const { data: sessionData } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
 
   const [step, setStep] = useState(1);
   const [selectedCpId, setSelectedCpId] = useState<string | null>(null);
@@ -234,6 +235,7 @@ function ChargePageContent() {
   const [startSnapshot, setStartSnapshot] = useState<{
     cpId: string;
     chargePointIdentifier: string;
+    deviceName: string | null;
     connectorId: number;
     idTag: string;
   } | null>(null);
@@ -348,6 +350,7 @@ function ChargePageContent() {
       setStartSnapshot({
         cpId: selectedCp.id,
         chargePointIdentifier: selectedCp.chargePointIdentifier,
+        deviceName: selectedCp.deviceName,
         connectorId: selectedConnectorId,
         idTag: selectedIdTag,
       });
@@ -424,7 +427,7 @@ function ChargePageContent() {
           <div className="flex justify-between text-sm">
             <span className="text-muted">充电桩</span>
             <span className="font-medium text-foreground">
-              {startSnapshot?.chargePointIdentifier ?? selectedCp?.chargePointIdentifier}
+              {startSnapshot?.deviceName ?? startSnapshot?.chargePointIdentifier ?? selectedCp?.deviceName ?? selectedCp?.chargePointIdentifier}
             </span>
           </div>
           <div className="flex justify-between text-sm">
@@ -617,12 +620,17 @@ function ChargePageContent() {
                             : "cursor-pointer border-border bg-surface hover:border-accent/60 hover:bg-accent/5 active:scale-[0.98]",
                       ].join(" ")}
                     >
-                      {/* Top row: identifier + status */}
+                      {/* Top row: name + status */}
                       <div className="flex items-start justify-between gap-2">
                         <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                           <span className="font-semibold text-foreground truncate leading-tight">
-                            {cp.chargePointIdentifier}
+                            {cp.deviceName ?? cp.chargePointIdentifier}
                           </span>
+                          {isAdmin && cp.deviceName && (
+                            <span className="font-mono text-xs text-muted truncate">
+                              {cp.chargePointIdentifier}
+                            </span>
+                          )}
                           {(cp.chargePointVendor || cp.chargePointModel) && (
                             <span className="text-xs text-muted truncate">
                               {[cp.chargePointVendor, cp.chargePointModel]
@@ -686,7 +694,7 @@ function ChargePageContent() {
               <EvCharger className="size-3.5 text-muted" />
               <span className="text-muted">充电桩</span>
               <span className="font-semibold text-foreground">
-                {selectedCp.chargePointIdentifier}
+                {selectedCp.deviceName ?? selectedCp.chargePointIdentifier}
               </span>
             </div>
           )}
@@ -773,7 +781,7 @@ function ChargePageContent() {
                 <EvCharger className="size-3.5 text-muted" />
                 <span className="text-muted">充电桩</span>
                 <span className="font-semibold text-foreground">
-                  {selectedCp.chargePointIdentifier}
+                  {selectedCp.deviceName ?? selectedCp.chargePointIdentifier}
                 </span>
               </div>
             )}

apps/web/app/dashboard/page.tsx

@@ -285,7 +285,7 @@ function TrendChart() {
 
 // ── RecentTransactions ────────────────────────────────────────────────────
 
-function RecentTransactions({ txns }: { txns: Transaction[] }) {
+function RecentTransactions({ txns, isAdmin = false }: { txns: Transaction[]; isAdmin?: boolean }) {
   if (txns.length === 0) {
     return <div className="py-8 text-center text-sm text-muted">暂无充电记录</div>;
   }
@@ -312,10 +312,15 @@ function RecentTransactions({ txns }: { txns: Transaction[] }) {
             </span>
             <div className="min-w-0 flex-1">
               <p className="truncate text-sm font-medium text-foreground">
-                {tx.chargePointIdentifier ?? "—"}
+                {tx.chargePointDeviceName ?? tx.chargePointIdentifier ?? "—"}
                 {tx.connectorNumber != null && (
                   <span className="ml-1 text-xs text-muted">#{tx.connectorNumber}</span>
                 )}
+                {isAdmin && tx.chargePointDeviceName && tx.chargePointIdentifier && (
+                  <span className="ml-1 font-mono text-xs text-muted">
+                    ({tx.chargePointIdentifier})
+                  </span>
+                )}
               </p>
               <p className="text-xs text-muted">
                 {tx.idTag}
@@ -347,7 +352,7 @@ function RecentTransactions({ txns }: { txns: Transaction[] }) {
 
 // ── ChargePointStatus ─────────────────────────────────────────────────────
 
-function ChargePointStatus({ cps }: { cps: ChargePoint[] }) {
+function ChargePointStatus({ cps, isAdmin }: { cps: ChargePoint[]; isAdmin: boolean }) {
   if (cps.length === 0) {
     return <div className="py-8 text-center text-sm text-muted">暂无充电桩</div>;
   }
@@ -369,11 +374,16 @@ function ChargePointStatus({ cps }: { cps: ChargePoint[] }) {
               />
               <div className="min-w-0 flex-1">
                 <p className="truncate text-sm font-medium text-foreground">
-                  {cp.chargePointIdentifier}
-                </p>
-                <p className="text-xs text-muted">
-                  {cp.chargePointModel ?? cp.chargePointVendor ?? "未知型号"}
+                  {cp.deviceName ?? cp.chargePointIdentifier}
                 </p>
+                {isAdmin && cp.deviceName && (
+                  <p className="font-mono text-xs text-muted">{cp.chargePointIdentifier}</p>
+                )}
+                {!(isAdmin && cp.deviceName) && (
+                  <p className="text-xs text-muted">
+                    {cp.chargePointModel ?? cp.chargePointVendor ?? "未知型号"}
+                  </p>
+                )}
               </div>
               <div className="shrink-0 text-right">
                 {online ? (
@@ -563,12 +573,12 @@ export default function DashboardPage() {
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-5">
           <div className="lg:col-span-2">
             <Panel title="充电桩状态">
-              <ChargePointStatus cps={data?.cps ?? []} />
+              <ChargePointStatus cps={data?.cps ?? []} isAdmin={isAdmin} />
             </Panel>
           </div>
           <div className="lg:col-span-3">
             <Panel title="最近充电会话">
-              <RecentTransactions txns={data?.txns ?? []} />
+              <RecentTransactions txns={data?.txns ?? []} isAdmin={isAdmin} />
             </Panel>
           </div>
         </div>

apps/web/app/dashboard/topology/topology-flow.tsx

@@ -17,6 +17,7 @@ import {
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { api, type ChargePoint, type ConnectorSummary } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
 import { Clock, EvCharger, Plug, Zap } from "lucide-react";
 
@@ -101,10 +102,10 @@ function CsmsHubNode({ data }: NodeProps) {
 
 // ── Charge Point Node ─────────────────────────────────────────────────────
 
-type ChargePointNodeData = { cp: ChargePoint; status: ConnectionStatus };
+type ChargePointNodeData = { cp: ChargePoint; status: ConnectionStatus; isAdmin: boolean };
 
 function ChargePointNode({ data }: NodeProps) {
-  const { cp, status } = data as ChargePointNodeData;
+  const { cp, status, isAdmin } = data as ChargePointNodeData;
   const cfg = STATUS_CONFIG[status];
   const hbText = cp.lastHeartbeatAt ? dayjs(cp.lastHeartbeatAt).fromNow() : "从未";
 
@@ -123,9 +124,14 @@ function ChargePointNode({ data }: NodeProps) {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1">
           <EvCharger className="size-4 shrink-0 text-muted" />
-          <span className="text-[13px] font-semibold tracking-tight text-foreground">
-            {cp.chargePointIdentifier}
-          </span>
+          <div className="flex flex-col">
+            <span className="text-[13px] font-semibold tracking-tight text-foreground">
+              {cp.deviceName ?? cp.chargePointIdentifier}
+            </span>
+            {isAdmin && cp.deviceName && (
+              <span className="font-mono text-[10px] text-muted">{cp.chargePointIdentifier}</span>
+            )}
+          </div>
         </div>
         <span
           className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium"
@@ -217,6 +223,7 @@ function slotWidth(cp: ChargePoint): number {
 function buildGraph(
   chargePoints: ChargePoint[],
   connectedIdentifiers: string[],
+  isAdmin: boolean,
 ): { nodes: Node[]; edges: Edge[] } {
   // Group into rows
   const rows: ChargePoint[][] = [];
@@ -267,7 +274,7 @@ function buildGraph(
         id: cp.id,
         type: "chargePoint",
         position: { x: cpX, y: cpY },
-        data: { cp, status },
+        data: { cp, status, isAdmin },
         draggable: true,
         width: CP_W,
         height: CP_H,
@@ -356,11 +363,14 @@ export default function TopologyFlow() {
     refetchInterval: 10_000,
   });
 
+  const { data: sessionData } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
+
   const connectedIds = connections?.connectedIdentifiers ?? [];
 
   const { nodes, edges } = useMemo(
-    () => buildGraph(chargePoints, connectedIds),
-    [chargePoints, connectedIds],
+    () => buildGraph(chargePoints, connectedIds, isAdmin),
+    [chargePoints, connectedIds, isAdmin],
   );
 
   if (isLoading) {

apps/web/app/dashboard/transactions/[id]/page.tsx

@@ -362,9 +362,14 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
               <dd className="font-mono text-sm text-foreground">{tx.idTag}</dd>
             </div>
             <div className="flex items-center justify-between gap-4 py-2">
-              <dt className="shrink-0 text-sm text-muted">桩编号</dt>
-              <dd className="font-mono text-sm text-foreground">
-                {tx.chargePointIdentifier ?? "—"}
+              <dt className="shrink-0 text-sm text-muted">充电桩</dt>
+              <dd className="text-right text-sm text-foreground">
+                <div className="flex flex-col items-end">
+                  <span>{tx.chargePointDeviceName ?? tx.chargePointIdentifier ?? "—"}</span>
+                  {isAdmin && tx.chargePointDeviceName && tx.chargePointIdentifier && (
+                    <span className="font-mono text-xs text-muted">{tx.chargePointIdentifier}</span>
+                  )}
+                </div>
               </dd>
             </div>
             <div className="flex items-center justify-between gap-4 py-2">

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

@@ -188,7 +188,14 @@ function TransactionsPageContent() {
                       {tx.id}
                     </Link>
                   </Table.Cell>
-                  <Table.Cell className="font-mono">{tx.chargePointIdentifier ?? "—"}</Table.Cell>
+                  <Table.Cell>
+                    <div className="flex flex-col">
+                      <span>{tx.chargePointDeviceName ?? tx.chargePointIdentifier ?? "—"}</span>
+                      {isAdmin && tx.chargePointDeviceName && tx.chargePointIdentifier && (
+                        <span className="font-mono text-xs text-muted">{tx.chargePointIdentifier}</span>
+                      )}
+                    </div>
+                  </Table.Cell>
                   <Table.Cell>{tx.connectorNumber ?? "—"}</Table.Cell>
                   <Table.Cell className="font-mono">{tx.idTag}</Table.Cell>
                   <Table.Cell>