專案介紹
Kit 是一款自架式書籤管理工具，解決瀏覽器書籤管理混亂的痛點。透過 Workspace、Tab、Folder 三層架構搭配標籤系統，讓使用者能以直覺的方式整理大量網路資源。
全端架構部署於 Cloudflare Pages，搭配 D1 Serverless SQLite 資料庫，實現零伺服器維護成本與全球邊緣運算的快速存取體驗。
核心功能
雙模式分類系統
每個 Tab 可選擇「資料夾模式」或「標籤模式」。資料夾模式提供傳統樹狀結構；標籤模式支援 Tag Group 與 AND / OR / SINGLE 三種篩選邏輯。拖曳排序
基於@dnd-kit 實現 Tab、Folder、Bookmark、Tag Group 的拖曳排序，使用浮點數 sort_order 策略避免頻繁重排。書籤分享
產生 Share Token 建立唯讀公開連結，支援自訂短連結與額外按鈕配置。自動擷取 Favicon
新增書籤時自動透過 Google Favicon API 取得網站圖標，提升辨識度。技術架構
前端
以Remix (React Router v7) 為核心框架，搭配 shadcn/ui 元件庫與 Tailwind CSS 建構現代化介面。使用 Phosphor Icons 作為圖示系統，@dnd-kit 處理拖曳交互。後端
執行於Cloudflare Workers 邊緣運算環境，使用 Cloudflare D1 (SQLite) 作為資料庫，透過 Drizzle ORM 進行 Type-safe 的資料操作與 Migration 管理。認證系統
自建 JWT 認證機制（jose），密碼使用PBKDF2-SHA256（100,000 次迭代）進行雜湊，Cookie-based Session 管理，支援註冊白名單機制。智慧緩存加速設計
針對公開分享頁面設計了一套基於 Hash 比對 的客戶端快取機制，大幅減少重複訪問時的資料庫查詢負擔。
Hash 驅動的失效策略
在users 資料表上維護 data_hash 欄位（UUID），每當任何寫入操作（書籤、資料夾、標籤、工作區等）成功後，皆透過 bumpUserDataHash() 重新產生 UUID，作為資料版本的唯一標識。輕量級 Hash 探針
提供/api/data-hash 端點，僅需 1–2 次 D1 查詢即可回傳目前的 Hash 值。相較於完整載入分享頁面所需的 7+ 次資料庫查詢，探針成本極低。clientLoader 快取流程
利用 React Router v7 的clientLoader 在瀏覽器端攔截請求：先檢查 localStorage 中是否有快取 → 若有，向 Hash 探針確認資料是否變更 → Hash 一致則直接返回快取資料，跳過完整的伺服器載入；Hash 不一致或無快取時才執行完整查詢，並將結果連同新 Hash 寫入快取。快取管理
快取以bk-cache:{route}:{sorted-params} 為 Key 存儲於 localStorage，設有 7 天硬性過期。當儲存空間不足時自動清除所有快取並重試，確保不影響頁面正常運作。跨工作區全文搜尋
內建 Cmd/Ctrl + K 快速搜尋功能，可即時在當前 Workspace 的所有 Tab 中進行全文檢索，不受單一分頁限制。
多欄位聯合搜尋
每筆書籤會將標題、URL、備註、資料夾路徑、分頁名稱與標籤名稱合併為搜尋範圍，確保無論記得哪個片段都能找到目標。多關鍵字 AND 邏輯
輸入以空白分隔的多個關鍵字時，系統採用 AND 邏輯——所有關鍵字必須同時出現才會匹配。例如搜尋react hooks 會找到同時包含「react」與「hooks」的書籤。智慧結果呈現
搜尋結果中匹配的關鍵字會以高亮標示；資料夾模式的書籤會顯示完整的麵包屑路徑（如Programming / JavaScript / Frameworks）；標籤模式則會帶出彩色標籤徽章，顏色繼承自所屬 Tag Group。流暢的操作體驗
搜尋輸入設有 200ms 防抖機制避免過度運算，並支援↑ ↓ 鍵盤導航與 Enter 直接開啟書籤，從搜尋到抵達目標一氣呵成。
資料庫設計
使用 Cloudflare D1 (SQLite) 搭配 Drizzle ORM，涵蓋使用者、工作區、書籤內容、標籤系統與分享機制。
| 資料表 | 說明 | 關鍵欄位 |
|---|---|---|
| users | 使用者帳號 | id, email, password_hash |
| workspaces | 工作區（每位使用者可建立多個） | id, user_id, title, sort_order |
| tabs | 分頁（支援 folders / tags 兩種模式） | id, workspace_id, title, type |
API 設計
基於 Remix Action Handler 設計 RESTful 風格的 API 端點，透過 FormData 傳遞參數：
書籤管理 api.bookmarks
資料夾管理 api.folders
標籤系統 api.tags / api.tag-groups / api.bookmark-tags
工作區與分頁 api.workspaces / api.tabs
分享系統 api.shares