refactor: 重构 JSX 布局为统一卡片设计
- 移除两栏 Grid 布局（左侧主内容 + 右侧侧边栏） - 统一为单个大卡片「实时事件时间轴」 - 整合 UnifiedSearchBox 到主卡片内部 - 传入 updateFilters、popularKeywords、filters、loading 参数 - 移除右侧侧边栏的所有组件： - SearchBox（已整合到 UnifiedSearchBox） - InvestmentCalendar（投资日历） - PopularKeywords（已整合到 UnifiedSearchBox） - ImportanceLegend（重要性说明） - 移除 EventFilters 组件（已被 UnifiedSearchBox 替代） - 移除 Footer 区域（现由 MainLayout 提供） - 筛选标签移至主卡片内部 - 简化布局，提升用户体验 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -280,37 +280,9 @@ const Community = () => {
|
|||||||
|
|
||||||
{/* 主内容区域 */}
|
{/* 主内容区域 */}
|
||||||
<Container maxW="container.xl" py={8}>
|
<Container maxW="container.xl" py={8}>
|
||||||
<Grid templateColumns={{ base: '1fr', lg: '2fr 1fr' }} gap={6}>
|
{/* 实时事件时间轴 - 统一大卡片 */}
|
||||||
|
<Card ref={eventTimelineRef} bg={cardBg} borderColor={borderColor} mb={4}>
|
||||||
{/* 左侧主要内容 */}
|
{/* 标题部分 */}
|
||||||
<GridItem>
|
|
||||||
{/* 筛选器 - 需要改造为Chakra UI版本 */}
|
|
||||||
<Card mb={4} bg={cardBg} borderColor={borderColor}>
|
|
||||||
<CardBody>
|
|
||||||
<EventFilters
|
|
||||||
filters={filters}
|
|
||||||
onFilterChange={handleFilterChange}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 筛选标签 */}
|
|
||||||
{filterTags.length > 0 && (
|
|
||||||
<Wrap spacing={2} mb={4}>
|
|
||||||
{filterTags.map(tag => (
|
|
||||||
<WrapItem key={tag.key}>
|
|
||||||
<Tag size="md" variant="solid" colorScheme="blue">
|
|
||||||
<TagLabel>{tag.label}</TagLabel>
|
|
||||||
<TagCloseButton onClick={() => handleRemoveFilterTag(tag.key)} />
|
|
||||||
</Tag>
|
|
||||||
</WrapItem>
|
|
||||||
))}
|
|
||||||
</Wrap>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 事件列表卡片 */}
|
|
||||||
<Card ref={eventTimelineRef} bg={cardBg} borderColor={borderColor}>
|
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<Flex justify="space-between" align="center">
|
<Flex justify="space-between" align="center">
|
||||||
<VStack align="start" spacing={1}>
|
<VStack align="start" spacing={1}>
|
||||||
@@ -332,7 +304,33 @@ const Community = () => {
|
|||||||
</Flex>
|
</Flex>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
||||||
|
{/* 主体内容 */}
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
{/* 统一搜索组件（整合了话题、股票、行业、日期、排序、重要性、热门概念） */}
|
||||||
|
<Box mb={4}>
|
||||||
|
<UnifiedSearchBox
|
||||||
|
onSearch={updateFilters}
|
||||||
|
popularKeywords={popularKeywords}
|
||||||
|
filters={filters}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 筛选标签 */}
|
||||||
|
{filterTags.length > 0 && (
|
||||||
|
<Wrap spacing={2} mb={4}>
|
||||||
|
{filterTags.map(tag => (
|
||||||
|
<WrapItem key={tag.key}>
|
||||||
|
<Tag size="md" variant="solid" colorScheme="blue">
|
||||||
|
<TagLabel>{tag.label}</TagLabel>
|
||||||
|
<TagCloseButton onClick={() => handleRemoveFilterTag(tag.key)} />
|
||||||
|
</Tag>
|
||||||
|
</WrapItem>
|
||||||
|
))}
|
||||||
|
</Wrap>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 事件列表 */}
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<Center py={10}>
|
<Center py={10}>
|
||||||
<VStack>
|
<VStack>
|
||||||
@@ -357,72 +355,6 @@ const Community = () => {
|
|||||||
)}
|
)}
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</GridItem>
|
|
||||||
|
|
||||||
{/* 右侧侧边栏 */}
|
|
||||||
<GridItem>
|
|
||||||
<VStack spacing={4}>
|
|
||||||
{/* 搜索框 - 需要改造为Chakra UI版本 */}
|
|
||||||
<Card w="full" bg={cardBg}>
|
|
||||||
<CardBody>
|
|
||||||
<SearchBox
|
|
||||||
onSearch={(values) => {
|
|
||||||
updateUrlParams({ ...values, page: 1 });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 投资日历 - 需要改造为Chakra UI版本 */}
|
|
||||||
<Card w="full" bg={cardBg}>
|
|
||||||
<CardHeader>
|
|
||||||
<Heading size="sm">
|
|
||||||
<HStack>
|
|
||||||
<CalendarIcon />
|
|
||||||
<Text>投资日历</Text>
|
|
||||||
</HStack>
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<InvestmentCalendar />
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 热门关键词 - 需要改造为Chakra UI版本 */}
|
|
||||||
<Card w="full" bg={cardBg}>
|
|
||||||
<CardHeader>
|
|
||||||
<Heading size="sm">
|
|
||||||
<HStack>
|
|
||||||
<StarIcon />
|
|
||||||
<Text>热门关键词</Text>
|
|
||||||
</HStack>
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<PopularKeywords
|
|
||||||
keywords={popularKeywords}
|
|
||||||
onKeywordClick={handleKeywordClick}
|
|
||||||
/>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 重要性说明 - 需要改造为Chakra UI版本 */}
|
|
||||||
<Card w="full" bg={cardBg}>
|
|
||||||
<CardHeader>
|
|
||||||
<Heading size="sm">
|
|
||||||
<HStack>
|
|
||||||
<InfoIcon />
|
|
||||||
<Text>重要性说明</Text>
|
|
||||||
</HStack>
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<ImportanceLegend />
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
</VStack>
|
|
||||||
</GridItem>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* 热点事件 - 需要改造为Chakra UI版本 */}
|
{/* 热点事件 - 需要改造为Chakra UI版本 */}
|
||||||
{hotEvents.length > 0 && (
|
{hotEvents.length > 0 && (
|
||||||
@@ -437,27 +369,6 @@ const Community = () => {
|
|||||||
)}
|
)}
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
{/* Footer区域 */}
|
|
||||||
<Box bg={useColorModeValue('gray.100', 'gray.800')} py={6} mt={8}>
|
|
||||||
<Container maxW="container.xl">
|
|
||||||
<VStack spacing={2}>
|
|
||||||
<Text color="gray.500" fontSize="sm">
|
|
||||||
© 2024 价值前沿. 保留所有权利.
|
|
||||||
</Text>
|
|
||||||
<HStack spacing={4} fontSize="xs" color="gray.400">
|
|
||||||
<Link
|
|
||||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286"
|
|
||||||
isExternal
|
|
||||||
_hover={{ color: 'gray.600' }}
|
|
||||||
>
|
|
||||||
京公网安备11010802046286号
|
|
||||||
</Link>
|
|
||||||
<Text>京ICP备2025107343号-1</Text>
|
|
||||||
</HStack>
|
|
||||||
</VStack>
|
|
||||||
</Container>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* 事件详情模态框 - 使用Chakra UI Modal */}
|
{/* 事件详情模态框 - 使用Chakra UI Modal */}
|
||||||
<Modal isOpen={isEventModalOpen && selectedEvent} onClose={onEventModalClose} size="xl">
|
<Modal isOpen={isEventModalOpen && selectedEvent} onClose={onEventModalClose} size="xl">
|
||||||
<ModalOverlay />
|
<ModalOverlay />
|
||||||
|
|||||||
Reference in New Issue
Block a user