Commit 2: CollapsibleSection 支持精简/详细双模式

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

@@ -1,7 +1,7 @@
 // src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
 // 通用可折叠区块组件
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   Collapse,
@@ -19,7 +19,10 @@ import CollapsibleHeader from './CollapsibleHeader';
  * @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件
  * @param {boolean} props.isLocked - 是否锁定（不可展开）
  * @param {Function} props.onLockedClick - 锁定时点击的回调
- * @param {React.ReactNode} props.children - 子内容
+ * @param {React.ReactNode} props.children - 详细内容
+ * @param {React.ReactNode} props.simpleContent - 精简模式的内容（可选）
+ * @param {boolean} props.showModeToggle - 是否显示模式切换按钮（默认 false）
+ * @param {string} props.defaultMode - 默认模式：'detailed' | 'simple'（默认 'detailed'）
  */
 const CollapsibleSection = ({
   title,
@@ -29,10 +32,16 @@ const CollapsibleSection = ({
   subscriptionBadge = null,
   isLocked = false,
   onLockedClick = null,
-  children
+  children,
+  simpleContent = null,
+  showModeToggle = false,
+  defaultMode = 'detailed'
 }) => {
   const sectionBg = useColorModeValue('gray.50', 'gray.750');
 
+  // 模式状态：'detailed' | 'simple'
+  const [displayMode, setDisplayMode] = useState(defaultMode);
+
   // 处理点击：如果锁定则触发锁定回调，否则触发正常切换
   const handleToggle = () => {
     if (isLocked && onLockedClick) {
@@ -42,15 +51,43 @@ const CollapsibleSection = ({
     }
   };
 
-  return (
+  // 处理模式切换
-    <Box>
+  const handleModeToggle = (e) => {
-      <CollapsibleHeader
+    e.stopPropagation(); // 阻止冒泡到标题栏的 onToggle
-        title={title}
+
-        isOpen={isOpen}
+    if (isLocked && onLockedClick) {
-        onToggle={handleToggle}
+      // 如果被锁定，触发付费弹窗
-        count={count}
+      onLockedClick();
-        subscriptionBadge={subscriptionBadge}
+      return;
-      />
+    }
+
+    if (displayMode === 'detailed') {
+      // 从详细模式切换到精简模式
+      setDisplayMode('simple');
+    } else {
+      // 从精简模式切换回详细模式
+      setDisplayMode('detailed');
+      // 切换回详细模式时，如果未展开则自动展开
+      if (!isOpen && onToggle) {
+        onToggle();
+      }
+    }
+  };
+
+  // 渲染精简模式
+  const renderSimpleMode = () => {
+    if (!simpleContent) return null;
+
+    return (
+      <Box mt={2} bg={sectionBg} p={3} borderRadius="md">
+        {simpleContent}
+      </Box>
+    );
+  };
+
+  // 渲染详细模式
+  const renderDetailedMode = () => {
+    return (
       <Collapse
         in={isOpen && !isLocked}
         animateOpacity
@@ -61,6 +98,25 @@ const CollapsibleSection = ({
           {children}
         </Box>
       </Collapse>
+    );
+  };
+
+  return (
+    <Box>
+      <CollapsibleHeader
+        title={title}
+        isOpen={isOpen}
+        onToggle={handleToggle}
+        count={count}
+        subscriptionBadge={subscriptionBadge}
+        showModeToggle={showModeToggle}
+        currentMode={displayMode}
+        onModeToggle={handleModeToggle}
+        isLocked={isLocked}
+      />
+
+      {/* 根据当前模式渲染对应内容 */}
+      {displayMode === 'simple' ? renderSimpleMode() : renderDetailedMode()}
     </Box>
   );
 };