From 57c4c3c9599c8062243807e8ba0b06e38f2f9684 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 31 Oct 2025 18:15:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8F=AF=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E6=A8=A1=E5=9D=97=E6=A0=87=E9=A2=98=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsDetail/CollapsibleHeader.js    | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js

diff --git a/src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js b/src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js
new file mode 100644
index 00000000..36fb2405
--- /dev/null
+++ b/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;