Files

aken1023 2808852e9f Fix IPv4 display and IP detection logic

Improved IP detection and display logic to always show IPv4 format, converting IPv6-mapped IPv4 addresses (e.g., ::ffff:127.0.0.1) and IPv6 loopback (::1) to 127.0.0.1. Updated API endpoint, display components, and added dedicated test/debug pages for IP format and detection. Added documentation summarizing the fixes and new features.

2025-08-01 15:35:15 +08:00

3.9 KiB

Raw Permalink Blame History

IPv4 格式顯示修復

問題描述

用戶要求確保所有 IP 地址都顯示為 IPv4 格式，而不是 IPv6 格式（如 ::ffff:127.0.0.1）。

修復方案

1. 改進 IP 顯示組件 (`components/ip-display.tsx`)

添加了 cleanIpForDisplay 函數來確保顯示的 IP 始終是 IPv4 格式：

function cleanIpForDisplay(ip: string): string {
  if (!ip) return '127.0.0.1';
  
  // 移除空白字符
  ip = ip.trim();
  
  // 處理IPv6格式的IPv4地址 (例如: ::ffff:192.168.1.1)
  if (ip.startsWith('::ffff:')) {
    return ip.substring(7);
  }
  
  // 處理純IPv6本地回環地址
  if (ip === '::1') {
    return '127.0.0.1';
  }
  
  // 驗證是否為有效的IPv4地址
  const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  if (ipv4Regex.test(ip)) {
    return ip;
  }
  
  // 如果不是有效的IPv4，返回默認值
  return '127.0.0.1';
}

2. 改進 API 端點 (`app/api/ip/route.ts`)

添加了 ensureIPv4Format 函數來確保 API 返回的 IP 始終是 IPv4 格式：

function ensureIPv4Format(ip: string): string {
  if (!ip) return '127.0.0.1';
  
  // 移除空白字符
  ip = ip.trim();
  
  // 處理IPv6格式的IPv4地址
  if (ip.startsWith('::ffff:')) {
    return ip.substring(7);
  }
  
  // 處理純IPv6本地回環地址
  if (ip === '::1') {
    return '127.0.0.1';
  }
  
  // 驗證是否為有效的IPv4地址
  const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  if (ipv4Regex.test(ip)) {
    return ip;
  }
  
  // 如果不是有效的IPv4，返回默認值
  return '127.0.0.1';
}

3. 創建 IPv4 格式測試頁面 (`app/test/ip-format-test/page.tsx`)

創建了一個專門的測試頁面來驗證 IPv4 格式轉換功能：

測試各種 IP 地址格式的轉換
顯示轉換前後的對比
提供詳細的格式分析
驗證轉換邏輯的正確性

轉換規則

✅ 正確處理的格式

原始格式	轉換後	說明
`::ffff:127.0.0.1`	`127.0.0.1`	IPv6格式的IPv4地址
`::1`	`127.0.0.1`	IPv6本地回環地址
`127.0.0.1`	`127.0.0.1`	標準IPv4地址（保持不變）
`192.168.1.1`	`192.168.1.1`	標準IPv4地址（保持不變）
`::ffff:203.0.113.1`	`203.0.113.1`	IPv6格式的公網IPv4地址

⚠️ 無效格式處理

原始格式	轉換後	說明
`invalid-ip`	`127.0.0.1`	無效格式，返回默認值
`localhost`	`127.0.0.1`	主機名，返回默認值
`null` 或 `undefined`	`127.0.0.1`	空值，返回默認值

測試方法

1. 訪問測試頁面

http://localhost:3000/test/ip-format-test

2. 檢查 API 響應

http://localhost:3000/api/ip

3. 查看實際顯示

訪問主頁面，檢查 IP 顯示組件是否顯示 IPv4 格式。

預期結果

修復後，系統應該：

始終顯示 IPv4 格式：無論原始檢測到的 IP 是什麼格式，都轉換為標準 IPv4 格式
正確處理 IPv6 格式：將 ::ffff:127.0.0.1 轉換為 127.0.0.1
處理本地回環地址：將 ::1 轉換為 127.0.0.1
保持有效 IPv4 不變：192.168.1.1 等標準 IPv4 地址保持原樣
提供默認值：無效格式返回 127.0.0.1 作為默認值

實現位置

前端顯示：components/ip-display.tsx
API 端點：app/api/ip/route.ts
測試頁面：app/test/ip-format-test/page.tsx
調試工具：app/test/ip-debug/page.tsx

驗證

啟動開發服務器：npm run dev
訪問 /test/ip-format-test 查看格式轉換測試
訪問主頁面檢查 IP 顯示是否為 IPv4 格式
檢查 API 端點 /api/ip 的響應

現在所有 IP 地址都會以標準的 IPv4 格式顯示，提供一致且易於理解的用戶體驗。

3.9 KiB Raw Permalink Blame History Unescape Escape