feat: 在 DynamicNewsCard 头部集成搜索和筛选功能

功能新增:
- 将 UnifiedSearchBox 组件集成到 DynamicNewsCard 的 CardHeader 中
- 实现 DynamicNewsCard 和 EventTimelineCard 共享筛选状态
- 用户可在动态新闻区域直接进行搜索和筛选操作

组件修改:
- DynamicNewsCard.js:
  * 导入 UnifiedSearchBox 组件
  * 添加 filters, popularKeywords, onSearch, onSearchFocus 等 props
  * 在 CardHeader 内部渲染搜索框(标题下方,mt={4})
- Community/index.js:
  * 向 DynamicNewsCard 传递筛选状态和回调函数
  * filters 和 popularKeywords 数据传递
  * updateFilters 和 scrollToTimeline 回调传递

布局结构:
CardHeader
├─ 第一行:标题、徽章、更新时间
└─ 第二行:UnifiedSearchBox(搜索框 + 热门概念 + 筛选器)

状态管理:
- 使用共享的 filters 状态(来自 useEventFilters hook)
- 搜索操作通过 updateFilters 回调同步到父组件
- 两个组件的筛选条件保持一致

用户体验提升:
- 用户无需滚动到页面底部即可进行搜索
- 动态新闻区域功能更完整和独立
- 搜索结果在两个组件间同步显示

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-03 12:49:58 +08:00
parent 95134d526d
commit 92d6751529
2 changed files with 23 additions and 0 deletions

View File

@@ -21,6 +21,7 @@ import {
import { TimeIcon } from '@chakra-ui/icons'; import { TimeIcon } from '@chakra-ui/icons';
import EventScrollList from './DynamicNewsCard/EventScrollList'; import EventScrollList from './DynamicNewsCard/EventScrollList';
import DynamicNewsDetailPanel from './DynamicNewsDetail'; import DynamicNewsDetailPanel from './DynamicNewsDetail';
import UnifiedSearchBox from './UnifiedSearchBox';
import { fetchDynamicNews } from '../../../store/slices/communityDataSlice'; import { fetchDynamicNews } from '../../../store/slices/communityDataSlice';
/** /**
@@ -28,7 +29,11 @@ import { fetchDynamicNews } from '../../../store/slices/communityDataSlice';
* @param {Array} events - 事件列表 * @param {Array} events - 事件列表
* @param {boolean} loading - 加载状态 * @param {boolean} loading - 加载状态
* @param {Object} pagination - 分页信息 { page, per_page, total, total_pages } * @param {Object} pagination - 分页信息 { page, per_page, total, total_pages }
* @param {Object} filters - 筛选条件
* @param {Array} popularKeywords - 热门关键词
* @param {Date} lastUpdateTime - 最后更新时间 * @param {Date} lastUpdateTime - 最后更新时间
* @param {Function} onSearch - 搜索回调
* @param {Function} onSearchFocus - 搜索框获得焦点回调
* @param {Function} onEventClick - 事件点击回调 * @param {Function} onEventClick - 事件点击回调
* @param {Function} onViewDetail - 查看详情回调 * @param {Function} onViewDetail - 查看详情回调
* @param {Object} ref - 用于滚动的ref * @param {Object} ref - 用于滚动的ref
@@ -37,7 +42,11 @@ const DynamicNewsCard = forwardRef(({
events, events,
loading, loading,
pagination = {}, pagination = {},
filters = {},
popularKeywords = [],
lastUpdateTime, lastUpdateTime,
onSearch,
onSearchFocus,
onEventClick, onEventClick,
onViewDetail, onViewDetail,
...rest ...rest
@@ -89,6 +98,16 @@ const DynamicNewsCard = forwardRef(({
最后更新: {lastUpdateTime?.toLocaleTimeString() || '未知'} 最后更新: {lastUpdateTime?.toLocaleTimeString() || '未知'}
</Text> </Text>
</Flex> </Flex>
{/* 搜索和筛选组件 */}
<Box mt={4}>
<UnifiedSearchBox
onSearch={onSearch}
onSearchFocus={onSearchFocus}
popularKeywords={popularKeywords}
filters={filters}
/>
</Box>
</CardHeader> </CardHeader>
{/* 主体内容 */} {/* 主体内容 */}

View File

@@ -171,7 +171,11 @@ const Community = () => {
events={dynamicNewsEvents} events={dynamicNewsEvents}
loading={dynamicNewsLoading} loading={dynamicNewsLoading}
pagination={dynamicNewsPagination} pagination={dynamicNewsPagination}
filters={filters}
popularKeywords={popularKeywords}
lastUpdateTime={lastUpdateTime} lastUpdateTime={lastUpdateTime}
onSearch={updateFilters}
onSearchFocus={scrollToTimeline}
onEventClick={handleEventClick} onEventClick={handleEventClick}
onViewDetail={handleViewDetail} onViewDetail={handleViewDetail}
/> />