170 lines
10 KiB
Markdown
170 lines
10 KiB
Markdown
# 🔄 平台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流程
|
||
```mermaid
|
||
UI_Level_Map --> UI_Vocab_Level1_Learning --> UI_Vocab_Choice_Practice --> UI_Result_Success_A
|
||
```
|
||
|
||
### Web版實作流程
|
||
```mermaid
|
||
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 開發團隊 |