事件中心UI优化

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

@@ -6,15 +6,12 @@ import {
   Box,
   Flex,
   VStack,
+  HStack,
   Text,
   Button,
   IconButton,
   Collapse,
-  Stat,
+  Tooltip,
-  StatLabel,
-  StatNumber,
-  StatHelpText,
-  StatArrow,
   useColorModeValue,
 } from '@chakra-ui/react';
 import { StarIcon } from '@chakra-ui/icons';
@@ -104,12 +101,23 @@ const StockListItem = ({
 
   return (
     <>
+    <Tooltip
+      label="点击查看股票详情"
+      placement="top"
+      hasArrow
+      bg="blue.600"
+      color="white"
+      fontSize="sm"
+      px={3}
+      py={2}
+      borderRadius="md"
+    >
       <Box
         bg={cardBg}
         borderWidth="2px"
         borderColor={borderColor}
         borderRadius="xl"
-      p={5}
+        p={4}
         onClick={handleViewDetail}
         cursor="pointer"
         position="relative"
@@ -130,17 +138,14 @@ const StockListItem = ({
         }}
         transition="all 0.3s ease-in-out"
       >
-      {/* 横向布局：左侧基础信息 + 中间图表 + 右侧操作按钮 */}
+        {/* 单行布局：股票代码 + 名称 + 涨跌幅 + 分时图 + K线图 */}
-      <Flex direction={{ base: 'column', lg: 'row' }} gap={4} align="stretch">
+        <HStack spacing={4} align="center">
-        {/* 左侧：基础信息区（股票代码、名称、涨跌幅） */}
+          {/* 左侧：股票代码 + 名称 + 自选按钮 */}
-        <Flex direction="column" minW={{ base: 'auto', lg: '200px' }} maxW={{ base: 'auto', lg: '240px' }} gap={2}>
+          <HStack spacing={3} minW="200px" maxW="240px">
-          {/* 股票代码和名称 */}
-          <VStack align="stretch" spacing={2}>
-            <Flex align="center" gap={2}>
             <Box
               bgGradient="linear(to-r, blue.400, blue.600)"
               px={3}
-                py={1}
+              py={1.5}
               borderRadius="md"
               boxShadow="sm"
             >
@@ -148,14 +153,19 @@ const StockListItem = ({
                 fontSize="md"
                 fontWeight="bold"
                 color="white"
-                  cursor="pointer"
-                  onClick={handleViewDetail}
-                  _hover={{ opacity: 0.8 }}
-                  transition="opacity 0.2s"
               >
                 {stock.stock_code}
               </Text>
             </Box>
+            <Text
+              fontSize="md"
+              fontWeight="semibold"
+              color={nameColor}
+              noOfLines={1}
+              flex={1}
+            >
+              {stock.stock_name}
+            </Text>
             {onWatchlistToggle && (
               <IconButton
                 size="sm"
@@ -166,48 +176,33 @@ const StockListItem = ({
                 aria-label={isInWatchlist ? '已关注' : '加自选'}
                 title={isInWatchlist ? '已关注' : '加自选'}
                 borderRadius="full"
+                flexShrink={0}
               />
             )}
-            </Flex>
+          </HStack>
-            <Text
-              fontSize="md"
-              fontWeight="semibold"
-              color={nameColor}
-              noOfLines={1}
-            >
-              {stock.stock_name}
-            </Text>
-          </VStack>
 
-          {/* 涨跌幅 - 使用 Stat 组件 */}
+          {/* 涨跌幅 */}
-          <Stat
+          <Box
             bg={useColorModeValue('gray.50', 'gray.700')}
-            px={3}
+            px={4}
             py={2}
             borderRadius="lg"
             boxShadow="sm"
+            minW="120px"
+            textAlign="center"
           >
-            <StatLabel fontSize="xs" color={descColor}>
+            <Text fontSize="xs" color={descColor} mb={1}>
               涨跌幅
-            </StatLabel>
+            </Text>
-            <StatNumber
+            <Text
               fontSize="2xl"
               fontWeight="bold"
               color={getChangeColor(change)}
             >
               {formatChange(change)}
-            </StatNumber>
+            </Text>
-            {change !== null && change !== undefined && !isNaN(change) && (
+          </Box>
-              <StatHelpText mb={0}>
-                <StatArrow type={change >= 0 ? 'increase' : 'decrease'} />
-                {Math.abs(change).toFixed(2)}%
-              </StatHelpText>
-            )}
-          </Stat>
-        </Flex>
 
-        {/* 中间：图表区（分时图 + K线图） */}
-        <Flex flex={1} gap={3} onClick={(e) => e.stopPropagation()} minW={0}>
           {/* 分时图 */}
           <Box
             flex={1}
@@ -215,9 +210,10 @@ const StockListItem = ({
             borderWidth="1px"
             borderColor={useColorModeValue('blue.100', 'blue.700')}
             borderRadius="lg"
-            p={3}
+            p={2}
             bg={useColorModeValue('blue.50', 'blue.900')}
             transition="all 0.2s"
+            onClick={(e) => e.stopPropagation()}
             _hover={{
               borderColor: useColorModeValue('blue.300', 'blue.500'),
               boxShadow: 'md'
@@ -226,7 +222,7 @@ const StockListItem = ({
             <Text
               fontSize="xs"
               color={useColorModeValue('blue.700', 'blue.200')}
-              mb={2}
+              mb={1}
               fontWeight="bold"
               textTransform="uppercase"
               letterSpacing="wide"
@@ -247,9 +243,10 @@ const StockListItem = ({
             borderWidth="1px"
             borderColor={useColorModeValue('purple.100', 'purple.700')}
             borderRadius="lg"
-            p={3}
+            p={2}
             bg={useColorModeValue('purple.50', 'purple.900')}
             transition="all 0.2s"
+            onClick={(e) => e.stopPropagation()}
             _hover={{
               borderColor: useColorModeValue('purple.300', 'purple.500'),
               boxShadow: 'md'
@@ -258,7 +255,7 @@ const StockListItem = ({
             <Text
               fontSize="xs"
               color={useColorModeValue('purple.700', 'purple.200')}
-              mb={2}
+              mb={1}
               fontWeight="bold"
               textTransform="uppercase"
               letterSpacing="wide"
@@ -271,34 +268,7 @@ const StockListItem = ({
               onClick={() => setIsModalOpen(true)}
             />
           </Box>
-        </Flex>
+        </HStack>
-
-        {/* 右侧：操作按钮 */}
-        <Flex direction="column" gap={2} minW={{ base: 'auto', lg: '120px' }} justify="center">
-          <Button
-            size="md"
-            bgGradient="linear(to-r, blue.400, blue.600)"
-            color="white"
-            _hover={{
-              bgGradient: "linear(to-r, blue.500, blue.700)",
-              transform: "scale(1.05)",
-            }}
-            _active={{
-              bgGradient: "linear(to-r, blue.600, blue.800)",
-            }}
-            boxShadow="md"
-            borderRadius="lg"
-            fontWeight="bold"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleViewDetail();
-            }}
-            transition="all 0.2s"
-          >
-            查看详情 →
-          </Button>
-        </Flex>
-      </Flex>
 
         {/* 关联描述（折叠区域） */}
         {relationText && relationText !== '--' && (
@@ -343,6 +313,7 @@ const StockListItem = ({
           </Box>
         )}
       </Box>
+    </Tooltip>
 
     {/* 股票详情弹窗 - 未打开时不渲染 */}
     {isModalOpen && (