feat(chat): enhance chat settings and message bubble styles

- Introduced dynamic chat settings for font size and message bubble radius, improving user customization.
- Updated ChatScreen styles to support dynamic themes and responsive layouts.
- Refactored bubble styles to utilize dynamic properties for better visual consistency.
- Simplified chat settings management by integrating Zustand store for state management.

This update significantly enhances the chat interface and user experience by allowing personalized settings and improved visual elements.

src/screens/profile/ChatSettingsScreen.tsx

@@ -3,7 +3,7 @@
  * 胡萝卜BBS - 聊天个性化设置
  */
 
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -23,19 +23,16 @@ import {
 } from '../../theme';
 import { Text } from '../../components/common';
 import { useResponsiveSpacing } from '../../hooks';
+import {
+  useChatSettingsStore,
+  useChatSettingsActions,
+  CHAT_THEMES,
+} from '../../stores/chatSettingsStore';
+import { useCurrentUser } from '../../stores';
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 const CARD_MAX_WIDTH = 720;
 
-// 主题配置
-const THEMES = [
-  { id: 'default', name: '默认绿', primary: '#4CAF50', secondary: '#E8F5E9', bubble: '#DCF8C6', icon: '🏠' },
-  { id: 'yellow', name: '活力黄', primary: '#FFC107', secondary: '#FFF8E1', bubble: '#FFECB3', icon: '🐥' },
-  { id: 'blue', name: '清新蓝', primary: '#2196F3', secondary: '#E3F2FD', bubble: '#BBDEFB', icon: '☃️' },
-  { id: 'purple', name: '梦幻紫', primary: '#9C27B0', secondary: '#F3E5F5', bubble: '#E1BEE7', icon: '💎' },
-  { id: 'teal', name: '自然青', primary: '#009688', secondary: '#E0F2F1', bubble: '#B2DFDB', icon: '🦁' },
-] as const;
-
 interface SliderProps {
   value: number;
   min: number;
@@ -306,13 +303,22 @@ export const ChatSettingsScreen: React.FC = () => {
   const styles = useMemo(() => createStyles(colors), [colors]);
   const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
 
-  // 状态
-  const [fontSize, setFontSize] = useState(16);
-  const [messageRadius, setMessageRadius] = useState(17);
-  const [selectedTheme, setSelectedTheme] = useState(0);
-  const [nightMode, setNightMode] = useState(false);
+  // 获取当前用户信息
+  const currentUser = useCurrentUser();
 
-  const currentTheme = THEMES[selectedTheme];
+  // 从 store 获取状态
+  const fontSize = useChatSettingsStore((s) => s.fontSize);
+  const messageRadius = useChatSettingsStore((s) => s.messageRadius);
+  const themeIndex = useChatSettingsStore((s) => s.themeIndex);
+  const nightMode = useChatSettingsStore((s) => s.nightMode);
+
+  // 获取操作方法
+  const { setFontSize, setMessageRadius, setTheme, toggleNightMode } = useChatSettingsActions();
+
+  const currentTheme = CHAT_THEMES[themeIndex];
+
+  // 用户显示名称
+  const userName = currentUser?.nickname || currentUser?.username || '我';
 
   // 渲染聊天预览
   const renderChatPreview = () => (
@@ -320,7 +326,7 @@ export const ChatSettingsScreen: React.FC = () => {
       <Text style={styles.sectionTitle}>预览</Text>
       <View style={[styles.previewContainer, { backgroundColor: currentTheme.secondary }]}>
         <View style={[styles.previewMessage, { borderRadius: messageRadius }]}>
-          <Text style={[styles.previewText, { fontSize }]}>MiMQy</Text>
+          <Text style={[styles.previewText, { fontSize }]}>{userName}</Text>
           <Text style={[styles.previewText, { fontSize: fontSize - 2 }]}>
             早上好！👋
           </Text>
@@ -331,9 +337,9 @@ export const ChatSettingsScreen: React.FC = () => {
         </View>
         <View style={[styles.previewReply, { borderRadius: messageRadius, backgroundColor: currentTheme.bubble }]}>
           <Text style={[styles.previewText, { fontSize }]}>
-            现在是东京的早晨😎
+            现在是威海的早晨😎
           </Text>
-          <Text style={styles.previewTime}>AM12:57 ✓</Text>
+          <Text style={styles.previewTime}>AM12:57</Text>
         </View>
       </View>
     </View>
@@ -365,15 +371,15 @@ export const ChatSettingsScreen: React.FC = () => {
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.themeList}
       >
-        {THEMES.map((theme, index) => (
+        {CHAT_THEMES.map((theme, index) => (
           <TouchableOpacity
             key={theme.id}
             style={[
               styles.themeItem,
-              selectedTheme === index && styles.themeItemActive,
+              themeIndex === index && styles.themeItemActive,
               { backgroundColor: theme.secondary },
             ]}
-            onPress={() => setSelectedTheme(index)}
+            onPress={() => setTheme(index)}
             activeOpacity={0.8}
           >
             <View style={styles.themePreview}>
@@ -450,7 +456,7 @@ export const ChatSettingsScreen: React.FC = () => {
           </View>
           <TouchableOpacity 
             style={[styles.switch, nightMode && styles.switchActive]}
-            onPress={() => setNightMode(!nightMode)}
+            onPress={() => toggleNightMode()}
           >
             <View style={[styles.switchThumb, { alignSelf: nightMode ? 'flex-end' : 'flex-start' }]} />
           </TouchableOpacity>