feat(ui): redesign system message item with card-style layout and add title validation

- Refactor SystemMessageItem with modern card design, gradient colors, and improved visual hierarchy
- Add unread indicator, status badges, and enhanced avatar badges for message types
- Update CreatePostScreen to require title input and improve placeholder text
- Add Android back button handling for notification screens in embedded mode
- Replace manual shadow styles with theme shadow utilities across message screens

src/screens/message/NotificationsScreen.tsx

@@ -14,13 +14,14 @@ import {
   RefreshControl,
   ActivityIndicator,
   Dimensions,
+  BackHandler,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useIsFocused } from '@react-navigation/native';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius } from '../../theme';
+import { colors, spacing, borderRadius, shadows } from '../../theme';
 import { SystemMessageResponse } from '../../types/dto';
 import { messageService } from '../../services/messageService';
 import { commentService } from '../../services/commentService';
@@ -182,6 +183,21 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
     }
   }, [isFocused, onBack]);
 
+  // 处理 Android 物理返回键 - 当 onBack 存在时（内嵌模式），拦截返回键
+  useEffect(() => {
+    if (!onBack) return;
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (isFocused) {
+        onBack();
+        return true; // 阻止默认行为
+      }
+      return false;
+    });
+
+    return () => backHandler.remove();
+  }, [isFocused, onBack]);
+
   // 筛选消息
   const filteredMessages = activeType === 'all'
     ? displayMessages
@@ -558,12 +574,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.md,
     backgroundColor: colors.background.paper,
-    // 移除底部边框，使用更柔和的分隔方式
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
+    ...shadows.sm,
   },
   headerWide: {
     paddingHorizontal: spacing.xl,
@@ -613,7 +624,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     backgroundColor: colors.background.paper,
-    // 移除底部边框，让界面更简洁
   },
   filterContainerWideWeb: {
     paddingHorizontal: spacing.xl,
@@ -629,6 +639,8 @@ const styles = StyleSheet.create({
     marginRight: spacing.xs,
     borderRadius: borderRadius.lg,
     backgroundColor: colors.background.default,
+    borderWidth: 1,
+    borderColor: 'transparent',
   },
   filterTagWide: {
     paddingHorizontal: spacing.lg,
@@ -637,6 +649,7 @@ const styles = StyleSheet.create({
   },
   filterTagActive: {
     backgroundColor: colors.primary.main,
+    borderColor: colors.primary.main,
   },
   filterTagTextActive: {
     fontWeight: '600',
@@ -655,7 +668,8 @@ const styles = StyleSheet.create({
   },
   listContent: {
     flexGrow: 1,
-    paddingTop: spacing.sm,
+    paddingTop: spacing.md,
+    paddingBottom: spacing.lg,
   },
   listContentWide: {
     paddingHorizontal: spacing.xl,
@@ -679,6 +693,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    paddingTop: spacing['3xl'],
   },
   emptyContainerWeb: {
     minHeight: 500,