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 && (