feat: 实现评论分页功能并迁移到 TypeScript

- 创建通用分页 Hook (usePagination.ts) 支持任意数据类型 - 将 EventCommentSection 迁移到 TypeScript (.tsx) - 添加"加载更多"按钮，支持增量加载评论 - 创建分页和评论相关类型定义 (pagination.ts, comment.ts) - 增加 Mock 评论数据从 5 条到 15 条，便于测试分页 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 17:27:12 +08:00
parent 9761ef9016
commit 9fd618c087
6 changed files with 397 additions and 66 deletions
--- a/src/components/EventCommentSection/EventCommentSection.tsx
+++ b/src/components/EventCommentSection/EventCommentSection.tsx
@@ -1,78 +1,121 @@
-// src/components/EventCommentSection/EventCommentSection.js
+// src/components/EventCommentSection/EventCommentSection.tsx
 /**
- * 事件评论区主组件
+ * 事件评论区主组件（TypeScript 版本）
 * 功能：整合评论列表 + 评论输入框，管理评论数据
+ * 使用 usePagination Hook 实现分页功能
 */

-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import {
  Box,
-  VStack,
  Heading,
  Badge,
  HStack,
  Divider,
  useColorModeValue,
  useToast,
+  Button,
+  Center,
 } from '@chakra-ui/react';
 import { useAuth } from '../../contexts/AuthContext';
 import { eventService } from '../../services/eventService';
 import { logger } from '../../utils/logger';
+import { usePagination } from '../../hooks/usePagination';
+import type { Comment, CreateCommentParams } from '@/types';
+import type { PaginationLoadResult } from '@/types';
 import CommentList from './CommentList';
 import CommentInput from './CommentInput';

 /**
- * 事件评论区组件
- * @param {Object} props
- * @param {number} props.eventId - 事件 ID
+ * 组件 Props
 */
-const EventCommentSection = ({ eventId }) => {
+interface EventCommentSectionProps {
+  /** 事件 ID */
+  eventId: string | number;
+}
+
+/**
+ * 事件评论区组件
+ */
+const EventCommentSection: React.FC<EventCommentSectionProps> = ({ eventId }) => {
  const { user } = useAuth();
  const toast = useToast();
  const dividerColor = useColorModeValue('gray.200', 'gray.600');
  const headingColor = useColorModeValue('gray.700', 'gray.200');
  const sectionBg = useColorModeValue('gray.50', 'gray.750');

-  // 状态管理
-  const [comments, setComments] = useState([]);
-  const [loading, setLoading] = useState(false);
+  // 评论输入状态
  const [commentText, setCommentText] = useState('');
  const [submitting, setSubmitting] = useState(false);
-  const [totalCount, setTotalCount] = useState(0); // 总评论数（从后端获取）

-  // 加载评论列表
-  const loadComments = useCallback(async () => {
-    if (!eventId) return;
-
-    setLoading(true);
-    try {
-      // 加载第1页，每页5条评论
-      const result = await eventService.getPosts(eventId, 'latest', 1, 5);
-      if (result.success) {
-        setComments(result.data || []);
-        // 保存总评论数（从 pagination.total 读取）
-        setTotalCount(result.pagination?.total || result.data?.length || 0);
-        logger.info('EventCommentSection', '评论加载成功', {
+  /**
+   * 加载评论数据的函数
+   * @param page 页码
+   * @param append 是否追加到已有数据
+   * @returns 分页响应数据
+   */
+  const loadCommentsFunction = useCallback(
+    async (page: number, append: boolean): Promise<PaginationLoadResult<Comment>> => {
+      try {
+        const result = await eventService.getPosts(
          eventId,
-          count: result.data?.length || 0,
-          total: result.pagination?.total || 0,
-        });
-      }
-    } catch (error) {
-      logger.error('EventCommentSection', 'loadComments', error, { eventId });
-      toast({
-        title: '加载评论失败',
-        description: error.message || '请稍后重试',
-        status: 'error',
-        duration: 3000,
-        isClosable: true,
-      });
-    } finally {
-      setLoading(false);
-    }
-  }, [eventId, toast]);
+          'latest',
+          page,
+          5 // 每页 5 条评论
+        );

-  // 发表评论
+        if (result.success) {
+          logger.info('EventCommentSection', '评论加载成功', {
+            eventId,
+            page,
+            count: result.data?.length || 0,
+            total: result.pagination?.total || 0,
+            append,
+          });
+
+          return {
+            data: result.data || [],
+            pagination: result.pagination,
+          };
+        } else {
+          throw new Error(result.message || '加载评论失败');
+        }
+      } catch (error: any) {
+        logger.error('EventCommentSection', 'loadCommentsFunction', error, {
+          eventId,
+          page,
+        });
+        toast({
+          title: '加载评论失败',
+          description: error.message || '请稍后重试',
+          status: 'error',
+          duration: 3000,
+          isClosable: true,
+        });
+        throw error;
+      }
+    },
+    [eventId, toast]
+  );
+
+  // 使用 usePagination Hook
+  const {
+    data: comments,
+    loading,
+    loadingMore,
+    hasMore,
+    totalCount,
+    loadMore,
+    setData: setComments,
+    setTotalCount,
+  } = usePagination<Comment>(loadCommentsFunction, {
+    pageSize: 5,
+    autoLoad: true,
+  });
+
+  /**
+   * 发表评论
+   */
  const handleSubmitComment = useCallback(async () => {
    if (!commentText.trim()) {
      toast({
@@ -86,14 +129,16 @@ const EventCommentSection = ({ eventId }) => {

    setSubmitting(true);
    try {
-      const result = await eventService.createPost(eventId, {
+      const params: CreateCommentParams = {
        content: commentText.trim(),
        content_type: 'text',
-      });
+      };
+
+      const result = await eventService.createPost(eventId, params);

      if (result.success) {
        // 乐观更新：立即将新评论添加到本地 state，避免重新加载导致的闪烁
-        const newComment = {
+        const newComment: Comment = {
          id: result.data?.id || `comment_optimistic_${Date.now()}`,
          content: commentText.trim(),
          content_type: 'text',
@@ -108,9 +153,9 @@ const EventCommentSection = ({ eventId }) => {
        };

        // 将新评论追加到列表末尾（最新评论在底部）
-        setComments([...comments, newComment]);
+        setComments((prevComments) => [...prevComments, newComment]);
        // 总评论数 +1
-        setTotalCount(totalCount + 1);
+        setTotalCount((prevTotal) => prevTotal + 1);

        toast({
          title: '评论发布成功',
@@ -119,7 +164,6 @@ const EventCommentSection = ({ eventId }) => {
          isClosable: true,
        });
        setCommentText(''); // 清空输入框
-        // ✅ 不再调用 loadComments()，避免 loading 状态导致高度闪烁

        logger.info('EventCommentSection', '评论发布成功（乐观更新）', {
          eventId,
@@ -129,7 +173,7 @@ const EventCommentSection = ({ eventId }) => {
      } else {
        throw new Error(result.message || '评论发布失败');
      }
-    } catch (error) {
+    } catch (error: any) {
      logger.error('EventCommentSection', 'handleSubmitComment', error, { eventId });
      toast({
        title: '评论发布失败',
@@ -141,23 +185,12 @@ const EventCommentSection = ({ eventId }) => {
    } finally {
      setSubmitting(false);
    }
-  }, [eventId, commentText, toast, comments, user, totalCount]);
-
-  // 初始加载评论
-  useEffect(() => {
-    loadComments();
-  }, [loadComments]);
+  }, [eventId, commentText, toast, user, setComments, setTotalCount]);

  return (
    <Box>
      {/* 标题栏 */}
-      <HStack
-        spacing={3}
-        mb={4}
-        p={3}
-        bg={sectionBg}
-        borderRadius="md"
-      >
+      <HStack spacing={3} mb={4} p={3} bg={sectionBg} borderRadius="md">
        <Heading size="sm" color={headingColor}>
          讨论区
        </Heading>
@@ -173,13 +206,31 @@ const EventCommentSection = ({ eventId }) => {
        <CommentList comments={comments} loading={loading} />
      </Box>

+      {/* 加载更多按钮（仅当有更多评论时显示） */}
+      {hasMore && (
+        <Center mb={4}>
+          <Button
+            variant="outline"
+            colorScheme="blue"
+            size="sm"
+            onClick={loadMore}
+            isLoading={loadingMore}
+            loadingText="加载中..."
+          >
+            加载更多评论
+          </Button>
+        </Center>
+      )}
+
      {/* 评论输入框（仅登录用户显示） */}
      {user && (
        <Box>
          <Divider borderColor={dividerColor} mb={4} />
          <CommentInput
            value={commentText}
-            onChange={(e) => setCommentText(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setCommentText(e.target.value)
+            }
            onSubmit={handleSubmitComment}
            isSubmitting={submitting}
            maxLength={500}
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -0,0 +1,137 @@
+/**
+ * usePagination - 通用分页 Hook
+ *
+ * 封装分页逻辑，支持初始加载、加载更多、重置等功能
+ *
+ * @example
+ * const {
+ *   data: comments,
+ *   loading,
+ *   loadingMore,
+ *   hasMore,
+ *   totalCount,
+ *   loadMore,
+ *   setData,
+ *   setTotalCount,
+ * } = usePagination<Comment>(loadCommentsFunction, { pageSize: 5 });
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import type {
+  LoadFunction,
+  PaginationLoadResult,
+  UsePaginationOptions,
+  UsePaginationResult,
+} from '@/types/pagination';
+
+/**
+ * usePagination Hook
+ * @template T 数据项类型
+ * @param loadFunction 加载函数，接收 (page, append) 参数
+ * @param options 配置选项
+ * @returns 分页状态和操作方法
+ */
+export function usePagination<T>(
+  loadFunction: LoadFunction<T>,
+  options: UsePaginationOptions = {}
+): UsePaginationResult<T> {
+  const { pageSize = 10, autoLoad = true } = options;
+
+  // 状态管理
+  const [data, setData] = useState<T[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+
+  /**
+   * 加载数据
+   * @param page 页码
+   * @param append 是否追加（true: 追加，false: 替换）
+   */
+  const loadData = useCallback(
+    async (page: number, append: boolean = false) => {
+      // 设置加载状态
+      if (append) {
+        setLoadingMore(true);
+      } else {
+        setLoading(true);
+      }
+
+      try {
+        const result: PaginationLoadResult<T> = await loadFunction(page, append);
+
+        // 更新数据
+        if (append) {
+          setData((prevData) => [...prevData, ...(result.data || [])]);
+        } else {
+          setData(result.data || []);
+        }
+
+        // 更新分页信息
+        const total = result.pagination?.total || result.data?.length || 0;
+        setTotalCount(total);
+
+        // 计算是否还有更多数据
+        const currentTotal = append
+          ? data.length + (result.data?.length || 0)
+          : result.data?.length || 0;
+        setHasMore(currentTotal < total);
+      } catch (error) {
+        console.error('[usePagination] 加载数据失败:', error);
+        throw error;
+      } finally {
+        if (append) {
+          setLoadingMore(false);
+        } else {
+          setLoading(false);
+        }
+      }
+    },
+    [loadFunction, data.length]
+  );
+
+  /**
+   * 加载更多数据
+   */
+  const loadMore = useCallback(async () => {
+    if (loadingMore || !hasMore) return;
+
+    const nextPage = currentPage + 1;
+    await loadData(nextPage, true);
+    setCurrentPage(nextPage);
+  }, [currentPage, loadData, loadingMore, hasMore]);
+
+  /**
+   * 重置到第一页
+   */
+  const reset = useCallback(() => {
+    setCurrentPage(1);
+    setData([]);
+    setTotalCount(0);
+    setHasMore(false);
+    loadData(1, false);
+  }, [loadData]);
+
+  // 自动加载第一页
+  useEffect(() => {
+    if (autoLoad) {
+      loadData(1, false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoLoad]);
+
+  return {
+    data,
+    loading,
+    loadingMore,
+    currentPage,
+    hasMore,
+    totalCount,
+    loadMore,
+    reset,
+    setData,
+    setTotalCount,
+  };
+}
--- a/src/mocks/handlers/event.js
+++ b/src/mocks/handlers/event.js
@@ -16,7 +16,7 @@ const commentsStore = new Map();
 /**
 * 初始化某个事件的 mock 评论列表
 * @param {string} eventId - 事件 ID
- * @returns {Array} 初始的 8 条 mock 评论
+ * @returns {Array} 初始的 15 条 mock 评论
 */
 const initializeMockComments = (eventId) => {
    const comments = [];
@@ -29,6 +29,13 @@ const initializeMockComments = (eventId) => {
        { username: '价值投资者', avatar: null },
        { username: '技术分析师', avatar: null },
        { username: '基本面研究员', avatar: null },
+        { username: '量化交易员', avatar: null },
+        { username: '市场观察者', avatar: null },
+        { username: '行业分析师', avatar: null },
+        { username: '财经评论员', avatar: null },
+        { username: '趋势跟踪者', avatar: null },
+        { username: '价值发现者', avatar: null },
+        { username: '理性投资人', avatar: null },
    ];

    const commentTemplates = [
@@ -40,9 +47,16 @@ const initializeMockComments = (eventId) => {
        '相关产业链的龙头企业值得重点关注',
        '这类事件一般都是短期刺激，长期影响有限',
        '建议大家理性对待，不要盲目追高',
+        '这个消息已经在预期之中，股价可能提前反应了',
+        '关键要看后续的执行力度和落地速度',
+        '建议关注产业链上下游的投资机会',
+        '短期可能会有波动，但长期逻辑依然成立',
+        '市场情绪很高涨，需要警惕追高风险',
+        '从历史数据来看，类似事件后续表现都不错',
+        '这是一个结构性机会，需要精选个股',
    ];

-    for (let i = 0; i < 5; i++) {
+    for (let i = 0; i < 15; i++) {
        const hoursAgo = Math.floor(Math.random() * 48) + 1; // 1-48 小时前
        const createdAt = new Date(Date.now() - hoursAgo * 60 * 60 * 1000);
        const user = users[i % users.length];
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -0,0 +1,42 @@
+/**
+ * 评论相关类型定义
+ */
+
+/**
+ * 评论作者信息
+ */
+export interface CommentAuthor {
+  id: string;
+  username: string;
+  avatar?: string | null;
+}
+
+/**
+ * 评论数据结构
+ */
+export interface Comment {
+  /** 评论 ID */
+  id: string;
+  /** 评论内容 */
+  content: string;
+  /** 内容类型 */
+  content_type: 'text' | 'image' | 'video';
+  /** 作者信息 */
+  author: CommentAuthor;
+  /** 创建时间（ISO 8601 格式） */
+  created_at: string;
+  /** 点赞数 */
+  likes_count: number;
+  /** 当前用户是否已点赞 */
+  is_liked: boolean;
+}
+
+/**
+ * 创建评论请求参数
+ */
+export interface CreateCommentParams {
+  /** 评论内容 */
+  content: string;
+  /** 内容类型 */
+  content_type?: 'text' | 'image' | 'video';
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -38,3 +38,18 @@ export type {
  UserAccount,
  UserSettings,
 } from './user';
+
+// 分页相关类型
+export type {
+  LoadFunction,
+  PaginationLoadResult,
+  UsePaginationOptions,
+  UsePaginationResult,
+} from './pagination';
+
+// 评论相关类型
+export type {
+  Comment,
+  CommentAuthor,
+  CreateCommentParams,
+} from './comment';
--- a/src/types/pagination.ts
+++ b/src/types/pagination.ts
@@ -0,0 +1,72 @@
+/**
+ * 分页相关类型定义
+ *
+ * 用于 usePagination Hook 和其他分页功能
+ */
+
+/**
+ * 分页加载函数类型
+ * @template T 数据项类型
+ * @param page 页码（从 1 开始）
+ * @param append 是否追加到已有数据（true: 追加，false: 替换）
+ * @returns Promise，解析为分页响应数据
+ */
+export type LoadFunction<T> = (
+  page: number,
+  append: boolean
+) => Promise<PaginationLoadResult<T>>;
+
+/**
+ * 分页加载结果
+ * @template T 数据项类型
+ */
+export interface PaginationLoadResult<T> {
+  /** 数据列表 */
+  data: T[];
+  /** 分页信息 */
+  pagination?: {
+    /** 总数据量 */
+    total?: number;
+    /** 当前页码 */
+    page?: number;
+    /** 每页数量 */
+    per_page?: number;
+  };
+}
+
+/**
+ * usePagination Hook 配置选项
+ */
+export interface UsePaginationOptions {
+  /** 每页数据量，默认 10 */
+  pageSize?: number;
+  /** 是否自动加载第一页，默认 true */
+  autoLoad?: boolean;
+}
+
+/**
+ * usePagination Hook 返回值
+ * @template T 数据项类型
+ */
+export interface UsePaginationResult<T> {
+  /** 当前数据列表 */
+  data: T[];
+  /** 是否正在加载第一页 */
+  loading: boolean;
+  /** 是否正在加载更多 */
+  loadingMore: boolean;
+  /** 当前页码 */
+  currentPage: number;
+  /** 是否还有更多数据 */
+  hasMore: boolean;
+  /** 总数据量 */
+  totalCount: number;
+  /** 加载更多数据 */
+  loadMore: () => Promise<void>;
+  /** 重置到第一页 */
+  reset: () => void;
+  /** 手动设置数据（用于乐观更新） */
+  setData: React.Dispatch<React.SetStateAction<T[]>>;
+  /** 手动设置总数（用于乐观更新） */
+  setTotalCount: React.Dispatch<React.SetStateAction<number>>;
+}