12 KiB
12 KiB
道具商店功能規格文檔 (Web版)
📋 功能概述
功能名稱: 道具商店系統 (Web端)
建立日期: 2025-09-09
最後更新: 2025-09-09
負責團隊: 前端Web/設計/開發
對應Mobile規格: ../mobile/04_道具商店功能規格.md
主要功能
- 多層次道具系統，涵蓋生命管理、提示、加速、裝飾等類型
- 靈活的定價策略，包含鑽石、學習幣、真實貨幣支付
- 組合優惠機制，促進多道具購買和長期訂閱
- 個人化推薦，基於學習習慣推薦合適道具
- 庫存管理，道具使用記錄和剩餘數量追蹤
- 購買歷史，完整的交易記錄和退款處理
Web端特色功能
- 網格式商店佈局: 利用大螢幕展示更多商品
- 進階篩選系統: 多維度商品篩選和排序
- 批量購買操作: 可同時購買多種道具組合
- 購物車功能: 類似電商的購物車體驗
- 價格對比工具: 不同套餐的價格效益分析
- 訂閱管理中心: 完整的訂閱服務管理
- 發票和收據: 完整的購買憑證系統
適用場景
- 桌面環境的深度購物和比價體驗
- 企業用戶的批量採購和付費管理
- 家長為孩子管理學習道具和付費控制
- 長期學習用戶的訂閱服務管理
與其他功能的關聯
- 學習系統: 道具使用提升學習效率和體驗
- 命條系統: 命條相關道具的購買和補充，詳見 共同業務規則
- 成就系統: 購買特殊道具解鎖成就
- 用戶系統: 付費狀態影響功能權限
- 分析系統: 購買行為數據用於商品推薦
💻 涉及的Web頁面
主要頁面
- Page_Shop_Main_W - 道具商店主頁面 (Web版)
- Page_Shop_Category_W - 分類商品頁面 (Web版)
- Page_Shop_Item_Details_W - 商品詳情頁面 (Web版)
- Page_Shopping_Cart_W - 購物車頁面 (Web版)
- Page_Checkout_W - 結帳頁面 (Web版)
- Page_Purchase_History_W - 購買歷史頁面 (Web版)
- Page_Inventory_Main_W - 道具庫存頁面 (Web版)
Web專用頁面
- Page_Subscription_Management_W - 訂閱管理中心 (Web專用)
- Page_Price_Comparison_W - 價格對比工具 (Web專用)
- Page_Bulk_Purchase_W - 批量採購頁面 (Web專用)
- Page_Payment_Methods_W - 支付方式管理 (Web專用)
輔助畫面
- Modal_Payment_Confirm_W - 付款確認模態視窗
- Modal_Item_Preview_W - 道具預覽模態視窗
- Modal_Refund_Request_W - 退款申請模態視窗
- Panel_Quick_Buy_W - 快速購買面板
🎯 詳細頁面規格
Page_Shop_Main_W - 道具商店主頁面 (Web版)
功能說明
- 頁面目的: 在桌面環境中展示完整的道具商店，提供豐富的購物體驗
- 進入條件: 從主選單進入或遊戲中道具不足時引導進入
- 退出條件: 完成購買或返回其他功能模組
Web版佈局特點
- 商品展示區: 占螢幕75%，網格式布局顯示商品
- 篩選側邊欄: 左側20%，包含分類、價格、評分等篩選
- 購物車側邊欄: 右側15%，顯示已選商品和快速結帳
- 頂部導航列: 包含搜索、分類導航、用戶餘額等
- 底部推薦區: 個性化推薦和熱門商品
頁面欄位細節
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---|---|---|---|---|---|
| 商品列表 | Array | 是 | [] | 商品陣列 | 網格式布局顯示 |
| 商品分類 | Array | 是 | [] | 分類陣列 | 左側篩選區 |
| 用戶鑽石餘額 | Number | 是 | 0 | >=0 | 頂部餘額顯示 |
| 用戶學習幣餘額 | Number | 是 | 0 | >=0 | 頂部餘額顯示 |
| 購物車商品數 | Number | 是 | 0 | >=0 | 購物車圖示數字 |
| 搜索關鍵詞 | String | 否 | - | 1-50字 | 搜索框 |
| 篩選條件 | Object | 否 | {} | 篩選物件 | 側邊欄篩選器 |
| 排序方式 | String | 是 | "recommended" | 排序枚舉 | 排序下拉選單 |
| 分頁資訊 | Object | 是 | {} | 分頁物件 | 底部分頁器 |
| 促銷活動 | Array | 否 | [] | 活動陣列 | 頂部橫幅 |
Web版互動元素
| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---|---|---|---|---|---|
| 商品卡片 | 卡片組件 | 點擊/Enter | Enter | 正常→選中 | 顯示商品詳情 |
| 加入購物車 | 按鈕 | 點擊/A鍵 | A | 正常→已添加 | 動畫效果反饋 |
| 立即購買 | 按鈕 | 點擊/B鍵 | B | 正常→處理中 | 跳轉結帳頁面 |
| 搜索商品 | 搜索框 | 輸入/Ctrl+F | Ctrl+F | - | 即時搜索建議 |
| 篩選器 | 複選框組 | 點擊/F鍵 | F | 未選→已選 | 即時更新商品列表 |
| 排序選擇 | 下拉選單 | 點擊/S鍵 | S | - | 價格、評分、熱門度 |
| 購物車展開 | 按鈕 | 點擊/C鍵 | C | 收合→展開 | 側邊欄滑出效果 |
| 商品預覽 | 懸停效果 | 滑鼠懸停 | - | - | 快速預覽商品資訊 |
| 批量選擇 | 複選框 | Ctrl+點擊 | Ctrl+A | - | 多選商品批量操作 |
Web版使用者操作流程
- 商品瀏覽: 頁面載入 → 瀏覽商品類別 → 使用篩選和搜索功能
- 商品選擇: 查看商品詳情 → 比較不同選項 → 加入購物車或立即購買
- 購物車管理: 查看購物車 → 調整數量 → 應用優惠碼 → 計算總價
- 結帳流程: 選擇支付方式 → 確認訂單 → 完成付款 → 獲得商品
Page_Shopping_Cart_W - 購物車頁面 (Web版)
功能說明
- 頁面目的: 管理選中的商品，計算價格，處理優惠和結帳
- 進入條件: 從商店點擊購物車或快捷鍵C
- 退出條件: 完成結帳或返回商店繼續購物
Web版特有功能
- 價格明細: 詳細的價格計算和優惠明細
- 數量調整: 可直接在購物車中調整商品數量
- 優惠碼: 支援優惠碼輸入和自動應用
- 保存購物車: 可保存購物車供下次購買
頁面欄位細節
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---|---|---|---|---|---|
| 購物車商品列表 | Array | 是 | [] | 商品陣列 | 主要列表區域 |
| 商品小計 | Number | 是 | 0 | >=0 | 每個商品行 |
| 總金額 | Number | 是 | 0 | >=0 | 底部總計 |
| 優惠折扣 | Number | 是 | 0 | >=0 | 優惠明細 |
| 應付金額 | Number | 是 | 0 | >=0 | 最終金額 |
| 優惠碼輸入 | String | 否 | - | 優惠碼格式 | 優惠碼輸入框 |
| 支付方式選擇 | String | 是 | "diamonds" | 支付方式枚舉 | 支付方式選擇器 |
| 配送方式 | String | 否 | - | 配送枚舉 | 實體商品時顯示 |
Page_Subscription_Management_W - 訂閱管理中心 (Web專用)
功能說明
- 頁面目的: 管理所有訂閱服務，包括續費、取消、升級等操作
- 進入條件: 從用戶設定或商店的訂閱區進入
- 退出條件: 完成訂閱管理或返回其他頁面
Web專有管理功能
- 訂閱概覽: 所有訂閱服務的統一管理界面
- 自動續費控制: 可開啟或關閉自動續費功能
- 升級降級: 訂閱方案的彈性調整
- 付款歷史: 完整的訂閱付款記錄
- 發票下載: 訂閱相關發票的下載功能
頁面欄位細節
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---|---|---|---|---|---|
| 當前訂閱列表 | Array | 是 | [] | 訂閱陣列 | 主要列表顯示 |
| 訂閱狀態 | String | 是 | - | 狀態枚舉 | 狀態標籤 |
| 下次扣款日期 | Date | 否 | - | 未來日期 | 日期顯示 |
| 下次扣款金額 | Number | 是 | 0 | >=0 | 金額顯示 |
| 自動續費開關 | Boolean | 是 | true | true/false | 開關控件 |
| 付款方式 | String | 是 | - | 付款方式枚舉 | 付款方式顯示 |
| 優惠到期日 | Date | 否 | - | 日期 | 有優惠時顯示 |
🌐 Web端技術特點
電商級購物體驗
- 購物車持久化: 使用LocalStorage保存購物車狀態
- 商品比較: 支援多商品的特性對比功能
- 心願單: 商品收藏和心願單功能
- 推薦系統: 基於瀏覽和購買歷史的智能推薦
支付系統整合
- 多重支付: 支援信用卡、PayPal、Apple Pay等
- 安全支付: PCI DSS合規的支付處理
- 訂閱計費: 自動續費和訂閱管理
- 退款處理: 自動化退款流程
數據分析功能
- 購買分析: 用戶購買行為的詳細分析
- A/B測試: 商品展示方式的A/B測試支援
- 轉換追蹤: 從瀏覽到購買的轉換漏斗分析
- 價格敏感度: 用戶對價格變化的反應分析
⌨️ Web版快捷鍵系統
商店瀏覽快捷鍵
Ctrl + F- 搜索商品F- 開啟/關閉篩選器S- 開啟排序選項C- 查看購物車Enter- 查看選中商品詳情A- 加入購物車B- 立即購買
購物車管理快捷鍵
+/-- 調整商品數量Delete- 移除選中商品Ctrl + A- 全選商品Ctrl + D- 清空購物車Enter- 前往結帳
訂閱管理快捷鍵
U- 升級訂閱D- 降級訂閱P- 暫停訂閱R- 恢復訂閱Ctrl + P- 列印發票Ctrl + E- 匯出付款歷史
📊 Web版業務邏輯差異
定價策略靈活性
- 動態定價: 基於用戶行為和市場需求的動態定價
- 地區定價: 根據用戶所在地區調整價格
- 企業折扣: 針對企業用戶的批量折扣方案
- 學生優惠: 學生身份驗證的特殊優惠價格
購買流程優化
- 一鍵結帳: 常購商品的快速結帳流程
- 分期付款: 大額購買的分期付款選項
- 群組購買: 多人合併購買的折扣機制
- 預購功能: 新商品的預購和預付功能
庫存管理升級
- 實時庫存: 商品庫存的實時更新和顯示
- 缺貨通知: 缺貨商品的補貨通知功能
- 限時優惠: 時間限制的特價商品
- VIP專享: 會員專屬商品和提前購買權
🧪 Web版測試要點
購物流程測試
- 商品加入購物車流程正常
- 購物車數量調整正確
- 優惠碼應用計算準確
- 結帳流程完整無誤
- 支付流程安全可靠
訂閱系統測試
- 訂閱購買流程正常
- 自動續費機制正確
- 訂閱升級降級功能正常
- 取消訂閱流程完整
- 發票生成功能正確
價格計算測試
- 商品價格顯示正確
- 折扣計算準確
- 稅費計算正確 (如適用)
- 匯率轉換準確 (多貨幣)
- 組合優惠計算正確
支付安全測試
- 信用卡資訊加密傳輸
- 支付頁面HTTPS保護
- 敏感資訊不在前端儲存
- 支付失敗處理機制
- 退款流程安全性
📝 Web端開發注意事項
前端架構
- 使用現代電商框架 (Next.js/Nuxt.js)
- 狀態管理使用Redux Toolkit或Zustand
- 支付整合使用Stripe或PayPal SDK
- 圖片最佳化使用WebP和懶載入
安全考量
- 所有支付相關請求使用HTTPS
- 信用卡資訊絕不在前端儲存
- 實施CSP (Content Security Policy)
- 定期安全漏洞掃描和修復
效能最佳化
- 商品圖片使用CDN加速
- 商品列表使用虛擬滾動
- 購物車狀態使用本地存儲
- 結帳頁面預載必要資源
合規要求
- GDPR資料保護合規
- PCI DSS支付卡資料安全
- 各國稅務法規遵循
- 消費者權益保護法律遵循
文檔狀態: 🟢 已完成
最後更新: 2025-09-09
版本: v1.0
相關文檔:
../mobile/04_道具商店功能規格.md- 對應的Mobile版規格../common/業務規則.md- 共同業務邏輯../common/數據模型.md- 數據結構定義../common/API規格.md- API接口規格