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

- 新增可复用的`TabItem`和`TabSpacer`组件，用于实现标签页切换效果。
- 在消息列表和AI Agent页面中，使用新的`TabItem`和`TabSpacer`组件替换原有的标签页实现，简化代码并统一风格。
- 更新底部导航栏Add按钮的图标和交互行为：
    - 使用新的`ic_nav_add.xml`图标。
    - Add按钮只显示图标，不显示文字标签。
    - Add按钮图标放大。
- 在`Colors.kt`中为`AppThemeData`添加新的颜色属性，以支持新标签组件的自定义主题。

app/src/main/java/com/aiosman/ravenow/Colors.kt

@@ -28,6 +28,10 @@ open class AppThemeData(
     var checkedText: Color,
     var chatActionColor: Color,
     var brandColorsColor: Color,
+    var tabSelectedBackground: Color,
+    var tabUnselectedBackground: Color,
+    var tabSelectedText: Color,
+    var tabUnselectedText: Color,
 )
 
 class LightThemeColors : AppThemeData(
@@ -53,6 +57,10 @@ class LightThemeColors : AppThemeData(
     decentBackground = Color(0xfff5f5f5),
     chatActionColor = Color(0xffe0e0e0),
     brandColorsColor = Color(0xffD80264),
+    tabSelectedBackground = Color(0xff110C13),
+    tabUnselectedBackground = Color(0xff7C7480),
+    tabSelectedText = Color(0xffffffff),
+    tabUnselectedText = Color(0xff000000),
 
 )
 
@@ -79,4 +87,8 @@ class DarkThemeColors : AppThemeData(
     decentBackground = Color(0xFF171717),
     chatActionColor = Color(0xFF3D3D3D),
     brandColorsColor = Color(0xffD80264),
+    tabSelectedBackground = Color(0xffffffff),
+    tabUnselectedBackground = Color(0xff7C7480),
+    tabSelectedText = Color(0xff000000),
+    tabUnselectedText = Color(0xffffffff),
 )

app/src/main/java/com/aiosman/ravenow/ui/composables/TabItem.kt

@@ -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))
+}

app/src/main/java/com/aiosman/ravenow/ui/index/Index.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -38,6 +39,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -280,6 +282,7 @@ fun IndexScreen() {
                                         }
                                         model.tabIndex = idx
                                     },
+                                    interactionSource = remember { MutableInteractionSource() },
                                     colors = NavigationBarItemColors(
                                         selectedTextColor = Color.Red,
                                         selectedIndicatorColor = Color.Transparent,
@@ -290,31 +293,44 @@ fun IndexScreen() {
                                         unselectedIconColor = iconTint,
                                     ),
                                     icon = {
-                                        Box(
+                                        // 特殊处理中间的Add按钮，只显示图标并放大
-                                            modifier = Modifier
+                                        if (it.route == NavigationItem.Add.route) {
-                                                .width(46.dp)
-                                                .height(30.dp)
-                                                .background(
-                                                    color = if (isSelected) AppColors.brandColorsColor.copy(alpha = 0.1f) else Color.Transparent ,
-                                                    shape = RoundedCornerShape(10.dp)
-                                                ),
-                                            contentAlignment = Alignment.Center
-                                        ) {
                                             Icon(
-                                                modifier = Modifier.size(24.dp),
+                                                modifier = Modifier.size(32.dp),
                                                 imageVector = if (isSelected) it.selectedIcon() else it.icon(),
                                                 contentDescription = null,
-                                                tint = iconTint
+                                                tint = AppColors.text
                                             )
+                                        } else {
+                                            Box(
+                                                modifier = Modifier
+                                                    .width(46.dp)
+                                                    .height(30.dp)
+                                                    .background(
+                                                        color = if (isSelected) AppColors.brandColorsColor.copy(alpha = 0.1f) else Color.Transparent ,
+                                                        shape = RoundedCornerShape(10.dp)
+                                                    ),
+                                                contentAlignment = Alignment.Center
+                                            ) {
+                                                Icon(
+                                                    modifier = Modifier.size(24.dp),
+                                                    imageVector = if (isSelected) it.selectedIcon() else it.icon(),
+                                                    contentDescription = null,
+                                                    tint = iconTint
+                                                )
+                                            }
                                         }
                                     },
                                     label = {
-                                        Text(
+                                        // Add按钮不显示文字标签
-                                            modifier = Modifier.padding(0.dp),
+                                        if (it.route != NavigationItem.Add.route) {
-                                            text = it.label(),
+                                            Text(
-                                            fontSize = 9.sp,
+                                                modifier = Modifier.padding(0.dp),
-                                            color = if (isSelected) AppColors.brandColorsColor else AppColors.text,
+                                                text = it.label(),
-                                        )
+                                                fontSize = 9.sp,
+                                                color = if (isSelected) AppColors.brandColorsColor else AppColors.text,
+                                            )
+                                        }
                                     }
 
                                 )

app/src/main/java/com/aiosman/ravenow/ui/index/NavigationItem.kt

@@ -28,8 +28,8 @@ sealed class NavigationItem(
     )
 
     data object Add : NavigationItem("Add",
-        icon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_post_hl) },
+        icon = { ImageVector.vectorResource(R.drawable.ic_nav_add) },
-        selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_post_hl) },
+        selectedIcon = { ImageVector.vectorResource(R.drawable.ic_nav_add) },
         label = { "" }
     )
 

app/src/main/java/com/aiosman/ravenow/ui/index/tabs/ai/Agent.kt

@@ -39,6 +39,8 @@ import com.aiosman.ravenow.ui.NavigationRoute
 import com.aiosman.ravenow.ui.index.tabs.ai.tabs.mine.MineAgent
 import com.aiosman.ravenow.ui.index.tabs.ai.tabs.hot.HotAgent
 import com.aiosman.ravenow.ui.modifiers.noRippleClickable
+import com.aiosman.ravenow.ui.composables.TabItem
+import com.aiosman.ravenow.ui.composables.TabSpacer
 import kotlinx.coroutines.launch
 
 @OptIn( ExperimentalFoundationApi::class)
@@ -121,103 +123,45 @@ fun Agent() {
             horizontalArrangement = Arrangement.Start,
             verticalAlignment = Alignment.Bottom
         ) {
-            Column(
+            TabItem(
-                modifier = Modifier
+                text = stringResource(R.string.agent_mine),
-                    .noRippleClickable {
+                isSelected = pagerState.currentPage == 0,
-                        scope.launch {
+                onClick = {
-                            pagerState.animateScrollToPage(0)
+                    scope.launch {
-                        }
+                        pagerState.animateScrollToPage(0)
-                    },
+                    }
-                verticalArrangement = Arrangement.Center,
+                }
-                horizontalAlignment = Alignment.CenterHorizontally
+            )
-
+            TabSpacer()
-            ) {
+            TabItem(
-                Text(
+                text = stringResource(R.string.agent_hot),
-                    text = stringResource(R.string.agent_mine),
+                isSelected = pagerState.currentPage == 1,
-                    fontSize = 14.sp,
+                onClick = {
-                    color = if (pagerState.currentPage == 0) AppColors.mainText else AppColors.checkedBackground,
+                    scope.launch {
-                    modifier = Modifier
+                        pagerState.animateScrollToPage(1)
-                        .clip(RoundedCornerShape(8.dp))
+                    }
-                        .background(if (pagerState.currentPage == 0) AppColors.checkedBackground else AppColors.unCheckedBackground)
+                }
-                        .padding(horizontal = 11.dp, vertical = 4.dp)
+            )
-                )
+            TabSpacer()
-
+            TabItem(
-
+                text = stringResource(R.string.agent_recommend),
-            }
+                isSelected = pagerState.currentPage == 2,
-            Spacer(modifier = Modifier.width(8.dp))
+                onClick = {
-            Column(
+                    scope.launch {
-                modifier = Modifier
+                        pagerState.animateScrollToPage(2)
-                    .noRippleClickable {
+                    }
-                        scope.launch {
+                }
-                            pagerState.animateScrollToPage(1)
+            )
-                        }
+            TabSpacer()
-                    },
+            TabItem(
-                verticalArrangement = Arrangement.Center,
+                text = stringResource(R.string.agent_other),
-                horizontalAlignment = Alignment.CenterHorizontally
+                isSelected = pagerState.currentPage == 3,
-
+                onClick = {
-            ) {
+                    scope.launch {
-                Text(
+                        pagerState.animateScrollToPage(3)
-                    text = stringResource(R.string.agent_hot),
+                    }
-                    fontSize = 14.sp,
+                }
-                    color = if (pagerState.currentPage == 1) AppColors.mainText else AppColors.checkedBackground,
+            )
-                    modifier = Modifier
-                        .clip(RoundedCornerShape(8.dp))
-                        .background(if (pagerState.currentPage == 1) AppColors.checkedBackground else AppColors.unCheckedBackground)
-                        .padding(horizontal = 11.dp, vertical = 4.dp)
-                )
-
-
-            }
-            Spacer(modifier = Modifier.width(8.dp))
-            Column(
-                modifier = Modifier
-                    .noRippleClickable {
-                        scope.launch {
-                            pagerState.animateScrollToPage(2)
-                        }
-                    },
-                verticalArrangement = Arrangement.Center,
-                horizontalAlignment = Alignment.CenterHorizontally
-
-            ) {
-                Text(
-                    text = stringResource(R.string.agent_recommend),
-                    fontSize = 14.sp,
-                    color = if (pagerState.currentPage == 2) AppColors.mainText else AppColors.checkedBackground,
-                    modifier = Modifier
-                        .clip(RoundedCornerShape(8.dp))
-                        .background(if (pagerState.currentPage == 2) AppColors.checkedBackground else AppColors.unCheckedBackground)
-                        .padding(horizontal = 11.dp, vertical = 4.dp)
-                )
-
-
-            }
-            Spacer(modifier = Modifier.width(8.dp))
-            Column(
-                modifier = Modifier
-                    .noRippleClickable {
-                        scope.launch {
-                            pagerState.animateScrollToPage(3)
-                        }
-                    },
-                verticalArrangement = Arrangement.Center,
-                horizontalAlignment = Alignment.CenterHorizontally
-
-            ) {
-                Text(
-                    text = stringResource(R.string.agent_other),
-                    fontSize = 14.sp,
-                    color = if (pagerState.currentPage == 3) AppColors.mainText else AppColors.checkedBackground,
-                    modifier = Modifier
-                        .clip(RoundedCornerShape(8.dp))
-                        .background(if (pagerState.currentPage == 3) AppColors.checkedBackground else AppColors.unCheckedBackground)
-                        .padding(horizontal = 11.dp, vertical = 4.dp)
-                )
-
-
-            }
-
-
         }
         Spacer(modifier = Modifier.height(16.dp))
         HorizontalPager(

app/src/main/java/com/aiosman/ravenow/ui/index/tabs/message/MessageList.kt

@@ -55,6 +55,8 @@ import com.aiosman.ravenow.R
 import com.aiosman.ravenow.ui.NavigationRoute
 import com.aiosman.ravenow.ui.composables.CustomAsyncImage
 import com.aiosman.ravenow.ui.composables.StatusBarSpacer
+import com.aiosman.ravenow.ui.composables.TabItem
+import com.aiosman.ravenow.ui.composables.TabSpacer
 import com.aiosman.ravenow.ui.follower.FollowerNoticeViewModel
 import com.aiosman.ravenow.ui.like.LikeNoticeViewModel
 import com.aiosman.ravenow.ui.modifiers.noRippleClickable
@@ -184,76 +186,35 @@ fun NotificationsScreen() {
                     horizontalArrangement = Arrangement.Start,
                     verticalAlignment = Alignment.Bottom
                 ) {
-                    Column(
+                    TabItem(
-                        modifier = Modifier
+                        text = stringResource(R.string.chat_ai),
-                            .noRippleClickable {
+                        isSelected = pagerState.currentPage == 0,
-                                scope.launch {
+                        onClick = {
-                                    pagerState.animateScrollToPage(0)
+                            scope.launch {
-                                }
+                                pagerState.animateScrollToPage(0)
-                            },
+                            }
-                        verticalArrangement = Arrangement.Center,
+                        }
-                        horizontalAlignment = Alignment.CenterHorizontally
+                    )
-
+                    TabSpacer()
-                    ) {
+                    TabItem(
-                        Text(
+                        text = stringResource(R.string.chat_group),
-                            text = stringResource(R.string.chat_ai),
+                        isSelected = pagerState.currentPage == 1,
-                            fontSize = 14.sp,
+                        onClick = {
-                            color = if (pagerState.currentPage == 0) AppColors.checkedText else AppColors.text,
+                            scope.launch {
-                            modifier = Modifier
+                                pagerState.animateScrollToPage(1)
-                                .clip(RoundedCornerShape(8.dp))
+                            }
-                                .background(if (pagerState.currentPage == 0) AppColors.checkedBackground else AppColors.unCheckedBackground)
+                        }
-                                .padding(horizontal = 11.dp, vertical = 4.dp)
+                    )
-                        )
+                    TabSpacer()
-                    }
+                    TabItem(
-                    Spacer(modifier = Modifier.width(8.dp))
+                        text = stringResource(R.string.chat_friend),
-                    Column(
+                        isSelected = pagerState.currentPage == 2,
-                        modifier = Modifier
+                        onClick = {
-                            .noRippleClickable {
+                            scope.launch {
-                                scope.launch {
+                                pagerState.animateScrollToPage(2)
-                                    pagerState.animateScrollToPage(1)
+                            }
-                                }
+                        }
-                            },
+                    )
-                        verticalArrangement = Arrangement.Center,
-                        horizontalAlignment = Alignment.CenterHorizontally
-
-                    ) {
-                        androidx.compose.material.Text(
-                            text = stringResource(R.string.chat_group),
-                            fontSize = 14.sp,
-                            color = if (pagerState.currentPage == 1) AppColors.checkedText else AppColors.text,
-                            modifier = Modifier
-                                .clip(RoundedCornerShape(8.dp))
-                                .background(if (pagerState.currentPage == 1) AppColors.checkedBackground else AppColors.unCheckedBackground)
-                                .padding(horizontal = 11.dp, vertical = 4.dp)
-                        )
-
-
-                    }
-                    Spacer(modifier = Modifier.width(8.dp))
-                    Column(
-                        modifier = Modifier
-                            .noRippleClickable {
-                                scope.launch {
-                                    pagerState.animateScrollToPage(2)
-                                }
-                            },
-                        verticalArrangement = Arrangement.Center,
-                        horizontalAlignment = Alignment.CenterHorizontally
-
-                    ) {
-                        androidx.compose.material.Text(
-                            text = stringResource(R.string.chat_friend),
-                            fontSize = 14.sp,
-                            color = if (pagerState.currentPage == 2) AppColors.checkedText else AppColors.text,
-                            modifier = Modifier
-                                .clip(RoundedCornerShape(8.dp))
-                                .background(if (pagerState.currentPage == 2) AppColors.checkedBackground else AppColors.unCheckedBackground)
-                                .padding(horizontal = 11.dp, vertical = 4.dp)
-                        )
-
-
-                    }
-
                 }
                 HorizontalPager(
                     state = pagerState,

app/src/main/res/drawable/ic_nav_add.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="32dp" android:viewportHeight="32" android:viewportWidth="32" android:width="32dp">
+      
+    <path android:fillColor="#FFFFFF" android:fillType="evenOdd" android:pathData="M16.522,0C25.07,-0 32,6.93 32,15.478L32,16.522C32,25.07 25.07,32 16.522,32L15.478,32C6.93,32 0,25.07 0,16.522L0,15.478C-0,6.93 6.93,0 15.478,0L16.522,0ZM16.043,9.333L15.957,9.333C15.244,9.333 14.667,9.911 14.667,10.623L14.666,14.666L10.623,14.667C9.911,14.667 9.333,15.244 9.333,15.957L9.333,16.043C9.333,16.756 9.911,17.333 10.623,17.333L14.666,17.332L14.667,21.377C14.667,22.089 15.244,22.667 15.957,22.667L16.043,22.667C16.756,22.667 17.333,22.089 17.333,21.377L17.333,17.332L21.377,17.333C22.089,17.333 22.667,16.756 22.667,16.043L22.667,15.957C22.667,15.244 22.089,14.667 21.377,14.667L17.333,14.666L17.333,10.623C17.333,9.911 16.756,9.333 16.043,9.333Z" android:strokeColor="#00000000" android:strokeWidth="1"/>
+    
+</vector>