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) => (
+
+ ))}
+
+ )}
);