From fbf68136152decab34f03ceb4dba77c3eb01196e Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Mon, 10 Nov 2025 10:18:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E4=B8=AD=E5=BF=83=E6=9C=89?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8=E7=9A=84=E7=9B=B8=E5=85=B3=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsCard/VirtualizedFourRowGrid.js | 10 +-
 .../DynamicNewsDetail/StockListItem.js        | 92 +++++++++++++------
 2 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
index d1304ccc..8b1df47a 100644
--- a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
+++ b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
@@ -73,7 +73,7 @@ const VirtualizedFourRowGrid = ({
    * 【核心逻辑1】无限滚动 + 顶部刷新 - 监听滚动事件，根据滚动位置自动加载数据或刷新
    *
    * 工作原理：
-   * 1. 向下滚动到 60% 位置时，触发 loadNextPage()
+   * 1. 向下滚动到 90% 位置时，触发 loadNextPage()
    *    - 调用 usePagination.loadNextPage()
    *    - 内部执行 handlePageChange(currentPage + 1)
    *    - dispatch(fetchDynamicNews({ page: nextPage }))
@@ -87,7 +87,7 @@ const VirtualizedFourRowGrid = ({
    *    - 与5分钟定时刷新协同工作
    *
    * 设计要点：
-   * - 60% 触发点：提前加载，避免滚动到底部时才出现加载状态
+   * - 90% 触发点：接近底部才加载，避免过早触发影响用户体验
    * - 防抖机制：isLoadingMore.current 防止重复触发
    * - 两层缓存：
    *   - Redux 缓存（HTTP层）：fourRowEvents 数组存储已加载数据，避免重复请求
@@ -107,9 +107,9 @@ const VirtualizedFourRowGrid = ({
       const { scrollTop, scrollHeight, clientHeight } = scrollElement;
       const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
 
-      // 向下滚动：滚动到 60% 时开始加载下一页
-      if (loadNextPage && hasMore && scrollPercentage > 0.6) {
-        console.log('%c📜 [无限滚动] 到达底部，加载下一页', 'color: #8B5CF6; font-weight: bold;');
+      // 向下滚动：滚动到 90% 时开始加载下一页（更接近底部，避免过早触发）
+      if (loadNextPage && hasMore && scrollPercentage > 0.9) {
+        console.log('%c📜 [无限滚动] 接近底部，加载下一页', 'color: #8B5CF6; font-weight: bold;');
         isLoadingMore.current = true;
         await loadNextPage();
         isLoadingMore.current = false;
diff --git a/src/views/Community/components/DynamicNewsDetail/StockListItem.js b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
index ac301bf9..135edbe4 100644
--- a/src/views/Community/components/DynamicNewsDetail/StockListItem.js
+++ b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
@@ -125,7 +125,7 @@ const StockListItem = ({
       transition="all 0.2s"
     >
       {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
-      <HStack spacing={3} align="stretch">
+      <HStack spacing={3} align="stretch" flexWrap="wrap">
         {/* 左侧：股票代码 + 名称 + 涨跌幅（垂直排列） - 收窄 */}
         <VStack
           align="stretch"
@@ -189,9 +189,11 @@ const StockListItem = ({
           </HStack>
         </VStack>
 
-        {/* 分时图 - 固定宽度 */}
+        {/* 分时图 - 响应式宽度 */}
         <Box
-          w="160px"
+          minW="140px"
+          maxW="160px"
+          flex="1"
           maxH="50px"
           h="auto"
           borderWidth="1px"
@@ -204,8 +206,9 @@ const StockListItem = ({
             setIsModalOpen(true);
           }}
           cursor="pointer"
-          flexShrink={0}
+          flexShrink={1}
           alignSelf="center"
+          overflow="hidden"
           _hover={{
             borderColor: useColorModeValue('blue.300', 'blue.500'),
             boxShadow: 'sm'
@@ -217,18 +220,23 @@ const StockListItem = ({
             color={useColorModeValue('blue.700', 'blue.200')}
             mb={1}
             fontWeight="semibold"
+            whiteSpace="nowrap"
           >
             📈 分时
           </Text>
-          <MiniTimelineChart
-            stockCode={stock.stock_code}
-            eventTime={eventTime}
-          />
+          <Box overflow="hidden">
+            <MiniTimelineChart
+              stockCode={stock.stock_code}
+              eventTime={eventTime}
+            />
+          </Box>
         </Box>
 
-        {/* K线图 - 固定宽度 */}
+        {/* K线图 - 响应式宽度 */}
         <Box
-          w="160px"
+          minW="140px"
+          maxW="160px"
+          flex="1"
           maxH="50px"
           h="auto"
           borderWidth="1px"
@@ -241,8 +249,9 @@ const StockListItem = ({
             setIsModalOpen(true);
           }}
           cursor="pointer"
-          flexShrink={0}
+          flexShrink={1}
           alignSelf="center"
+          overflow="hidden"
           _hover={{
             borderColor: useColorModeValue('purple.300', 'purple.500'),
             boxShadow: 'sm'
@@ -254,30 +263,61 @@ const StockListItem = ({
             color={useColorModeValue('purple.700', 'purple.200')}
             mb={1}
             fontWeight="semibold"
+            whiteSpace="nowrap"
           >
             📊 日线
           </Text>
-          <MiniKLineChart
-            stockCode={stock.stock_code}
-            eventTime={eventTime}
-          />
+          <Box overflow="hidden">
+            <MiniKLineChart
+              stockCode={stock.stock_code}
+              eventTime={eventTime}
+            />
+          </Box>
         </Box>
 
         {/* 关联描述 - 升级和降级处理 */}
         {stock.relation_desc && (
           <Box flex={1} minW={0}>
             {stock.relation_desc?.data ? (
-              // 升级：带引用来源的版本
-              <CitedContent
-                data={stock.relation_desc}
-                title=""
-                showAIBadge={true}
-                containerStyle={{
-                  backgroundColor: useColorModeValue('#f7fafc', 'rgba(45, 55, 72, 0.6)'),
-                  borderRadius: '8px',
-                  padding: '0',
-                }}
-              />
+              // 升级：带引用来源的版本 - 添加折叠功能
+              <Tooltip
+                label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
+                placement="top"
+                hasArrow
+                bg="gray.600"
+                color="white"
+                fontSize="xs"
+              >
+                <Box
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsDescExpanded(!isDescExpanded);
+                  }}
+                  cursor="pointer"
+                  px={3}
+                  py={2}
+                  bg={useColorModeValue('gray.50', 'gray.700')}
+                  borderRadius="md"
+                  _hover={{
+                    bg: useColorModeValue('gray.100', 'gray.600'),
+                  }}
+                  transition="background 0.2s"
+                  position="relative"
+                >
+                  <Collapse in={isDescExpanded} startingHeight={40}>
+                    <CitedContent
+                      data={stock.relation_desc}
+                      title=""
+                      showAIBadge={true}
+                      containerStyle={{
+                        backgroundColor: 'transparent',
+                        borderRadius: '0',
+                        padding: '0',
+                      }}
+                    />
+                  </Collapse>
+                </Box>
+              </Tooltip>
             ) : (
               // 降级：纯文本版本（保留展开/收起功能）
               <Tooltip