做 ip 防呆機制

app/test/ip-debug/page.tsx

@@ -0,0 +1,336 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Globe, Shield, MapPin, RefreshCw, AlertCircle, CheckCircle, Info, Lightbulb } from 'lucide-react'
+
+interface IpDebugInfo {
+  ip: string
+  isAllowed: boolean
+  enableIpWhitelist: boolean
+  allowedIps: string[]
+  timestamp: string
+  debug: {
+    allIpSources: Record<string, string | null>
+    allFoundIps: string[]
+    isLocalDevelopment: boolean
+    localIp: string | null
+    environment: string
+    host: string | null
+    referer: string | null
+    userAgent: string | null
+  }
+  location: any
+  development: {
+    message: string
+    suggestions: string[]
+  } | null
+}
+
+export default function IpDebugPage() {
+  const [ipInfo, setIpInfo] = useState<IpDebugInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchIpInfo = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const response = await fetch('/api/ip')
+      if (!response.ok) {
+        throw new Error('無法獲取IP信息')
+      }
+      const data = await response.json()
+      setIpInfo(data)
+    } catch (error) {
+      console.error("無法獲取IP信息:", error)
+      setError("無法獲取IP信息")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchIpInfo()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-6 max-w-4xl">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex items-center gap-2">
+            <RefreshCw className="w-5 h-5 animate-spin" />
+            <span>載入中...</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !ipInfo) {
+    return (
+      <div className="container mx-auto p-6 max-w-4xl">
+        <Card className="border-red-200 bg-red-50">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-red-800">
+              <AlertCircle className="w-5 h-5" />
+              錯誤
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-red-700">{error || '無法獲取IP信息'}</p>
+            <Button onClick={fetchIpInfo} className="mt-4">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              重試
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto p-6 max-w-4xl space-y-6">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold mb-2">IP 檢測調試工具</h1>
+        <p className="text-muted-foreground">查看詳細的IP檢測信息和調試數據</p>
+      </div>
+
+      {/* 本地開發環境提示 */}
+      {ipInfo.development && (
+        <Alert className="border-blue-200 bg-blue-50">
+          <Info className="h-4 w-4 text-blue-600" />
+          <AlertDescription className="text-blue-800">
+            <div className="font-medium mb-2">{ipInfo.development.message}</div>
+            <div className="text-sm space-y-1">
+              {ipInfo.development.suggestions.map((suggestion, index) => (
+                <div key={index} className="flex items-start gap-2">
+                  <Lightbulb className="w-3 h-3 mt-0.5 text-blue-500 flex-shrink-0" />
+                  <span>{suggestion}</span>
+                </div>
+              ))}
+            </div>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* 主要IP信息 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Globe className="w-5 h-5" />
+            IP 信息
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="font-medium">檢測到的IP:</span>
+              <Badge variant={ipInfo.ip === '127.0.0.1' ? 'destructive' : 'default'}>
+                {ipInfo.ip}
+              </Badge>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="font-medium">狀態:</span>
+              {ipInfo.isAllowed ? (
+                <Badge variant="default" className="flex items-center gap-1">
+                  <CheckCircle className="w-3 h-3" />
+                  允許
+                </Badge>
+              ) : (
+                <Badge variant="destructive" className="flex items-center gap-1">
+                  <AlertCircle className="w-3 h-3" />
+                  拒絕
+                </Badge>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Shield className="w-4 h-4" />
+              <span className="text-sm">IP白名單:</span>
+              <Badge variant={ipInfo.enableIpWhitelist ? 'default' : 'secondary'}>
+                {ipInfo.enableIpWhitelist ? '已啟用' : '已停用'}
+              </Badge>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm">環境:</span>
+              <Badge variant="outline">{ipInfo.debug.environment}</Badge>
+            </div>
+            {ipInfo.debug.isLocalDevelopment && ipInfo.debug.localIp && (
+              <div className="flex items-center gap-2">
+                <span className="text-sm">本機IP:</span>
+                <Badge variant="outline">{ipInfo.debug.localIp}</Badge>
+              </div>
+            )}
+          </div>
+
+          {ipInfo.location && (
+            <div className="flex items-center gap-2">
+              <MapPin className="w-4 h-4" />
+              <span className="text-sm">位置:</span>
+              <span className="text-sm">
+                {ipInfo.location.city}, {ipInfo.location.country} ({ipInfo.location.isp})
+              </span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 所有找到的IP */}
+      <Card>
+        <CardHeader>
+          <CardTitle>所有檢測到的IP</CardTitle>
+          <CardDescription>系統檢測到的所有IP地址</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-2">
+            {ipInfo.debug.allFoundIps.length > 0 ? (
+              ipInfo.debug.allFoundIps.map((ip, index) => (
+                <Badge 
+                  key={index} 
+                  variant={ip === ipInfo.ip ? 'default' : 'outline'}
+                  className={ip === '127.0.0.1' ? 'border-red-300 text-red-700' : ''}
+                >
+                  {ip} {ip === ipInfo.ip && '(已選擇)'}
+                </Badge>
+              ))
+            ) : (
+              <span className="text-muted-foreground">未檢測到任何IP</span>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 允許的IP列表 */}
+      {ipInfo.enableIpWhitelist && (
+        <Card>
+          <CardHeader>
+            <CardTitle>允許的IP地址</CardTitle>
+            <CardDescription>當前配置的IP白名單</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {ipInfo.allowedIps.length > 0 ? (
+                ipInfo.allowedIps.map((ip, index) => (
+                  <Badge key={index} variant="outline">
+                    {ip}
+                  </Badge>
+                ))
+              ) : (
+                <span className="text-muted-foreground">未配置IP白名單</span>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 調試信息 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>調試信息</CardTitle>
+          <CardDescription>所有可能的IP來源和請求頭信息</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div>
+              <h4 className="font-medium mb-2">所有IP來源:</h4>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {Object.entries(ipInfo.debug.allIpSources).map(([key, value]) => (
+                  <div key={key} className="flex justify-between items-center p-2 bg-muted rounded">
+                    <span className="text-sm font-mono">{key}:</span>
+                    <span className="text-sm text-muted-foreground">
+                      {value || 'null'}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <Separator />
+
+            <div>
+              <h4 className="font-medium mb-2">請求信息:</h4>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-sm">Host:</span>
+                  <span className="text-sm text-muted-foreground">
+                    {ipInfo.debug.host || 'null'}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">Referer:</span>
+                  <span className="text-sm text-muted-foreground">
+                    {ipInfo.debug.referer || 'null'}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">User Agent:</span>
+                  <span className="text-sm text-muted-foreground max-w-xs truncate">
+                    {ipInfo.debug.userAgent || 'null'}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">時間戳:</span>
+                  <span className="text-sm text-muted-foreground">
+                    {new Date(ipInfo.timestamp).toLocaleString('zh-TW')}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 地理位置信息 */}
+      {ipInfo.location && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPin className="w-5 h-5" />
+              地理位置信息
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <h4 className="font-medium mb-2">位置信息</h4>
+                <div className="space-y-1 text-sm">
+                  <div>國家: {ipInfo.location.country} ({ipInfo.location.countryCode})</div>
+                  <div>地區: {ipInfo.location.regionName}</div>
+                  <div>城市: {ipInfo.location.city}</div>
+                  <div>郵遞區號: {ipInfo.location.zip}</div>
+                  <div>時區: {ipInfo.location.timezone}</div>
+                </div>
+              </div>
+              <div>
+                <h4 className="font-medium mb-2">網路信息</h4>
+                <div className="space-y-1 text-sm">
+                  <div>ISP: {ipInfo.location.isp}</div>
+                  <div>組織: {ipInfo.location.org}</div>
+                  <div>AS: {ipInfo.location.as}</div>
+                  <div>行動網路: {ipInfo.location.mobile ? '是' : '否'}</div>
+                  <div>代理: {ipInfo.location.proxy ? '是' : '否'}</div>
+                  <div>主機服務: {ipInfo.location.hosting ? '是' : '否'}</div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 操作按鈕 */}
+      <div className="flex justify-center">
+        <Button onClick={fetchIpInfo} className="flex items-center gap-2">
+          <RefreshCw className="w-4 h-4" />
+          重新檢測IP
+        </Button>
+      </div>
+    </div>
+  )
+}