Develop

app/components/header/_component/progress.tsx

@@ -1,29 +1,42 @@
 "use client";
-
+import clsx from "clsx";
 import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
+
+const HomeProgressCSSVar = "--home-progress";
 
 const Progress = () => {
 	const pathname = usePathname();
-	const [showProgress, setShowProgress] = useState(false);
-
-	useEffect(() => {
-		setShowProgress(pathname.includes("/learn"));
 
-		return () => {
-			setShowProgress(false);
-		};
-	}, [pathname]);
+	const isLearnPage = pathname.startsWith("/learn");
+	const isHome = pathname === "/";
+	const showProgress = isLearnPage || isHome;
 
 	return (
 		showProgress && (
 			<div
 				id="progress"
-				style={{ animationTimeline: "--page-scroll" }}
-				className="absolute left-0 bottom-0 w-full h-[2px] bg-base-content origin-[0%_50%] animate-[grow-progress_auto_linear]"
+				style={{
+					...(isLearnPage && { animationTimeline: "--page-scroll" }),
+					...(isHome && {
+						transform: `scaleX(var(${HomeProgressCSSVar}, 0))`,
+						transition: "transform 0.5s",
+					}),
+				}}
+				className={clsx(
+					"absolute left-0 bottom-0 w-full h-[2px] bg-base-content origin-[0%_50%]",
+					isLearnPage && "animate-[grow-progress_auto_linear]",
+				)}
 			/>
 		)
 	);
 };
 
-export { Progress };
+const setProgressCSSVar = (percent: number) => {
+	document.documentElement.style.setProperty(HomeProgressCSSVar, `${percent}`);
+
+	return () => {
+		document.documentElement.style.removeProperty(HomeProgressCSSVar);
+	};
+};
+
+export { Progress, setProgressCSSVar };

app/components/home-status/index.tsx

@@ -8,6 +8,7 @@ import ScoreIcon from "@/assets/svg/score.svg";
 import SettingIcon from "@/assets/svg/setting.svg";
 import SpeakerIcon from "@/assets/svg/speaker.svg";
 import { DictNav } from "@/components/dict-nav";
+import { setProgressCSSVar } from "@/components/header/_component/progress";
 import { HideText } from "@/components/hide-text";
 import { HomeDrawer } from "@/components/home-drawer";
 import { HomeInput } from "@/components/home-input";
@@ -316,6 +317,11 @@ const HomeStatus = ({
 		skipToNextWord(0);
 	});
 
+	useEffect(() => {
+		if (!dict.length) setProgressCSSVar(0);
+		else setProgressCSSVar(Math.min(1, curWordIndex / dict.length));
+	}, [dict, curWordIndex]);
+
 	/** 完成输入，下一个单词 放在useEffect可能有点问题, 仅curInputIndex更新时触发 */
 	useEffect(() => {
 		if (

app/hooks/use-pronunciation.ts

@@ -59,7 +59,7 @@ const usePronunciation = (
 		}
 	});
 
-	const { run: debouncedPlay } = useDebounceFn(play, { wait: 600 });
+	const { run: debouncedPlay } = useDebounceFn(play, { wait: 800 });
 
 	return { isPlaying, play };
 };