1. 页面加载后应停留在顶部
  2. 点击搜索框,页面应平滑滚动到"实时事件时间轴"区域
  3. 再次点击搜索框不会重复滚动
This commit is contained in:
zdl
2025-10-27 16:37:36 +08:00
parent e568b5e05f
commit 0f3bc06716
3 changed files with 18 additions and 19 deletions

View File

@@ -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}
/> />

View File

@@ -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}

View File

@@ -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}