feat: 后端返回ICCID，卡片显示IMEI/ICCID换行，状态图标

software/api-server/src/routes/cabinets.rs

@@ -346,6 +346,10 @@ pub struct CabinetOption {
     pub id: i64,
     pub name: Option<String>,
     pub abstract_id: String,
+    pub imei: Option<String>,
+    pub iccid: Option<String>,
+    pub address: Option<String>,
+    pub status: i8,
 }
 
 /// 仓板下拉选项
@@ -372,14 +376,14 @@ pub async fn list_cabinet_options(
 
     let rows = if let Some(pid) = params.project_id {
         sqlx::query_as::<_, CabinetOption>(
-            "SELECT id, name, abstract_id FROM cabinets WHERE project_id = ? ORDER BY id"
+            "SELECT id, name, abstract_id, imei, iccid, address, status FROM cabinets WHERE project_id = ? ORDER BY id"
         )
         .bind(pid)
         .fetch_all(&state.mysql)
         .await?
     } else {
         sqlx::query_as::<_, CabinetOption>(
-            "SELECT id, name, abstract_id FROM cabinets ORDER BY id"
+            "SELECT id, name, abstract_id, imei, iccid, address, status FROM cabinets ORDER BY id"
         )
         .fetch_all(&state.mysql)
         .await?

software/web/src/api/devices.ts

@@ -20,6 +20,7 @@ export interface Cabinet {
   project_id?: number;
   abstract_id: string;
   imei: string;
+  iccid?: string;
   auth_str?: string;
   name?: string;
   address?: string;

software/web/src/pages/devices/CabinetGrid.tsx

@@ -10,15 +10,15 @@ import {
   Spin,
   Empty,
 } from '@arco-design/web-react';
-import { IconLocation } from '@arco-design/web-react/icon';
+import { IconLocation, IconPoweroff, IconCheckCircle, IconInfoCircle } from '@arco-design/web-react/icon';
 import type { Cabinet } from '@/api/devices';
 
 /** 柜子状态映射 */
-const STATUS_MAP: Record<number, { label: string; color: string }> = {
+const STATUS_MAP: Record<number, { label: string; color: string; icon: React.ReactNode }> = {
-  0: { label: '离线', color: 'gray' },
+  0: { label: '离线', color: 'gray', icon: <IconInfoCircle /> },
-  1: { label: '在线', color: 'green' },
+  1: { label: '在线', color: 'green', icon: <IconCheckCircle /> },
-  2: { label: '充电中', color: 'blue' },
+  2: { label: '充电中', color: 'blue', icon: <IconPoweroff /> },
-  3: { label: '故障', color: 'red' },
+  3: { label: '故障', color: 'red', icon: <IconInfoCircle /> },
 };
 
 interface CabinetGridProps {
@@ -38,7 +38,7 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
       ) : (
         <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' };
+            const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray', icon: <IconInfoCircle /> };
             return (
                 <Card
                   key={cab.id}
@@ -48,18 +48,21 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
                   style={{ cursor: 'pointer' }}
                 >
                   <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>
+                      <span style={{ fontWeight: 600, fontSize: 15, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>
-                      <Tag color={st.color} style={{ fontSize: 12 }}>{st.label}</Tag>
+                        {cab.name || cab.abstract_id}
+                      </span>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                        <span style={{ color: st.color }}>{st.icon}</span>
+                        <Tag color={st.color} style={{ fontSize: 12, margin: 0 }}>{st.label}</Tag>
+                      </div>
                     </div>
                     
-                    {/* 信息网格 */}
+                    {/* IMEI 和 ICCID */}
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 12px', fontSize: 12, color: 'var(--color-text-3)' }}>
+                    <div style={{ fontSize: 12, color: 'var(--color-text-3)' }}>
-                      <div>IMEI: {cab.imei?.slice(-6) || '-'}</div>
+                      <div>IMEI: {cab.imei || '-'}</div>
-                      <div>绑定码: {cab.auth_str || '-'}</div>
+                      <div>ICCID: {cab.iccid || '-'}</div>
-                      <div>柜板: 6</div>
-                      <div>通道: 36</div>
                     </div>
                     
                     {/* 通道状态 */}
@@ -72,7 +75,7 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
                     {/* 地址 */}
                     {cab.address && (
                       <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--color-text-3)' }}>
-                        <IconLocation style={{ color: '#f53f3f' }} />
+                        <IconLocation style={{ color: '#f53f3f', flexShrink: 0 }} />
                         <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{cab.address}</span>
                       </div>
                     )}