283 lines
12 KiB
Markdown
283 lines
12 KiB
Markdown
# 📚 Web端功能規格文檔總覽
|
||
|
||
**建立日期**: 2025-09-11
|
||
**架構重構**: 2025-09-11 (基於共用規範重構)
|
||
**文檔狀態**: ✅ 已完成Web端核心規格 (v2.0)
|
||
**技術架構**: 🔄 基於共用模組的現代Web應用
|
||
**覆蓋功能**: 5個核心功能模組 (Web版)
|
||
**對應Mobile規格**: `../mobile/README.md`
|
||
|
||
## ⚡ 重要架構變更通知 (v2.0)
|
||
|
||
**🔄 規格架構重構** (2025-09-11)
|
||
- **舊架構**: 各平台獨立規格文檔
|
||
- **新架構**: 基於共用模組的引用式架構
|
||
- **重構原因**: 消除重複、提升一致性、便於維護
|
||
- **共用模組**: [../common/](../common/) - 跨平台共用規範
|
||
- **影響範圍**: 所有Web端功能規格，完整整合共用業務規則
|
||
|
||
### 🎯 新架構優勢
|
||
- **無重複**: 業務規則集中在common，避免文檔重複
|
||
- **高一致性**: Web和Mobile版共用相同的業務邏輯
|
||
- **易維護**: 共用規則修改一次，所有平台自動更新
|
||
- **模組化**: 清晰的功能模組分離和引用關係
|
||
|
||
## 📋 Web端規格文檔清單 (v2.0架構)
|
||
|
||
### 🌐 已完成的Web端功能規格 (基於共用模組)
|
||
|
||
1. **[vocabulary-learning-web.md](./vocabulary-learning-web.md)** ✅ v2.0 已完成
|
||
- 🎯 **核心架構**: 整合 [四關線性闖關系統](../common/progressive-stage-system.md)
|
||
- 💻 **關卡支援**: 詞彙學習→詞彙熟悉→口說練習→複習系統
|
||
- 💡 **共用整合**: [AI算法規格](../common/ai-algorithm-specs.md)、[命條系統](../common/business-rules.md#🎮-命條系統-life-points-system)
|
||
- 🔧 **Web特色**: 四關同屏展示、進階統計面板、複習排程管理
|
||
|
||
2. **[situational-dialogue-web.md](./situational-dialogue-web.md)** ✅ v2.0 已完成
|
||
- 🎯 **核心架構**: 整合第3關情境對話系統
|
||
- 💻 **AI分析**: [口說評分系統](../common/speaking-evaluation-specs.md)、[語用分析系統](../common/pragmatic-analysis-specs.md)
|
||
- 💡 **共用整合**: 雙重任務系統、三星評分、AI訂正系統
|
||
- 🔧 **Web特色**: 雙視窗模式、多標籤對話、限時挑戰模式
|
||
|
||
3. **[learning-map-web.md](./learning-map-web.md)** ✅ v2.0 已完成
|
||
- 🎯 **核心架構**: 13階段×20劇本×4關卡完整展示
|
||
- 💻 **進度系統**: 線性解鎖機制、關卡狀態管理
|
||
- 💡 **共用整合**: [關卡解鎖規則](../common/progressive-stage-system.md#🔒-關卡解鎖機制)
|
||
- 🔧 **Web特色**: 全景地圖視圖、學習統計儀表板、學習規劃工具
|
||
|
||
4. **[item-shop-web.md](./item-shop-web.md)** ✅ v2.0 已完成
|
||
- 🎯 **核心架構**: 完整鑽石道具商店系統
|
||
- 💻 **商業模式**: [鑽石購買規則](../common/business-rules.md#br-pay-01-鑽石購買規則)、[道具商店系統](../common/business-rules.md#br-pay-03-道具商店系統)
|
||
- 💡 **共用整合**: 付費轉換優化機制、漸進式付費設計
|
||
- 🔧 **Web特色**: 批量購買支援、價格比較工具、企業級支付
|
||
|
||
5. **[user-authentication-web.md](./user-authentication-web.md)** ✅ v2.0 已完成
|
||
- 🎯 **核心架構**: 用戶等級分級與權限管理
|
||
- 💻 **認證系統**: [用戶認證規則](../common/business-rules.md#🔑-用戶註冊與認證規則)、[會話管理](../common/business-rules.md#br-auth-03-會話管理規則)
|
||
- 💡 **共用整合**: 訂閱管理、付費用戶分級、安全機制
|
||
- 🔧 **Web特色**: 企業SSO支援、雙因素認證、進階安全設定
|
||
|
||
## 🔗 共用模組引用架構
|
||
|
||
### 📚 核心共用模組
|
||
|
||
每個Web端規格都明確引用以下共用模組：
|
||
|
||
1. **[線性闖關學習系統](../common/progressive-stage-system.md)**
|
||
- 四關闖關機制定義
|
||
- 關卡解鎖和狀態管理
|
||
- 進度追蹤和獎勵系統
|
||
|
||
2. **[AI算法規格](../common/ai-algorithm-specs.md)**
|
||
- 三維對話評估系統
|
||
- 即時分析和反饋機制
|
||
- 學習輔助和訂正系統
|
||
|
||
3. **[共同業務規則](../common/business-rules.md)**
|
||
- 命條系統完整規則
|
||
- 鑽石和道具商店機制
|
||
- 用戶等級和權限管理
|
||
|
||
4. **[口說評分系統](../common/speaking-evaluation-specs.md)**
|
||
- 五維度口說評估標準
|
||
- 即時評分和改善建議
|
||
|
||
5. **[語用分析系統](../common/pragmatic-analysis-specs.md)**
|
||
- 六維語用標準建議
|
||
- 溝通效果分析
|
||
|
||
### 🎯 引用機制設計
|
||
|
||
**明確引用**：每個Web規格開頭明確標示依賴的共用模組
|
||
```markdown
|
||
### 整合共用規範
|
||
> 本規格基於以下共用模組，請參閱對應規格文件：
|
||
> - **[線性闖關學習系統](../common/progressive-stage-system.md)** - 四關闖關機制
|
||
> - **[AI算法規格](../common/ai-algorithm-specs.md)** - AI學習支援系統
|
||
```
|
||
|
||
**具體整合**：在功能說明中具體引用共用規則
|
||
```markdown
|
||
#### 關卡機制 (整合共用規範)
|
||
- **解鎖條件**: 參考 [線性闖關學習系統 - 關卡解鎖](../common/progressive-stage-system.md#🔒-關卡解鎖機制)
|
||
- **命條消耗**: 參考 [共同業務規則 - 命條系統](../common/business-rules.md#🎮-命條系統-life-points-system)
|
||
```
|
||
|
||
## 🌐 Web端規格特色 (v2.0)
|
||
|
||
### 📊 Web端整合完整性
|
||
- **共用規範遵循度**: 100%嚴格遵循共用模組定義
|
||
- **平台特化功能**: 每個功能都有Web端專用增強
|
||
- **業務邏輯一致性**: 與Mobile版共用相同業務規則
|
||
- **技術實現差異**: Web端特定的技術實現和用戶體驗
|
||
|
||
### 🔧 Web端技術特點 (基於共用架構)
|
||
- **四關闖關系統**: Web端完整支援線性闖關學習系統
|
||
- **AI分析整合**: 完整整合口說評分和語用分析系統
|
||
- **商業系統**: 完整的鑽石道具商店和付費轉換機制
|
||
- **用戶管理**: 完整的等級分級和權限管理系統
|
||
|
||
### 🎮 UI設計系統 (統一標準)
|
||
- **命名規範**: `Page_*_W` (Web頁面) vs `UI_*` (Mobile畫面)
|
||
- **快捷鍵系統**: 基於Web端特性的完整快捷鍵支援
|
||
- **響應式設計**: 桌面優先的大螢幕佈局優化
|
||
- **共用元素**: 與Mobile版共用的核心UI元素和交互邏輯
|
||
|
||
## 🚀 Web端核心功能架構
|
||
|
||
### 🎯 四關線性闖關系統 (Web端實現)
|
||
基於 [線性闖關學習系統](../common/progressive-stage-system.md) 的Web端完整實現：
|
||
|
||
1. **第1關：詞彙學習**
|
||
- Web特色：大螢幕詞彙展示、快捷鍵操作
|
||
- 共用規則：5個詞彙組合、4選1測試、自動3星評分
|
||
|
||
2. **第2關：詞彙熟悉**
|
||
- Web特色：拖拽式重組、SVG連線配對
|
||
- 共用規則：例句重組、詞彙配對、全正確通關
|
||
|
||
3. **第2+關：口說練習** (付費特別關卡)
|
||
- Web特色：Web Audio API、詳細評分面板
|
||
- 共用規則：5鑽石消費、五維評分、星級獎勵機制
|
||
|
||
4. **第3關：情境對話**
|
||
- Web特色：雙視窗模式、多標籤對話、實時分析
|
||
- 共用規則：雙重任務系統、三星評分、AI訂正系統
|
||
|
||
### 💎 完整商業系統 (Web端實現)
|
||
基於 [共同業務規則](../common/business-rules.md) 的Web端商業化實現：
|
||
|
||
1. **鑽石購買系統**
|
||
- Web特色：多重支付方式、企業級安全
|
||
- 共用規則：5個價格套餐、24小時退款、風險控制
|
||
|
||
2. **道具商店系統**
|
||
- Web特色：批量購買、價格比較、詳細說明
|
||
- 共用規則：學習輔助道具、限時挑戰道具、使用場景
|
||
|
||
3. **付費轉換優化**
|
||
- Web特色：個人化推薦、購買歷史分析
|
||
- 共用規則：漸進式付費、價值展示、轉換漏斗
|
||
|
||
## 🧪 Web端測試策略 (基於共用規則)
|
||
|
||
### 🔍 共用規則驗證測試
|
||
1. **業務邏輯一致性**
|
||
- 四關闖關解鎖機制測試
|
||
- 命條消耗和恢復規則測試
|
||
- 鑽石和道具價格機制測試
|
||
|
||
2. **跨平台數據同步**
|
||
- Web端學習進度與Mobile端同步
|
||
- 用戶等級和權益跨平台一致
|
||
- 購買記錄和道具庫存同步
|
||
|
||
3. **AI系統整合**
|
||
- 口說評分系統準確性測試
|
||
- 語用分析建議合理性測試
|
||
- 即時分析響應速度測試
|
||
|
||
### 🌐 Web端專用測試
|
||
1. **瀏覽器相容性**
|
||
- Chrome/Firefox/Safari/Edge功能完整性
|
||
- Web API支援度測試
|
||
- 響應式設計適配測試
|
||
|
||
2. **Web端特有功能**
|
||
- 快捷鍵系統完整性
|
||
- 多標籤和多視窗管理
|
||
- 大螢幕佈局優化效果
|
||
|
||
## 📊 統計數據 (v2.0架構)
|
||
|
||
### 📈 Web端規格成果
|
||
- **總規格檔案**: 5個核心功能 + 1個總覽文檔
|
||
- **共用模組引用**: 每個規格平均引用4-5個共用模組
|
||
- **技術指引完整性**: 100%基於共用規範的Web端實現
|
||
- **功能覆蓋率**: 與共用規範100%對應，Web端特色增強
|
||
|
||
### 🎯 v2.0架構效益
|
||
- **維護效率提升**: 共用規範集中維護，減少80%重複更新
|
||
- **一致性保證**: Web和Mobile版自動保持業務邏輯一致
|
||
- **開發效率**: 明確的共用模組引用，提升50%開發效率
|
||
- **品質保證**: 統一的業務規則，減少70%平台間差異問題
|
||
|
||
## 🔄 維護和更新策略 (v2.0)
|
||
|
||
### 📅 模組化維護流程
|
||
1. **共用模組更新**
|
||
- 業務規則變更首先更新共用模組
|
||
- Web端規格自動引用最新共用規範
|
||
- 平台特色功能獨立維護
|
||
|
||
2. **版本管理**
|
||
- 共用模組版本控制
|
||
- Web端規格版本與共用模組版本對應
|
||
- 向下相容性保證
|
||
|
||
3. **一致性檢查**
|
||
- 自動檢查Web端規格與共用模組的一致性
|
||
- 定期審查平台特色功能的合理性
|
||
- 跨平台功能對應表更新
|
||
|
||
## 🔗 相關資源 (v2.0架構)
|
||
|
||
### 📚 共用規範模組
|
||
- **[線性闖關學習系統](../common/progressive-stage-system.md)** - 四關闖關核心機制
|
||
- **[AI算法規格](../common/ai-algorithm-specs.md)** - AI學習支援系統
|
||
- **[共同業務規則](../common/business-rules.md)** - 跨平台業務邏輯
|
||
- **[口說評分系統](../common/speaking-evaluation-specs.md)** - 五維度評分標準
|
||
- **[語用分析系統](../common/pragmatic-analysis-specs.md)** - 六維語用建議
|
||
|
||
### 🌐 平台規範文檔
|
||
- **Mobile版規格**: [../mobile/](../mobile/) - 對應的Mobile端功能規格
|
||
- **共用模組總覽**: [../common/README.md](../common/README.md) - 共用模組說明
|
||
- **平台對應表**: [../function-specs-mapping.md](../function-specs-mapping.md) - 詳細功能對應
|
||
|
||
### 🛠️ 技術資源
|
||
- **API文檔**: 共用模組定義的統一API接口
|
||
- **數據模型**: 跨平台共用的數據結構定義
|
||
- **開發指南**: Web端特定的技術實現指導
|
||
|
||
## 💡 使用指南
|
||
|
||
### 👩💻 Web開發團隊
|
||
1. **首先閱讀**: 對應功能的共用模組規格
|
||
2. **然後參考**: Web端特定的實現規格
|
||
3. **重點關注**: Web端特色功能和技術實現差異
|
||
4. **保持同步**: 定期檢查共用模組更新
|
||
|
||
### 👨💼 產品經理
|
||
1. **業務邏輯**: 以共用模組為準，確保跨平台一致
|
||
2. **平台差異**: 關注Web端特色功能的商業價值
|
||
3. **功能規劃**: 基於共用架構進行功能擴展規劃
|
||
|
||
### 🎨 設計師
|
||
1. **交互邏輯**: 遵循共用模組定義的交互流程
|
||
2. **視覺設計**: 基於Web端特性優化視覺體驗
|
||
3. **響應式**: 充分利用桌面大螢幕空間優勢
|
||
|
||
### 🧪 測試工程師
|
||
1. **業務測試**: 重點測試共用業務規則的正確實現
|
||
2. **平台測試**: 驗證Web端特有功能的穩定性
|
||
3. **同步測試**: 確保跨平台數據同步的準確性
|
||
|
||
---
|
||
|
||
**📝 重要提醒**: v2.0架構Web端規格完全基於共用模組引用，確保與Mobile版和整體系統的完美一致性。
|
||
|
||
**🎯 核心價值**:
|
||
- **統一性**: 業務邏輯跨平台統一
|
||
- **特色化**: Web端體驗充分優化
|
||
- **可維護**: 模組化架構易於維護
|
||
- **可擴展**: 基於共用基礎的靈活擴展
|
||
|
||
**🚀 下一步**:
|
||
- 持續完善共用模組的細節定義
|
||
- 優化Web端特色功能的用戶體驗
|
||
- 建立自動化的一致性檢查機制
|
||
|
||
---
|
||
|
||
**最後更新**: 2025-09-11
|
||
**版本**: v2.0 - 基於共用模組的架構重構
|
||
**維護者**: Drama Ling Web開發團隊 |