add

apps/web/src/components/common/container/CollapsibleContent.tsx

@@ -1,5 +1,6 @@
-import React, { useRef, useState } from "react";
-
+import React, { useEffect, useRef, useState } from "react";
+import Quill from "quill";
+import "quill/dist/quill.snow.css"; // 引入默认样式
 interface CollapsibleContentProps {
 	content: string;
 	maxHeight?: number;
@@ -9,44 +10,54 @@ const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
 	content,
 	maxHeight = 150,
 }) => {
-	const contentWrapperRef = useRef<HTMLDivElement>(null);
+	const contentWrapperRef = useRef(null);
 	const [isExpanded, setIsExpanded] = useState(false);
+	const [shouldCollapse, setShouldCollapse] = useState(false);
 
-	// Determine if content needs to be collapsed
-	const shouldCollapse = contentWrapperRef.current
-		? contentWrapperRef.current.scrollHeight > maxHeight
-		: false;
+	useEffect(() => {
+		if (contentWrapperRef.current) {
+			const shouldCollapse =
+				contentWrapperRef.current.scrollHeight > maxHeight;
+			setShouldCollapse(shouldCollapse);
+		}
+	}, [content]);
 
 	return (
-		<div>
-			<div
-				ref={contentWrapperRef}
-				className={`duration-300 ${
-					shouldCollapse && !isExpanded
-						? `max-h-[${maxHeight}px] overflow-hidden relative`
-						: ""
-				}`}>
+		<div className=" text-base ">
+			<div className=" flex flex-col gap-4  border border-white hover:ring-1 ring-white transition-all duration-300 ease-in-out rounded-xl p-6 ">
+				{/* 包装整个内容区域的容器 */}
 				<div
-					className="ql-editor p-0 space-y-1 leading-relaxed"
-					dangerouslySetInnerHTML={{
-						__html: content || "",
-					}}
-				/>
+					ref={contentWrapperRef}
+					className={`duration-300 ${
+						shouldCollapse && !isExpanded
+							? `max-h-[${maxHeight}px] overflow-hidden relative`
+							: ""
+					}`}>
+					{/* 内容区域 */}
+					<div
+						className="ql-editor p-0 space-y-1 leading-relaxed"
+						dangerouslySetInnerHTML={{
+							__html: content || "",
+						}}
+					/>
 
-				{/* Gradient overlay */}
-				{shouldCollapse && !isExpanded && (
-					<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
+					{/* 渐变遮罩 */}
+					{shouldCollapse && !isExpanded && (
+						<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
+					)}
+				</div>
+
+				{/* 展开/收起按钮 */}
+				{shouldCollapse && (
+					<button
+						onClick={() => setIsExpanded(!isExpanded)}
+						className="mt-2 text-blue-500 hover:text-blue-700">
+						{isExpanded ? "收起" : "展开"}
+					</button>
 				)}
+				{/* PostResources 组件 */}
+				{/* <PostResources post={post} /> */}
 			</div>
-
-			{/* Expand/Collapse button */}
-			{shouldCollapse && (
-				<button
-					onClick={() => setIsExpanded(!isExpanded)}
-					className="mt-2 text-blue-500 hover:text-blue-700">
-					{isExpanded ? "收起" : "展开"}
-				</button>
-			)}
 		</div>
 	);
 };