1105 lines
37 KiB
Markdown
1105 lines
37 KiB
Markdown
# 步骤 07：聊天页
|
||
|
||
> 实现聊天页：消息列表、发送消息、消息归档。
|
||
> 对应流程：`docs/流程/04_文本消息.md`
|
||
> 依赖步骤：06（频道切换）
|
||
|
||
---
|
||
|
||
## 一、目标
|
||
|
||
- [ ] ChatScreen 页面布局（头部、消息列表、输入区、语音控制栏）
|
||
- [ ] 消息列表组件（区分自己/他人消息、自动滚动）
|
||
- [ ] 消息输入区与键盘联动（随键盘上抬、空消息禁用发送）
|
||
- [ ] SendTextMessage 流程（状态机：idle → sending → idle/failed）
|
||
- [ ] OnTextMessage 消息归档（⑤ 按 TargetMode + Target 归档）
|
||
- [ ] 未读消息状态管理（弱未读红点、强未读 badge、进入频道清除）
|
||
|
||
---
|
||
|
||
## 二、任务清单
|
||
|
||
### 7.1 页面布局
|
||
|
||
**目标**：实现 ChatScreen 的三段式布局——头部、消息列表、底部（输入区 + 语音控制栏）。
|
||
|
||
**前置条件**：
|
||
- 步骤 05 的 ChannelListScreen 已实现
|
||
- 步骤 06 的频道切换已完成，可通过当前频道栏跳转到聊天页
|
||
|
||
**对应 UI 设计**：`docs/UI架构设计.md` 2.3 聊天页布局
|
||
|
||
**任务**：
|
||
|
||
1. **ChatScreen 整体布局**
|
||
```kotlin
|
||
// ui/screens/ChatScreen.kt
|
||
|
||
@Composable
|
||
fun ChatScreen(
|
||
chatViewModel: ChatViewModel,
|
||
channelViewModel: ChannelViewModel,
|
||
voiceViewModel: VoiceViewModel,
|
||
onNavigateBack: () -> Unit,
|
||
onOpenChannelDetail: (channelId: Long) -> Unit
|
||
) {
|
||
val messages by chatViewModel.messages.collectAsState()
|
||
val currentChannel by channelViewModel.currentChannel.collectAsState()
|
||
val sendMessageState by chatViewModel.sendState.collectAsState()
|
||
|
||
Column(modifier = Modifier.fillMaxSize()) {
|
||
// 头部：返回按钮 + 频道名 + 频道详情入口
|
||
ChatHeader(
|
||
channelName = currentChannel?.name ?: "",
|
||
memberCount = currentChannel?.memberCount ?: 0,
|
||
onBack = onNavigateBack,
|
||
onChannelDetail = { currentChannel?.let { onOpenChannelDetail(it.id) } }
|
||
)
|
||
|
||
// 中部：消息列表（占满剩余空间）
|
||
Box(modifier = Modifier.weight(1f)) {
|
||
MessageList(
|
||
messages = messages,
|
||
modifier = Modifier.fillMaxSize()
|
||
)
|
||
}
|
||
|
||
// 中部-底部：消息输入区（随键盘上抬）
|
||
MessageInputBar(
|
||
sendState = sendMessageState,
|
||
onSendMessage = { text -> chatViewModel.sendMessage(text) },
|
||
modifier = Modifier.fillMaxWidth()
|
||
)
|
||
|
||
// 底部：语音控制栏（固定在底部，不受键盘影响）
|
||
VoiceControlBar(
|
||
voiceViewModel = voiceViewModel,
|
||
modifier = Modifier.fillMaxWidth()
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
2. **ChatHeader 头部组件**
|
||
```kotlin
|
||
// ui/components/ChatHeader.kt
|
||
|
||
@Composable
|
||
fun ChatHeader(
|
||
channelName: String,
|
||
memberCount: Int,
|
||
onBack: () -> Unit,
|
||
onChannelDetail: () -> Unit
|
||
) {
|
||
Row(
|
||
modifier = Modifier
|
||
.fillMaxWidth()
|
||
.padding(horizontal = 8.dp, vertical = 12.dp),
|
||
verticalAlignment = Alignment.CenterVertically
|
||
) {
|
||
// 左侧：返回按钮
|
||
IconButton(onClick = onBack) {
|
||
Icon(
|
||
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
|
||
contentDescription = "返回"
|
||
)
|
||
}
|
||
|
||
// 中部：频道名 + 人数
|
||
Column(
|
||
modifier = Modifier.weight(1f),
|
||
horizontalAlignment = Alignment.CenterHorizontally
|
||
) {
|
||
Text(
|
||
text = channelName,
|
||
style = MaterialTheme.typography.titleMedium
|
||
)
|
||
Text(
|
||
text = "${memberCount}人",
|
||
style = MaterialTheme.typography.bodySmall,
|
||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||
)
|
||
}
|
||
|
||
// 右侧：频道详情入口
|
||
IconButton(onClick = onChannelDetail) {
|
||
Icon(
|
||
imageVector = Icons.Default.MoreVert,
|
||
contentDescription = "频道详情"
|
||
)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 7.2 消息列表组件
|
||
|
||
**目标**：实现消息列表渲染，区分自己/他人消息，支持自动滚动和历史浏览。
|
||
|
||
**对应 UI 设计**：`docs/UI架构设计.md` 2.3 消息显示格式
|
||
|
||
**任务**：
|
||
|
||
1. **ChatMessage 数据模型**
|
||
```kotlin
|
||
// data/Models.kt
|
||
|
||
/**
|
||
* 聊天消息实体
|
||
* 权威来源：OnTextMessage（对应 notifytextmessage）
|
||
*/
|
||
data class ChatMessage(
|
||
val id: String, // 唯一标识（用于列表 key）
|
||
val targetMode: Int, // 1=私聊, 2=频道, 3=服务器
|
||
val targetId: Long, // 目标 ID（频道 ID 或客户端 ID）
|
||
val senderId: Int, // 发送者客户端 ID
|
||
val senderName: String, // 发送者昵称
|
||
val content: String, // 消息内容
|
||
val timestamp: Long, // 消息时间戳
|
||
val isSelf: Boolean // 是否是自己发送的
|
||
)
|
||
```
|
||
|
||
2. **MessageList 消息列表**
|
||
```kotlin
|
||
// ui/components/MessageList.kt
|
||
|
||
@Composable
|
||
fun MessageList(
|
||
messages: List<ChatMessage>,
|
||
modifier: Modifier = Modifier
|
||
) {
|
||
val listState = rememberLazyListState()
|
||
val coroutineScope = rememberCoroutineScope()
|
||
|
||
// 是否在底部（用于判断是否自动滚动）
|
||
val isAtBottom by remember {
|
||
derivedStateOf {
|
||
val lastVisibleItem = listState.layoutInfo.visibleItemsInfo.lastOrNull()
|
||
lastVisibleItem != null && lastVisibleItem.index >= messages.size - 2
|
||
}
|
||
}
|
||
|
||
// 新消息到达时自动滚动到底部
|
||
LaunchedEffect(messages.size) {
|
||
if (isAtBottom || messages.isNotEmpty()) {
|
||
listState.animateScrollToItem(messages.size - 1)
|
||
}
|
||
}
|
||
|
||
LazyColumn(
|
||
state = listState,
|
||
modifier = modifier.padding(horizontal = 8.dp),
|
||
contentPadding = PaddingValues(vertical = 8.dp),
|
||
verticalArrangement = Arrangement.spacedBy(4.dp)
|
||
) {
|
||
items(
|
||
items = messages,
|
||
key = { it.id }
|
||
) { message ->
|
||
MessageItem(message = message)
|
||
}
|
||
}
|
||
|
||
// 用户查看历史消息时，新消息到达显示 "↓ 新消息" 提示条
|
||
if (!isAtBottom && messages.isNotEmpty()) {
|
||
Box(
|
||
modifier = Modifier
|
||
.fillMaxWidth()
|
||
.padding(bottom = 8.dp),
|
||
contentAlignment = Alignment.Center
|
||
) {
|
||
FilledTonalButton(
|
||
onClick = {
|
||
coroutineScope.launch {
|
||
listState.animateScrollToItem(messages.size - 1)
|
||
}
|
||
}
|
||
) {
|
||
Icon(Icons.Default.ArrowDropDown, contentDescription = null)
|
||
Spacer(Modifier.width(4.dp))
|
||
Text("新消息")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
3. **MessageItem 单条消息**
|
||
```kotlin
|
||
// ui/components/MessageItem.kt
|
||
|
||
@Composable
|
||
fun MessageItem(message: ChatMessage) {
|
||
val timeText = remember(message.timestamp) {
|
||
SimpleDateFormat("HH:mm", Locale.getDefault())
|
||
.format(Date(message.timestamp))
|
||
}
|
||
|
||
Column(
|
||
modifier = Modifier
|
||
.fillMaxWidth()
|
||
.padding(vertical = 4.dp),
|
||
horizontalAlignment = if (message.isSelf) Alignment.End else Alignment.Start
|
||
) {
|
||
// 发送者名称 + 时间
|
||
Row(
|
||
verticalAlignment = Alignment.CenterVertically,
|
||
horizontalArrangement = if (message.isSelf) Arrangement.End else Arrangement.Start,
|
||
modifier = Modifier.fillMaxWidth()
|
||
) {
|
||
if (!message.isSelf) {
|
||
Text(
|
||
text = message.senderName,
|
||
style = MaterialTheme.typography.labelMedium,
|
||
color = MaterialTheme.colorScheme.primary
|
||
)
|
||
Spacer(Modifier.width(8.dp))
|
||
}
|
||
Text(
|
||
text = timeText,
|
||
style = MaterialTheme.typography.labelSmall,
|
||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||
)
|
||
if (message.isSelf) {
|
||
Spacer(Modifier.width(8.dp))
|
||
Text(
|
||
text = message.senderName,
|
||
style = MaterialTheme.typography.labelMedium,
|
||
color = MaterialTheme.colorScheme.primary
|
||
)
|
||
}
|
||
}
|
||
|
||
Spacer(Modifier.height(2.dp))
|
||
|
||
// 消息气泡
|
||
Surface(
|
||
shape = RoundedCornerShape(12.dp),
|
||
color = if (message.isSelf) {
|
||
MaterialTheme.colorScheme.primaryContainer
|
||
} else {
|
||
MaterialTheme.colorScheme.surfaceVariant
|
||
},
|
||
modifier = Modifier.widthIn(max = 280.dp)
|
||
) {
|
||
Text(
|
||
text = message.content,
|
||
style = MaterialTheme.typography.bodyMedium,
|
||
modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp)
|
||
)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
4. **消息长按操作菜单**
|
||
```kotlin
|
||
// ui/components/MessageContextMenu.kt
|
||
|
||
@Composable
|
||
fun MessageContextMenu(
|
||
message: ChatMessage,
|
||
onCopy: () -> Unit,
|
||
onPokeSender: () -> Unit,
|
||
onDismiss: () -> Unit
|
||
) {
|
||
AlertDialog(
|
||
onDismissRequest = onDismiss,
|
||
title = { Text(message.senderName) },
|
||
text = {
|
||
Column {
|
||
DropdownMenuItem(
|
||
text = { Text("📋 复制") },
|
||
onClick = {
|
||
onCopy()
|
||
onDismiss()
|
||
}
|
||
)
|
||
DropdownMenuItem(
|
||
text = { Text("🫴 Poke") },
|
||
onClick = {
|
||
onPokeSender()
|
||
onDismiss()
|
||
}
|
||
)
|
||
}
|
||
},
|
||
confirmButton = {},
|
||
dismissButton = {
|
||
TextButton(onClick = onDismiss) { Text("取消") }
|
||
}
|
||
)
|
||
}
|
||
```
|
||
|
||
### 7.3 消息输入区
|
||
|
||
**目标**：实现消息输入框和发送按钮，支持键盘联动。
|
||
|
||
**对应 UI 设计**：`docs/UI架构设计.md` 2.3 消息输入区与键盘联动
|
||
|
||
**任务**：
|
||
|
||
```kotlin
|
||
// ui/components/MessageInputBar.kt
|
||
|
||
@Composable
|
||
fun MessageInputBar(
|
||
sendState: MessageSendState,
|
||
onSendMessage: (String) -> Unit,
|
||
modifier: Modifier = Modifier
|
||
) {
|
||
var inputText by remember { mutableStateOf("") }
|
||
|
||
// 发送成功后清空输入框
|
||
LaunchedEffect(sendState) {
|
||
if (sendState is MessageSendState.Idle && sendState.justSent) {
|
||
inputText = ""
|
||
}
|
||
}
|
||
|
||
Row(
|
||
modifier = modifier
|
||
.background(MaterialTheme.colorScheme.surface)
|
||
.padding(horizontal = 8.dp, vertical = 8.dp),
|
||
verticalAlignment = Alignment.CenterVertically
|
||
) {
|
||
// 输入框
|
||
OutlinedTextField(
|
||
value = inputText,
|
||
onValueChange = { inputText = it },
|
||
modifier = Modifier.weight(1f),
|
||
placeholder = {
|
||
Text(
|
||
"输入消息...",
|
||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||
)
|
||
},
|
||
maxLines = 4,
|
||
keyboardOptions = KeyboardOptions(
|
||
imeAction = ImeAction.Send
|
||
),
|
||
keyboardActions = KeyboardActions(
|
||
onSend = {
|
||
if (inputText.isNotBlank()) {
|
||
onSendMessage(inputText.trim())
|
||
}
|
||
}
|
||
)
|
||
)
|
||
|
||
Spacer(Modifier.width(8.dp))
|
||
|
||
// 发送按钮（输入框为空时置灰不可点击）
|
||
IconButton(
|
||
onClick = {
|
||
onSendMessage(inputText.trim())
|
||
},
|
||
enabled = inputText.isNotBlank() && sendState !is MessageSendState.Sending
|
||
) {
|
||
Icon(
|
||
imageVector = Icons.Default.Send,
|
||
contentDescription = "发送",
|
||
tint = if (inputText.isNotBlank()) {
|
||
MaterialTheme.colorScheme.primary
|
||
} else {
|
||
MaterialTheme.colorScheme.onSurfaceVariant
|
||
}
|
||
)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
**键盘联动要求**：
|
||
- 点击输入框 → 唤起输入法 → 输入区 + 发送按钮随键盘上抬
|
||
- 语音控制栏保持固定在底部，不受键盘影响
|
||
- 使用 `WindowCompat.setDecorFitsSystemWindows(window, false)` + `imePadding()` 实现
|
||
|
||
### 7.4 发送消息流程
|
||
|
||
**目标**：实现 SendTextMessage 的完整流程，包含状态管理和错误处理。
|
||
|
||
**对应流程**：`docs/流程/04_文本消息.md` 时序图
|
||
|
||
**关键原则**：
|
||
- `SendTextMessage` 返回 `nil` 只表示服务器接受请求
|
||
- 服务端会向自己回推 `notifytextmessage`，用 `OnTextMessage` 归档权威消息
|
||
- 消息归档必须依据 `TargetMode` 和 `Target`，不能用当前页面频道代替真实目标
|
||
|
||
**任务**：
|
||
|
||
1. **发送状态定义**
|
||
```kotlin
|
||
// data/Models.kt
|
||
|
||
/**
|
||
* 消息发送状态机
|
||
* 对应 docs/流程/04_文本消息.md 中的聊天状态
|
||
*
|
||
* 状态转换：
|
||
* Idle → Sending：用户提交发送意图
|
||
* Sending → Idle：命令成功（等待 OnTextMessage 归档）
|
||
* Sending → Failed：命令被拒绝
|
||
* Failed → Sending：用户重试
|
||
*/
|
||
sealed class MessageSendState {
|
||
/** 空闲，可以发送新消息 */
|
||
data class Idle(val justSent: Boolean = false) : MessageSendState()
|
||
|
||
/** 正在发送 SendTextMessage 等待响应 */
|
||
object Sending : MessageSendState()
|
||
|
||
/** 发送失败 */
|
||
data class Failed(val error: String) : MessageSendState()
|
||
}
|
||
```
|
||
|
||
2. **ChatViewModel 发送逻辑**
|
||
```kotlin
|
||
// viewmodel/ChatViewModel.kt
|
||
|
||
class ChatViewModel(
|
||
private val repository: Repository,
|
||
private val application: Application
|
||
) : ViewModel() {
|
||
|
||
companion object {
|
||
private const val TAG = "ChatViewModel"
|
||
}
|
||
|
||
// 当前频道的消息列表
|
||
private val _messages = MutableStateFlow<List<ChatMessage>>(emptyList())
|
||
val messages: StateFlow<List<ChatMessage>> = _messages
|
||
|
||
// 发送状态
|
||
private val _sendState = MutableStateFlow<MessageSendState>(MessageSendState.Idle())
|
||
val sendState: StateFlow<MessageSendState> = _sendState
|
||
|
||
// 当前查看的会话（用于筛选消息）
|
||
private var currentTargetMode: Int = 2 // 默认频道消息
|
||
private var currentTargetId: Long = 0
|
||
|
||
/**
|
||
* 切换当前查看的会话
|
||
* 进入聊天页时调用，加载对应频道的消息
|
||
*/
|
||
fun enterChat(targetMode: Int, targetId: Long) {
|
||
currentTargetMode = targetMode
|
||
currentTargetId = targetId
|
||
// 从归档中加载消息
|
||
_messages.value = repository.getMessages(targetMode, targetId)
|
||
// 清除该频道的未读标记
|
||
repository.clearUnread(targetMode, targetId)
|
||
}
|
||
|
||
/**
|
||
* 发送文本消息
|
||
* 对应 docs/流程/04_文本消息.md 时序图
|
||
*/
|
||
fun sendMessage(text: String) {
|
||
if (text.isBlank()) return
|
||
if (_sendState.value is MessageSendState.Sending) {
|
||
Log.w(TAG, "Message send already in progress")
|
||
return
|
||
}
|
||
|
||
viewModelScope.launch {
|
||
_sendState.value = MessageSendState.Sending
|
||
|
||
try {
|
||
// 通过 TSBridge 发送消息
|
||
// targetMode: 2=频道, targetId=当前频道ID
|
||
val error = TSBridge.sendTextMessage(
|
||
currentTargetMode,
|
||
currentTargetId.toString(),
|
||
text
|
||
)
|
||
|
||
if (error.isEmpty()) {
|
||
// 命令成功：服务器接受发送请求
|
||
// 服务端会回推 OnTextMessage，由 handleTextMessage 归档
|
||
Log.d(TAG, "SendTextMessage accepted by server")
|
||
_sendState.value = MessageSendState.Idle(justSent = true)
|
||
} else {
|
||
// 命令被拒绝
|
||
Log.w(TAG, "SendTextMessage rejected: $error")
|
||
_sendState.value = MessageSendState.Failed(mapSendError(error))
|
||
}
|
||
} catch (e: Exception) {
|
||
Log.e(TAG, "SendTextMessage failed", e)
|
||
_sendState.value = MessageSendState.Failed("发送失败：${e.message}")
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 重试发送（失败后）
|
||
*/
|
||
fun retrySend(text: String) {
|
||
_sendState.value = MessageSendState.Idle()
|
||
sendMessage(text)
|
||
}
|
||
|
||
/**
|
||
* 映射发送错误为用户友好提示
|
||
*/
|
||
private fun mapSendError(error: String): String {
|
||
return when {
|
||
error.contains("permission", ignoreCase = true) -> "权限不足，无法发送消息"
|
||
error.contains("flood", ignoreCase = true) -> "发送过于频繁，请稍后再试"
|
||
error.contains("empty", ignoreCase = true) -> "消息内容不能为空"
|
||
else -> "发送失败：$error"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 7.5 消息归档逻辑
|
||
|
||
**目标**：实现 OnTextMessage 事件处理，按 TargetMode + Target 归档消息。
|
||
|
||
**对应流程**：`docs/流程/08_状态同步.md` ⑤ 消息归档同步
|
||
|
||
**关键原则**：
|
||
- 消息归档必须依据 `TargetMode` 和 `Target`，不能使用当前页面频道猜测消息目标
|
||
- 非当前频道的消息仅显示弱未读提示
|
||
- 当前频道的消息直接追加到列表并自动滚动
|
||
|
||
**任务**：
|
||
|
||
1. **Repository 消息归档**
|
||
```kotlin
|
||
// data/Repository.kt
|
||
|
||
class Repository {
|
||
// ... 已有实现 ...
|
||
|
||
// 消息归档：按 (TargetMode, Target) 分组存储
|
||
// key = "${targetMode}_${targetId}"
|
||
private val messageArchives = ConcurrentHashMap<String, MutableList<ChatMessage>>()
|
||
|
||
// 未读状态：key = "${targetMode}_${targetId}", value = 未读数
|
||
private val _unreadCounts = MutableStateFlow<Map<String, Int>>(emptyMap())
|
||
val unreadCounts: StateFlow<Map<String, Int>> = _unreadCounts
|
||
|
||
// 当前查看的会话（用于判断是否需要未读提示）
|
||
private var activeChatKey: String? = null
|
||
|
||
/**
|
||
* 归档消息（由 OnTextMessage 调用）
|
||
* 对应 docs/流程/08_状态同步.md ⑤ 消息归档同步
|
||
*
|
||
* 必须读取 TargetMode 和 Target，不能使用当前页面猜测目标
|
||
*/
|
||
fun archiveMessage(message: ChatMessage) {
|
||
val key = "${message.targetMode}_${message.targetId}"
|
||
|
||
// 归档到对应会话
|
||
val archive = messageArchives.getOrPut(key) { mutableListOf() }
|
||
synchronized(archive) {
|
||
archive.add(message)
|
||
// 限制每个会话最多保留 500 条消息
|
||
if (archive.size > 500) {
|
||
archive.removeAt(0)
|
||
}
|
||
}
|
||
|
||
// 如果不是当前查看的会话，增加未读计数
|
||
if (key != activeChatKey) {
|
||
val currentCounts = _unreadCounts.value.toMutableMap()
|
||
currentCounts[key] = (currentCounts[key] ?: 0) + 1
|
||
_unreadCounts.value = currentCounts
|
||
}
|
||
|
||
// 如果是当前查看的会话，更新消息列表
|
||
if (key == activeChatKey) {
|
||
// 触发 UI 更新
|
||
notifyMessagesChanged(message.targetMode, message.targetId)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取指定会话的消息列表
|
||
*/
|
||
fun getMessages(targetMode: Int, targetId: Long): List<ChatMessage> {
|
||
val key = "${targetMode}_${targetId}"
|
||
val archive = messageArchives[key] ?: emptyList()
|
||
return synchronized(archive) { archive.toList() }
|
||
}
|
||
|
||
/**
|
||
* 设置当前活跃会话（进入聊天页时调用）
|
||
*/
|
||
fun setActiveChat(targetMode: Int?, targetId: Long?) {
|
||
activeChatKey = if (targetMode != null && targetId != null) {
|
||
"${targetMode}_${targetId}"
|
||
} else {
|
||
null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 清除指定会话的未读标记
|
||
*/
|
||
fun clearUnread(targetMode: Int, targetId: Long) {
|
||
val key = "${targetMode}_${targetId}"
|
||
val currentCounts = _unreadCounts.value.toMutableMap()
|
||
currentCounts.remove(key)
|
||
_unreadCounts.value = currentCounts
|
||
}
|
||
}
|
||
```
|
||
|
||
2. **ChatViewModel 消息接收处理**
|
||
```kotlin
|
||
// viewmodel/ChatViewModel.kt
|
||
|
||
/**
|
||
* 处理收到的文本消息
|
||
* 由 ServerViewModel 的 OnTextMessage 回调触发
|
||
*
|
||
* 对应 docs/流程/04_文本消息.md：
|
||
* "OnTextMessage 归档：按 TargetMode 与 Target 归档
|
||
* 不能使用当前页面频道代替真实目标"
|
||
*/
|
||
fun handleTextMessage(
|
||
targetMode: Int,
|
||
targetId: Long,
|
||
senderId: Int,
|
||
senderName: String,
|
||
content: String
|
||
) {
|
||
val selfId = repository.selfClientId.value
|
||
|
||
val message = ChatMessage(
|
||
id = "${System.currentTimeMillis()}_${senderId}",
|
||
targetMode = targetMode,
|
||
targetId = targetId,
|
||
senderId = senderId,
|
||
senderName = senderName,
|
||
content = content,
|
||
timestamp = System.currentTimeMillis(),
|
||
isSelf = senderId == selfId
|
||
)
|
||
|
||
// 归档消息（Repository 内部处理未读计数）
|
||
repository.archiveMessage(message)
|
||
|
||
Log.d(TAG, "Message archived: mode=$targetMode, target=$targetId, from=$senderName")
|
||
}
|
||
|
||
/**
|
||
* 离开聊天页时清理
|
||
*/
|
||
fun leaveChat() {
|
||
repository.setActiveChat(null, null)
|
||
}
|
||
```
|
||
|
||
3. **ServerViewModel 注册 OnTextMessage 回调**
|
||
```kotlin
|
||
// ServerViewModel.kt - 在 registerEventHandlers 中添加
|
||
|
||
fun registerEventHandlers() {
|
||
TSBridge.setCallbacks(object : TSBridge.Callbacks {
|
||
// ... 已有回调 ...
|
||
|
||
override fun onTextMessage(
|
||
targetMode: Int,
|
||
targetId: String,
|
||
invokerId: Int,
|
||
invokerName: String,
|
||
message: String
|
||
) {
|
||
val targetIdLong = targetId.toLongOrNull() ?: return
|
||
chatViewModel.handleTextMessage(
|
||
targetMode = targetMode,
|
||
targetId = targetIdLong,
|
||
senderId = invokerId,
|
||
senderName = invokerName,
|
||
content = message
|
||
)
|
||
}
|
||
|
||
// ... 其他回调 ...
|
||
})
|
||
}
|
||
```
|
||
|
||
### 7.6 ChatViewModel 完整实现
|
||
|
||
**目标**：整合以上各部分，实现完整的 ChatViewModel。
|
||
|
||
```kotlin
|
||
// viewmodel/ChatViewModel.kt
|
||
|
||
package com.tsmobile.app.viewmodel
|
||
|
||
import android.app.Application
|
||
import android.util.Log
|
||
import androidx.lifecycle.AndroidViewModel
|
||
import androidx.lifecycle.viewModelScope
|
||
import com.tsmobile.app.TSBridge
|
||
import com.tsmobile.app.data.ChatMessage
|
||
import com.tsmobile.app.data.MessageSendState
|
||
import com.tsmobile.app.data.Repository
|
||
import kotlinx.coroutines.flow.MutableStateFlow
|
||
import kotlinx.coroutines.flow.StateFlow
|
||
import kotlinx.coroutines.launch
|
||
|
||
class ChatViewModel(
|
||
private val repository: Repository,
|
||
private val application: Application
|
||
) : AndroidViewModel(application) {
|
||
|
||
companion object {
|
||
private const val TAG = "ChatViewModel"
|
||
private const val MAX_MESSAGES_PER_CHAT = 500
|
||
}
|
||
|
||
// 当前会话的消息列表
|
||
private val _messages = MutableStateFlow<List<ChatMessage>>(emptyList())
|
||
val messages: StateFlow<List<ChatMessage>> = _messages
|
||
|
||
// 发送状态
|
||
private val _sendState = MutableStateFlow<MessageSendState>(MessageSendState.Idle())
|
||
val sendState: StateFlow<MessageSendState> = _sendState
|
||
|
||
// 当前查看的会话参数
|
||
private var currentTargetMode: Int = 2
|
||
private var currentTargetId: Long = 0
|
||
|
||
/**
|
||
* 进入聊天页
|
||
* 加载消息并清除未读标记
|
||
*/
|
||
fun enterChat(targetMode: Int, targetId: Long) {
|
||
currentTargetMode = targetMode
|
||
currentTargetId = targetId
|
||
|
||
// 设置活跃会话（影响未读计数）
|
||
repository.setActiveChat(targetMode, targetId)
|
||
|
||
// 加载归档消息
|
||
_messages.value = repository.getMessages(targetMode, targetId)
|
||
|
||
// 清除该会话的未读标记
|
||
repository.clearUnread(targetMode, targetId)
|
||
|
||
Log.d(TAG, "Entered chat: mode=$targetMode, target=$targetId, messages=${_messages.value.size}")
|
||
}
|
||
|
||
/**
|
||
* 离开聊天页
|
||
*/
|
||
fun leaveChat() {
|
||
repository.setActiveChat(null, null)
|
||
_sendState.value = MessageSendState.Idle()
|
||
Log.d(TAG, "Left chat")
|
||
}
|
||
|
||
/**
|
||
* 发送文本消息
|
||
* 对应 docs/流程/04_文本消息.md 时序图
|
||
*/
|
||
fun sendMessage(text: String) {
|
||
if (text.isBlank()) return
|
||
if (_sendState.value is MessageSendState.Sending) {
|
||
Log.w(TAG, "Send already in progress")
|
||
return
|
||
}
|
||
|
||
viewModelScope.launch {
|
||
_sendState.value = MessageSendState.Sending
|
||
|
||
try {
|
||
val error = TSBridge.sendTextMessage(
|
||
currentTargetMode,
|
||
currentTargetId.toString(),
|
||
text
|
||
)
|
||
|
||
if (error.isEmpty()) {
|
||
Log.d(TAG, "SendTextMessage accepted")
|
||
_sendState.value = MessageSendState.Idle(justSent = true)
|
||
} else {
|
||
Log.w(TAG, "SendTextMessage rejected: $error")
|
||
_sendState.value = MessageSendState.Failed(mapSendError(error))
|
||
}
|
||
} catch (e: Exception) {
|
||
Log.e(TAG, "SendTextMessage exception", e)
|
||
_sendState.value = MessageSendState.Failed("发送失败：${e.message}")
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理收到的文本消息（由 ServerViewModel 调用）
|
||
* 对应 docs/流程/08_状态同步.md ⑤ 消息归档同步
|
||
*/
|
||
fun handleTextMessage(
|
||
targetMode: Int,
|
||
targetId: Long,
|
||
senderId: Int,
|
||
senderName: String,
|
||
content: String
|
||
) {
|
||
val selfId = repository.selfClientId.value
|
||
|
||
val message = ChatMessage(
|
||
id = "${System.currentTimeMillis()}_${senderId}",
|
||
targetMode = targetMode,
|
||
targetId = targetId,
|
||
senderId = senderId,
|
||
senderName = senderName,
|
||
content = content,
|
||
timestamp = System.currentTimeMillis(),
|
||
isSelf = senderId == selfId
|
||
)
|
||
|
||
repository.archiveMessage(message)
|
||
|
||
// 如果是当前查看的会话，更新消息列表
|
||
if (targetMode == currentTargetMode && targetId == currentTargetId) {
|
||
_messages.value = repository.getMessages(targetMode, targetId)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 重试发送
|
||
*/
|
||
fun retrySend(text: String) {
|
||
_sendState.value = MessageSendState.Idle()
|
||
sendMessage(text)
|
||
}
|
||
|
||
/**
|
||
* 清除发送状态（用于 UI 重置）
|
||
*/
|
||
fun clearSendState() {
|
||
_sendState.value = MessageSendState.Idle()
|
||
}
|
||
|
||
private fun mapSendError(error: String): String {
|
||
return when {
|
||
error.contains("permission", ignoreCase = true) -> "权限不足"
|
||
error.contains("flood", ignoreCase = true) -> "发送过于频繁"
|
||
error.contains("empty", ignoreCase = true) -> "消息不能为空"
|
||
else -> "发送失败：$error"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 三、状态与数据流
|
||
|
||
### 3.1 消息发送状态机
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ │
|
||
▼ │
|
||
┌─────────┐ │
|
||
│ Idle │◄──────────────────────────┤
|
||
└────┬────┘ │
|
||
│ 用户点击发送 │
|
||
▼ │
|
||
┌──────────┐ │
|
||
│ Sending │ │
|
||
└────┬─────┘ │
|
||
│ │
|
||
┌─────────┴──────────┐ │
|
||
│ │ │
|
||
▼ ▼ │
|
||
error="" error! │
|
||
│ │ │
|
||
▼ ▼ │
|
||
Idle(justSent) Failed │
|
||
│ │ │
|
||
│ 用户重试 │
|
||
│ │ │
|
||
└────────────────────┴─────────────────────┘
|
||
```
|
||
|
||
### 3.2 消息归档数据流
|
||
|
||
```
|
||
服务端 SDK Repository ChatViewModel UI
|
||
│ │ │ │ │
|
||
│ notifytextmessage │ │ │ │
|
||
├────────────────────→│ │ │ │
|
||
│ │ OnTextMessage │ │ │
|
||
│ ├───────────────────────→│ │ │
|
||
│ │ │ │ │
|
||
│ │ │ 读取 TargetMode │ │
|
||
│ │ │ + Target │ │
|
||
│ │ │ │ │
|
||
│ │ │ 归档到对应会话 │ │
|
||
│ │ │ │ │
|
||
│ │ │ 当前会话？ │ │
|
||
│ │ ├─ 是 ─────────────────→│ 更新消息列表 │
|
||
│ │ │ ├─────────────────→│
|
||
│ │ │ │ │
|
||
│ │ ├─ 否 ─→ 增加未读计数 │ │
|
||
│ │ │ │ │
|
||
```
|
||
|
||
### 3.3 命令响应与事件事实的区分
|
||
|
||
**关键原则**（对应 `docs/流程/04_文本消息.md`）：
|
||
|
||
| 概念 | 含义 | 处理方式 |
|
||
|------|------|----------|
|
||
| SendTextMessage 返回 error | 命令被服务器拒绝 | 立即显示错误，状态 → Failed |
|
||
| SendTextMessage 返回 nil | 命令被服务器接受 | 状态 → Idle(justSent=true) |
|
||
| OnTextMessage(self) | 服务端回推自己的消息 | 归档到对应会话，更新列表 |
|
||
|
||
**为什么发送成功后要等 OnTextMessage 归档？**
|
||
|
||
- `SendTextMessage` 返回 nil 只表示服务器接受了请求
|
||
- 服务端会向自己回推 `notifytextmessage`
|
||
- 这条回推消息包含服务器处理后的完整信息（如时间戳）
|
||
- 用 `OnTextMessage` 归档确保消息列表的一致性
|
||
|
||
---
|
||
|
||
## 四、未读消息管理
|
||
|
||
### 4.1 未读状态定义
|
||
|
||
| 状态 | 显示 | 触发条件 | 清除条件 |
|
||
|------|------|----------|----------|
|
||
| 无未读 | 正常显示 | — | — |
|
||
| 弱未读 | 频道名右侧红点 ● | 非当前频道收到普通消息 | 用户进入该频道 |
|
||
| 强未读 | 频道名右侧数字 badge | 非当前频道收到 @提及 | 用户进入该频道 |
|
||
| 当前频道 | 不显示未读 | 用户正在查看该频道 | — |
|
||
|
||
### 4.2 未读状态数据流
|
||
|
||
```kotlin
|
||
// ChannelListScreen.kt - 在频道树中显示未读状态
|
||
|
||
@Composable
|
||
fun ChannelRow(
|
||
channel: ChannelInfo,
|
||
unreadCount: Int,
|
||
isCurrentChannel: Boolean,
|
||
onClick: () -> Unit
|
||
) {
|
||
Row(
|
||
modifier = Modifier
|
||
.fillMaxWidth()
|
||
.clickable(onClick = onClick)
|
||
.padding(horizontal = 16.dp, vertical = 8.dp),
|
||
verticalAlignment = Alignment.CenterVertically
|
||
) {
|
||
// ... 频道名 ...
|
||
|
||
Spacer(Modifier.weight(1f))
|
||
|
||
// 未读指示（当前频道不显示）
|
||
if (!isCurrentChannel && unreadCount > 0) {
|
||
if (unreadCount > 99) {
|
||
// 强未读：显示数字
|
||
Badge { Text("99+") }
|
||
} else if (unreadCount > 1) {
|
||
// 强未读：显示数字
|
||
Badge { Text("$unreadCount") }
|
||
} else {
|
||
// 弱未读：显示红点
|
||
Box(
|
||
modifier = Modifier
|
||
.size(8.dp)
|
||
.background(
|
||
color = MaterialTheme.colorScheme.error,
|
||
shape = CircleShape
|
||
)
|
||
)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 五、验收标准
|
||
|
||
### 功能验收
|
||
|
||
- [ ] **页面布局**
|
||
- 头部显示频道名、人数、返回按钮、频道详情入口
|
||
- 消息列表占满中间区域，支持滚动
|
||
- 输入区在底部，随键盘上抬
|
||
- 语音控制栏固定在最底部
|
||
|
||
- [ ] **消息显示**
|
||
- 自己的消息靠右对齐，使用不同背景色
|
||
- 他人的消息靠左对齐，显示发送者名称
|
||
- 每条消息显示发送时间（HH:mm 格式）
|
||
- 新消息到达时自动滚动到底部
|
||
- 查看历史消息时显示 "↓ 新消息" 提示条
|
||
|
||
- [ ] **发送消息**
|
||
- 输入框为空时发送按钮置灰
|
||
- 点击发送或键盘回车触发发送
|
||
- 发送中显示加载状态
|
||
- 发送成功清空输入框，保持键盘打开
|
||
- 发送失败显示错误提示，可重试
|
||
|
||
- [ ] **消息归档**
|
||
- 收到 OnTextMessage 按 TargetMode + Target 归档
|
||
- 当前频道消息直接追加到列表
|
||
- 非当前频道消息增加未读计数
|
||
- 进入频道时清除未读标记
|
||
|
||
- [ ] **未读指示**
|
||
- 频道列表页显示弱未读红点（1条新消息）
|
||
- 频道列表页显示强未读数字（多条新消息）
|
||
- 当前所在频道不显示未读标记
|
||
|
||
### 错误处理验收
|
||
|
||
| 错误场景 | 预期行为 |
|
||
|----------|----------|
|
||
| 权限不足 | 提示"权限不足，无法发送消息" |
|
||
| 发送过于频繁 | 提示"发送过于频繁，请稍后再试" |
|
||
| 网络断开 | 提示"发送失败"，可重试 |
|
||
| 消息内容为空 | 发送按钮禁用 |
|
||
|
||
### 性能验收
|
||
|
||
- [ ] 消息列表滚动流畅（500 条消息）
|
||
- [ ] 新消息到达自动滚动无卡顿
|
||
- [ ] 输入框输入响应 < 50ms
|
||
|
||
### 测试用例
|
||
|
||
| 场景 | 操作 | 预期结果 |
|
||
|------|------|----------|
|
||
| 发送频道消息 | 输入文本 → 点击发送 | 消息出现在列表右侧 |
|
||
| 接收他人消息 | 他人发送消息 | 消息出现在列表左侧，显示发送者名 |
|
||
| 自动滚动 | 收到新消息 | 列表自动滚动到底部 |
|
||
| 查看历史 | 向上滚动查看历史 | 显示"↓ 新消息"提示条 |
|
||
| 未读指示 | 切换到其他频道收到消息 | 频道名显示红点 |
|
||
| 清除未读 | 进入有未读的频道 | 红点消失 |
|
||
| 发送失败 | 断网后发送 | 显示错误提示，可重试 |
|
||
| 空消息 | 输入框为空 | 发送按钮置灰 |
|
||
| 长按消息 | 长按消息气泡 | 弹出操作菜单（复制/Poke） |
|
||
|
||
---
|
||
|
||
## 六、参考文档
|
||
|
||
- `docs/流程/04_文本消息.md` - 时序图、状态机、事件依赖
|
||
- `docs/流程/08_状态同步.md` - ⑤ 消息归档同步
|
||
- `docs/UI架构设计.md` - 2.3 聊天页布局、5.5 未读消息指示
|
||
- `docs/sdk文档-go.md` - SendTextMessage API、OnTextMessage 事件、TextMessage 结构
|
||
- `docs/implementation/02_Bridge层实现.md` - TSBridge.sendTextMessage、onTextMessage 回调
|
||
- `docs/implementation/05_频道列表页.md` - ChannelListScreen 未读指示集成
|
||
- `docs/implementation/06_频道切换.md` - 进入聊天页的导航入口
|