1. 前言
一開始我只是在 excel 寫商品比價，然後因為某些原因架設了 nocodb，想說乾脆試看看直接把資料傳到網頁上編輯，這樣就不用煩惱同步的問題，因為資料都在雲端上。使用了一段時間發現其實這樣的呈現方式實在不利閱讀，久而久之就放棄了。
直到最近使用 hugo 及 vite 弄了部落格及匯率轉換網頁，才想起好像可以用來作為自己的比價網站，因為是自用，所以就直接遵照 Google Antigravity 的建議，一樣採用 vite 來架設前端。
Google Antigravity 有多種模型可以自由選擇，每種模型的 token 消耗量不一樣，但不知道是不是我的需求實在太簡單，即便用高階的 Gemini PRO 及低階的 flash 用起來差異不大，頂多就是 flash 錯誤率稍微高了點，但多修幾次還是能完美完成要求。
2. 專案功能
- 商品瀏覽：以卡片形式展示所有商品，並依「每單位單價」自動由低至高排序
- 分類篩選：依分類快速篩選商品
- 全文搜尋：即時搜尋商品名稱或商店名稱
- 排名視覺化：前三名商品以專屬的「熊熊硬幣」勳章標示，強化視覺質感
- 1st (金)：金牌熊熊硬幣 (領結版)
- 2nd (銀)：銀牌太空熊硬幣
- 3rd (紅銅)：銅牌法老熊硬幣
- 商店連結優化：支援 Markdown 語法
[標題](網址)，自動隱藏冗長網址並轉化為美觀連結 - 字體美化：引入「霞鷺文楷 (LXGW WenKai TC)」與襯線字體，提升閱讀質感
- 即時編輯：點擊編輯按鈕即可修改價格、數量、單位、圖片
- 新增商品：在網頁上直接建立新商品紀錄
- 智能單位預設：新增商品選取分類時，系統自動帶入該分類最常用的單位，提升輸入效率
- 刪除商品：附帶確認對話框的安全刪除功能
- 圖片上傳：直接在新增/編輯介面拍照或選圖，自動壓縮並上傳至 Zipline
- 價格歷史追蹤：點擊時鐘圖示查看商品歷史漲跌趨勢，自動計算「漲價/降價/持平」狀態
- 亮暗主題切換：手動切換，並記憶使用者偏好設定
- 響應式設計：針對手機瀏覽優化，適合觸控操作
- 增加安全性操作：限制訪客權限，設定自動圖片刪除，並且增加管理員模式，減少被惡搞的
一開始也沒想要搞這麼多，只是做著做著發現好像有些功能加了會更好，於是就越做越多。慢慢從 nocodb→zipline→CloudFlare workers 一直增加，主打就是一個聽勸，有什麼更好地方式就用更好地來做。
2.1. 區分管理員與訪客權限並設定圖片自動刪除
一開始想說自用而已，應該不會有濫用的情況，但想想還是決定增加點防護機制，免得伺服器被惡搞。詢問 AI 之後修正了前端及後端的安全性修正，感覺好像更厲害了。
需求：希望將非本人（訪客）上傳的內容限制在 3 個月後自動刪除，並限制訪客僅能新增項目或修改/刪除自己剛新增的內容。
解決方案：
- 身分識別：引入「管理金鑰 (Admin Secret)」機制。管理員在瀏覽器儲存金鑰後享有全權限；訪客則受限。
- 自動過期：訪客上傳圖片時，Worker 自動加入
x-zipline-deletes-at: 90d標頭，讓 Zipline 在 90 天後刪除檔案。 - 動態權限 UI：
- 頂部新增狀態標籤，點擊可設定金鑰。
- 訪客模式下隱藏大部分「編輯」與「刪除」按鈕。
- 利用
localStorage記錄自建項目的 ID 與時間，僅允許在 1 小時內對這些項目進行修刪。
- 頻率限制：實作前端計數器，訪客每分鐘限制新增 2 個項目以防濫用。
- 後端二次驗證：Worker 在處理修刪請求時，若無金鑰則會檢查資料建立時間，超過 1 小時則攔截請求。
2.2. Worker 端點安全性優化 (CORS 限制)
現象：原本 Worker 的 CORS 設定為 *，代表任何網域都可以呼叫該 Worker，存在被濫用風險。
解決：在 Worker 中實作「白名單過濾機制」。
- 動態 Origin 檢查：定義
ALLOWED_ORIGINS陣列（包含正式網域與本地開發網址）。 - 存取控制：若請求來源不在白名單內，且執行寫入操作（POST/PATCH/DELETE），則直接回傳
401 Unauthorized。 - CORS 標頭優化：根據請求的
Origin動態回傳對應的Access-Control-Allow-Origin，而非盲目放行所有來源。
3. 心得
弄到現在功能的部分應該已經可以滿足自己的需求，剩下的就是把介面弄得再美觀一點，然後考慮之後的維護問題。原本想說歷史價格的功能應該不好搞，結果用 antigravity 幾次就完成了，逐漸感受到為什麼美國的 SAAS 股價會越來越低。光是我這個外行人多問幾天就能自己搞一個這麼漂亮的前端，實在沒道理要繼續給人家賺錢。