Add IP address display component to navigation

Introduced a new IpDisplay component that fetches and shows the user's IP address using the ipify API. Integrated the component into both desktop and mobile navigation areas, with a simplified display for mobile devices.

app/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Sparkles, MessageCircle, Users, BarChart3 } from "lucide-react"
 import HeaderMusicControl from "@/components/header-music-control"
+import IpDisplay from "@/components/ip-display"
 
 interface Star {
   id: number;
@@ -88,6 +89,11 @@ export default function HomePage() {
 
             {/* 導航區域 */}
             <nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
+              {/* IP顯示 */}
+              <div className="hidden sm:block">
+                <IpDisplay />
+              </div>
+              
               {/* 音樂控制 */}
               <div className="hidden sm:block">
                 <HeaderMusicControl />
@@ -148,6 +154,11 @@ export default function HomePage() {
 
               {/* 手機版導航 - 使用文字而非圖標 */}
               <div className="flex sm:hidden items-center gap-1">
+                {/* 手機版IP顯示 */}
+                <div className="sm:hidden">
+                  <IpDisplay mobileSimplified />
+                </div>
+                
                 <Link href="/analytics">
                   <Button
                     variant="ghost"

components/ip-display.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Globe } from "lucide-react"
+
+interface IpDisplayProps {
+  mobileSimplified?: boolean
+}
+
+export default function IpDisplay({ mobileSimplified = false }: IpDisplayProps) {
+  const [ip, setIp] = useState<string>("")
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchIp = async () => {
+      try {
+        // 使用 ipify API 來獲取客戶端IP
+        const response = await fetch("https://api.ipify.org?format=json")
+        const data = await response.json()
+        setIp(data.ip)
+      } catch (error) {
+        console.error("無法獲取IP地址:", error)
+        setIp("未知")
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchIp()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className={`flex items-center gap-1.5 px-2 py-1 bg-slate-800/50 rounded-md border border-blue-800/30 ${mobileSimplified ? 'text-xs' : ''}`}>
+        <Globe className={`${mobileSimplified ? 'w-2.5 h-2.5' : 'w-3 h-3'} text-blue-300`} />
+        <span className="text-xs text-blue-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>
+    )
+  }
+
+  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>
+  )
+}