fix(frontend): 移除易被误认为加载条的顶部阅读进度条
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2190,16 +2190,3 @@ html.dark .prose-content .shiki span {
|
|||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 阅读进度条 */
|
|
||||||
.reading-progress {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 3px;
|
|
||||||
z-index: 60;
|
|
||||||
background: var(--accent);
|
|
||||||
transform-origin: 0 50%;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ import { getMeCached } from "@/lib/serverData";
|
|||||||
import CommentSection from "@/components/CommentSection";
|
import CommentSection from "@/components/CommentSection";
|
||||||
import PostActions from "@/components/PostActions";
|
import PostActions from "@/components/PostActions";
|
||||||
import LikeButton from "@/components/LikeButton";
|
import LikeButton from "@/components/LikeButton";
|
||||||
import ReadingProgress from "@/components/ReadingProgress";
|
|
||||||
import PostToc, { type TocItem } from "@/components/PostToc";
|
import PostToc, { type TocItem } from "@/components/PostToc";
|
||||||
import MobilePostBar from "@/components/MobilePostBar";
|
import MobilePostBar from "@/components/MobilePostBar";
|
||||||
import Avatar from "@/components/Avatar";
|
import Avatar from "@/components/Avatar";
|
||||||
@@ -454,7 +453,6 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ReadingProgress />
|
|
||||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||||
{/* 移动端浮动操作条:长文阅读中途可点赞 / 跳评论 / 回顶部 */}
|
{/* 移动端浮动操作条:长文阅读中途可点赞 / 跳评论 / 回顶部 */}
|
||||||
<MobilePostBar postId={id} liked={post.liked} likeCount={post.like_count} />
|
<MobilePostBar postId={id} liked={post.liked} likeCount={post.like_count} />
|
||||||
|
|||||||
@@ -1,37 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
export default function ReadingProgress() {
|
|
||||||
const [progress, setProgress] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let raf = 0;
|
|
||||||
const update = () => {
|
|
||||||
raf = 0;
|
|
||||||
const doc = document.documentElement;
|
|
||||||
const max = doc.scrollHeight - doc.clientHeight;
|
|
||||||
setProgress(max > 0 ? Math.min(1, doc.scrollTop / max) : 0);
|
|
||||||
};
|
|
||||||
const onScroll = () => {
|
|
||||||
if (!raf) raf = requestAnimationFrame(update);
|
|
||||||
};
|
|
||||||
update();
|
|
||||||
window.addEventListener("scroll", onScroll, { passive: true });
|
|
||||||
window.addEventListener("resize", onScroll);
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("scroll", onScroll);
|
|
||||||
window.removeEventListener("resize", onScroll);
|
|
||||||
if (raf) cancelAnimationFrame(raf);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (progress <= 0) return null;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="reading-progress"
|
|
||||||
style={{ transform: `scaleX(${progress})`, opacity: progress >= 1 ? 0 : 1 }}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user