LookingGlass

一個現代化的網路診斷工具前端界面，採用 React + TypeScript + Vite 構建，具備完整的深色主題系統和毛玻璃效果。

✨ 功能特點

• 🚀 現代化界面：採用毛玻璃效果和流暢動畫
• 🌓 智能主題系統：自動跟隨系統主題，手動切換支持
• 🌐 多協議支持：mtr、Ping、Traceroute、BGP 路由查詢
• 📱 響應式設計：完美適配桌面和移動設備
• 🎨 Mac 風格設計：仿 Tahoe 毛玻璃效果
• 🔒 架構兼容：支持 ARM64 和 x86 架構部署

🛠️ 技術棧

• 前端框架：React 18 + TypeScript
• 構建工具：Vite 6
• 樣式系統：Tailwind CSS 4 + 自定義主題變數
• 代碼檢查：ESLint
• 容器化：Docker + Docker Compose

🚀 本地開發

環境要求

• Node.js 18+
• npm 或 yarn 或 pnpm

安裝依賴

npm install

啟動開發服務器

npm run dev

訪問 http://localhost:5173 查看應用。

代碼檢查

npm run lint

構建生產版本

npm run build

📦 部署指南

方法一：傳統部署

1. 複製源代碼（排除 node_modules）

   # 只複製必要的文件
   rsync -av --exclude='node_modules' --exclude='.git' --exclude='dist' ./ server:/path/to/app/

2. 在服務器上安裝依賴並構建

   cd /path/to/app
   npm ci --only=production
   npm run build

3. 部署 dist/ 目錄

   # 使用 nginx 或其他 web 服務器提供 dist/ 目錄

方法二：使用部署腳本

# 在服務器上運行
./deploy.sh

方法三：Docker 部署

使用 Docker Compose（推薦）

# 構建並啟動
docker-compose up -d

# 查看日誌
docker-compose logs -f

手動 Docker 構建

# 構建鏡像
docker build -t lookingglass .

# 運行容器
docker run -d -p 8080:80 lookingglass

🔧 架構兼容性

本項目設計為架構無關：

• ✅ 開發環境：ARM64
• ✅ 生產環境：x86 Linux 服務器
• ✅ 容器化：Docker 多架構支持

為什麼要這樣設計？

1. 避免架構依賴：不在開發環境生成平台相關的二進制文件
2. 確保一致性：所有環境使用相同的源代碼和構建過程
3. 簡化部署：服務器上重新安裝依賴和構建，確保兼容性

📁 項目結構

my-lookingglass/
├── public/                 # 靜態資源
├── src/
│   ├── components/         # React 組件
│   │   └── ThemeToggle.tsx # 主題切換組件
│   ├── App.tsx            # 主應用組件
│   ├── index.css          # 全域樣式和主題變數
│   └── main.tsx           # 應用入口
├── .gitignore             # Git 忽略規則
├── .dockerignore          # Docker 忽略規則
├── deploy.sh              # 部署腳本
├── Dockerfile             # Docker 鏡像配置
├── docker-compose.yml     # Docker Compose 配置
├── nginx.conf             # Nginx 配置
├── package.json           # 項目配置
├── tailwind.config.js     # Tailwind 配置
├── tsconfig.json          # TypeScript 配置
└── vite.config.ts         # Vite 配置

🎨 主題系統

自動主題切換

• 根據系統偏好自動切換明暗主題
• 用戶手動選擇會覆蓋系統設置
• 瀏覽器 UI（狀態欄、進度條）會同步變換顏色

自定義主題變數

:root {
  --bg-primary: #ffffff;    /* 淺色主題背景 */
  --text-primary: #1e293b;  /* 淺色主題文字 */
}

html.dark {
  --bg-primary: #0f172a;    /* 深色主題背景 */
  --text-primary: #f8fafc;  /* 深色主題文字 */
}

🔗 API 接口

項目使用以下 API 端點：

• 自行搭建

🤝 貢獻

歡迎提交 Issue 和 Pull Request！