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

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

@@ -569,6 +569,7 @@ export default function Bind() {
   if (loading) {
     return (
       <View className='bind-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='loading'>
           <Text>加载中...</Text>
         </View>
@@ -579,6 +580,7 @@ export default function Bind() {
 
   return (
     <View className='bind-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
       <View className='bind-header'>
         <View className='back-btn' onClick={handleBack}>
           <Image className='back-icon' src={require('../../assets/tab-icons/arrow-left.png')} mode='aspectFit' />
@@ -587,6 +589,16 @@ export default function Bind() {
         <Text className='title'>{pageTitle}</Text>
       </View>
 
+      {bindStatus === SESSION_STATUS_PENDING && (
+        <Image className='bind-state-mascot pending' src={require('../../assets/ui/dog-running.png')} mode='aspectFit' />
+      )}
+      {bindStatus === SESSION_STATUS_COMPLETED && (
+        <Image className='bind-state-mascot success' src={require('../../assets/ui/dog-success.png')} mode='aspectFit' />
+      )}
+      {(bindStatus === SESSION_STATUS_EXPIRED || bindStatus === SESSION_STATUS_FAILED || bindStatus === SESSION_STATUS_CANCELLED) && (
+        <Image className='bind-state-mascot failure' src={require('../../assets/ui/dog-failure.png')} mode='aspectFit' />
+      )}
+
       {isAddingCard ? (
         <View className='pending-device-card'>
           <View className='icon-bg orange'>

banban-mini/src/pages/chat/detail/index.tsx

@@ -748,6 +748,7 @@ export default function ChatDetail() {
 
   return (
     <View className='chat-detail-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
       <View className='chat-header'>
         <View className='back-btn' onClick={handleBack}>
           <Image src={require('../../../assets/tab-icons/arrow-left.png')} className='back-arrow-img' />

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

@@ -75,6 +75,7 @@ export default function Chat() {
 
   return (
     <View className='chat-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
       <View className='page-header'>
         <Text className='page-title'>玩伴</Text>
       </View>

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

@@ -6,6 +6,37 @@
   padding-bottom: calc(160px + env(safe-area-inset-bottom));
 }
 
+// Keep the artwork reference's title band in the page flow when custom
+// navigation is enabled.  The page-local rule ensures it wins over the
+// generated page stylesheet order in the mini-program runtime.
+.bb-design-nav-title {
+  position: fixed;
+  top: 88px;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 84px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(237, 237, 237, 0.95);
+  background: rgba(255, 255, 255, 0.96);
+  color: #222;
+  font-size: 26px;
+  line-height: 1;
+  text-align: center;
+  font-weight: 700;
+  pointer-events: none;
+}
+
+.bb-design-nav-title text {
+  display: block;
+  color: #222 !important;
+  font-size: 26px !important;
+  line-height: 1;
+}
+
 .page-header {
   padding: 80px 32px 24px;
 

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>

banban-mini/src/pages/family-invite/index.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text, Image } from '@tarojs/components'
 import Taro, { useDidShow, useRouter } from '@tarojs/taro'
 import { useState } from 'react'
 
@@ -75,6 +75,8 @@ export default function FamilyInvite() {
 
   return (
     <View className='family-invite-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
+      <Image className='invite-mascot' src={require('../../assets/ui/dog-running.png')} mode='aspectFit' />
       <View className='invite-panel'>
         <Text className='invite-title'>家庭共享邀请</Text>
         {loading ? (

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

@@ -377,6 +377,7 @@ export default function Location() {
 
   return (
     <View className='location-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
       <View className='page-header'>
         <Text className='page-title'>设备定位</Text>
       </View>

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

@@ -1,4 +1,4 @@
-import { View, Text, Button, Checkbox, CheckboxGroup } from '@tarojs/components'
+import { View, Text, Button, Checkbox, CheckboxGroup, Image } from '@tarojs/components'
 import { useEffect, useState } from 'react'
 import Taro from '@tarojs/taro'
 import { getToken, wechatLogin } from '@/services/auth'
@@ -134,7 +134,11 @@ export default function Login() {
     <View className='login-page'>
       <View className='login-header'>
         <View className='logo'>
-          <Text className='logo-icon'>🤖</Text>
+          <Image
+            className='login-hero-art'
+            src={require('../../assets/ui/login-hero.png')}
+            mode='aspectFit'
+          />
         </View>
         <Text className='title'>伴伴</Text>
         <Text className='subtitle'>让关爱随时随地</Text>
@@ -143,15 +147,15 @@ export default function Login() {
       <View className='login-content'>
         <View className='features'>
           <View className='feature-item'>
-            <Text className='feature-icon'>💬</Text>
+            <Image className='feature-icon-image' src={require('../../assets/tab-icons/chat-icon.png')} mode='aspectFit' />
             <Text className='feature-text'>AI 智能对话</Text>
           </View>
           <View className='feature-item'>
-            <Text className='feature-icon'>📍</Text>
+            <Image className='feature-icon-image' src={require('../../assets/tab-icons/location-icon.png')} mode='aspectFit' />
             <Text className='feature-text'>实时定位追踪</Text>
           </View>
           <View className='feature-item'>
-            <Text className='feature-icon'>🔋</Text>
+            <Image className='feature-icon-image' src={require('../../assets/tab-icons/device-icon.png')} mode='aspectFit' />
             <Text className='feature-text'>设备状态监控</Text>
           </View>
         </View>

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

@@ -1,4 +1,4 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text, Image } from '@tarojs/components'
 import { useEffect, useState } from 'react'
 import Taro, { useRouter } from '@tarojs/taro'
 import { getToken } from '@/services/auth'
@@ -50,6 +50,8 @@ export default function NotificationEntry() {
 
   return (
     <View className='notification-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
+      <Image className='notification-mascot' src={require('../../assets/ui/dog-question.png')} mode='aspectFit' />
       <View className='notification-panel'>
         <Text className='notification-title'>伴伴</Text>
         <Text className='notification-message'>{message}</Text>

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

@@ -108,6 +108,7 @@ export default function SleepSchedule() {
   if (isLoading) {
     return (
       <View className='sleep-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='loading'>
           <Text>加载中...</Text>
         </View>
@@ -119,6 +120,7 @@ export default function SleepSchedule() {
   if (!child) {
     return (
       <View className='sleep-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='page-header'>
           <Text className='page-title'>定时休眠</Text>
           <Text className='page-subtitle'>先绑定设备并选择宝贝，再为对应设备设置休眠时间</Text>
@@ -135,6 +137,7 @@ export default function SleepSchedule() {
   if (!binding) {
     return (
       <View className='sleep-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='page-header'>
           <Text className='page-title'>定时休眠</Text>
           <Text className='page-subtitle'>{child.child_name} 还没有绑定设备</Text>
@@ -157,6 +160,7 @@ export default function SleepSchedule() {
 
   return (
     <View className='sleep-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
       <View className='page-header'>
         <Text className='page-title'>定时休眠</Text>
         <Text className='page-subtitle'>每天在设定时段内，设备将进入不可启动状态</Text>
@@ -169,6 +173,7 @@ export default function SleepSchedule() {
           <Text className='hero-detail'>{childName} 的当前休眠时段：{currentRange}</Text>
         </View>
         <View className='hero-icon-wrap'>
+          <Image className='sleep-hero-mascot' src={require('../../assets/ui/dog-sleep.png')} mode='aspectFit' />
           <Image className='hero-icon' src={require('../../assets/tab-icons/moon.png')} mode='aspectFit' />
         </View>
       </View>

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

@@ -962,6 +962,7 @@ export default function Sleep() {
   if (loading) {
     return (
       <View className='manage-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='loading'>
           <Text>加载中...</Text>
         </View>
@@ -973,6 +974,7 @@ export default function Sleep() {
   if (isGuest) {
     return (
       <View className='manage-page'>
+        <View className='bb-design-nav-title'><Text>微信登录</Text></View>
         <View className='page-header'>
           <Text className='page-title'>设置与管理</Text>
         </View>
@@ -1019,6 +1021,7 @@ export default function Sleep() {
             <Text className='guest-manage-btn-text'>去登录 / 绑定设备</Text>
           </View>
         </View>
+        <Image className='manage-footer-art' src={require('../../assets/ui/paw-dog-footer.png')} mode='aspectFit' />
         {systemBanner}
       </View>
     )
@@ -1158,6 +1161,7 @@ export default function Sleep() {
 
   return (
     <View className='manage-page'>
+      <View className='bb-design-nav-title'><Text>微信登录</Text></View>
       <View className='page-header'>
         <Text className='page-title'>设置与管理</Text>
       </View>