feat: k线图自适应

src/views/Community/components/DynamicNewsDetail/MiniKLineChart.js

@@ -161,8 +161,8 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
     return (
         <div
             style={{
-                width: 140,
-                height: 40,
+                width: '100%',
+                height: 30,
                 cursor: onClick ? 'pointer' : 'default'
             }}
             onClick={onClick}

src/views/Community/components/DynamicNewsDetail/StockListItem.js

@@ -115,57 +115,72 @@ const StockListItem = ({
       transition="all 0.2s"
     >
       <VStack align="stretch" spacing={3}>
-        {/* 顶部：股票代码 + 名称 + 操作按钮 */}
-        <Flex justify="space-between" align="center">
-          {/* 左侧：代码 + 名称 */}
-          <Flex align="baseline" gap={2}>
-            <Text
-              fontSize="md"
-              fontWeight="bold"
-              color={codeColor}
-              cursor="pointer"
-              onClick={handleViewDetail}
-              _hover={{ textDecoration: 'underline' }}
-            >
-              {stock.stock_code}
-            </Text>
-            <Text fontSize="sm" color={nameColor}>
-              {stock.stock_name}
-            </Text>
-            <Text
-              fontSize="sm"
-              fontWeight="semibold"
-              color={getChangeColor(change)}
-            >
-              {formatChange(change)}
-            </Text>
+        {/* 顶部：股票代码 + 名称 + 操作按钮（上下两行布局） */}
+        <VStack align="stretch" spacing={2}>
+          {/* 第一行：股票代码 + 涨跌幅 + 操作按钮 */}
+          <Flex justify="space-between" align="center">
+            {/* 左侧：代码 + 涨跌幅 */}
+            <Flex align="baseline" gap={2}>
+              <Text
+                fontSize="md"
+                fontWeight="bold"
+                color={codeColor}
+                cursor="pointer"
+                onClick={handleViewDetail}
+                _hover={{ textDecoration: 'underline' }}
+              >
+                {stock.stock_code}
+              </Text>
+              <Text
+                fontSize="sm"
+                fontWeight="semibold"
+                color={getChangeColor(change)}
+              >
+                {formatChange(change)}
+              </Text>
+            </Flex>
+
+            {/* 右侧：操作按钮 */}
+            <Flex gap={2}>
+              {onWatchlistToggle && (
+                <IconButton
+                  size="sm"
+                  variant={isInWatchlist ? 'solid' : 'outline'}
+                  colorScheme={isInWatchlist ? 'yellow' : 'gray'}
+                  icon={<StarIcon />}
+                  onClick={handleWatchlistClick}
+                  aria-label={isInWatchlist ? '已关注' : '加自选'}
+                  title={isInWatchlist ? '已关注' : '加自选'}
+                />
+              )}
+              <Button
+                size="sm"
+                colorScheme="blue"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleViewDetail();
+                }}
+                display={{ base: 'inline-flex', lg: 'none' }}
+              >
+                查看
+              </Button>
+            </Flex>
           </Flex>
 
-          {/* 右侧：操作按钮 */}
-          <Flex gap={2}>
-            {onWatchlistToggle && (
-              <IconButton
-                size="sm"
-                variant={isInWatchlist ? 'solid' : 'outline'}
-                colorScheme={isInWatchlist ? 'yellow' : 'gray'}
-                icon={<StarIcon />}
-                onClick={handleWatchlistClick}
-                aria-label={isInWatchlist ? '已关注' : '加自选'}
-                title={isInWatchlist ? '已关注' : '加自选'}
-              />
-            )}
-            <Button
-              size="sm"
-              colorScheme="blue"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleViewDetail();
-              }}
-            >
-              查看
-            </Button>
-          </Flex>
-        </Flex>
+          {/* 第二行：公司名称（彩色高亮） */}
+          <Text
+            fontSize="sm"
+            fontWeight="medium"
+            color={codeColor}
+            bg={useColorModeValue('blue.50', 'blue.900')}
+            px={2}
+            py={0.5}
+            borderRadius="sm"
+            width="fit-content"
+          >
+            {stock.stock_name}
+          </Text>
+        </VStack>
 
         {/* 分隔线 */}
         <Box borderTop="1px solid" borderColor={dividerColor} />
@@ -209,7 +224,19 @@ const StockListItem = ({
               关联描述：
             </Text>
             <Collapse in={isDescExpanded} startingHeight={40}>
-              <Text fontSize="sm" color={nameColor} lineHeight="1.6">
+              <Text
+                fontSize="sm"
+                color={nameColor}
+                lineHeight="1.6"
+                cursor={needTruncate ? "pointer" : "default"}
+                onClick={(e) => {
+                  if (needTruncate) {
+                    e.stopPropagation();
+                    setIsDescExpanded(!isDescExpanded);
+                  }
+                }}
+                _hover={needTruncate ? { opacity: 0.8 } : {}}
+              >
                 {relationText}
               </Text>
             </Collapse>

src/views/Community/components/StockDetailPanel/components/MiniTimelineChart.js

@@ -165,8 +165,8 @@ const MiniTimelineChart = React.memo(function MiniTimelineChart({ stockCode, eve
     return (
         <div
             style={{
-                width: 140,
-                height: 40,
+                width: '100%',
+                height: 30,
                 cursor: onClick ? 'pointer' : 'default'
             }}
             onClick={onClick}