12 KiB

Raw Blame History

情境對話功能規格文檔 (Web版)

📋 功能概述

功能名稱: 情境對話訓練系統 (Web端)
建立日期: 2025-09-09
最後更新: 2025-09-09
負責團隊: 前端Web/設計/開發
對應Mobile規格: ../mobile/01_情境對話功能規格.md

主要功能

沉浸式情境對話練習，支援多場景劇本
任務導向對話訓練，完成指定溝通目標
限時對話挑戰，提升反應速度和流暢度
AI即時分析回饋，提供個人化學習建議
三維度評分系統，全面評估學習成效
對話訂正功能，精準糾正語法和表達問題

Web端特色功能

雙視窗模式: 左右分割顯示對話和輔助資訊
實時打字支援: 完整鍵盤輸入，支援多語言輸入法
對話歷史面板: 可捲動查看完整對話記錄
多標籤對話: 同時進行多個對話練習
語音輸入優化: Web Speech API整合，桌面級語音識別
進階統計儀表板: 詳細的對話分析和學習軌跡

適用場景

辦公室桌面環境的深度對話練習
需要大量文字輸入的商務溝通訓練
多螢幕環境下的沉浸式學習體驗
長時間專注的對話技能提升訓練

與其他功能的關聯

詞彙學習系統: 整合指定詞彙到對話情境中
學習地圖系統: 提供情境對話的關卡和進度管理
道具商店系統: 回覆提示道具、加時道具的商業整合
命條系統: 關卡啟動消耗命條的生命管理機制，詳見共同業務規則
排行榜系統: 限時挑戰成績和社交競爭功能

💻 涉及的Web頁面

主要頁面

Page_Dialogue_Main_W - 情境對話主界面 (Web版)
Page_Dialogue_Analysis_W - AI對話分析頁面 (Web版)
Page_Character_Details_W - 角色詳情與背景介紹 (Web版)
Page_Keywords_Details_W - 情境關鍵詞預習頁面 (Web版)
Page_Reply_Input_W - 進階回覆輸入系統 (Web版)
Page_Reply_Assistance_W - 回覆卡關輔助面板 (Web版)

Web專用頁面

Page_Dialogue_History_Dashboard_W - 對話歷史統計儀表板 (Web專用)
Page_Multi_Dialogue_Manager_W - 多對話管理頁面 (Web專用)

輔助畫面

Modal_Cost_Confirm_W - 對話成本確認模態視窗
Modal_TimeWarp_Cards_W - 時光卷道具使用模態視窗
Modal_Challenge_Exit_Confirm_W - 挑戰退出確認對話框
Panel_Task_Display_W - 任務完成狀態顯示面板

🎯 詳細頁面規格

Page_Dialogue_Main_W - 情境對話主界面 (Web版)

功能說明

頁面目的: 在桌面環境中提供沉浸式的對話練習體驗
進入條件: 從學習地圖選擇對話關卡，或從瀏覽器書籤進入
退出條件: 完成對話或主動離開頁面

Web版佈局特點

主要對話區域: 占螢幕60%寬度，中央對話泡泡顯示
角色資訊面板: 右側20%寬度，顯示角色背景和情境
輔助功能面板: 左側20%寬度，顯示提示、關鍵詞、任務進度
底部輸入區域: 固定在底部，包含文字輸入和語音輸入

頁面欄位細節

欄位名稱	資料類型	必填	預設值	驗證規則	顯示條件
對話情境標題	String	是	-	5-50字	頁面頂部顯示
對話參與角色	Array	是	-	角色陣列	右側面板顯示
對話歷史記錄	Array	是	[]	對話陣列	中央區域，可捲動
當前說話角色	String	是	-	角色ID	動態高亮顯示
用戶回覆輸入	String	否	-	1-500字	底部輸入框
任務進度指示	Number	是	0	0-100%	左側面板進度條
剩餘時間	Number	否	-	>=0秒	限時挑戰時顯示
關鍵詞提示	Array	否	[]	詞彙陣列	左側面板列表
語音輸入狀態	Boolean	是	false	true/false	麥克風圖示狀態
對話品質評分	Object	否	null	評分物件	實時評分顯示

Web版互動元素

元素名稱	元素類型	操作方式	快捷鍵	狀態變化	備註
文字輸入框	文本區域	點擊/自動焦點	-	空白→輸入中	支援多語言輸入法
語音輸入按鈕	按鈕	點擊/V鍵	V	關閉→錄音中	Web Speech API
送出回覆按鈕	按鈕	點擊/Enter鍵	Enter	正常→傳送中	主要操作按鈕
提示請求按鈕	按鈕	點擊/H鍵	H	正常→請求中	消耗道具提示
角色背景查看	面板	滑鼠懸停	I	收合→展開	右側面板互動
對話歷史捲動	捲動條	滑鼠滾輪	↑↓	-	無限捲動對話記錄
語速調節	滑桿	拖拽/+-	+/-	0.5x-2x	語音播放速度
全螢幕模式	按鈕	點擊/F11	F11	正常↔全螢幕	沉浸式對話模式
多標籤切換	標籤頁	點擊/Ctrl+Tab	Ctrl+Tab	-	切換不同對話

Web版使用者操作流程

對話準備: 頁面載入 → 檢視角色背景 → 閱讀任務目標 → 預習關鍵詞
對話進行: AI開場 → 用戶文字/語音回覆 → AI即時評分 → 繼續對話輪迴
輔助使用: 卡住時查看提示 → 使用道具 → 查看任務進度 → 調整學習策略
多工學習: 開啟新標籤 → 同時練習多個場景 → 標籤間切換比較

Page_Dialogue_History_Dashboard_W - 對話歷史統計儀表板 (Web專用)

功能說明

頁面目的: 提供詳細的對話練習歷史分析和進步軌跡
進入條件: 從對話分析頁面點擊"詳細統計"或從主選單進入
退出條件: 返回學習模組或關閉頁面

Web專有功能

時間序列分析: 對話表現的長期趨勢分析
場景表現對比: 不同情境場景的掌握度比較
語言能力雷達圖: 聽說讀寫能力的可視化分析
學習建議生成: AI基於歷史數據的個性化建議

頁面欄位細節

欄位名稱	資料類型	必填	預設值	驗證規則	顯示條件
統計時間範圍	DateRange	是	最近30天	有效日期範圍	頁面頂部篩選器
對話總次數	Number	是	0	>=0	卡片式統計顯示
平均對話時長	Number	是	0	>=0分鐘	統計卡片
整體準確率	Number	是	0	0-100%	統計卡片
場景完成度分布	Object	是	{}	場景統計物件	圓餅圖顯示
對話品質趨勢	Array	是	[]	時間序列數據	折線圖顯示
語言能力評估	Object	是	{}	能力評分物件	雷達圖顯示
常見錯誤類型	Array	是	[]	錯誤統計陣列	長條圖顯示
學習建議列表	Array	是	[]	建議陣列	列表形式顯示

Web版互動元素

元素名稱	元素類型	操作方式	快捷鍵	狀態變化	備註
時間範圍篩選	日期選擇器	點擊/T鍵	T	收合→展開	自訂時間範圍
圖表類型切換	標籤組	點擊/數字鍵1-6	1-6	-	不同視覺化圖表
數據鑽取	圖表點擊	點擊圖表元素	-	概覽→詳細	深入特定數據
匯出統計報告	按鈕	點擊/Ctrl+E	Ctrl+E	正常→處理中	PDF/Excel匯出
列印報告	按鈕	點擊/Ctrl+P	Ctrl+P	-	列印優化版面
全螢幕分析	按鈕	點擊/F11	F11	正常↔全螢幕	專注分析模式
圖表縮放	滑鼠滾輪	滾輪/+-	+/-	-	放大細節檢視
數據篩選	下拉選單	點擊/F鍵	F	全部→篩選	多維度篩選

Page_Multi_Dialogue_Manager_W - 多對話管理頁面 (Web專用)

功能說明

頁面目的: 在單一頁面中管理多個對話練習會話
進入條件: 點擊"開啟新對話"或使用快捷鍵Ctrl+T
退出條件: 關閉所有對話標籤或切換到單對話模式

Web專有優勢

標籤式管理: 類似瀏覽器標籤的對話會話管理
拖拽重新排列: 可拖拽調整對話標籤順序
快速切換: 鍵盤快捷鍵快速在對話間切換
會話同步: 所有對話進度即時同步到雲端

🌐 Web端技術特點

響應式設計適配

超寬螢幕: 2560px以上支援三欄佈局
標準桌面: 1920px最佳化雙欄佈局
筆記本: 1366px以上單欄加側邊欄
平板橫向: 1024px以上簡化佈局

Web API整合

Web Speech API: 語音識別和語音合成
Clipboard API: 複製對話內容和答案
Fullscreen API: 沉浸式學習模式
Notification API: 桌面通知和提醒
IndexedDB: 離線對話內容快取

效能最佳化

虛擬捲動: 長對話歷史的效能最佳化
懶載入: 圖片和音頻按需載入
Service Worker: 離線對話功能支援
Web Workers: 背景AI分析處理

⌨️ Web版快捷鍵系統

對話操作快捷鍵

Enter - 送出回覆
Shift + Enter - 換行 (多行輸入)
Ctrl + Enter - 強制送出
V - 開始/停止語音輸入
H - 請求提示
Space - 播放/暫停AI語音
Esc - 取消當前操作

頁面導航快捷鍵

Ctrl + T - 開啟新對話標籤
Ctrl + W - 關閉當前對話標籤
Ctrl + Tab - 切換到下一個對話
Ctrl + Shift + Tab - 切換到上一個對話
F11 - 全螢幕模式
Ctrl + D - 收藏當前對話場景

學習輔助快捷鍵

I - 顯示/隱藏角色資訊
K - 顯示/隱藏關鍵詞面板
T - 顯示/隱藏任務進度
+/- - 調整語音播放速度
Ctrl + H - 開啟對話歷史
F1 - 開啟快捷鍵說明

📊 Web版業務邏輯差異

對話會話管理

多會話支援: 可同時進行最多5個對話練習
會話持久化: 瀏覽器關閉前自動保存所有對話狀態
跨標籤同步: 不同瀏覽器標籤的對話進度即時同步
會話恢復: 意外關閉後可完整恢復對話狀態

輸入方式增強

混合輸入: 文字和語音輸入可無縫切換
多語言支援: 支援各種輸入法和語言切換
自動完成: 常用回覆的智能建議
語法檢查: 實時語法和拼寫檢查

分析功能強化

實時分析: 對話進行中即時顯示表現評分
深度統計: 比Mobile版更詳細的學習分析
長期追蹤: 支援長達一年的學習軌跡分析
對比分析: 可對比不同時期的學習表現

🧪 Web版測試要點

瀏覽器相容性

Chrome 90+ Web Speech API正常運作
Firefox 85+ 語音輸入功能正常
Safari 14+ 多媒體播放流暢
Edge 90+ 全功能正常運作

多標籤功能測試

可同時開啟5個對話會話
標籤間切換無延遲
每個標籤的對話狀態獨立
關閉標籤不影響其他會話

效能壓力測試

長對話歷史(500+輪)載入順暢
同時播放多個語音檔案
大量圖表數據渲染流暢
長時間使用無記憶體洩漏

輸入法相容性

中文輸入法正常運作
日文輸入法正常運作
韓文輸入法正常運作
各種語音輸入準確識別

📝 Web端開發注意事項

前端架構

使用React/Vue等現代框架
狀態管理使用Redux/Vuex
圖表使用D3.js或Chart.js
語音處理使用Web Audio API

使用者體驗

首屏快速載入(<2秒)
對話輸入無延遲響應
語音識別準確度>90%
支援各種鍵盤快捷鍵

資料同步

即時保存對話進度
離線狀態下的資料快取
跨設備同步學習記錄
資料備份和恢復機制

文檔狀態: 🟢 已完成
最後更新: 2025-09-09
版本: v1.0
相關文檔:

../mobile/01_情境對話功能規格.md - 對應的Mobile版規格
../common/業務規則.md - 共同業務邏輯
../common/數據模型.md - 數據結構定義
../common/API規格.md - API接口規格