286 lines
12 KiB
Markdown
286 lines
12 KiB
Markdown
# 情境對話功能規格文檔 (Web版)
|
||
|
||
## 📋 功能概述
|
||
|
||
**功能名稱**: 情境對話訓練系統 (Web端)
|
||
**建立日期**: 2025-09-09
|
||
**最後更新**: 2025-09-09
|
||
**負責團隊**: 前端Web/設計/開發
|
||
**對應Mobile規格**: `../mobile/01_情境對話功能規格.md`
|
||
|
||
### 主要功能
|
||
- 沉浸式情境對話練習，支援多場景劇本
|
||
- 任務導向對話訓練，完成指定溝通目標
|
||
- 限時對話挑戰，提升反應速度和流暢度
|
||
- AI即時分析回饋，提供個人化學習建議
|
||
- 三維度評分系統，全面評估學習成效
|
||
- 對話訂正功能，精準糾正語法和表達問題
|
||
|
||
### Web端特色功能
|
||
- **雙視窗模式**: 左右分割顯示對話和輔助資訊
|
||
- **實時打字支援**: 完整鍵盤輸入，支援多語言輸入法
|
||
- **對話歷史面板**: 可捲動查看完整對話記錄
|
||
- **多標籤對話**: 同時進行多個對話練習
|
||
- **語音輸入優化**: Web Speech API整合，桌面級語音識別
|
||
- **進階統計儀表板**: 詳細的對話分析和學習軌跡
|
||
|
||
### 適用場景
|
||
- 辦公室桌面環境的深度對話練習
|
||
- 需要大量文字輸入的商務溝通訓練
|
||
- 多螢幕環境下的沉浸式學習體驗
|
||
- 長時間專注的對話技能提升訓練
|
||
|
||
### 與其他功能的關聯
|
||
- **詞彙學習系統**: 整合指定詞彙到對話情境中
|
||
- **學習地圖系統**: 提供情境對話的關卡和進度管理
|
||
- **道具商店系統**: 回覆提示道具、加時道具的商業整合
|
||
- **命條系統**: 對話失敗消耗命條的生命管理機制
|
||
- **排行榜系統**: 限時挑戰成績和社交競爭功能
|
||
|
||
## 💻 涉及的Web頁面
|
||
|
||
### 主要頁面
|
||
1. **Page_Dialogue_Main_W** - 情境對話主界面 (Web版)
|
||
2. **Page_Dialogue_Analysis_W** - AI對話分析頁面 (Web版)
|
||
3. **Page_Character_Details_W** - 角色詳情與背景介紹 (Web版)
|
||
4. **Page_Keywords_Details_W** - 情境關鍵詞預習頁面 (Web版)
|
||
5. **Page_Reply_Input_W** - 進階回覆輸入系統 (Web版)
|
||
6. **Page_Reply_Assistance_W** - 回覆卡關輔助面板 (Web版)
|
||
|
||
### Web專用頁面
|
||
1. **Page_Dialogue_History_Dashboard_W** - 對話歷史統計儀表板 (Web專用)
|
||
2. **Page_Multi_Dialogue_Manager_W** - 多對話管理頁面 (Web專用)
|
||
|
||
### 輔助畫面
|
||
1. **Modal_Cost_Confirm_W** - 對話成本確認模態視窗
|
||
2. **Modal_TimeWarp_Cards_W** - 時光卷道具使用模態視窗
|
||
3. **Modal_Challenge_Exit_Confirm_W** - 挑戰退出確認對話框
|
||
4. **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版使用者操作流程
|
||
1. **對話準備**: 頁面載入 → 檢視角色背景 → 閱讀任務目標 → 預習關鍵詞
|
||
2. **對話進行**: AI開場 → 用戶文字/語音回覆 → AI即時評分 → 繼續對話輪迴
|
||
3. **輔助使用**: 卡住時查看提示 → 使用道具 → 查看任務進度 → 調整學習策略
|
||
4. **多工學習**: 開啟新標籤 → 同時練習多個場景 → 標籤間切換比較
|
||
|
||
### 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接口規格 |