diff --git a/package.json b/package.json
index fce8496..d16d2e3 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"@headlessui/react": "^2.2.4",
"@heroicons/react": "^2.2.0",
"@types/crypto-js": "^4.2.2",
+ "@types/nprogress": "^0.2.3",
"@upstash/redis": "^1.25.0",
"@vidstack/react": "^1.12.13",
"anime4k-webgpu": "^1.0.0",
@@ -47,6 +48,7 @@
"next-pwa": "^5.6.0",
"next-themes": "^0.4.6",
"node-fetch": "^2.7.0",
+ "nprogress": "^0.2.0",
"parse-torrent-name": "^0.5.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e71f7f..e8e64c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
'@types/crypto-js':
specifier: ^4.2.2
version: 4.2.2
+ '@types/nprogress':
+ specifier: ^0.2.3
+ version: 0.2.3
'@upstash/redis':
specifier: ^1.25.0
version: 1.35.1
@@ -89,6 +92,9 @@ importers:
node-fetch:
specifier: ^2.7.0
version: 2.7.0
+ nprogress:
+ specifier: ^0.2.0
+ version: 0.2.0
parse-torrent-name:
specifier: ^0.5.4
version: 0.5.4
@@ -1203,28 +1209,24 @@ packages:
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
- libc: [glibc]
'@next/swc-linux-arm64-musl@14.2.33':
resolution: {integrity: sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
- libc: [musl]
'@next/swc-linux-x64-gnu@14.2.33':
resolution: {integrity: sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
- libc: [glibc]
'@next/swc-linux-x64-musl@14.2.33':
resolution: {integrity: sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
- libc: [musl]
'@next/swc-win32-arm64-msvc@14.2.33':
resolution: {integrity: sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==}
@@ -1624,6 +1626,9 @@ packages:
'@types/normalize-package-data@2.4.4':
resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+ '@types/nprogress@0.2.3':
+ resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
'@types/parse-json@4.0.2':
resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
@@ -1786,49 +1791,41 @@ packages:
resolution: {integrity: sha512-vdqBh911wc5awE2bX2zx3eflbyv8U9xbE/jVKAm425eRoOVv/VseGZsqi3A3SykckSpF4wSROkbQPvbQFn8EsA==}
cpu: [arm64]
os: [linux]
- libc: [glibc]
'@unrs/resolver-binding-linux-arm64-musl@1.9.0':
resolution: {integrity: sha512-/8JFZ/SnuDr1lLEVsxsuVwrsGquTvT51RZGvyDB/dOK3oYK2UqeXzgeyq6Otp8FZXQcEYqJwxb9v+gtdXn03eQ==}
cpu: [arm64]
os: [linux]
- libc: [musl]
'@unrs/resolver-binding-linux-ppc64-gnu@1.9.0':
resolution: {integrity: sha512-FkJjybtrl+rajTw4loI3L6YqSOpeZfDls4SstL/5lsP2bka9TiHUjgMBjygeZEis1oC8LfJTS8FSgpKPaQx2tQ==}
cpu: [ppc64]
os: [linux]
- libc: [glibc]
'@unrs/resolver-binding-linux-riscv64-gnu@1.9.0':
resolution: {integrity: sha512-w/NZfHNeDusbqSZ8r/hp8iL4S39h4+vQMc9/vvzuIKMWKppyUGKm3IST0Qv0aOZ1rzIbl9SrDeIqK86ZpUK37w==}
cpu: [riscv64]
os: [linux]
- libc: [glibc]
'@unrs/resolver-binding-linux-riscv64-musl@1.9.0':
resolution: {integrity: sha512-bEPBosut8/8KQbUixPry8zg/fOzVOWyvwzOfz0C0Rw6dp+wIBseyiHKjkcSyZKv/98edrbMknBaMNJfA/UEdqw==}
cpu: [riscv64]
os: [linux]
- libc: [musl]
'@unrs/resolver-binding-linux-s390x-gnu@1.9.0':
resolution: {integrity: sha512-LDtMT7moE3gK753gG4pc31AAqGUC86j3AplaFusc717EUGF9ZFJ356sdQzzZzkBk1XzMdxFyZ4f/i35NKM/lFA==}
cpu: [s390x]
os: [linux]
- libc: [glibc]
'@unrs/resolver-binding-linux-x64-gnu@1.9.0':
resolution: {integrity: sha512-WmFd5KINHIXj8o1mPaT8QRjA9HgSXhN1gl9Da4IZihARihEnOylu4co7i/yeaIpcfsI6sYs33cNZKyHYDh0lrA==}
cpu: [x64]
os: [linux]
- libc: [glibc]
'@unrs/resolver-binding-linux-x64-musl@1.9.0':
resolution: {integrity: sha512-CYuXbANW+WgzVRIl8/QvZmDaZxrqvOldOwlbUjIM4pQ46FJ0W5cinJ/Ghwa/Ng1ZPMJMk1VFdsD/XwmCGIXBWg==}
cpu: [x64]
os: [linux]
- libc: [musl]
'@unrs/resolver-binding-wasm32-wasi@1.9.0':
resolution: {integrity: sha512-6Rp2WH0OoitMYR57Z6VE8Y6corX8C6QEMWLgOV6qXiJIeZ1F9WGXY/yQ8yDC4iTraotyLOeJ2Asea0urWj2fKQ==}
@@ -4480,6 +4477,9 @@ packages:
resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
engines: {node: '>=8'}
+ nprogress@0.2.0:
+ resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
nth-check@2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
@@ -7762,6 +7762,8 @@ snapshots:
'@types/normalize-package-data@2.4.4': {}
+ '@types/nprogress@0.2.3': {}
+
'@types/parse-json@4.0.2': {}
'@types/prettier@2.7.3': {}
@@ -11414,6 +11416,8 @@ snapshots:
dependencies:
path-key: 3.1.1
+ nprogress@0.2.0: {}
+
nth-check@2.1.1:
dependencies:
boolbase: 1.0.0
diff --git a/src/app/globals.css b/src/app/globals.css
index ba4907b..ae2660d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,6 +2,43 @@
@tailwind components;
@tailwind utilities;
+/* NProgress 进度条样式 */
+#nprogress {
+ pointer-events: none;
+}
+
+#nprogress .bar {
+ background: #3b82f6;
+ position: fixed;
+ z-index: 9999;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 5px rgba(59, 130, 246, 0.6);
+}
+
+#nprogress .peg {
+ display: block;
+ position: absolute;
+ right: 0px;
+ width: 100px;
+ height: 100%;
+ box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 5px rgba(59, 130, 246, 0.6);
+ opacity: 1.0;
+ transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* 暗色模式下的进度条样式 */
+.dark #nprogress .bar {
+ background: #60a5fa;
+ box-shadow: 0 0 10px rgba(96, 165, 250, 0.8), 0 0 5px rgba(96, 165, 250, 0.6);
+}
+
+.dark #nprogress .peg {
+ box-shadow: 0 0 10px rgba(96, 165, 250, 0.8), 0 0 5px rgba(96, 165, 250, 0.6);
+}
+
@layer utilities {
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b5f4ce6..c3ffe9e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,6 +16,7 @@ import { DownloadProvider } from '../contexts/DownloadContext';
import { DownloadBubble } from '../components/DownloadBubble';
import { DownloadPanel } from '../components/DownloadPanel';
import { DanmakuCacheCleanup } from '../components/DanmakuCacheCleanup';
+import TopProgressBar from '../components/TopProgressBar';
const inter = Inter({ subsets: ['latin'] });
export const dynamic = 'force-dynamic';
@@ -194,6 +195,7 @@ export default async function RootLayout({
enableSystem
disableTransitionOnChange
>
+
diff --git a/src/components/TopProgressBar.tsx b/src/components/TopProgressBar.tsx
new file mode 100644
index 0000000..0e781e5
--- /dev/null
+++ b/src/components/TopProgressBar.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { usePathname, useSearchParams, useRouter } from 'next/navigation';
+import NProgress from 'nprogress';
+
+// 创建全局钩子来拦截 router
+let globalRouterRef: any = null;
+
+export default function TopProgressBar() {
+ const pathname = usePathname();
+ const searchParams = useSearchParams();
+ const router = useRouter();
+ const isNavigatingRef = useRef(false);
+
+ useEffect(() => {
+ // 配置 NProgress
+ NProgress.configure({
+ showSpinner: false,
+ trickleSpeed: 200,
+ minimum: 0.08,
+ easing: 'ease',
+ speed: 200,
+ });
+
+ // 保存原始的 router 方法
+ globalRouterRef = router;
+ const originalPush = router.push;
+ const originalReplace = router.replace;
+ const originalBack = router.back;
+ const originalForward = router.forward;
+
+ // 拦截 router.push
+ router.push = function (...args: any[]) {
+ isNavigatingRef.current = true;
+ NProgress.start();
+ return originalPush.apply(this, args);
+ };
+
+ // 拦截 router.replace
+ router.replace = function (...args: any[]) {
+ isNavigatingRef.current = true;
+ NProgress.start();
+ return originalReplace.apply(this, args);
+ };
+
+ // 拦截 router.back
+ router.back = function () {
+ isNavigatingRef.current = true;
+ NProgress.start();
+ return originalBack.apply(this);
+ };
+
+ // 拦截 router.forward
+ router.forward = function () {
+ isNavigatingRef.current = true;
+ NProgress.start();
+ return originalForward.apply(this);
+ };
+
+ // 监听所有链接点击事件
+ const handleAnchorClick = (event: MouseEvent) => {
+ const target = event.target as HTMLElement;
+ const anchor = target.closest('a');
+
+ if (anchor && anchor.href) {
+ const currentUrl = window.location.href;
+ const targetUrl = anchor.href;
+
+ if (targetUrl !== currentUrl && !anchor.target && !anchor.download) {
+ const currentOrigin = window.location.origin;
+ try {
+ const targetOrigin = new URL(targetUrl, currentOrigin).origin;
+ if (currentOrigin === targetOrigin) {
+ isNavigatingRef.current = true;
+ NProgress.start();
+ }
+ } catch (e) {
+ // URL 解析失败，忽略
+ }
+ }
+ }
+ };
+
+ // 监听浏览器前进后退按钮
+ const handlePopState = () => {
+ isNavigatingRef.current = true;
+ NProgress.start();
+ };
+
+ document.addEventListener('click', handleAnchorClick, true);
+ window.addEventListener('popstate', handlePopState);
+
+ return () => {
+ // 恢复原始方法
+ if (globalRouterRef) {
+ globalRouterRef.push = originalPush;
+ globalRouterRef.replace = originalReplace;
+ globalRouterRef.back = originalBack;
+ globalRouterRef.forward = originalForward;
+ }
+
+ document.removeEventListener('click', handleAnchorClick, true);
+ window.removeEventListener('popstate', handlePopState);
+ };
+ }, [router]);
+
+ useEffect(() => {
+ // 页面路径变化时，表示页面已加载完成，结束进度条
+ if (isNavigatingRef.current) {
+ NProgress.done();
+ isNavigatingRef.current = false;
+ }
+ }, [pathname, searchParams]);
+
+ return null;
+}