fix(mini): address UI feedback and device status display

Correct battery colors, participant artwork, navigation icons, title layout, and map spacing.

Animate the binding countdown using the existing expiry, recover polling after transient failures, and show online and battery data on success. Keep current firmware messaging consistent with version availability.

Validation: WeChat mini-program build, 16 UI tests, and isolated developer-tool scenarios passed. Five pre-existing TypeScript errors remain; physical-device validation is pending.

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

@@ -1,4 +1,5 @@
 import { getPageStyle } from '@/utils/page-style'
+import { formatBatteryDisplay, getBatteryLevel } from '@/utils/battery'
 import { setActiveTabRoute } from '@/utils/tab-bar'
 import { View, Text, Slider, Image } from '@tarojs/components'
 import { useRef, useState } from 'react'
@@ -49,14 +50,6 @@ function sleep(ms: number): Promise<void> {
   })
 }
 
-function formatBatteryDisplay(value?: number | null): { text: string; showPercent: boolean } {
-  if (value === null || value === undefined) return { text: '--', showPercent: false }
-  const normalized = Number(value)
-  if (!Number.isFinite(normalized)) return { text: '--', showPercent: false }
-  if (normalized === 0) return { text: '*', showPercent: false }
-  return { text: String(normalized), showPercent: true }
-}
-
 function formatSleepRange(status: DeviceStatus | null): string {
   const start = status?.disable_time_start?.trim()
   const end = status?.disable_time_end?.trim()
@@ -404,16 +397,14 @@ export default function Device() {
   const pageTitle = `${childName} 的伴伴`
   const batteryValue = deviceStatus?.power ?? deviceStatus?.battery_pct ?? null
   const batteryDisplay = formatBatteryDisplay(batteryValue)
-  const statusMascotSrc =
-    batteryValue === null
-      ? require('../../assets/ui/dog-happy.png')
-      : batteryValue > 85
-        ? require('../../assets/ui/dog-happy.png')
-        : batteryValue > 60
-          ? require('../../assets/ui/dog-sparkle.png')
-          : batteryValue > 35
-            ? require('../../assets/ui/dog-lying.png')
-            : require('../../assets/ui/dog-question.png')
+  const batteryLevel = getBatteryLevel(batteryValue)
+  const statusMascotSrc = {
+    unknown: require('../../assets/ui/dog-happy.png'),
+    full: require('../../assets/ui/dog-happy.png'),
+    high: require('../../assets/ui/dog-sparkle.png'),
+    medium: require('../../assets/ui/dog-lying.png'),
+    low: require('../../assets/ui/dog-question.png'),
+  }[batteryLevel]
   const signalLabel = getSignalLabel(deviceStatus?.signal)
   const versionLabel = deviceStatus?.version || '--'
   const coordinateLabel = formatCoordinates(deviceStatus)
@@ -429,7 +420,7 @@ export default function Device() {
         <Text className='page-title'>{pageTitle}</Text>
       </View>
 
-      <View className='status-card'>
+      <View className={`status-card battery-${batteryLevel}`}>
         <View className='status-badge'>
           <View className='status-dot'></View>
           <Text className='status-text'>已完成绑定</Text>