fix: 修复 CollapsibleHeader Box 组件导入缺失
This commit is contained in:
@@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {
|
||||||
|
Box,
|
||||||
Flex,
|
Flex,
|
||||||
HStack,
|
HStack,
|
||||||
Heading,
|
Heading,
|
||||||
@@ -19,8 +20,9 @@ import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
|
|||||||
* @param {boolean} props.isOpen - 是否展开
|
* @param {boolean} props.isOpen - 是否展开
|
||||||
* @param {Function} props.onToggle - 切换展开/收起的回调
|
* @param {Function} props.onToggle - 切换展开/收起的回调
|
||||||
* @param {number} props.count - 可选的数量徽章
|
* @param {number} props.count - 可选的数量徽章
|
||||||
|
* @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件
|
||||||
*/
|
*/
|
||||||
const CollapsibleHeader = ({ title, isOpen, onToggle, count = null }) => {
|
const CollapsibleHeader = ({ title, isOpen, onToggle, count = null, subscriptionBadge = null }) => {
|
||||||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
||||||
const hoverBg = useColorModeValue('gray.100', 'gray.700');
|
const hoverBg = useColorModeValue('gray.100', 'gray.700');
|
||||||
const headingColor = useColorModeValue('gray.700', 'gray.200');
|
const headingColor = useColorModeValue('gray.700', 'gray.200');
|
||||||
@@ -41,6 +43,11 @@ const CollapsibleHeader = ({ title, isOpen, onToggle, count = null }) => {
|
|||||||
<Heading size="sm" color={headingColor}>
|
<Heading size="sm" color={headingColor}>
|
||||||
{title}
|
{title}
|
||||||
</Heading>
|
</Heading>
|
||||||
|
{subscriptionBadge && (
|
||||||
|
<Box>
|
||||||
|
{subscriptionBadge}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
{count !== null && count > 0 && (
|
{count !== null && count > 0 && (
|
||||||
<Badge colorScheme="blue" borderRadius="full">
|
<Badge colorScheme="blue" borderRadius="full">
|
||||||
{count}
|
{count}
|
||||||
|
|||||||
Reference in New Issue
Block a user