update ui

src/views/Community/components/CompactSearchBox.js

@@ -423,15 +423,15 @@ const CompactSearchBox = ({
 
     return (
         <div style={{
-            padding: '16px 20px',
+            padding: window.innerWidth < 768 ? '12px 16px' : '16px 20px',
             background: PROFESSIONAL_COLORS.background.card,
             borderRadius: '12px',
             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 195, 0, 0.1)',
             border: `1px solid ${PROFESSIONAL_COLORS.border.default}`,
             backdropFilter: 'blur(10px)'
         }}>
-            {/* 单行紧凑布局 */}
+            {/* 单行紧凑布局 - 移动端自动换行 */}
-            <Space wrap style={{ width: '100%' }} size="medium">
+            <Space wrap style={{ width: '100%' }} size={window.innerWidth < 768 ? 'small' : 'medium'}>
                 {/* 搜索框 */}
                 <AutoComplete
                     value={inputValue}
@@ -446,7 +446,7 @@ const CompactSearchBox = ({
                             handleMainSearch();
                         }
                     }}
-                    style={{ width: 240 }}
+                    style={{ width: window.innerWidth < 768 ? '100%' : 240, minWidth: window.innerWidth < 768 ? 0 : 240 }}
                 >
                     <Input
                         prefix={<SearchOutlined style={{ color: PROFESSIONAL_COLORS.gold[500] }} />}
@@ -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={<FilterOutlined style={{ fontSize: 14, color: PROFESSIONAL_COLORS.gold[500] }} />}
@@ -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={<SortAscendingOutlined style={{ fontSize: 14, color: PROFESSIONAL_COLORS.gold[500] }} />}

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 (
     <Flex
       display={display}
-      gap={6}
+      direction={flexDirection}
+      gap={gap}
       position="relative"
       transition="all 0.3s ease-in-out"
       h="100%"
@@ -48,8 +54,9 @@ const VerticalModeLayout = ({
     >
       {/* 左侧：事件列表 - 独立滚动 */}
       <Box
-        flex={leftFlex}
+        flex={isMobile ? '1' : leftFlex}
         minWidth={0}
+        w={isMobile ? '100%' : 'auto'}
         overflowY="auto"
         h="100%"
         data-event-list-container="true"
@@ -109,21 +116,23 @@ const VerticalModeLayout = ({
         )}
       </Box>
 
-      {/* 右侧：事件详情 - 独立滚动 */}
+      {/* 右侧：事件详情 - 独立滚动 - 移动端隐藏 */}
-      <Box
+      {!isMobile && (
-        flex={rightFlex}
+        <Box
-        minHeight={0}
+          flex={rightFlex}
-        position="relative"
+          minHeight={0}
-        overflow="hidden"
+          position="relative"
-        h="100%"
+          overflow="hidden"
-      >
+          h="100%"
-        {/* 详情面板 */}
+        >
-        <EventDetailScrollPanel
+          {/* 详情面板 */}
-          key={detailPanelKey}
+          <EventDetailScrollPanel
-          detailMode="no-header"
+            key={detailPanelKey}
-          selectedEvent={selectedEvent}
+            detailMode="no-header"
-        />
+            selectedEvent={selectedEvent}
-      </Box>
+          />
+        </Box>
+      )}
     </Flex>
   );
 };

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();
+      console.log('%c📊 [相关股票] 事件切换，加载股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id });
-        setHasLoadedStocks(true);
+      loadStocksData();
-      }
+      setHasLoadedStocks(true);
     } else {
       setIsStocksOpen(false);
-      setHasLoadedStocks(false);
     }
 
     setIsConceptsOpen(false);
     setIsHistoricalOpen(false);
-    setHasLoadedHistorical(false);
     setIsTransmissionOpen(false);
-    setHasLoadedTransmission(false);
   }, [event?.id, canAccessStocks, userTier, loadStocksData, loadEventDetail]);
 
   // 切换关注状态

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 (
-        <HStack align="stretch" spacing={3} w="full">
+        <HStack align="stretch" spacing={spacing} w="full">
-            {/* 左侧时间轴 */}
+            {/* 左侧时间轴 - 移动端隐藏 */}
-            <EventTimeline
+            {showTimeline && (
-                createdAt={event.created_at}
+                <EventTimeline
-                timelineStyle={timelineStyle}
+                    createdAt={event.created_at}
-                borderColor={timelineBorderColor}
+                    timelineStyle={timelineStyle}
-                minHeight={layout === 'four-row' ? '60px' : 0}
+                    borderColor={timelineBorderColor}
-                importance={importance}
+                    minHeight={layout === 'four-row' ? '60px' : 0}
-            />
+                    importance={importance}
+                />
+            )}
 
             {/* 右侧事件卡片容器 */}
             <Box flex="1" position="relative">
@@ -148,9 +158,9 @@ const HorizontalDynamicNewsEventCard = ({
                     cursor="pointer"
                     onClick={() => onEventClick?.(event)}
                 >
-                    <CardBody p={3} pb={2}>
+                    <CardBody p={cardPadding} pb={2}>
                         {/* 右上角：关注按钮 */}
-                        <Box position="absolute" top={2} right={2} zIndex={2}>
+                        <Box position="absolute" top={{ base: 1, md: 2 }} right={{ base: 1, md: 2 }} zIndex={2}>
                             <EventFollowButton
                                 isFollowing={isFollowing}
                                 followerCount={followerCount}
@@ -189,10 +199,10 @@ const HorizontalDynamicNewsEventCard = ({
                                     cursor="pointer"
                                     onClick={(e) => onTitleClick?.(e, event)}
                                     mt={1}
-                                    paddingRight="120px"
+                                    paddingRight={titlePaddingRight}
                                 >
                                     <Text
-                                        fontSize="md"
+                                        fontSize={titleFontSize}
                                         fontWeight="semibold"
                                         color={linkColor}
                                         lineHeight="1.4"

src/views/Community/index.js

@@ -19,6 +19,7 @@ import {
   HStack,
   VStack,
   Text,
+  useBreakpointValue,
 } from '@chakra-ui/react';
 
 // 导入组件
@@ -52,6 +53,23 @@ const Community = () => {
   // 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 (
     <Box minH="100vh" bg={bgColor}>
       {/* 主内容区域 */}
-      <Container ref={containerRef} maxW="1400px" pt={6} pb={8}>
+      <Container ref={containerRef} maxW={containerMaxW} px={containerPx} pt={{ base: 3, md: 6 }} pb={{ base: 4, md: 8 }}>
         {/* 通知权限提示横幅 */}
         {showNotificationBanner && (
           <Alert