add banbanmini

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

@@ -0,0 +1,174 @@
+import { View, Text, Switch, Slider, Image } from '@tarojs/components'
+import { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import './index.scss'
+
+interface DeviceData {
+  id: string
+  name: string
+  status: 'online' | 'offline'
+  battery: number
+  daysLeft: number
+  sleepEnabled: boolean
+  sleepTime: string
+  volume: number
+}
+
+export default function Device() {
+  const [device, setDevice] = useState<DeviceData | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [hasDevice, setHasDevice] = useState(false)
+
+  useEffect(() => {
+    // 检查登录状态
+    const isLoggedIn = Taro.getStorageSync('isLoggedIn')
+    if (!isLoggedIn) {
+      Taro.redirectTo({ url: '/pages/login/index' })
+      return
+    }
+
+    // 检查设备绑定状态
+    const deviceInfo = Taro.getStorageSync('deviceInfo')
+    const hasDeviceFlag = Taro.getStorageSync('hasDevice')
+    
+    setHasDevice(!!hasDeviceFlag)
+    
+    if (deviceInfo && hasDeviceFlag) {
+      setDevice({
+        id: deviceInfo.id,
+        name: deviceInfo.name || '小夏的伴伴',
+        status: deviceInfo.status || 'online',
+        battery: deviceInfo.battery || 82,
+        daysLeft: 4,
+        sleepEnabled: true,
+        sleepTime: '每天 22:00 - 07:00',
+        volume: 50
+      })
+    }
+    
+    setIsLoading(false)
+  }, [])
+
+  const handleSleepToggle = (e: any) => {
+    if (!device) return
+    setDevice({ ...device, sleepEnabled: e.detail.value })
+    Taro.showToast({
+      title: e.detail.value ? '已开启定时休眠' : '已关闭定时休眠',
+      icon: 'success'
+    })
+  }
+
+  const handleVolumeChange = (e: any) => {
+    if (!device) return
+    setDevice({ ...device, volume: e.detail.value })
+  }
+
+  const switchTab = (url: string) => {
+    Taro.switchTab({ url })
+  }
+
+  if (isLoading) {
+    return (
+      <View className='device-page'>
+        <View className='loading'>
+          <Text>加载中...</Text>
+        </View>
+      </View>
+    )
+  }
+
+  // 未绑定设备，跳转到绑定页面
+  if (!hasDevice || !device) {
+    Taro.redirectTo({ url: '/pages/bind/index' })
+    return null
+  }
+
+  return (
+    <View className='device-page'>
+      <View className='page-header'>
+        <Text className='page-title'>{device.name}</Text>
+        <Text className='page-subtitle'>设备运行状态良好</Text>
+      </View>
+
+      <View className='status-card'>
+        <View className='status-badge'>
+          <View className='status-dot'></View>
+          <Text className='status-text'>4G 在线</Text>
+        </View>
+        <View className='battery-section'>
+          <Text className='battery-percent'>{device.battery}<Text className='percent'>%</Text></Text>
+          <Text className='battery-label'>剩余电量 (预计续航 {device.daysLeft} 天)</Text>
+        </View>
+        <View className='device-avatar'>
+          <View className='robot-icon'>
+            <Image className='robot-img' src={require('../../assets/tab-icons/robot.png')} mode='aspectFit' />
+          </View>
+        </View>
+      </View>
+
+      <View className='section-title'>基础控制</View>
+      <View className='control-card'>
+        <View className='control-item'>
+          <View className='control-left'>
+            <View className='icon-bg purple'>
+              <Image
+                className='control-icon-img'
+                src={require('../../assets/tab-icons/moon.png')}
+                mode='aspectFit'
+              />
+            </View>
+            <View className='control-info'>
+              <Text className='control-name'>定时休眠</Text>
+              <Text className='control-detail'>{device.sleepTime}</Text>
+            </View>
+          </View>
+          <Switch
+            checked={device.sleepEnabled}
+            onChange={handleSleepToggle}
+            color='#FF8C42'
+          />
+        </View>
+
+        <View className='divider'></View>
+
+        <View className='control-item volume-item'>
+          <View className='volume-header'>
+            <View className='control-left'>
+              <View className='icon-bg orange'>
+                <Image
+                  className='control-icon-img'
+                  src={require('../../assets/tab-icons/orange-speaker.png')}
+                  mode='aspectFit'
+                />
+              </View>
+              <Text className='control-name'>外放音量</Text>
+            </View>
+          </View>
+          <View className='volume-slider'>
+            <Image
+              className='volume-icon'
+              src={require('../../assets/tab-icons/unspeaker.png')}
+              mode='aspectFit'
+            />
+            <Slider
+              className='slider'
+              min={0}
+              max={100}
+              value={device.volume}
+              onChange={handleVolumeChange}
+              activeColor='#FF8C42'
+              backgroundColor='#E5E5E5'
+              blockColor='#FF8C42'
+            />
+            <Image
+              className='volume-icon'
+              src={require('../../assets/tab-icons/orange-speaker.png')}
+              mode='aspectFit'
+            />
+          </View>
+        </View>
+      </View>
+
+    </View>
+  )
+}