feat: 访问 http://localhost:3000/admin/community:
1. 页面加载后应停留在顶部 2. 点击搜索框,页面应平滑滚动到"实时事件时间轴"区域 3. 再次点击搜索框不会重复滚动
This commit is contained in:
@@ -22,6 +22,7 @@ import EventListSection from './EventListSection';
|
|||||||
* @param {Array} popularKeywords - 热门关键词
|
* @param {Array} popularKeywords - 热门关键词
|
||||||
* @param {Date} lastUpdateTime - 最后更新时间
|
* @param {Date} lastUpdateTime - 最后更新时间
|
||||||
* @param {Function} onSearch - 搜索回调
|
* @param {Function} onSearch - 搜索回调
|
||||||
|
* @param {Function} onSearchFocus - 搜索框获得焦点回调
|
||||||
* @param {Function} onPageChange - 分页变化回调
|
* @param {Function} onPageChange - 分页变化回调
|
||||||
* @param {Function} onEventClick - 事件点击回调
|
* @param {Function} onEventClick - 事件点击回调
|
||||||
* @param {Function} onViewDetail - 查看详情回调
|
* @param {Function} onViewDetail - 查看详情回调
|
||||||
@@ -35,6 +36,7 @@ const EventTimelineCard = forwardRef(({
|
|||||||
popularKeywords,
|
popularKeywords,
|
||||||
lastUpdateTime,
|
lastUpdateTime,
|
||||||
onSearch,
|
onSearch,
|
||||||
|
onSearchFocus,
|
||||||
onPageChange,
|
onPageChange,
|
||||||
onEventClick,
|
onEventClick,
|
||||||
onViewDetail,
|
onViewDetail,
|
||||||
@@ -56,6 +58,7 @@ const EventTimelineCard = forwardRef(({
|
|||||||
<Box mb={4}>
|
<Box mb={4}>
|
||||||
<UnifiedSearchBox
|
<UnifiedSearchBox
|
||||||
onSearch={onSearch}
|
onSearch={onSearch}
|
||||||
|
onSearchFocus={onSearchFocus}
|
||||||
popularKeywords={popularKeywords}
|
popularKeywords={popularKeywords}
|
||||||
filters={filters}
|
filters={filters}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ const { Option } = AntSelect;
|
|||||||
|
|
||||||
const UnifiedSearchBox = ({
|
const UnifiedSearchBox = ({
|
||||||
onSearch,
|
onSearch,
|
||||||
|
onSearchFocus,
|
||||||
popularKeywords = [],
|
popularKeywords = [],
|
||||||
filters = {}
|
filters = {}
|
||||||
}) => {
|
}) => {
|
||||||
@@ -519,6 +520,7 @@ const UnifiedSearchBox = ({
|
|||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
onSearch={handleSearch}
|
onSearch={handleSearch}
|
||||||
onSelect={handleStockSelect}
|
onSelect={handleStockSelect}
|
||||||
|
onFocus={onSearchFocus}
|
||||||
options={stockOptions}
|
options={stockOptions}
|
||||||
placeholder="请输入股票代码/股票名称/相关话题"
|
placeholder="请输入股票代码/股票名称/相关话题"
|
||||||
onPressEnter={handleMainSearch}
|
onPressEnter={handleMainSearch}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
// src/views/Community/index.js
|
// src/views/Community/index.js
|
||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useSelector, useDispatch } from 'react-redux';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
import { fetchPopularKeywords, fetchHotEvents } from '../../store/slices/communityDataSlice';
|
import { fetchPopularKeywords, fetchHotEvents } from '../../store/slices/communityDataSlice';
|
||||||
@@ -71,25 +71,18 @@ const Community = () => {
|
|||||||
}
|
}
|
||||||
}, [showCommunityGuide]); // 只在组件挂载时执行一次
|
}, [showCommunityGuide]); // 只在组件挂载时执行一次
|
||||||
|
|
||||||
// ⚡ 页面渲染完成后1秒,自动滚动到实时事件时间轴
|
// ⚡ 滚动到实时事件区域(由搜索框聚焦触发)
|
||||||
useEffect(() => {
|
const scrollToTimeline = useCallback(() => {
|
||||||
// 只在第一次数据加载完成后滚动
|
if (!hasScrolledRef.current && eventTimelineRef.current) {
|
||||||
if (!loading && !hasScrolledRef.current && eventTimelineRef.current) {
|
eventTimelineRef.current.scrollIntoView({
|
||||||
const timer = setTimeout(() => {
|
behavior: 'smooth', // 平滑滚动动画
|
||||||
if (eventTimelineRef.current) {
|
block: 'start', // 元素顶部对齐视口顶部,标题正好可见
|
||||||
eventTimelineRef.current.scrollIntoView({
|
inline: 'nearest' // 水平方向最小滚动
|
||||||
behavior: 'smooth', // 平滑滚动动画
|
});
|
||||||
block: 'start', // 元素顶部对齐视口顶部,标题正好可见
|
hasScrolledRef.current = true; // 标记已滚动
|
||||||
inline: 'nearest' // 水平方向最小滚动
|
logger.debug('Community', '用户触发搜索,滚动到实时事件时间轴');
|
||||||
});
|
|
||||||
hasScrolledRef.current = true; // 标记已滚动
|
|
||||||
logger.debug('Community', '页面渲染完成,自动滚动到实时事件时间轴(顶部对齐)');
|
|
||||||
}
|
|
||||||
}, 1000); // 渲染完成后延迟1秒
|
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}
|
}
|
||||||
}, [loading]); // 监听 loading 状态变化
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box minH="100vh" bg={bgColor}>
|
<Box minH="100vh" bg={bgColor}>
|
||||||
@@ -109,6 +102,7 @@ const Community = () => {
|
|||||||
popularKeywords={popularKeywords}
|
popularKeywords={popularKeywords}
|
||||||
lastUpdateTime={lastUpdateTime}
|
lastUpdateTime={lastUpdateTime}
|
||||||
onSearch={updateFilters}
|
onSearch={updateFilters}
|
||||||
|
onSearchFocus={scrollToTimeline}
|
||||||
onPageChange={handlePageChange}
|
onPageChange={handlePageChange}
|
||||||
onEventClick={handleEventClick}
|
onEventClick={handleEventClick}
|
||||||
onViewDetail={handleViewDetail}
|
onViewDetail={handleViewDetail}
|
||||||
|
|||||||
Reference in New Issue
Block a user