feat: improve Banban UI and binding diagnostics

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

@@ -32,13 +32,15 @@
 
   .character-info {
     flex: 1;
+    min-width: 0;
     display: flex;
     align-items: center;
 
     .character-avatar {
       width: 72px;
       height: 72px;
-      background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
+      flex-shrink: 0;
+      background: #fff1d4;
       border-radius: 18px;
       display: flex;
       align-items: center;
@@ -48,10 +50,16 @@
     }
 
     .character-text {
+      flex: 1;
+      min-width: 0;
       display: flex;
       flex-direction: column;
 
       .character-name {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         font-size: 32px;
         font-weight: 600;
         color: #1A1A1A;
@@ -61,6 +69,7 @@
       .character-desc {
         font-size: 24px;
         color: #999999;
+        word-break: break-word;
       }
     }
   }
@@ -124,8 +133,8 @@
 .user-avatar {
   width: 68px;
   height: 68px;
-  background: #FFE4C4;
-  border-radius: 50%;
+  background: #fff1d4;
+  border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -139,7 +148,7 @@
 .peer-avatar {
   width: 68px;
   height: 68px;
-  background: #FEF3E8;
+  background: #fff1d4;
   border-radius: 18px;
   display: flex;
   align-items: center;
@@ -253,6 +262,6 @@
   letter-spacing: 2px;
 }
 
-.chat-avatar-art { width: 100%; height: 100%; }
+.chat-avatar-art { display: block; width: 100%; height: 100%; }
 .user-avatar { margin-left: 14px; }
 .message-item.user .message-bubble { margin: 0; }

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

@@ -768,6 +768,8 @@ export default function ChatDetail() {
       <ScrollView
         className='chat-list'
         scrollY
+        enhanced
+        showScrollbar={false}
         scrollWithAnimation={scrollWithAnimation}
         scrollIntoView={scrollTarget}
       >

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

@@ -6,20 +6,8 @@
   padding-bottom: calc(120px + env(safe-area-inset-bottom));
 }
 
-.page-header {
-  padding: 80px 32px 24px;
-
-  .page-title {
-    font-size: 44px;
-    font-weight: 700;
-    color: #1A1A1A;
-    display: block;
-    line-height: 1.2;
-  }
-}
-
 .conversation-list {
-  height: calc(100vh - 200px);
+  height: calc(100vh - var(--bb-navigation-bar-top) - var(--bb-navigation-bar-height) - 144px - env(safe-area-inset-bottom));
   padding: 0 24px;
   box-sizing: border-box;
   overflow: hidden;
@@ -113,7 +101,7 @@
   height: 52px;
   padding: 0 18px;
   border-radius: 999px;
-  background: #FFF2E7;
+  background: #fff1d4;
 
   &:active {
     opacity: 0.72;
@@ -159,7 +147,7 @@
   }
 
   &.parent {
-    background: #E8F8F0;
+    background: #fff1d4;
 
     text {
       color: #16A34A;
@@ -262,17 +250,23 @@
     color: #999999;
     flex-shrink: 0;
     margin-left: 16px;
+    white-space: nowrap;
   }
 }
 
 .conversation-name-wrap {
+  flex: 1;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
   min-width: 0;
 }
 
 .conversation-name {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 32px;
   font-weight: 600;
   color: #1A1A1A;
@@ -280,6 +274,7 @@
 }
 
 .conversation-tag {
+  flex-shrink: 0;
   height: 40px;
   padding: 0 14px;
   border-radius: 999px;
@@ -301,12 +296,17 @@
 }
 
 .conversation-footer {
+  min-width: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   .last-message {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
     font-size: 28px;
+    line-height: 1.5;
     color: #666666;
     flex: 1;
     overflow: hidden;
@@ -318,6 +318,9 @@
 
 .conversation-meta {
   display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   margin-top: 10px;
   font-size: 24px;
   color: #A0A0A0;
@@ -369,5 +372,5 @@
   color: #1A1A1A;
 }
 
-.conversation-avatar-art { width: 100%; height: 100%; }
+.conversation-avatar-art { display: block; width: 100%; height: 100%; }
 .conversation-avatar { background: #fff1d4; padding: 8px; box-sizing: border-box; }

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

@@ -1,4 +1,5 @@
 import { getParticipantArtwork } from '@/utils/artwork'
+import { formatConversationPreview } from '@/utils/chat-preview'
 import PageTitle from '@/components/page-title'
 import { getPageStyle } from '@/utils/page-style'
 import { setActiveTabRoute } from '@/utils/tab-bar'
@@ -172,7 +173,7 @@ export default function Chat() {
           <Text className='empty-title'>当前宝贝暂无会话</Text>
         </View>
       ) : (
-        <ScrollView className='conversation-list' scrollY>
+        <ScrollView className='conversation-list' scrollY enhanced showScrollbar={false}>
           {conversations.map((conversation) => (
             <View
               key={conversation.key}
@@ -191,9 +192,9 @@ export default function Chat() {
                   <Text className='conversation-time'>{conversation.time}</Text>
                 </View>
                 <View className='conversation-footer'>
-                  <Text className='last-message' numberOfLines={1}>
-                    {conversation.lastMessage}
-                  </Text>
+                  <View className='last-message'>
+                    {formatConversationPreview(conversation.lastMessage)}
+                  </View>
                 </View>
                 {conversation.childName && <Text className='conversation-meta'>{conversation.childName}</Text>}
               </View>