事件中心UI优化

2025-11-07 10:31:42 +08:00
parent 663d73609a
commit 2a122b0013
3 changed files with 216 additions and 27 deletions
--- a/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
+++ b/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
@@ -0,0 +1,137 @@
+// src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
+// 精简模式股票卡片组件（浮动卡片样式）
+
+import React from 'react';
+import {
+  Box,
+  Text,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+/**
+ * 精简模式股票卡片组件
+ * @param {Object} props
+ * @param {Object} props.stock - 股票对象
+ * @param {Object} props.quote - 股票行情数据（可选）
+ */
+const CompactStockItem = ({ stock, quote = null }) => {
+  const nameColor = useColorModeValue('gray.700', 'gray.300');
+
+  const handleViewDetail = () => {
+    const stockCode = stock.stock_code.split('.')[0];
+    window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
+  };
+
+  // 格式化涨跌幅显示
+  const formatChange = (value) => {
+    if (value === null || value === undefined || isNaN(value)) return '--';
+    const prefix = value > 0 ? '+' : '';
+    return `${prefix}${parseFloat(value).toFixed(2)}%`;
+  };
+
+  // 获取涨跌幅颜色（涨红跌绿）
+  const getChangeColor = (value) => {
+    const num = parseFloat(value);
+    if (isNaN(num) || num === 0) return 'gray.500';
+    return num > 0 ? 'red.500' : 'green.500';
+  };
+
+  // 获取背景渐变色（涨红跌绿）
+  const getBackgroundGradient = (value) => {
+    const num = parseFloat(value);
+    if (isNaN(num) || num === 0) {
+      return 'linear(to-br, gray.50, gray.100)';
+    }
+    return num > 0
+      ? 'linear(to-br, red.50, red.100)'
+      : 'linear(to-br, green.50, green.100)';
+  };
+
+  // 获取边框颜色
+  const getBorderColor = (value) => {
+    const num = parseFloat(value);
+    if (isNaN(num) || num === 0) return 'gray.300';
+    return num > 0 ? 'red.300' : 'green.300';
+  };
+
+  // 获取涨跌幅数据（优先使用 quote，fallback 到 stock）
+  const change = quote?.change ?? stock.daily_change ?? null;
+
+  return (
+    <Tooltip
+      label={`${stock.stock_name} - 点击查看详情`}
+      placement="top"
+      hasArrow
+      bg="gray.700"
+      color="white"
+      fontSize="xs"
+    >
+      <Box
+        bgGradient={getBackgroundGradient(change)}
+        borderWidth="3px"
+        borderColor={getBorderColor(change)}
+        borderRadius="2xl"
+        p={4}
+        onClick={handleViewDetail}
+        cursor="pointer"
+        boxShadow="lg"
+        position="relative"
+        overflow="hidden"
+        _before={{
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: '4px',
+          bg: getBorderColor(change),
+        }}
+        _hover={{
+          boxShadow: '2xl',
+          transform: 'translateY(-4px) scale(1.02)',
+        }}
+        transition="all 0.3s ease-in-out"
+        display="inline-block"
+        minW="150px"
+      >
+        {/* 股票代码 */}
+        <Text
+          fontSize="md"
+          fontWeight="bold"
+          color={getChangeColor(change)}
+          mb={2}
+          textAlign="center"
+        >
+          {stock.stock_code}
+        </Text>
+
+        {/* 涨跌幅 - 超大号显示 */}
+        <Text
+          fontSize="3xl"
+          fontWeight="black"
+          color={getChangeColor(change)}
+          textAlign="center"
+          lineHeight="1"
+          textShadow="0 1px 2px rgba(0,0,0,0.1)"
+        >
+          {formatChange(change)}
+        </Text>
+
+        {/* 股票名称（小字） */}
+        <Text
+          fontSize="xs"
+          color={nameColor}
+          mt={2}
+          textAlign="center"
+          noOfLines={1}
+          fontWeight="medium"
+        >
+          {stock.stock_name}
+        </Text>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default CompactStockItem;