From 1c3797ea7d2d13744f3b2515c91acc790a1d5e00 Mon Sep 17 00:00:00 2001
From: lafay <2021211506@stu.hit.edu.cn>
Date: Tue, 21 Apr 2026 22:31:06 +0800
Subject: [PATCH] refactor(ui): redesign TabBar to border-bottom indicator
 style

- Remove pill container styling with shadows and rounded corners
- Simplify tab styling and reduce font weights
- Change active indicator from 20px to span 50% width
- Add channel tag display to PostDetailScreen
- Simplify SafeAreaView edge handling in embedded screens
---
 src/components/business/TabBar.tsx        | 34 ++++++++---------------
 src/screens/home/HomeScreen.tsx           |  2 +-
 src/screens/home/PostDetailScreen.tsx     | 33 ++++++++++++++++++++++
 src/screens/home/SearchScreen.tsx         |  7 ++---
 src/screens/message/MessageListScreen.tsx |  2 +-
 5 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/components/business/TabBar.tsx b/src/components/business/TabBar.tsx
index 9db9af7..1eb9fe4 100644
--- a/src/components/business/TabBar.tsx
+++ b/src/components/business/TabBar.tsx
@@ -135,33 +135,21 @@ function createTabBarStyles(colors: AppColors) {
     modernContainer: {
       flexDirection: 'row',
       backgroundColor: colors.background.paper,
-      borderRadius: borderRadius['2xl'],
-      marginHorizontal: spacing.lg,
-      marginVertical: spacing.sm,
-      padding: spacing.xs,
-      shadowColor: colors.chat.shadow,
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.1,
-      shadowRadius: 16,
-      elevation: 6,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+      alignItems: 'center',
+      paddingRight: spacing.xs,
     },
     modernTab: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
       paddingVertical: spacing.md,
-      paddingHorizontal: spacing.sm,
-      borderRadius: borderRadius.lg,
       position: 'relative',
       backgroundColor: 'transparent',
     },
     modernTabActive: {
-      backgroundColor: colors.primary.main + '12',
-      shadowColor: colors.primary.main + '20',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 3,
+      backgroundColor: 'transparent',
     },
     modernTabContent: {
       flexDirection: 'row',
@@ -172,19 +160,21 @@ function createTabBarStyles(colors: AppColors) {
       marginRight: spacing.xs,
     },
     modernTabText: {
-      fontWeight: '600',
+      fontWeight: '500',
       fontSize: fontSizes.md,
     },
     modernTabTextActive: {
-      fontWeight: '700',
+      fontWeight: '600',
     },
     modernTabIndicator: {
       position: 'absolute',
-      bottom: 4,
-      width: 20,
+      bottom: 0,
+      left: '25%',
+      right: '25%',
       height: 3,
       backgroundColor: colors.primary.main,
-      borderRadius: borderRadius.full,
+      borderTopLeftRadius: borderRadius.sm,
+      borderTopRightRadius: borderRadius.sm,
     },
   });
 }
diff --git a/src/screens/home/HomeScreen.tsx b/src/screens/home/HomeScreen.tsx
index 3d2e5fb..31ad571 100644
--- a/src/screens/home/HomeScreen.tsx
+++ b/src/screens/home/HomeScreen.tsx
@@ -942,7 +942,7 @@ export const HomeScreen: React.FC = () => {
   // 搜索页面内嵌模式
   if (showSearch) {
     return (
-      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <SafeAreaView style={styles.container} edges={['bottom']}>
         <StatusBar barStyle={statusBarStyle} backgroundColor={colors.background.paper} />
         <SearchScreen
           onBack={() => setShowSearch(false)}
diff --git a/src/screens/home/PostDetailScreen.tsx b/src/screens/home/PostDetailScreen.tsx
index 65ce7f7..404baaa 100644
--- a/src/screens/home/PostDetailScreen.tsx
+++ b/src/screens/home/PostDetailScreen.tsx
@@ -1140,6 +1140,18 @@ export const PostDetailScreen: React.FC = () => {
           </View>
         )}
 
+        {/* 所属板块 */}
+        {!!post.channel?.name && (
+          <View style={[styles.channelTagContainer, { marginTop: responsiveGap }]}>
+            <View style={styles.channelTag}>
+              <MaterialCommunityIcons name="tag-outline" size={11} color={colors.primary.main} />
+              <Text style={styles.channelTagText} numberOfLines={1}>
+                {post.channel.name}
+              </Text>
+            </View>
+          </View>
+        )}
+
         {/* 发帖时间和浏览量 - 放在图片下方 */}
         <View style={[styles.postMetaInfo, { marginTop: responsiveGap }]}>
           <View style={styles.metaInfoMain}>
@@ -2226,6 +2238,27 @@ function createPostDetailStyles(colors: AppColors) {
     marginTop: spacing.md,
     textAlign: 'center',
   },
+  // 所属板块标签
+  channelTagContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  channelTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: 140,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: borderRadius.sm,
+    backgroundColor: `${colors.primary.main}12`,
+    gap: 4,
+  },
+  channelTagText: {
+    fontSize: fontSizes.xs,
+    color: colors.primary.main,
+    fontWeight: '600',
+    flexShrink: 1,
+  },
   // 评论加载更多样式
   commentsLoadingFooter: {
     paddingVertical: spacing.md,
diff --git a/src/screens/home/SearchScreen.tsx b/src/screens/home/SearchScreen.tsx
index f553304..a5e797b 100644
--- a/src/screens/home/SearchScreen.tsx
+++ b/src/screens/home/SearchScreen.tsx
@@ -13,7 +13,7 @@ import {
   ScrollView,
   RefreshControl,
 } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
@@ -41,7 +41,6 @@ export const SearchScreen: React.FC<SearchScreenProps> = ({ onBack }) => {
   const colors = useAppColors();
   const styles = useMemo(() => createSearchScreenStyles(colors), [colors]);
   const router = useRouter();
-  const insets = useSafeAreaInsets();
   const { searchHistory: history, addSearchHistory, clearSearchHistory } = useUserStore();
   
   // 使用响应式 hook
@@ -494,13 +493,13 @@ export const SearchScreen: React.FC<SearchScreenProps> = ({ onBack }) => {
   };
 
   return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
       {/* 搜索输入框 */}
       <View
         style={[
           styles.searchHeader,
           {
-            paddingTop: Math.max(spacing.sm, insets.top + spacing.xs),
+            paddingTop: spacing.sm,
             paddingHorizontal: responsivePadding,
             paddingBottom: spacing.xs,
           },
diff --git a/src/screens/message/MessageListScreen.tsx b/src/screens/message/MessageListScreen.tsx
index 43db9c3..2bf1293 100644
--- a/src/screens/message/MessageListScreen.tsx
+++ b/src/screens/message/MessageListScreen.tsx
@@ -677,7 +677,7 @@ export const MessageListScreen: React.FC = () => {
   const renderSearchMode = () => (
     <View style={styles.searchModeContainer}>
       {/* 搜索头部 */}
-      <View style={[styles.searchHeader, { paddingTop: Math.max(spacing.sm, insets.top + spacing.xs) }]}>
+      <View style={[styles.searchHeader, { paddingTop: spacing.sm }]}>
         <View style={styles.searchShell}>
           <SearchBar
             value={searchText}