From 6bffcde91f7f805bcf3b934bdb86097bf787afd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=91=E8=8B=A5=E4=B8=BA=E7=8E=8B?= Date: Thu, 5 Dec 2024 18:19:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/app/globals.css | 38 +++++++ src/app/page.js | 258 +++++++++++++++++++++++++++++++++----------- 3 files changed, 234 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index d2c8f7c..061a573 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ # Docker部署教程 ``` -docker run -d -p 3000:3000 ghcr.io/ilay1678/alipan-tv-token:latest +docker run --name=alipan-tv-token -d -p 3000:3000 ghcr.io/ilay1678/alipan-tv-token:latest ``` # vercel部署 diff --git a/src/app/globals.css b/src/app/globals.css index 875c01e..11b99da 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -31,3 +31,41 @@ body { text-wrap: balance; } } + +@keyframes fade-in { + from { + opacity: 0; + transform: translate(-50%, -20px); + } + to { + opacity: 1; + transform: translate(-50%, 0); + } +} + +.animate-fade-in { + animation: fade-in 0.3s ease-out forwards; +} + +@keyframes fade-in-out { + 0% { + opacity: 0; + transform: translate(-50%, -20px); + } + 10% { + opacity: 1; + transform: translate(-50%, 0); + } + 90% { + opacity: 1; + transform: translate(-50%, 0); + } + 100% { + opacity: 0; + transform: translate(-50%, -20px); + } +} + +.animate-fade-in-out { + animation: fade-in-out 3s ease-out forwards; +} diff --git a/src/app/page.js b/src/app/page.js index 14ff7b4..e2cdd03 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,22 +1,33 @@ 'use client' import { useEffect, useState, useRef } from 'react' -import ClipboardJS from 'clipboard'; -export default function Home() { - // 添加状态变量 - const [alertMsg, setAlertMsg] = useState(''); - const [alertType, setAlertType] = useState('success'); // 可选值：'success'，'error' - const hasGenerated = useRef(false); // 新增 - const [qrCodeSrc, setQrCodeSrc] = useState(''); // 新增，初始为空表示未加载 +import ClipboardJS from 'clipboard' - async function generateQR() { - const response = await fetch("/generate_qr", { - method: "POST", - }); - const data = await response.json(); - // 更新二维码图片的 src - setQrCodeSrc(data.qr_link); - checkStatus(data.sid); +export default function Home() { + const [alertMsg, setAlertMsg] = useState('') + const [alertType, setAlertType] = useState('success') + const hasGenerated = useRef(false) + const [authUrl, setAuthUrl] = useState('') // 新增授权URL状态 + const [isLoading, setIsLoading] = useState(true) // 新增加载状态 + const [hasAccessToken, setHasAccessToken] = useState(false) + const [hasRefreshToken, setHasRefreshToken] = useState(false) + const [authorizing, setAuthorizing] = useState(false) // 新增授权中状态 + const [showNotice, setShowNotice] = useState(true) // 新增弹窗控制状态 + + async function generateAuthUrl() { + try { + setIsLoading(true) + const response = await fetch("/generate_qr", { + method: "POST", + }); + const data = await response.json(); + // 生成授权URL + const url = `https://www.alipan.com/o/oauth/authorize?sid=${data.sid}` + setAuthUrl(url); + checkStatus(data.sid); + } finally { + setIsLoading(false) + } } async function checkStatus(sid) { @@ -24,19 +35,17 @@ export default function Home() { const response = await fetch("/check_status/" + sid); const data = await response.json(); if (data.status === "LoginSuccess") { - document.querySelector("h1").innerText = "获取成功"; document.getElementById("accessToken").value = data.access_token; document.getElementById("refreshToken").value = data.refresh_token; - document.getElementById("tokens").style.display = "block"; - document.getElementById("qrCodeContainer").style.display = "none"; + document.getElementById("authSection").style.visibility = "hidden"; // 改为隐藏而不是display:none + setHasAccessToken(!!data.access_token) + setHasRefreshToken(!!data.refresh_token) // 初始化复制功能 initializeClipboard(); } else if (data.status === "ScanSuccess") { - document.querySelector("h1").innerText = "扫码成功，等待手机端授权"; // 继续轮询 setTimeout(() => checkStatus(sid), 2000); } else if (data.status === "LoginFailed") { - document.querySelector("h1").innerText = "登录失败，请刷新页面重试"; setAlertMsg("登录失败，请刷新页面重试"); setAlertType('error'); location.reload(); @@ -75,61 +84,184 @@ export default function Home() { }); } + // 新增处理点击授权的函数 + const handleAuth = (url) => { + setAuthorizing(true) + window.open(url, '_blank') + } + useEffect(() => { if (!hasGenerated.current) { - generateQR(); + generateAuthUrl(); hasGenerated.current = true; } - }, []); // 依赖项为空数组 + }, []); + + // 添加消息自动清除的 Effect + useEffect(() => { + if (alertMsg) { + const timer = setTimeout(() => { + setAlertMsg(''); + }, 3000); + return () => clearTimeout(timer); + } + }, [alertMsg]); return ( -
- {/* 添加卡片容器 */} -
- {/* 提示组件 */} - {alertMsg && ( -
+ <> + {showNotice && ( +
+
+

使用须知

+

+ 本工具能帮助你一键获取「阿里云盘TV版」的刷新令牌，完全免费。TV接口能绕过三方应用权益包的速率限制，但前提你得是SVIP。 +

+
+ +
+
+
+ )} + + {alertMsg && ( +
+
{alertMsg}
- )} -

扫描二维码登录

-
- {qrCodeSrc ? ( - 二维码 - ) : ( -
- 二维码加载中... -
- )}
-
-
- -
- - -
+ )} + +
+
+
+

与「阿里云盘」连接

+ {/* 将 Docker 标移到这里 */} + + + + +
-
- -
- - + +
+
+
+