This commit is contained in:
Kevin Wong
2026-01-22 17:15:42 +08:00
parent ad7ff7a385
commit 3a76f9d0cf
8 changed files with 399 additions and 148 deletions

View File

@@ -1,6 +1,9 @@
"use client";
import { useState, useEffect } from "react";
import useSWR from 'swr';
const fetcher = (url: string) => fetch(url).then((res) => res.json());
import Link from "next/link";
// 动态获取 API 地址:服务端使用 localhost客户端使用当前域名
@@ -119,6 +122,38 @@ export default function PublishPage() {
setIsPublishing(false);
};
// SWR Polling for Login Status
const { data: loginStatus } = useSWR(
qrPlatform ? `${API_BASE}/api/publish/login/status/${qrPlatform}` : null,
fetcher,
{
refreshInterval: 2000,
onSuccess: (data) => {
if (data.success) {
setQrCodeImage(null);
setQrPlatform(null);
alert('✅ 登录成功!');
fetchAccounts();
}
}
}
);
// Timeout logic for QR code (business logic: stop after 2 mins)
useEffect(() => {
let timer: NodeJS.Timeout;
if (qrPlatform) {
timer = setTimeout(() => {
if (qrPlatform) { // Double check active
setQrPlatform(null);
setQrCodeImage(null);
alert('登录超时,请重试');
}
}, 120000);
}
return () => clearTimeout(timer);
}, [qrPlatform]);
const handleLogin = async (platform: string) => {
try {
const res = await fetch(`${API_BASE}/api/publish/login/${platform}`, {
@@ -127,32 +162,9 @@ export default function PublishPage() {
const result = await res.json();
if (result.success && result.qr_code) {
// 显示二维码
setQrCodeImage(result.qr_code);
setQrPlatform(platform);
// 轮询登录状态
const checkInterval = setInterval(async () => {
const statusRes = await fetch(`${API_BASE}/api/publish/login/status/${platform}`);
const statusData = await statusRes.json();
if (statusData.success) {
clearInterval(checkInterval);
setQrCodeImage(null);
setQrPlatform(null);
alert('✅ 登录成功!');
fetchAccounts(); // 刷新账号状态
}
}, 2000); // 每2秒检查一次
// 2分钟后停止轮询
setTimeout(() => {
clearInterval(checkInterval);
if (qrCodeImage) {
setQrCodeImage(null);
alert('登录超时,请重试');
}
}, 120000);
// SWR hook will automatically start polling since qrPlatform is set
} else {
alert(result.message || '登录失败');
}
@@ -161,6 +173,24 @@ export default function PublishPage() {
}
};
const handleLogout = async (platform: string) => {
if (!confirm('确定要注销登录吗?')) return;
try {
const res = await fetch(`${API_BASE}/api/publish/logout/${platform}`, {
method: 'POST'
});
const result = await res.json();
if (result.success) {
alert('已注销');
fetchAccounts();
} else {
alert(result.message || '注销失败');
}
} catch (error) {
alert(`注销失败: ${error}`);
}
};
const platformIcons: Record<string, string> = {
douyin: "🎵",
xiaohongshu: "📕",
@@ -248,12 +278,31 @@ export default function PublishPage() {
</div>
</div>
</div>
<button
onClick={() => handleLogin(account.platform)}
className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition-colors"
>
🔐
</button>
<div className="flex gap-2">
{account.logged_in ? (
<>
<button
onClick={() => handleLogin(account.platform)}
className="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-sm rounded-lg transition-colors"
>
</button>
<button
onClick={() => handleLogout(account.platform)}
className="px-3 py-1 bg-red-500/80 hover:bg-red-600 text-white text-sm rounded-lg transition-colors"
>
</button>
</>
) : (
<button
onClick={() => handleLogin(account.platform)}
className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition-colors"
>
🔐
</button>
)}
</div>
</div>
))}
</div>