feat(pagination): implement cursor-based pagination across the app

Add useCursorPagination hook and update multiple screens and services
to use cursor-based pagination for better performance and consistency.

- Add useCursorPagination hook with deduplication and caching support
- Add cursor pagination types to infrastructure layer
- Refactor HomeScreen, PostDetailScreen, SearchScreen for posts/comments
- Refactor GroupMembersScreen, JoinGroupScreen for groups/members
- Refactor MessageListScreen, NotificationsScreen for messages
- Update post, message, group, comment, notification services with cursor endpoints
- Add CursorPaginationRequest/Response DTOs
- Remove deprecated OPTIMIZATION_DESIGN.md documentation

src/screens/message/JoinGroupScreen.tsx

@@ -1,5 +1,15 @@
-import React, { useState } from 'react';
-import { View, StyleSheet, TextInput, TouchableOpacity, Alert, ActivityIndicator, Clipboard } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  Alert,
+  ActivityIndicator,
+  Clipboard,
+  FlatList,
+  RefreshControl,
+} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -11,6 +21,8 @@ import { groupService } from '../../services/groupService';
 import { groupManager } from '../../stores/groupManager';
 import { RootStackParamList } from '../../navigation/types';
 import { GroupResponse, JoinType } from '../../types/dto';
+import { useCursorPagination } from '../../hooks/useCursorPagination';
+import { EmptyState } from '../../components/common';
 
 type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
 
@@ -18,10 +30,29 @@ const JoinGroupScreen: React.FC = () => {
   const navigation = useNavigation<NavigationProp>();
   const [keyword, setKeyword] = useState('');
   const [searching, setSearching] = useState(false);
-  const [joining, setJoining] = useState(false);
-  const [group, setGroup] = useState<GroupResponse | null>(null);
+  const [joiningGroupId, setJoiningGroupId] = useState<string | null>(null);
+  const [searchedGroup, setSearchedGroup] = useState<GroupResponse | null>(null);
   const [searched, setSearched] = useState(false);
 
+  // 使用游标分页 Hook 管理群组列表
+  const {
+    items: groups,
+    isLoading,
+    isRefreshing,
+    hasMore,
+    loadMore,
+    refresh,
+    error,
+  } = useCursorPagination(
+    async ({ cursor, pageSize }) => {
+      return await groupService.getGroupsCursor({
+        cursor,
+        page_size: pageSize,
+      });
+    },
+    { pageSize: 20 }
+  );
+
   const getJoinTypeText = (joinType: JoinType) => {
     if (joinType === 0) return '允许加入';
     if (joinType === 1) return '需要审批';
@@ -39,9 +70,9 @@ const JoinGroupScreen: React.FC = () => {
     setSearched(true);
     try {
       const result = await groupManager.getGroup(trimmed, true);
-      setGroup(result);
+      setSearchedGroup(result);
     } catch (error: any) {
-      setGroup(null);
+      setSearchedGroup(null);
       const message = error?.response?.data?.message || error?.message || '';
       if (String(message).includes('不存在') || error?.response?.status === 404) {
         Alert.alert('未找到', '未搜索到该群聊，请确认群ID是否正确');
@@ -53,9 +84,9 @@ const JoinGroupScreen: React.FC = () => {
     }
   };
 
-  const handleJoin = async () => {
+  const handleJoin = async (group: GroupResponse) => {
     if (!group?.id) return;
-    setJoining(true);
+    setJoiningGroupId(String(group.id));
     try {
       await groupService.joinGroup(group.id);
       Alert.alert('成功', '操作已提交', [
@@ -71,13 +102,12 @@ const JoinGroupScreen: React.FC = () => {
         '操作失败，请稍后重试';
       Alert.alert('操作失败', String(message));
     } finally {
-      setJoining(false);
+      setJoiningGroupId(null);
     }
   };
 
-  const handleCopyGroupId = () => {
-    if (!group?.id) return;
-    Clipboard.setString(String(group.id));
+  const handleCopyGroupId = (groupId: string | number) => {
+    Clipboard.setString(String(groupId));
     Alert.alert('已复制', '群号已复制到剪贴板');
   };
 
@@ -87,6 +117,99 @@ const JoinGroupScreen: React.FC = () => {
     return `${raw.slice(0, 6)}...${raw.slice(-4)}`;
   };
 
+  const renderGroupItem = ({ item: group }: { item: GroupResponse }) => {
+    const isJoining = joiningGroupId === String(group.id);
+
+    return (
+      <View style={styles.groupCard}>
+        <View style={styles.groupHeader}>
+          <Avatar source={group.avatar} size={52} name={group.name} />
+          <View style={styles.groupMeta}>
+            <Text variant="body" style={styles.groupName} numberOfLines={1}>
+              {group.name}
+            </Text>
+          </View>
+        </View>
+        {!!group.description && (
+          <Text variant="caption" color={colors.text.secondary} style={styles.groupDesc}>
+            {group.description}
+          </Text>
+        )}
+        <View style={styles.groupInfoRow}>
+          <Text variant="caption" color={colors.text.secondary}>
+            成员 {group.member_count}/{group.max_members}
+          </Text>
+          <Text variant="caption" color={colors.text.secondary}>
+            {getJoinTypeText(group.join_type)}
+          </Text>
+        </View>
+        <View style={styles.groupNoRow}>
+          <Text variant="caption" color={colors.text.secondary}>
+            群号：{formatGroupNo(group.id)}
+          </Text>
+          <TouchableOpacity style={styles.copyBtn} onPress={() => handleCopyGroupId(group.id)}>
+            <MaterialCommunityIcons name="content-copy" size={14} color={colors.primary.main} />
+            <Text variant="caption" color={colors.primary.main} style={styles.copyBtnText}>
+              复制
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          style={[styles.submitBtn, isJoining && styles.submitBtnDisabled]}
+          onPress={() => handleJoin(group)}
+          disabled={isJoining}
+        >
+          {isJoining ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <>
+              <MaterialCommunityIcons name="send-outline" size={18} color="#fff" />
+              <Text variant="body" color="#fff" style={styles.submitText}>
+                申请入群
+              </Text>
+            </>
+          )}
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  const renderEmptyList = () => {
+    if (isLoading) return null;
+    return (
+      <EmptyState
+        title="暂无群组"
+        description="还没有可加入的群组"
+        icon="account-group-outline"
+      />
+    );
+  };
+
+  const renderSearchResult = () => {
+    if (!searched) return null;
+
+    if (searchedGroup) {
+      return (
+        <View style={styles.searchResultSection}>
+          <Text variant="caption" color={colors.text.secondary} style={styles.sectionTitle}>
+            搜索结果
+          </Text>
+          {renderGroupItem({ item: searchedGroup })}
+        </View>
+      );
+    }
+
+    if (!searching) {
+      return (
+        <Text variant="caption" color={colors.text.secondary} style={styles.emptyText}>
+          暂无搜索结果，请检查群ID后重试
+        </Text>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <View style={styles.container}>
       <View style={styles.heroCard}>
@@ -100,23 +223,25 @@ const JoinGroupScreen: React.FC = () => {
       </View>
 
       <View style={styles.formCard}>
-        <Text variant="caption" color={colors.text.secondary} style={styles.label}>搜索群聊（群ID）</Text>
+        <Text variant="caption" color={colors.text.secondary} style={styles.label}>
+          搜索群聊（群ID）
+        </Text>
         <View style={styles.searchRow}>
           <TextInput
             value={keyword}
             onChangeText={setKeyword}
-          placeholder="例如：7391234567890"
-          placeholderTextColor={colors.text.hint}
+            placeholder="例如：7391234567890"
+            placeholderTextColor={colors.text.hint}
             style={styles.input}
-            editable={!searching && !joining}
-          autoCapitalize="none"
-          cursorColor={colors.primary.main}
-          selectionColor={`${colors.primary.main}40`}
+            editable={!searching && !joiningGroupId}
+            autoCapitalize="none"
+            cursorColor={colors.primary.main}
+            selectionColor={`${colors.primary.main}40`}
           />
           <TouchableOpacity
-            style={[styles.searchBtn, (!keyword.trim() || searching || joining) && styles.submitBtnDisabled]}
+            style={[styles.searchBtn, (!keyword.trim() || searching || !!joiningGroupId) && styles.submitBtnDisabled]}
             onPress={handleSearch}
-            disabled={!keyword.trim() || searching || joining}
+            disabled={!keyword.trim() || searching || !!joiningGroupId}
           >
             {searching ? (
               <ActivityIndicator color="#fff" />
@@ -126,58 +251,49 @@ const JoinGroupScreen: React.FC = () => {
           </TouchableOpacity>
         </View>
 
-        {group && (
-          <View style={styles.groupCard}>
-            <View style={styles.groupHeader}>
-              <Avatar source={group.avatar} size={52} name={group.name} />
-              <View style={styles.groupMeta}>
-                <Text variant="body" style={styles.groupName} numberOfLines={1}>{group.name}</Text>
-              </View>
-            </View>
-            {!!group.description && (
-              <Text variant="caption" color={colors.text.secondary} style={styles.groupDesc}>
-                {group.description}
-              </Text>
-            )}
-            <View style={styles.groupInfoRow}>
-              <Text variant="caption" color={colors.text.secondary}>
-                成员 {group.member_count}/{group.max_members}
-              </Text>
-              <Text variant="caption" color={colors.text.secondary}>
-                {getJoinTypeText(group.join_type)}
-              </Text>
-            </View>
-            <View style={styles.groupNoRow}>
-              <Text variant="caption" color={colors.text.secondary}>
-                群号：{formatGroupNo(group.id)}
-              </Text>
-              <TouchableOpacity style={styles.copyBtn} onPress={handleCopyGroupId}>
-                <MaterialCommunityIcons name="content-copy" size={14} color={colors.primary.main} />
-                <Text variant="caption" color={colors.primary.main} style={styles.copyBtnText}>复制</Text>
-              </TouchableOpacity>
-            </View>
-            <TouchableOpacity
-              style={[styles.submitBtn, joining && styles.submitBtnDisabled]}
-              onPress={handleJoin}
-              disabled={joining}
-            >
-              {joining ? (
-                <ActivityIndicator color="#fff" />
-              ) : (
-                <>
-                  <MaterialCommunityIcons name="send-outline" size={18} color="#fff" />
-                  <Text variant="body" color="#fff" style={styles.submitText}>申请入群</Text>
-                </>
-              )}
-            </TouchableOpacity>
-          </View>
-        )}
+        {/* 搜索结果 */}
+        {renderSearchResult()}
 
-        {searched && !group && !searching && (
-          <Text variant="caption" color={colors.text.secondary} style={styles.emptyText}>
-            暂无搜索结果，请检查群ID后重试
+        {/* 群组列表 */}
+        <View style={styles.listSection}>
+          <Text variant="caption" color={colors.text.secondary} style={styles.sectionTitle}>
+            推荐群组
           </Text>
-        )}
+          <FlatList
+            data={groups}
+            renderItem={renderGroupItem}
+            keyExtractor={(item) => String(item.id)}
+            refreshControl={
+              <RefreshControl
+                refreshing={isRefreshing}
+                onRefresh={refresh}
+                colors={[colors.primary.main]}
+                tintColor={colors.primary.main}
+              />
+            }
+            onEndReached={loadMore}
+            onEndReachedThreshold={0.3}
+            ListEmptyComponent={renderEmptyList}
+            ListFooterComponent={
+              isLoading ? (
+                <View style={styles.loadingFooter}>
+                  <ActivityIndicator color={colors.primary.main} />
+                </View>
+              ) : hasMore ? (
+                <TouchableOpacity style={styles.loadMoreBtn} onPress={loadMore}>
+                  <Text variant="caption" color={colors.primary.main}>
+                    加载更多
+                  </Text>
+                </TouchableOpacity>
+              ) : groups.length > 0 ? (
+                <Text variant="caption" color={colors.text.hint} style={styles.noMoreText}>
+                  没有更多群组了
+                </Text>
+              ) : null
+            }
+            showsVerticalScrollIndicator={false}
+          />
+        </View>
       </View>
     </View>
   );
@@ -214,6 +330,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.background.paper,
     borderRadius: borderRadius.lg,
     padding: spacing.lg,
+    flex: 1,
   },
   label: {
     marginBottom: spacing.xs,
@@ -242,12 +359,23 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginLeft: spacing.sm,
   },
+  searchResultSection: {
+    marginBottom: spacing.lg,
+  },
+  sectionTitle: {
+    marginBottom: spacing.sm,
+    fontWeight: '600',
+  },
+  listSection: {
+    flex: 1,
+  },
   groupCard: {
     borderWidth: 1,
     borderColor: colors.divider,
     borderRadius: borderRadius.md,
     padding: spacing.md,
     backgroundColor: colors.background.default,
+    marginBottom: spacing.md,
   },
   groupHeader: {
     flexDirection: 'row',
@@ -259,6 +387,7 @@ const styles = StyleSheet.create({
   },
   groupName: {
     marginBottom: spacing.xs,
+    fontWeight: '600',
   },
   groupDesc: {
     marginTop: spacing.sm,
@@ -303,6 +432,19 @@ const styles = StyleSheet.create({
   },
   emptyText: {
     marginTop: spacing.sm,
+    textAlign: 'center',
+  },
+  loadingFooter: {
+    paddingVertical: spacing.md,
+    alignItems: 'center',
+  },
+  loadMoreBtn: {
+    paddingVertical: spacing.md,
+    alignItems: 'center',
+  },
+  noMoreText: {
+    textAlign: 'center',
+    paddingVertical: spacing.md,
   },
 });