From a2a233bb0fc5b7b7d6c033c378b215d24fe0da64 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Mon, 22 Dec 2025 13:24:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0Company=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84UI=E4=B8=BAFUI=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RelatedConceptsSection/index.js           | 164 +++++++-----------
 1 file changed, 62 insertions(+), 102 deletions(-)

diff --git a/src/components/EventDetailPanel/RelatedConceptsSection/index.js b/src/components/EventDetailPanel/RelatedConceptsSection/index.js
index 23a4cab0..2cc2f335 100644
--- a/src/components/EventDetailPanel/RelatedConceptsSection/index.js
+++ b/src/components/EventDetailPanel/RelatedConceptsSection/index.js
@@ -1,5 +1,5 @@
 // src/components/EventDetailPanel/RelatedConceptsSection/index.js
-// 相关概念区组件 - 折叠手风琴样式
+// 相关概念区组件 - 便当盒网格布局
 
 import React, { useState, useEffect } from 'react';
 import {
@@ -10,94 +10,72 @@ import {
   Spinner,
   Text,
   Badge,
-  VStack,
+  SimpleGrid,
   HStack,
-  Icon,
-  Collapse,
+  Tooltip,
   useColorModeValue,
 } from '@chakra-ui/react';
-import { ChevronRightIcon, ChevronDownIcon } from '@chakra-ui/icons';
 import { useNavigate } from 'react-router-dom';
 import { logger } from '@utils/logger';
 import { getApiBase } from '@utils/apiConfig';
 
 /**
- * 单个概念项组件（手风琴项）
+ * 单个概念卡片组件（便当盒样式）
  */
-const ConceptItem = ({ concept, isExpanded, onToggle, onNavigate }) => {
-  const itemBg = useColorModeValue('white', 'gray.700');
-  const itemHoverBg = useColorModeValue('gray.50', 'gray.650');
-  const borderColor = useColorModeValue('gray.200', 'gray.600');
-  const conceptColor = useColorModeValue('blue.600', 'blue.300');
-  const reasonBg = useColorModeValue('blue.50', 'gray.800');
-  const reasonColor = useColorModeValue('gray.700', 'gray.200');
-  const iconColor = useColorModeValue('gray.500', 'gray.400');
+const ConceptCard = ({ concept, onNavigate, isLocked, onLockedClick }) => {
+  // 深色主题固定颜色
+  const cardBg = 'rgba(252, 129, 129, 0.15)';  // 浅红色背景
+  const cardHoverBg = 'rgba(252, 129, 129, 0.25)';
+  const borderColor = 'rgba(252, 129, 129, 0.3)';
+  const conceptColor = '#fc8181';  // 红色文字（与股票涨色一致）
+
+  const handleClick = () => {
+    if (isLocked && onLockedClick) {
+      onLockedClick();
+      return;
+    }
+    onNavigate(concept);
+  };
 
   return (
-    <Box
-      borderWidth="1px"
-      borderColor={borderColor}
+    <Tooltip
+      label={concept.reason || concept.concept}
+      placement="top"
+      hasArrow
+      bg="gray.800"
+      color="white"
+      p={2}
       borderRadius="md"
-      overflow="hidden"
-      bg={itemBg}
+      maxW="300px"
+      fontSize="xs"
     >
-      {/* 概念标题行 - 可点击展开 */}
-      <Flex
+      <Box
+        bg={cardBg}
+        borderWidth="1px"
+        borderColor={borderColor}
+        borderRadius="lg"
         px={3}
-        py={2.5}
+        py={2}
         cursor="pointer"
-        align="center"
-        justify="space-between"
-        _hover={{ bg: itemHoverBg }}
-        onClick={onToggle}
-        transition="background 0.2s"
+        onClick={handleClick}
+        _hover={{
+          bg: cardHoverBg,
+          transform: 'translateY(-1px)',
+          boxShadow: 'sm',
+        }}
+        transition="all 0.15s ease"
+        textAlign="center"
       >
-        <HStack spacing={2} flex={1}>
-          <Icon
-            as={isExpanded ? ChevronDownIcon : ChevronRightIcon}
-            color={iconColor}
-            boxSize={4}
-            transition="transform 0.2s"
-          />
-          <Text
-            fontSize="sm"
-            fontWeight="medium"
-            color={conceptColor}
-            cursor="pointer"
-            _hover={{ textDecoration: 'underline' }}
-            onClick={(e) => {
-              e.stopPropagation();
-              onNavigate(concept);
-            }}
-          >
-            {concept.concept}
-          </Text>
-          <Badge colorScheme="green" fontSize="xs" flexShrink={0}>
-            AI 分析
-          </Badge>
-        </HStack>
-      </Flex>
-
-      {/* 关联原因 - 可折叠 */}
-      <Collapse in={isExpanded} animateOpacity>
-        <Box
-          px={4}
-          py={3}
-          bg={reasonBg}
-          borderTop="1px solid"
-          borderTopColor={borderColor}
+        <Text
+          fontSize="sm"
+          fontWeight="semibold"
+          color={conceptColor}
+          noOfLines={1}
         >
-          <Text
-            fontSize="sm"
-            color={reasonColor}
-            lineHeight="1.8"
-            whiteSpace="pre-wrap"
-          >
-            {concept.reason || '暂无关联原因说明'}
-          </Text>
-        </Box>
-      </Collapse>
-    </Box>
+          {concept.concept}
+        </Text>
+      </Box>
+    </Tooltip>
   );
 };
 
@@ -120,16 +98,14 @@ const RelatedConceptsSection = ({
   const [concepts, setConcepts] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  // 记录每个概念的展开状态
-  const [expandedItems, setExpandedItems] = useState({});
   const navigate = useNavigate();
 
-  // 颜色配置
-  const sectionBg = useColorModeValue('gray.50', 'gray.750');
-  const headingColor = useColorModeValue('gray.700', 'gray.200');
-  const textColor = useColorModeValue('gray.600', 'gray.400');
-  const countBadgeBg = useColorModeValue('blue.100', 'blue.800');
-  const countBadgeColor = useColorModeValue('blue.700', 'blue.200');
+  // 颜色配置 - 使用深色主题固定颜色
+  const sectionBg = 'transparent';
+  const headingColor = '#e2e8f0';
+  const textColor = '#a0aec0';
+  const countBadgeBg = '#3182ce';
+  const countBadgeColor = '#ffffff';
 
   // 获取相关概念
   useEffect(() => {
@@ -162,10 +138,6 @@ const RelatedConceptsSection = ({
         const data = await response.json();
         if (data.success && Array.isArray(data.data)) {
           setConcepts(data.data);
-          // 默认展开第一个
-          if (data.data.length > 0) {
-            setExpandedItems({ 0: true });
-          }
         } else {
           setConcepts([]);
         }
@@ -182,18 +154,6 @@ const RelatedConceptsSection = ({
     fetchConcepts();
   }, [eventId]);
 
-  // 切换某个概念的展开状态
-  const toggleItem = (index) => {
-    if (isLocked && onLockedClick) {
-      onLockedClick();
-      return;
-    }
-    setExpandedItems(prev => ({
-      ...prev,
-      [index]: !prev[index]
-    }));
-  };
-
   // 跳转到概念中心
   const handleNavigate = (concept) => {
     navigate(`/concepts?q=${encodeURIComponent(concept.concept)}`);
@@ -237,7 +197,7 @@ const RelatedConceptsSection = ({
         </HStack>
       </Flex>
 
-      {/* 概念列表 - 手风琴样式 */}
+      {/* 概念列表 - 便当盒网格布局 */}
       {hasNoConcepts ? (
         <Box py={2}>
           {error ? (
@@ -247,17 +207,17 @@ const RelatedConceptsSection = ({
           )}
         </Box>
       ) : (
-        <VStack spacing={2} align="stretch">
+        <SimpleGrid columns={{ base: 2, sm: 3, md: 4 }} spacing={2}>
           {concepts.map((concept, index) => (
-            <ConceptItem
+            <ConceptCard
               key={concept.id || index}
               concept={concept}
-              isExpanded={!!expandedItems[index]}
-              onToggle={() => toggleItem(index)}
               onNavigate={handleNavigate}
+              isLocked={isLocked}
+              onLockedClick={onLockedClick}
             />
           ))}
-        </VStack>
+        </SimpleGrid>
       )}
     </Box>
   );