feat(device-tab): 智能设备页改造（信息卡+切换家庭圈+功能卡片）+ 添加设备页
智能设备页重构：原"请选择场所"行删除，新增设备应用家庭信息卡（家庭圈名/关爱对象/关爱地址+切换家庭圈按钮）、房间管理/添加设备两张并排功能卡片；切换家庭圈走 BottomSheet 弹层（pending 确认制，取消不生效），本地 useState 管理选中家庭圈。新"添加设备"页（pages/device/add）含手动输入+扫码+二维码位置说明三区块，纯 UI 阶段，提交/扫码均弹 toast。
This commit is contained in:
parent
d6333beda9
commit
fbdcdfa6ce
|
|
@ -1,168 +1,110 @@
|
|||
.page {
|
||||
min-height: 100vh;
|
||||
background: #e9eaed;
|
||||
background: $color-bg;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
height: 500px;
|
||||
.section {
|
||||
margin: 24px;
|
||||
padding: 40px 32px;
|
||||
background: $color-bg-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 130px;
|
||||
background: $color-primary;
|
||||
color: #ffffff;
|
||||
font-size: 56px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.search-btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.search-btn.is-searching {
|
||||
animation: searchPulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes searchPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(67, 201, 150, 0.42);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 0 30px rgba(67, 201, 150, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(67, 201, 150, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tip-row {
|
||||
min-height: 78px;
|
||||
padding: 12px 16px;
|
||||
background: #efeff1;
|
||||
color: $color-danger;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
height: 116px;
|
||||
background: $color-bg-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 38px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 52px;
|
||||
color: #101217;
|
||||
.sectionTitle {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: $color-text;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-body {
|
||||
background: #e9eaed;
|
||||
padding-bottom: 30px;
|
||||
.sectionDesc {
|
||||
font-size: 26px;
|
||||
color: $color-text-secondary;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 32px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.empty-row {
|
||||
padding: 36px;
|
||||
text-align: center;
|
||||
color: #8c9097;
|
||||
font-size: 30px;
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
padding: 0 32px;
|
||||
background: $color-bg-gray;
|
||||
border-radius: $radius-md;
|
||||
font-size: 28px;
|
||||
color: $color-text;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
background: $color-bg-white;
|
||||
margin-top: 12px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 46px;
|
||||
border: 2px solid #d8d8d8;
|
||||
box-shadow: inset 0 0 0 10px #f1f1f1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.device-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.device-name-row {
|
||||
.submitBtn {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: $color-primary-grad;
|
||||
border-radius: $radius-pill;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 38px;
|
||||
color: #30343a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.submitBtnPressed {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.device-tag {
|
||||
font-size: 22px;
|
||||
color: $color-primary-deep;
|
||||
border: 1px solid $color-primary-deep;
|
||||
border-radius: 20px;
|
||||
padding: 2px 10px;
|
||||
.submitBtnText {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.name-tag {
|
||||
color: $color-info-light;
|
||||
border-color: $color-info-light;
|
||||
}
|
||||
|
||||
.device-id-text {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 30px;
|
||||
color: #8a8f98;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.device-actions {
|
||||
.scanArea {
|
||||
padding: 60px 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scanAreaPressed {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.scanIcon {
|
||||
font-size: 140px;
|
||||
color: $color-primary;
|
||||
line-height: 1;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.scanText {
|
||||
font-size: 30px;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.deviceRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid $color-primary;
|
||||
color: $color-primary-deep;
|
||||
font-size: 30px;
|
||||
border-radius: 6px;
|
||||
background: #f8fffc;
|
||||
.deviceBox {
|
||||
width: 48%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn.disabled {
|
||||
border-color: $color-primary-light-border;
|
||||
color: #7db89e;
|
||||
background: #f5faf7;
|
||||
.deviceIcon1,
|
||||
.deviceIcon2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: $color-bg-gray;
|
||||
border-radius: $radius-md;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.deviceLabel {
|
||||
font-size: 26px;
|
||||
color: $color-text;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,143 +1,79 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { View, Text, Input } from '@tarojs/components'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { useBle } from '@/ble/hooks/useBle'
|
||||
import { navigateTo } from '@/utils/navigation'
|
||||
import { ROUTES } from '@/constants/routes'
|
||||
import { getErrorMessage } from '@/utils/error'
|
||||
import { DEVICE_ACTION_KEYS, ACTION_REGISTRY, isEp832Device } from '@/constants/deviceActions'
|
||||
import type { BleDevice } from '@/ble/hooks/useBle'
|
||||
import { showToast } from '@/utils/toast'
|
||||
import styles from './add.module.scss'
|
||||
|
||||
export default function DeviceAdd() {
|
||||
const { state, discovery } = useBle()
|
||||
const [preparingId, setPreparingId] = useState('')
|
||||
const [deviceId, setDeviceId] = useState('')
|
||||
|
||||
// 页面隐藏/卸载时清理搜索（对齐旧版 onHide/onUnload），连接保持供配网页使用
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (discovery.getState().isSearching) {
|
||||
discovery.stopSearch(false)
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
const startScan = async () => {
|
||||
if (state.searching) {
|
||||
await discovery.stopSearch()
|
||||
const submitManual = () => {
|
||||
if (!deviceId.trim()) {
|
||||
showToast('请输入设备编号')
|
||||
return
|
||||
}
|
||||
// startSearch 内部自动完成：Android 定位权限检查 + 适配器初始化 +
|
||||
// 服务 UUID 过滤扫描（00F4/F400/FFF4）+ 4s 无结果兜底全扫 + 30s 自动停止
|
||||
showToast('设备添加功能即将接入')
|
||||
}
|
||||
|
||||
const scanQRCode = async () => {
|
||||
try {
|
||||
await discovery.startSearch()
|
||||
// @ts-ignore Taro 类型未跟进 wx.scanCode 的完整回调（实际运行时存在）
|
||||
const res = await Taro.scanCode({ onlyFromCamera: false })
|
||||
const code = String(res?.result ?? '').trim()
|
||||
if (!code) {
|
||||
showToast('未识别到有效编号')
|
||||
return
|
||||
}
|
||||
setDeviceId(code)
|
||||
showToast('已填入扫码结果')
|
||||
} catch {
|
||||
// startSearch 内部已 toast 具体错误码，此处不再重复提示
|
||||
showToast('扫码取消')
|
||||
}
|
||||
}
|
||||
|
||||
// 点击"网络配置"：连接 → 发现服务特征 → 订阅 F301（厂家确认无需鉴权）→ 打开配网页
|
||||
const openWifiPanel = async (deviceId: string) => {
|
||||
if (preparingId) return
|
||||
setPreparingId(deviceId)
|
||||
Taro.showLoading({ title: '连接设备中', mask: true })
|
||||
|
||||
let prepError: unknown = null
|
||||
try {
|
||||
await discovery.prepareWifiConfig(deviceId)
|
||||
navigateTo(ROUTES.DEVICE_CONFIG)
|
||||
} catch (error) {
|
||||
prepError = error
|
||||
} finally {
|
||||
setPreparingId('')
|
||||
// showLoading 与 showToast 共用同一遮罩层，必须先 hideLoading 再弹提示
|
||||
Taro.hideLoading()
|
||||
}
|
||||
|
||||
if (prepError) {
|
||||
// 连接/订阅失败用模态弹窗，需用户主动确认，确保错误诊断信息可见可读
|
||||
Taro.showModal({
|
||||
title: '设备连接失败',
|
||||
content: getErrorMessage(prepError),
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const invokeAction = (key: string, deviceId: string) => {
|
||||
if (key === 'WIFI') openWifiPanel(deviceId)
|
||||
// PARAMS/SERVER 仅占位，后续接入
|
||||
}
|
||||
|
||||
const isActionBusy = (key: string, deviceId: string) =>
|
||||
key === 'WIFI' && preparingId === deviceId
|
||||
|
||||
const renderDevice = (device: BleDevice) => {
|
||||
const actions = (DEVICE_ACTION_KEYS[isEp832Device(device) ? 'EP832' : 'DEFAULT'] ?? DEVICE_ACTION_KEYS.DEFAULT)
|
||||
.map((key) => ({ key, ...ACTION_REGISTRY[key] }))
|
||||
|
||||
return (
|
||||
<View key={device.deviceId} className={styles.deviceCard}>
|
||||
<View className={styles.deviceIcon} />
|
||||
<View className={styles.deviceMain}>
|
||||
<View className={styles.deviceNameRow}>
|
||||
<Text className={styles.deviceName}>{String(device.showName ?? device.deviceId)}</Text>
|
||||
{device.hasTargetService ? (
|
||||
<Text className={styles.deviceTag}>00F4</Text>
|
||||
) : device.matchedByName || device.matchedByPayload ? (
|
||||
<Text className={`${styles.deviceTag} ${styles.nameTag}`}>名称匹配</Text>
|
||||
) : null}
|
||||
</View>
|
||||
<Text className={styles.deviceIdText}>{String(device.deviceId)}</Text>
|
||||
<View className={styles.deviceActions}>
|
||||
{actions.map((action) => {
|
||||
const busy = isActionBusy(action.key, device.deviceId)
|
||||
return (
|
||||
<View
|
||||
key={action.key}
|
||||
className={`${styles.actionBtn} ${busy ? styles.disabled : ''}`}
|
||||
onClick={() => !busy && invokeAction(action.key, device.deviceId)}
|
||||
>
|
||||
<Text>{busy ? action.busyLabel : action.label}</Text>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.page}>
|
||||
<Navbar title="设备配置" variant="hero" />
|
||||
<Navbar title="添加设备" autoBack={true} variant="hero" />
|
||||
|
||||
<View className={styles.searchWrap}>
|
||||
<View
|
||||
className={`${styles.searchBtn} ${state.searching ? styles.isSearching : ''}`}
|
||||
onClick={startScan}
|
||||
>
|
||||
<Text>{state.searching ? '搜索中' : '搜索'}</Text>
|
||||
<View className={styles.section}>
|
||||
<Text className={styles.sectionTitle}>手动输入</Text>
|
||||
<Text className={styles.sectionDesc}>
|
||||
将智能设备添加至当前家庭圈，可实时查看设备状态和告警信息。
|
||||
</Text>
|
||||
<Input
|
||||
className={styles.input}
|
||||
placeholder="请输入设备编号"
|
||||
maxlength={32}
|
||||
confirmType="done"
|
||||
value={deviceId}
|
||||
onInput={(e) => setDeviceId(e.detail.value)}
|
||||
/>
|
||||
<View className={styles.submitBtn} hoverClass={styles.submitBtnPressed} onClick={submitManual}>
|
||||
<Text className={styles.submitBtnText}>提交</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles.tipRow}>
|
||||
<Text>*手机需开启蓝牙功能，Android手机还需开启定位功能</Text>
|
||||
<View className={styles.section}>
|
||||
<Text className={styles.sectionTitle}>扫码添加</Text>
|
||||
<View className={styles.scanArea} hoverClass={styles.scanAreaPressed} onClick={scanQRCode}>
|
||||
<Text className={styles.scanIcon}>⊡</Text>
|
||||
<Text className={styles.scanText}>点击扫码</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles.listHeader}>
|
||||
<Text className={styles.listTitle}>搜索到的设备列表</Text>
|
||||
</View>
|
||||
|
||||
<View className={styles.listBody}>
|
||||
{state.deviceList.length === 0 ? (
|
||||
<View className={styles.emptyRow}><Text>暂无搜索结果</Text></View>
|
||||
) : (
|
||||
state.deviceList.map(renderDevice)
|
||||
)}
|
||||
<View className={styles.section}>
|
||||
<Text className={styles.sectionTitle}>设备二维码/编号位置</Text>
|
||||
<View className={styles.deviceRow}>
|
||||
<View className={styles.deviceBox}>
|
||||
<View className={styles.deviceIcon1} />
|
||||
<Text className={styles.deviceLabel}>包装盒侧边</Text>
|
||||
</View>
|
||||
<View className={styles.deviceBox}>
|
||||
<View className={styles.deviceIcon2} />
|
||||
<Text className={styles.deviceLabel}>设备侧面或背面</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,26 +5,6 @@
|
|||
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;
|
||||
|
|
@ -32,11 +12,102 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
// 设备应用家庭信息卡：白色卡片浮在绿色头部下，浅灰行内分隔
|
||||
.familyCard {
|
||||
margin: -40px 24px 0;
|
||||
padding: 8px 32px 32px;
|
||||
background: $color-bg-white;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-card;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.familyRow {
|
||||
min-height: 104px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $color-border;
|
||||
}
|
||||
|
||||
.familyRow:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.familyLabel {
|
||||
font-size: 30px;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.familyValue {
|
||||
font-size: 30px;
|
||||
color: $color-text;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.switchBtn {
|
||||
margin-top: 24px;
|
||||
height: 88px;
|
||||
background: $color-primary-grad;
|
||||
border-radius: $radius-pill;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.switchBtnPressed {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.switchBtnText {
|
||||
font-size: 30px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 房间管理 / 添加设备 两张并排功能卡
|
||||
.funcRow {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.funcCard {
|
||||
flex: 1;
|
||||
height: 144px;
|
||||
background: $color-bg-white;
|
||||
border-radius: $radius-md;
|
||||
box-shadow: $shadow-card;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.funcCardPressed {
|
||||
background: $color-bg-press;
|
||||
}
|
||||
|
||||
.funcIcon {
|
||||
font-size: 56px;
|
||||
color: $color-primary;
|
||||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.funcText {
|
||||
font-size: 28px;
|
||||
color: $color-text;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 设备网格
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -116,3 +187,86 @@
|
|||
}
|
||||
|
||||
.fabIcon { font-size: 48px; color: #ffffff; font-weight: 300; }
|
||||
|
||||
// 切换家庭圈弹层内的列表项
|
||||
.sheetList {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.sheetItem {
|
||||
padding: 24px 32px;
|
||||
background: $color-bg-gray;
|
||||
border-radius: $radius-md;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sheetItemActive {
|
||||
background: $color-primary-light-bg;
|
||||
border: 2px solid $color-primary;
|
||||
}
|
||||
|
||||
.sheetHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sheetName {
|
||||
font-size: 32px;
|
||||
color: $color-text;
|
||||
font-weight: 600;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.sheetRole {
|
||||
padding: 4px 12px;
|
||||
background: $color-bg-disabled;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
|
||||
.sheetRoleText {
|
||||
font-size: 22px;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.sheetItemActive .sheetRole {
|
||||
background: $color-bg-white;
|
||||
}
|
||||
|
||||
.sheetItemActive .sheetRoleText {
|
||||
color: $color-primary-deep;
|
||||
}
|
||||
|
||||
.sheetMeta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sheetMetaItem {
|
||||
font-size: 24px;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.sheetItemActive .sheetMetaItem {
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.sheetConfirm {
|
||||
margin: 16px 0 32px;
|
||||
height: 96px;
|
||||
background: $color-primary-grad;
|
||||
border-radius: $radius-pill;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sheetConfirmPressed {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.sheetConfirmText {
|
||||
font-size: 32px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,12 @@ import { setDeviceList, type Device } from '@/store/deviceSlice'
|
|||
import { Navbar } from '@/components/navbar'
|
||||
import { Loading } from '@/components/loading'
|
||||
import { StateView } from '@/components/state-view'
|
||||
import { BottomSheet } from '@/components/bottom-sheet'
|
||||
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 { getFamilies, type Family } from '@/api/family'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
const FALLBACK_ICON = '⌂'
|
||||
|
|
@ -22,6 +24,11 @@ export default function DeviceList() {
|
|||
const [loading, setLoading] = useState(true)
|
||||
const [loadError, setLoadError] = useState(false)
|
||||
|
||||
const [families, setFamilies] = useState<Family[]>([])
|
||||
const [currentFamily, setCurrentFamily] = useState<Family | null>(null)
|
||||
const [familySheetOpen, setFamilySheetOpen] = useState(false)
|
||||
const [pendingFamily, setPendingFamily] = useState<Family | null>(null)
|
||||
|
||||
// 在线状态需每次进入页面都新鲜：useDidShow 覆盖
|
||||
// 首次进入、从详情页 navigateBack 返回、tab 切换回三种场景
|
||||
const loadDevices = useCallback(async () => {
|
||||
|
|
@ -37,8 +44,20 @@ export default function DeviceList() {
|
|||
}
|
||||
}, [dispatch, scene?.id])
|
||||
|
||||
const loadFamilies = useCallback(async () => {
|
||||
try {
|
||||
const list = await getFamilies()
|
||||
setFamilies(list)
|
||||
// 若当前未选中，默认选第一条
|
||||
setCurrentFamily((prev) => prev ?? list[0] ?? null)
|
||||
} catch {
|
||||
// 静默：家庭圈加载失败不阻断设备列表
|
||||
}
|
||||
}, [])
|
||||
|
||||
useDidShow(() => {
|
||||
loadDevices()
|
||||
loadFamilies()
|
||||
})
|
||||
|
||||
const goDetail = (device: Device) => {
|
||||
|
|
@ -46,19 +65,59 @@ export default function DeviceList() {
|
|||
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 goRoom = () => navigateTo(ROUTES.SCENE_SELECT)
|
||||
|
||||
const iconOf = (model: DeviceModel) => DEVICE_ICON_MAP[model] ?? FALLBACK_ICON
|
||||
|
||||
const openFamilySheet = () => {
|
||||
setPendingFamily(currentFamily)
|
||||
setFamilySheetOpen(true)
|
||||
}
|
||||
const closeFamilySheet = () => {
|
||||
setFamilySheetOpen(false)
|
||||
setPendingFamily(null)
|
||||
}
|
||||
const confirmFamilySheet = () => {
|
||||
if (pendingFamily) setCurrentFamily(pendingFamily)
|
||||
closeFamilySheet()
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.page}>
|
||||
<Navbar title="智能设备" autoBack={false} variant="hero" />
|
||||
|
||||
<View className={styles.siteRow} onClick={goSceneSelect}>
|
||||
<Text className={styles.siteText}>{scene?.name || '请选择场所'}</Text>
|
||||
<Text className={styles.siteArrow}>›</Text>
|
||||
{/* 设备应用家庭信息卡 */}
|
||||
<View className={styles.familyCard}>
|
||||
<View className={styles.familyRow}>
|
||||
<Text className={styles.familyLabel}>设备应用家庭</Text>
|
||||
<Text className={styles.familyValue}>{currentFamily?.name ?? scene?.name ?? '未选择'}</Text>
|
||||
</View>
|
||||
<View className={styles.familyRow}>
|
||||
<Text className={styles.familyLabel}>关爱对象</Text>
|
||||
<Text className={styles.familyValue}>{currentFamily?.caredLabel ?? '--'}</Text>
|
||||
</View>
|
||||
<View className={styles.familyRow}>
|
||||
<Text className={styles.familyLabel}>关爱地址</Text>
|
||||
<Text className={styles.familyValue}>{currentFamily?.address ?? '--'}</Text>
|
||||
</View>
|
||||
<View className={styles.switchBtn} hoverClass={styles.switchBtnPressed} onClick={openFamilySheet}>
|
||||
<Text className={styles.switchBtnText}>切换家庭圈</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 房间管理 + 添加设备 两张并排 */}
|
||||
<View className={styles.funcRow}>
|
||||
<View className={styles.funcCard} hoverClass={styles.funcCardPressed} onClick={goRoom}>
|
||||
<Text className={styles.funcIcon}>⌂</Text>
|
||||
<Text className={styles.funcText}>房间管理</Text>
|
||||
</View>
|
||||
<View className={styles.funcCard} hoverClass={styles.funcCardPressed} onClick={goAdd}>
|
||||
<Text className={styles.funcIcon}>+</Text>
|
||||
<Text className={styles.funcText}>添加设备</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 设备网格 */}
|
||||
{loading ? (
|
||||
<View className={styles.stateWrap}><Loading /></View>
|
||||
) : loadError ? (
|
||||
|
|
@ -87,6 +146,38 @@ export default function DeviceList() {
|
|||
<View className={styles.fab} onClick={goAdd}>
|
||||
<Text className={styles.fabIcon}>+</Text>
|
||||
</View>
|
||||
|
||||
{/* 切换家庭圈弹层 */}
|
||||
<BottomSheet visible={familySheetOpen} title="切换家庭圈" onClose={closeFamilySheet}>
|
||||
<View className={styles.sheetList}>
|
||||
{families.map((family) => {
|
||||
const active = pendingFamily?.id === family.id
|
||||
return (
|
||||
<View
|
||||
key={family.id}
|
||||
className={`${styles.sheetItem} ${active ? styles.sheetItemActive : ''}`}
|
||||
onClick={() => setPendingFamily(family)}
|
||||
>
|
||||
<View className={styles.sheetHead}>
|
||||
<Text className={styles.sheetName}>{family.name}</Text>
|
||||
{family.role && (
|
||||
<View className={styles.sheetRole}>
|
||||
<Text className={styles.sheetRoleText}>{family.role}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View className={styles.sheetMeta}>
|
||||
<Text className={styles.sheetMetaItem}>关爱对象 {family.caredLabel}</Text>
|
||||
<Text className={styles.sheetMetaItem}>设备数量 {family.deviceCount}台</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<View className={styles.sheetConfirm} hoverClass={styles.sheetConfirmPressed} onClick={confirmFamilySheet}>
|
||||
<Text className={styles.sheetConfirmText}>确定</Text>
|
||||
</View>
|
||||
</BottomSheet>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue