jettcheng1018
/
dramaling-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-app/docs/02_design/function-specs/web/item-shop-web.md

13 KiB
Raw Blame History

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

📋 功能概述

功能名稱: 鑽石道具商店系統 (Web端)
建立日期: 2025-09-11
最後更新: 2025-09-11
負責團隊: 前端Web/設計/開發
對應Mobile規格: ../mobile/04_item-shop-mobile.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 - 道具商店主頁面

功能說明 (整合共用規範)

道具分類架構

基於共用業務規則的完整道具系統：

學習輔助道具：

  • 回覆提示道具：30鑽石/個，250鑽石/10個包
  • 補命道具：100鑽石/個，400鑽石/5個包
  • 加時道具：300鑽石/個，1200鑽石/5個包

限時挑戰道具：

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

鑽石購買套餐

基於 共同業務規則 - 鑽石購買：

  • 新手包：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 空白→輸入中 道具搜尋

漸進式付費轉換機制

基於 共同業務規則 - 付費轉換優化：

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

Page_Diamond_Purchase_W - 鑽石購買頁面

功能說明 (整合支付系統)

支付系統整合

  • 支付方式: 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 - 道具詳情頁面

功能說明 (整合使用場景)

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

道具詳細資訊

基於 共同業務規則 - 道具商店 的完整功能說明：

回覆提示道具：

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

時光卷：

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

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

功能說明

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

比較分析功能

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

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

響應式設計

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

支付系統整合

基於 共同業務規則 - 鑽石購買：

  • 多種支付方式: Web端支援更多支付選項
  • 安全認證: PCI DSS合規的支付處理
  • 實時驗證: 即時風險評估和反欺詐
  • 發票管理: 完整的購買記錄和發票系統

用戶體驗優化

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

⌨️ Web版快捷鍵一覽

商店導航快捷鍵

  • 1-5 - 選擇鑽石套餐
  • Tab - 在道具間切換
  • Enter - 確認購買
  • Esc - 取消操作
  • Ctrl+F - 搜尋道具
  • C - 開啟價格比較

購買操作快捷鍵

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

📊 Web版業務邏輯差異

商店管理增強

基於共用業務規則的Web端實現：

  • 批量購買: Web端支援一次購買多個道具
  • 價格分析: 詳細的價值比較和分析工具
  • 歷史管理: 完整的購買記錄和統計
  • 個人化推薦: 基於學習數據的智能推薦

支付處理優化

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

用戶等級整合

基於 共同業務規則 - 用戶角色：

  • VIP特權: 訂閱用戶的特殊優惠和服務
  • 限制管理: 未成年用戶的購買限制
  • 風險控制: 24小時購買限額和風險評估
  • 黑名單管理: 惡意退款用戶的限制機制

🧪 Web版測試要點

購買流程測試

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

支付安全測試

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

用戶權限測試

  • 不同用戶等級的購買權限
  • 未成年用戶限制機制
  • VIP用戶特權正確顯示
  • 購買限額控制有效

響應式測試

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

📝 Web端開發注意事項

前端開發

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

業務邏輯整合

  • 嚴格遵循 共同業務規則 的道具和鑽石系統
  • 整合用戶等級系統和購買權限控制
  • 實現與學習系統的道具使用整合
  • 確保跨平台的購買記錄同步

安全性要求

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

用戶體驗設計

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

文檔狀態: 🟢 已完成 (基於共用規範更新)
最後更新: 2025-09-11
版本: v2.0 - 整合完整道具商店和支付系統
相關文檔:

  • ../common/business-rules.md - 共同業務規則
  • ../common/progressive-stage-system.md - 線性闖關學習系統
  • ../mobile/04_item-shop-mobile.md - 對應的Mobile版規格