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,
+                width: '100%',
-                height: 40,
+                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">
+        <VStack align="stretch" spacing={2}>
-          {/* 左侧：代码 + 名称 */}
+          {/* 第一行：股票代码 + 涨跌幅 + 操作按钮 */}
-          <Flex align="baseline" gap={2}>
+          <Flex justify="space-between" align="center">
-            <Text
+            {/* 左侧：代码 + 涨跌幅 */}
-              fontSize="md"
+            <Flex align="baseline" gap={2}>
-              fontWeight="bold"
+              <Text
-              color={codeColor}
+                fontSize="md"
-              cursor="pointer"
+                fontWeight="bold"
-              onClick={handleViewDetail}
+                color={codeColor}
-              _hover={{ textDecoration: 'underline' }}
+                cursor="pointer"
-            >
+                onClick={handleViewDetail}
-              {stock.stock_code}
+                _hover={{ textDecoration: 'underline' }}
-            </Text>
+              >
-            <Text fontSize="sm" color={nameColor}>
+                {stock.stock_code}
-              {stock.stock_name}
+              </Text>
-            </Text>
+              <Text
-            <Text
+                fontSize="sm"
-              fontSize="sm"
+                fontWeight="semibold"
-              fontWeight="semibold"
+                color={getChangeColor(change)}
-              color={getChangeColor(change)}
+              >
-            >
+                {formatChange(change)}
-              {formatChange(change)}
+              </Text>
-            </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}>
+          <Text
-            {onWatchlistToggle && (
+            fontSize="sm"
-              <IconButton
+            fontWeight="medium"
-                size="sm"
+            color={codeColor}
-                variant={isInWatchlist ? 'solid' : 'outline'}
+            bg={useColorModeValue('blue.50', 'blue.900')}
-                colorScheme={isInWatchlist ? 'yellow' : 'gray'}
+            px={2}
-                icon={<StarIcon />}
+            py={0.5}
-                onClick={handleWatchlistClick}
+            borderRadius="sm"
-                aria-label={isInWatchlist ? '已关注' : '加自选'}
+            width="fit-content"
-                title={isInWatchlist ? '已关注' : '加自选'}
+          >
-              />
+            {stock.stock_name}
-            )}
+          </Text>
-            <Button
+        </VStack>
-              size="sm"
-              colorScheme="blue"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleViewDetail();
-              }}
-            >
-              查看
-            </Button>
-          </Flex>
-        </Flex>
 
         {/* 分隔线 */}
         <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,
+                width: '100%',
-                height: 40,
+                height: 30,
                 cursor: onClick ? 'pointer' : 'default'
             }}
             onClick={onClick}