feat(chat): implement ChatScaffold container with sidebar drawer

This commit is contained in:
844143714@qq,com 2026-05-19 21:26:13 +08:00
parent e1bb993b09
commit 21750acd2c
1 changed files with 86 additions and 0 deletions

View File

@ -0,0 +1,86 @@
package com.stand.standapp.ui.chat.components
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.stand.standapp.ui.chat.ChatViewModel
import kotlinx.coroutines.launch
@Composable
fun ChatScaffold(
viewModel: ChatViewModel = viewModel(),
onClose: () -> Unit
) {
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
val sessions by viewModel.sessions.collectAsState()
val currentSessionId by viewModel.currentSessionId.collectAsState()
val messages by viewModel.messages.collectAsState()
// 筛选当前会话的消息
val currentMessages = messages.filter { it.sessionId == currentSessionId }
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet(modifier = Modifier.fillMaxWidth(0.7f)) { // 抽屉宽度为 70%
Column(Modifier.fillMaxSize().padding(16.dp)) {
Button(
onClick = {
viewModel.createNewSession()
scope.launch { drawerState.close() }
},
modifier = Modifier.fillMaxWidth()
) {
Icon(Icons.Default.Add, contentDescription = null)
Spacer(Modifier.width(8.dp))
Text("新建话题")
}
Spacer(Modifier.height(16.dp))
LazyColumn {
items(sessions) { session ->
val isSelected = session.id == currentSessionId
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 4.dp)
.clickable {
viewModel.switchSession(session.id)
scope.launch { drawerState.close() }
},
color = if (isSelected) Color(0xFFE5E7EB) else Color.Transparent,
shape = RoundedCornerShape(8.dp)
) {
Text(
text = session.title,
modifier = Modifier.padding(12.dp),
maxLines = 1
)
}
}
}
}
}
}
) {
ChatArea(
messages = currentMessages,
onSendMessage = { viewModel.sendMessage(it) },
onOpenDrawer = { scope.launch { drawerState.open() } },
onClose = onClose
)
}
}