From 92d6751529f9c4cb20e0ad5882c4bcd4bcdf417d Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 3 Nov 2025 12:49:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=20DynamicNewsCard=20=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8=E9=9B=86=E6=88=90=E6=90=9C=E7=B4=A2=E5=92=8C=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

功能新增：
- 将 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>
---
 .../Community/components/DynamicNewsCard.js   | 19 +++++++++++++++++++
 src/views/Community/index.js                  |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js
index 2e6b8fdd..2d5406cd 100644
--- a/src/views/Community/components/DynamicNewsCard.js
+++ b/src/views/Community/components/DynamicNewsCard.js
@@ -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>
 
       {/* 主体内容 */}
diff --git a/src/views/Community/index.js b/src/views/Community/index.js
index 9ff47375..474fd2de 100644
--- a/src/views/Community/index.js
+++ b/src/views/Community/index.js
@@ -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}
         />