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 = ({ {/* 简单模式:横向卡片列表(总是显示) */} - - {concepts.map((concept, index) => ( - - ))} - - - - {/* 详细模式:卡片网格(可折叠) */} - - {/* 详细概念卡片网格 */} - + {hasNoConcepts ? ( + + {error ? ( + {error} + ) : ( + 暂无相关概念数据 + )} + + ) : ( + {concepts.map((concept, index) => ( - ))} - + + )} + + {/* 详细模式:卡片网格(可折叠) */} + + {hasNoConcepts ? ( + + {error ? ( + {error} + ) : ( + 暂无详细数据 + )} + + ) : ( + /* 详细概念卡片网格 */ + + {concepts.map((concept, index) => ( + + ))} + + )} );