From 4979293320f1951faf15d8f05883a8fcee0355d5 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 7 Nov 2025 19:46:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20RelatedConceptsSection=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=8F=97=E6=8E=A7=E6=A8=A1=E5=BC=8F=E5=92=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 isOpen, onToggle props 支持外部控制展开状态（受控模式）
- 添加 hasNoConcepts 判断，优化空数据处理逻辑
- 改进精简模式和详细模式的空状态显示
- 增强点击处理逻辑，支持受控/非受控两种模式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../DynamicNewsDetailPanel.js                 |  5 +-
 .../RelatedConceptsSection/index.js           | 76 ++++++++++++-------
 2 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
index 668d9ab9..120c989e 100644
--- a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
+++ b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
@@ -10,6 +10,8 @@ import {
   Text,
   Spinner,
   Center,
+  Wrap,
+  WrapItem,
   useColorModeValue,
   useToast,
 } from '@chakra-ui/react';
@@ -32,8 +34,9 @@ import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgrade
  * 动态新闻详情面板主组件
  * @param {Object} props
  * @param {Object} props.event - 事件对象（包含详情数据）
+ * @param {boolean} props.showHeader - 是否显示头部信息（默认 true）
  */
-const DynamicNewsDetailPanel = ({ event }) => {
+const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
   const dispatch = useDispatch();
   const { user } = useAuth();
   const cardBg = useColorModeValue('white', 'gray.800');
diff --git a/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js b/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js
index 009e8573..5df76c95 100644
--- a/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js
+++ b/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js
@@ -38,9 +38,13 @@ const RelatedConceptsSection = ({
   eventTime,
   subscriptionBadge = null,
   isLocked = false,
-  onLockedClick = null
+  onLockedClick = null,
+  isOpen = undefined,  // 新增：受控模式（外部控制展开状态）
+  onToggle = undefined  // 新增：受控模式（外部控制展开回调）
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  // 使用外部 isOpen，如果没有则使用内部 useState
+  const [internalExpanded, setInternalExpanded] = useState(false);
+  const isExpanded = onToggle !== undefined ? isOpen : internalExpanded;
   const [concepts, setConcepts] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -179,10 +183,8 @@ const RelatedConceptsSection = ({
     );
   }
 
-  // 如果没有概念，不渲染
-  if (!concepts || concepts.length === 0) {
-    return null;
-  }
+  // 判断是否有数据
+  const hasNoConcepts = !concepts || concepts.length === 0;
 
   /**
    * 根据相关度获取颜色（浅色背景 + 深色文字）
@@ -232,9 +234,12 @@ const RelatedConceptsSection = ({
               // 如果被锁定且有回调函数，触发付费弹窗
               if (isLocked && onLockedClick) {
                 onLockedClick();
+              } else if (onToggle !== undefined) {
+                // 受控模式：调用外部回调
+                onToggle();
               } else {
-                // 否则正常展开/收起
-                setIsExpanded(!isExpanded);
+                // 非受控模式：使用内部状态
+                setInternalExpanded(!internalExpanded);
               }
             }}
           >
@@ -249,30 +254,49 @@ const RelatedConceptsSection = ({
       </Box>
 
       {/* 简单模式：横向卡片列表（总是显示） */}
-      <Flex gap={2} flexWrap="wrap" mb={isExpanded ? 3 : 0}>
-        {concepts.map((concept, index) => (
-          <SimpleConceptCard
-            key={index}
-            concept={concept}
-            onClick={handleConceptClick}
-            getRelevanceColor={getRelevanceColor}
-          />
-        ))}
-      </Flex>
-  
-
-      {/* 详细模式：卡片网格（可折叠） */}
-      <Collapse in={isExpanded} animateOpacity>
-        {/* 详细概念卡片网格 */}
-        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
+      {hasNoConcepts ? (
+        <Box mb={isExpanded ? 3 : 0}>
+          {error ? (
+            <Text color="red.500" fontSize="sm">{error}</Text>
+          ) : (
+            <Text color={textColor} fontSize="sm">暂无相关概念数据</Text>
+          )}
+        </Box>
+      ) : (
+        <Flex gap={2} flexWrap="wrap" mb={isExpanded ? 3 : 0}>
           {concepts.map((concept, index) => (
-            <DetailedConceptCard
+            <SimpleConceptCard
               key={index}
               concept={concept}
               onClick={handleConceptClick}
+              getRelevanceColor={getRelevanceColor}
             />
           ))}
-        </SimpleGrid>
+        </Flex>
+      )}
+
+      {/* 详细模式：卡片网格（可折叠） */}
+      <Collapse in={isExpanded} animateOpacity>
+        {hasNoConcepts ? (
+          <Box py={4}>
+            {error ? (
+              <Text color="red.500" fontSize="sm" textAlign="center">{error}</Text>
+            ) : (
+              <Text color={textColor} fontSize="sm" textAlign="center">暂无详细数据</Text>
+            )}
+          </Box>
+        ) : (
+          /* 详细概念卡片网格 */
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
+            {concepts.map((concept, index) => (
+              <DetailedConceptCard
+                key={index}
+                concept={concept}
+                onClick={handleConceptClick}
+              />
+            ))}
+          </SimpleGrid>
+        )}
       </Collapse>
     </Box>
   );