增加ip 的白名單

總共7個IP地址，分佈在4個地點：
岡山：1個IP
汐止：2個IP
新竹：2個IP
璟茂：2個IP

components/ip-display.tsx

@@ -1,32 +1,43 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { Globe } from "lucide-react"
+import { Globe, Shield, ShieldAlert } from "lucide-react"
 
 interface IpDisplayProps {
   mobileSimplified?: boolean
 }
 
+interface IpInfo {
+  ip: string
+  isAllowed: boolean
+  enableIpWhitelist: boolean
+  allowedIps: string[]
+  timestamp: string
+}
+
 export default function IpDisplay({ mobileSimplified = false }: IpDisplayProps) {
-  const [ip, setIp] = useState<string>("")
+  const [ipInfo, setIpInfo] = useState<IpInfo | null>(null)
   const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
-    const fetchIp = async () => {
+    const fetchIpInfo = async () => {
       try {
-        // 使用 ipify API 來獲取客戶端IP
-        const response = await fetch("https://api.ipify.org?format=json")
+        const response = await fetch('/api/ip')
+        if (!response.ok) {
+          throw new Error('無法獲取IP信息')
+        }
         const data = await response.json()
-        setIp(data.ip)
+        setIpInfo(data)
       } catch (error) {
-        console.error("無法獲取IP地址:", error)
-        setIp("未知")
+        console.error("無法獲取IP信息:", error)
+        setError("無法獲取IP信息")
       } finally {
         setLoading(false)
       }
     }
 
-    fetchIp()
+    fetchIpInfo()
   }, [])
 
   if (loading) {
@@ -38,20 +49,56 @@ export default function IpDisplay({ mobileSimplified = false }: IpDisplayProps)
     )
   }
 
+  if (error || !ipInfo) {
+    return (
+      <div className={`flex items-center gap-1.5 px-2 py-1 bg-red-900/50 rounded-md border border-red-800/30 ${mobileSimplified ? 'text-xs' : ''}`}>
+        <Globe className={`${mobileSimplified ? 'w-2.5 h-2.5' : 'w-3 h-3'} text-red-300`} />
+        <span className="text-xs text-red-200">錯誤</span>
+      </div>
+    )
+  }
+
   // 手機版簡化顯示
   if (mobileSimplified) {
     return (
-      <div className="flex items-center gap-1 px-1.5 py-0.5 bg-slate-800/50 rounded border border-blue-800/30 backdrop-blur-sm">
-        <Globe className="w-2.5 h-2.5 text-blue-300" />
-        <span className="text-xs text-blue-200 font-mono">{ip.split('.').slice(0, 2).join('.')}...</span>
+      <div className={`flex items-center gap-1 px-1.5 py-0.5 rounded border backdrop-blur-sm ${
+        ipInfo.enableIpWhitelist && !ipInfo.isAllowed 
+          ? 'bg-red-900/50 border-red-800/30' 
+          : 'bg-slate-800/50 border-blue-800/30'
+      }`}>
+        {ipInfo.enableIpWhitelist && !ipInfo.isAllowed ? (
+          <ShieldAlert className="w-2.5 h-2.5 text-red-300" />
+        ) : (
+          <Shield className="w-2.5 h-2.5 text-green-300" />
+        )}
+        <span className="text-xs font-mono text-blue-200">
+          {ipInfo.ip.split('.').slice(0, 2).join('.')}...
+        </span>
       </div>
     )
   }
 
   return (
-    <div className="flex items-center gap-1.5 px-2 py-1 bg-slate-800/50 rounded-md border border-blue-800/30 backdrop-blur-sm">
-      <Globe className="w-3 h-3 text-blue-300" />
-      <span className="text-xs text-blue-200 font-mono">{ip}</span>
+    <div className={`flex items-center gap-1.5 px-2 py-1 rounded-md border backdrop-blur-sm ${
+      ipInfo.enableIpWhitelist && !ipInfo.isAllowed 
+        ? 'bg-red-900/50 border-red-800/30' 
+        : 'bg-slate-800/50 border-blue-800/30'
+    }`}>
+      {ipInfo.enableIpWhitelist && !ipInfo.isAllowed ? (
+        <ShieldAlert className="w-3 h-3 text-red-300" />
+      ) : (
+        <Shield className="w-3 h-3 text-green-300" />
+      )}
+      <span className="text-xs text-blue-200 font-mono">{ipInfo.ip}</span>
+      {ipInfo.enableIpWhitelist && (
+        <span className={`text-xs px-1 py-0.5 rounded ${
+          ipInfo.isAllowed 
+            ? 'bg-green-900/50 text-green-200' 
+            : 'bg-red-900/50 text-red-200'
+        }`}>
+          {ipInfo.isAllowed ? '允許' : '拒絕'}
+        </span>
+      )}
     </div>
   )
 }