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>

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';
+}

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';

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>>;
+}