ddd6b2d4af
核心改动： - 扩展 NotificationContext，添加事件更新回调注册机制 - VirtualizedFourRowGrid 添加 forwardRef 暴露 getScrollPosition 方法 - DynamicNewsCard 实现智能刷新逻辑（根据模式和滚动位置判断是否刷新） - Community 页面注册 Socket 回调自动触发刷新 - 创建 TypeScript 通用防抖工具函数（debounce.ts） - 集成防抖机制（2秒延迟），避免短时间内频繁请求 智能刷新策略： - 纵向模式 + 第1页：自动刷新列表 - 纵向模式 + 其他页：不刷新（避免打断用户） - 平铺模式 + 滚动在顶部：自动刷新列表 - 平铺模式 + 滚动不在顶部：仅显示 Toast 提示 防抖效果： - 短时间内收到多个新事件，只执行最后一次刷新 - 减少服务器压力，提升用户体验 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
59 lines
2.1 KiB
JavaScript
59 lines
2.1 KiB
JavaScript
// src/views/Community/components/DynamicNewsCard/constants.js
|
||
// 动态新闻卡片组件 - 常量配置
|
||
|
||
// ========== 分页配置常量 ==========
|
||
/**
|
||
* 分页大小计算依据：
|
||
*
|
||
* 【四排模式 (FOUR_ROW_PAGE_SIZE)】
|
||
* - 容器高度: 800px (VirtualizedFourRowGrid)
|
||
* - 单行高度: ~250px (包含卡片 + 间距)
|
||
* - 每行显示: 4 列
|
||
* - 可视区域: 800px / 250px ≈ 3.2 行
|
||
* - overscan 缓冲: 2 行 (上下各预渲染1行)
|
||
* - 实际渲染区域: 3.2 + 2 = 5.2 行
|
||
* - 单次加载数据量: 7.5 行 × 4 列 = 30 个
|
||
* - 设计目标: 提供充足的缓冲数据，确保快速滚动时不出现空白
|
||
*
|
||
* 【纵向模式 (VERTICAL_PAGE_SIZE)】
|
||
* - 每页显示 10 条数据
|
||
* - 使用传统分页器，用户手动翻页
|
||
*/
|
||
export const PAGINATION_CONFIG = {
|
||
FOUR_ROW_PAGE_SIZE: 30, // 平铺模式每页数量 (7.5行 × 4列，包含缓冲)
|
||
VERTICAL_PAGE_SIZE: 10, // 纵向模式每页数量 (传统分页)
|
||
INITIAL_PAGE: 1, // 初始页码
|
||
};
|
||
|
||
// ========== 显示模式常量 ==========
|
||
export const DISPLAY_MODES = {
|
||
FOUR_ROW: 'four-row', // 平铺网格模式
|
||
VERTICAL: 'vertical', // 纵向分栏模式
|
||
};
|
||
|
||
export const DEFAULT_MODE = DISPLAY_MODES.VERTICAL;
|
||
|
||
// ========== Toast 提示配置 ==========
|
||
export const TOAST_CONFIG = {
|
||
DURATION_ERROR: 3000, // 错误提示持续时间（毫秒）
|
||
DURATION_WARNING: 2000, // 警告提示持续时间（毫秒）
|
||
};
|
||
|
||
// ========== Socket 刷新防抖配置 ==========
|
||
/**
|
||
* Socket 新事件刷新防抖延迟（毫秒）
|
||
*
|
||
* 作用：避免短时间内收到多个新事件时频繁刷新列表
|
||
*
|
||
* 场景示例：
|
||
* - 第 1 秒：收到新事件 → 延迟 2 秒刷新
|
||
* - 第 2 秒：收到新事件 → 取消上次，重新延迟 2 秒
|
||
* - 第 3 秒：收到新事件 → 取消上次，重新延迟 2 秒
|
||
* - 第 5 秒：触发刷新 → 只发送 1 次 API 请求
|
||
*
|
||
* 推荐值：2000ms (2 秒)
|
||
* - 太短（如 500ms）→ 仍可能触发多次刷新
|
||
* - 太长（如 5000ms）→ 用户感知延迟过高
|
||
*/
|
||
export const REFRESH_DEBOUNCE_DELAY = 2000;
|