From 63fb8a3aa8586753070a778a250ef1a0e9d6d9e4 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 7 Nov 2025 19:31:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=9F=E8=83=BD:=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=E2=94=82=20=E2=94=82=20=E2=94=82=20=E2=94=82?=
 =?UTF-8?q?=20-=20=E6=96=B0=E5=A2=9E=20showModeToggle,=20currentMode,=20on?=
 =?UTF-8?q?ModeToggle=20=E7=AD=89=20props=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=E2=94=82=20=E2=94=82=20?=
 =?UTF-8?q?=E2=94=82=20=E2=94=82=20-=20=E6=94=AF=E6=8C=81=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=EF=BC=88"=E7=B2=BE=E7=AE=80=E6=A8=A1=E5=BC=8F"=20/=20"?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E8=AF=A6=E6=83=85"=EF=BC=89=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=E2=94=82=20=E2=94=82=20=E2=94=82=20=E2=94=82=20?=
 =?UTF-8?q?-=20=E6=A0=B9=E6=8D=AE=E6=A8=A1=E5=BC=8F=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=8C=89=E9=92=AE=E6=96=87=E6=A1=88=E5=92=8C?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsDetail/CollapsibleHeader.js    | 72 ++++++++++++++++---
 1 file changed, 62 insertions(+), 10 deletions(-)

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 ? <ChevronUpIcon /> : <ChevronDownIcon />;
+  };
+
   return (
     <Flex
       justify="space-between"
       align="center"
-      cursor="pointer"
-      onClick={onToggle}
+      cursor={showModeToggle ? 'default' : 'pointer'}
+      onClick={showModeToggle ? undefined : onToggle}
       p={3}
       bg={sectionBg}
       borderRadius="md"
-      _hover={{ bg: hoverBg }}
+      _hover={showModeToggle ? {} : { bg: hoverBg }}
       transition="background 0.2s"
     >
       <HStack spacing={2}>
@@ -54,12 +86,32 @@ const CollapsibleHeader = ({ title, isOpen, onToggle, count = null, subscription
           </Badge>
         )}
       </HStack>
-      <IconButton
-        icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-        size="sm"
-        variant="ghost"
-        aria-label={isOpen ? '收起' : '展开'}
-      />
+
+      {/* 只有 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>
   );
 };