深色 JSON 差異工具 UI 模型

目標：建立一個深色模式的桌面應用UI 原型，用於名為{argument name="app name" default="Tilted Diffs"} 的JSON diff 工具，展示標題為{argument name="diff title" default="API Response — Checkout v2"} 的API 回應比較。 畫布：16:10 寬螢幕桌面截圖，約1152×768，帶有macOS 風格的應用窗口，懸浮在深藍色漸變背景上。使用細微陰影、圓角、細邊框和精緻的開發者工具美學。 佈局：應用包含4 個主要區域：1 個左側邊欄，1 個橫跨編輯器區域的頂部工具欄，3 個垂直程式碼編輯器面板。第一個編輯器面板被選中，並帶有明亮的藍色焦點光暈。中間面板顯示帶顏色的行內diff 高亮。最右側面板較窄且部分可見，類似於額外的文件標籤或第三個對比列。 左側邊欄：左上角顯示macOS 交通燈按鈕：3 個圓圈，分別為紅色、黃色、綠色。在應用程式名稱下方，包含1 個搜尋框，佔位符文字為“Search diffs…”，並附有鍵盤提示。下方顯示8 個已儲存的diff 清單項目，帶有小文檔圖示和時間戳記：1) “API Response — Checkout v2”，顯示“Today, 10:24 AM”，以藍色高亮顯示為選取項目；2) “User Profile — Public API”，顯示“Yesterday, 4:18 PM 23) “Orders End 202020208 2020208 2020208 2020208 2020208 2020208 2020208 2020208 2020208 2020208 2020208 2020208 2020208 2020208 20208 2020208 2020208 2020208 2002020572037720 20208 202072050370000 000774:72 ； 9:14 AM”；4) “Product Catalog — EU Region”，顯示“May 19, 2025, 2:47 PM”；5) “Auth Response — SSO”，顯示“May 18, 2025, 11:03 AM”；6) “Billing Summary — 27, 27275)； “Webhook Payload — Stripe”，顯示“May 16, 2025, 10:11 AM”；8) “Search Results — Relevance”，顯示“May 15, 2025, 5:35 PM”。底部包含1 個顯眼的藍色「+ New Diff」按鈕和1 個小型齒輪圖示。 頂部工具列：左側顯示標題“API Response — Checkout v2”，帶有一個微小的編輯鉛筆圖示。中間放置一個分段控件，包含2 個標籤：選取藍色的「Editors」和未選取的「Diff」。右側包含4 個緊湊的快捷鍵控件，標註為“⌘T add column”、“⌘D toggle diff”、“⌘← / ⌘→ move focus”，組間留有小間距。 編輯面板：使用等寬程式碼字體、行號、JSON 語法高亮、深海軍藍面板和細圓角邊框。左側面板標題為“source.json”，帶有文件圖示和三點選單。中間面板標題為“target.json”，帶有文件圖示和三點選單。狹窄的右側面板標題為“more.json”，僅顯示代碼的左側部分，暗示溢出。每個完整編輯器面板底部都有一個狀態欄，顯示「Ln 1, Col 1」、「Spaces: 2」、「UTF-8」、「LF」和「JSON」。 代碼內容：顯示訂單結帳回應的JSON。使用requestId “req_8f3a9b42”、orderId “ord_123456”、貨幣USD，以及無線耳機和旅行收納包的商品資訊和配送資訊。左側來源版本應包含時間戳記「2025-05-21T10:24:31Z」、版本「v1」、狀態「pending」、totalAmount 129.99、無線耳機unitPrice 99.99（折扣為null）、旅遊收納包數量1、unitPents 30.0000 月 50.000 月的配送方式為「30.00 月以及地址“123 Market St”。中間目標版本應在左側裝訂線顯示diff 標記，並使用彩色行高亮：紅色為刪除行，綠色為新增行，黃色為修改行。它應包含時間戳從“2025-05-20T15:11:09Z”更改為“2025-05-21T10:24:31Z”、版本更改為v2、狀態從pending 更改為confirmed、totalAmount 更改為139.99、無線耳機109.9並添加了折扣10.00、旅行收納包數量更改為2、配送方式更改為express 且estimatedDays 更改為2。每個完整編輯器中顯示約32 行編號代碼。 視覺風格：高級SaaS 開發者工具介面，清晰的向量級渲染，深色主題，鈷藍色強調色，柔和的灰色文本，真實但整潔的UI 截圖，無人像，無水印，應用視窗外無瀏覽器邊框。保持所有文字清晰且對齊網格。