From 5e70f4443d3ec307895011a8b9d9f7f05df234f1 Mon Sep 17 00:00:00 2001 From: zzlgreat Date: Fri, 14 Nov 2025 06:39:29 +0800 Subject: [PATCH] update ui --- .../Community/components/CompactSearchBox.js | 17 ++++--- .../DynamicNewsCard/VerticalModeLayout.js | 45 +++++++++++-------- .../DynamicNewsDetailPanel.js | 16 ++++--- .../HorizontalDynamicNewsEventCard.js | 36 +++++++++------ src/views/Community/index.js | 20 ++++++++- 5 files changed, 88 insertions(+), 46 deletions(-) diff --git a/src/views/Community/components/CompactSearchBox.js b/src/views/Community/components/CompactSearchBox.js index 90d36431..b51eb8ba 100644 --- a/src/views/Community/components/CompactSearchBox.js +++ b/src/views/Community/components/CompactSearchBox.js @@ -423,15 +423,15 @@ const CompactSearchBox = ({ return (
- {/* 单行紧凑布局 */} - + {/* 单行紧凑布局 - 移动端自动换行 */} + {/* 搜索框 */} } @@ -492,7 +492,8 @@ const CompactSearchBox = ({ displayRender={(labels) => labels[labels.length - 1] || '行业'} disabled={industryLoading} style={{ - width: 120, + width: window.innerWidth < 768 ? '100%' : 120, + minWidth: window.innerWidth < 768 ? 0 : 120, borderRadius: '8px' }} suffixIcon={} @@ -506,7 +507,8 @@ const CompactSearchBox = ({ value={importance} onChange={handleImportanceChange} style={{ - width: 120, + width: window.innerWidth < 768 ? '100%' : 120, + minWidth: window.innerWidth < 768 ? 0 : 120, borderRadius: '8px' }} placeholder="事件等级" @@ -526,7 +528,8 @@ const CompactSearchBox = ({ value={sort} onChange={handleSortChange} style={{ - width: 130, + width: window.innerWidth < 768 ? '100%' : 130, + minWidth: window.innerWidth < 768 ? 0 : 130, borderRadius: '8px' }} suffixIcon={} diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js index d0a81707..cb5a180f 100644 --- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js +++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js @@ -2,7 +2,7 @@ // 纵向分栏模式布局组件 import React, { useState } from 'react'; -import { Box, VStack, Flex, Center, Text } from '@chakra-ui/react'; +import { Box, VStack, Flex, Center, Text, useBreakpointValue } from '@chakra-ui/react'; import { InfoIcon } from '@chakra-ui/icons'; import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard'; import EventDetailScrollPanel from './EventDetailScrollPanel'; @@ -33,6 +33,11 @@ const VerticalModeLayout = ({ // 详情面板重置 key（预留，用于未来功能） const [detailPanelKey] = useState(0); + // 响应式布局 + const isMobile = useBreakpointValue({ base: true, lg: false }); + const flexDirection = useBreakpointValue({ base: 'column', lg: 'row' }); + const gap = useBreakpointValue({ base: 3, lg: 6 }); + // 固定布局比例：左侧（4），右侧（6）- 平衡布局，确保左侧有足够空间显示内容 const leftFlex = '4'; const rightFlex = '6'; @@ -40,7 +45,8 @@ const VerticalModeLayout = ({ return ( {/* 左侧：事件列表 - 独立滚动 */} - {/* 右侧：事件详情 - 独立滚动 */} - - {/* 详情面板 */} - - + {/* 右侧：事件详情 - 独立滚动 - 移动端隐藏 */} + {!isMobile && ( + + {/* 详情面板 */} + + + )} ); }; diff --git a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js index 8f7d531a..da419291 100644 --- a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js +++ b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js @@ -205,23 +205,25 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { // 🎯 加载事件详情（增加浏览量） loadEventDetail(); + // 重置所有加载状态 + setHasLoadedStocks(false); + setHasLoadedHistorical(false); + setHasLoadedTransmission(false); + // 相关股票默认展开（有权限时） if (canAccessStocks) { setIsStocksOpen(true); - if (!hasLoadedStocks) { - loadStocksData(); - setHasLoadedStocks(true); - } + // 立即加载股票数据 + console.log('%c📊 [相关股票] 事件切换，加载股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id }); + loadStocksData(); + setHasLoadedStocks(true); } else { setIsStocksOpen(false); - setHasLoadedStocks(false); } setIsConceptsOpen(false); setIsHistoricalOpen(false); - setHasLoadedHistorical(false); setIsTransmissionOpen(false); - setHasLoadedTransmission(false); }, [event?.id, canAccessStocks, userTier, loadStocksData, loadEventDetail]); // 切换关注状态 diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js index a7c97f29..344260d0 100644 --- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js +++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js @@ -11,6 +11,7 @@ import { Text, Tooltip, useColorModeValue, + useBreakpointValue, } from '@chakra-ui/react'; import { getImportanceConfig } from '../../../../constants/importanceLevels'; import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme'; @@ -62,6 +63,13 @@ const HorizontalDynamicNewsEventCard = ({ const linkColor = PROFESSIONAL_COLORS.text.primary; const borderColor = PROFESSIONAL_COLORS.border.default; + // 响应式布局 + const showTimeline = useBreakpointValue({ base: false, md: true }); // 移动端隐藏时间轴 + const cardPadding = useBreakpointValue({ base: 2, md: 3 }); // 移动端减小内边距 + const titleFontSize = useBreakpointValue({ base: 'sm', md: 'md' }); // 移动端减小标题字体 + const titlePaddingRight = useBreakpointValue({ base: '80px', md: '120px' }); // 为关键词留空间 + const spacing = useBreakpointValue({ base: 2, md: 3 }); // 间距 + /** * 根据平均涨幅计算背景色（专业配色 - 深色主题） * @param {number} avgChange - 平均涨跌幅 @@ -97,15 +105,17 @@ const HorizontalDynamicNewsEventCard = ({ }; return ( - - {/* 左侧时间轴 */} - + + {/* 左侧时间轴 - 移动端隐藏 */} + {showTimeline && ( + + )} {/* 右侧事件卡片容器 */} @@ -148,9 +158,9 @@ const HorizontalDynamicNewsEventCard = ({ cursor="pointer" onClick={() => onEventClick?.(event)} > - + {/* 右上角：关注按钮 */} - + onTitleClick?.(e, event)} mt={1} - paddingRight="120px" + paddingRight={titlePaddingRight} > { // Ref：用于首次滚动到内容区域 const containerRef = useRef(null); + // 响应式容器宽度 + const containerMaxW = useBreakpointValue({ + base: '100%', // 移动端：全宽 + sm: '100%', // 小屏：全宽 + md: '100%', // 中屏：全宽 + lg: '1200px', // 大屏：1200px + xl: '1400px', // 超大屏：1400px + }); + + // 响应式内边距 + const containerPx = useBreakpointValue({ + base: 2, // 移动端：最小内边距 + sm: 3, + md: 4, + lg: 6, + }); + // ⚡ 通知权限引导 const { browserPermission, requestBrowserPermission } = useNotification(); @@ -145,7 +163,7 @@ const Community = () => { return ( {/* 主内容区域 */} - + {/* 通知权限提示横幅 */} {showNotificationBanner && (