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