dramaling-app/sop/archive/platform-ui-mapping.md

🔄 平台UI映射表

📋 文檔概述

文檔名稱: Mobile/Web UI視圖映射對照表
建立日期: 2025-09-12
目的: 讓Web工程師清楚理解每個業務流程對應的Web端頁面
基礎依據: system_structure_design.json 和 comprehensive-user-flows-with-ui.md

🎯 使用說明

📱 Mobile工程師

• 直接參考 comprehensive-user-flows-with-ui.md 中的 UI_* 視圖
• 每個 UI_* 對應一個Mobile畫面組件

💻 Web工程師

• 使用本文檔的映射表，將流程中的 UI_* 轉換為對應的 Page_*_W
• 每個 Page_*_W 對應一個Web頁面組件

🔗 完整UI視圖映射表

🔐 認證與引導類

Mobile視圖	Web視圖	功能說明	Web端差異
UI_Login_Main	Page_Login_Main_W	登入主頁面	支援企業SSO、記住密碼
UI_Login_Social	Page_Login_Social_W	社交登入頁面	多平台OAuth集成
UI_SignUp_Main	Page_SignUp_Main_W	註冊主頁面	表單驗證、企業邀請碼
UI_PasswordReset_Form	Page_PasswordReset_Form_W	密碼重設表單	安全問題、雙因素驗證
UI_PasswordReset_Popup	Page_PasswordReset_Modal_W	密碼重設彈窗	模態對話框形式
UI_Onboarding_Welcome	Page_Onboarding_Welcome_W	引導歡迎頁面	大屏歡迎動畫、產品介紹
UI_Onboarding_Purpose	Page_Onboarding_Purpose_W	學習目標設定	多選項卡、詳細目標說明
UI_Onboarding_Level	Page_Onboarding_Level_W	程度設定	互動式能力測試
UI_Onboarding_TimeSlot	Page_Onboarding_TimeSlot_W	時間偏好設定	日曆視圖、時間規劃器
UI_Onboarding_Frequency	Page_Onboarding_Frequency_W	學習頻率設定	週曆視圖、自定義頻率
UI_Onboarding_Notice	Page_Onboarding_Notice_W	通知設定	詳細通知偏好設定
UI_Onboarding_Result	Page_Onboarding_Result_W	引導結果頁面	個人化學習計劃預覽

🧠 核心學習類

Mobile視圖	Web視圖	功能說明	Web端差異
UI_Level_Map	Page_Level_Map_W	學習地圖主頁面	全景地圖視圖、進度儀表板
UI_Level_Selection_Modal	Page_Level_Selection_W	關卡選擇頁面	非模態頁面、詳細關卡資訊
UI_Vocab_Level1_Learning	Page_Vocab_Level1_Learning_W	第1關詞彙學習	四關同屏預覽、快捷鍵操作
UI_Vocab_Level2_Mastery	Page_Vocab_Level2_Mastery_W	第2關詞彙熟悉	拖拽式重組、SVG連線配對
UI_Vocab_Level2Plus_Speaking	Page_Vocab_Level2Plus_Speaking_W	第2+關口說練習	Web Audio API、詳細評分面板
UI_Vocab_Introduction	Page_Vocab_Introduction_W	詞彙介紹頁面	多媒體展示、詞彙筆記功能
UI_Vocab_Choice_Practice	Page_Vocab_Choice_Practice_W	詞彙選擇練習	批量答題、即時反饋
UI_Dialogue_Main	Page_Dialogue_Main_W	對話主頁面	雙視窗模式、多標籤對話
UI_Dialogue_Practice_Main	Page_Dialogue_Practice_W	對話練習主頁面	情境選擇器、練習歷史
UI_Dialogue_Analysis	Page_Dialogue_Analysis_W	對話分析頁面	詳細分析報告、改善建議
UI_Reply_Assistance	Page_Reply_Assistance_W	回覆輔助面板	側邊欄助手、AI建議面板
UI_Speaking_Feedback	Page_Speaking_Feedback_W	口說評分回饋	視覺化評分圖表、進度追蹤
UI_Pronunciation_Practice	Page_Pronunciation_Practice_W	發音練習頁面	波形圖顯示、錄音回放

📚 學習任務與複習類

Mobile視圖	Web視圖	功能說明	Web端差異
UI_VocabReview_Main	Page_VocabReview_Main_W	詞彙複習主頁面	複習排程管理、批量複習
UI_Vocab_Review_Main	Page_Vocab_Review_System_W	詞彙複習系統	間隔演算法視覺化
UI_Vocab_Progress_Dashboard	Page_Vocab_Progress_Dashboard_W	詞彙進度儀表板	詳細統計圖表、學習分析
UI_ReviewCards	Page_ReviewCards_W	複習卡片	卡片堆疊視圖、快速瀏覽
UI_ReviewProgress	Page_ReviewProgress_W	複習進度	日曆熱力圖、進度預測
UI_ReviewSchedule	Page_ReviewSchedule_W	複習計劃	週月視圖排程、提醒設定
UI_TimeWarpChallenge_Main	Page_TimeWarpChallenge_W	限時挑戰主頁面	計時器視覺效果、排行榜
UI_TimedDialogue	Page_TimedDialogue_W	限時對話頁面	倒計時提醒、快速輸入

💰 商業功能類

Mobile視圖	Web視圖	功能說明	Web端差異
UI_Shop_Categories	Page_Shop_Categories_W	道具商店分類	網格佈局、篩選功能
UI_Shop_Item_Confirm	Page_Shop_Item_Confirm_W	道具購買確認	詳細商品說明、價格比較
UI_ItemStore_ConfirmPopup	Page_ItemStore_ConfirmModal_W	道具購買確認彈窗	模態對話框、安全支付
UI_PaymentFlow	Page_PaymentFlow_W	付費流程頁面	多重支付方式、企業級安全
UI_SubscriptionPlans	Page_SubscriptionPlans_W	訂閱方案頁面	方案比較表、試用功能
UI_Subscription_Result	Page_Subscription_Result_W	訂閱結果頁面	訂閱管理面板、使用統計
UI_Life_Points_Display	Component_LifePoints_W	命條顯示組件	頂部狀態欄、動畫效果
UI_AdOffer	Page_AdOffer_W	廣告邀請頁面	獎勵預覽、廣告時長說明
UI_AdViewing	Page_AdViewing_W	廣告播放頁面	全螢幕廣告、跳過按鈕

🎮 遊戲化與結果類

Mobile視圖	Web視圖	功能說明	Web端差異
UI_Result_Success_A	Page_Result_Success_A_W	成功結果頁面A	慶祝動畫、成就分享
UI_Result_Success_B	Page_Result_Success_B_W	成功結果頁面B	進度視覺化、下一步建議
UI_Result_Failure_A	Page_Result_Failure_A_W	失敗結果頁面A	鼓勵訊息、重試選項
UI_LevelResult_ScoreSummary	Page_LevelResult_ScoreSummary_W	關卡結果評分總結	詳細評分分析、比較圖表
UI_LevelResult_DialogScoreSummary	Page_LevelResult_DialogSummary_W	對話評分總結	對話回放、改善建議
UI_LevelResult_RewardConfirm	Page_LevelResult_RewardConfirm_W	獎勵確認頁面	獎勵預覽、領取動畫
UI_LevelResult_SmallReward	Page_LevelResult_SmallReward_W	小獎勵頁面	獎勵累積、成就進度
UI_RewardClaim	Page_RewardClaim_W	獎勵領取頁面	獎勵庫存、使用說明

👥 社交功能類

Mobile視圖	Web視圖	功能說明	Web端差異
UI_PersonalCenter_FriendMain	Page_PersonalCenter_FriendMain_W	好友主頁面	好友活動動態、群組聊天
UI_PersonalCenter_FriendList	Page_PersonalCenter_FriendList_W	好友列表	分組管理、批量操作
UI_PersonalCenter_FriendSearch	Page_PersonalCenter_FriendSearch_W	好友搜索	進階搜索、推薦好友
UI_Social_Ranking	Page_Social_Ranking_W	社交排行榜	多維度排行、歷史趨勢
UI_Social_Profile	Page_Social_Profile_W	社交檔案	詳細資料、學習足跡
UI_Social_Friends	Page_Social_Friends_W	社交好友	好友互動、學習比較
UI_Social_Search	Page_Social_Search_W	社交搜索	全站搜索、智能推薦
UI_RankingDetail	Page_RankingDetail_W	排行榜詳情	排行變化、達成條件

⚙️ 系統與設定類

Mobile視圖	Web視圖	功能說明	Web端差異
UI_Profile_Dashboard	Page_Profile_Dashboard_W	個人檔案儀表板	學習統計、成就展示
UI_Profile_Settings	Page_Profile_Settings_W	檔案設定	詳細偏好設定、隱私控制
UI_PersonalCenter_Settings	Page_PersonalCenter_Settings_W	個人中心設定	通知管理、帳號安全
UI_Assessment_Test	Page_Assessment_Test_W	能力評估測試	多題型測試、即時評分
UI_Assessment_Results	Page_Assessment_Results_W	評估結果	能力雷達圖、學習建議

📊 Web端特殊頁面 (Mobile無對應)

Web視圖	功能說明	獨有特色
Page_Dashboard_Overview_W	總覽儀表板	多模組統計、學習分析
Page_Multi_Window_Learning_W	多視窗學習	同時開啟多個學習模組
Page_Batch_Review_W	批量複習	快速複習、批量操作
Page_Learning_Analytics_W	學習分析	詳細數據分析、趨勢預測
Page_Admin_Panel_W	管理面板	教師/管理員專用功能

🔧 Web工程師使用指南

1. 閱讀用戶流程

1. 開啟 comprehensive-user-flows-with-ui.md
2. 找到目標功能的Mermaid流程圖
3. 識別流程中的 UI_* 視圖節點

2. 查找Web對應

1. 在本文檔中找到對應的 UI_* → Page_*_W 映射
2. 查看「Web端差異」欄位了解平台特色
3. 參考對應的Web端功能規格文檔

3. 實作Web頁面

1. 基於 Page_*_W 名稱創建頁面組件
2. 實現Web端特有功能 (如快捷鍵、多視窗等)
3. 確保與Mobile端業務邏輯保持一致

💡 範例：詞彙學習流程Web實作

原始Mobile流程

UI_Level_Map --> UI_Vocab_Level1_Learning --> UI_Vocab_Choice_Practice --> UI_Result_Success_A

Web版實作流程

Page_Level_Map_W --> Page_Vocab_Level1_Learning_W --> Page_Vocab_Choice_Practice_W --> Page_Result_Success_A_W

Web實作重點

• Page_Level_Map_W: 實作全景地圖視圖
• Page_Vocab_Level1_Learning_W: 支援四關同屏預覽
• Page_Vocab_Choice_Practice_W: 加入快捷鍵操作
• Page_Result_Success_A_W: 顯示詳細統計圖表

---

維護提醒: 當 system_structure_design.json 或用戶流程更新時，請同步更新此映射表。

最後更新: 2025-09-12
版本: v1.0
維護者: Drama Ling 開發團隊