事件中心UI优化

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

@@ -6,15 +6,12 @@ import {
   Box,
   Flex,
   VStack,
+  HStack,
   Text,
   Button,
   IconButton,
   Collapse,
-  Stat,
-  StatLabel,
-  StatNumber,
-  StatHelpText,
-  StatArrow,
+  Tooltip,
   useColorModeValue,
 } from '@chakra-ui/react';
 import { StarIcon } from '@chakra-ui/icons';
@@ -104,110 +101,108 @@ const StockListItem = ({
 
   return (
     <>
-    <Box
-      bg={cardBg}
-      borderWidth="2px"
-      borderColor={borderColor}
-      borderRadius="xl"
-      p={5}
-      onClick={handleViewDetail}
-      cursor="pointer"
-      position="relative"
-      overflow="hidden"
-      _before={{
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '4px',
-        bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
-      }}
-      _hover={{
-        boxShadow: '2xl',
-        borderColor: 'blue.400',
-        transform: 'translateY(-4px)',
-      }}
-      transition="all 0.3s ease-in-out"
+    <Tooltip
+      label="点击查看股票详情"
+      placement="top"
+      hasArrow
+      bg="blue.600"
+      color="white"
+      fontSize="sm"
+      px={3}
+      py={2}
+      borderRadius="md"
     >
-      {/* 横向布局：左侧基础信息 + 中间图表 + 右侧操作按钮 */}
-      <Flex direction={{ base: 'column', lg: 'row' }} gap={4} align="stretch">
-        {/* 左侧：基础信息区（股票代码、名称、涨跌幅） */}
-        <Flex direction="column" minW={{ base: 'auto', lg: '200px' }} maxW={{ base: 'auto', lg: '240px' }} gap={2}>
-          {/* 股票代码和名称 */}
-          <VStack align="stretch" spacing={2}>
-            <Flex align="center" gap={2}>
-              <Box
-                bgGradient="linear(to-r, blue.400, blue.600)"
-                px={3}
-                py={1}
-                borderRadius="md"
-                boxShadow="sm"
+      <Box
+        bg={cardBg}
+        borderWidth="2px"
+        borderColor={borderColor}
+        borderRadius="xl"
+        p={4}
+        onClick={handleViewDetail}
+        cursor="pointer"
+        position="relative"
+        overflow="hidden"
+        _before={{
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: '4px',
+          bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
+        }}
+        _hover={{
+          boxShadow: '2xl',
+          borderColor: 'blue.400',
+          transform: 'translateY(-4px)',
+        }}
+        transition="all 0.3s ease-in-out"
+      >
+        {/* 单行布局：股票代码 + 名称 + 涨跌幅 + 分时图 + K线图 */}
+        <HStack spacing={4} align="center">
+          {/* 左侧：股票代码 + 名称 + 自选按钮 */}
+          <HStack spacing={3} minW="200px" maxW="240px">
+            <Box
+              bgGradient="linear(to-r, blue.400, blue.600)"
+              px={3}
+              py={1.5}
+              borderRadius="md"
+              boxShadow="sm"
+            >
+              <Text
+                fontSize="md"
+                fontWeight="bold"
+                color="white"
               >
-                <Text
-                  fontSize="md"
-                  fontWeight="bold"
-                  color="white"
-                  cursor="pointer"
-                  onClick={handleViewDetail}
-                  _hover={{ opacity: 0.8 }}
-                  transition="opacity 0.2s"
-                >
-                  {stock.stock_code}
-                </Text>
-              </Box>
-              {onWatchlistToggle && (
-                <IconButton
-                  size="sm"
-                  variant={isInWatchlist ? 'solid' : 'outline'}
-                  colorScheme={isInWatchlist ? 'yellow' : 'gray'}
-                  icon={<StarIcon />}
-                  onClick={handleWatchlistClick}
-                  aria-label={isInWatchlist ? '已关注' : '加自选'}
-                  title={isInWatchlist ? '已关注' : '加自选'}
-                  borderRadius="full"
-                />
-              )}
-            </Flex>
+                {stock.stock_code}
+              </Text>
+            </Box>
             <Text
               fontSize="md"
               fontWeight="semibold"
               color={nameColor}
               noOfLines={1}
+              flex={1}
             >
               {stock.stock_name}
             </Text>
-          </VStack>
+            {onWatchlistToggle && (
+              <IconButton
+                size="sm"
+                variant={isInWatchlist ? 'solid' : 'outline'}
+                colorScheme={isInWatchlist ? 'yellow' : 'gray'}
+                icon={<StarIcon />}
+                onClick={handleWatchlistClick}
+                aria-label={isInWatchlist ? '已关注' : '加自选'}
+                title={isInWatchlist ? '已关注' : '加自选'}
+                borderRadius="full"
+                flexShrink={0}
+              />
+            )}
+          </HStack>
 
-          {/* 涨跌幅 - 使用 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>
-            <StatNumber
+            </Text>
+            <Text
               fontSize="2xl"
               fontWeight="bold"
               color={getChangeColor(change)}
             >
               {formatChange(change)}
-            </StatNumber>
-            {change !== null && change !== undefined && !isNaN(change) && (
-              <StatHelpText mb={0}>
-                <StatArrow type={change >= 0 ? 'increase' : 'decrease'} />
-                {Math.abs(change).toFixed(2)}%
-              </StatHelpText>
-            )}
-          </Stat>
-        </Flex>
+            </Text>
+          </Box>
 
-        {/* 中间：图表区（分时图 + 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,78 +268,52 @@ 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 !== '--' && (
-        <Box mt={4} pt={4} borderTop="1px solid" borderColor={dividerColor}>
-          <Flex justify="space-between" align="center" mb={2}>
-            <Text fontSize="sm" fontWeight="semibold" color={descColor}>
-              关联描述
-            </Text>
-            {needTruncate && (
-              <Button
-                size="xs"
-                variant="ghost"
-                colorScheme="blue"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setIsDescExpanded(!isDescExpanded);
-                }}
+        {/* 关联描述（折叠区域） */}
+        {relationText && relationText !== '--' && (
+          <Box mt={4} pt={4} borderTop="1px solid" borderColor={dividerColor}>
+            <Flex justify="space-between" align="center" mb={2}>
+              <Text fontSize="sm" fontWeight="semibold" color={descColor}>
+                关联描述
+              </Text>
+              {needTruncate && (
+                <Button
+                  size="xs"
+                  variant="ghost"
+                  colorScheme="blue"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsDescExpanded(!isDescExpanded);
+                  }}
+                >
+                  {isDescExpanded ? '收起 ▲' : '展开 ▼'}
+                </Button>
+              )}
+            </Flex>
+            <Collapse in={isDescExpanded} startingHeight={needTruncate ? 40 : undefined}>
+              <Text
+                fontSize="sm"
+                color={nameColor}
+                lineHeight="1.8"
               >
-                {isDescExpanded ? '收起 ▲' : '展开 ▼'}
-              </Button>
-            )}
-          </Flex>
-          <Collapse in={isDescExpanded} startingHeight={needTruncate ? 40 : undefined}>
-            <Text
-              fontSize="sm"
-              color={nameColor}
-              lineHeight="1.8"
-            >
-              {relationText}
-            </Text>
-          </Collapse>
+                {relationText}
+              </Text>
+            </Collapse>
 
-          {/* 合规提示 */}
-          <Text
-            fontSize="xs"
-            color="gray.500"
-            mt={3}
-            fontStyle="italic"
-          >
-            ⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议
-          </Text>
-        </Box>
-      )}
-    </Box>
+            {/* 合规提示 */}
+            <Text
+              fontSize="xs"
+              color="gray.500"
+              mt={3}
+              fontStyle="italic"
+            >
+              ⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议
+            </Text>
+          </Box>
+        )}
+      </Box>
+    </Tooltip>
 
     {/* 股票详情弹窗 - 未打开时不渲染 */}
     {isModalOpen && (