diff --git a/apps/web/src/components/common/container/CollapsibleContent.tsx b/apps/web/src/components/common/container/CollapsibleContent.tsx
new file mode 100644
index 0000000..6d1ea96
--- /dev/null
+++ b/apps/web/src/components/common/container/CollapsibleContent.tsx
@@ -0,0 +1,54 @@
+import React, { useRef, useState } from "react";
+
+interface CollapsibleContentProps {
+	content: string;
+	maxHeight?: number;
+}
+
+const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
+	content,
+	maxHeight = 150,
+}) => {
+	const contentWrapperRef = useRef<HTMLDivElement>(null);
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	// Determine if content needs to be collapsed
+	const shouldCollapse = contentWrapperRef.current
+		? contentWrapperRef.current.scrollHeight > maxHeight
+		: false;
+
+	return (
+		<div>
+			<div
+				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" />
+				)}
+			</div>
+
+			{/* Expand/Collapse button */}
+			{shouldCollapse && (
+				<button
+					onClick={() => setIsExpanded(!isExpanded)}
+					className="mt-2 text-blue-500 hover:text-blue-700">
+					{isExpanded ? "收起" : "展开"}
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default CollapsibleContent;
diff --git a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
index 4f956b5..3a2d6ff 100644
--- a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
@@ -1,10 +1,11 @@
 // components/CourseDetailDisplayArea.tsx
 import { motion, useScroll, useTransform } from "framer-motion";
-import React, { useContext } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
 import { CourseDetailDescription } from "./CourseDetailDescription/CourseDetailDescription";
-import { Course, PostType } from "@nice/common";
+import { Course, LectureType, PostType } from "@nice/common";
 import { CourseDetailContext } from "./CourseDetailContext";
+import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
 
 interface CourseDetailDisplayAreaProps {
 	// course: Course;
@@ -21,23 +22,34 @@ export const CourseDetailDisplayArea: React.FC<
 	const { scrollY } = useScroll();
 	const videoScale = useTransform(scrollY, [0, 200], [1, 0.8]);
 	const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]);
-
+	const contentWrapperRef = useRef(null);
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [shouldCollapse, setShouldCollapse] = useState(false);
 	return (
 		<div className="min-h-screen bg-gray-50">
 			{/* 固定的视频区域 */}
 			{/* 移除 sticky 定位，让视频区域随页面滚动 */}
-			<motion.div
-				style={{
-					opacity: videoOpacity,
-				}}
-				className="w-full bg-black">
-				{lecture.type === PostType.LECTURE && (
+			{lecture?.meta?.type === LectureType.VIDEO && (
+				<motion.div
+					style={{
+						opacity: videoOpacity,
+					}}
+					className="w-full bg-black">
 					<div className=" w-full  ">
 						<VideoPlayer src={videoSrc} poster={videoPoster} />
 					</div>
-				)}
-			</motion.div>
-
+				</motion.div>
+			)}
+			{lecture?.meta?.type === LectureType.ARTICLE && (
+				<div className="flex justify-center w-full my-2">
+					<div className="w-4/5  bg-white shadow-md rounded-lg  border border-gray-200  p-6  ">
+						<CollapsibleContent
+							content={lecture?.content || ""}
+							maxHeight={150} // Optional, defaults to 150
+						/>
+					</div>
+				</div>
+			)}
 			{/* 课程内容区域 */}
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
diff --git a/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx b/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx
index 338d428..bbcdffc 100644
--- a/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx
@@ -51,7 +51,6 @@ export const CourseDetailHeader = () => {
 					123
 				</Button>
 				<nav className="flex items-center space-x-4">
-					{/* 添加你的导航项目 */}
 					<button className="px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors">
 						开始学习
 					</button>
diff --git a/packages/common/src/models/post.ts b/packages/common/src/models/post.ts
index 6c0bc7a..a82d22a 100644
--- a/packages/common/src/models/post.ts
+++ b/packages/common/src/models/post.ts
@@ -43,6 +43,7 @@ export type PostDto = Post & {
 };
 
 export type LectureMeta = {
+	type?: string;
 	videoUrl?: string;
 	videoThumbnail?: string;
 };