创建群聊页面UI调整:修改创建群聊按钮正常状态下的颜色;新增禁用状态下点击时提示语

This commit is contained in:
2025-12-01 18:45:08 +08:00
parent af3b7e7bb9
commit 742b8b25e8
4 changed files with 130 additions and 45 deletions

View File

@@ -99,6 +99,15 @@ fun CreateGroupChatScreen() {
} }
val navigationBarPadding = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() val navigationBarPadding = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
var showSelectTipsDialog by remember { mutableStateOf(false) }
// 自动隐藏“请选择群成员并输入群名称”提示弹窗
LaunchedEffect(showSelectTipsDialog) {
if (showSelectTipsDialog) {
kotlinx.coroutines.delay(2000)
showSelectTipsDialog = false
}
}
// 获取费用和余额信息 // 获取费用和余额信息
val pointsRules by PointService.pointsRules.collectAsState(initial = null) val pointsRules by PointService.pointsRules.collectAsState(initial = null)
@@ -495,14 +504,48 @@ fun CreateGroupChatScreen() {
} }
} }
// 创建群聊按钮 - 固定在底部 // 创建群聊按钮 - 固定在底部(启用时使用渐变背景)
val isCreateEnabled =
groupName.text.isNotEmpty() && selectedMembers.isNotEmpty() && !CreateGroupChatViewModel.isLoading
Box(
modifier = Modifier
.fillMaxWidth()
.padding(
start = 16.dp,
end = 16.dp,
top = buttonTopPadding,
bottom = navigationBarPadding + 16.dp
)
.let { baseModifier ->
if (isCreateEnabled) {
baseModifier.background(
brush = Brush.linearGradient(
colors = listOf(
Color(0x997c45ed),
Color(0x997c68ef),
Color(0x997bd8f8)
)
),
shape = RoundedCornerShape(24.dp)
)
} else {
baseModifier
}
}
) {
Button( Button(
onClick = { onClick = {
// 创建群聊逻辑 // 创建群聊逻辑
if (selectedMembers.isNotEmpty()) { if (selectedMembers.isNotEmpty()) {
// 检查是否超过上限 // 检查是否超过上限
if (selectedMembers.size > maxMemberLimit) { if (selectedMembers.size > maxMemberLimit) {
CreateGroupChatViewModel.showError(context.getString(R.string.create_group_chat_exceed_limit, maxMemberLimit)) CreateGroupChatViewModel.showError(
context.getString(
R.string.create_group_chat_exceed_limit,
maxMemberLimit
)
)
return@Button return@Button
} }
// 如果费用大于0显示确认弹窗 // 如果费用大于0显示确认弹窗
@@ -524,16 +567,15 @@ fun CreateGroupChatScreen() {
} }
}, },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth(),
.padding(start = 16.dp, end = 16.dp, top = buttonTopPadding, bottom = navigationBarPadding + 16.dp),
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.buttonColors(
containerColor = AppColors.main, containerColor = if (isCreateEnabled) Color.Transparent else AppColors.main,
contentColor = AppColors.mainText, contentColor = AppColors.mainText,
disabledContainerColor = AppColors.disabledBackground, disabledContainerColor = AppColors.disabledBackground,
disabledContentColor = AppColors.text disabledContentColor = AppColors.text
), ),
shape = RoundedCornerShape(24.dp), shape = RoundedCornerShape(24.dp),
enabled = groupName.text.isNotEmpty() && selectedMembers.isNotEmpty() && !CreateGroupChatViewModel.isLoading enabled = isCreateEnabled
) { ) {
if (CreateGroupChatViewModel.isLoading) { if (CreateGroupChatViewModel.isLoading) {
Text( Text(
@@ -550,6 +592,44 @@ fun CreateGroupChatScreen() {
} }
} }
// 禁用状态下拦截点击并弹出提示
if (!isCreateEnabled) {
Box(
modifier = Modifier
.matchParentSize()
.noRippleClickable {
showSelectTipsDialog = true
}
)
}
}
}
// 请选择群成员并输入群名称 提示弹窗
if (showSelectTipsDialog) {
Dialog(
onDismissRequest = { showSelectTipsDialog = false },
properties = DialogProperties(dismissOnClickOutside = true, dismissOnBackPress = true)
) {
Box(
modifier = Modifier
.background(color = AppColors.background, shape = RoundedCornerShape(16.dp))
.padding(horizontal = 20.dp, vertical = 16.dp)
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = stringResource(R.string.create_group_chat_select_members_and_name),
fontSize = 16.sp,
fontWeight = FontWeight.W600,
color = Color(0xFF7C45ED),
textAlign = TextAlign.Center
)
}
}
}
} }
// 消费确认弹窗 // 消费确认弹窗

View File

@@ -225,6 +225,7 @@
<string name="people"></string> <string name="people"></string>
<string name="paipai">Paip.ai</string> <string name="paipai">Paip.ai</string>
<string name="null_search">まだここは空です</string> <string name="null_search">まだここは空です</string>
<string name="create_group_chat_select_members_and_name">グループメンバーを選択し、グループ名を入力してください</string>
<!-- Create Bottom Sheet --> <!-- Create Bottom Sheet -->
<string name="create_title">作成</string> <string name="create_title">作成</string>

View File

@@ -225,6 +225,7 @@
<string name="only_save_the_last_5_drafts">仅保存最近5个草稿</string> <string name="only_save_the_last_5_drafts">仅保存最近5个草稿</string>
<string name="recent_search">历史搜索</string> <string name="recent_search">历史搜索</string>
<string name="null_search">这里还空着呢~</string> <string name="null_search">这里还空着呢~</string>
<string name="create_group_chat_select_members_and_name">请选择群成员并输入群名称</string>
<!-- Create Bottom Sheet --> <!-- Create Bottom Sheet -->
<string name="create_title">创建</string> <string name="create_title">创建</string>
<string name="create_ai">AI</string> <string name="create_ai">AI</string>

View File

@@ -224,6 +224,9 @@
<string name="people">people</string> <string name="people">people</string>
<string name="paipai">Paip.ai</string> <string name="paipai">Paip.ai</string>
<string name="null_search">It\'s still empty here</string> <string name="null_search">It\'s still empty here</string>
<string name="create_group_chat_select_members_and_name">Please select group members and enter group name</string>
<!-- Create Bottom Sheet --> <!-- Create Bottom Sheet -->
<string name="create_title">Create</string> <string name="create_title">Create</string>