feat(device-tab): 设备列表页从首页分离为独立页面
This commit is contained in:
parent
0fc0f2b91d
commit
e3af7c26fb
|
|
@ -0,0 +1,131 @@
|
|||
.page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: $color-bg;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.siteRow {
|
||||
height: 108px;
|
||||
padding: 0 32px;
|
||||
background: $color-bg-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.siteText {
|
||||
font-size: 34px;
|
||||
color: $color-text;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.siteArrow {
|
||||
font-size: 36px;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.stateWrap {
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.retryBtn {
|
||||
margin-top: 40px;
|
||||
width: 240px;
|
||||
height: 80px;
|
||||
background: $color-primary;
|
||||
border-radius: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 48.5%;
|
||||
margin-bottom: 24px;
|
||||
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;
|
||||
}
|
||||
|
||||
.icon {
|
||||
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; }
|
||||
|
||||
.iconText {
|
||||
font-size: 36px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.iconOffline .iconText { color: $color-text-tertiary; }
|
||||
|
||||
.name {
|
||||
max-width: 100%;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.statusRow {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: $radius-circle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dotOn { background: $color-primary; }
|
||||
.dotOff { background: $color-text-placeholder; }
|
||||
|
||||
.statusText { font-size: 24px; color: $color-primary-deep; }
|
||||
.statusTextOff { color: $color-text-secondary; }
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 60px;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
border-radius: $radius-circle;
|
||||
background: $color-primary-grad;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: $shadow-fab;
|
||||
}
|
||||
|
||||
.fabIcon { font-size: 48px; color: #ffffff; font-weight: 300; }
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import { useState, useCallback } from 'react'
|
||||
import { useDidShow } from '@tarojs/taro'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { useAppSelector, useAppDispatch } from '@/store/hooks'
|
||||
import { setDeviceList, type Device } from '@/store/deviceSlice'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Loading } from '@/components/loading'
|
||||
import { Empty } from '@/components/empty'
|
||||
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)
|
||||
const deviceList = useAppSelector((s) => s.device.list)
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadError, setLoadError] = useState(false)
|
||||
|
||||
// 在线状态需每次进入页面都新鲜：useDidShow 覆盖
|
||||
// 首次进入、从详情页 navigateBack 返回、tab 切换回三种场景
|
||||
const loadDevices = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setLoadError(false)
|
||||
try {
|
||||
const data = await getDeviceList(scene?.id ?? null)
|
||||
dispatch(setDeviceList(data))
|
||||
} catch {
|
||||
setLoadError(true)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [dispatch, scene?.id])
|
||||
|
||||
useDidShow(() => {
|
||||
loadDevices()
|
||||
})
|
||||
|
||||
const goDetail = (device: Device) => {
|
||||
const name = encodeURIComponent(device.name)
|
||||
navigateTo(`${ROUTES.DEVICE_DETAIL}?id=${device.id}&name=${name}&model=${device.model}&online=${device.online ? 1 : 0}`)
|
||||
}
|
||||
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} />
|
||||
|
||||
<View className={styles.siteRow} onClick={goSceneSelect}>
|
||||
<Text className={styles.siteText}>{scene?.name || '请选择场所'}</Text>
|
||||
<Text className={styles.siteArrow}>›</Text>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
<View className={styles.stateWrap}><Loading /></View>
|
||||
) : loadError ? (
|
||||
<View className={styles.stateWrap}>
|
||||
<Empty text="加载失败，请检查网络" mode="wifi" />
|
||||
<View className={styles.retryBtn} onClick={loadDevices}><Text>重试</Text></View>
|
||||
</View>
|
||||
) : deviceList.length === 0 ? (
|
||||
<View className={styles.stateWrap}>
|
||||
<Empty text="暂无设备" />
|
||||
<View className={styles.retryBtn} onClick={goAdd}><Text>添加设备</Text></View>
|
||||
</View>
|
||||
) : (
|
||||
<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 : ''}`}>
|
||||
<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>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className={styles.fab} onClick={goAdd}>
|
||||
<Text className={styles.fabIcon}>+</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue