From 8ad9ca234d83048e194bb8db2bb3b1b7a70a1eb1 Mon Sep 17 00:00:00 2001
From: ozh <sylphy.ou@tfegroup.com.hk>
Date: Wed, 9 Sep 2026 13:51:16 +0800
Subject: [PATCH] =?UTF-8?q?revert(device):=20=E8=AE=BE=E5=A4=87=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=9B=9E=E9=80=80=E4=B8=BA=202=20=E5=88=97=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E5=8D=A1=EF=BC=8C=E6=81=A2=E5=A4=8D=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=98=A0=E5=B0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/enums.ts             |  6 ++++
 src/pages/device/index.module.scss | 54 ++++++++++++++----------------
 src/pages/device/index.tsx         | 27 ++++++++-------
 3 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/constants/enums.ts b/src/constants/enums.ts
index 8c3b7a9..4771c9a 100644
--- a/src/constants/enums.ts
+++ b/src/constants/enums.ts
@@ -6,6 +6,12 @@ export const DEVICE_MODEL = {
 
 export type DeviceModel = (typeof DEVICE_MODEL)[keyof typeof DEVICE_MODEL]
 
+// 设备型号 → 图标映射
+export const DEVICE_ICON_MAP: Record<DeviceModel, string> = {
+  ED713: 'home',
+  ED719: 'bell'
+}
+
 // 体征枚举映射（与 web 端 zh-CN 一致）
 export const MOVE_STATE_MAP: Record<number, string> = {
   0: '无人',
diff --git a/src/pages/device/index.module.scss b/src/pages/device/index.module.scss
index e4ab595..39d98d0 100644
--- a/src/pages/device/index.module.scss
+++ b/src/pages/device/index.module.scss
@@ -32,41 +32,49 @@
   align-items: center;
 }
 
-.list {
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   padding: 24px;
 }
 
 .card {
-  display: flex;
-  align-items: center;
+  width: 48.5%;
   margin-bottom: 24px;
-  padding: 24px 28px;
+  padding: 36px 20px 28px;
+  box-sizing: border-box;
   background: $color-bg-white;
   border-radius: $radius-lg;
   box-shadow: $shadow-card;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-// 纯色圆图标：不再放文字符号（DEVICE_ICON_MAP 已删）
 .icon {
-  flex-shrink: 0;
-  width: 88px;
-  height: 88px;
+  width: 108px;
+  height: 108px;
   border-radius: $radius-circle;
   background: $color-primary-grad;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
 }
 
-.iconOffline {
-  background: $color-bg-disabled;
+.iconOffline { background: $color-bg-disabled; }
+
+.iconText {
+  font-size: 36px;
+  color: #ffffff;
 }
 
-.cardBody {
-  flex: 1;
-  min-width: 0;
-  margin-left: 24px;
-}
+.iconOffline .iconText { color: $color-text-tertiary; }
 
 .name {
-  font-size: 30px;
+  max-width: 100%;
+  font-size: 28px;
   font-weight: 600;
   color: $color-text;
   overflow: hidden;
@@ -75,7 +83,7 @@
 }
 
 .statusRow {
-  margin-top: 10px;
+  margin-top: 12px;
   display: flex;
   align-items: center;
 }
@@ -93,18 +101,6 @@
 .statusText { font-size: 24px; color: $color-primary-deep; }
 .statusTextOff { color: $color-text-secondary; }
 
-.statusModel {
-  font-size: 24px;
-  color: $color-text-secondary;
-}
-
-.cardArrow {
-  flex-shrink: 0;
-  margin-left: 16px;
-  font-size: 36px;
-  color: $color-text-placeholder;
-}
-
 .fab {
   position: fixed;
   right: 40px;
diff --git a/src/pages/device/index.tsx b/src/pages/device/index.tsx
index a231ff9..807b051 100644
--- a/src/pages/device/index.tsx
+++ b/src/pages/device/index.tsx
@@ -7,10 +7,13 @@ import { Navbar } from '@/components/navbar'
 import { Loading } from '@/components/loading'
 import { StateView } from '@/components/state-view'
 import { getDeviceList } from '@/api/device'
+import { DEVICE_ICON_MAP, type DeviceModel } from '@/constants/enums'
 import { ROUTES } from '@/constants/routes'
 import { navigateTo } from '@/utils/navigation'
 import styles from './index.module.scss'
 
+const FALLBACK_ICON = '⌂'
+
 export default function DeviceList() {
   const dispatch = useAppDispatch()
   const scene = useAppSelector((s) => s.scene.current)
@@ -45,6 +48,8 @@ export default function DeviceList() {
   const goAdd = () => navigateTo(ROUTES.DEVICE_ADD)
   const goSceneSelect = () => navigateTo(ROUTES.SCENE_SELECT)
 
+  const iconOf = (model: DeviceModel) => DEVICE_ICON_MAP[model] ?? FALLBACK_ICON
+
   return (
     <View className={styles.page}>
       <Navbar title="智能设备" autoBack={false} />
@@ -61,21 +66,19 @@ export default function DeviceList() {
       ) : deviceList.length === 0 ? (
         <StateView status="error" mode="list" text="暂无设备" retryText="添加设备" onRetry={goAdd} />
       ) : (
-        <View className={styles.list}>
+        <View className={styles.grid}>
           {deviceList.map((device) => (
             <View key={device.id} className={styles.card} onClick={() => goDetail(device)}>
-              <View className={`${styles.icon} ${!device.online ? styles.iconOffline : ''}`} />
-              <View className={styles.cardBody}>
-                <Text className={styles.name}>{device.name}</Text>
-                <View className={styles.statusRow}>
-                  <View className={`${styles.dot} ${device.online ? styles.dotOn : styles.dotOff}`} />
-                  <Text className={`${styles.statusText} ${!device.online ? styles.statusTextOff : ''}`}>
-                    {device.online ? '在线' : '离线'}
-                  </Text>
-                  {!!device.model && <Text className={styles.statusModel}> · {device.model}</Text>}
-                </View>
+              <View className={`${styles.icon} ${!device.online ? styles.iconOffline : ''}`}>
+                <Text className={styles.iconText}>{iconOf(device.model)}</Text>
+              </View>
+              <Text className={styles.name}>{device.name}</Text>
+              <View className={styles.statusRow}>
+                <View className={`${styles.dot} ${device.online ? styles.dotOn : styles.dotOff}`} />
+                <Text className={`${styles.statusText} ${!device.online ? styles.statusTextOff : ''}`}>
+                  {device.online ? '在线' : '离线'}
+                </Text>
               </View>
-              <Text className={styles.cardArrow}>›</Text>
             </View>
           ))}
         </View>