完善设备端体验与微信校验支持

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

@@ -25,8 +25,11 @@
   overflow: hidden;
 }
 
-.guest-card {
+.guest-chat-shell {
   margin: 0 24px;
+}
+
+.guest-card {
   padding: 44px 32px;
   border-radius: 20px;
   background: #FFFFFF;
@@ -64,6 +67,10 @@
   margin-top: 30px;
   border-radius: 16px;
   background: #07C160;
+
+  &.secondary {
+    background: #FF8C42;
+  }
 }
 
 .guest-card-btn-text {
@@ -72,6 +79,139 @@
   color: #FFFFFF;
 }
 
+.guest-demo-card,
+.guest-guide-card {
+  margin-top: 20px;
+  padding: 28px 24px;
+  border-radius: 20px;
+  background: #FFFFFF;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+.guest-demo-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.guest-demo-title,
+.guest-guide-title {
+  display: block;
+  font-size: 30px;
+  line-height: 1.35;
+  font-weight: 700;
+  color: #1A1A1A;
+}
+
+.guest-demo-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 92px;
+  height: 52px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: #FFF2E7;
+
+  &:active {
+    opacity: 0.72;
+  }
+}
+
+.guest-demo-tag-text {
+  font-size: 24px;
+  font-weight: 700;
+  color: #FF8C42;
+}
+
+.guest-demo-item {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  border-top: 1px solid #F2F2F2;
+
+  &:first-of-type {
+    border-top: none;
+  }
+
+  &:active {
+    opacity: 0.72;
+  }
+}
+
+.guest-demo-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 76px;
+  height: 76px;
+  margin-right: 20px;
+  border-radius: 20px;
+  background: #FFF2E7;
+
+  text {
+    font-size: 30px;
+    font-weight: 700;
+    color: #FF8C42;
+  }
+
+  &.parent {
+    background: #E8F8F0;
+
+    text {
+      color: #16A34A;
+    }
+  }
+}
+
+.guest-demo-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.guest-demo-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: 16px;
+  min-width: 86px;
+  height: 56px;
+  padding: 0 18px;
+  border-radius: 14px;
+  background: #F5F7FA;
+
+  &:active {
+    opacity: 0.72;
+  }
+}
+
+.guest-demo-action-text {
+  font-size: 24px;
+  font-weight: 700;
+  color: #FF8C42;
+}
+
+.guest-demo-name {
+  display: block;
+  font-size: 28px;
+  line-height: 1.35;
+  font-weight: 700;
+  color: #1A1A1A;
+}
+
+.guest-demo-message,
+.guest-guide-desc {
+  display: block;
+  margin-top: 8px;
+  font-size: 25px;
+  line-height: 1.55;
+  color: #666666;
+}
+
 .conversation-item {
   background: #FFFFFF;
   border-radius: 20px;

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

@@ -64,6 +64,15 @@ export default function Chat() {
     Taro.navigateTo({ url: '/pages/login/index' })
   }
 
+  const handleGuestPreviewTap = (title: string, content: string) => {
+    Taro.showModal({
+      title,
+      content,
+      showCancel: false,
+      confirmText: '我知道了',
+    })
+  }
+
   return (
     <View className='chat-page'>
       <View className='page-header'>
@@ -71,12 +80,82 @@ export default function Chat() {
       </View>
 
       {isGuest ? (
-        <View className='guest-card'>
-          <Text className='guest-card-icon'>💬</Text>
-          <Text className='guest-card-title'>亲子互动会话</Text>
-          <Text className='guest-card-desc'>绑定设备后，可以在这里查看宝贝、家长和 AI 玩伴之间的消息记录。</Text>
-          <View className='guest-card-btn' onClick={handleGuestLogin}>
-            <Text className='guest-card-btn-text'>登录后查看</Text>
+        <View className='guest-chat-shell'>
+          <View className='guest-card'>
+            <Text className='guest-card-icon'>💬</Text>
+            <Text className='guest-card-title'>亲子互动会话</Text>
+            <Text className='guest-card-desc'>这里会汇总宝贝、家长和 AI 玩伴之间的消息。绑定设备后，真实会话会按宝贝和设备自动归档。</Text>
+          </View>
+
+          <View className='guest-demo-card'>
+            <View className='guest-demo-header'>
+              <Text className='guest-demo-title'>会话示例</Text>
+              <View
+                className='guest-demo-tag'
+                onClick={() => handleGuestPreviewTap(
+                  '会话预览',
+                  '这里展示玩伴页的会话能力。绑定设备后，会显示宝贝、家长和 AI 玩伴的真实消息记录。'
+                )}
+              >
+                <Text className='guest-demo-tag-text'>预览</Text>
+              </View>
+            </View>
+            <View
+              className='guest-demo-item'
+              onClick={() => handleGuestPreviewTap(
+                'AI 玩伴',
+                '绑定设备后，可以在这里查看宝贝与 AI 玩伴的真实会话记录，包括聊天内容、时间和对应宝贝。'
+              )}
+            >
+              <View className='guest-demo-avatar'>
+                <Text>伴</Text>
+              </View>
+              <View className='guest-demo-content'>
+                <Text className='guest-demo-name'>AI 玩伴</Text>
+                <Text className='guest-demo-message'>陪宝贝聊天、讲故事，也能留下可回看记录。</Text>
+              </View>
+              <View
+                className='guest-demo-action'
+                onClick={() => handleGuestPreviewTap(
+                  'AI 玩伴',
+                  '绑定设备后，可以在这里查看宝贝与 AI 玩伴的真实会话记录，包括聊天内容、时间和对应宝贝。'
+                )}
+              >
+                <Text className='guest-demo-action-text'>查看</Text>
+              </View>
+            </View>
+            <View
+              className='guest-demo-item'
+              onClick={() => handleGuestPreviewTap(
+                '家长留言',
+                '绑定设备后，家长可以查看消息记录，也可以给宝贝发送语音留言，设备端会收到对应提醒。'
+              )}
+            >
+              <View className='guest-demo-avatar parent'>
+                <Text>家</Text>
+              </View>
+              <View className='guest-demo-content'>
+                <Text className='guest-demo-name'>家长留言</Text>
+                <Text className='guest-demo-message'>家长可查看设备消息，并给宝贝发送语音留言。</Text>
+              </View>
+              <View
+                className='guest-demo-action'
+                onClick={() => handleGuestPreviewTap(
+                  '家长留言',
+                  '绑定设备后，家长可以查看消息记录，也可以给宝贝发送语音留言，设备端会收到对应提醒。'
+                )}
+              >
+                <Text className='guest-demo-action-text'>查看</Text>
+              </View>
+            </View>
+          </View>
+
+          <View className='guest-guide-card'>
+            <Text className='guest-guide-title'>开始使用</Text>
+            <Text className='guest-guide-desc'>浏览功能不需要登录；当你需要绑定设备、查看真实会话记录时，再进入登录和绑定流程。</Text>
+            <View className='guest-card-btn secondary' onClick={handleGuestLogin}>
+              <Text className='guest-card-btn-text'>去登录 / 绑定设备</Text>
+            </View>
           </View>
         </View>
       ) : loading ? (