feat: 创建 FilterModal 筛选弹窗组件

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-06 14:09:59 +08:00
parent f9b580c871
commit 52cf950b21

View File

@@ -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;