revert(device): 设备列表回退为 2 列网格卡，恢复文字图标映射

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: '无人',

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;
+  width: 48.5%;
-  align-items: center;
   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: 108px;
-  width: 88px;
+  height: 108px;
-  height: 88px;
   border-radius: $radius-circle;
   background: $color-primary-grad;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
 }
 
-.iconOffline {
+.iconOffline { background: $color-bg-disabled; }
-  background: $color-bg-disabled;
+
+.iconText {
+  font-size: 36px;
+  color: #ffffff;
 }
 
-.cardBody {
+.iconOffline .iconText { color: $color-text-tertiary; }
-  flex: 1;
-  min-width: 0;
-  margin-left: 24px;
-}
 
 .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;

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.icon} ${!device.online ? styles.iconOffline : ''}`}>
-              <View className={styles.cardBody}>
+                <Text className={styles.iconText}>{iconOf(device.model)}</Text>
-                <Text className={styles.name}>{device.name}</Text>
+              </View>
-                <View className={styles.statusRow}>
+              <Text className={styles.name}>{device.name}</Text>
-                  <View className={`${styles.dot} ${device.online ? styles.dotOn : styles.dotOff}`} />
+              <View className={styles.statusRow}>
-                  <Text className={`${styles.statusText} ${!device.online ? styles.statusTextOff : ''}`}>
+                <View className={`${styles.dot} ${device.online ? styles.dotOn : styles.dotOff}`} />
-                    {device.online ? '在线' : '离线'}
+                <Text className={`${styles.statusText} ${!device.online ? styles.statusTextOff : ''}`}>
-                  </Text>
+                  {device.online ? '在线' : '离线'}
-                  {!!device.model && <Text className={styles.statusModel}> · {device.model}</Text>}
+                </Text>
-                </View>
               </View>
-              <Text className={styles.cardArrow}>›</Text>
             </View>
           ))}
         </View>