# 情境對話功能規格文檔 (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接口規格