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,20 +280,41 @@ 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>
|
<CardHeader>
|
||||||
{/* 筛选器 - 需要改造为Chakra UI版本 */}
|
<Flex justify="space-between" align="center">
|
||||||
<Card mb={4} bg={cardBg} borderColor={borderColor}>
|
<VStack align="start" spacing={1}>
|
||||||
<CardBody>
|
<Heading size="md">
|
||||||
<EventFilters
|
<HStack>
|
||||||
filters={filters}
|
<TimeIcon />
|
||||||
onFilterChange={handleFilterChange}
|
<Text>实时事件时间轴</Text>
|
||||||
loading={loading}
|
</HStack>
|
||||||
/>
|
</Heading>
|
||||||
</CardBody>
|
<HStack fontSize="sm" color="gray.500">
|
||||||
</Card>
|
<Badge colorScheme="green">全网监控</Badge>
|
||||||
|
<Badge colorScheme="orange">智能捕获</Badge>
|
||||||
|
<Badge colorScheme="purple">深度分析</Badge>
|
||||||
|
</HStack>
|
||||||
|
</VStack>
|
||||||
|
<Text fontSize="xs" color="gray.500">
|
||||||
|
最后更新: {lastUpdateTime.toLocaleTimeString()}
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
{/* 主体内容 */}
|
||||||
|
<CardBody>
|
||||||
|
{/* 统一搜索组件（整合了话题、股票、行业、日期、排序、重要性、热门概念） */}
|
||||||
|
<Box mb={4}>
|
||||||
|
<UnifiedSearchBox
|
||||||
|
onSearch={updateFilters}
|
||||||
|
popularKeywords={popularKeywords}
|
||||||
|
filters={filters}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
{/* 筛选标签 */}
|
{/* 筛选标签 */}
|
||||||
{filterTags.length > 0 && (
|
{filterTags.length > 0 && (
|
||||||
@@ -309,120 +330,31 @@ const Community = () => {
|
|||||||
</Wrap>
|
</Wrap>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 事件列表卡片 */}
|
{/* 事件列表 */}
|
||||||
<Card ref={eventTimelineRef} bg={cardBg} borderColor={borderColor}>
|
{loading ? (
|
||||||
<CardHeader>
|
<Center py={10}>
|
||||||
<Flex justify="space-between" align="center">
|
<VStack>
|
||||||
<VStack align="start" spacing={1}>
|
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||||
<Heading size="md">
|
<Text color="gray.500">正在加载最新事件...</Text>
|
||||||
<HStack>
|
</VStack>
|
||||||
<TimeIcon />
|
</Center>
|
||||||
<Text>实时事件时间轴</Text>
|
) : events.length > 0 ? (
|
||||||
</HStack>
|
<EventList
|
||||||
</Heading>
|
events={events}
|
||||||
<HStack fontSize="sm" color="gray.500">
|
pagination={pagination}
|
||||||
<Badge colorScheme="green">全网监控</Badge>
|
onPageChange={handlePageChange}
|
||||||
<Badge colorScheme="orange">智能捕获</Badge>
|
onEventClick={handleEventClick}
|
||||||
<Badge colorScheme="purple">深度分析</Badge>
|
onViewDetail={handleViewDetail}
|
||||||
</HStack>
|
/>
|
||||||
</VStack>
|
) : (
|
||||||
<Text fontSize="xs" color="gray.500">
|
<Center py={10}>
|
||||||
最后更新: {lastUpdateTime.toLocaleTimeString()}
|
<VStack>
|
||||||
</Text>
|
<Text fontSize="lg" color="gray.500">暂无事件数据</Text>
|
||||||
</Flex>
|
</VStack>
|
||||||
</CardHeader>
|
</Center>
|
||||||
|
)}
|
||||||
<CardBody>
|
</CardBody>
|
||||||
{loading ? (
|
</Card>
|
||||||
<Center py={10}>
|
|
||||||
<VStack>
|
|
||||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
|
||||||
<Text color="gray.500">正在加载最新事件...</Text>
|
|
||||||
</VStack>
|
|
||||||
</Center>
|
|
||||||
) : events.length > 0 ? (
|
|
||||||
<EventList
|
|
||||||
events={events}
|
|
||||||
pagination={pagination}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onEventClick={handleEventClick}
|
|
||||||
onViewDetail={handleViewDetail}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Center py={10}>
|
|
||||||
<VStack>
|
|
||||||
<Text fontSize="lg" color="gray.500">暂无事件数据</Text>
|
|
||||||
</VStack>
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</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