feat: 添加会话列表和搜索功能，重构聊天界面组件

features/im/components/conversation-header.tsx

@@ -0,0 +1,56 @@
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+type ConversationHeaderProps = {
+  totalLabel: string;
+  onPressCreate?: () => void;
+};
+
+export function ConversationHeader({
+  totalLabel,
+  onPressCreate,
+}: ConversationHeaderProps) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.sideSpacer} />
+      <Text style={styles.title}>{`消息(${totalLabel})`}</Text>
+      <Pressable
+        accessibilityRole="button"
+        onPress={onPressCreate}
+        style={({ pressed }) => [styles.addButton, pressed && styles.addButtonPressed]}
+      >
+        <MaterialIcons color="#666666" name="add-circle-outline" size={36} />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flexDirection: "row",
+    height: 52,
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+  },
+  sideSpacer: {
+    width: 36,
+  },
+  title: {
+    color: "#242424",
+    fontSize: 18,
+    fontWeight: "700",
+    letterSpacing: -0.2,
+  },
+  addButton: {
+    alignItems: "center",
+    borderCurve: "continuous",
+    borderRadius: 18,
+    height: 36,
+    justifyContent: "center",
+    width: 36,
+  },
+  addButtonPressed: {
+    opacity: 0.7,
+  },
+});

features/im/components/conversation-list-item.tsx

@@ -0,0 +1,136 @@
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { Image } from "expo-image";
+import { memo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+import type { ConversationItem } from "@/features/im/types/conversation";
+
+type ConversationListItemProps = {
+  item: ConversationItem;
+  onPress?: (item: ConversationItem) => void;
+};
+
+function ConversationListItemInner({ item, onPress }: ConversationListItemProps) {
+  const isSystem = item.kind === "system";
+
+  return (
+    <Pressable
+      onPress={() => onPress?.(item)}
+      style={({ pressed }) => [styles.container, pressed && styles.containerPressed]}
+    >
+      {isSystem ? (
+        <View style={styles.systemAvatar}>
+          <MaterialIcons color="#FFFFFF" name="volume-up" size={28} />
+        </View>
+      ) : (
+        <Image
+          source={item.avatarUrl}
+          style={styles.avatar}
+          transition={120}
+          contentFit="cover"
+        />
+      )}
+
+      <View style={styles.content}>
+        <View style={styles.rowTop}>
+          <Text numberOfLines={1} style={styles.title}>
+            {item.title}
+          </Text>
+          <Text style={styles.timeLabel}>{item.timeLabel}</Text>
+        </View>
+
+        <View style={styles.rowBottom}>
+          <Text numberOfLines={1} style={styles.preview}>
+            {item.preview}
+          </Text>
+          {!!item.unreadCount && (
+            <View style={styles.unreadBadge}>
+              <Text style={styles.unreadText}>{item.unreadCount}</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+export const ConversationListItem = memo(ConversationListItemInner);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12,
+    minHeight: 78,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  containerPressed: {
+    opacity: 0.75,
+  },
+  avatar: {
+    backgroundColor: "#EAEAEA",
+    borderCurve: "continuous",
+    borderRadius: 24,
+    height: 48,
+    width: 48,
+  },
+  systemAvatar: {
+    alignItems: "center",
+    backgroundColor: "#50D280",
+    borderCurve: "continuous",
+    borderRadius: 24,
+    height: 48,
+    justifyContent: "center",
+    width: 48,
+  },
+  content: {
+    flex: 1,
+    gap: 6,
+    justifyContent: "center",
+  },
+  rowTop: {
+    alignItems: "baseline",
+    flexDirection: "row",
+    gap: 12,
+    justifyContent: "space-between",
+  },
+  rowBottom: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12,
+    justifyContent: "space-between",
+  },
+  title: {
+    color: "#323232",
+    flex: 1,
+    fontSize: 18,
+    fontWeight: "700",
+  },
+  timeLabel: {
+    color: "#9B9EA4",
+    fontSize: 12,
+    fontVariant: ["tabular-nums"],
+    fontWeight: "400",
+  },
+  preview: {
+    color: "#A2A6AD",
+    flex: 1,
+    fontSize: 15,
+    fontWeight: "400",
+  },
+  unreadBadge: {
+    alignItems: "center",
+    backgroundColor: "#00BC7D",
+    borderRadius: 10,
+    justifyContent: "center",
+    minWidth: 20,
+    paddingHorizontal: 6,
+  },
+  unreadText: {
+    color: "#FFFFFF",
+    fontSize: 12,
+    fontVariant: ["tabular-nums"],
+    fontWeight: "600",
+  },
+});

features/im/components/conversation-list.tsx

@@ -0,0 +1,70 @@
+import { FlashList } from "@shopify/flash-list";
+import { StyleSheet, Text, View } from "react-native";
+
+import { ConversationListItem } from "@/features/im/components/conversation-list-item";
+import type { ConversationItem } from "@/features/im/types/conversation";
+
+type ConversationListProps = {
+  data: ConversationItem[];
+  isLoading?: boolean;
+  onPressItem?: (item: ConversationItem) => void;
+};
+
+export function ConversationList({
+  data,
+  isLoading = false,
+  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
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.contentContainer}
+      data={data}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item }) => (
+        <ConversationListItem item={item} onPress={onPressItem} />
+      )}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingBottom: 28,
+    paddingTop: 16,
+  },
+  emptyContainer: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  emptyTitle: {
+    color: "#666B73",
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  emptyHint: {
+    color: "#A0A4AA",
+    fontSize: 13,
+    marginTop: 6,
+  },
+});

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

@@ -0,0 +1,45 @@
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { StyleSheet, TextInput, View } from "react-native";
+
+type ConversationSearchBarProps = {
+  value: string;
+  onChangeText: (value: string) => void;
+};
+
+export function ConversationSearchBar({
+  value,
+  onChangeText,
+}: ConversationSearchBarProps) {
+  return (
+    <View style={styles.wrapper}>
+      <MaterialIcons color="#A2A2A7" name="search" size={28} />
+      <TextInput
+        onChangeText={onChangeText}
+        placeholder="搜索联系人备注/昵称/ID"
+        placeholderTextColor="#B8B8BC"
+        style={styles.input}
+        value={value}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: "center",
+    backgroundColor: "#F0F0F2",
+    borderCurve: "continuous",
+    borderRadius: 20,
+    flexDirection: "row",
+    gap: 8,
+    height: 52,
+    marginHorizontal: 20,
+    paddingHorizontal: 16,
+  },
+  input: {
+    color: "#2A2A2A",
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "400",
+  },
+});