63fb8a3aa8
│ │ - 新增 showModeToggle, currentMode, onModeToggle 等 props │ │ │ │ - 支持显示模式切换按钮（"精简模式" / "查看详情"） │ │ │ │ - 根据模式动态显示按钮文案和图标
120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js
|
||
// 可折叠模块标题组件
|
||
|
||
import React from 'react';
|
||
import {
|
||
Box,
|
||
Flex,
|
||
HStack,
|
||
Heading,
|
||
Badge,
|
||
IconButton,
|
||
Button,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
|
||
|
||
/**
|
||
* 可折叠模块标题组件
|
||
* @param {Object} props
|
||
* @param {string} props.title - 标题文本
|
||
* @param {boolean} props.isOpen - 是否展开
|
||
* @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,
|
||
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 ? <ChevronUpIcon /> : <ChevronDownIcon />;
|
||
};
|
||
|
||
return (
|
||
<Flex
|
||
justify="space-between"
|
||
align="center"
|
||
cursor={showModeToggle ? 'default' : 'pointer'}
|
||
onClick={showModeToggle ? undefined : onToggle}
|
||
p={3}
|
||
bg={sectionBg}
|
||
borderRadius="md"
|
||
_hover={showModeToggle ? {} : { bg: hoverBg }}
|
||
transition="background 0.2s"
|
||
>
|
||
<HStack spacing={2}>
|
||
<Heading size="sm" color={headingColor}>
|
||
{title}
|
||
</Heading>
|
||
{subscriptionBadge && (
|
||
<Box>
|
||
{subscriptionBadge}
|
||
</Box>
|
||
)}
|
||
{count !== null && count > 0 && (
|
||
<Badge colorScheme="blue" borderRadius="full">
|
||
{count}
|
||
</Badge>
|
||
)}
|
||
</HStack>
|
||
|
||
{/* 只有 showModeToggle=true 时才显示模式切换按钮 */}
|
||
{showModeToggle && onModeToggle && (
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
colorScheme="blue"
|
||
rightIcon={getButtonIcon()}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onModeToggle(e);
|
||
}}
|
||
>
|
||
{getButtonText()}
|
||
</Button>
|
||
)}
|
||
|
||
{/* showModeToggle=false 时显示原有的 IconButton */}
|
||
{!showModeToggle && (
|
||
<IconButton
|
||
icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
|
||
size="sm"
|
||
variant="ghost"
|
||
aria-label={isOpen ? '收起' : '展开'}
|
||
/>
|
||
)}
|
||
</Flex>
|
||
);
|
||
};
|
||
|
||
export default CollapsibleHeader;
|