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 ? '收起' : '展开'}
+ />
+ )}
);
};