事件中心UI优化

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

@@ -101,25 +101,12 @@ 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"
+      borderWidth="1px"
       borderColor={borderColor}
-        borderRadius="xl"
+      borderRadius="lg"
-        p={4}
+      p={3}
-        onClick={handleViewDetail}
-        cursor="pointer"
       position="relative"
       overflow="hidden"
       _before={{
@@ -128,192 +115,187 @@ const StockListItem = ({
         top: 0,
         left: 0,
         right: 0,
-          height: '4px',
+        height: '3px',
         bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
       }}
       _hover={{
-          boxShadow: '2xl',
+        boxShadow: 'lg',
-          borderColor: 'blue.400',
+        borderColor: 'blue.300',
-          transform: 'translateY(-4px)',
       }}
-        transition="all 0.3s ease-in-out"
+      transition="all 0.2s"
     >
-        {/* 单行布局：股票代码 + 名称 + 涨跌幅 + 分时图 + K线图 */}
+      {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
-        <HStack spacing={4} align="center">
+      <HStack spacing={3} align="stretch">
-          {/* 左侧：股票代码 + 名称 + 自选按钮 */}
+        {/* 左侧：股票名称 + 涨跌幅（垂直排列） */}
-          <HStack spacing={3} minW="200px" maxW="240px">
+        <VStack
-            <Box
+          align="stretch"
-              bgGradient="linear(to-r, blue.400, blue.600)"
+          spacing={1}
-              px={3}
+          minW="140px"
-              py={1.5}
+          maxW="160px"
-              borderRadius="md"
+          justify="center"
-              boxShadow="sm"
+        >
+          <Tooltip
+            label="点击查看股票详情"
+            placement="top"
+            hasArrow
+            bg="blue.600"
+            color="white"
+            fontSize="xs"
           >
             <Text
               fontSize="md"
               fontWeight="bold"
-                color="white"
+              color={codeColor}
-              >
-                {stock.stock_code}
-              </Text>
-            </Box>
-            <Text
-              fontSize="md"
-              fontWeight="semibold"
-              color={nameColor}
               noOfLines={1}
-              flex={1}
+              cursor="pointer"
+              onClick={handleViewDetail}
+              _hover={{ textDecoration: 'underline' }}
             >
               {stock.stock_name}
             </Text>
-            {onWatchlistToggle && (
+          </Tooltip>
-              <IconButton
+          <HStack spacing={2} align="center">
-                size="sm"
-                variant={isInWatchlist ? 'solid' : 'outline'}
-                colorScheme={isInWatchlist ? 'yellow' : 'gray'}
-                icon={<StarIcon />}
-                onClick={handleWatchlistClick}
-                aria-label={isInWatchlist ? '已关注' : '加自选'}
-                title={isInWatchlist ? '已关注' : '加自选'}
-                borderRadius="full"
-                flexShrink={0}
-              />
-            )}
-          </HStack>
-
-          {/* 涨跌幅 */}
-          <Box
-            bg={useColorModeValue('gray.50', 'gray.700')}
-            px={4}
-            py={2}
-            borderRadius="lg"
-            boxShadow="sm"
-            minW="120px"
-            textAlign="center"
-          >
-            <Text fontSize="xs" color={descColor} mb={1}>
-              涨跌幅
-            </Text>
             <Text
-              fontSize="2xl"
+              fontSize="xl"
               fontWeight="bold"
               color={getChangeColor(change)}
             >
               {formatChange(change)}
             </Text>
-          </Box>
+            {onWatchlistToggle && (
+              <IconButton
+                size="xs"
+                variant={isInWatchlist ? 'solid' : 'ghost'}
+                colorScheme={isInWatchlist ? 'yellow' : 'gray'}
+                icon={<StarIcon />}
+                onClick={handleWatchlistClick}
+                aria-label={isInWatchlist ? '已关注' : '加自选'}
+                borderRadius="full"
+              />
+            )}
+          </HStack>
+        </VStack>
 
         {/* 分时图 */}
         <Box
-            flex={1}
+          w="180px"
-            minW={0}
           borderWidth="1px"
           borderColor={useColorModeValue('blue.100', 'blue.700')}
-            borderRadius="lg"
+          borderRadius="md"
           p={2}
           bg={useColorModeValue('blue.50', 'blue.900')}
-            transition="all 0.2s"
+          onClick={(e) => {
-            onClick={(e) => e.stopPropagation()}
+            e.stopPropagation();
+            setIsModalOpen(true);
+          }}
+          cursor="pointer"
           _hover={{
             borderColor: useColorModeValue('blue.300', 'blue.500'),
-              boxShadow: 'md'
+            boxShadow: 'sm'
           }}
+          transition="all 0.2s"
         >
           <Text
             fontSize="xs"
             color={useColorModeValue('blue.700', 'blue.200')}
             mb={1}
-              fontWeight="bold"
+            fontWeight="semibold"
-              textTransform="uppercase"
-              letterSpacing="wide"
           >
-              📈 分时走势
+            📈 分时
           </Text>
           <MiniTimelineChart
             stockCode={stock.stock_code}
             eventTime={eventTime}
-              onClick={() => setIsModalOpen(true)}
           />
         </Box>
 
         {/* K线图 */}
         <Box
-            flex={1}
+          w="180px"
-            minW={0}
           borderWidth="1px"
           borderColor={useColorModeValue('purple.100', 'purple.700')}
-            borderRadius="lg"
+          borderRadius="md"
           p={2}
           bg={useColorModeValue('purple.50', 'purple.900')}
-            transition="all 0.2s"
+          onClick={(e) => {
-            onClick={(e) => e.stopPropagation()}
+            e.stopPropagation();
+            setIsModalOpen(true);
+          }}
+          cursor="pointer"
           _hover={{
             borderColor: useColorModeValue('purple.300', 'purple.500'),
-              boxShadow: 'md'
+            boxShadow: 'sm'
           }}
+          transition="all 0.2s"
         >
           <Text
             fontSize="xs"
             color={useColorModeValue('purple.700', 'purple.200')}
             mb={1}
-              fontWeight="bold"
+            fontWeight="semibold"
-              textTransform="uppercase"
-              letterSpacing="wide"
           >
-              📊 K线走势
+            📊 日线
           </Text>
           <MiniKLineChart
             stockCode={stock.stock_code}
             eventTime={eventTime}
-              onClick={() => setIsModalOpen(true)}
           />
         </Box>
-        </HStack>
 
-        {/* 关联描述（折叠区域） */}
+        {/* 关联描述（单行显示，点击展开） */}
         {relationText && relationText !== '--' && (
-          <Box mt={4} pt={4} borderTop="1px solid" borderColor={dividerColor}>
+          <Tooltip
-            <Flex justify="space-between" align="center" mb={2}>
+            label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
-              <Text fontSize="sm" fontWeight="semibold" color={descColor}>
+            placement="top"
-                关联描述
+            hasArrow
-              </Text>
+            bg="gray.600"
-              {needTruncate && (
+            color="white"
-                <Button
+            fontSize="xs"
-                  size="xs"
+          >
-                  variant="ghost"
+            <Box
-                  colorScheme="blue"
+              flex={1}
+              minW={0}
               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"
             >
-                  {isDescExpanded ? '收起 ▲' : '展开 ▼'}
+              <Text fontSize="xs" color={descColor} fontWeight="semibold" mb={1}>
-                </Button>
+                关联描述
-              )}
+              </Text>
-            </Flex>
+              <Collapse in={isDescExpanded} startingHeight={20}>
-            <Collapse in={isDescExpanded} startingHeight={needTruncate ? 40 : undefined}>
                 <Text
                   fontSize="sm"
                   color={nameColor}
-                lineHeight="1.8"
+                  lineHeight="1.6"
                 >
                   {relationText}
                 </Text>
               </Collapse>
-
+              {isDescExpanded && (
-            {/* 合规提示 */}
                 <Text
                   fontSize="xs"
                   color="gray.500"
-              mt={3}
+                  mt={2}
                   fontStyle="italic"
                 >
-              ⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议
+                  ⚠️ AI生成，仅供参考
                 </Text>
-          </Box>
               )}
             </Box>
           </Tooltip>
+        )}
+      </HStack>
+    </Box>
 
     {/* 股票详情弹窗 - 未打开时不渲染 */}
     {isModalOpen && (