清理不必要的測試檔案
This commit is contained in:
@@ -1,371 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Loader2, Database, Trash2, Settings, Activity, Clock, Users } from 'lucide-react';
|
||||
|
||||
interface ConnectionStats {
|
||||
totalConnections: number;
|
||||
idleConnections: number;
|
||||
oldConnections: number;
|
||||
maxIdleTime: number;
|
||||
maxConnectionAge: number;
|
||||
connections: Array<{
|
||||
createdAt: string;
|
||||
lastUsed: string;
|
||||
idleTime: number;
|
||||
age: number;
|
||||
userId?: string;
|
||||
sessionId?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default function ConnectionMonitorPage() {
|
||||
const [stats, setStats] = useState<ConnectionStats | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
const [maxIdleTime, setMaxIdleTime] = useState<number>(300000); // 5分鐘
|
||||
const [maxConnectionAge, setMaxConnectionAge] = useState<number>(1800000); // 30分鐘
|
||||
|
||||
// 獲取連線統計
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/connection-monitor?action=stats');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setStats(data.data);
|
||||
setMessage('統計更新成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取統計失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 強制清理連線
|
||||
const forceCleanup = async () => {
|
||||
if (!confirm('確定要強制清理所有連線嗎?這可能會影響正在進行的操作!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/connection-monitor?action=cleanup');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('連線清理完成');
|
||||
setError('');
|
||||
await fetchStats(); // 重新獲取統計
|
||||
} else {
|
||||
setError(data.error || '清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 測試智能連線
|
||||
const testConnection = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/connection-monitor?action=test');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('智能連線測試成功');
|
||||
setError('');
|
||||
await fetchStats(); // 重新獲取統計
|
||||
} else {
|
||||
setError(data.error || '測試失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('測試錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 更新清理配置
|
||||
const updateConfig = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/connection-monitor', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: 'config',
|
||||
maxIdleTime,
|
||||
maxConnectionAge
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('清理配置更新成功');
|
||||
setError('');
|
||||
await fetchStats(); // 重新獲取統計
|
||||
} else {
|
||||
setError(data.error || '配置更新失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('配置更新錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化時間
|
||||
const formatTime = (ms: number) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
|
||||
if (hours > 0) return `${hours}h ${minutes % 60}m`;
|
||||
if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
|
||||
return `${seconds}s`;
|
||||
};
|
||||
|
||||
// 組件載入時獲取統計
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
|
||||
// 每30秒自動更新統計
|
||||
const interval = setInterval(fetchStats, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">連線監控管理</h1>
|
||||
<p className="text-muted-foreground">
|
||||
監控和管理資料庫連線的生命週期
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchStats}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Activity className="h-4 w-4" />}
|
||||
重新整理
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 統計概覽 */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5 text-blue-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">總連線數</p>
|
||||
<p className="text-2xl font-bold">{stats.totalConnections}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-5 w-5 text-yellow-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">空閒連線</p>
|
||||
<p className="text-2xl font-bold">{stats.idleConnections}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-red-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">舊連線</p>
|
||||
<p className="text-2xl font-bold">{stats.oldConnections}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5 text-green-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">健康狀態</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{stats.idleConnections + stats.oldConnections === 0 ? '良好' : '需清理'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 操作按鈕 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5" />
|
||||
連線管理
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
管理和清理資料庫連線
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Button
|
||||
onClick={testConnection}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||||
測試智能連線
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={forceCleanup}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
強制清理連線
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={updateConfig}
|
||||
disabled={loading}
|
||||
variant="secondary"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Settings className="h-4 w-4" />}
|
||||
更新配置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 配置設定 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="maxIdleTime">最大空閒時間 (毫秒)</Label>
|
||||
<Input
|
||||
id="maxIdleTime"
|
||||
type="number"
|
||||
value={maxIdleTime}
|
||||
onChange={(e) => setMaxIdleTime(Number(e.target.value))}
|
||||
placeholder="300000 (5分鐘)"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="maxConnectionAge">最大連線年齡 (毫秒)</Label>
|
||||
<Input
|
||||
id="maxConnectionAge"
|
||||
type="number"
|
||||
value={maxConnectionAge}
|
||||
onChange={(e) => setMaxConnectionAge(Number(e.target.value))}
|
||||
placeholder="1800000 (30分鐘)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 連線詳情 */}
|
||||
{stats && stats.connections.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>連線詳情</CardTitle>
|
||||
<CardDescription>
|
||||
當前活躍的資料庫連線列表
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{stats.connections.map((conn, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline">#{index + 1}</Badge>
|
||||
<div>
|
||||
<p className="text-sm font-medium">
|
||||
創建時間: {new Date(conn.createdAt).toLocaleString()}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
最後使用: {new Date(conn.lastUsed).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={conn.idleTime > stats.maxIdleTime ? "destructive" : "default"}>
|
||||
空閒: {formatTime(conn.idleTime)}
|
||||
</Badge>
|
||||
<Badge variant={conn.age > stats.maxConnectionAge ? "destructive" : "default"}>
|
||||
年齡: {formatTime(conn.age)}
|
||||
</Badge>
|
||||
{conn.userId && (
|
||||
<Badge variant="secondary">用戶: {conn.userId}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<Activity className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<Database className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 說明資訊 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>智能連線管理說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>自動清理:</strong> 系統每30秒自動檢查並清理空閒或過期的連線</p>
|
||||
<p>• <strong>智能追蹤:</strong> 追蹤每個連線的創建時間、最後使用時間和用戶信息</p>
|
||||
<p>• <strong>即時監控:</strong> 實時顯示連線狀態,幫助識別連線洩漏問題</p>
|
||||
<p>• <strong>自動釋放:</strong> 查詢完成後自動釋放連線,避免連線累積</p>
|
||||
<p>• <strong>用戶關閉網頁:</strong> 空閒連線會在設定的時間後自動清理</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,267 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, Power, AlertTriangle, CheckCircle } from 'lucide-react';
|
||||
|
||||
interface ShutdownStatus {
|
||||
isShuttingDown: boolean;
|
||||
handlerCount: number;
|
||||
registeredHandlers: string[];
|
||||
}
|
||||
|
||||
export default function DatabaseShutdownPage() {
|
||||
const [status, setStatus] = useState<ShutdownStatus | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 獲取關閉狀態
|
||||
const fetchStatus = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/test-shutdown?action=status');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setStatus(data.data);
|
||||
setMessage('狀態更新成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取狀態失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 測試關閉機制
|
||||
const testShutdown = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/test-shutdown?action=test');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('關閉機制測試成功');
|
||||
setError('');
|
||||
await fetchStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError(data.error || '測試失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('測試錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 強制關閉測試
|
||||
const forceShutdown = async () => {
|
||||
if (!confirm('確定要執行強制關閉測試嗎?這可能會影響應用程式運行!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/test-shutdown?action=force');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('強制關閉測試完成');
|
||||
setError('');
|
||||
await fetchStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError(data.error || '強制關閉測試失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('強制關閉錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 優雅關閉測試
|
||||
const gracefulShutdown = async () => {
|
||||
if (!confirm('確定要執行優雅關閉測試嗎?這會關閉所有資料庫連線!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/test-shutdown', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'graceful' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('優雅關閉測試完成');
|
||||
setError('');
|
||||
await fetchStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError(data.error || '優雅關閉測試失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('優雅關閉錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取狀態
|
||||
useEffect(() => {
|
||||
fetchStatus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">資料庫關閉管理</h1>
|
||||
<p className="text-muted-foreground">
|
||||
監控和管理資料庫連線的關閉機制
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchStatus}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||||
重新整理狀態
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 狀態顯示 */}
|
||||
{status && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
關閉狀態
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
當前資料庫關閉管理器的運行狀態
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">關閉狀態:</span>
|
||||
<Badge variant={status.isShuttingDown ? "destructive" : "default"}>
|
||||
{status.isShuttingDown ? "關閉中" : "正常"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">處理器數量:</span>
|
||||
<Badge variant="outline">{status.handlerCount}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">狀態:</span>
|
||||
<Badge variant={status.isShuttingDown ? "destructive" : "default"}>
|
||||
{status.isShuttingDown ? "異常" : "正常"}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="text-sm font-medium">已註冊的處理器:</span>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{status.registeredHandlers.map((handler, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{handler}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 操作按鈕 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Power className="h-5 w-5" />
|
||||
關閉操作
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
測試和管理資料庫關閉機制
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Button
|
||||
onClick={testShutdown}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle className="h-4 w-4" />}
|
||||
測試關閉機制
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={forceShutdown}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertTriangle className="h-4 w-4" />}
|
||||
強制關閉測試
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={gracefulShutdown}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Power className="h-4 w-4" />}
|
||||
優雅關閉測試
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 說明資訊 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>使用說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>測試關閉機制:</strong> 檢查關閉處理器是否正常註冊,不會實際關閉連線</p>
|
||||
<p>• <strong>強制關閉測試:</strong> 模擬強制關閉所有資料庫連線(用於測試)</p>
|
||||
<p>• <strong>優雅關閉測試:</strong> 執行完整的優雅關閉流程(會實際關閉連線)</p>
|
||||
<p>• 當應用程式收到 SIGINT 或 SIGTERM 信號時,會自動執行優雅關閉</p>
|
||||
<p>• 關閉管理器會確保所有資料庫連線池都被正確關閉</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,281 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap } from 'lucide-react';
|
||||
|
||||
interface ConnectionDetail {
|
||||
ID: number;
|
||||
USER: string;
|
||||
HOST: string;
|
||||
DB: string;
|
||||
COMMAND: string;
|
||||
TIME: number;
|
||||
STATE: string;
|
||||
INFO?: string;
|
||||
}
|
||||
|
||||
interface ConnectionData {
|
||||
connectionCount: number;
|
||||
connections: ConnectionDetail[];
|
||||
}
|
||||
|
||||
export default function EmergencyCleanupPage() {
|
||||
const [connectionData, setConnectionData] = useState<ConnectionData | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 獲取連線詳情
|
||||
const fetchConnectionDetails = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/emergency-cleanup?action=details');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setConnectionData(data.data);
|
||||
setMessage('連線詳情更新成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取連線詳情失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 執行緊急清理
|
||||
const executeEmergencyCleanup = async () => {
|
||||
if (!confirm('確定要執行緊急清理嗎?這會關閉所有資料庫連線!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/emergency-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'cleanup' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('緊急清理完成');
|
||||
setError('');
|
||||
await fetchConnectionDetails(); // 重新獲取詳情
|
||||
} else {
|
||||
setError(data.error || '緊急清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('緊急清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 強制殺死所有連線
|
||||
const forceKillAllConnections = async () => {
|
||||
if (!confirm('確定要強制殺死所有連線嗎?這會立即終止所有資料庫連線!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/emergency-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'kill-all' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage('強制殺死連線完成');
|
||||
setError('');
|
||||
await fetchConnectionDetails(); // 重新獲取詳情
|
||||
} else {
|
||||
setError(data.error || '強制殺死連線失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('強制殺死連線錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取連線詳情
|
||||
useEffect(() => {
|
||||
fetchConnectionDetails();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-red-600">緊急連線清理</h1>
|
||||
<p className="text-muted-foreground">
|
||||
緊急清理和強制關閉資料庫連線
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchConnectionDetails}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
|
||||
重新整理
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 警告提示 */}
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>警告:</strong> 這些操作會立即關閉所有資料庫連線,可能影響正在運行的應用程式。請謹慎使用!
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{/* 連線統計 */}
|
||||
{connectionData && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
當前連線狀態
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
資料庫連線的詳細信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||||
總連線數: {connectionData.connectionCount}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={connectionData.connectionCount > 10 ? "destructive" : "default"}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
狀態: {connectionData.connectionCount > 10 ? "異常" : "正常"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 緊急操作 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<Zap className="h-5 w-5" />
|
||||
緊急操作
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
立即清理和關閉資料庫連線
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Button
|
||||
onClick={executeEmergencyCleanup}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
緊急清理連線
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={forceKillAllConnections}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertTriangle className="h-4 w-4" />}
|
||||
強制殺死所有連線
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 連線詳情列表 */}
|
||||
{connectionData && connectionData.connections.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>連線詳情列表</CardTitle>
|
||||
<CardDescription>
|
||||
當前所有資料庫連線的詳細信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{connectionData.connections.map((conn, index) => (
|
||||
<div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline">#{conn.ID}</Badge>
|
||||
<div>
|
||||
<p className="text-sm font-medium">
|
||||
用戶: {conn.USER} | 主機: {conn.HOST}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
資料庫: {conn.DB} | 命令: {conn.COMMAND}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
時間: {conn.TIME}s | 狀態: {conn.STATE}
|
||||
</p>
|
||||
{conn.INFO && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<Database className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>使用說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>緊急清理連線:</strong> 停止監控並關閉所有連線池,這是較溫和的方式</p>
|
||||
<p>• <strong>強制殺死所有連線:</strong> 直接殺死資料庫中的所有連線,這是更激進的方式</p>
|
||||
<p>• <strong>重新整理:</strong> 獲取最新的連線狀態和詳情</p>
|
||||
<p>• 建議先嘗試「緊急清理連線」,如果無效再使用「強制殺死所有連線」</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,442 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap, Globe } from 'lucide-react';
|
||||
|
||||
interface ConnectionDetail {
|
||||
ID: number;
|
||||
USER: string;
|
||||
HOST: string;
|
||||
DB: string;
|
||||
COMMAND: string;
|
||||
TIME: number;
|
||||
STATE: string;
|
||||
INFO?: string;
|
||||
}
|
||||
|
||||
interface ConnectionStatus {
|
||||
ip: string;
|
||||
connectionCount: number;
|
||||
connections: ConnectionDetail[];
|
||||
}
|
||||
|
||||
interface LocalStats {
|
||||
clientIP: string;
|
||||
trackedConnections: number;
|
||||
connections: Array<{
|
||||
connectionId: string;
|
||||
createdAt: string;
|
||||
lastUsed: string;
|
||||
userAgent?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default function IPCleanupPage() {
|
||||
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
|
||||
const [localStats, setLocalStats] = useState<LocalStats | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
const [targetIP, setTargetIP] = useState<string>('');
|
||||
|
||||
// 獲取當前 IP 的連線狀態
|
||||
const fetchCurrentIPStatus = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup?action=status');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setConnectionStatus(data.data);
|
||||
setMessage('當前 IP 連線狀態更新成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取當前 IP 連線狀態失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 獲取指定 IP 的連線狀態
|
||||
const fetchSpecificIPStatus = async () => {
|
||||
if (!targetIP.trim()) {
|
||||
setError('請輸入目標 IP 地址');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`/api/ip-cleanup?action=status-specific&ip=${encodeURIComponent(targetIP)}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setConnectionStatus(data.data);
|
||||
setMessage(`指定 IP ${targetIP} 的連線狀態更新成功`);
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取指定 IP 連線狀態失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 獲取本地連線統計
|
||||
const fetchLocalStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup?action=local-stats');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setLocalStats(data.data);
|
||||
setMessage('本地連線統計更新成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取本地連線統計失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 清理當前 IP 的連線
|
||||
const cleanupCurrentIP = async () => {
|
||||
if (!confirm('確定要清理當前 IP 的所有連線嗎?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'cleanup-current' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(data.message || '當前 IP 連線清理完成');
|
||||
setError('');
|
||||
await fetchCurrentIPStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError(data.error || '當前 IP 連線清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('當前 IP 連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 清理指定 IP 的連線
|
||||
const cleanupSpecificIP = async () => {
|
||||
if (!targetIP.trim()) {
|
||||
setError('請輸入目標 IP 地址');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`確定要清理 IP ${targetIP} 的所有連線嗎?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: 'cleanup-specific',
|
||||
targetIP: targetIP.trim()
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(data.message || `IP ${targetIP} 連線清理完成`);
|
||||
setError('');
|
||||
await fetchSpecificIPStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError(data.error || `IP ${targetIP} 連線清理失敗`);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(`IP ${targetIP} 連線清理錯誤: ` + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 清理本地追蹤的連線
|
||||
const cleanupLocalConnections = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'cleanup-local' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(data.message || '本地連線清理完成');
|
||||
setError('');
|
||||
await fetchLocalStats(); // 重新獲取統計
|
||||
} else {
|
||||
setError(data.error || '本地連線清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('本地連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取狀態
|
||||
useEffect(() => {
|
||||
fetchCurrentIPStatus();
|
||||
fetchLocalStats();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">IP 連線管理</h1>
|
||||
<p className="text-muted-foreground">
|
||||
基於 IP 地址的智能連線清理和管理
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={fetchCurrentIPStatus}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
|
||||
當前 IP
|
||||
</Button>
|
||||
<Button
|
||||
onClick={fetchLocalStats}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||||
本地統計
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 當前 IP 連線狀態 */}
|
||||
{connectionStatus && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Globe className="h-5 w-5" />
|
||||
IP 連線狀態
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
IP: {connectionStatus.ip} | 連線數: {connectionStatus.connectionCount}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||||
連線數: {connectionStatus.connectionCount}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={connectionStatus.connectionCount > 5 ? "destructive" : "default"}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
狀態: {connectionStatus.connectionCount > 5 ? "異常" : "正常"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 本地連線統計 */}
|
||||
{localStats && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
本地連線統計
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
客戶端 IP: {localStats.clientIP} | 追蹤連線數: {localStats.trackedConnections}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{localStats.connections.map((conn, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-2 border rounded">
|
||||
<div>
|
||||
<p className="text-sm font-medium">連線 ID: {conn.connectionId}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
創建: {new Date(conn.createdAt).toLocaleString()} |
|
||||
最後使用: {new Date(conn.lastUsed).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 操作按鈕 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trash2 className="h-5 w-5" />
|
||||
IP 連線清理
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
清理指定 IP 地址的資料庫連線
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Button
|
||||
onClick={cleanupCurrentIP}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
清理當前 IP 連線
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={cleanupLocalConnections}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||||
清理本地追蹤連線
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 指定 IP 清理 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="targetIP">指定 IP 地址</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="targetIP"
|
||||
value={targetIP}
|
||||
onChange={(e) => setTargetIP(e.target.value)}
|
||||
placeholder="例如: 192.168.1.100"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
onClick={fetchSpecificIPStatus}
|
||||
disabled={loading || !targetIP.trim()}
|
||||
variant="outline"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={cleanupSpecificIP}
|
||||
disabled={loading || !targetIP.trim()}
|
||||
variant="destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 連線詳情列表 */}
|
||||
{connectionStatus && connectionStatus.connections.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>連線詳情列表</CardTitle>
|
||||
<CardDescription>
|
||||
IP {connectionStatus.ip} 的所有資料庫連線
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{connectionStatus.connections.map((conn, index) => (
|
||||
<div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline">#{conn.ID}</Badge>
|
||||
<div>
|
||||
<p className="text-sm font-medium">
|
||||
用戶: {conn.USER} | 主機: {conn.HOST}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
資料庫: {conn.DB} | 命令: {conn.COMMAND}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
時間: {conn.TIME}s | 狀態: {conn.STATE}
|
||||
</p>
|
||||
{conn.INFO && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<Database className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>IP 連線管理說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>當前 IP 連線:</strong> 顯示和清理當前訪問者的所有資料庫連線</p>
|
||||
<p>• <strong>指定 IP 連線:</strong> 輸入特定 IP 地址來查看和清理該 IP 的連線</p>
|
||||
<p>• <strong>本地追蹤連線:</strong> 清理應用程式內部追蹤的連線記錄</p>
|
||||
<p>• <strong>智能清理:</strong> 只清理指定 IP 的連線,不影響其他用戶</p>
|
||||
<p>• <strong>關閉網站時:</strong> 系統會自動清理當前 IP 的所有連線</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,195 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { CheckCircle, Edit, Loader2 } from "lucide-react"
|
||||
|
||||
export default function ScoringFormTestPage() {
|
||||
const [showScoringForm, setShowScoringForm] = useState(false)
|
||||
const [manualScoring, setManualScoring] = useState({
|
||||
judgeId: "judge1",
|
||||
participantId: "app1",
|
||||
scores: {
|
||||
"創新性": 0,
|
||||
"技術性": 0,
|
||||
"實用性": 0,
|
||||
"展示效果": 0,
|
||||
"影響力": 0
|
||||
},
|
||||
comments: ""
|
||||
})
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const scoringRules = [
|
||||
{ name: "創新性", description: "技術創新程度和獨特性", weight: 25 },
|
||||
{ name: "技術性", description: "技術實現的複雜度和穩定性", weight: 20 },
|
||||
{ name: "實用性", description: "實際應用價值和用戶體驗", weight: 25 },
|
||||
{ name: "展示效果", description: "演示效果和表達能力", weight: 15 },
|
||||
{ name: "影響力", description: "對行業和社會的潛在影響", weight: 15 }
|
||||
]
|
||||
|
||||
const calculateTotalScore = (scores: Record<string, number>): number => {
|
||||
let totalScore = 0
|
||||
let totalWeight = 0
|
||||
|
||||
scoringRules.forEach(rule => {
|
||||
const score = scores[rule.name] || 0
|
||||
const weight = rule.weight || 1
|
||||
totalScore += score * weight
|
||||
totalWeight += weight
|
||||
})
|
||||
|
||||
return totalWeight > 0 ? Math.round(totalScore / totalWeight) : 0
|
||||
}
|
||||
|
||||
const handleSubmitScore = async () => {
|
||||
setIsLoading(true)
|
||||
// 模擬提交
|
||||
setTimeout(() => {
|
||||
setIsLoading(false)
|
||||
setShowScoringForm(false)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold">評分表單測試</h1>
|
||||
<p className="text-gray-600">測試完整的評分表單功能</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>評分表單演示</CardTitle>
|
||||
<CardDescription>點擊按鈕查看完整的評分表單</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => setShowScoringForm(true)} size="lg">
|
||||
<Edit className="w-5 h-5 mr-2" />
|
||||
開啟評分表單
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={showScoringForm} onOpenChange={setShowScoringForm}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<Edit className="w-5 h-5" />
|
||||
<span>評分表單</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
為參賽者進行評分,請根據各項指標進行評分
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* 評分項目 */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">評分項目</h3>
|
||||
{scoringRules.map((rule, index) => (
|
||||
<div key={index} className="space-y-4 p-6 border rounded-lg bg-white shadow-sm">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<Label className="text-lg font-semibold text-gray-900">{rule.name}</Label>
|
||||
<p className="text-sm text-gray-600 mt-2 leading-relaxed">{rule.description}</p>
|
||||
<p className="text-xs text-purple-600 mt-2 font-medium">權重:{rule.weight}%</p>
|
||||
</div>
|
||||
<div className="text-right ml-4">
|
||||
<span className="text-2xl font-bold text-blue-600">
|
||||
{manualScoring.scores[rule.name] || 0} / 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 評分按鈕 */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{Array.from({ length: 10 }, (_, i) => i + 1).map((score) => (
|
||||
<button
|
||||
key={score}
|
||||
type="button"
|
||||
onClick={() => setManualScoring({
|
||||
...manualScoring,
|
||||
scores: { ...manualScoring.scores, [rule.name]: score }
|
||||
})}
|
||||
className={`w-12 h-12 rounded-lg border-2 font-semibold text-lg transition-all duration-200 ${
|
||||
(manualScoring.scores[rule.name] || 0) === score
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-lg scale-105'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:scale-105'
|
||||
}`}
|
||||
>
|
||||
{score}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 總分顯示 */}
|
||||
<div className="p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg border-2 border-blue-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<span className="text-xl font-bold text-gray-900">總分</span>
|
||||
<p className="text-sm text-gray-600 mt-1">根據權重計算的綜合評分</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-4xl font-bold text-blue-600">
|
||||
{calculateTotalScore(manualScoring.scores)}
|
||||
</span>
|
||||
<span className="text-xl text-gray-500 font-medium">/ 10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 評審意見 */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-lg font-semibold">評審意見 *</Label>
|
||||
<Textarea
|
||||
placeholder="請詳細填寫評審意見、優點分析、改進建議等..."
|
||||
value={manualScoring.comments}
|
||||
onChange={(e) => setManualScoring({ ...manualScoring, comments: e.target.value })}
|
||||
rows={6}
|
||||
className="min-h-[120px] resize-none"
|
||||
/>
|
||||
<p className="text-xs text-gray-500">請提供具體的評審意見,包括項目的優點、不足之處和改進建議</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-4 pt-6 border-t border-gray-200">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => setShowScoringForm(false)}
|
||||
className="px-8"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmitScore}
|
||||
disabled={isLoading}
|
||||
size="lg"
|
||||
className="px-8 bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 mr-2 animate-spin" />
|
||||
提交中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle className="w-5 h-5 mr-2" />
|
||||
提交評分
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
@@ -1,13 +0,0 @@
|
||||
import { ScoringManagement } from "@/components/admin/scoring-management"
|
||||
|
||||
export default function ScoringTestPage() {
|
||||
return (
|
||||
<div className="container mx-auto py-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold">評分管理測試</h1>
|
||||
<p className="text-gray-600">測試動態評分項目功能</p>
|
||||
</div>
|
||||
<ScoringManagement />
|
||||
</div>
|
||||
)
|
||||
}
|
@@ -1,13 +0,0 @@
|
||||
import { ScoringManagement } from "@/components/admin/scoring-management"
|
||||
|
||||
export default function ScoringPage() {
|
||||
return (
|
||||
<div className="container mx-auto py-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold">評分管理</h1>
|
||||
<p className="text-gray-600">管理競賽評分,查看已完成和未完成的評分內容</p>
|
||||
</div>
|
||||
<ScoringManagement />
|
||||
</div>
|
||||
)
|
||||
}
|
@@ -1,314 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap, Skull } from 'lucide-react';
|
||||
|
||||
interface ConnectionStatus {
|
||||
currentConnections: number;
|
||||
maxConnections: number;
|
||||
usagePercentage: number;
|
||||
connectionDetails: Array<{
|
||||
ID: number;
|
||||
USER: string;
|
||||
HOST: string;
|
||||
DB: string;
|
||||
COMMAND: string;
|
||||
TIME: number;
|
||||
STATE: string;
|
||||
INFO?: string;
|
||||
}>;
|
||||
connectionCount: number;
|
||||
}
|
||||
|
||||
export default function UltimateKillPage() {
|
||||
const [status, setStatus] = useState<ConnectionStatus | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 獲取連線狀態
|
||||
const fetchStatus = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ultimate-kill?action=status');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setStatus(data.data);
|
||||
setMessage('狀態更新成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取狀態失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 終極清理 - 殺死所有連線
|
||||
const ultimateKill = async () => {
|
||||
if (!confirm('確定要執行終極清理嗎?這會強制殺死所有資料庫連線!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ultimate-kill', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'kill-all' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(data.message || '終極清理完成');
|
||||
setError('');
|
||||
await fetchStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError(data.error || '終極清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('終極清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 強制重啟資料庫連線
|
||||
const forceRestart = async () => {
|
||||
if (!confirm('確定要強制重啟資料庫連線嗎?這會先殺死所有連線然後重新建立!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ultimate-kill', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'restart' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(data.message || '強制重啟完成');
|
||||
setError('');
|
||||
await fetchStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError(data.error || '強制重啟失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('強制重啟錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取狀態
|
||||
useEffect(() => {
|
||||
fetchStatus();
|
||||
|
||||
// 每10秒自動更新狀態
|
||||
const interval = setInterval(fetchStatus, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-red-600">終極連線清理</h1>
|
||||
<p className="text-muted-foreground">
|
||||
強制殺死所有資料庫連線 - 最後手段
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchStatus}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
|
||||
重新整理
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 嚴重警告 */}
|
||||
<Alert variant="destructive">
|
||||
<Skull className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>嚴重警告:</strong> 這些操作會立即強制殺死所有資料庫連線,可能導致正在運行的應用程式崩潰。請確保沒有重要操作正在進行!
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{/* 連線狀態概覽 */}
|
||||
{status && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5 text-blue-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">總連線數</p>
|
||||
<p className="text-2xl font-bold">{status.currentConnections}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">最大連線數</p>
|
||||
<p className="text-2xl font-bold">{status.maxConnections}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-red-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">使用率</p>
|
||||
<p className="text-2xl font-bold">{status.usagePercentage.toFixed(1)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-5 w-5 text-green-500" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">狀態</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{status.connectionCount <= 1 ? '正常' : '異常'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 終極操作 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<Skull className="h-5 w-5" />
|
||||
終極操作
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
強制殺死所有資料庫連線 - 最後手段
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Button
|
||||
onClick={ultimateKill}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Skull className="h-4 w-4" />}
|
||||
終極清理 - 殺死所有連線
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={forceRestart}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Zap className="h-4 w-4" />}
|
||||
強制重啟資料庫連線
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 連線詳情列表 */}
|
||||
{status && status.connectionDetails.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>連線詳情列表</CardTitle>
|
||||
<CardDescription>
|
||||
當前所有資料庫連線的詳細信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{status.connectionDetails.map((conn, index) => (
|
||||
<div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline">#{conn.ID}</Badge>
|
||||
<div>
|
||||
<p className="text-sm font-medium">
|
||||
用戶: {conn.USER} | 主機: {conn.HOST}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
資料庫: {conn.DB} | 命令: {conn.COMMAND}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
時間: {conn.TIME}s | 狀態: {conn.STATE}
|
||||
</p>
|
||||
{conn.INFO && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<Database className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>終極清理說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>終極清理:</strong> 直接殺死資料庫中的所有連線,立即生效</p>
|
||||
<p>• <strong>強制重啟:</strong> 先殺死所有連線,等待系統穩定,然後重新建立連線</p>
|
||||
<p>• <strong>自動更新:</strong> 頁面每10秒自動更新連線狀態</p>
|
||||
<p>• <strong>最後手段:</strong> 這些操作是最後的手段,會立即終止所有連線</p>
|
||||
<p>• 建議先嘗試「終極清理」,如果問題持續再使用「強制重啟」</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,122 +0,0 @@
|
||||
// =====================================================
|
||||
// 連線監控 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { smartPool } from '@/lib/smart-connection-pool';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const action = searchParams.get('action') || 'stats';
|
||||
|
||||
switch (action) {
|
||||
case 'stats':
|
||||
// 獲取連線統計
|
||||
const stats = smartPool.getConnectionStats();
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線統計獲取成功',
|
||||
data: stats
|
||||
});
|
||||
|
||||
case 'cleanup':
|
||||
// 強制清理連線
|
||||
console.log('🧹 執行強制連線清理...');
|
||||
smartPool.forceCleanup();
|
||||
const newStats = smartPool.getConnectionStats();
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線清理完成',
|
||||
data: newStats
|
||||
});
|
||||
|
||||
case 'test':
|
||||
// 測試智能連線
|
||||
try {
|
||||
const testResult = await smartPool.executeQueryOne(
|
||||
'SELECT 1 as test_value',
|
||||
[],
|
||||
{ userId: 'test', sessionId: 'test-session', requestId: 'test-request' }
|
||||
);
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '智能連線測試成功',
|
||||
data: {
|
||||
testResult,
|
||||
stats: smartPool.getConnectionStats()
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '智能連線測試失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['stats', 'cleanup', 'test']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 連線監控 API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: 'API 請求失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { action, maxIdleTime, maxConnectionAge } = body;
|
||||
|
||||
switch (action) {
|
||||
case 'config':
|
||||
// 更新清理配置
|
||||
smartPool.setCleanupParams(maxIdleTime, maxConnectionAge);
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '清理配置更新成功',
|
||||
data: {
|
||||
maxIdleTime: maxIdleTime || '未變更',
|
||||
maxConnectionAge: maxConnectionAge || '未變更'
|
||||
}
|
||||
});
|
||||
|
||||
case 'cleanup':
|
||||
// 強制清理連線
|
||||
console.log('🧹 執行強制連線清理...');
|
||||
smartPool.forceCleanup();
|
||||
const stats = smartPool.getConnectionStats();
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線清理完成',
|
||||
data: stats
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['config', 'cleanup']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 連線監控 POST API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: 'API 請求失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,59 +0,0 @@
|
||||
// =====================================================
|
||||
// IP 調試 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { smartIPDetector } from '@/lib/smart-ip-detector';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// 使用智能 IP 偵測器
|
||||
const ipDetection = smartIPDetector.detectClientIP(request);
|
||||
|
||||
// 收集所有可能的 IP 信息
|
||||
const ipInfo = {
|
||||
// 智能偵測結果
|
||||
smartDetection: ipDetection,
|
||||
// 請求標頭
|
||||
headers: {
|
||||
'x-forwarded-for': request.headers.get('x-forwarded-for'),
|
||||
'x-real-ip': request.headers.get('x-real-ip'),
|
||||
'cf-connecting-ip': request.headers.get('cf-connecting-ip'),
|
||||
'x-client-ip': request.headers.get('x-client-ip'),
|
||||
'x-forwarded': request.headers.get('x-forwarded'),
|
||||
'x-cluster-client-ip': request.headers.get('x-cluster-client-ip'),
|
||||
'x-original-forwarded-for': request.headers.get('x-original-forwarded-for'),
|
||||
'x-remote-addr': request.headers.get('x-remote-addr'),
|
||||
'remote-addr': request.headers.get('remote-addr'),
|
||||
'client-ip': request.headers.get('client-ip'),
|
||||
'user-agent': request.headers.get('user-agent'),
|
||||
'host': request.headers.get('host'),
|
||||
},
|
||||
// NextRequest 的 IP
|
||||
nextRequestIP: request.ip,
|
||||
// 環境變數
|
||||
env: {
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
VERCEL: process.env.VERCEL,
|
||||
VERCEL_REGION: process.env.VERCEL_REGION,
|
||||
},
|
||||
// 所有標頭(用於調試)
|
||||
allHeaders: Object.fromEntries(request.headers.entries()),
|
||||
};
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: 'IP 調試信息獲取成功',
|
||||
data: ipInfo,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ IP 調試 API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: 'IP 調試失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,45 +0,0 @@
|
||||
// =====================================================
|
||||
// 調試競賽 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { CompetitionService } from '@/lib/services/database-service';
|
||||
|
||||
// 獲取所有競賽和當前競賽狀態
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// 獲取所有競賽
|
||||
const allCompetitions = await CompetitionService.getAllCompetitions();
|
||||
|
||||
// 獲取當前競賽
|
||||
const currentCompetition = await CompetitionService.getCurrentCompetition();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
allCompetitions: allCompetitions.map(c => ({
|
||||
id: c.id,
|
||||
name: c.name,
|
||||
status: c.status,
|
||||
is_current: c.is_current,
|
||||
is_active: c.is_active
|
||||
})),
|
||||
currentCompetition: currentCompetition ? {
|
||||
id: currentCompetition.id,
|
||||
name: currentCompetition.name,
|
||||
status: currentCompetition.status,
|
||||
is_current: currentCompetition.is_current,
|
||||
is_active: currentCompetition.is_active
|
||||
} : null
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('調試競賽失敗:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
message: '調試競賽失敗',
|
||||
error: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
54
app/api/debug/env/route.ts
vendored
54
app/api/debug/env/route.ts
vendored
@@ -1,54 +0,0 @@
|
||||
// =====================================================
|
||||
// 環境變數調試 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
console.log('🔍 檢查 Next.js 中的環境變數...');
|
||||
|
||||
// 檢查所有相關的環境變數
|
||||
const envVars = {
|
||||
DB_HOST: process.env.DB_HOST,
|
||||
DB_PORT: process.env.DB_PORT,
|
||||
DB_NAME: process.env.DB_NAME,
|
||||
DB_USER: process.env.DB_USER,
|
||||
DB_PASSWORD: process.env.DB_PASSWORD ? '***' : undefined,
|
||||
SLAVE_DB_HOST: process.env.SLAVE_DB_HOST,
|
||||
SLAVE_DB_PORT: process.env.SLAVE_DB_PORT,
|
||||
SLAVE_DB_NAME: process.env.SLAVE_DB_NAME,
|
||||
SLAVE_DB_USER: process.env.SLAVE_DB_USER,
|
||||
SLAVE_DB_PASSWORD: process.env.SLAVE_DB_PASSWORD ? '***' : undefined,
|
||||
DB_DUAL_WRITE_ENABLED: process.env.DB_DUAL_WRITE_ENABLED,
|
||||
DB_MASTER_PRIORITY: process.env.DB_MASTER_PRIORITY,
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
};
|
||||
|
||||
console.log('📋 Next.js 環境變數檢查結果:');
|
||||
Object.entries(envVars).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
console.log(`✅ ${key}: ${value}`);
|
||||
} else {
|
||||
console.log(`❌ ${key}: undefined`);
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '環境變數檢查完成',
|
||||
data: {
|
||||
envVars,
|
||||
timestamp: new Date().toISOString(),
|
||||
nodeEnv: process.env.NODE_ENV,
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('❌ 環境變數檢查失敗:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
message: '環境變數檢查失敗',
|
||||
error: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,44 +0,0 @@
|
||||
// =====================================================
|
||||
// 簡單環境變數測試
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// 直接檢查環境變數
|
||||
const envCheck = {
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
DB_HOST: process.env.DB_HOST,
|
||||
DB_PORT: process.env.DB_PORT,
|
||||
DB_NAME: process.env.DB_NAME,
|
||||
DB_USER: process.env.DB_USER,
|
||||
DB_PASSWORD: process.env.DB_PASSWORD ? '***' : undefined,
|
||||
// 檢查所有可能的環境變數
|
||||
ALL_ENV_KEYS: Object.keys(process.env).filter(key => key.startsWith('DB_')),
|
||||
};
|
||||
|
||||
console.log('🔍 環境變數檢查:');
|
||||
console.log('NODE_ENV:', process.env.NODE_ENV);
|
||||
console.log('DB_HOST:', process.env.DB_HOST);
|
||||
console.log('DB_PORT:', process.env.DB_PORT);
|
||||
console.log('DB_NAME:', process.env.DB_NAME);
|
||||
console.log('DB_USER:', process.env.DB_USER);
|
||||
console.log('DB_PASSWORD:', process.env.DB_PASSWORD ? '***' : 'undefined');
|
||||
console.log('所有 DB_ 開頭的環境變數:', Object.keys(process.env).filter(key => key.startsWith('DB_')));
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '環境變數檢查完成',
|
||||
data: envCheck,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('❌ 環境變數檢查失敗:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
message: '環境變數檢查失敗',
|
||||
error: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,104 +0,0 @@
|
||||
// =====================================================
|
||||
// 緊急連線清理 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { emergencyCleanup } from '@/lib/emergency-connection-cleanup';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { action } = body;
|
||||
|
||||
switch (action) {
|
||||
case 'cleanup':
|
||||
// 執行緊急清理
|
||||
console.log('🚨 收到緊急清理請求');
|
||||
await emergencyCleanup.emergencyCleanup();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '緊急清理完成',
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
case 'kill-all':
|
||||
// 強制殺死所有連線
|
||||
console.log('💀 收到強制殺死連線請求');
|
||||
await emergencyCleanup.forceKillAllConnections();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '強制殺死連線完成',
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
case 'details':
|
||||
// 獲取連線詳情
|
||||
const connections = await emergencyCleanup.getConnectionDetails();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線詳情獲取成功',
|
||||
data: {
|
||||
connectionCount: connections.length,
|
||||
connections: connections
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['cleanup', 'kill-all', 'details']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 緊急清理 API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '緊急清理失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const action = searchParams.get('action') || 'details';
|
||||
|
||||
switch (action) {
|
||||
case 'details':
|
||||
// 獲取連線詳情
|
||||
const connections = await emergencyCleanup.getConnectionDetails();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線詳情獲取成功',
|
||||
data: {
|
||||
connectionCount: connections.length,
|
||||
connections: connections
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['details']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 緊急清理 GET API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '獲取連線詳情失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,177 +0,0 @@
|
||||
// =====================================================
|
||||
// 基於 IP 的連線清理 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { smartIPPool } from '@/lib/smart-ip-connection-pool';
|
||||
import { smartIPDetector } from '@/lib/smart-ip-detector';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { action, targetIP } = body;
|
||||
// 使用智能 IP 偵測器
|
||||
const ipDetection = smartIPDetector.detectClientIP(request);
|
||||
const clientIP = ipDetection.detectedIP;
|
||||
|
||||
console.log('🎯 智能 IP 偵測結果:', {
|
||||
detectedIP: clientIP,
|
||||
confidence: ipDetection.confidence,
|
||||
source: ipDetection.source,
|
||||
isPublicIP: ipDetection.isPublicIP,
|
||||
allCandidates: ipDetection.allCandidates
|
||||
});
|
||||
|
||||
// 設置客戶端 IP
|
||||
smartIPPool.setClientIP(clientIP);
|
||||
|
||||
switch (action) {
|
||||
case 'cleanup-current':
|
||||
// 清理當前 IP 的連線
|
||||
console.log(`🧹 收到清理當前 IP 連線請求: ${clientIP}`);
|
||||
const cleanupResult = await smartIPPool.cleanupCurrentIPConnections();
|
||||
|
||||
return NextResponse.json({
|
||||
success: cleanupResult.success,
|
||||
message: cleanupResult.message,
|
||||
data: {
|
||||
clientIP,
|
||||
killedCount: cleanupResult.killedCount
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
case 'cleanup-specific':
|
||||
// 清理指定 IP 的連線
|
||||
if (!targetIP) {
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '缺少目標 IP 參數'
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
console.log(`🧹 收到清理指定 IP 連線請求: ${targetIP}`);
|
||||
const specificCleanupResult = await smartIPPool.cleanupIPConnections(targetIP);
|
||||
|
||||
return NextResponse.json({
|
||||
success: specificCleanupResult.success,
|
||||
message: specificCleanupResult.message,
|
||||
data: {
|
||||
targetIP,
|
||||
killedCount: specificCleanupResult.killedCount
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
case 'cleanup-local':
|
||||
// 清理本地追蹤的連線
|
||||
console.log('🧹 收到清理本地連線請求');
|
||||
const localCleanupCount = smartIPPool.cleanupLocalConnections();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: `已清理 ${localCleanupCount} 個本地追蹤的連線`,
|
||||
data: {
|
||||
clientIP,
|
||||
cleanedCount: localCleanupCount
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['cleanup-current', 'cleanup-specific', 'cleanup-local']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ IP 清理 API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: 'IP 清理失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const action = searchParams.get('action') || 'status';
|
||||
const targetIP = searchParams.get('ip');
|
||||
// 使用智能 IP 偵測器
|
||||
const ipDetection = smartIPDetector.detectClientIP(request);
|
||||
const clientIP = ipDetection.detectedIP;
|
||||
|
||||
// 設置客戶端 IP
|
||||
smartIPPool.setClientIP(clientIP);
|
||||
|
||||
switch (action) {
|
||||
case 'status':
|
||||
// 獲取當前 IP 的連線狀態
|
||||
const currentIPStatus = await smartIPPool.getCurrentIPConnections();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線狀態獲取成功',
|
||||
data: {
|
||||
detectedIP: clientIP,
|
||||
...currentIPStatus
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
case 'status-specific':
|
||||
// 獲取指定 IP 的連線狀態
|
||||
if (!targetIP) {
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '缺少目標 IP 參數'
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
const specificIPStatus = await smartIPPool.getIPConnections(targetIP);
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '指定 IP 連線狀態獲取成功',
|
||||
data: {
|
||||
targetIP,
|
||||
...specificIPStatus
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
case 'local-stats':
|
||||
// 獲取本地連線統計
|
||||
const localStats = smartIPPool.getLocalConnectionStats();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '本地連線統計獲取成功',
|
||||
data: {
|
||||
detectedIP: clientIP,
|
||||
...localStats
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['status', 'status-specific', 'local-stats']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ IP 清理 GET API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '獲取連線狀態失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,78 +0,0 @@
|
||||
// =====================================================
|
||||
// 手動設置客戶端 IP API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { smartIPPool } from '@/lib/smart-ip-connection-pool';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { clientIP } = body;
|
||||
|
||||
if (!clientIP) {
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '缺少客戶端 IP 參數'
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
console.log('🔧 手動設置客戶端 IP:', clientIP);
|
||||
|
||||
// 設置客戶端 IP
|
||||
smartIPPool.setClientIP(clientIP);
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: `客戶端 IP 已設置為: ${clientIP}`,
|
||||
data: {
|
||||
clientIP,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 設置客戶端 IP 失敗:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '設置客戶端 IP 失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const clientIP = searchParams.get('ip');
|
||||
|
||||
if (!clientIP) {
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '缺少 IP 參數'
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
console.log('🔧 通過 GET 設置客戶端 IP:', clientIP);
|
||||
|
||||
// 設置客戶端 IP
|
||||
smartIPPool.setClientIP(clientIP);
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: `客戶端 IP 已設置為: ${clientIP}`,
|
||||
data: {
|
||||
clientIP,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 設置客戶端 IP 失敗:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '設置客戶端 IP 失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,59 +0,0 @@
|
||||
// =====================================================
|
||||
// 智能連線清理 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { smartConnectionCleaner } from '@/lib/smart-connection-cleaner';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
console.log('🧠 收到智能清理請求');
|
||||
|
||||
// 執行智能清理
|
||||
const result = await smartConnectionCleaner.smartCleanup(request);
|
||||
|
||||
return NextResponse.json({
|
||||
success: result.success,
|
||||
message: result.message,
|
||||
data: {
|
||||
killedCount: result.killedCount,
|
||||
details: result.details,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 智能清理 API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '智能清理失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
console.log('📊 收到連線統計請求');
|
||||
|
||||
// 獲取連線統計
|
||||
const stats = await smartConnectionCleaner.getConnectionStats();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線統計獲取成功',
|
||||
data: {
|
||||
stats,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 連線統計 API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '獲取連線統計失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,38 +0,0 @@
|
||||
// =====================================================
|
||||
// 資料庫連接測試 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { db } from '@/lib/database';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// 測試基本查詢
|
||||
const result = await db.query('SELECT 1 as test');
|
||||
|
||||
// 測試競賽表
|
||||
const competitions = await db.query('SELECT id, name, type FROM competitions WHERE is_active = TRUE LIMIT 3');
|
||||
|
||||
// 測試評審表
|
||||
const judges = await db.query('SELECT id, name, title FROM judges WHERE is_active = TRUE LIMIT 3');
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '資料庫連接測試成功',
|
||||
data: {
|
||||
basicQuery: result,
|
||||
competitions: competitions,
|
||||
judges: judges
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 資料庫連接測試失敗:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
message: '資料庫連接測試失敗',
|
||||
error: error instanceof Error ? error.message : '未知錯誤',
|
||||
stack: error instanceof Error ? error.stack : undefined
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,100 +0,0 @@
|
||||
// =====================================================
|
||||
// 測試資料庫關閉機制 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { dbShutdownManager } from '@/lib/database-shutdown-manager';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const action = searchParams.get('action') || 'status';
|
||||
|
||||
switch (action) {
|
||||
case 'status':
|
||||
// 獲取關閉狀態
|
||||
const status = dbShutdownManager.getShutdownStatus();
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '關閉狀態查詢成功',
|
||||
data: status
|
||||
});
|
||||
|
||||
case 'test':
|
||||
// 測試關閉機制(不會真的關閉)
|
||||
console.log('🧪 測試關閉機制...');
|
||||
const testStatus = dbShutdownManager.getShutdownStatus();
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '關閉機制測試成功',
|
||||
data: {
|
||||
...testStatus,
|
||||
testTime: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
|
||||
case 'force':
|
||||
// 強制關閉(僅用於測試)
|
||||
console.log('🚨 執行強制關閉測試...');
|
||||
dbShutdownManager.forceShutdown();
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '強制關閉測試完成',
|
||||
data: {
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['status', 'test', 'force']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 測試關閉機制時發生錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '測試失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { action } = body;
|
||||
|
||||
switch (action) {
|
||||
case 'graceful':
|
||||
// 優雅關閉(僅用於測試)
|
||||
console.log('🔄 執行優雅關閉測試...');
|
||||
await dbShutdownManager.gracefulShutdown();
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '優雅關閉測試完成',
|
||||
data: {
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['graceful']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 執行關閉測試時發生錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '關閉測試失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,96 +0,0 @@
|
||||
// =====================================================
|
||||
// 終極連線清理 API
|
||||
// =====================================================
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { ultimateKiller } from '@/lib/ultimate-connection-killer';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { action } = body;
|
||||
|
||||
switch (action) {
|
||||
case 'kill-all':
|
||||
// 終極清理 - 殺死所有連線
|
||||
console.log('💀 收到終極清理請求');
|
||||
const killResult = await ultimateKiller.ultimateKill();
|
||||
|
||||
return NextResponse.json({
|
||||
success: killResult.success,
|
||||
message: killResult.message || '終極清理完成',
|
||||
data: killResult,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
case 'restart':
|
||||
// 強制重啟資料庫連線
|
||||
console.log('🔄 收到強制重啟請求');
|
||||
const restartResult = await ultimateKiller.forceRestart();
|
||||
|
||||
return NextResponse.json({
|
||||
success: restartResult.success,
|
||||
message: restartResult.message || '強制重啟完成',
|
||||
data: restartResult,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['kill-all', 'restart']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 終極清理 API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '終極清理失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const action = searchParams.get('action') || 'status';
|
||||
|
||||
switch (action) {
|
||||
case 'status':
|
||||
// 檢查連線狀態
|
||||
const status = await ultimateKiller.checkStatus();
|
||||
|
||||
if (status) {
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: '連線狀態獲取成功',
|
||||
data: status,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
} else {
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無法獲取連線狀態'
|
||||
}, { status: 500 });
|
||||
}
|
||||
|
||||
default:
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '無效的操作參數',
|
||||
availableActions: ['status']
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 終極清理 GET API 錯誤:', error);
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: '獲取連線狀態失敗',
|
||||
details: error instanceof Error ? error.message : '未知錯誤'
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
@@ -1,297 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, CheckCircle, AlertTriangle, RefreshCw, Trash2 } from 'lucide-react';
|
||||
|
||||
interface IPDetectionResult {
|
||||
detectedIP: string;
|
||||
confidence: 'high' | 'medium' | 'low';
|
||||
source: string;
|
||||
isPublicIP: boolean;
|
||||
allCandidates: string[];
|
||||
}
|
||||
|
||||
interface ConnectionStatus {
|
||||
ip: string;
|
||||
connectionCount: number;
|
||||
connections: any[];
|
||||
}
|
||||
|
||||
export default function AutoIPTestPage() {
|
||||
const [ipDetection, setIpDetection] = useState<IPDetectionResult | null>(null);
|
||||
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 自動偵測 IP
|
||||
const detectIP = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/debug-ip');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.data.smartDetection) {
|
||||
setIpDetection(data.data.smartDetection);
|
||||
setMessage(`IP 偵測成功: ${data.data.smartDetection.detectedIP}`);
|
||||
setError('');
|
||||
} else {
|
||||
setError('IP 偵測失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('IP 偵測錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 獲取連線狀態
|
||||
const getConnectionStatus = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup?action=status');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setConnectionStatus(data.data);
|
||||
setMessage(`連線狀態獲取成功: ${data.data.connectionCount} 個連線`);
|
||||
setError('');
|
||||
} else {
|
||||
setError('獲取連線狀態失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('獲取連線狀態錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 清理當前 IP 連線
|
||||
const cleanupConnections = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'cleanup-current' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(`清理成功: ${data.message}`);
|
||||
setError('');
|
||||
// 重新獲取連線狀態
|
||||
await getConnectionStatus();
|
||||
} else {
|
||||
setError(data.error || '清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時自動偵測
|
||||
useEffect(() => {
|
||||
detectIP();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">自動 IP 偵測測試</h1>
|
||||
<p className="text-muted-foreground">
|
||||
測試智能 IP 偵測和自動連線清理功能
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={detectIP}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||||
偵測 IP
|
||||
</Button>
|
||||
<Button
|
||||
onClick={getConnectionStatus}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||||
檢查連線
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IP 偵測結果 */}
|
||||
{ipDetection && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
智能 IP 偵測結果
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
系統自動偵測到的客戶端 IP 地址
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge
|
||||
variant={ipDetection.isPublicIP ? "default" : "secondary"}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
{ipDetection.detectedIP}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={
|
||||
ipDetection.confidence === 'high' ? "default" :
|
||||
ipDetection.confidence === 'medium' ? "secondary" : "destructive"
|
||||
}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
可信度: {ipDetection.confidence}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||||
來源: {ipDetection.source}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{ipDetection.allCandidates.length > 1 && (
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">所有候選 IP:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{ipDetection.allCandidates.map((ip, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant={ip === ipDetection.detectedIP ? "default" : "outline"}
|
||||
className="text-sm"
|
||||
>
|
||||
{ip}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 連線狀態 */}
|
||||
{connectionStatus && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
連線狀態
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
當前 IP 的資料庫連線狀態
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="default" className="text-lg px-3 py-1">
|
||||
IP: {connectionStatus.ip}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={connectionStatus.connectionCount > 0 ? "destructive" : "default"}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
連線數: {connectionStatus.connectionCount}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{connectionStatus.connections.length > 0 && (
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">連線詳情:</p>
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||
{connectionStatus.connections.map((conn, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-2 border rounded text-sm">
|
||||
<span>ID: {conn.ID}</span>
|
||||
<span>HOST: {conn.HOST}</span>
|
||||
<span>時間: {conn.TIME}s</span>
|
||||
<span>狀態: {conn.STATE || 'Sleep'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 操作按鈕 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>操作</CardTitle>
|
||||
<CardDescription>
|
||||
測試自動 IP 偵測和連線清理功能
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
onClick={cleanupConnections}
|
||||
disabled={loading || !ipDetection}
|
||||
variant="destructive"
|
||||
className="flex-1"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
清理我的連線
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={getConnectionStatus}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||||
重新檢查
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>使用說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>自動偵測:</strong> 頁面載入時會自動偵測你的 IP 地址</p>
|
||||
<p>• <strong>智能算法:</strong> 使用多種方法偵測最準確的 IP 地址</p>
|
||||
<p>• <strong>連線檢查:</strong> 檢查你的 IP 在資料庫中的連線狀態</p>
|
||||
<p>• <strong>自動清理:</strong> 點擊「清理我的連線」來清理你的 IP 連線</p>
|
||||
<p>• <strong>關閉頁面:</strong> 關閉此頁面時會自動觸發連線清理</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,325 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, Eye, RefreshCw } from 'lucide-react';
|
||||
|
||||
interface IPInfo {
|
||||
smartDetection?: {
|
||||
detectedIP: string;
|
||||
confidence: 'high' | 'medium' | 'low';
|
||||
source: string;
|
||||
allCandidates: string[];
|
||||
isPublicIP: boolean;
|
||||
};
|
||||
headers: Record<string, string | null>;
|
||||
nextRequestIP: string | undefined;
|
||||
env: Record<string, string | undefined>;
|
||||
allHeaders: Record<string, string>;
|
||||
}
|
||||
|
||||
export default function DebugIPPage() {
|
||||
const [ipInfo, setIpInfo] = useState<IPInfo | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
const [recommendedIP, setRecommendedIP] = useState<string>('');
|
||||
|
||||
// 獲取 IP 調試信息
|
||||
const fetchIPInfo = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/debug-ip');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setIpInfo(data.data);
|
||||
|
||||
// 提取智能偵測結果
|
||||
if (data.data.smartDetection) {
|
||||
const smartDetection = data.data.smartDetection;
|
||||
setRecommendedIP(smartDetection.detectedIP);
|
||||
setMessage(`智能偵測結果: ${smartDetection.detectedIP} (可信度: ${smartDetection.confidence}, 來源: ${smartDetection.source})`);
|
||||
} else {
|
||||
setMessage('IP 調試信息更新成功');
|
||||
}
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取 IP 調試信息失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取 IP 信息
|
||||
useEffect(() => {
|
||||
fetchIPInfo();
|
||||
}, []);
|
||||
|
||||
// 獲取推薦的 IP
|
||||
const getRecommendedIP = () => {
|
||||
if (!ipInfo) return 'unknown';
|
||||
|
||||
// 優先使用智能偵測結果
|
||||
if (ipInfo.smartDetection) {
|
||||
return ipInfo.smartDetection.detectedIP;
|
||||
}
|
||||
|
||||
// 回退到舊的邏輯
|
||||
const { headers, nextRequestIP } = ipInfo;
|
||||
|
||||
// 優先順序檢查
|
||||
if (headers['cf-connecting-ip']) return headers['cf-connecting-ip'];
|
||||
if (headers['x-real-ip']) return headers['x-real-ip'];
|
||||
if (headers['x-client-ip']) return headers['x-client-ip'];
|
||||
if (headers['x-cluster-client-ip']) return headers['x-cluster-client-ip'];
|
||||
if (headers['x-forwarded']) return headers['x-forwarded'];
|
||||
if (headers['x-forwarded-for']) {
|
||||
const ips = headers['x-forwarded-for']!.split(',').map(ip => ip.trim());
|
||||
const publicIPs = ips.filter(ip =>
|
||||
ip &&
|
||||
ip !== '127.0.0.1' &&
|
||||
ip !== '::1' &&
|
||||
!ip.startsWith('192.168.') &&
|
||||
!ip.startsWith('10.') &&
|
||||
!ip.startsWith('172.')
|
||||
);
|
||||
if (publicIPs.length > 0) return publicIPs[0];
|
||||
return ips[0];
|
||||
}
|
||||
if (nextRequestIP && nextRequestIP !== '::1' && nextRequestIP !== '127.0.0.1') {
|
||||
return nextRequestIP;
|
||||
}
|
||||
|
||||
return 'unknown';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">IP 調試工具</h1>
|
||||
<p className="text-muted-foreground">
|
||||
調試和檢查客戶端 IP 地址獲取
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchIPInfo}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||||
重新整理
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 智能偵測結果 */}
|
||||
{ipInfo?.smartDetection && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Eye className="h-5 w-5" />
|
||||
智能 IP 偵測結果
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
使用智能算法偵測的客戶端 IP 地址
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge
|
||||
variant={ipInfo.smartDetection.isPublicIP ? "default" : "secondary"}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
{ipInfo.smartDetection.detectedIP}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={
|
||||
ipInfo.smartDetection.confidence === 'high' ? "default" :
|
||||
ipInfo.smartDetection.confidence === 'medium' ? "secondary" : "destructive"
|
||||
}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
可信度: {ipInfo.smartDetection.confidence}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||||
來源: {ipInfo.smartDetection.source}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{ipInfo.smartDetection.allCandidates.length > 1 && (
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">所有候選 IP:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{ipInfo.smartDetection.allCandidates.map((ip, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant={ip === ipInfo.smartDetection.detectedIP ? "default" : "outline"}
|
||||
className="text-sm"
|
||||
>
|
||||
{ip}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 推薦的 IP (回退顯示) */}
|
||||
{ipInfo && !ipInfo.smartDetection && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Eye className="h-5 w-5" />
|
||||
推薦的 IP 地址
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
系統推薦使用的客戶端 IP 地址
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="default" className="text-lg px-3 py-1">
|
||||
{getRecommendedIP()}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={getRecommendedIP() === 'unknown' ? "destructive" : "default"}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
狀態: {getRecommendedIP() === 'unknown' ? "無法識別" : "已識別"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 請求標頭 */}
|
||||
{ipInfo && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>請求標頭</CardTitle>
|
||||
<CardDescription>
|
||||
從 HTTP 請求標頭中獲取的 IP 相關信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{Object.entries(ipInfo.headers).map(([key, value]) => (
|
||||
<div key={key} className="flex items-center justify-between p-2 border rounded">
|
||||
<span className="font-medium text-sm">{key}:</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{value || 'null'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* NextRequest IP */}
|
||||
{ipInfo && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>NextRequest IP</CardTitle>
|
||||
<CardDescription>
|
||||
Next.js 框架提供的 IP 地址
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||||
{ipInfo.nextRequestIP || 'undefined'}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 環境信息 */}
|
||||
{ipInfo && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>環境信息</CardTitle>
|
||||
<CardDescription>
|
||||
部署環境相關信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{Object.entries(ipInfo.env).map(([key, value]) => (
|
||||
<div key={key} className="flex items-center justify-between p-2 border rounded">
|
||||
<span className="font-medium text-sm">{key}:</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{value || 'undefined'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 所有標頭(用於調試) */}
|
||||
{ipInfo && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>所有請求標頭</CardTitle>
|
||||
<CardDescription>
|
||||
完整的 HTTP 請求標頭信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{Object.entries(ipInfo.allHeaders).map(([key, value]) => (
|
||||
<div key={key} className="flex items-center justify-between p-2 border rounded text-xs">
|
||||
<span className="font-medium">{key}:</span>
|
||||
<span className="text-muted-foreground break-all">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<Database className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<Eye className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>使用說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>推薦的 IP:</strong> 系統根據優先順序推薦使用的 IP 地址</p>
|
||||
<p>• <strong>請求標頭:</strong> 檢查各種代理和負載均衡器設置的 IP 標頭</p>
|
||||
<p>• <strong>NextRequest IP:</strong> Next.js 框架直接提供的 IP 地址</p>
|
||||
<p>• <strong>環境信息:</strong> 部署環境相關的配置信息</p>
|
||||
<p>• 如果推薦的 IP 是 "unknown",請檢查代理設置或網路配置</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,180 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
export default function DebugScoringPage() {
|
||||
const [competitions, setCompetitions] = useState<any[]>([])
|
||||
const [selectedCompetition, setSelectedCompetition] = useState<any>(null)
|
||||
const [competitionJudges, setCompetitionJudges] = useState<any[]>([])
|
||||
const [competitionParticipants, setCompetitionParticipants] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [logs, setLogs] = useState<string[]>([])
|
||||
|
||||
const addLog = (message: string) => {
|
||||
setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
|
||||
}
|
||||
|
||||
// 載入競賽列表
|
||||
const loadCompetitions = async () => {
|
||||
try {
|
||||
addLog('🔄 開始載入競賽列表...')
|
||||
const response = await fetch('/api/competitions')
|
||||
const data = await response.json()
|
||||
addLog(`📋 競賽API回應: ${JSON.stringify(data)}`)
|
||||
|
||||
if (data.success && data.data) {
|
||||
setCompetitions(data.data)
|
||||
addLog(`✅ 載入 ${data.data.length} 個競賽`)
|
||||
} else {
|
||||
addLog(`❌ 競賽載入失敗: ${data.message}`)
|
||||
}
|
||||
} catch (error) {
|
||||
addLog(`❌ 競賽載入錯誤: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 載入競賽數據
|
||||
const loadCompetitionData = async (competitionId: string) => {
|
||||
if (!competitionId) return
|
||||
|
||||
setLoading(true)
|
||||
addLog(`🔍 開始載入競賽數據,ID: ${competitionId}`)
|
||||
|
||||
try {
|
||||
// 載入評審
|
||||
addLog('📋 載入評審...')
|
||||
const judgesResponse = await fetch(`/api/competitions/${competitionId}/judges`)
|
||||
const judgesData = await judgesResponse.json()
|
||||
addLog(`評審API回應: ${JSON.stringify(judgesData)}`)
|
||||
|
||||
if (judgesData.success && judgesData.data && judgesData.data.judges) {
|
||||
setCompetitionJudges(judgesData.data.judges)
|
||||
addLog(`✅ 載入 ${judgesData.data.judges.length} 個評審`)
|
||||
} else {
|
||||
addLog(`❌ 評審載入失敗: ${judgesData.message}`)
|
||||
setCompetitionJudges([])
|
||||
}
|
||||
|
||||
// 載入參賽者
|
||||
addLog('📱 載入參賽者...')
|
||||
const [appsResponse, teamsResponse] = await Promise.all([
|
||||
fetch(`/api/competitions/${competitionId}/apps`),
|
||||
fetch(`/api/competitions/${competitionId}/teams`)
|
||||
])
|
||||
|
||||
const appsData = await appsResponse.json()
|
||||
const teamsData = await teamsResponse.json()
|
||||
|
||||
addLog(`應用API回應: ${JSON.stringify(appsData)}`)
|
||||
addLog(`團隊API回應: ${JSON.stringify(teamsData)}`)
|
||||
|
||||
const participants = []
|
||||
|
||||
if (appsData.success && appsData.data && appsData.data.apps) {
|
||||
participants.push(...appsData.data.apps.map((app: any) => ({
|
||||
id: app.id,
|
||||
name: app.name,
|
||||
type: 'individual',
|
||||
creator: app.creator
|
||||
})))
|
||||
addLog(`✅ 載入 ${appsData.data.apps.length} 個應用`)
|
||||
} else {
|
||||
addLog(`❌ 應用載入失敗: ${appsData.message}`)
|
||||
}
|
||||
|
||||
if (teamsData.success && teamsData.data && teamsData.data.teams) {
|
||||
participants.push(...teamsData.data.teams.map((team: any) => ({
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
type: 'team',
|
||||
creator: team.members && team.members.find((m: any) => m.role === '隊長')?.name || '未知隊長'
|
||||
})))
|
||||
addLog(`✅ 載入 ${teamsData.data.teams.length} 個團隊`)
|
||||
} else {
|
||||
addLog(`❌ 團隊載入失敗: ${teamsData.message}`)
|
||||
}
|
||||
|
||||
setCompetitionParticipants(participants)
|
||||
addLog(`✅ 參賽者載入完成: ${participants.length} 個`)
|
||||
|
||||
} catch (error) {
|
||||
addLog(`❌ 載入失敗: ${error.message}`)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadCompetitions()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>評分表單調試頁面</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">選擇競賽:</label>
|
||||
<select
|
||||
value={selectedCompetition?.id || ""}
|
||||
onChange={(e) => {
|
||||
const competition = competitions.find(c => c.id === e.target.value)
|
||||
setSelectedCompetition(competition)
|
||||
if (competition) {
|
||||
loadCompetitionData(competition.id)
|
||||
}
|
||||
}}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
<option value="">選擇競賽</option>
|
||||
{competitions.map(comp => (
|
||||
<option key={comp.id} value={comp.id}>
|
||||
{comp.name} ({comp.type})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{selectedCompetition && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h3 className="font-semibold mb-2">評審 ({competitionJudges.length})</h3>
|
||||
<div className="space-y-2">
|
||||
{competitionJudges.map(judge => (
|
||||
<div key={judge.id} className="p-2 bg-gray-100 rounded">
|
||||
{judge.name} - {judge.title} - {judge.department}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-2">參賽者 ({competitionParticipants.length})</h3>
|
||||
<div className="space-y-2">
|
||||
{competitionParticipants.map(participant => (
|
||||
<div key={participant.id} className="p-2 bg-gray-100 rounded">
|
||||
{participant.name} ({participant.type}) - {participant.creator}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-2">調試日誌</h3>
|
||||
<div className="bg-gray-100 p-4 rounded max-h-96 overflow-y-auto">
|
||||
{logs.map((log, index) => (
|
||||
<div key={index} className="text-sm font-mono">{log}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
100
app/globals.css
100
app/globals.css
@@ -1,100 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 隱藏滾動條 */
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
@@ -1,11 +1,10 @@
|
||||
import type React from "react"
|
||||
import { Inter } from "next/font/google"
|
||||
import "./globals.css"
|
||||
import "../styles/globals.css"
|
||||
import { AuthProvider } from "@/contexts/auth-context"
|
||||
import { CompetitionProvider } from "@/contexts/competition-context"
|
||||
import { Toaster } from "@/components/ui/toaster"
|
||||
import { ChatBot } from "@/components/chat-bot"
|
||||
import { ClientConnectionCleanup } from "@/components/client-connection-cleanup"
|
||||
import "@/lib/app-initializer" // 自動初始化應用程式
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] })
|
||||
@@ -30,7 +29,6 @@ export default function RootLayout({
|
||||
{children}
|
||||
<Toaster />
|
||||
<ChatBot />
|
||||
<ClientConnectionCleanup />
|
||||
</CompetitionProvider>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
|
@@ -1,174 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, CheckCircle, AlertTriangle } from 'lucide-react';
|
||||
|
||||
export default function SetIPPage() {
|
||||
const [clientIP, setClientIP] = useState('61-227-253-171');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 設置客戶端 IP
|
||||
const handleSetClientIP = async () => {
|
||||
if (!clientIP.trim()) {
|
||||
setError('請輸入客戶端 IP 地址');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/set-client-ip', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ clientIP: clientIP.trim() }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(data.message || '客戶端 IP 設置成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '設置客戶端 IP 失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('設置錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 快速設置你的 IP
|
||||
const handleSetYourIP = () => {
|
||||
setClientIP('61-227-253-171');
|
||||
};
|
||||
|
||||
// 測試清理功能
|
||||
const handleTestCleanup = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/ip-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'cleanup-current' }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(`清理完成: ${data.message}`);
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">設置客戶端 IP</h1>
|
||||
<p className="text-muted-foreground">
|
||||
手動設置你的真實 IP 地址,用於連線清理
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* IP 設置 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
設置客戶端 IP
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
輸入你的真實 IP 地址,系統將使用此 IP 來清理連線
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="clientIP">客戶端 IP 地址</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="clientIP"
|
||||
value={clientIP}
|
||||
onChange={(e) => setClientIP(e.target.value)}
|
||||
placeholder="例如: 61-227-253-171"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSetYourIP}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
使用你的 IP
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleSetClientIP}
|
||||
disabled={loading || !clientIP.trim()}
|
||||
className="flex-1"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle className="h-4 w-4" />}
|
||||
設置 IP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={handleTestCleanup}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="flex-1"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertTriangle className="h-4 w-4" />}
|
||||
測試清理
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>使用說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>你的 IP:</strong> 61-227-253-171(從資料庫連線列表中獲取)</p>
|
||||
<p>• <strong>設置 IP:</strong> 點擊「設置 IP」按鈕來設置你的客戶端 IP</p>
|
||||
<p>• <strong>測試清理:</strong> 點擊「測試清理」按鈕來清理你的 IP 連線</p>
|
||||
<p>• <strong>自動清理:</strong> 設置後,關閉頁面時會自動清理你的 IP 連線</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,280 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, CheckCircle, AlertTriangle, RefreshCw, Trash2, BarChart3 } from 'lucide-react';
|
||||
|
||||
interface ConnectionStats {
|
||||
total: number;
|
||||
user: number;
|
||||
infrastructure: number;
|
||||
other: number;
|
||||
details: Array<{
|
||||
id: number;
|
||||
host: string;
|
||||
time: number;
|
||||
state: string;
|
||||
type: 'user' | 'infrastructure' | 'other';
|
||||
}>;
|
||||
}
|
||||
|
||||
interface CleanupResult {
|
||||
success: boolean;
|
||||
message: string;
|
||||
data: {
|
||||
killedCount: number;
|
||||
details: {
|
||||
userRealIP?: string;
|
||||
infrastructureIPs?: string[];
|
||||
cleanedConnections: Array<{
|
||||
id: number;
|
||||
host: string;
|
||||
time: number;
|
||||
state: string;
|
||||
}>;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default function SmartCleanupTestPage() {
|
||||
const [stats, setStats] = useState<ConnectionStats | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 獲取連線統計
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/smart-cleanup');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setStats(data.data.stats);
|
||||
setMessage('連線統計更新成功');
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取連線統計失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 執行智能清理
|
||||
const performSmartCleanup = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/smart-cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
const data: CleanupResult = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMessage(`智能清理完成: ${data.message}`);
|
||||
setError('');
|
||||
// 重新獲取統計
|
||||
await fetchStats();
|
||||
} else {
|
||||
setError(data.error || '智能清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取統計
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
// 獲取類型顏色
|
||||
const getTypeColor = (type: 'user' | 'infrastructure' | 'other') => {
|
||||
switch (type) {
|
||||
case 'user': return 'default';
|
||||
case 'infrastructure': return 'destructive';
|
||||
case 'other': return 'secondary';
|
||||
default: return 'outline';
|
||||
}
|
||||
};
|
||||
|
||||
// 獲取類型標籤
|
||||
const getTypeLabel = (type: 'user' | 'infrastructure' | 'other') => {
|
||||
switch (type) {
|
||||
case 'user': return '用戶連線';
|
||||
case 'infrastructure': return '基礎設施';
|
||||
case 'other': return '其他';
|
||||
default: return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">智能連線清理測試</h1>
|
||||
<p className="text-muted-foreground">
|
||||
智能識別和清理用戶真實 IP 及基礎設施連線
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={fetchStats}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||||
刷新統計
|
||||
</Button>
|
||||
<Button
|
||||
onClick={performSmartCleanup}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
智能清理
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 連線統計概覽 */}
|
||||
{stats && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
連線統計概覽
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
當前資料庫連線的分類統計
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">{stats.total}</div>
|
||||
<div className="text-sm text-muted-foreground">總連線數</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">{stats.user}</div>
|
||||
<div className="text-sm text-muted-foreground">用戶連線</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-red-600">{stats.infrastructure}</div>
|
||||
<div className="text-sm text-muted-foreground">基礎設施</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-gray-600">{stats.other}</div>
|
||||
<div className="text-sm text-muted-foreground">其他</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 連線詳情 */}
|
||||
{stats && stats.details.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>連線詳情</CardTitle>
|
||||
<CardDescription>
|
||||
所有連線的詳細信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{stats.details.map((conn, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 border rounded">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant={getTypeColor(conn.type)}>
|
||||
{getTypeLabel(conn.type)}
|
||||
</Badge>
|
||||
<span className="font-mono text-sm">ID: {conn.id}</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{conn.host}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm">時間: {conn.time}s</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
狀態: {conn.state}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 功能說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>智能清理功能</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-blue-600 mb-2">用戶連線清理</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li>• 自動識別你的真實 IP (61-227-253-171)</li>
|
||||
<li>• 清理所有來自你 IP 的連線</li>
|
||||
<li>• 不影響其他用戶的連線</li>
|
||||
<li>• 關閉網站時自動觸發</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-red-600 mb-2">基礎設施連線清理</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li>• 識別 AWS EC2 實例連線</li>
|
||||
<li>• 識別 Vercel 服務器連線</li>
|
||||
<li>• 可選清理基礎設施連線</li>
|
||||
<li>• 保護網站正常運行</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>使用說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>刷新統計:</strong> 查看當前所有連線的分類統計</p>
|
||||
<p>• <strong>智能清理:</strong> 自動識別並清理你的真實 IP 連線</p>
|
||||
<p>• <strong>用戶連線:</strong> 來自你真實 IP 的連線,會被優先清理</p>
|
||||
<p>• <strong>基礎設施連線:</strong> Vercel/AWS 服務器連線,通常不清理</p>
|
||||
<p>• <strong>自動觸發:</strong> 關閉網站時會自動執行智能清理</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,72 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
|
||||
export default function TestAPIPage() {
|
||||
const [competitionId, setCompetitionId] = useState('be47d842-91f1-11f0-8595-bd825523ae01')
|
||||
const [results, setResults] = useState<any>({})
|
||||
|
||||
const testAPI = async (endpoint: string, name: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/competitions/${competitionId}/${endpoint}`)
|
||||
const data = await response.json()
|
||||
setResults(prev => ({ ...prev, [name]: data }))
|
||||
console.log(`${name} API回應:`, data)
|
||||
} catch (error) {
|
||||
console.error(`${name} API錯誤:`, error)
|
||||
setResults(prev => ({ ...prev, [name]: { error: error.message } }))
|
||||
}
|
||||
}
|
||||
|
||||
const testAllAPIs = async () => {
|
||||
setResults({})
|
||||
await Promise.all([
|
||||
testAPI('judges', '評審'),
|
||||
testAPI('apps', '應用'),
|
||||
testAPI('teams', '團隊')
|
||||
])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>API 測試頁面</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">競賽ID:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={competitionId}
|
||||
onChange={(e) => setCompetitionId(e.target.value)}
|
||||
className="w-full p-2 border rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Button onClick={testAllAPIs}>測試所有API</Button>
|
||||
<Button onClick={() => testAPI('judges', '評審')}>測試評審API</Button>
|
||||
<Button onClick={() => testAPI('apps', '應用')}>測試應用API</Button>
|
||||
<Button onClick={() => testAPI('teams', '團隊')}>測試團隊API</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{Object.entries(results).map(([name, data]) => (
|
||||
<Card key={name}>
|
||||
<CardHeader>
|
||||
<CardTitle>{name} API 結果</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre className="bg-gray-100 p-4 rounded overflow-auto text-sm">
|
||||
{JSON.stringify(data, null, 2)}
|
||||
</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
@@ -1,226 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, Trash2, Eye, Zap } from 'lucide-react';
|
||||
import { clientCleanup } from '@/lib/client-connection-cleanup';
|
||||
|
||||
export default function TestIPCleanupPage() {
|
||||
const [status, setStatus] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 獲取連線狀態
|
||||
const fetchStatus = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const status = await clientCleanup.getConnectionStatus();
|
||||
setStatus(status);
|
||||
setMessage('連線狀態更新成功');
|
||||
setError('');
|
||||
} catch (err) {
|
||||
setError('獲取狀態失敗: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 手動清理
|
||||
const manualCleanup = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const success = await clientCleanup.manualCleanup();
|
||||
|
||||
if (success) {
|
||||
setMessage('手動清理完成');
|
||||
setError('');
|
||||
await fetchStatus(); // 重新獲取狀態
|
||||
} else {
|
||||
setError('手動清理失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('手動清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 模擬關閉頁面
|
||||
const simulatePageClose = () => {
|
||||
if (confirm('確定要模擬關閉頁面嗎?這會觸發自動清理機制。')) {
|
||||
// 觸發 beforeunload 事件
|
||||
window.dispatchEvent(new Event('beforeunload'));
|
||||
|
||||
// 等待一下再觸發 unload 事件
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new Event('unload'));
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取狀態
|
||||
useEffect(() => {
|
||||
fetchStatus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">IP 連線清理測試</h1>
|
||||
<p className="text-muted-foreground">
|
||||
測試基於 IP 的智能連線清理功能
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchStatus}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
|
||||
重新整理
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 客戶端信息 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
客戶端信息
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<p><strong>客戶端 ID:</strong> {clientCleanup.getClientId()}</p>
|
||||
<p><strong>用戶代理:</strong> {navigator.userAgent}</p>
|
||||
<p><strong>當前時間:</strong> {new Date().toLocaleString()}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 連線狀態 */}
|
||||
{status && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Eye className="h-5 w-5" />
|
||||
連線狀態
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
IP: {status.ip} | 連線數: {status.connectionCount}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||||
連線數: {status.connectionCount}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={status.connectionCount > 5 ? "destructive" : "default"}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
狀態: {status.connectionCount > 5 ? "異常" : "正常"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{status.connections && status.connections.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium">連線詳情:</h4>
|
||||
{status.connections.slice(0, 5).map((conn: any, index: number) => (
|
||||
<div key={index} className="p-2 border rounded text-sm">
|
||||
<p>ID: {conn.ID} | HOST: {conn.HOST} | 時間: {conn.TIME}s</p>
|
||||
</div>
|
||||
))}
|
||||
{status.connections.length > 5 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
... 還有 {status.connections.length - 5} 個連線
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 測試操作 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5" />
|
||||
測試操作
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
測試各種連線清理功能
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Button
|
||||
onClick={manualCleanup}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
手動清理
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={simulatePageClose}
|
||||
disabled={loading}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
<Zap className="h-4 w-4" />
|
||||
模擬關閉頁面
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => window.location.reload()}
|
||||
disabled={loading}
|
||||
variant="secondary"
|
||||
className="w-full"
|
||||
>
|
||||
<Database className="h-4 w-4" />
|
||||
重新載入頁面
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 自動清理說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>自動清理機制</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>頁面關閉前:</strong> 自動清理當前 IP 的所有連線</p>
|
||||
<p>• <strong>頁面隱藏時:</strong> 當切換到其他標籤頁時清理連線</p>
|
||||
<p>• <strong>定期清理:</strong> 每5分鐘檢查並清理多餘連線</p>
|
||||
<p>• <strong>手動清理:</strong> 可以隨時手動觸發清理</p>
|
||||
<p>• <strong>智能識別:</strong> 只清理當前 IP 的連線,不影響其他用戶</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<Database className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,101 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { CompetitionProvider } from '@/contexts/competition-context'
|
||||
|
||||
export default function TestManualScoringPage() {
|
||||
const [competition, setCompetition] = useState<any>(null)
|
||||
const [teams, setTeams] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
loadCompetitionData()
|
||||
}, [])
|
||||
|
||||
const loadCompetitionData = async () => {
|
||||
try {
|
||||
|
||||
// 載入競賽信息
|
||||
const competitionResponse = await fetch('/api/competitions/be4b0a71-91f1-11f0-bb38-4adff2d0e33e')
|
||||
const competitionData = await competitionResponse.json()
|
||||
|
||||
if (competitionData.success) {
|
||||
setCompetition(competitionData.data.competition)
|
||||
}
|
||||
|
||||
// 載入團隊數據
|
||||
const teamsResponse = await fetch('/api/competitions/be4b0a71-91f1-11f0-bb38-4adff2d0e33e/teams')
|
||||
const teamsData = await teamsResponse.json()
|
||||
|
||||
if (teamsData.success) {
|
||||
setTeams(teamsData.data.teams)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 載入數據失敗:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className="p-8">載入中...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<CompetitionProvider>
|
||||
<div className="p-8">
|
||||
<h1 className="text-2xl font-bold mb-4">測試手動評分數據載入</h1>
|
||||
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold mb-2">競賽信息</h2>
|
||||
{competition ? (
|
||||
<div className="bg-gray-100 p-4 rounded">
|
||||
<p><strong>名稱:</strong> {competition.name}</p>
|
||||
<p><strong>類型:</strong> {competition.type}</p>
|
||||
<p><strong>狀態:</strong> {competition.status}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-red-500">競賽數據載入失敗</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold mb-2">團隊數據</h2>
|
||||
{teams.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{teams.map((team) => (
|
||||
<div key={team.id} className="bg-gray-100 p-4 rounded">
|
||||
<h3 className="font-semibold">{team.name}</h3>
|
||||
<p><strong>ID:</strong> {team.id}</p>
|
||||
<p><strong>APP數量:</strong> {team.apps?.length || 0}</p>
|
||||
{team.apps && team.apps.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<h4 className="font-medium">APP列表:</h4>
|
||||
<ul className="ml-4">
|
||||
{team.apps.map((app: any) => (
|
||||
<li key={app.id} className="text-sm">
|
||||
• {app.name} ({app.id})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-red-500">團隊數據載入失敗</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold mb-2">手動評分測試</h2>
|
||||
<p className="text-gray-600">
|
||||
請檢查瀏覽器控制台的日誌,查看數據載入情況。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CompetitionProvider>
|
||||
)
|
||||
}
|
@@ -1,313 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, Database, Eye, RefreshCw, AlertTriangle, CheckCircle } from 'lucide-react';
|
||||
|
||||
interface VercelIPInfo {
|
||||
smartDetection: {
|
||||
detectedIP: string;
|
||||
confidence: 'high' | 'medium' | 'low';
|
||||
source: string;
|
||||
isPublicIP: boolean;
|
||||
allCandidates: string[];
|
||||
isInfrastructureIP?: boolean;
|
||||
isUserRealIP?: boolean;
|
||||
infrastructureIPs?: string[];
|
||||
userRealIPs?: string[];
|
||||
};
|
||||
headers: Record<string, string | null>;
|
||||
nextRequestIP: string | undefined;
|
||||
env: Record<string, string | undefined>;
|
||||
allHeaders: Record<string, string>;
|
||||
}
|
||||
|
||||
export default function VercelIPDebugPage() {
|
||||
const [ipInfo, setIpInfo] = useState<VercelIPInfo | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
// 獲取 IP 調試信息
|
||||
const fetchIPInfo = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/debug-ip');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setIpInfo(data.data);
|
||||
|
||||
if (data.data.smartDetection) {
|
||||
const smartDetection = data.data.smartDetection;
|
||||
setMessage(`Vercel IP 偵測結果: ${smartDetection.detectedIP} (可信度: ${smartDetection.confidence}, 來源: ${smartDetection.source})`);
|
||||
} else {
|
||||
setMessage('IP 調試信息更新成功');
|
||||
}
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || '獲取 IP 調試信息失敗');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 組件載入時獲取 IP 信息
|
||||
useEffect(() => {
|
||||
fetchIPInfo();
|
||||
}, []);
|
||||
|
||||
// 檢查是否為基礎設施 IP
|
||||
const isInfrastructureIP = (ip: string): boolean => {
|
||||
if (!ip) return false;
|
||||
return ip.includes('ec2-') && ip.includes('.amazonaws.com');
|
||||
};
|
||||
|
||||
// 檢查是否為用戶真實 IP
|
||||
const isUserRealIP = (ip: string): boolean => {
|
||||
if (!ip || ip === 'unknown') return false;
|
||||
return !isInfrastructureIP(ip) && ip !== '::1' && ip !== '127.0.0.1';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Vercel IP 調試工具</h1>
|
||||
<p className="text-muted-foreground">
|
||||
專門用於調試 Vercel 部署環境中的 IP 偵測問題
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchIPInfo}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||||
重新整理
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 智能偵測結果 */}
|
||||
{ipInfo?.smartDetection && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Eye className="h-5 w-5" />
|
||||
智能 IP 偵測結果
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
系統智能偵測的客戶端 IP 地址(已過濾基礎設施 IP)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge
|
||||
variant={
|
||||
isUserRealIP(ipInfo.smartDetection.detectedIP) ? "default" :
|
||||
isInfrastructureIP(ipInfo.smartDetection.detectedIP) ? "destructive" : "secondary"
|
||||
}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
{ipInfo.smartDetection.detectedIP}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={
|
||||
ipInfo.smartDetection.confidence === 'high' ? "default" :
|
||||
ipInfo.smartDetection.confidence === 'medium' ? "secondary" : "destructive"
|
||||
}
|
||||
className="text-lg px-3 py-1"
|
||||
>
|
||||
可信度: {ipInfo.smartDetection.confidence}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||||
來源: {ipInfo.smartDetection.source}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">用戶真實 IP:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{ipInfo.smartDetection.userRealIPs?.map((ip, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="default"
|
||||
className="text-sm"
|
||||
>
|
||||
{ip}
|
||||
</Badge>
|
||||
)) || <span className="text-muted-foreground text-sm">無</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">基礎設施 IP (已過濾):</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{ipInfo.smartDetection.infrastructureIPs?.map((ip, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="destructive"
|
||||
className="text-sm"
|
||||
>
|
||||
{ip}
|
||||
</Badge>
|
||||
)) || <span className="text-muted-foreground text-sm">無</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 請求標頭分析 */}
|
||||
{ipInfo && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>請求標頭分析</CardTitle>
|
||||
<CardDescription>
|
||||
分析各種 HTTP 標頭中的 IP 信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{Object.entries(ipInfo.headers).map(([key, value]) => {
|
||||
if (!value) return null;
|
||||
|
||||
const isInfra = isInfrastructureIP(value);
|
||||
const isUser = isUserRealIP(value);
|
||||
|
||||
return (
|
||||
<div key={key} className="flex items-center justify-between p-3 border rounded">
|
||||
<div className="flex-1">
|
||||
<span className="font-medium text-sm">{key}:</span>
|
||||
<div className="mt-1">
|
||||
<Badge
|
||||
variant={
|
||||
isUser ? "default" :
|
||||
isInfra ? "destructive" : "outline"
|
||||
}
|
||||
className="text-sm"
|
||||
>
|
||||
{value}
|
||||
</Badge>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{isUser && <Badge variant="default" className="text-xs">用戶真實 IP</Badge>}
|
||||
{isInfra && <Badge variant="destructive" className="text-xs">基礎設施 IP</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 環境信息 */}
|
||||
{ipInfo && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>部署環境信息</CardTitle>
|
||||
<CardDescription>
|
||||
Vercel 部署環境相關信息
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{Object.entries(ipInfo.env).map(([key, value]) => (
|
||||
<div key={key} className="flex items-center justify-between p-2 border rounded">
|
||||
<span className="font-medium text-sm">{key}:</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{value || 'undefined'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 問題診斷 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
問題診斷
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{ipInfo?.smartDetection && (
|
||||
<>
|
||||
{isInfrastructureIP(ipInfo.smartDetection.detectedIP) && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>問題:</strong> 偵測到的是 Vercel/AWS 基礎設施 IP,不是用戶真實 IP。
|
||||
<br />
|
||||
<strong>解決方案:</strong> 檢查 x-forwarded-for 標頭中是否包含用戶真實 IP。
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isUserRealIP(ipInfo.smartDetection.detectedIP) && (
|
||||
<Alert>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>正常:</strong> 成功偵測到用戶真實 IP。
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{!isUserRealIP(ipInfo.smartDetection.detectedIP) && !isInfrastructureIP(ipInfo.smartDetection.detectedIP) && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>問題:</strong> 無法偵測到有效的用戶 IP。
|
||||
<br />
|
||||
<strong>可能原因:</strong> 代理配置問題或網路環境限制。
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 使用說明 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>使用說明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>• <strong>基礎設施 IP:</strong> Vercel/AWS 的服務器 IP,不是用戶真實 IP</p>
|
||||
<p>• <strong>用戶真實 IP:</strong> 實際訪問網站的用戶 IP 地址</p>
|
||||
<p>• <strong>x-forwarded-for:</strong> 通常包含用戶真實 IP,格式為 "用戶IP,代理IP"</p>
|
||||
<p>• <strong>問題排查:</strong> 如果偵測到基礎設施 IP,檢查代理配置</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 訊息顯示 */}
|
||||
{message && (
|
||||
<Alert>
|
||||
<Database className="h-4 w-4" />
|
||||
<AlertDescription>{message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<Eye className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user