feat: 添加相关概念组件

src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/ConceptStockItem.js

@@ -0,0 +1,65 @@
+// src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/ConceptStockItem.js
+// 概念股票列表项组件
+
+import React from 'react';
+import {
+  Box,
+  HStack,
+  Text,
+  Badge,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+/**
+ * 概念股票列表项组件
+ * @param {Object} props
+ * @param {Object} props.stock - 股票对象
+ *   - stock_name: 股票名称
+ *   - stock_code: 股票代码
+ *   - change_pct: 涨跌幅
+ *   - reason: 关联原因
+ */
+const ConceptStockItem = ({ stock }) => {
+  const sectionBg = useColorModeValue('gray.50', 'gray.750');
+  const conceptNameColor = useColorModeValue('gray.800', 'gray.100');
+  const stockCountColor = useColorModeValue('gray.500', 'gray.400');
+
+  const stockChangePct = parseFloat(stock.change_pct);
+  const stockChangeColor = stockChangePct > 0 ? 'red' : stockChangePct < 0 ? 'green' : 'gray';
+  const stockChangeSymbol = stockChangePct > 0 ? '+' : '';
+
+  return (
+    <Box
+      p={2}
+      borderRadius="md"
+      bg={sectionBg}
+      fontSize="xs"
+    >
+      <HStack justify="space-between" mb={1}>
+        <HStack spacing={2}>
+          <Text fontWeight="semibold" color={conceptNameColor}>
+            {stock.stock_name}
+          </Text>
+          <Badge size="sm" variant="outline">
+            {stock.stock_code}
+          </Badge>
+        </HStack>
+        {stock.change_pct && (
+          <Badge
+            colorScheme={stockChangeColor}
+            fontSize="xs"
+          >
+            {stockChangeSymbol}{stockChangePct.toFixed(2)}%
+          </Badge>
+        )}
+      </HStack>
+      {stock.reason && (
+        <Text fontSize="xs" color={stockCountColor} mt={1} noOfLines={2}>
+          {stock.reason}
+        </Text>
+      )}
+    </Box>
+  );
+};
+
+export default ConceptStockItem;