在處理資料時，經常會遇到 JSON 格式的資料。但原始的 JSON 資料常常擠成一大團、或是佈滿了括號與引號，既難閱讀又容易改錯。
所以在日常開發中，經常用到 JSON Editor Online 與 JSON Formatter 來處理 JSON 資料。然而免費的工具，常常伴隨著廣告，只是想簡單的分析一下 JSON 資料，整個畫面充斥著亂糟糟的廣告。
為了讓大家處理 JSON 資料時更順手，因此用 AI Agent 開發了 JSON Master —— 一款免費、功能齊全且視覺美觀的雙欄線上 JSON 視覺化編輯工具。
🌟 為什麼選擇 JSON Master？
1. 五大視覺檢視模式，想怎麼看就怎麼看
💻 Code 程式碼模式：適合習慣直接看原始碼與行號的人，具備語法彩色高亮與錯誤提示。
🌳 Tree 樹狀模式：將複雜資料變成清晰的樹狀圖，支援點開/折疊、關鍵字搜尋，點擊兩下就能直接修改內容。
📝 Form 表單模式 (經典簡潔樣式)：去除討厭的雙引號，將資料變成乾淨直覺的表單！上方還會即時顯示資料路徑（例如 events[0].message.text），並提供一鍵複製路徑功能。
📊 Table 表格模式：自動將列表資料轉為像 Excel 一樣的試算表，支援欄位點擊排序與單元格編輯。
🔍 Diff 左右比對模式：雙欄顯示，一秒找出左右兩邊資料哪裡不一樣（新增、修改、刪除顏色看得清清楚楚）。
⚡ 一鍵單行壓縮 (Minify)：按下即可將 JSON 壓縮成單行（按鈕會亮紫色燈提示）；再次點擊即可回復為好讀的多行縮排。
🔧 自動修復壞掉的 JSON (Repair)：引號漏打、用錯單引號、尾巴多打逗號？點一下修復鈕，自動幫你修正成標準格式！
2. 快捷動作與強大工具組
💫 預載範例：內建多種實用的範例資料（如電商訂單、API 回傳格式等），沒準備檔案也能一鍵點擊馬上體驗。
📂 開啟檔案 & 📥 下載：支援開啟電腦中的檔案（.json、.csv、.yaml、.txt），編輯完成後可一鍵導出下載 .json 檔。
📋 一鍵複製 ：點擊「複製」即可將資料寫入剪貼簿（附帶動態「已複製」提示）。
🗑️ 清空：點擊垃圾桶可瞬間清空檢視畫面。
🪄 JS 查詢與篩選轉換：提供強大的 JS 表達式過濾器（例如輸入 data.orders.filter(...)），即可即時篩選並轉換想要的資料。
🔧 自動修復壞掉的 JSON (Repair)：引號漏打、用錯單引號、尾巴多打逗號？點一下修復鈕，自動幫你修正成標準格式！
🔄 多元格式轉換 (Converter)：支援 JSON 與 CSV、YAML、XML 之間的雙向輕鬆轉換。
📈 資料結構統計 (Stats)：檔案有多大、包含幾筆資料、層級多深、型別比例，一目瞭然。
⚡ 一鍵單行壓縮 (Minify)：按下即可將 JSON 壓縮成單行（按鈕會亮紫色燈提示）；再次點擊即可回復為好讀的多行縮排。
🔧 自動修復壞掉的 JSON (Repair)：引號漏打、用錯單引號、尾巴多打逗號？點一下修復鈕，自動幫你修正成標準格式！
3. 深色 / 淺色主題隨心切換
🌗 全站主題同步：點擊右上角 Sun/Moon 按鈕，不論是習慣黑底（Dark Mode）還是白底（Light Mode），全站視圖、分頁與彈出視窗都會完美同步變色。
🛠️ 自然語言驅動的開發歷程
在開發過程中，是透過自然語言指令進行需求描述，AI 則負責架構設計、程式碼生成與精準除錯。以下的提示詞為此專案開發完後，由 AI 反向萃取出來的。透過這些提示詞，您也可以自行建制 JSON 編輯工具，就不用擔心檔案外洩。
---------------------------------------------以下是提示詞---------------------------------------------------------------------
用 React + TypeScript + Vite 和 TailwindCSS，做一個媲美 JSON Master ( https://willhsieh.byethost7.com/Jsonedit/ ) 的線上 JSON 雙欄視覺化與編輯工具，叫「JSON XXXXX」。
整體介面要採用質感良好的 Glassmorphism 設計，並支援「深色/淺色主題」切換，切換時全站視圖、分頁與對話框都要同步變色。
靜態部署相容性：
這個專案會上傳到像 Byet Host 這樣的共用主機子目錄（如 /Jsonedit/），請確保 vite.config.ts 的 base 設定為 './'，index.html 內的資源與 Favicon 使用相對路徑，並在 public/.htaccess 加上 Apache SPA Rewrite 規則，讓 npm run build 打包時自動產出 dist/.htaccess，避免重新整理時出現 404。
請幫我一步步規劃並寫出完整的專案程式碼！
---------------------------------------------以上是提示詞---------------------------------------------------------------------
🚀 輕鬆部署與開啟即用
JSON Master 採用純前端技術打造，無須安裝複雜的後端程式：
網頁資料處理全在你的電腦瀏覽器中完成，資料不上傳伺服器，安全有保障。
打包後的檔案極為輕巧，無論是直接在個人電腦開啟，或是上傳至網頁主機（如 Byet Host、Netlify），檔案上傳後立刻就能順暢運作。
💡 結語
無論你是軟體工程師、資料分析師，還是需要經常處理網頁資料的工作者，JSON Master 都能讓你的資料處理過程變得輕鬆、直覺又有效率！
有了 AI 協作，就可以創造適合自己的 SaaS（Software as a Service，軟體即服務）!
沒有留言:
張貼留言