From 52cf950b211413cb7e05bda38ac701b6ff08e213 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 6 Nov 2025 14:09:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=20FilterModal=20?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 FilterModal.js 组件，用于在固定模式下显示筛选弹窗
- 复用 UnifiedSearchBox 组件实现筛选功能
- 支持 mode 和 pageSize 参数传递
- 添加 scrollBehavior="outside" 避免下拉菜单被遮挡

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/DynamicNewsCard/FilterModal.js | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/views/Community/components/DynamicNewsCard/FilterModal.js

diff --git a/src/views/Community/components/DynamicNewsCard/FilterModal.js b/src/views/Community/components/DynamicNewsCard/FilterModal.js
new file mode 100644
index 00000000..a0337d96
--- /dev/null
+++ b/src/views/Community/components/DynamicNewsCard/FilterModal.js
@@ -0,0 +1,58 @@
+// src/views/Community/components/DynamicNewsCard/FilterModal.js
+// 筛选弹窗组件
+
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+} from '@chakra-ui/react';
+import UnifiedSearchBox from '../UnifiedSearchBox';
+
+/**
+ * 筛选弹窗组件
+ * @param {boolean} isOpen - Modal 是否打开
+ * @param {function} onClose - 关闭 Modal 回调
+ * @param {object} filters - 当前筛选条件
+ * @param {array} popularKeywords - 热门关键词
+ * @param {function} onSearch - 搜索回调
+ * @param {function} onSearchFocus - 搜索框聚焦回调
+ * @param {string} mode - 当前模式 ('vertical' | 'four-row')
+ * @param {number} pageSize - 每页大小 (10 | 30)
+ */
+const FilterModal = ({
+  isOpen,
+  onClose,
+  filters,
+  popularKeywords,
+  onSearch,
+  onSearchFocus,
+  mode,
+  pageSize
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl" scrollBehavior="outside">
+      <ModalOverlay />
+      <ModalContent maxW="90vw">
+        <ModalHeader>筛选条件</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody pb={6} overflow="visible">
+          {/* 直接复用 UnifiedSearchBox */}
+          <UnifiedSearchBox
+            filters={filters}
+            popularKeywords={popularKeywords}
+            onSearch={onSearch}
+            onSearchFocus={onSearchFocus}
+            mode={mode}
+            pageSize={pageSize}
+          />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default FilterModal;