diff --git a/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js b/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js index ce01f031..3b34dfdc 100644 --- a/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js +++ b/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js @@ -1,7 +1,7 @@ // src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js // 通用可折叠区块组件 -import React from 'react'; +import React, { useState } from 'react'; import { Box, Collapse, @@ -19,7 +19,10 @@ import CollapsibleHeader from './CollapsibleHeader'; * @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件 * @param {boolean} props.isLocked - 是否锁定(不可展开) * @param {Function} props.onLockedClick - 锁定时点击的回调 - * @param {React.ReactNode} props.children - 子内容 + * @param {React.ReactNode} props.children - 详细内容 + * @param {React.ReactNode} props.simpleContent - 精简模式的内容(可选) + * @param {boolean} props.showModeToggle - 是否显示模式切换按钮(默认 false) + * @param {string} props.defaultMode - 默认模式:'detailed' | 'simple'(默认 'detailed') */ const CollapsibleSection = ({ title, @@ -29,10 +32,16 @@ const CollapsibleSection = ({ subscriptionBadge = null, isLocked = false, onLockedClick = null, - children + children, + simpleContent = null, + showModeToggle = false, + defaultMode = 'detailed' }) => { const sectionBg = useColorModeValue('gray.50', 'gray.750'); + // 模式状态:'detailed' | 'simple' + const [displayMode, setDisplayMode] = useState(defaultMode); + // 处理点击:如果锁定则触发锁定回调,否则触发正常切换 const handleToggle = () => { if (isLocked && onLockedClick) { @@ -42,15 +51,43 @@ const CollapsibleSection = ({ } }; - return ( - - + // 处理模式切换 + const handleModeToggle = (e) => { + e.stopPropagation(); // 阻止冒泡到标题栏的 onToggle + + if (isLocked && onLockedClick) { + // 如果被锁定,触发付费弹窗 + onLockedClick(); + return; + } + + if (displayMode === 'detailed') { + // 从详细模式切换到精简模式 + setDisplayMode('simple'); + } else { + // 从精简模式切换回详细模式 + setDisplayMode('detailed'); + // 切换回详细模式时,如果未展开则自动展开 + if (!isOpen && onToggle) { + onToggle(); + } + } + }; + + // 渲染精简模式 + const renderSimpleMode = () => { + if (!simpleContent) return null; + + return ( + + {simpleContent} + + ); + }; + + // 渲染详细模式 + const renderDetailedMode = () => { + return ( + ); + }; + + return ( + + + + {/* 根据当前模式渲染对应内容 */} + {displayMode === 'simple' ? renderSimpleMode() : renderDetailedMode()} ); };