feat: 事件详情权限加上权限校验

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

@@ -4,8 +4,10 @@
 import React from 'react';
 import {
   Flex,
+  VStack,
   Box,
   Text,
+  Badge,
   useColorModeValue,
 } from '@chakra-ui/react';
 
@@ -27,10 +29,15 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
   const relevanceScore = Math.round((concept.score || 0) * 100);
   const relevanceColors = getRelevanceColor(relevanceScore);
 
+  // 涨跌幅数据
+  const changePct = concept.price_info?.avg_change_pct ? parseFloat(concept.price_info.avg_change_pct) : null;
+  const changeColor = changePct !== null ? (changePct > 0 ? 'red' : changePct < 0 ? 'green' : 'gray') : null;
+  const changeSymbol = changePct !== null && changePct > 0 ? '+' : '';
+
   return (
-    <Flex
-      align="center"
-      justify="space-between"
+    <VStack
+      align="stretch"
+      spacing={2}
       bg={cardBg}
       borderWidth="1px"
       borderColor={borderColor}
@@ -46,28 +53,50 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
       }}
       onClick={() => onClick(concept)}
     >
-      {/* 左侧：概念名 + 数量 */}
-      <Text fontSize="sm" fontWeight="normal" color={conceptNameColor} mr={3}>
+      {/* 第一行：概念名 + 数量（允许折行） */}
+      <Text
+        fontSize="sm"
+        fontWeight="normal"
+        color={conceptNameColor}
+        wordBreak="break-word"
+        lineHeight="1.4"
+      >
         {concept.concept}{' '}
         <Text as="span" color="gray.500">
           ({concept.stock_count})
         </Text>
       </Text>
 
-      {/* 右侧：相关度标签 */}
-      <Box
-        bg={relevanceColors.bg}
-        color={relevanceColors.color}
-        px={3}
-        py={1}
-        borderRadius="md"
-        flexShrink={0}
-      >
-        <Text fontSize="xs" fontWeight="medium" whiteSpace="nowrap">
-          相关度: {relevanceScore}%
-        </Text>
-      </Box>
-    </Flex>
+      {/* 第二行：相关度 + 涨跌幅 */}
+      <Flex justify="space-between" align="center" gap={2} flexWrap="wrap">
+        {/* 相关度标签 */}
+        <Box
+          bg={relevanceColors.bg}
+          color={relevanceColors.color}
+          px={2}
+          py={0.5}
+          borderRadius="sm"
+          flexShrink={0}
+        >
+          <Text fontSize="xs" fontWeight="medium" whiteSpace="nowrap">
+            相关度: {relevanceScore}%
+          </Text>
+        </Box>
+
+        {/* 涨跌幅数据 */}
+        {changePct !== null && (
+          <Badge
+            colorScheme={changeColor}
+            fontSize="xs"
+            px={2}
+            py={0.5}
+            flexShrink={0}
+          >
+            {changeSymbol}{changePct.toFixed(2)}%
+          </Badge>
+        )}
+      </Flex>
+    </VStack>
   );
 };