vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature_bugfix/251113_ui' of https://git.valuefrontier.cn/vf/vf_react into feature_bugfix/251113_ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-15 09:11:57 +08:00
parent 05b497de29 d9013d1e85
commit 2013a0f868
28 changed files with 2001 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/Community/components/DynamicNewsCard.js
View File

@@ -1,7 +1,7 @@
// src/views/Community/components/DynamicNewsCard.js
// 横向滚动事件卡片组件（实时要闻·动态追踪）
import React, { forwardRef, useState, useEffect, useMemo, useCallback, useRef } from 'react';
import React, { forwardRef, useState, useEffect, useMemo, useCallback, useRef, useImperativeHandle } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
Card,
@@ -44,8 +44,9 @@ import {
selectFourRowEventsWithLoading
} from '../../../store/slices/communityDataSlice';
import { usePagination } from './DynamicNewsCard/hooks/usePagination';
import { PAGINATION_CONFIG, DISPLAY_MODES } from './DynamicNewsCard/constants';
import { PAGINATION_CONFIG, DISPLAY_MODES, REFRESH_DEBOUNCE_DELAY } from './DynamicNewsCard/constants';
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
import { debounce } from '../../../utils/debounce';
// 🔍 调试：渲染计数器
let dynamicNewsCardRenderCount = 0;
@@ -84,6 +85,7 @@ const DynamicNewsCard = forwardRef(({
// Refs
const cardHeaderRef = useRef(null);
const cardBodyRef = useRef(null);
const virtualizedGridRef = useRef(null); // ⚡ VirtualizedFourRowGrid 的 ref（用于获取滚动位置）
// 从 Redux 读取关注状态
const eventFollowStatus = useSelector(selectEventFollowStatus);
@@ -208,6 +210,124 @@ const [currentMode, setCurrentMode] = useState('vertical');
setCurrentMode(mode);
}, [mode]);
/**
* ⚡【核心逻辑】执行刷新的回调函数（包含原有的智能刷新逻辑）
*
* 此函数会被 debounce 包装，避免短时间内频繁刷新
*/
const executeRefresh = useCallback(() => {
const state = {
mode,
currentPage: pagination?.current_page || 1,
};
console.log('[DynamicNewsCard] ⏰ executeRefresh() 执行（防抖延迟后）', state);
if (mode === 'vertical') {
// ========== 纵向模式 ==========
// 只在第1页时刷新，避免打断用户浏览其他页
if (state.currentPage === 1) {
console.log('[DynamicNewsCard] 纵向模式 + 第1页 → 刷新列表');
handlePageChange(1); // 清空缓存并刷新第1页
toast({
title: '检测到新事件',
status: 'info',
duration: 2000,
isClosable: true,
});
} else {
console.log(`[DynamicNewsCard] 纵向模式 + 第${state.currentPage}页 → 不刷新（避免打断用户）`);
}
} else if (mode === 'four-row') {
// ========== 平铺模式 ==========
// 检查滚动位置，只有在顶部时才刷新
const scrollPos = virtualizedGridRef.current?.getScrollPosition();
if (scrollPos?.isNearTop) {
// 用户在顶部 10% 区域，安全刷新
console.log('[DynamicNewsCard] 平铺模式 + 滚动在顶部 → 刷新列表');
handlePageChange(1); // 清空并刷新
toast({
title: '检测到新事件，已刷新',
status: 'info',
duration: 2000,
isClosable: true,
});
} else {
// 用户不在顶部，显示提示但不自动刷新
console.log('[DynamicNewsCard] 平铺模式 + 滚动不在顶部 → 仅提示，不刷新');
toast({
title: '有新事件发布',
description: '滚动到顶部查看',
status: 'info',
duration: 3000,
isClosable: true,
});
}
}
}, [mode, pagination, handlePageChange, toast]);
/**
* ⚡【防抖包装】创建防抖版本的刷新函数
*
* 使用 useMemo 确保防抖函数在 executeRefresh 不变时保持引用稳定
* 防抖延迟：REFRESH_DEBOUNCE_DELAY (2000ms)
*
* 效果：短时间内收到多个新事件，只执行最后一次刷新
*/
const debouncedRefresh = useMemo(
() => debounce(executeRefresh, REFRESH_DEBOUNCE_DELAY),
[executeRefresh]
);
/**
* ⚡ 暴露方法给父组件（用于 Socket 自动刷新）
*/
useImperativeHandle(ref, () => ({
/**
* 智能刷新方法（带防抖，避免频繁刷新）
*
* 调用此方法时：
* 1. 清除之前的定时器（如果有）
* 2. 设置新的定时器（延迟 REFRESH_DEBOUNCE_DELAY 后执行）
* 3. 如果在延迟期间再次调用，重复步骤 1-2
* 4. 只有最后一次调用会在延迟后实际执行 executeRefresh()
*/
refresh: () => {
console.log('[DynamicNewsCard] 🔔 refresh() 被调用（设置防抖定时器）', {
mode,
currentPage: pagination?.current_page || 1,
debounceDelay: `${REFRESH_DEBOUNCE_DELAY}ms`,
});
// 调用防抖包装后的函数
debouncedRefresh();
},
/**
* 获取当前状态（用于调试）
*/
getState: () => ({
mode,
currentPage: pagination?.current_page || 1,
totalPages: pagination?.total_pages || 1,
total: pagination?.total || 0,
loading,
}),
}), [mode, pagination, loading, debouncedRefresh]);
/**
* ⚡【清理逻辑】组件卸载时取消待执行的防抖函数
*
* 作用：避免组件卸载后仍然执行刷新操作（防止内存泄漏和潜在错误）
*/
useEffect(() => {
return () => {
console.log('[DynamicNewsCard] 🧹 组件卸载，取消待执行的防抖刷新');
debouncedRefresh.cancel();
};
}, [debouncedRefresh]);
// 监听 error 状态，显示空数据提示
useEffect(() => {
if (error && error.includes('暂无更多数据')) {
@@ -578,6 +698,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
eventFollowStatus={eventFollowStatus}
onToggleFollow={handleToggleFollow}
hasMore={hasMore}
virtualizedGridRef={virtualizedGridRef} // ⚡ 传递 ref 给 VirtualizedFourRowGrid
/>
</Box>
</CardBody>

5
src/views/Community/components/DynamicNewsCard/EventScrollList.js
View File

@@ -28,6 +28,7 @@ import VerticalModeLayout from './VerticalModeLayout';
* @param {boolean} hasMore - 是否还有更多数据
* @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
* @param {Function} onToggleFollow - 关注按钮回调
* @param {React.Ref} virtualizedGridRef - VirtualizedFourRowGrid 的 ref（用于获取滚动位置）
*/
const EventScrollList = ({
events,
@@ -46,7 +47,8 @@ const EventScrollList = ({
mode = 'vertical',
hasMore = true,
eventFollowStatus = {},
onToggleFollow
onToggleFollow,
virtualizedGridRef
}) => {
const scrollContainerRef = useRef(null);
@@ -111,6 +113,7 @@ const EventScrollList = ({
>
{/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
<VirtualizedFourRowGrid
ref={virtualizedGridRef} // ⚡ 传递 ref（用于获取滚动位置）
display={mode === 'four-row' ? 'block' : 'none'}
columnsPerRow={4} // 每行显示4列
events={displayEvents || events} // 使用累积列表（如果有）

35
src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
View File

@@ -1,7 +1,7 @@
// src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
// 虚拟化网格组件（支持多列布局 + 纵向滚动 + 无限滚动）
import React, { useRef, useMemo, useEffect } from 'react';
import React, { useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton, useBreakpointValue } from '@chakra-ui/react';
import { RepeatIcon } from '@chakra-ui/icons';
@@ -25,7 +25,7 @@ import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
* @param {boolean} props.hasMore - 是否还有更多数据
* @param {boolean} props.loading - 加载状态
*/
const VirtualizedFourRowGrid = ({
const VirtualizedFourRowGrid = forwardRef(({
display = 'block',
events,
columnsPerRow = 4,
@@ -42,7 +42,7 @@ const VirtualizedFourRowGrid = ({
loading,
error, // 新增：错误状态
onRetry, // 新增：重试回调
}) => {
}, ref) => {
const parentRef = useRef(null);
const isLoadingMore = useRef(false); // 防止重复加载
const lastRefreshTime = useRef(0); // 记录上次刷新时间（用于30秒防抖）
@@ -81,6 +81,31 @@ const VirtualizedFourRowGrid = ({
overscan: 2, // 预加载2行（上下各1行）
});
/**
* ⚡ 暴露方法给父组件（用于 Socket 刷新判断）
*/
useImperativeHandle(ref, () => ({
/**
* 获取当前滚动位置信息
* @returns {Object|null} 滚动位置信息
*/
getScrollPosition: () => {
const scrollElement = parentRef.current;
if (!scrollElement) return null;
const { scrollTop, scrollHeight, clientHeight } = scrollElement;
const isNearTop = scrollTop < clientHeight * 0.1; // 顶部 10% 区域
return {
scrollTop,
scrollHeight,
clientHeight,
isNearTop,
scrollPercentage: ((scrollTop + clientHeight) / scrollHeight) * 100,
};
},
}), []);
/**
* 【核心逻辑1】无限滚动 + 顶部刷新 - 监听滚动事件，根据滚动位置自动加载数据或刷新
*
@@ -360,6 +385,8 @@ const VirtualizedFourRowGrid = ({
</Box>
</Box>
);
};
});
VirtualizedFourRowGrid.displayName = 'VirtualizedFourRowGrid';
export default VirtualizedFourRowGrid;

18
src/views/Community/components/DynamicNewsCard/constants.js
View File

@@ -38,3 +38,21 @@ 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;

7
src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
View File

@@ -4,6 +4,7 @@
import React, { useState, useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
Box,
Card,
CardBody,
VStack,
@@ -32,6 +33,7 @@ import TransmissionChainAnalysis from '../../../EventDetail/components/Transmiss
import SubscriptionBadge from '../../../../components/SubscriptionBadge';
import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgradeModal';
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
import EventCommentSection from '../../../../components/EventCommentSection';
/**
* 动态新闻详情面板主组件
@@ -414,6 +416,11 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
eventService={eventService}
/>
</CollapsibleSection>
{/* 讨论区（评论区） - 所有登录用户可用 */}
<Box mt={4}>
<EventCommentSection eventId={event.id} />
</Box>
</VStack>
</CardBody>

4
src/views/Community/components/EventCard/KeywordsCarousel.js
View File

@@ -74,7 +74,9 @@ const KeywordsCarousel = ({
whiteSpace="nowrap"
textShadow="0 0 20px rgba(255, 195, 0, 0.3)"
>
{currentKeyword}
{typeof currentKeyword === 'string'
? currentKeyword
: currentKeyword?.concept || '未知标签'}
</Text>
</Box>
</Tooltip>

66
src/views/Community/index.js
View File

@@ -1,6 +1,6 @@
// src/views/Community/index.js
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import {
fetchPopularKeywords,
@@ -40,6 +40,7 @@ import { PROFESSIONAL_COLORS } from '../../constants/professionalTheme';
const Community = () => {
const navigate = useNavigate();
const location = useLocation(); // ⚡ 获取当前路由信息（用于判断是否在 /community 页面）
const dispatch = useDispatch();
// Redux状态
@@ -71,7 +72,10 @@ const Community = () => {
});
// ⚡ 通知权限引导
const { browserPermission, requestBrowserPermission } = useNotification();
const { browserPermission, requestBrowserPermission, registerEventUpdateCallback } = useNotification();
// ⚡ DynamicNewsCard 的 ref（用于触发刷新）
const dynamicNewsCardRef = useRef(null);
// 通知横幅显示状态
const [showNotificationBanner, setShowNotificationBanner] = useState(false);
@@ -160,6 +164,63 @@ const Community = () => {
return () => clearTimeout(timer);
}, []); // 空依赖数组，只在组件挂载时执行一次
/**
* ⚡ 【核心逻辑】注册 Socket 新事件回调 - 当收到新事件时智能刷新列表
*
* 工作流程：
* 1. Socket 收到 'new_event' 事件 → NotificationContext 触发所有注册的回调
* 2. 本回调被触发 → 检查当前路由是否为 /community
* 3. 如果在 /community 页面 → 调用 DynamicNewsCard.refresh() 方法
* 4. DynamicNewsCard 根据模式和滚动位置决定是否刷新：
* - 纵向模式 + 第1页 → 刷新列表
* - 纵向模式 + 其他页 → 不刷新（避免打断用户）
* - 平铺模式 + 滚动在顶部 → 刷新列表
* - 平铺模式 + 滚动不在顶部 → 仅显示 Toast 提示
*
* 设计要点：
* - 使用 registerEventUpdateCallback 注册回调，返回的函数用于清理
* - 路由检查：只在 /community 页面触发刷新
* - 智能刷新：由 DynamicNewsCard 根据上下文决定刷新策略
* - 自动清理：组件卸载时自动注销回调
*/
useEffect(() => {
// 定义回调函数
const handleNewEvent = (eventData) => {
console.log('[Community] 🔔 收到新事件通知', {
currentPath: location.pathname,
eventData,
});
// 检查是否在 /community 页面
if (location.pathname === '/community') {
console.log('[Community] ✅ 当前在事件中心页面，触发 DynamicNewsCard 刷新');
// 调用 DynamicNewsCard 的 refresh 方法（智能刷新）
if (dynamicNewsCardRef.current) {
dynamicNewsCardRef.current.refresh();
} else {
console.warn('[Community] ⚠️ DynamicNewsCard ref 不可用，无法触发刷新');
}
} else {
console.log('[Community] ⏭️ 当前不在事件中心页面，跳过刷新', {
currentPath: location.pathname,
});
}
};
// 注册回调（返回清理函数）
const unregister = registerEventUpdateCallback(handleNewEvent);
console.log('[Community] ✅ 已注册 Socket 事件更新回调');
// 组件卸载时清理
return () => {
if (unregister) {
unregister();
console.log('[Community] 🧹 已注销 Socket 事件更新回调');
}
};
}, [location.pathname, registerEventUpdateCallback]); // 依赖路由变化重新注册
return (
<Box minH="100vh" bg={bgColor}>
{/* 主内容区域 */}
@@ -206,6 +267,7 @@ const Community = () => {
{/* 实时要闻·动态追踪 - 横向滚动 */}
<DynamicNewsCard
ref={dynamicNewsCardRef} // ⚡ 传递 ref（用于触发刷新）
filters={filters}
popularKeywords={popularKeywords}
lastUpdateTime={lastUpdateTime}