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

## 📋 功能概述

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

### 整合共用規範
> 本規格基於以下共用模組，請參閱對應規格文件：
> - **[共同業務規則](../common/business-rules.md)** - 完整的鑽石和道具商店系統
> - **[線性闖關學習系統](../common/progressive-stage-system.md)** - 道具在四關中的使用場景

### 主要功能 (基於共用業務規則)
- **鑽石購買系統**: 5個價格套餐，支援多種支付方式
- **學習輔助道具**: 回覆提示、補命、加時等核心道具
- **限時挑戰道具**: 時間暫停、時間加成等競技道具
- **付費轉換優化**: 漸進式付費轉換機制
- **購買確認流程**: 遊戲化的購買體驗設計
- **即時道具效果**: 購買後立即可用的道具系統

### Web端特色功能
- **大螢幕商店**: 完整展示所有道具和套餐資訊
- **詳細說明面板**: 每個道具的詳細功能和使用場景
- **批量購買支援**: Web端支援批量購買和組合優惠
- **支付方式豐富**: 整合多種Web端支付解決方案
- **購買歷史管理**: 完整的購買記錄和發票管理
- **價格比較工具**: 不同套餐的價值分析

### 適用場景
- 桌面環境的深度購買決策
- 需要詳細比較道具功能和價格
- 批量購買和學習規劃
- 支付安全性要求較高的交易

### 與其他功能的關聯
- **四關學習系統**: 道具在不同關卡中的具體使用
- **情境對話系統**: 回覆提示道具的核心使用場景
- **限時挑戰系統**: 時間管理道具的專用場景
- **命條系統**: 補命道具與命條機制的整合
- **用戶等級系統**: 不同等級用戶的購買權益差異

## 💻 涉及的Web頁面 (道具商店架構)

### 主要頁面
1. **Page_Shop_Main_W** - 道具商店主頁面 (Web版)
2. **Page_Diamond_Purchase_W** - 鑽石購買頁面 (Web版)  
3. **Page_Item_Details_W** - 道具詳情頁面 (Web版)
4. **Page_Purchase_History_W** - 購買歷史頁面 (Web版)

### Web專用頁面
1. **Page_Payment_Methods_W** - 支付方式管理頁面 (Web專用)
2. **Page_Price_Comparison_W** - 價格比較分析頁面 (Web專用)
3. **Page_Bulk_Purchase_W** - 批量購買頁面 (Web專用)

### 購買流程頁面
1. **Modal_Purchase_Confirm_W** - 購買確認模態視窗
2. **Modal_Payment_Processing_W** - 支付處理模態視窗
3. **Page_Purchase_Success_W** - 購買成功頁面
4. **Modal_Insufficient_Diamonds_W** - 鑽石不足提醒視窗

## 🎯 詳細頁面規格 (基於共用業務規則)

### Page_Shop_Main_W - 道具商店主頁面

#### 功能說明 (整合共用規範)
- **頁面目的**: 展示完整的道具商店和鑽石購買選項
- **商店系統**: 參考 [共同業務規則 - 道具商店](../common/business-rules.md#br-pay-03-道具商店系統)
- **付費轉換**: 參考 [共同業務規則 - 付費轉換優化](../common/business-rules.md#br-pay-06-付費轉換優化系統)

#### 道具分類架構
基於共用業務規則的完整道具系統：

**學習輔助道具**：
- 回覆提示道具：30鑽石/個，250鑽石/10個包
- 補命道具：100鑽石/個，400鑽石/5個包
- 加時道具：300鑽石/個，1200鑽石/5個包

**限時挑戰道具**：
- 時間暫停道具：100鑽石/個
- 時間加成道具：150鑽石/個
- 限時挑戰門票：50鑽石/次

#### 鑽石購買套餐
基於 [共同業務規則 - 鑽石購買](../common/business-rules.md#br-pay-01-鑽石購買規則)：
- 新手包：500鑽石 = NT$30 (首次購買優惠)
- 基礎包：1,200鑽石 = NT$60
- 價值包：2,500鑽石 = NT$99 (最受歡迎)
- 豪華包：5,000鑽石 = NT$190
- 至尊包：12,000鑽石 = NT$390

#### Web版佈局特點
- **鑽石套餐區**: 頂部5個套餐的水平展示
- **道具分類區**: 中央按類別分組的道具展示
- **用戶狀態區**: 右側鑽石餘額、VIP狀態、購買歷史
- **推薦系統區**: 底部個人化道具推薦

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 用戶鑽石餘額 | Number | 是 | 0 | >=0 | 右上角顯示 |
| 用戶等級狀態 | String | 是 | "免費用戶" | 用戶等級 | VIP標識 |
| 鑽石套餐列表 | Array | 是 | [] | 套餐陣列 | 頂部水平展示 |
| 道具分類列表 | Array | 是 | [] | 道具陣列 | 分類網格展示 |
| 熱門道具推薦 | Array | 是 | [] | 推薦陣列 | 推薦區域 |
| 限時優惠 | Object | 否 | null | 優惠物件 | 有優惠時顯示 |
| 購買歷史摘要 | Array | 是 | [] | 歷史陣列 | 側邊欄顯示 |
| 支付方式 | Array | 是 | [] | 支付陣列 | 購買時選擇 |
| 首次購買狀態 | Boolean | 是 | false | true/false | 新手包優惠 |

#### Web版互動元素

| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---------|---------|----------|--------|----------|------|
| 鑽石套餐卡片 | 卡片元素 | 點擊/1-5數字鍵 | 1-5 | 未選→已選 | 套餐選擇 |
| 道具購買按鈕 | 按鈕 | 點擊/Enter | Enter | 正常→確認中 | 購買確認 |
| 批量選擇器 | 數量選擇器 | 點擊/+- | +/- | 數量變化 | 批量購買 |
| 道具詳情按鈕 | 按鈕 | 點擊/I鍵 | I | 收合→展開 | 詳情面板 |
| 價格比較按鈕 | 按鈕 | 點擊/C鍵 | C | - | 比較工具 |
| 購買歷史按鈕 | 按鈕 | 點擊/H鍵 | H | 收合→展開 | 歷史面板 |
| 支付方式選擇 | 下拉選單 | 點擊/P鍵 | P | 收合→展開 | 支付選項 |
| 搜尋框 | 輸入框 | 點擊/Ctrl+F | Ctrl+F | 空白→輸入中 | 道具搜尋 |

#### 漸進式付費轉換機制
基於 [共同業務規則 - 付費轉換優化](../common/business-rules.md#br-pay-06-付費轉換優化系統)：

**入門級推薦**：回覆提示道具(30鑽石) - 解決即時卡關問題
**成長級推薦**：限時挑戰門票(50鑽石) - 體驗競技式學習  
**進階級推薦**：補命道具(100鑽石) - 提供重新挑戰機會
**專家級推薦**：時間管理道具(100-150鑽石) - 優化競技表現
**大師級推薦**：加時道具(300鑽石) - 獲得充裕練習時間

### Page_Diamond_Purchase_W - 鑽石購買頁面

#### 功能說明 (整合支付系統)
- **頁面目的**: 專門的鑽石購買和支付處理
- **支付處理**: 參考 [共同業務規則 - 鑽石購買](../common/business-rules.md#br-pay-01-鑽石購買規則)
- **安全機制**: 實時風險評估和反欺詐檢測

#### 支付系統整合
- **支付方式**: Apple Pay、Google Pay、信用卡、PayPal
- **安全保障**: PCI DSS合規、SSL加密、實時驗證
- **退款政策**: 24小時內可申請退款，已使用鑽石不予退還

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 選中套餐資訊 | Object | 是 | {} | 套餐物件 | 購買確認區域 |
| 支付方式選擇 | String | 是 | - | 支付類型 | 支付選項 |
| 帳單資訊 | Object | 否 | {} | 帳單物件 | 信用卡支付時 |
| 購買數量 | Number | 是 | 1 | 1-10 | 批量購買 |
| 總金額 | Number | 是 | - | >0 | 金額確認 |
| 優惠券代碼 | String | 否 | "" | 0-20字 | 有優惠券時 |
| 風險評估狀態 | String | 是 | "安全" | 風險等級 | 安全指示 |
| 交易ID | String | 否 | - | 交易編號 | 處理中顯示 |

### Page_Item_Details_W - 道具詳情頁面

#### 功能說明 (整合使用場景)
- **頁面目的**: 展示道具的詳細功能和使用場景
- **使用整合**: 說明道具在四關學習系統中的具體用途
- **價值展示**: 突出道具帶來的學習價值和效果

#### 道具詳細資訊
基於 [共同業務規則 - 道具商店](../common/business-rules.md#br-pay-03-道具商店系統) 的完整功能說明：

**回覆提示道具**：
- 功能：AI智慧對話引導，四合一功能
- 使用場景：情境對話卡關時
- 效果：對方意圖分析+回應思緒引導+回覆範例+翻譯

**時光卷**：
- 獲得方式：關卡失敗安慰獎勵
- 使用場景：挑戰時光關卡
- 效果：重新挑戰前階段關卡，詞彙加入複習清單

### Page_Price_Comparison_W - 價格比較分析頁面 (Web專用)

#### 功能說明
- **頁面目的**: 幫助用戶比較不同道具和套餐的價值
- **分析維度**: 單價、組合優惠、使用頻率、學習效果
- **智能建議**: 基於用戶學習模式的個人化推薦

#### 比較分析功能
- **價格效益分析**: 每鑽石的學習價值計算
- **使用場景匹配**: 根據學習進度推薦適合道具
- **優惠追蹤**: 追蹤價格變化和限時優惠
- **ROI計算**: 付費道具的學習投資報酬率

## 🌐 Web端技術特點 (整合支付安全)

### 響應式設計
- **桌面優先**: 1200px以上寬度的完整商店展示
- **商品網格**: 清晰的道具分類網格佈局
- **詳情面板**: 大螢幕展示詳細的道具資訊
- **比較工具**: 並排比較多個道具或套餐

### 支付系統整合
基於 [共同業務規則 - 鑽石購買](../common/business-rules.md#br-pay-01-鑽石購買規則)：
- **多種支付方式**: Web端支援更多支付選項
- **安全認證**: PCI DSS合規的支付處理
- **實時驗證**: 即時風險評估和反欺詐
- **發票管理**: 完整的購買記錄和發票系統

### 用戶體驗優化
- **即時生效**: 購買後立即可用道具
- **視覺反饋**: 清楚的購買確認和成功提示
- **錯誤處理**: 友善的錯誤提示和解決方案
- **載入優化**: 快速的商店載入和支付處理

## ⌨️ Web版快捷鍵一覽

### 商店導航快捷鍵
- `1-5` - 選擇鑽石套餐
- `Tab` - 在道具間切換
- `Enter` - 確認購買
- `Esc` - 取消操作
- `Ctrl+F` - 搜尋道具
- `C` - 開啟價格比較

### 購買操作快捷鍵
- `+/-` - 調整購買數量
- `I` - 查看道具詳情
- `H` - 檢視購買歷史
- `P` - 選擇支付方式
- `Ctrl+Enter` - 快速購買
- `Ctrl+Z` - 撤銷選擇

## 📊 Web版業務邏輯差異

### 商店管理增強
基於共用業務規則的Web端實現：
- **批量購買**: Web端支援一次購買多個道具
- **價格分析**: 詳細的價值比較和分析工具
- **歷史管理**: 完整的購買記錄和統計
- **個人化推薦**: 基於學習數據的智能推薦

### 支付處理優化
- **多重驗證**: Web端支援更嚴格的身份驗證
- **分期付款**: 大額購買的分期選項
- **退款處理**: 簡化的退款申請和處理流程
- **發票系統**: 企業用戶的發票開立功能

### 用戶等級整合
基於 [共同業務規則 - 用戶角色](../common/business-rules.md#👥-用戶角色分級系統)：
- **VIP特權**: 訂閱用戶的特殊優惠和服務
- **限制管理**: 未成年用戶的購買限制
- **風險控制**: 24小時購買限額和風險評估
- **黑名單管理**: 惡意退款用戶的限制機制

## 🧪 Web版測試要點

### 購買流程測試
- [ ] 鑽石套餐購買流程完整
- [ ] 道具購買確認機制正常
- [ ] 批量購買數量和價格計算正確
- [ ] 支付失敗時的處理機制

### 支付安全測試
- [ ] 多種支付方式正常運作
- [ ] 支付安全加密和驗證
- [ ] 風險評估系統有效
- [ ] 退款流程測試

### 用戶權限測試
- [ ] 不同用戶等級的購買權限
- [ ] 未成年用戶限制機制
- [ ] VIP用戶特權正確顯示
- [ ] 購買限額控制有效

### 響應式測試
- [ ] 1920x1080 完整商店展示
- [ ] 1366x768 商品網格正常
- [ ] 購買確認彈窗適配
- [ ] 支付頁面響應式佈局

## 📝 Web端開發注意事項

### 前端開發
- 整合多種支付API和SDK
- 實現安全的支付資訊處理
- 設計直觀的商店界面和購買流程
- 確保支付頁面的載入速度和安全性

### 業務邏輯整合
- 嚴格遵循 [共同業務規則](../common/business-rules.md) 的道具和鑽石系統
- 整合用戶等級系統和購買權限控制
- 實現與學習系統的道具使用整合
- 確保跨平台的購買記錄同步

### 安全性要求
- PCI DSS合規的支付處理
- 用戶支付資訊的加密保護
- 實時風險評估和反欺詐檢測
- 購買記錄的安全存儲和備份

### 用戶體驗設計
- 清楚的道具功能說明和價值展示
- 友善的購買確認和成功反饋
- 詳細的購買歷史和發票管理
- 個人化的道具推薦和優惠提醒

---

**文檔狀態**: 🟢 已完成 (基於共用規範更新)  
**最後更新**: 2025-09-11  
**版本**: v2.0 - 整合完整道具商店和支付系統  
**相關文檔**: 
- `../common/business-rules.md` - 共同業務規則  
- `../common/progressive-stage-system.md` - 線性闖關學習系統
- `../mobile/item-shop-mobile.md` - 對應的Mobile版規格