# 道具商店功能規格文檔 (Web版)

## 📋 功能概述

**功能名稱**: 道具商店系統 (Web端)  
**建立日期**: 2025-09-09  
**最後更新**: 2025-09-09  
**負責團隊**: 前端Web/設計/開發  
**對應Mobile規格**: `../mobile/04_道具商店功能規格.md`

### 主要功能
- 多層次道具系統，涵蓋命條、提示、加速、裝飾等類型
- 靈活的定價策略，包含鑽石、學習幣、真實貨幣支付
- 組合優惠機制，促進多道具購買和長期訂閱
- 個人化推薦，基於學習習慣推薦合適道具
- 庫存管理，道具使用記錄和剩餘數量追蹤
- 購買歷史，完整的交易記錄和退款處理

### Web端特色功能
- **網格式商店佈局**: 利用大螢幕展示更多商品
- **進階篩選系統**: 多維度商品篩選和排序
- **批量購買操作**: 可同時購買多種道具組合
- **購物車功能**: 類似電商的購物車體驗
- **價格對比工具**: 不同套餐的價格效益分析
- **訂閱管理中心**: 完整的訂閱服務管理
- **發票和收據**: 完整的購買憑證系統

### 適用場景
- 桌面環境的深度購物和比價體驗
- 企業用戶的批量採購和付費管理
- 家長為孩子管理學習道具和付費控制
- 長期學習用戶的訂閱服務管理

### 與其他功能的關聯
- **學習系統**: 道具使用提升學習效率和體驗
- **命條系統**: 命條相關道具的購買和補充
- **成就系統**: 購買特殊道具解鎖成就
- **用戶系統**: 付費狀態影響功能權限
- **分析系統**: 購買行為數據用於商品推薦

## 💻 涉及的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接口規格