From c2c70be3b3d39d5c1bda57f911126bce416caae4 Mon Sep 17 00:00:00 2001
From: 12451 <12451@example.com>
Date: Thu, 2 Jul 2026 20:37:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=A1=E7=89=87=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E5=AD=97=E6=AE=B5=EF=BC=8C=E4=B8=AD=E6=96=87?=
 =?UTF-8?q?=E5=90=8D=E5=AD=97=EF=BC=8C=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 software/web/src/api/devices.ts               |  1 +
 .../web/src/pages/devices/CabinetGrid.tsx     | 47 ++++++++++++-------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/software/web/src/api/devices.ts b/software/web/src/api/devices.ts
index 4d68666..8c5d9b8 100644
--- a/software/web/src/api/devices.ts
+++ b/software/web/src/api/devices.ts
@@ -22,6 +22,7 @@ export interface Cabinet {
   imei: string;
   auth_str?: string;
   name?: string;
+  address?: string;
   status: number;
 }
 
diff --git a/software/web/src/pages/devices/CabinetGrid.tsx b/software/web/src/pages/devices/CabinetGrid.tsx
index e69e411..8ae88c8 100644
--- a/software/web/src/pages/devices/CabinetGrid.tsx
+++ b/software/web/src/pages/devices/CabinetGrid.tsx
@@ -6,17 +6,13 @@
 import { useNavigate } from 'react-router-dom';
 import {
   Card,
-  Grid,
   Tag,
   Spin,
   Empty,
 } from '@arco-design/web-react';
-import { IconDesktop } from '@arco-design/web-react/icon';
+import { IconLocation } from '@arco-design/web-react/icon';
 import type { Cabinet } from '@/api/devices';
 
-const Row = Grid.Row;
-const Col = Grid.Col;
-
 /** 柜子状态映射 */
 const STATUS_MAP: Record<number, { label: string; color: string }> = {
   0: { label: '离线', color: 'gray' },
@@ -40,32 +36,51 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
       ) : cabinets.length === 0 ? (
         <Empty description="暂无设备" />
       ) : (
-        <Row gutter={[16, 16]}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
           {cabinets.map((cab) => {
             const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray' };
             return (
-              <Col key={cab.id} xs={24} sm={12} md={8} lg={6}>
                 <Card
+                  key={cab.id}
                   hoverable
                   size="small"
                   onClick={() => navigate(`/devices/cabinet/${cab.id}`)}
                   style={{ cursor: 'pointer' }}
                 >
-                  <div style={{ textAlign: 'center' }}>
-                    <IconDesktop style={{ fontSize: 32, color: 'var(--color-primary-6)', marginBottom: 8 }} />
-                    <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                      {cab.abstract_id}
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    {/* 标题行 */}
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <span style={{ fontWeight: 600, fontSize: 15 }}>{cab.name || cab.abstract_id}</span>
+                      <Tag color={st.color} style={{ fontSize: 12 }}>{st.label}</Tag>
                     </div>
-                    <div style={{ fontSize: 12, color: 'var(--color-text-3)', marginBottom: 8 }}>
-                      {cab.name || cab.imei}
+                    
+                    {/* 信息网格 */}
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 12px', fontSize: 12, color: 'var(--color-text-3)' }}>
+                      <div>IMEI: {cab.imei?.slice(-6) || '-'}</div>
+                      <div>绑定码: {cab.auth_str || '-'}</div>
+                      <div>柜板: 6</div>
+                      <div>通道: 36</div>
                     </div>
-                    <Tag color={st.color}>{st.label}</Tag>
+                    
+                    {/* 通道状态 */}
+                    <div style={{ display: 'flex', gap: 12, fontSize: 12, borderTop: '1px solid var(--color-border)', paddingTop: 8 }}>
+                      <span style={{ color: 'var(--color-text-3)' }}>空闲: <b style={{ color: 'var(--color-text-1)' }}>30</b></span>
+                      <span style={{ color: 'var(--color-text-3)' }}>充电: <b style={{ color: '#165dff' }}>5</b></span>
+                      <span style={{ color: 'var(--color-text-3)' }}>故障: <b style={{ color: '#f53f3f' }}>1</b></span>
+                    </div>
+                    
+                    {/* 地址 */}
+                    {cab.address && (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--color-text-3)' }}>
+                        <IconLocation style={{ color: '#f53f3f' }} />
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{cab.address}</span>
+                      </div>
+                    )}
                   </div>
                 </Card>
-              </Col>
             );
           })}
-        </Row>
+        </div>
       )}
     </>
   );