feat: 首页更新

README.md

@@ -301,17 +301,17 @@ rn-demo/
 
 项目已安装并配置好以下工具库：
 
-| 类别         | 工具库                                    | 用途                | 状态 |
+| 类别         | 工具库                                    | 用途                 | 状态 |
-| ------------ | ----------------------------------------- | ------------------- | ---- |
+| ------------ | ----------------------------------------- | -------------------- | ---- |
-| **工具类**   | lodash-es                                 | JavaScript 工具函数 | ✅   |
+| **工具类**   | lodash-es                                 | JavaScript 工具函数  | ✅   |
-|              | dayjs                                     | 日期处理            | ✅   |
+|              | dayjs                                     | 日期处理             | ✅   |
-|              | axios                                     | HTTP 请求           | ✅   |
+|              | axios                                     | HTTP 请求            | ✅   |
-| **状态管理** | zustand                                   | 轻量级状态管理      | ✅   |
+| **状态管理** | zustand                                   | 轻量级状态管理       | ✅   |
-| **表单处理** | react-hook-form                           | 表单管理            | ✅   |
+| **表单处理** | react-hook-form                           | 表单管理             | ✅   |
-|              | zod                                       | 数据验证            | ✅   |
+|              | zod                                       | 数据验证             | ✅   |
-| **原生功能** | @react-native-async-storage/async-storage | 本地存储            | ✅   |
+| **原生功能** | @react-native-async-storage/async-storage | 本地存储             | ✅   |
-|              | expo-image                                | 优化的图片组件      | ✅   |
+|              | expo-image                                | 优化的图片组件       | ✅   |
-|              | expo-haptics                              | 触觉反馈            | ✅   |
+|              | expo-haptics                              | 触觉反馈             | ✅   |
 | **UI 组件**  | react-native-paper                        | Material Design 组件 | ✅   |
 
 ### 快速开始
@@ -325,7 +325,13 @@ rn-demo/
 import { Storage, SessionStorage, StorageManager, formatDate } from '@/utils';
 import { useUser, useTheme, useLanguage } from '@/stores';
 import { authService, userService } from '@/services';
-import { useDebounce, useHaptics, useColorScheme, useThemeColors, useClientOnlyValue } from '@/hooks';
+import {
+  useDebounce,
+  useHaptics,
+  useColorScheme,
+  useThemeColors,
+  useClientOnlyValue,
+} from '@/hooks';
 import { loginSchema } from '@/schemas';
 
 // ✅ 主题系统：统一从 theme 目录导入 🎯 NEW!

app/(tabs)/demo.tsx

@@ -28,7 +28,7 @@ import {
   STORAGE_KEYS,
   formatDate,
   formatRelativeTime,
-  formatChatTime
+  formatChatTime,
 } from '@/utils';
 
 // 状态管理
@@ -266,7 +266,7 @@ export default function DemoScreen() {
   const handleThemeChange = () => {
     haptics.selection();
     const themes: Array<'light' | 'dark' | 'auto'> = ['light', 'dark', 'auto'];
-    const currentIndex = themes.indexOf(theme);
+    const currentIndex = themes.indexOf(theme as 'light' | 'dark' | 'auto');
     const nextTheme = themes[(currentIndex + 1) % themes.length];
     setTheme(nextTheme);
   };
@@ -296,9 +296,7 @@ export default function DemoScreen() {
           >
             <Text style={styles.buttonText}>跳转到测试页面 →</Text>
           </TouchableOpacity>
-          <Text style={styles.infoText}>
+          <Text style={styles.infoText}>测试页面是一个独立的业务页面示例，不包含底部 tabs</Text>
-            测试页面是一个独立的业务页面示例，不包含底部 tabs
-          </Text>
 
           <TouchableOpacity
             style={[styles.button, { backgroundColor: '#9333ea', marginTop: 12 }]}
@@ -309,9 +307,7 @@ export default function DemoScreen() {
           >
             <Text style={styles.buttonText}>🎨 主题测试页面 →</Text>
           </TouchableOpacity>
-          <Text style={styles.infoText}>
+          <Text style={styles.infoText}>专门的主题测试页面，可以清楚地看到主题切换效果</Text>
-            专门的主题测试页面，可以清楚地看到主题切换效果
-          </Text>
 
           <TouchableOpacity
             style={[styles.button, { backgroundColor: '#06b6d4', marginTop: 12 }]}
@@ -322,26 +318,18 @@ export default function DemoScreen() {
           >
             <Text style={styles.buttonText}>📚 主题系统示例 →</Text>
           </TouchableOpacity>
-          <Text style={styles.infoText}>
+          <Text style={styles.infoText}>展示四种主题样式使用方式（类似 CSS 类名）</Text>
-            展示四种主题样式使用方式（类似 CSS 类名）
-          </Text>
         </View>
 
         {/* 租户信息显示 */}
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>🏢 租户信息</Text>
-          <Text style={styles.infoText}>
+          <Text style={styles.infoText}>状态: {tenantLoad ? '✅ 已加载' : '❌ 未加载'}</Text>
-            状态: {tenantLoad ? '✅ 已加载' : '❌ 未加载'}
-          </Text>
           {tenantInfo ? (
             <>
               <Text style={styles.infoText}>TID: {tenantInfo.tid || '无'}</Text>
-              <Text style={styles.infoText}>
+              <Text style={styles.infoText}>创建时间: {tenantInfo.create_time || '无'}</Text>
-                创建时间: {tenantInfo.create_time || '无'}
+              <Text style={styles.infoText}>域名: {tenantInfo.domain_addr || '无'}</Text>
-              </Text>
-              <Text style={styles.infoText}>
-                域名: {tenantInfo.domain_addr || '无'}
-              </Text>
             </>
           ) : null}
         </View>

app/(tabs)/paper.tsx

@@ -82,7 +82,11 @@ export default function PaperDemo() {
               🔘 按钮
             </Text>
             <View style={styles.buttonRow}>
-              <Button mode="contained" onPress={() => setSnackbarVisible(true)} style={{ marginRight: 8 }}>
+              <Button
+                mode="contained"
+                onPress={() => setSnackbarVisible(true)}
+                style={{ marginRight: 8 }}
+              >
                 Contained
               </Button>
               <Button mode="outlined" onPress={() => setSnackbarVisible(true)}>
@@ -90,7 +94,11 @@ export default function PaperDemo() {
               </Button>
             </View>
             <View style={styles.buttonRow}>
-              <Button mode="text" onPress={() => setSnackbarVisible(true)} style={{ marginRight: 8 }}>
+              <Button
+                mode="text"
+                onPress={() => setSnackbarVisible(true)}
+                style={{ marginRight: 8 }}
+              >
                 Text
               </Button>
               <Button mode="elevated" onPress={() => setSnackbarVisible(true)} icon="camera">
@@ -140,10 +148,21 @@ export default function PaperDemo() {
               <Chip icon="star" onPress={() => {}} style={{ marginRight: 8, marginBottom: 8 }}>
                 收藏
               </Chip>
-              <Chip icon="heart" mode="outlined" onPress={() => {}} style={{ marginRight: 8, marginBottom: 8 }}>
+              <Chip
+                icon="heart"
+                mode="outlined"
+                onPress={() => {}}
+                style={{ marginRight: 8, marginBottom: 8 }}
+              >
                 喜欢
               </Chip>
-              <Chip icon="close" onPress={() => {}} onClose={() => {}} closeIcon="close-circle" style={{ marginBottom: 8 }}>
+              <Chip
+                icon="close"
+                onPress={() => {}}
+                onClose={() => {}}
+                closeIcon="close-circle"
+                style={{ marginBottom: 8 }}
+              >
                 可关闭
               </Chip>
             </View>

app/theme-example.tsx

@@ -1,6 +1,6 @@
 /**
  * 主题系统使用示例
- * 
+ *
  * 展示四种不同的主题样式使用方式
  */
 
@@ -78,9 +78,7 @@ export default function ThemeExampleScreen() {
       <ScrollView style={s.containerPadded}>
         {/* 自定义样式示例 */}
         <View style={custom.header}>
-          <Text style={custom.headerText}>
+          <Text style={custom.headerText}>主题系统使用示例</Text>
-            主题系统使用示例
-          </Text>
           <Text style={[custom.headerText, { fontSize: 14, marginTop: 8 }]}>
             当前主题: {theme} {isDark ? '🌙' : '☀️'}
           </Text>
@@ -88,9 +86,7 @@ export default function ThemeExampleScreen() {
 
         {/* 方式 1: 使用主题组件 */}
         <View style={custom.section}>
-          <Text style={custom.sectionTitle}>
+          <Text style={custom.sectionTitle}>方式 1: 使用主题组件</Text>
-            方式 1: 使用主题组件
-          </Text>
           <ThemedView style={{ padding: 12, borderRadius: 6 }}>
             <ThemedText type="title">这是标题</ThemedText>
             <ThemedText type="subtitle">这是副标题</ThemedText>
@@ -109,9 +105,7 @@ export default function ThemeExampleScreen() {
 
         {/* 方式 2: 使用通用样式类 */}
         <View style={custom.section}>
-          <Text style={custom.sectionTitle}>
+          <Text style={custom.sectionTitle}>方式 2: 使用通用样式类（类似 CSS 类名）</Text>
-            方式 2: 使用通用样式类（类似 CSS 类名）
-          </Text>
           <View style={s.card}>
             <Text style={s.textTitle}>卡片标题</Text>
             <Text style={s.textSecondary}>卡片描述文本</Text>
@@ -143,9 +137,7 @@ const s = commonStyles[theme];
 
         {/* 方式 3: 使用自定义主题样式 */}
         <View style={custom.section}>
-          <Text style={custom.sectionTitle}>
+          <Text style={custom.sectionTitle}>方式 3: 使用自定义主题样式（推荐）</Text>
-            方式 3: 使用自定义主题样式（推荐）
-          </Text>
           <View style={{ padding: 12 }}>
             <Text style={{ color: colors.text }}>
               本页面的 header 和 section 就是使用自定义主题样式创建的
@@ -176,14 +168,14 @@ const theme = useColorScheme();
 
         {/* 方式 4: 使用 Hooks + 内联样式 */}
         <View style={custom.section}>
-          <Text style={custom.sectionTitle}>
+          <Text style={custom.sectionTitle}>方式 4: 使用 Hooks + 内联样式（动态场景）</Text>
-            方式 4: 使用 Hooks + 内联样式（动态场景）
+          <View
-          </Text>
+            style={{
-          <View style={{
+              backgroundColor: colors.backgroundSecondary,
-            backgroundColor: colors.backgroundSecondary,
+              padding: 16,
-            padding: 16,
+              borderRadius: 8,
-            borderRadius: 8,
+            }}
-          }}>
+          >
             <Text style={{ color: colors.text, fontSize: 16 }}>
               这是使用 useThemeColors() 动态获取颜色的文本
             </Text>
@@ -212,9 +204,7 @@ const colors = useThemeColors();
 
         {/* 颜色展示 */}
         <View style={custom.section}>
-          <Text style={custom.sectionTitle}>
+          <Text style={custom.sectionTitle}>主题颜色展示</Text>
-            主题颜色展示
-          </Text>
           <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
             {Object.entries(colors).map(([key, value]) => (
               <View
@@ -228,21 +218,27 @@ const colors = useThemeColors();
                   borderColor: colors.border,
                 }}
               >
-                <Text style={{
+                <Text
-                  color: key.includes('background') || key.includes('card') || key.includes('input')
+                  style={{
-                    ? colors.text
+                    color:
-                    : '#FFFFFF',
+                      key.includes('background') || key.includes('card') || key.includes('input')
-                  fontSize: 10,
+                        ? colors.text
-                  fontWeight: '600',
+                        : '#FFFFFF',
-                }}>
+                    fontSize: 10,
+                    fontWeight: '600',
+                  }}
+                >
                   {key}
                 </Text>
-                <Text style={{
+                <Text
-                  color: key.includes('background') || key.includes('card') || key.includes('input')
+                  style={{
-                    ? colors.textSecondary
+                    color:
-                    : '#FFFFFF',
+                      key.includes('background') || key.includes('card') || key.includes('input')
-                  fontSize: 8,
+                        ? colors.textSecondary
-                }}>
+                        : '#FFFFFF',
+                    fontSize: 8,
+                  }}
+                >
                   {value}
                 </Text>
               </View>
@@ -256,4 +252,3 @@ const colors = useThemeColors();
     </>
   );
 }
-

app/theme-test.tsx

@@ -1,4 +1,11 @@
-import { StyleSheet, ScrollView, TouchableOpacity, View, Text, useColorScheme as useSystemColorScheme } from 'react-native';
+import {
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  View,
+  Text,
+  useColorScheme as useSystemColorScheme,
+} from 'react-native';
 import { Stack } from 'expo-router';
 import { useState, useEffect, useMemo } from 'react';
 import { useTheme, useSettingsStore } from '@/stores';
@@ -17,7 +24,9 @@ export default function ThemeTestScreen() {
   // 直接计算实际应用的主题 - 不使用 useColorScheme hook
   const actualTheme: 'light' | 'dark' = useMemo(() => {
     return currentTheme === 'auto'
-      ? (systemColorScheme === 'dark' ? 'dark' : 'light')
+      ? systemColorScheme === 'dark'
+        ? 'dark'
+        : 'light'
       : currentTheme;
   }, [currentTheme, systemColorScheme]);
 
@@ -30,7 +39,7 @@ export default function ThemeTestScreen() {
   // 监听主题变化
   useEffect(() => {
     console.log('🎨 Theme changed:', { currentTheme, systemColorScheme, actualTheme, renderKey });
-    setRenderKey(prev => prev + 1);
+    setRenderKey((prev) => prev + 1);
   }, [currentTheme, systemColorScheme, actualTheme]);
 
   const handleThemeChange = (newTheme: 'light' | 'dark' | 'auto') => {
@@ -50,14 +59,10 @@ export default function ThemeTestScreen() {
           headerTintColor: colors.text,
         }}
       />
-      <ScrollView
+      <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
-        style={[styles.container, { backgroundColor: colors.background }]}
-      >
         {/* 主题信息 */}
         <View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
-          <Text style={[styles.title, { color: colors.text }]}>
+          <Text style={[styles.title, { color: colors.text }]}>当前主题信息</Text>
-            当前主题信息
-          </Text>
           <Text style={[styles.infoText, { color: colors.textSecondary }]}>
             用户设置: {currentTheme}
           </Text>
@@ -74,24 +79,25 @@ export default function ThemeTestScreen() {
 
         {/* 主题切换按钮 */}
         <View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
-          <Text style={[styles.title, { color: colors.text }]}>
+          <Text style={[styles.title, { color: colors.text }]}>切换主题</Text>
-            切换主题
-          </Text>
           <View style={styles.buttonRow}>
             <TouchableOpacity
               style={[
                 styles.themeButton,
                 {
-                  backgroundColor: currentTheme === 'light' ? colors.primary : colors.backgroundTertiary,
+                  backgroundColor:
+                    currentTheme === 'light' ? colors.primary : colors.backgroundTertiary,
                   borderColor: colors.border,
-                }
+                },
               ]}
               onPress={() => handleThemeChange('light')}
             >
-              <Text style={[
+              <Text
-                styles.buttonText,
+                style={[
-                { color: currentTheme === 'light' ? '#fff' : colors.text }
+                  styles.buttonText,
-              ]}>
+                  { color: currentTheme === 'light' ? '#fff' : colors.text },
+                ]}
+              >
                 ☀️ 浅色
               </Text>
             </TouchableOpacity>
@@ -100,16 +106,19 @@ export default function ThemeTestScreen() {
               style={[
                 styles.themeButton,
                 {
-                  backgroundColor: currentTheme === 'dark' ? colors.primary : colors.backgroundTertiary,
+                  backgroundColor:
+                    currentTheme === 'dark' ? colors.primary : colors.backgroundTertiary,
                   borderColor: colors.border,
-                }
+                },
               ]}
               onPress={() => handleThemeChange('dark')}
             >
-              <Text style={[
+              <Text
-                styles.buttonText,
+                style={[
-                { color: currentTheme === 'dark' ? '#fff' : colors.text }
+                  styles.buttonText,
-              ]}>
+                  { color: currentTheme === 'dark' ? '#fff' : colors.text },
+                ]}
+              >
                 🌙 深色
               </Text>
             </TouchableOpacity>
@@ -118,16 +127,19 @@ export default function ThemeTestScreen() {
               style={[
                 styles.themeButton,
                 {
-                  backgroundColor: currentTheme === 'auto' ? colors.primary : colors.backgroundTertiary,
+                  backgroundColor:
+                    currentTheme === 'auto' ? colors.primary : colors.backgroundTertiary,
                   borderColor: colors.border,
-                }
+                },
               ]}
               onPress={() => handleThemeChange('auto')}
             >
-              <Text style={[
+              <Text
-                styles.buttonText,
+                style={[
-                { color: currentTheme === 'auto' ? '#fff' : colors.text }
+                  styles.buttonText,
-              ]}>
+                  { color: currentTheme === 'auto' ? '#fff' : colors.text },
+                ]}
+              >
                 🔄 自动
               </Text>
             </TouchableOpacity>
@@ -136,9 +148,7 @@ export default function ThemeTestScreen() {
 
         {/* 文本颜色展示 */}
         <View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
-          <Text style={[styles.title, { color: colors.text }]}>
+          <Text style={[styles.title, { color: colors.text }]}>文本颜色</Text>
-            文本颜色
-          </Text>
           <Text style={[styles.colorText, { color: colors.text }]}>
             Primary Text - {colors.text}
           </Text>
@@ -152,15 +162,22 @@ export default function ThemeTestScreen() {
 
         {/* 背景颜色展示 */}
         <View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
-          <Text style={[styles.title, { color: colors.text }]}>
+          <Text style={[styles.title, { color: colors.text }]}>背景颜色</Text>
-            背景颜色
-          </Text>
           <View style={[styles.colorBox, { backgroundColor: colors.background }]}>
             <Text style={[styles.colorText, { color: colors.text }]}>
               Primary Background - {colors.background}
             </Text>
           </View>
-          <View style={[styles.colorBox, { backgroundColor: colors.backgroundSecondary, borderWidth: 1, borderColor: colors.border }]}>
+          <View
+            style={[
+              styles.colorBox,
+              {
+                backgroundColor: colors.backgroundSecondary,
+                borderWidth: 1,
+                borderColor: colors.border,
+              },
+            ]}
+          >
             <Text style={[styles.colorText, { color: colors.text }]}>
               Secondary Background - {colors.backgroundSecondary}
             </Text>
@@ -174,15 +191,15 @@ export default function ThemeTestScreen() {
 
         {/* 主题颜色展示 */}
         <View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
-          <Text style={[styles.title, { color: colors.text }]}>
+          <Text style={[styles.title, { color: colors.text }]}>主题颜色</Text>
-            主题颜色
-          </Text>
           <View style={styles.colorGrid}>
             <View style={[styles.colorBox, { backgroundColor: colors.primary }]}>
               <Text style={[styles.colorText, { color: '#fff' }]}>Primary - {colors.primary}</Text>
             </View>
             <View style={[styles.colorBox, { backgroundColor: colors.secondary }]}>
-              <Text style={[styles.colorText, { color: '#fff' }]}>Secondary - {colors.secondary}</Text>
+              <Text style={[styles.colorText, { color: '#fff' }]}>
+                Secondary - {colors.secondary}
+              </Text>
             </View>
             <View style={[styles.colorBox, { backgroundColor: colors.success }]}>
               <Text style={[styles.colorText, { color: '#fff' }]}>Success - {colors.success}</Text>
@@ -201,30 +218,27 @@ export default function ThemeTestScreen() {
 
         {/* UI 元素展示 */}
         <View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
-          <Text style={[styles.title, { color: colors.text }]}>
+          <Text style={[styles.title, { color: colors.text }]}>UI 元素</Text>
-            UI 元素
-          </Text>
           <View style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }]}>
-            <Text style={[styles.cardText, { color: colors.text }]}>
+            <Text style={[styles.cardText, { color: colors.text }]}>这是一个卡片组件</Text>
-              这是一个卡片组件
-            </Text>
             <Text style={[styles.cardSubtext, { color: colors.textSecondary }]}>
               卡片背景色: {colors.card}
             </Text>
           </View>
 
-          <View style={[styles.input, { backgroundColor: colors.inputBackground, borderColor: colors.inputBorder }]}>
+          <View
-            <Text style={[styles.inputText, { color: colors.textSecondary }]}>
+            style={[
-              输入框样式预览
+              styles.input,
-            </Text>
+              { backgroundColor: colors.inputBackground, borderColor: colors.inputBorder },
+            ]}
+          >
+            <Text style={[styles.inputText, { color: colors.textSecondary }]}>输入框样式预览</Text>
           </View>
 
           <View style={[styles.separator, { backgroundColor: colors.separator }]} />
 
           <TouchableOpacity style={[styles.button, { backgroundColor: colors.buttonPrimary }]}>
-            <Text style={[styles.buttonText, { color: '#fff' }]}>
+            <Text style={[styles.buttonText, { color: '#fff' }]}>按钮示例</Text>
-              按钮示例
-            </Text>
           </TouchableOpacity>
         </View>
       </ScrollView>
@@ -314,4 +328,3 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
-