diff --git a/src/views/Community/components/EventTimelineCard.js b/src/views/Community/components/EventTimelineCard.js index 0bde3f86..d240a2aa 100644 --- a/src/views/Community/components/EventTimelineCard.js +++ b/src/views/Community/components/EventTimelineCard.js @@ -22,6 +22,7 @@ import EventListSection from './EventListSection'; * @param {Array} popularKeywords - 热门关键词 * @param {Date} lastUpdateTime - 最后更新时间 * @param {Function} onSearch - 搜索回调 + * @param {Function} onSearchFocus - 搜索框获得焦点回调 * @param {Function} onPageChange - 分页变化回调 * @param {Function} onEventClick - 事件点击回调 * @param {Function} onViewDetail - 查看详情回调 @@ -35,6 +36,7 @@ const EventTimelineCard = forwardRef(({ popularKeywords, lastUpdateTime, onSearch, + onSearchFocus, onPageChange, onEventClick, onViewDetail, @@ -56,6 +58,7 @@ const EventTimelineCard = forwardRef(({ diff --git a/src/views/Community/components/UnifiedSearchBox.js b/src/views/Community/components/UnifiedSearchBox.js index 82858a2f..fd2a66ea 100644 --- a/src/views/Community/components/UnifiedSearchBox.js +++ b/src/views/Community/components/UnifiedSearchBox.js @@ -21,6 +21,7 @@ const { Option } = AntSelect; const UnifiedSearchBox = ({ onSearch, + onSearchFocus, popularKeywords = [], filters = {} }) => { @@ -519,6 +520,7 @@ const UnifiedSearchBox = ({ onChange={handleInputChange} onSearch={handleSearch} onSelect={handleStockSelect} + onFocus={onSearchFocus} options={stockOptions} placeholder="请输入股票代码/股票名称/相关话题" onPressEnter={handleMainSearch} diff --git a/src/views/Community/index.js b/src/views/Community/index.js index 2f5df6e5..4c759ce5 100644 --- a/src/views/Community/index.js +++ b/src/views/Community/index.js @@ -1,5 +1,5 @@ // 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 { useSelector, useDispatch } from 'react-redux'; import { fetchPopularKeywords, fetchHotEvents } from '../../store/slices/communityDataSlice'; @@ -71,25 +71,18 @@ const Community = () => { } }, [showCommunityGuide]); // 只在组件挂载时执行一次 - // ⚡ 页面渲染完成后1秒,自动滚动到实时事件时间轴 - useEffect(() => { - // 只在第一次数据加载完成后滚动 - if (!loading && !hasScrolledRef.current && eventTimelineRef.current) { - const timer = setTimeout(() => { - if (eventTimelineRef.current) { - eventTimelineRef.current.scrollIntoView({ - behavior: 'smooth', // 平滑滚动动画 - block: 'start', // 元素顶部对齐视口顶部,标题正好可见 - inline: 'nearest' // 水平方向最小滚动 - }); - hasScrolledRef.current = true; // 标记已滚动 - logger.debug('Community', '页面渲染完成,自动滚动到实时事件时间轴(顶部对齐)'); - } - }, 1000); // 渲染完成后延迟1秒 - - return () => clearTimeout(timer); + // ⚡ 滚动到实时事件区域(由搜索框聚焦触发) + const scrollToTimeline = useCallback(() => { + if (!hasScrolledRef.current && eventTimelineRef.current) { + eventTimelineRef.current.scrollIntoView({ + behavior: 'smooth', // 平滑滚动动画 + block: 'start', // 元素顶部对齐视口顶部,标题正好可见 + inline: 'nearest' // 水平方向最小滚动 + }); + hasScrolledRef.current = true; // 标记已滚动 + logger.debug('Community', '用户触发搜索,滚动到实时事件时间轴'); } - }, [loading]); // 监听 loading 状态变化 + }, []); return ( @@ -109,6 +102,7 @@ const Community = () => { popularKeywords={popularKeywords} lastUpdateTime={lastUpdateTime} onSearch={updateFilters} + onSearchFocus={scrollToTimeline} onPageChange={handlePageChange} onEventClick={handleEventClick} onViewDetail={handleViewDetail}