Config Diff Viewer (設定檔差異檢視器)

這是一個基於 React 的工具，用於比較兩個目錄之間的設定檔。它提供了一個視覺化介面，讓您可以看到新增、移除和修改的檔案，以及詳細的內容差異。

功能特點

• 目錄比較：上傳「舊版」和「新版」目錄結構，自動偵測變更。
• 視覺化差異：深度整合的差異檢視器，逐行顯示變更內容。
• 統計摘要：快速查看有多少檔案被新增、移除或修改。
• 響應式介面：使用 Tailwind CSS 打造，介面現代且簡潔。

快速開始

前置需求

• Node.js (建議 v18 或更高版本)

安裝步驟

1. 複製儲存庫：

   git clone https://github.com/michaelbothsieh-crypto/Config-Diff-Viewer.git

2. 安裝相依套件：

   npm install

本地執行

啟動開發伺服器：

npm run dev

打開瀏覽器並前往終端機顯示的網址（通常是 http://localhost:5173）。

使用說明

1. 點擊「舊版 (Folder A)」選擇基準資料夾。
2. 點擊「新版 (Folder B)」選擇目標資料夾。
3. 點擊「開始比較 (Start Comparison)」進行分析。
4. 在側邊欄瀏覽結果以查看特定檔案的變更。

技術堆疊

• 框架：React + Vite
• 樣式：Tailwind CSS
• 圖示：Lucide React
• 差異邏輯：客製化差異比對引擎