发布动态页面UI调整

This commit is contained in:
2025-11-07 21:30:56 +08:00
parent 2613d2e801
commit 1c048fd9c0
11 changed files with 111 additions and 119 deletions

View File

@@ -52,6 +52,8 @@ import androidx.compose.ui.draw.rotate
import androidx.compose.ui.draw.scale
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.PathEffect
@@ -151,71 +153,42 @@ fun NewPostScreen() {
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.padding(horizontal = 16.dp)
.background(AppColors.divider)
)
Spacer(modifier = Modifier.height(24.dp))
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 8.dp, start = 16.dp, end = 16.dp, bottom = 8.dp),
verticalAlignment = Alignment.CenterVertically
.padding(start = 16.dp)
.width(100.dp)
.height(40.dp)
.clip(RoundedCornerShape(20.dp))
.background(
brush = Brush.linearGradient(
colors = listOf(
Color(0xFF8CDDFF),
Color(0xFF9887FF),
Color(0xFFFF8D28)
),
)
)
.padding(horizontal = 14.dp, vertical = 8.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Image(
painter = painterResource(id = R.mipmap.rider_pro_moment_ai),
painter = painterResource(id = R.mipmap.icon_ai),
contentDescription = null,
modifier = Modifier
.size(24.dp)
.size(16.dp)
)
Text(
text = stringResource(R.string.moment_ai_co),
fontWeight = FontWeight.Bold,
fontSize = 15.sp,
fontWeight = FontWeight.Normal,
fontSize = 13.sp,
modifier = Modifier
.padding(start = 8.dp)
.weight(1f),
color = AppColors.text,
)
Switch(
checked = isAiEnabled,
onCheckedChange = {
isChecked ->
isAiEnabled = isChecked
if (isChecked) {
// 收起键盘
keyboardController?.hide()
isRequesting = true
isRotating = true
model.viewModelScope.launch {
try {
model.agentMoment(model.textContent)
} catch (e: Exception) {
e.printStackTrace()
}finally {
isRequesting = false
isRotating = false
isAiEnabled = false
}
}
} else {
}
},
enabled = !isRequesting && model.textContent.isNotEmpty(),
colors = SwitchDefaults.colors(
checkedThumbColor = Color.White,
checkedTrackColor = AppColors.brandColorsColor,
uncheckedThumbColor = Color.White,
uncheckedTrackColor = AppColors.nonActive,
uncheckedBorderColor = Color.White,
disabledCheckedTrackColor = AppColors.brandColorsColor.copy(alpha = 0.8f),
disabledCheckedThumbColor= Color.White,
disabledUncheckedTrackColor = AppColors.nonActive,
disabledUncheckedThumbColor= Color.White
),
modifier = Modifier.scale(0.8f)
.padding(start = 2.dp),
color = Color.White,
)
}
@@ -352,7 +325,7 @@ fun NewPostTopBar(onSendClick: () -> Unit = {}) {
modifier = Modifier.align(Alignment.CenterStart),
) {
Image(
painter = painterResource(id = R.drawable.rider_pro_close),
painter = painterResource(id = R.drawable.rider_pro_back_icon),
contentDescription = "Back",
modifier = Modifier
.size(24.dp)
@@ -366,9 +339,31 @@ fun NewPostTopBar(onSendClick: () -> Unit = {}) {
},
colorFilter = ColorFilter.tint(AppColors.text)
)
Spacer(modifier = Modifier.width(8.dp))
Text(
modifier = Modifier.align(Alignment.CenterVertically),
text = stringResource(R.string.publish_dynamic),
fontSize = 17.sp,
color = AppColors.text,
)
Spacer(modifier = Modifier.weight(1f))
Image(
painter = painterResource(id = R.mipmap.rider_pro_moment_post),
painter = painterResource(id = R.mipmap.icon_draft_box_light),
contentDescription = "",
modifier = Modifier
.size(24.dp)
.noRippleClickable {
// 添加防抖逻辑
val currentTime = System.currentTimeMillis()
if (currentTime - lastSendClickTime > debounceTime) {
lastSendClickTime = currentTime
}
},
colorFilter = ColorFilter.tint(AppColors.text)
)
Spacer(modifier = Modifier.width(20.dp))
Image(
painter = painterResource(id = R.mipmap.icon_released_light),
contentDescription = "Send",
modifier = Modifier
.size(24.dp)
@@ -391,11 +386,8 @@ fun NewPostTopBar(onSendClick: () -> Unit = {}) {
}finally {
uploading = false
}
}
}
},
)
}
@@ -488,72 +480,24 @@ fun AddImageGrid() {
}
val addImageDebouncer = rememberDebouncer()
val takePhotoDebouncer = rememberDebouncer()
val stroke = Stroke(
width = 2f,
pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
)
DraggableGrid(
items = NewPostViewModel.imageList,
onMove = { from, to ->
NewPostViewModel.imageList = NewPostViewModel.imageList.toMutableList().apply {
add(to, removeAt(from))
}
},
lockedIndices = listOf(
),
onDragModeEnd = {},
onDragModeStart = {},
additionalItems = listOf(
),
getItemId = { it.id }
) { item, isDrag ->
Box(
modifier = Modifier
) {
CustomAsyncImage(
LocalContext.current,
item.bitmap,
contentDescription = "Image",
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.noRippleClickable {
navController.navigate(NavigationRoute.NewPostImageGrid.route)
},
contentScale = ContentScale.Crop
)
if (isDrag) {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Black.copy(alpha = 0.4f))
)
}
}
}
val canAddMoreImages = model.imageList.size < 9
LazyVerticalGrid(
columns = GridCells.Fixed(5),
contentPadding = PaddingValues(8.dp),
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp),
contentPadding = PaddingValues(horizontal = 19.dp, vertical = 4.dp),
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
// 添加按钮
if (canAddMoreImages) {
item {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.clip(RoundedCornerShape(16.dp)) // 设置圆角
.background(AppColors.basicMain) // 设置背景色
.clip(RoundedCornerShape(24.dp))
.background(Color(0xFFFAF9FB))
.noRippleClickable {
addImageDebouncer {
if (model.imageList.size < 9) {
@@ -572,20 +516,21 @@ fun AddImageGrid() {
painter = painterResource(id = R.drawable.rider_pro_new_post_add_pic),
contentDescription = "Add Image",
modifier = Modifier
.size(24.dp)
.size(23.3.dp)
.align(Alignment.Center),
tint = AppColors.nonActiveText
)
}
}
// 相机按钮
item {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.clip(RoundedCornerShape(16.dp)) // 设置圆角
.background(AppColors.basicMain) // 设置背景色
.clip(RoundedCornerShape(24.dp))
.background(Color(0xFFFAF9FB))
.noRippleClickable {
if (model.imageList.size < 9) {
val photoFile = File(context.cacheDir, "photo.jpg")
@@ -605,13 +550,60 @@ fun AddImageGrid() {
painter = painterResource(id = R.drawable.rider_pro_camera),
contentDescription = "Take Photo",
modifier = Modifier
.size(24.dp)
.size(23.3.dp)
.align(Alignment.Center),
tint = AppColors.nonActiveText
)
}
}
}
// 已添加的图片,显示在相机按钮后面
items(model.imageList.size) { index ->
val item = model.imageList[index]
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.clip(RoundedCornerShape(24.dp))
.background(Color(0xFFFAF9FB))
) {
CustomAsyncImage(
context,
item.bitmap,
contentDescription = "Image",
modifier = Modifier
.fillMaxSize()
.noRippleClickable {
navController.navigate(NavigationRoute.NewPostImageGrid.route)
},
contentScale = ContentScale.Crop
)
// // 删除按钮 - 右上角
// Box(
// modifier = Modifier
// .align(Alignment.TopEnd)
// .padding(4.dp)
// .size(20.dp)
// .clip(RoundedCornerShape(10.dp))
// .background(Color.Black.copy(alpha = 0.6f))
// .noRippleClickable {
// model.imageList = model.imageList.toMutableList().apply {
// removeAt(index)
// }
// },
// contentAlignment = Alignment.Center
// ) {
// Icon(
// painter = painterResource(id = R.drawable.rider_pro_close),
// contentDescription = "Delete",
// modifier = Modifier.size(12.dp),
// tint = Color.White
// )
// }
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 443 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 492 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 428 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 671 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 B

View File

@@ -143,8 +143,8 @@
<string name="agent_desc_hint">示例: 一位经验丰富的销售员,擅长通过幽默风趣的语言和生动的案例,将复杂的产品转化为客户易于理解并感兴趣的话题</string>
<string name="agent_create">创建智能体</string>
<string name="create_confirm">好的,就它了</string>
<string name="moment_content_hint">需要一些灵感来写文章吗?让人工智能来帮你!</string>
<string name="moment_ai_co">AI文案优化</string>
<string name="moment_content_hint">你的帖子需要一些灵感让AI帮助你!</string>
<string name="moment_ai_co">文案优化</string>
<string name="moment_ai_delete">删除</string>
<string name="moment_ai_apply">应用</string>
<string name="chat_ai">智能体</string>