feat: 添加聊天会话页面，支持会话ID和标题显示，优化会话列表和搜索功能

features/im/components/conversation-header.tsx

@@ -19,7 +19,7 @@ export function ConversationHeader({
         onPress={onPressCreate}
         style={({ pressed }) => [styles.addButton, pressed && styles.addButtonPressed]}
       >
-        <MaterialIcons color="#666666" name="add-circle-outline" size={36} />
+        <MaterialIcons color="#666666" name="add-circle-outline" size={30} />
       </Pressable>
     </View>
   );

features/im/components/conversation-list.tsx

@@ -1,5 +1,5 @@
 import { FlashList } from "@shopify/flash-list";
-import { StyleSheet, Text, View } from "react-native";
+import { RefreshControl, StyleSheet, Text, View } from "react-native";
 
 import { ConversationListItem } from "@/features/im/components/conversation-list-item";
 import type { ConversationItem } from "@/features/im/types/conversation";
@@ -7,40 +7,45 @@ import type { ConversationItem } from "@/features/im/types/conversation";
 type ConversationListProps = {
   data: ConversationItem[];
   isLoading?: boolean;
+  isRefreshing?: boolean;
+  onRefresh?: () => void;
   onPressItem?: (item: ConversationItem) => void;
 };
 
 export function ConversationList({
   data,
   isLoading = false,
+  isRefreshing = false,
+  onRefresh,
   onPressItem,
 }: ConversationListProps) {
-  if (isLoading) {
-    return (
-      <View style={styles.emptyContainer}>
-        <Text style={styles.emptyTitle}>会话加载中...</Text>
-      </View>
-    );
-  }
-
-  if (data.length === 0) {
-    return (
-      <View style={styles.emptyContainer}>
-        <Text style={styles.emptyTitle}>暂无会话</Text>
-        <Text style={styles.emptyHint}>试试更换关键字</Text>
-      </View>
-    );
-  }
-
   return (
     <FlashList
+      alwaysBounceVertical
+      bounces
       contentInsetAdjustmentBehavior="automatic"
       contentContainerStyle={styles.contentContainer}
       data={data}
       keyExtractor={(item) => item.id}
+      ListEmptyComponent={
+        <View style={styles.emptyContainer}>
+          <Text style={styles.emptyTitle}>{isLoading ? "会话加载中..." : "暂无会话"}</Text>
+          {!isLoading && <Text style={styles.emptyHint}>试试更换关键字</Text>}
+        </View>
+      }
+      onRefresh={onRefresh}
+      refreshControl={
+        <RefreshControl
+          colors={["#00D48C"]}
+          onRefresh={onRefresh}
+          refreshing={isRefreshing}
+          tintColor="#00D48C"
+        />
+      }
       renderItem={({ item }) => (
         <ConversationListItem item={item} onPress={onPressItem} />
       )}
+      refreshing={isRefreshing}
       showsVerticalScrollIndicator={false}
     />
   );
@@ -48,6 +53,7 @@ export function ConversationList({
 
 const styles = StyleSheet.create({
   contentContainer: {
+    flexGrow: 1,
     paddingBottom: 28,
     paddingTop: 16,
   },

features/im/components/conversation-search-bar.tsx

@@ -1,5 +1,6 @@
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
-import { StyleSheet, TextInput, View } from "react-native";
+import { useRef, useState } from "react";
+import { Animated, Easing, StyleSheet, TextInput } from "react-native";
 
 type ConversationSearchBarProps = {
   value: string;
@@ -10,17 +11,52 @@ export function ConversationSearchBar({
   value,
   onChangeText,
 }: ConversationSearchBarProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const focusAnim = useRef(new Animated.Value(0)).current;
+
+  const animateFocus = (toValue: 0 | 1) => {
+    Animated.timing(focusAnim, {
+      toValue,
+      duration: 140,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  };
+
   return (
-    <View style={styles.wrapper}>
+    <Animated.View
+      style={[
+        styles.wrapper,
+        isFocused && styles.wrapperFocused,
+        {
+          transform: [
+            {
+              scale: focusAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [1, 1.01],
+              }),
+            },
+          ],
+        },
+      ]}
+    >
       <MaterialIcons color="#A2A2A7" name="search" size={28} />
       <TextInput
+        onBlur={() => {
+          setIsFocused(false);
+          animateFocus(0);
+        }}
         onChangeText={onChangeText}
+        onFocus={() => {
+          setIsFocused(true);
+          animateFocus(1);
+        }}
         placeholder="搜索联系人备注/昵称/ID"
         placeholderTextColor="#B8B8BC"
         style={styles.input}
         value={value}
       />
-    </View>
+    </Animated.View>
   );
 }
 
@@ -28,7 +64,9 @@ const styles = StyleSheet.create({
   wrapper: {
     alignItems: "center",
     backgroundColor: "#F0F0F2",
+    borderColor: "transparent",
     borderCurve: "continuous",
+    borderWidth: 1,
     borderRadius: 20,
     flexDirection: "row",
     gap: 8,
@@ -36,6 +74,10 @@ const styles = StyleSheet.create({
     marginHorizontal: 20,
     paddingHorizontal: 16,
   },
+  wrapperFocused: {
+    backgroundColor: "#F4FAF8",
+    borderColor: "#BEEEDB",
+  },
   input: {
     color: "#2A2A2A",
     flex: 1,

features/im/hooks/use-conversation-list.ts

@@ -120,10 +120,19 @@ function toViewModel(item: OpenIMConversationItem): ConversationItem {
 export function useConversationList() {
   const [conversations, setConversations] = useState<OpenIMConversationItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const reload = useCallback(async () => {
+  const loadConversations = useCallback(async (mode: "initial" | "refresh" | "silent") => {
+    const startedAt = Date.now();
+    if (mode === "initial") {
+      setIsLoading(true);
+    }
+    if (mode === "refresh") {
+      setIsRefreshing(true);
+    }
+
     try {
       setError(null);
       const status = await OpenIMSDK.getLoginStatus();
@@ -141,13 +150,26 @@ export function useConversationList() {
       const message = err instanceof Error ? err.message : "拉取会话失败";
       setError(message);
     } finally {
+      if (mode === "refresh") {
+        const elapsed = Date.now() - startedAt;
+        const minVisibleMs = 420;
+        if (elapsed < minVisibleMs) {
+          await new Promise((resolve) => setTimeout(resolve, minVisibleMs - elapsed));
+        }
+      }
+
       setIsLoading(false);
+      setIsRefreshing(false);
     }
   }, []);
 
+  const reload = useCallback(async () => {
+    await loadConversations("refresh");
+  }, [loadConversations]);
+
   useEffect(() => {
-    reload();
-  }, [reload]);
+    loadConversations("initial");
+  }, [loadConversations]);
 
   useEffect(() => {
     const onConversationChanged = (changed: OpenIMConversationItem[]) => {
@@ -159,7 +181,7 @@ export function useConversationList() {
     };
 
     const onRecvNewMessages = () => {
-      reload();
+      loadConversations("silent");
     };
 
     OpenIMSDK.on(OpenIMEvent.OnConversationChanged, onConversationChanged);
@@ -171,13 +193,14 @@ export function useConversationList() {
       OpenIMSDK.off(OpenIMEvent.OnNewConversation, onNewConversation);
       OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
     };
-  }, [reload]);
+  }, [loadConversations]);
 
   const items = useMemo(() => conversations.map(toViewModel), [conversations]);
 
   return {
     items,
     isLoading,
+    isRefreshing,
     isLoggedIn,
     error,
     reload,

features/im/hooks/use-debounced-value.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export function useDebouncedValue<T>(value: T, delay = 180) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [delay, value]);
+
+  return debouncedValue;
+}