huangyicao/banban
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mini): align companion pages and show OTA progress

Browse Source
This commit is contained in:
stu2not
2026-09-15 11:25:11 +08:00
parent 9f3a4e966f
commit fce6cd1cc1
51 changed files with 537 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
banban-mini/src/pages/chat/detail/index.scss
+6 -1
View File
@@ -92,7 +92,8 @@
align-items: flex-start;
&.user {
flex-direction: row-reverse;
flex-direction: row;
justify-content: flex-end;
.message-main {
align-items: flex-end;
@@ -251,3 +252,7 @@
font-weight: 600;
letter-spacing: 2px;
}
.chat-avatar-art { width: 100%; height: 100%; }
.user-avatar { margin-left: 14px; }
.message-item.user .message-bubble { margin: 0; }
banban-mini/src/pages/chat/detail/index.tsx
+6 -4
View File
@@ -1,3 +1,5 @@
import { getParticipantArtwork } from '@/utils/artwork'
import { getPageStyle } from '@/utils/page-style'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { useEffect, useRef, useState } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
@@ -747,14 +749,14 @@ export default function ChatDetail() {
}
return (
<View className='chat-detail-page'>
<View className='chat-detail-page' style={getPageStyle(true)}>
<View className='chat-header'>
<View className='back-btn' onClick={handleBack}>
<Image src={require('../../../assets/tab-icons/arrow-left.png')} className='back-arrow-img' />
</View>
<View className='character-info'>
<View className='character-avatar'>
<Text>{character.icon}</Text>
<Image className='chat-avatar-art' src={getParticipantArtwork(character.peerKind, decodedRoleKey)} mode='aspectFit' />
</View>
<View className='character-text'>
<Text className='character-name'>{character.name}</Text>
@@ -797,13 +799,13 @@ export default function ChatDetail() {
</View>
</View>
<View className='user-avatar'>
<Text className='avatar-img'>{msg.senderType === 'parent' ? '👨' : '👦'}</Text>
<Image className='chat-avatar-art' src={getParticipantArtwork(msg.senderType)} mode='aspectFit' />
</View>
</View>
) : (
<View className='message-item peer'>
<View className='peer-avatar'>
<Text className='robot-emoji'>{msg.senderType === 'child' ? '🧒' : character.icon}</Text>
<Image className='chat-avatar-art' src={getParticipantArtwork(msg.senderType || character.peerKind, decodedRoleKey)} mode='aspectFit' />
</View>
<View className='message-main'>
<Text className='message-meta'>{formatParticipantLabel(msg)}</Text>
banban-mini/src/pages/chat/index.scss
+3
View File
@@ -368,3 +368,6 @@
font-weight: 700;
color: #1A1A1A;
}
.conversation-avatar-art { width: 100%; height: 100%; }
.conversation-avatar { background: #fff1d4; padding: 8px; box-sizing: border-box; }
banban-mini/src/pages/chat/index.tsx
+7 -5
View File
@@ -1,4 +1,6 @@
import { View, Text, ScrollView } from '@tarojs/components'
import { getParticipantArtwork } from '@/utils/artwork'
import { getPageStyle } from '@/utils/page-style'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { getToken } from '@/services/auth'
@@ -74,7 +76,7 @@ export default function Chat() {
}
return (
<View className='chat-page'>
<View className='chat-page' style={getPageStyle(true)}>
<View className='page-header'>
<Text className='page-title'>玩伴</Text>
</View>
@@ -108,7 +110,7 @@ export default function Chat() {
)}
>
<View className='guest-demo-avatar'>
<Text>伴</Text>
<Image className='conversation-avatar-art' src={getParticipantArtwork('ai')} mode='aspectFit' />
</View>
<View className='guest-demo-content'>
<Text className='guest-demo-name'>AI 玩伴</Text>
@@ -132,7 +134,7 @@ export default function Chat() {
)}
>
<View className='guest-demo-avatar parent'>
<Text>家</Text>
<Image className='conversation-avatar-art' src={getParticipantArtwork('parent')} mode='aspectFit' />
</View>
<View className='guest-demo-content'>
<Text className='guest-demo-name'>家长留言</Text>
@@ -175,7 +177,7 @@ export default function Chat() {
onClick={() => handleConversationClick(conversation)}
>
<View className='conversation-avatar'>
<Text className='avatar-icon'>{conversation.avatar}</Text>
<Image className='conversation-avatar-art' src={getParticipantArtwork(conversation.peerKind, conversation.roleKey)} mode='aspectFit' />
</View>
<View className='conversation-content'>
<View className='conversation-header'>