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

12 KiB
Raw Blame History

📚 Web端功能規格文檔總覽

建立日期: 2025-09-11
架構重構: 2025-09-11 (基於共用規範重構)
文檔狀態: ✅ 已完成Web端核心規格 (v2.0)
技術架構: 🔄 基於共用模組的現代Web應用
覆蓋功能: 5個核心功能模組 (Web版)
對應Mobile規格: ../mobile/README.md

⚡ 重要架構變更通知 (v2.0)

🔄 規格架構重構 (2025-09-11)

  • 舊架構: 各平台獨立規格文檔
  • 新架構: 基於共用模組的引用式架構
  • 重構原因: 消除重複、提升一致性、便於維護
  • 共用模組: ../common/ - 跨平台共用規範
  • 影響範圍: 所有Web端功能規格，完整整合共用業務規則

🎯 新架構優勢

  • 無重複: 業務規則集中在common，避免文檔重複
  • 高一致性: Web和Mobile版共用相同的業務邏輯
  • 易維護: 共用規則修改一次，所有平台自動更新
  • 模組化: 清晰的功能模組分離和引用關係

📋 Web端規格文檔清單 (v2.0架構)

🌐 已完成的Web端功能規格 (基於共用模組)

  1. vocabulary-learning-web.md ✅ v2.0 已完成

    • 🎯 核心架構: 整合 四關線性闖關系統
    • 💻 關卡支援: 詞彙學習→詞彙熟悉→口說練習→複習系統
    • 💡 共用整合: AI算法規格、命條系統
    • 🔧 Web特色: 四關同屏展示、進階統計面板、複習排程管理

  2. situational-dialogue-web.md ✅ v2.0 已完成

    • 🎯 核心架構: 整合第3關情境對話系統
    • 💻 AI分析: 口說評分系統、語用分析系統
    • 💡 共用整合: 雙重任務系統、三星評分、AI訂正系統
    • 🔧 Web特色: 雙視窗模式、多標籤對話、限時挑戰模式

  3. learning-map-web.md ✅ v2.0 已完成

    • 🎯 核心架構: 13階段×20劇本×4關卡完整展示
    • 💻 進度系統: 線性解鎖機制、關卡狀態管理
    • 💡 共用整合: 關卡解鎖規則
    • 🔧 Web特色: 全景地圖視圖、學習統計儀表板、學習規劃工具

  4. item-shop-web.md ✅ v2.0 已完成

    • 🎯 核心架構: 完整鑽石道具商店系統
    • 💻 商業模式: 鑽石購買規則、道具商店系統
    • 💡 共用整合: 付費轉換優化機制、漸進式付費設計
    • 🔧 Web特色: 批量購買支援、價格比較工具、企業級支付

  5. user-authentication-web.md ✅ v2.0 已完成

    • 🎯 核心架構: 用戶等級分級與權限管理
    • 💻 認證系統: 用戶認證規則、會話管理
    • 💡 共用整合: 訂閱管理、付費用戶分級、安全機制
    • 🔧 Web特色: 企業SSO支援、雙因素認證、進階安全設定

🔗 共用模組引用架構

📚 核心共用模組

每個Web端規格都明確引用以下共用模組：

  1. 線性闖關學習系統

    • 四關闖關機制定義
    • 關卡解鎖和狀態管理
    • 進度追蹤和獎勵系統

  2. AI算法規格

    • 三維對話評估系統
    • 即時分析和反饋機制
    • 學習輔助和訂正系統

  3. 共同業務規則

    • 命條系統完整規則
    • 鑽石和道具商店機制
    • 用戶等級和權限管理

  4. 口說評分系統

    • 五維度口說評估標準
    • 即時評分和改善建議

  5. 語用分析系統

    • 六維語用標準建議
    • 溝通效果分析

🎯 引用機制設計

明確引用：每個Web規格開頭明確標示依賴的共用模組

### 整合共用規範
> 本規格基於以下共用模組，請參閱對應規格文件：
> - **[線性闖關學習系統](../common/progressive-stage-system.md)** - 四關闖關機制
> - **[AI算法規格](../common/ai-algorithm-specs.md)** - AI學習支援系統

具體整合：在功能說明中具體引用共用規則

#### 關卡機制 (整合共用規範)
- **解鎖條件**: 參考 [線性闖關學習系統 - 關卡解鎖](../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端實現)

基於 線性闖關學習系統 的Web端完整實現：

  1. 第1關：詞彙學習

    • Web特色：大螢幕詞彙展示、快捷鍵操作
    • 共用規則：5個詞彙組合、4選1測試、自動3星評分

  2. 第2關：詞彙熟悉

    • Web特色：拖拽式重組、SVG連線配對
    • 共用規則：例句重組、詞彙配對、全正確通關

  3. 第2+關：口說練習 (付費特別關卡)

    • Web特色：Web Audio API、詳細評分面板
    • 共用規則：5鑽石消費、五維評分、星級獎勵機制

  4. 第3關：情境對話

    • Web特色：雙視窗模式、多標籤對話、實時分析
    • 共用規則：雙重任務系統、三星評分、AI訂正系統

💎 完整商業系統 (Web端實現)

基於 共同業務規則 的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架構)

📚 共用規範模組

🌐 平台規範文檔

🛠️ 技術資源

  • 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開發團隊