feat: 添加可折叠模块标题组件

src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js

@@ -0,0 +1,60 @@
+// src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js
+// 可折叠模块标题组件
+
+import React from 'react';
+import {
+  Flex,
+  HStack,
+  Heading,
+  Badge,
+  IconButton,
+  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 - 可选的数量徽章
+ */
+const CollapsibleHeader = ({ title, isOpen, onToggle, count = null }) => {
+  const sectionBg = useColorModeValue('gray.50', 'gray.750');
+  const hoverBg = useColorModeValue('gray.100', 'gray.700');
+  const headingColor = useColorModeValue('gray.700', 'gray.200');
+
+  return (
+    <Flex
+      justify="space-between"
+      align="center"
+      cursor="pointer"
+      onClick={onToggle}
+      p={3}
+      bg={sectionBg}
+      borderRadius="md"
+      _hover={{ bg: hoverBg }}
+      transition="background 0.2s"
+    >
+      <HStack spacing={2}>
+        <Heading size="sm" color={headingColor}>
+          {title}
+        </Heading>
+        {count !== null && (
+          <Badge colorScheme="blue" borderRadius="full">
+            {count}
+          </Badge>
+        )}
+      </HStack>
+      <IconButton
+        icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        size="sm"
+        variant="ghost"
+        aria-label={isOpen ? '收起' : '展开'}
+      />
+    </Flex>
+  );
+};
+
+export default CollapsibleHeader;