系統概述
轉盤禮物選擇系統是課程「進階 Web 程式設計」的期末專題,由團隊以兩個月時間,使用初學的 Next.js 技術開發完成。系統設計初衷是協助在節日送禮時感到猶豫的人做決定——使用者可先從禮物清單中挑選候選禮物,再透過轉盤隨機抽出最終選擇,並直接連結至蝦皮評價最好的店家一鍵購買,大幅縮短從選禮到購買的時間。
功能介紹
首頁 — 禮物清單
首頁無須登入即可供大眾使用,系統的目的在於快速協助有需要的人,決定在節日中可以送給親人、伴侶或孩子什麼樣的驚喜。每件商品附有圖片、分類標籤、價格,以及蝦皮賣場的快速購買連結,直接跳轉至評價最好的店家,從選禮到購買一鍵完成。
深色模式
系統支援深色模式切換,深色背景以 JavaScript 動畫製作流星特效,可以創造出更多的可互動流星以增加畫面趣味性,不同於一般靜態背景,創造更豐富的視覺體驗。
轉盤選禮
使用者可在商品頁面自由挑選覺得合適的禮物,不限數量與種類加入候選清單。確認後按下中央的「開始」按鈕,轉盤便會隨機旋轉,最終指針停留的位置即為本次選定的禮物,兼具娛樂性與驚喜感。
轉盤結果頁面
轉盤停止後,背景播放煙花動畫,畫面跳出轉盤結果與「立即購買」按鍵,點擊後直接跳轉至該商品的蝦皮購買頁面,且評價最佳的店家連結已預先整合。點擊任意處即可關閉結果畫面。
商品管理(管理員)
管理員登入後進入後台管理介面,可對商品進行新增、修改、刪除等完整 CRUD 操作,商品列表以直觀的方式呈現所有資訊,流程清晰。
單項商品管理
管理單項商品時,提供即時圖片預覽功能,管理員可在上傳前確認照片效果。頁面底部也提供上傳狀態確認,確保資料儲存成功。





