⚡ RemoteWake - 遠端喚醒管理器

這是一款專為現代網絡環境設計的 Wake-on-WAN (WoW) 遠端管理系統。結合了 Next.js 的高效性能與 Firebase 的安全性，讓您能夠隨時隨地透過網頁安全地喚醒家庭或辦公室中的電腦。

🎉 開始使用 立即體驗流暢的遠端機房管理！

🌟 核心特色

1. 現代化視覺體驗 (Premium UI/UX)

• 玻璃擬態設計 (Glassmorphism)：介面採用半透明模糊質感與動態流光背景，營造極致的現代感。
• 動態主題切換 (Theme aware)：完整支援深色 (Dark) / 淺色 (Light) 模式，並可隨系統設定自動切換。
• 全方位多國語系 (i18n)：基於 react-i18next 構建，支援 繁體中文 與 英文 即時切換，滿足全球化使用需求。
• PWA 支援：支援 Progressive Web App 技術，可將網頁安裝至手機或電腦桌面，享有原生應用的開啟體驗。

2. 精準的自動化監控

• 智能狀態檢測：結合 ICMP Ping 與 TCP Fallback 機制，精確判斷目標主機的在線/離線狀態。
• 一鍵式喚醒：直觀的設備卡片設計，點擊雷電圖標即可發送 Magic Packet 喚醒訊號。
• 即時狀態更新：透過高效的背景掃描，確保設備清單反映最真實的聯網情況。

3. 企業級安全管理

• Firebase 安全認證：整合 Google OAuth 登入，確保只有授權用戶可以存取您的系統。
• 角色存取控制 (RBAC)：
  • 管理員 (Admin)：擁有一切管理權限，包括設備管理、使用者權限核准等。
  • 一般用戶 (User)：僅能操作獲授權的特定設備，並需經過管理員核准方可啟用。
• 安全性與隱私：帳號需經手動核准機制，防止未授權存取。

🌐 部署架構 (Deployment Architecture)

本系統推薦部署於區域網路內的低功耗設備（如 Raspberry Pi 樹梅派），並透過 Cloudflare Tunnel 實現在外網的安全存取。

網路拓撲圖

graph LR
    User((使用者)) -- HTTPS --- CF["Cloudflare Edge"]
    
    subgraph LAN_Home ["區域網路 (Intranet)"]
        direction TB
        CFTunnel["Cloudflare Tunnel Client"]
        App["RemoteWake Web App"]
        Target1["目標電腦 A"]
        Target2["目標電腦 B"]
        
        CFTunnel <--> App
        App -- "Magic Packet (UDP 9)" --> Target1
        App -- "Magic Packet (UDP 9)" --> Target2
    end
    
    CF <== "加密隧道" ==> CFTunnel

Loading

為什麼選擇 Cloudflare Tunnel 而非傳統 NAT？

在傳統架構中，若要從外網發送喚醒指令，通常需要開啟路由器的 NAT (Port Forwarding)，但這存在以下風險：

1. IP 曝露：您的家居/辨公室公網 IP 會直接顯示在 DNS 紀錄中，容易遭受掃描與攻擊。
2. 安全性低：開放端口如同在防火牆上開了一個洞，若 Web 服務存在漏洞，攻擊者可輕易入侵。

透過 Cloudflare Tunnel 的優勢：

• 無需開放端口：樹梅派主動連接 Cloudflare，防火牆只需允許 Outbound 指令，安全性極高。
• 隱藏真實 IP：外網僅能看到 Cloudflare 的節點 IP，無法得知您的實體位置。
• 自動 HTTPS：Cloudflare 提供免費的 SSL 憑證，確保傳輸過程全程加密。

🛠 技術架構

本專案採用最新的全端技術棧構建：

• 核心框架：Next.js 15+ (App Router)
• 後端與數據：Firebase (Auth, Firestore, Admin SDK)
• 樣式系統：Tailwind CSS + CSS Variables (動態主題引擎)
• 國際化引擎：React-i18next + i18next-browser-languagedetector
• 組件庫：Radix UI + Lucide/Tabler Icons
• 狀態管理：React Context API (Auth, I18n)

🚀 快速開始

1. 環境設定 複製 .env.example 並填入您的 Firebase 配置與遠端喚醒 API URL：

   NEXT_PUBLIC_FIREBASE_API_KEY=your_key
   FIREBASE_PROJECT_ID=your_id
   FIREBASE_CLIENT_EMAIL=your_email
   FIREBASE_PRIVATE_KEY=your_private_key

2. 安裝依賴

   npm install

3. 啟動開發伺服器

   npm run dev

4. 建置生產版本

   npm run build
   npm start

📂 專案結構

src/
├── app/                 # Next.js 頁面路由 (Dashboard, Users, Login)
├── components/          # UI 組件庫 (Navbar, DeviceCard, Dialogs)
├── context/             # 全域狀態 (AuthContext, I18nContext)
├── lib/                 # 核心邏輯
│   ├── actions/         # Server Actions (電腦喚醒、狀態檢查)
│   ├── firebase/        # Firebase 客戶端與管理員 SDK 實作
│   └── i18n.ts          # 多國語系配置
└── ...