fix: 登录状态检查改为手动触发,避免自动请求不断弹出浏览器窗口

- useLoginStatus 默认 auto=false,不再挂载时自动请求
- Dashboard 登录状态卡片改为 "Click to check" 手动触发
- Login 页面初始显示 "Click Refresh to check" 提示
- Header 添加 Token 未配置警告横幅,引导用户去 Settings
This commit is contained in:
2026-03-01 14:51:17 +08:00
parent 31329905e2
commit f464333a53
4 changed files with 49 additions and 7 deletions
+7 -2
View File
@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom';
export function DashboardPage() {
const { health, loading: healthLoading, refresh: refreshHealth } = useHealth(10_000);
const { status: loginStatus, loading: loginLoading } = useLoginStatus();
const { status: loginStatus, loading: loginLoading, refresh: refreshLogin } = useLoginStatus();
const navigate = useNavigate();
return (
@@ -65,7 +65,12 @@ export function DashboardPage() {
)}
</div>
) : (
<Badge variant="warning">Unknown</Badge>
<button
onClick={() => void refreshLogin()}
className="text-xs text-dark-accent hover:underline"
>
Click to check
</button>
)}
</Card>
+18 -1
View File
@@ -1,15 +1,19 @@
import { useState, useEffect, useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { Spinner } from '@/components/ui/Spinner';
import { useLoginStatus } from '@/hooks/useLoginStatus';
import { useAuth } from '@/context/AuthContext';
import { useToast } from '@/context/ToastContext';
import { getLoginQRCode, deleteCookies, getLoginStatus } from '@/api/endpoints';
export function LoginPage() {
const { status, loading: statusLoading, refresh: refreshStatus } = useLoginStatus();
const { token } = useAuth();
const { toast } = useToast();
const navigate = useNavigate();
const [qrData, setQrData] = useState<string | null>(null);
const [qrLoading, setQrLoading] = useState(false);
@@ -107,6 +111,19 @@ export function LoginPage() {
<div className="max-w-2xl space-y-6">
<h1 className="text-2xl font-bold">Xiaohongshu Login</h1>
{!token && (
<Card className="border-dark-warning/30 bg-dark-warning/10">
<div className="flex items-center justify-between">
<p className="text-sm text-dark-warning">
Bearer Token API 401 Settings Token
</p>
<Button size="sm" variant="secondary" onClick={() => navigate('/settings')}>
Settings
</Button>
</div>
</Card>
)}
{/* Current Status */}
<Card>
<div className="flex items-center justify-between">
@@ -124,7 +141,7 @@ export function LoginPage() {
{status.username && <span className="text-sm">{status.username}</span>}
</div>
) : (
<Badge variant="danger">Unable to check</Badge>
<span className="text-sm text-dark-muted">Click Refresh to check login status</span>
)}
</div>
<div className="flex gap-2">