feat(miniprogram): 按设计稿重写小程序前端界面

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

@@ -272,6 +272,7 @@ export default function Device() {
   if (isLoading) {
     return (
       <View className='device-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='loading'>
           <Text>加载中...</Text>
         </View>
@@ -283,12 +284,13 @@ export default function Device() {
   if (isGuest) {
     return (
       <View className='device-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='guest-hero'>
           <View className='guest-device-icon'>
-            <Image className='robot-img' src={require('../../assets/tab-icons/robot.png')} mode='aspectFit' />
+            <Image className='guest-mascot' src={require('../../assets/ui/dog-happy.png')} mode='aspectFit' />
           </View>
-          <Text className='guest-title'>伴伴宝贝陪伴设备</Text>
-          <Text className='guest-subtitle'>查看设备状态、定位轨迹、亲子消息和休眠管理。浏览功能后，可在需要绑定设备时登录。</Text>
+          <Text className='guest-title'>先认识一下伴伴</Text>
+          <Text className='guest-subtitle'>无需登录即可浏览主要能力，绑定设备时再完成登录。</Text>
         </View>
 
         <View className='guest-feature-grid'>
@@ -321,6 +323,11 @@ export default function Device() {
             <Text className='guest-primary-btn-text'>去登录 / 绑定设备</Text>
           </View>
         </View>
+        <Image
+          className='guest-footer-art'
+          src={require('../../assets/ui/paw-dog-footer.png')}
+          mode='aspectFit'
+        />
         {systemBanner}
       </View>
     )
@@ -330,13 +337,14 @@ export default function Device() {
     const hasPendingDevice = Boolean(pendingBinding?.device_id)
     return (
       <View className='device-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='page-header'>
           <Text className='page-title'>设备首页</Text>
         </View>
 
         <View className='empty-card'>
           <View className='empty-robot'>
-            <Image className='robot-img' src={require('../../assets/tab-icons/robot.png')} mode='aspectFit' />
+            <Image className='empty-mascot' src={require('../../assets/ui/dog-happy.png')} mode='aspectFit' />
           </View>
           <Text className='empty-title'>{hasPendingDevice ? '设备已绑定，待关联宝贝' : '先绑定一台伴伴设备'}</Text>
           <Text className='empty-subtitle'>
@@ -348,6 +356,7 @@ export default function Device() {
             <Text className='empty-btn-text'>{hasPendingDevice ? '关联宝贝' : '添加设备'}</Text>
           </View>
         </View>
+        <Image className='guest-footer-art' src={require('../../assets/ui/paw-dog-footer.png')} mode='aspectFit' />
         {systemBanner}
       </View>
     )
@@ -357,6 +366,7 @@ export default function Device() {
     const hasPendingDevice = Boolean(pendingBinding?.device_id)
     return (
       <View className='device-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='page-header'>
           <Text className='page-title'>{child.child_name} 的伴伴</Text>
         </View>
@@ -373,7 +383,7 @@ export default function Device() {
 
         <View className='empty-card'>
           <View className='empty-robot'>
-            <Image className='robot-img' src={require('../../assets/tab-icons/robot.png')} mode='aspectFit' />
+            <Image className='empty-mascot' src={require('../../assets/ui/dog-happy.png')} mode='aspectFit' />
           </View>
           <Text className='empty-title'>{hasPendingDevice ? '有设备待关联' : '给当前宝贝绑定一台设备'}</Text>
           <Text className='empty-subtitle'>
@@ -385,6 +395,7 @@ export default function Device() {
             <Text className='empty-btn-text'>{hasPendingDevice ? '关联到当前宝贝' : '去绑定设备'}</Text>
           </View>
         </View>
+        <Image className='guest-footer-art' src={require('../../assets/ui/paw-dog-footer.png')} mode='aspectFit' />
         {systemBanner}
       </View>
     )
@@ -394,6 +405,16 @@ 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 signalLabel = getSignalLabel(deviceStatus?.signal)
   const versionLabel = deviceStatus?.version || '--'
   const coordinateLabel = formatCoordinates(deviceStatus)
@@ -405,7 +426,8 @@ export default function Device() {
 
   return (
     <View className='device-page'>
-      <View className='page-header'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
+      <View className='page-header bound-device-header'>
         <Text className='page-title'>{pageTitle}</Text>
       </View>
 
@@ -433,7 +455,7 @@ export default function Device() {
         </View>
         <View className='device-avatar'>
           <View className='robot-icon'>
-            <Image className='robot-img' src={require('../../assets/tab-icons/robot.png')} mode='aspectFit' />
+            <Image className='device-mascot' src={statusMascotSrc} mode='aspectFit' />
           </View>
         </View>
       </View>