-
- {String(children).replace(/\n$/, "")}
-
+ );
+ },
+ // 修改表格相关组件的响应式设计
+ table: ({ children, ...props }: ComponentPropsWithoutRef<'table'>) => (
+
- );
- },
- // 修改表格相关组件的响应式设计
- table: ({ children, ...props }: ComponentPropsWithoutRef<'table'>) => (
-
- ),
-
- th: ({ children, ...props }: ComponentPropsWithoutRef<'th'>) => (
-
- {children}
- |
- ),
-
- td: ({ children, ...props }: ComponentPropsWithoutRef<'td'>) => (
-
- {children}
- |
- ),
- }), [mockPost.id, headingIdsArrays]);
+ ),
+
+ th: ({ children, ...props }: ComponentPropsWithoutRef<'th'>) => (
+
+ {children}
+ |
+ ),
+
+ td: ({ children, ...props }: ComponentPropsWithoutRef<'td'>) => (
+
+ {children}
+ |
+ ),
+ // 修改 details 组件
+ details: ({ children, ...props }: ComponentPropsWithoutRef<'details'>) => (
+
+ {children}
+
+ ),
+
+ // 修改 summary 组件
+ summary: ({ children, ...props }: ComponentPropsWithoutRef<'summary'>) => (
+
+ {children}
+
+ ),
+ pre: ({ children, ...props }: ComponentPropsWithoutRef<'pre'>) => {
+ // 添加调试日志
+ console.log('Pre Component Props:', props);
+ console.log('Pre Component Children:', children);
+
+ // 检查children的具体结构
+ if (Array.isArray(children)) {
+ children.forEach((child, index) => {
+ console.log(`Child ${index}:`, child);
+ console.log(`Child ${index} props:`, (child as any)?.props);
+ });
+ }
+
+ const content = (children as any)?.[0]?.props?.children || '';
+ console.log('Extracted content:', content);
+
+ return (
+
+ {/* 直接输出原始内容,不经过 markdown 解析 */}
+ {typeof content === 'string' ? content : children}
+
+ );
+ },
+ };
+ }, []);
// 修改滚动监听逻辑
useEffect(() => {
if (typeof window === 'undefined') return;
+ let scrollTimeout: NodeJS.Timeout;
+
const observer = new IntersectionObserver(
(entries) => {
- if (!isMounted) return;
-
- const container = document.querySelector("#main-content");
- const contentBox = document.querySelector(".prose");
-
- if (!container || !contentBox) return;
+ // 如果是点击触发的滚动，不处理高亮更新
+ if (!isMounted || isClickScrolling.current) return;
- // 找出所有进入可视区域的标题
- const intersectingEntries = entries.filter(entry => entry.isIntersecting);
-
- if (intersectingEntries.length > 0) {
- // 获取所有可见标题的位置信息
- const visibleHeadings = intersectingEntries.map(entry => ({
- id: entry.target.id,
- top: entry.boundingClientRect.top
- }));
+ // 清除之前的定时器
+ clearTimeout(scrollTimeout);
+
+ // 添加防抖，等待滚动结束后再更新高亮
+ scrollTimeout = setTimeout(() => {
+ const visibleEntries = entries.filter(entry => entry.isIntersecting);
- // 选择靠近视口顶部的标题
- const closestHeading = visibleHeadings.reduce((prev, current) => {
- return Math.abs(current.top) < Math.abs(prev.top) ? current : prev;
- });
-
- setActiveId(closestHeading.id);
- }
+ if (visibleEntries.length > 0) {
+ const visibleHeadings = visibleEntries
+ .map(entry => ({
+ id: entry.target.id,
+ top: entry.boundingClientRect.top,
+ y: entry.intersectionRatio
+ }))
+ .sort((a, b) => {
+ if (Math.abs(a.y - b.y) < 0.1) {
+ return a.top - b.top;
+ }
+ return b.y - a.y;
+ });
+
+ const mostVisible = visibleHeadings[0];
+
+ setActiveId(currentActiveId => {
+ if (mostVisible.id !== currentActiveId) {
+ return mostVisible.id;
+ }
+ return currentActiveId;
+ });
+ }
+ }, 100); // 100ms 的防抖延迟
},
{
root: document.querySelector("#main-content"),
- rootMargin: '-20px 0px -80% 0px',
- threshold: [0, 1]
+ rootMargin: '-10% 0px -70% 0px',
+ threshold: [0, 0.25, 0.5, 0.75, 1]
}
);
@@ -596,6 +784,7 @@ export default new Template({}, ({ http, args }) => {
}
return () => {
+ clearTimeout(scrollTimeout);
if (isMounted) {
tocItems.forEach((item) => {
const element = document.getElementById(item.id);
@@ -610,36 +799,38 @@ export default new Template({}, ({ http, args }) => {
// 修改点击处理函数
const handleTocClick = useCallback((e: React.MouseEvent, itemId: string) => {
e.preventDefault();
+
const element = document.getElementById(itemId);
const container = document.querySelector("#main-content");
- const contentBox = document.querySelector(".prose"); // 获取实际内容容器
+ const contentBox = document.querySelector(".prose");
if (element && container && contentBox) {
+ // 设置点击滚动标志
isClickScrolling.current = true;
- // 计算元素相对于内容容器的偏移量
+ // 立即更新高亮，不等待滚动
+ setActiveId(itemId);
+
+ // 计算滚动位置
const elementRect = element.getBoundingClientRect();
const contentBoxRect = contentBox.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
- // 计算元素相对于内容容器的偏移量
const relativeTop = elementRect.top - contentBoxRect.top;
-
- // 计算内容容器相对于滚动容器的偏移量
const contentOffset = contentBoxRect.top - containerRect.top;
-
- // 计算最终滚动距离
const scrollDistance = container.scrollTop + relativeTop + contentOffset;
+ // 执行滚动
container.scrollTo({
top: scrollDistance,
behavior: "smooth",
});
- // 滚动完成后重置标记
+ // 延迟重置 isClickScrolling 标志
+ // 增加延迟时间，确保滚动完全结束
const resetTimeout = setTimeout(() => {
isClickScrolling.current = false;
- }, 100);
+ }, 1500); // 增加到 1.5 秒
return () => clearTimeout(resetTimeout);
}
@@ -733,6 +924,37 @@ export default new Template({}, ({ http, args }) => {
);
+ // 在组件顶部添加 useMemo 包裹静态内容
+ const PostContent = useMemo(() => {
+ // 在渲染内容前重置 headingIds
+ if (headingIdsArrays[mockPost.id]) {
+ headingIds.current = [...headingIdsArrays[mockPost.id]];
+ }
+
+ return (
+
+
+
+ {mockPost.content}
+
+
+
+ );
+ }, [mockPost.content, components, mockPost.id, headingIdsArrays]); // 添加必要的依赖
+
return (
{
className="relative flex-col lg:flex-row"
gap={{initial: "4", lg: "8"}}
>
- {/* 文章主体 */}
-
+ {/* 文章主体 - 调整宽度计算 */}
+
{/* 头部 */}
@@ -849,28 +1071,13 @@ export default new Template({}, ({ http, args }) => {
)}
- {/* 内容区域 */}
-
-
-
- {mockPost.content}
-
-
-
+ {/* 内容区域使用记忆化的组件 */}
+ {PostContent}
- {/* 侧边目录 */}
-
+ {/* 侧边目录 - 减小宽度 */}
+
+ 
-