添加标签组件并更新导航栏Add按钮样式

- 新增可复用的`TabItem`和`TabSpacer`组件,用于实现标签页切换效果。
- 在消息列表和AI Agent页面中,使用新的`TabItem`和`TabSpacer`组件替换原有的标签页实现,简化代码并统一风格。
- 更新底部导航栏Add按钮的图标和交互行为:
    - 使用新的`ic_nav_add.xml`图标。
    - Add按钮只显示图标,不显示文字标签。
    - Add按钮图标放大。
- 在`Colors.kt`中为`AppThemeData`添加新的颜色属性,以支持新标签组件的自定义主题。
This commit is contained in:
2025-08-08 09:57:42 +08:00
parent f6a796e2bc
commit 1bb0adeb90
7 changed files with 181 additions and 187 deletions

View File

@@ -0,0 +1,56 @@
package com.aiosman.ravenow.ui.composables
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
/**
* 可复用的标签页组件
*/
@Composable
fun TabItem(
text: String,
isSelected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
val AppColors = LocalAppTheme.current
Column(
modifier = modifier
.noRippleClickable { onClick() },
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = text,
fontSize = 14.sp,
color = if (isSelected) AppColors.tabSelectedText else AppColors.tabUnselectedText,
modifier = Modifier
.clip(RoundedCornerShape(8.dp))
.background(if (isSelected) AppColors.tabSelectedBackground else AppColors.tabUnselectedBackground)
.padding(horizontal = 11.dp, vertical = 4.dp)
)
}
}
/**
* 标签页之间的间隔组件
*/
@Composable
fun TabSpacer() {
Spacer(modifier = Modifier.width(8.dp))
}