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.
2026-04-01 16:30:44 +08:00
parent c771bd9755
commit 72842352d9
14 changed files with 507 additions and 109 deletions
--- a/src/stores/chatSettingsStore.ts
+++ b/src/stores/chatSettingsStore.ts
@@ -0,0 +1,201 @@
+/**
+ * 聊天设置 Store
+ * 持久化存储用户的聊天样式偏好设置
+ */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { useShallow } from 'zustand/react/shallow';
+
+// 主题配置 - 扩展包含更多颜色
+export const CHAT_THEMES = [
+  { 
+    id: 'default', 
+    name: '默认绿', 
+    primary: '#4CAF50', 
+    secondary: '#E8F5E9', 
+    bubble: '#DCF8C6', 
+    icon: '🏠',
+    // 扩展颜色
+    card: '#FFFFFF',           // 卡片背景
+    inputBg: '#FFFFFF',        // 输入框背景
+    panelBg: '#F5F5F5',        // 面板背景
+    headerBg: '#FFFFFF',       // 头部背景
+    textPrimary: '#1A1A1A',    // 主要文字
+    textSecondary: '#666666',  // 次要文字
+  },
+  { 
+    id: 'yellow', 
+    name: '活力黄', 
+    primary: '#FFC107', 
+    secondary: '#FFF8E1', 
+    bubble: '#FFECB3', 
+    icon: '🐥',
+    card: '#FFFFFF',
+    inputBg: '#FFFFFF',
+    panelBg: '#FFFDE7',
+    headerBg: '#FFFFFF',
+    textPrimary: '#1A1A1A',
+    textSecondary: '#666666',
+  },
+  { 
+    id: 'blue', 
+    name: '清新蓝', 
+    primary: '#2196F3', 
+    secondary: '#E3F2FD', 
+    bubble: '#BBDEFB', 
+    icon: '☃️',
+    card: '#FFFFFF',
+    inputBg: '#FFFFFF',
+    panelBg: '#E1F5FE',
+    headerBg: '#FFFFFF',
+    textPrimary: '#1A1A1A',
+    textSecondary: '#666666',
+  },
+  { 
+    id: 'purple', 
+    name: '梦幻紫', 
+    primary: '#9C27B0', 
+    secondary: '#F3E5F5', 
+    bubble: '#E1BEE7', 
+    icon: '💎',
+    card: '#FFFFFF',
+    inputBg: '#FFFFFF',
+    panelBg: '#F3E5F5',
+    headerBg: '#FFFFFF',
+    textPrimary: '#1A1A1A',
+    textSecondary: '#666666',
+  },
+  { 
+    id: 'teal', 
+    name: '自然青', 
+    primary: '#009688', 
+    secondary: '#E0F2F1', 
+    bubble: '#B2DFDB', 
+    icon: '🦁',
+    card: '#FFFFFF',
+    inputBg: '#FFFFFF',
+    panelBg: '#E0F2F1',
+    headerBg: '#FFFFFF',
+    textPrimary: '#1A1A1A',
+    textSecondary: '#666666',
+  },
+] as const;
+
+export type ChatThemeId = typeof CHAT_THEMES[number]['id'];
+
+export interface ChatSettings {
+  // 消息字号 (12-24)
+  fontSize: number;
+  // 消息圆角 (0-30)
+  messageRadius: number;
+  // 选中的主题索引
+  themeIndex: number;
+  // 夜间模式
+  nightMode: boolean;
+  // 聊天壁纸 (可选)
+  wallpaper?: string | null;
+  // 名称颜色 (可选)
+  nameColor?: string | null;
+}
+
+const DEFAULT_SETTINGS: ChatSettings = {
+  fontSize: 16,
+  messageRadius: 12,
+  themeIndex: 0,
+  nightMode: false,
+  wallpaper: null,
+  nameColor: null,
+};
+
+interface ChatSettingsState extends ChatSettings {
+  // 获取当前主题
+  getCurrentTheme: () => typeof CHAT_THEMES[number];
+  // 更新设置
+  updateSettings: (settings: Partial<ChatSettings>) => void;
+  // 重置为默认
+  resetSettings: () => void;
+  // 设置字号
+  setFontSize: (size: number) => void;
+  // 设置圆角
+  setMessageRadius: (radius: number) => void;
+  // 设置主题
+  setTheme: (index: number) => void;
+  // 切换夜间模式
+  toggleNightMode: () => void;
+}
+
+const STORAGE_KEY = 'chat_settings';
+
+export const useChatSettingsStore = create<ChatSettingsState>()(
+  persist(
+    (set, get) => ({
+      ...DEFAULT_SETTINGS,
+
+      getCurrentTheme: () => {
+        const { themeIndex } = get();
+        return CHAT_THEMES[themeIndex] ?? CHAT_THEMES[0];
+      },
+
+      updateSettings: (settings) => {
+        set((state) => ({ ...state, ...settings }));
+      },
+
+      resetSettings: () => {
+        set(DEFAULT_SETTINGS);
+      },
+
+      setFontSize: (fontSize) => {
+        set({ fontSize: Math.max(12, Math.min(24, fontSize)) });
+      },
+
+      setMessageRadius: (messageRadius) => {
+        set({ messageRadius: Math.max(0, Math.min(30, messageRadius)) });
+      },
+
+      setTheme: (themeIndex) => {
+        set({ themeIndex: Math.max(0, Math.min(CHAT_THEMES.length - 1, themeIndex)) });
+      },
+
+      toggleNightMode: () => {
+        set((state) => ({ nightMode: !state.nightMode }));
+      },
+    }),
+    {
+      name: STORAGE_KEY,
+      storage: createJSONStorage(() => AsyncStorage),
+    }
+  )
+);
+
+// 导出便捷 hooks
+export function useChatFontSize() {
+  return useChatSettingsStore((s) => s.fontSize);
+}
+
+export function useChatMessageRadius() {
+  return useChatSettingsStore((s) => s.messageRadius);
+}
+
+export function useChatTheme() {
+  const themeIndex = useChatSettingsStore((s) => s.themeIndex);
+  return CHAT_THEMES[themeIndex];
+}
+
+export function useChatNightMode() {
+  return useChatSettingsStore((s) => s.nightMode);
+}
+
+export function useChatSettingsActions() {
+  return useChatSettingsStore(
+    useShallow((s) => ({
+      setFontSize: s.setFontSize,
+      setMessageRadius: s.setMessageRadius,
+      setTheme: s.setTheme,
+      toggleNightMode: s.toggleNightMode,
+      updateSettings: s.updateSettings,
+      resetSettings: s.resetSettings,
+    }))
+  );
+}