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>
This commit is contained in:
zdl
2025-11-14 17:27:12 +08:00
parent 9761ef9016
commit 9fd618c087
6 changed files with 397 additions and 66 deletions

View File

@@ -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];