add banbanmini

2026-03-24 13:15:03 +08:00
parent 42567b7605
commit 0d0f995dc2
59 changed files with 26319 additions and 0 deletions
@@ -0,0 +1,156 @@
+import { View, Text, ScrollView, Image } from '@tarojs/components'
+import { useState, useEffect, useRef } from 'react'
+import Taro, { useRouter } from '@tarojs/taro'
+import { getMessages, getCharacter, ChatMessage, Character } from '../../../services/chat'
+import './index.scss'
+
+export default function ChatDetail() {
+  const router = useRouter()
+  const { id } = router.params
+  const conversationId = parseInt(id || '1')
+
+  const [character, setCharacter] = useState<Character>({
+    id: conversationId,
+    name: decodeURIComponent(router.params.name || 'AI 玩伴'),
+    description: '温柔音色 / 开朗耐心',
+    icon: '🎤'
+  })
+
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [playingId, setPlayingId] = useState<number | null>(null)
+  const audioCtx = useRef<Taro.InnerAudioContext | null>(null)
+
+  useEffect(() => {
+    loadChatData()
+    return () => {
+      // 页面卸载时销毁音频
+      audioCtx.current?.destroy()
+    }
+  }, [conversationId])
+
+  const loadChatData = async () => {
+    const char = await getCharacter(conversationId)
+    if (char) {
+      setCharacter(char)
+      Taro.setNavigationBarTitle({ title: char.name })
+    }
+    const msgs = await getMessages(conversationId)
+    setMessages(msgs)
+  }
+
+  const handlePlayAudio = (msg: ChatMessage) => {
+    if (!msg.audioUrl) return
+
+    // 如果点的是正在播放的那条，就停止
+    if (playingId === msg.id) {
+      audioCtx.current?.stop()
+      audioCtx.current?.destroy()
+      audioCtx.current = null
+      setPlayingId(null)
+      return
+    }
+
+    // 停掉上一条
+    audioCtx.current?.stop()
+    audioCtx.current?.destroy()
+
+    const ctx = Taro.createInnerAudioContext()
+    ctx.src = msg.audioUrl
+    ctx.autoplay = true
+    ctx.onPlay(() => setPlayingId(msg.id))
+    ctx.onEnded(() => {
+      setPlayingId(null)
+      ctx.destroy()
+      audioCtx.current = null
+    })
+    ctx.onError(() => {
+      setPlayingId(null)
+      ctx.destroy()
+      audioCtx.current = null
+      Taro.showToast({ title: '播放失败', icon: 'none' })
+    })
+    audioCtx.current = ctx
+  }
+
+  const handleBack = () => {
+    audioCtx.current?.stop()
+    audioCtx.current?.destroy()
+    Taro.navigateBack()
+  }
+
+  return (
+    <View className='chat-detail-page'>
+      <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>
+          </View>
+          <View className='character-text'>
+            <Text className='character-name'>{character.name}</Text>
+            <Text className='character-desc'>{character.description}</Text>
+          </View>
+        </View>
+      </View>
+
+      <ScrollView className='chat-list' scrollY>
+        {messages.map((msg, index) => (
+          <View key={msg.id}>
+            {(index === 0 || messages[index - 1].type !== msg.type ||
+              messages[index - 1].time !== msg.time) && (
+              <View className='time-divider'>
+                <Text>{msg.time}</Text>
+              </View>
+            )}
+
+            {msg.type === 'user' ? (
+              <View className='message-item user'>
+                <View className='message-bubble'>
+                  {msg.isAudio ? (
+                    <View className='audio-message' onClick={() => handlePlayAudio(msg)}>
+                      <View className={`audio-icon ${playingId === msg.id ? 'playing' : ''}`}>
+                        {playingId === msg.id ? '⏸' : '▶'}
+                      </View>
+                      <View className='audio-info'>
+                        <Text className='audio-title'>录音文件</Text>
+                        <Text className='audio-duration'>{msg.audioDuration}</Text>
+                      </View>
+                    </View>
+                  ) : (
+                    <Text>{msg.content}</Text>
+                  )}
+                </View>
+                <View className='user-avatar'>
+                  <Text className='avatar-img'>👦</Text>
+                </View>
+              </View>
+            ) : (
+              <View className='message-item ai'>
+                <View className='ai-avatar'>
+                  <Text className='robot-emoji'>{character.icon}</Text>
+                </View>
+                <View className='message-bubble'>
+                  {msg.isAudio ? (
+                    <View className='audio-message' onClick={() => handlePlayAudio(msg)}>
+                      <View className={`audio-icon orange ${playingId === msg.id ? 'playing' : ''}`}>
+                        {playingId === msg.id ? '⏸' : '▶'}
+                      </View>
+                      <View className='audio-info'>
+                        <Text className='audio-title'>录音文件</Text>
+                        <Text className='audio-duration'>{msg.audioDuration}</Text>
+                      </View>
+                    </View>
+                  ) : (
+                    <Text>{msg.content}</Text>
+                  )}
+                </View>
+              </View>
+            )}
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  )
+}