前端接入设备系统更新

banban-mini/src/pages/sleep/index.tsx

@@ -10,6 +10,7 @@ import {
   unbindDevice,
 } from '@/services/binding'
 import { Child, clearSelectedChildId, createChild, setSelectedChildId, updateChild } from '@/services/child'
+import { DeviceFirmwareStatus, getDeviceFirmwareStatus, startDeviceFirmwareUpdate } from '@/services/device'
 import { useSystemBanner } from '@/components/system-banner/use-system-banner'
 import './index.scss'
 
@@ -22,6 +23,17 @@ interface MenuItem {
   disabled?: boolean
 }
 
+function getFirmwareStatusLabel(status?: string | null): string {
+  const normalized = String(status || '').trim()
+  if (!normalized || normalized === 'idle') return '未更新'
+  if (normalized === 'sent') return '指令已发送'
+  if (normalized === 'accepted') return '设备已接收'
+  if (normalized === 'updating') return '更新中'
+  if (normalized === 'success' || normalized === 'completed') return '已更新'
+  if (normalized === 'failed') return '更新失败'
+  return normalized
+}
+
 export default function Sleep() {
   const systemBanner = useSystemBanner()
   const [loading, setLoading] = useState(true)
@@ -29,6 +41,9 @@ export default function Sleep() {
   const [bindings, setBindings] = useState<BindingListItem[]>([])
   const [binding, setBinding] = useState<BindingListItem | null>(null)
   const [currentChild, setCurrentChild] = useState<Child | null>(null)
+  const [firmwareStatus, setFirmwareStatus] = useState<DeviceFirmwareStatus | null>(null)
+  const [isLoadingFirmware, setIsLoadingFirmware] = useState(false)
+  const [isUpdatingFirmware, setIsUpdatingFirmware] = useState(false)
   const [showModal, setShowModal] = useState(false)
   const [showChildModal, setShowChildModal] = useState(false)
   const [modalType, setModalType] = useState<'add' | 'edit'>('add')
@@ -49,11 +64,13 @@ export default function Sleep() {
     setLoading(true)
     try {
       const context = await loadCurrentChildBindingContext()
+      const nextBinding = (context.currentBinding as BindingListItem | null) || null
       setChildren(context.children)
       setBindings(context.bindings as BindingListItem[])
       setCurrentChild(context.currentChild)
-      setBinding((context.currentBinding as BindingListItem | null) || null)
+      setBinding(nextBinding)
       setParentInfo(Taro.getStorageSync('userInfo') || {})
+      void loadFirmwareStatus(nextBinding?.device_id)
     } catch (error: any) {
       console.error('[manage] load failed:', error)
       Taro.showToast({
@@ -67,6 +84,30 @@ export default function Sleep() {
 
   const currentChildName = currentChild?.child_name || '未设置'
 
+  const loadFirmwareStatus = async (deviceId?: string | null) => {
+    const normalizedDeviceId = String(deviceId || '').trim()
+    if (!normalizedDeviceId) {
+      setFirmwareStatus(null)
+      setIsLoadingFirmware(false)
+      return
+    }
+
+    setIsLoadingFirmware(true)
+    try {
+      const nextFirmwareStatus = await getDeviceFirmwareStatus(normalizedDeviceId)
+      setFirmwareStatus(nextFirmwareStatus)
+    } catch (error: any) {
+      console.error('[manage] firmware load failed:', error)
+      setFirmwareStatus(null)
+      Taro.showToast({
+        title: error?.message || '系统更新状态加载失败',
+        icon: 'none',
+      })
+    } finally {
+      setIsLoadingFirmware(false)
+    }
+  }
+
   const handleOpenModal = (type: 'add' | 'edit', child?: Child) => {
     setModalType(type)
     setChildName(child?.child_name || '')
@@ -90,6 +131,7 @@ export default function Sleep() {
     }
     setCurrentChild(child)
     setBinding(nextBinding)
+    void loadFirmwareStatus(nextBinding?.device_id)
     setShowChildModal(false)
     Taro.showToast({
       title: '已切换当前孩子',
@@ -130,6 +172,37 @@ export default function Sleep() {
     }
   }
 
+  const handleStartFirmwareUpdate = () => {
+    if (!binding?.device_id || !firmwareStatus?.can_update || isLoadingFirmware || isUpdatingFirmware) return
+
+    Taro.showModal({
+      title: '系统更新',
+      content: `确定要更新当前设备 ${binding.device_id} 吗？`,
+      confirmText: '更新',
+      confirmColor: '#16A34A',
+      success: async (result) => {
+        if (!result.confirm || !binding?.device_id) return
+
+        setIsUpdatingFirmware(true)
+        try {
+          const nextFirmwareStatus = await startDeviceFirmwareUpdate(binding.device_id)
+          setFirmwareStatus(nextFirmwareStatus)
+          Taro.showToast({
+            title: '更新指令已发送',
+            icon: 'success',
+          })
+        } catch (error: any) {
+          Taro.showToast({
+            title: error?.message || '更新失败，请重试',
+            icon: 'none',
+          })
+        } finally {
+          setIsUpdatingFirmware(false)
+        }
+      },
+    })
+  }
+
   const handleUnbind = () => {
     if (!binding) return
 
@@ -223,6 +296,24 @@ export default function Sleep() {
   }
 
   const parentDisplayName = parentInfo.nickname?.trim() || '家长'
+  const currentFirmwareLabel = firmwareStatus?.current_version || '--'
+  const latestFirmwareLabel = firmwareStatus?.latest_version || '--'
+  const firmwareStatusLabel = binding?.device_id
+    ? isLoadingFirmware
+      ? '查询中'
+      : getFirmwareStatusLabel(firmwareStatus?.update_status)
+    : '未绑定设备'
+  const firmwareProgress = Math.max(0, Math.min(100, Math.round(Number(firmwareStatus?.progress || 0))))
+  const showFirmwareProgress = ['sent', 'accepted', 'updating'].includes(String(firmwareStatus?.update_status || ''))
+  const canUpdateFirmware = Boolean(binding?.device_id && firmwareStatus?.can_update && !isLoadingFirmware && !isUpdatingFirmware)
+  const firmwareActionText = isLoadingFirmware ? '查询中' : isUpdatingFirmware ? '发送中' : '更新'
+  const firmwareSubtitle = !binding?.device_id
+    ? '绑定设备后可查看系统版本'
+    : isLoadingFirmware
+      ? '正在查询当前设备版本'
+      : firmwareStatus?.update_available
+        ? '发现可更新版本'
+        : '当前设备版本状态'
   const menuItems: MenuItem[] = [
     {
       icon: require('../../assets/tab-icons/orange-robot.png'),
@@ -299,6 +390,47 @@ export default function Sleep() {
         </View>
       </View>
 
+      <View className={`system-update-card ${binding?.device_id ? '' : 'disabled'}`}>
+        <View className='system-update-header'>
+          <View className='system-update-heading'>
+            <Text className='system-update-title'>系统更新</Text>
+            <Text className='system-update-subtitle'>{firmwareSubtitle}</Text>
+          </View>
+          <View
+            className={`system-update-action ${canUpdateFirmware ? '' : 'disabled'}`}
+            onClick={canUpdateFirmware ? handleStartFirmwareUpdate : undefined}
+          >
+            <Text className='system-update-action-text'>{firmwareActionText}</Text>
+          </View>
+        </View>
+        <View className='system-update-body'>
+          <View className='system-update-row'>
+            <Text className='system-update-label'>当前设备</Text>
+            <Text className='system-update-value'>{binding?.device_id || '未绑定'}</Text>
+          </View>
+          <View className='system-update-row'>
+            <Text className='system-update-label'>当前版本</Text>
+            <Text className='system-update-value'>{currentFirmwareLabel}</Text>
+          </View>
+          <View className='system-update-row'>
+            <Text className='system-update-label'>最新版本</Text>
+            <Text className='system-update-value highlight'>{latestFirmwareLabel}</Text>
+          </View>
+          <View className='system-update-row'>
+            <Text className='system-update-label'>更新状态</Text>
+            <Text className='system-update-value'>{firmwareStatusLabel}</Text>
+          </View>
+          {showFirmwareProgress && (
+            <View className='system-update-progress'>
+              <View className='system-update-progress-track'>
+                <View className='system-update-progress-bar' style={{ width: `${firmwareProgress}%` }}></View>
+              </View>
+              <Text className='system-update-progress-text'>{firmwareProgress}%</Text>
+            </View>
+          )}
+        </View>
+      </View>
+
       <View className='menu-card'>
         {menuItems.map((item, index) => (
           <View key={index}>