298 lines
12 KiB
Markdown
298 lines
12 KiB
Markdown
# 道具商店功能規格文檔 (Web版)
|
|
|
|
## 📋 功能概述
|
|
|
|
**功能名稱**: 道具商店系統 (Web端)
|
|
**建立日期**: 2025-09-09
|
|
**最後更新**: 2025-09-09
|
|
**負責團隊**: 前端Web/設計/開發
|
|
**對應Mobile規格**: `../mobile/04_道具商店功能規格.md`
|
|
|
|
### 主要功能
|
|
- 多層次道具系統，涵蓋生命管理、提示、加速、裝飾等類型
|
|
- 靈活的定價策略，包含鑽石、學習幣、真實貨幣支付
|
|
- 組合優惠機制，促進多道具購買和長期訂閱
|
|
- 個人化推薦，基於學習習慣推薦合適道具
|
|
- 庫存管理，道具使用記錄和剩餘數量追蹤
|
|
- 購買歷史，完整的交易記錄和退款處理
|
|
|
|
### Web端特色功能
|
|
- **網格式商店佈局**: 利用大螢幕展示更多商品
|
|
- **進階篩選系統**: 多維度商品篩選和排序
|
|
- **批量購買操作**: 可同時購買多種道具組合
|
|
- **購物車功能**: 類似電商的購物車體驗
|
|
- **價格對比工具**: 不同套餐的價格效益分析
|
|
- **訂閱管理中心**: 完整的訂閱服務管理
|
|
- **發票和收據**: 完整的購買憑證系統
|
|
|
|
### 適用場景
|
|
- 桌面環境的深度購物和比價體驗
|
|
- 企業用戶的批量採購和付費管理
|
|
- 家長為孩子管理學習道具和付費控制
|
|
- 長期學習用戶的訂閱服務管理
|
|
|
|
### 與其他功能的關聯
|
|
- **學習系統**: 道具使用提升學習效率和體驗
|
|
- **命條系統**: 命條相關道具的購買和補充，詳見 [共同業務規則](../common/business-rules.md#🎮-命條系統-life-points-system)
|
|
- **成就系統**: 購買特殊道具解鎖成就
|
|
- **用戶系統**: 付費狀態影響功能權限
|
|
- **分析系統**: 購買行為數據用於商品推薦
|
|
|
|
## 💻 涉及的Web頁面
|
|
|
|
### 主要頁面
|
|
1. **Page_Shop_Main_W** - 道具商店主頁面 (Web版)
|
|
2. **Page_Shop_Category_W** - 分類商品頁面 (Web版)
|
|
3. **Page_Shop_Item_Details_W** - 商品詳情頁面 (Web版)
|
|
4. **Page_Shopping_Cart_W** - 購物車頁面 (Web版)
|
|
5. **Page_Checkout_W** - 結帳頁面 (Web版)
|
|
6. **Page_Purchase_History_W** - 購買歷史頁面 (Web版)
|
|
7. **Page_Inventory_Main_W** - 道具庫存頁面 (Web版)
|
|
|
|
### Web專用頁面
|
|
1. **Page_Subscription_Management_W** - 訂閱管理中心 (Web專用)
|
|
2. **Page_Price_Comparison_W** - 價格對比工具 (Web專用)
|
|
3. **Page_Bulk_Purchase_W** - 批量採購頁面 (Web專用)
|
|
4. **Page_Payment_Methods_W** - 支付方式管理 (Web專用)
|
|
|
|
### 輔助畫面
|
|
1. **Modal_Payment_Confirm_W** - 付款確認模態視窗
|
|
2. **Modal_Item_Preview_W** - 道具預覽模態視窗
|
|
3. **Modal_Refund_Request_W** - 退款申請模態視窗
|
|
4. **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版使用者操作流程
|
|
1. **商品瀏覽**: 頁面載入 → 瀏覽商品類別 → 使用篩選和搜索功能
|
|
2. **商品選擇**: 查看商品詳情 → 比較不同選項 → 加入購物車或立即購買
|
|
3. **購物車管理**: 查看購物車 → 調整數量 → 應用優惠碼 → 計算總價
|
|
4. **結帳流程**: 選擇支付方式 → 確認訂單 → 完成付款 → 獲得商品
|
|
|
|
### 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接口規格 |