diff --git a/src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js b/src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js index 95d32fd4..5d9175a2 100644 --- a/src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js +++ b/src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js @@ -9,6 +9,7 @@ import { Heading, Badge, IconButton, + Button, useColorModeValue, } from '@chakra-ui/react'; import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'; @@ -21,22 +22,53 @@ import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'; * @param {Function} props.onToggle - 切换展开/收起的回调 * @param {number} props.count - 可选的数量徽章 * @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件 + * @param {boolean} props.showModeToggle - 是否显示模式切换按钮(默认 false) + * @param {string} props.currentMode - 当前模式:'detailed' | 'simple' + * @param {Function} props.onModeToggle - 模式切换回调 + * @param {boolean} props.isLocked - 是否锁定(不可展开) */ -const CollapsibleHeader = ({ title, isOpen, onToggle, count = null, subscriptionBadge = null }) => { +const CollapsibleHeader = ({ + title, + isOpen, + onToggle, + count = null, + subscriptionBadge = null, + showModeToggle = false, + currentMode = 'detailed', + onModeToggle = null, + isLocked = false +}) => { const sectionBg = useColorModeValue('gray.50', 'gray.750'); const hoverBg = useColorModeValue('gray.100', 'gray.700'); const headingColor = useColorModeValue('gray.700', 'gray.200'); + // 获取按钮文案 + const getButtonText = () => { + if (currentMode === 'simple') { + return '查看详情'; // 简单模式时,按钮显示"查看详情" + } + return '精简模式'; // 详细模式时,按钮显示"精简模式" + }; + + // 获取按钮图标 + const getButtonIcon = () => { + if (currentMode === 'simple') { + return null; // 简单模式不显示图标 + } + // 详细模式:展开显示向上箭头,收起显示向下箭头 + return isOpen ? : ; + }; + return ( @@ -54,12 +86,32 @@ const CollapsibleHeader = ({ title, isOpen, onToggle, count = null, subscription )} - : } - size="sm" - variant="ghost" - aria-label={isOpen ? '收起' : '展开'} - /> + + {/* 只有 showModeToggle=true 时才显示模式切换按钮 */} + {showModeToggle && onModeToggle && ( + + )} + + {/* showModeToggle=false 时显示原有的 IconButton */} + {!showModeToggle && ( + : } + size="sm" + variant="ghost" + aria-label={isOpen ? '收起' : '展开'} + /> + )} ); };