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

## 📋 功能概述

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

### 整合共用規範
> 本規格基於以下共用模組，請參閱對應規格文件：
> - **[線性闖關學習系統](../common/progressive-stage-system.md)** - 第3關情境對話機制
> - **[AI算法規格](../common/ai-algorithm-specs.md)** - 情境對話AI分析系統
> - **[口說評分系統](../common/speaking-evaluation-specs.md)** - 五維度口說評估
> - **[語用分析系統](../common/pragmatic-analysis-specs.md)** - 六維語用標準建議
> - **[共同業務規則](../common/business-rules.md)** - 命條系統和道具商店

### 主要功能 (第3關情境對話)
- **雙重任務系統**: 完成劇情意圖 + 使用前面學習的5個指定詞彙
- **三星評分系統**: 任務星、語法星、口說星獨立評估
- **AI即時分析**: 語法、口說、任務完成三維度即時反饋
- **回覆輔助系統**: 三層引導內容和免費輔助功能
- **訂正系統**: 語法錯誤和口說問題的精準糾正
- **限時挑戰模式**: 300秒限時對話，競技式學習體驗

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

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

### 與其他功能的關聯
- **線性闖關系統**: 完成第2關或第2+關後解鎖，通關後解鎖下一劇本
- **詞彙學習系統**: 使用前三關學習的5個指定詞彙
- **道具商店系統**: 整合回覆提示道具、加時道具、時間管理道具
- **命條系統**: 啟動消耗1個命條，失敗不額外扣除
- **間隔複習系統**: 對話中使用的詞彙自動加入複習清單

## 💻 涉及的Web頁面 (第3關架構)

### 主要頁面
1. **Page_Dialogue_Level3_Main_W** - 第3關情境對話主界面 (Web版)
2. **Page_Dialogue_AI_Analysis_W** - AI三維對話分析頁面 (Web版)
3. **Page_Dialogue_Correction_W** - 對話訂正系統頁面 (Web版)
4. **Page_Character_Background_W** - 角色詳情與情境背景 (Web版)
5. **Page_Task_Progress_W** - 雙重任務進度追蹤 (Web版)
6. **Page_Reply_Assistance_W** - 回覆卡關輔助面板 (Web版)

### Web專用頁面
1. **Page_Dialogue_History_Dashboard_W** - 對話歷史統計儀表板 (Web專用)
2. **Page_Multi_Dialogue_Manager_W** - 多對話管理頁面 (Web專用)
3. **Page_Timed_Challenge_W** - 限時挑戰模式頁面 (Web專用)

### 輔助模態視窗
1. **Modal_Cost_Confirm_W** - 道具消費確認模態視窗
2. **Modal_TimeWarp_Cards_W** - 時光卷道具使用模態視窗
3. **Modal_Challenge_Exit_Confirm_W** - 挑戰退出確認對話框
4. **Panel_Three_Star_Display_W** - 三星評分結果顯示面板

## 🎯 詳細頁面規格 (基於共用規範)

### Page_Dialogue_Level3_Main_W - 第3關情境對話主界面

#### 功能說明 (整合共用規範)
- **頁面目的**: 第3關情境對話的核心學習體驗
- **關卡機制**: 參考 [線性闖關學習系統 - 第3關](../common/progressive-stage-system.md#第3關情境對話-situational-dialogue)
- **進入條件**: 完成第2關或第2+關，消耗1個命條
- **通關條件**: 雙重任務系統（劇情意圖≥50%完成 + 詞彙至少提及一次）

#### 雙重任務系統
基於 [AI算法規格 - 劇情任務識別](../common/ai-algorithm-specs.md#劇情任務識別系統)：
- **劇情意圖任務**: 完成指定的情境表達意圖
- **指定詞彙任務**: 使用前面關卡學習的5個詞彙

#### 三星評分系統
基於 [AI算法規格 - 三星評分](../common/ai-algorithm-specs.md#情境對話表現評分系統)：
- **⭐ 任務星**: 所有意圖任務100%完成
- **⭐ 語法星**: 語法錯誤率 = 0
- **⭐ 口說星**: 口說平均分數 > 80

#### Web版佈局特點
- **主要對話區域**: 占螢幕60%寬度，中央對話泡泡顯示
- **任務進度面板**: 右側20%寬度，顯示雙重任務進度
- **輔助功能面板**: 左側20%寬度，顯示詞彙提示、AI分析
- **底部輸入區域**: 固定在底部，包含文字輸入和語音輸入

#### 頁面欄位細節

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

#### Web版互動元素

| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---------|---------|----------|--------|----------|------|
| 文字輸入框 | 文本區域 | 點擊/自動焦點 | - | 空白→輸入中 | 支援多語言輸入法 |
| 語音輸入按鈕 | 按鈕 | 點擊/V鍵 | V | 關閉→錄音中 | Web Speech API |
| 送出回覆按鈕 | 按鈕 | 點擊/Enter鍵 | Enter | 正常→傳送中 | 主要操作按鈕 |
| 回覆提示按鈕 | 按鈕 | 點擊/H鍵 | H | 正常→請求中 | 消耗30鑽石 |
| 任務提示按鈕 | 按鈕 | 點擊/T鍵 | T | 正常→顯示提示 | 免費，但影響任務星 |
| 詞彙提示按鈕 | 按鈕 | 點擊/W鍵 | W | 正常→顯示範例 | 免費詞彙使用範例 |
| 翻譯輔助按鈕 | 按鈕 | 點擊/G鍵 | G | 正常→翻譯中 | Google翻譯整合 |
| 角色背景查看 | 面板 | 滑鼠懸停 | I | 收合→展開 | 右側面板互動 |
| 對話歷史捲動 | 捲動條 | 滑鼠滾輪 | ↑↓ | - | 無限捲動對話記錄 |
| 語速調節 | 滑桿 | 拖拽/+- | +/- | 0.5x-2x | 語音播放速度 |
| 全螢幕模式 | 按鈕 | 點擊/F11 | F11 | 正常↔全螢幕 | 沉浸式對話模式 |

#### Web版使用者操作流程
1. **對話準備**: 頁面載入 → 檢視角色背景 → 閱讀雙重任務目標 → 預習指定詞彙
2. **對話進行**: AI開場 → 用戶回覆 → AI即時三維評分 → 任務進度更新 → 繼續對話
3. **輔助使用**: 卡住時查看任務提示 → 使用回覆提示道具 → 查看詞彙範例
4. **通關判定**: 達到雙重通關條件 → 三星評分結算 → 選擇訂正或直接領獎

### Page_Dialogue_AI_Analysis_W - AI三維對話分析頁面

#### 功能說明 (整合口說評分和語用分析)
- **頁面目的**: 詳細展示AI三維分析結果和學習建議
- **分析系統**: 整合 [口說評分系統](../common/speaking-evaluation-specs.md) 和 [語用分析系統](../common/pragmatic-analysis-specs.md)
- **進入條件**: 對話結束後自動跳轉或手動查看分析

#### 三維分析架構
基於 [AI算法規格 - 三維對話評估](../common/ai-algorithm-specs.md#三維對話評估系統)：
- **語法評分**: 評估語法正確性，完美表現雙倍獎勵
- **口說評分**: 五維度口說表現評估（發音/流暢度/韻律/完整度/準確度）
- **語用分析**: 六維語用標準建議（僅建議，不評分）

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 語法評分結果 | Object | 是 | {} | 評分物件 | 卡片式顯示 |
| 語法錯誤列表 | Array | 否 | [] | 錯誤陣列 | 有錯誤時顯示 |
| 口說五維評分 | Object | 是 | {} | 評分物件 | 雷達圖顯示 |
| 口說平均分數 | Number | 是 | 0 | 0-100 | 大數字顯示 |
| 語用六維建議 | Object | 是 | {} | 建議物件 | 建議卡片列表 |
| 劇情任務完成度 | Array | 是 | [] | 完成度陣列 | 進度條顯示 |
| 詞彙使用統計 | Object | 是 | {} | 使用統計 | 標籤雲顯示 |
| 三星獲得狀態 | Object | 是 | {} | 星級物件 | 星星圖示顯示 |
| 學習建議列表 | Array | 是 | [] | 建議陣列 | 列表形式 |

#### Web版互動元素

| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---------|---------|----------|--------|----------|------|
| 分析類別切換 | 標籤組 | 點擊/1-3數字鍵 | 1-3 | - | 語法/口說/語用切換 |
| 詳細錯誤查看 | 按鈕 | 點擊/D鍵 | D | 收合→展開 | 錯誤詳情面板 |
| 口說音檔回放 | 按鈕 | 點擊/P鍵 | P | 正常→播放中 | 用戶錄音回放 |
| 建議接受按鈕 | 按鈕 | 點擊/A鍵 | A | - | 採納學習建議 |
| 分析報告匯出 | 按鈕 | 點擊/Ctrl+E | Ctrl+E | 正常→處理中 | PDF報告匯出 |
| 立即訂正按鈕 | 按鈕 | 點擊/C鍵 | C | 正常→訂正模式 | 進入訂正流程 |
| 直接領獎按鈕 | 按鈕 | 點擊/R鍵 | R | 正常→領取中 | 跳過訂正直接領獎 |

### Page_Dialogue_Correction_W - 對話訂正系統頁面

#### 功能說明 (整合AI訂正系統)
- **頁面目的**: 針對語法和口說錯誤進行精準訂正
- **訂正系統**: 參考 [AI算法規格 - 情境對話AI訂正](../common/ai-algorithm-specs.md#情境對話ai訂正系統)
- **獎勵機制**: 訂正完成後獲得訂正後獎勵數值

#### 訂正流程
- **語法錯誤訂正**: 依序對每個錯誤句子進行訂正
- **口說錯誤訂正**: 重新錄製口說表現不佳的句子
- **進度追蹤**: 分子=訂正次數，分母=總錯誤數

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 待訂正錯誤列表 | Array | 是 | [] | 錯誤陣列 | 左側錯誤清單 |
| 當前訂正句子 | String | 是 | - | 句子字串 | 中央顯示區域 |
| 錯誤類型標記 | String | 是 | - | 錯誤類型 | 語法/口說標籤 |
| 訂正輸入框 | String | 否 | - | 1-200字 | 用戶訂正輸入 |
| 語音重錄區域 | Audio | 否 | - | 音檔 | 口說訂正專用 |
| 訂正進度 | Number | 是 | 0 | 0-100% | 進度條顯示 |
| 訂正結果反饋 | Object | 否 | {} | 反饋物件 | 正確/錯誤提示 |

### Page_Timed_Challenge_W - 限時挑戰模式頁面 (Web專用)

#### 功能說明 (整合限時挑戰機制)
- **頁面目的**: 300秒限時對話挑戰，競技式學習
- **付費機制**: 參考 [共同業務規則 - 道具商店](../common/business-rules.md#br-pay-03-道具商店系統)
- **入場費**: 50鑽石，VIP用戶每日3次免費

#### 限時挑戰特色
- **精確計時**: 300秒倒數計時系統
- **時間道具**: 時間暫停（100鑽石）、時間加成（150鑽石）
- **效率獎勵**: 基於完成時間的1.2x-2.0x獎勵倍數
- **排行榜**: 每週限時挑戰排行榜競爭

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 剩餘時間顯示 | Number | 是 | 300 | >=0秒 | 頁面頂部大字體 |
| 入場費確認 | Boolean | 是 | false | true/false | 進入前確認 |
| VIP免費次數 | Number | 否 | 0 | >=0 | VIP用戶顯示 |
| 時間道具庫存 | Object | 否 | {} | 道具物件 | 右側道具面板 |
| 挑戰進度 | Number | 是 | 0 | 0-100% | 任務完成度 |
| 效率倍數 | Number | 是 | 1.0 | 1.0-2.0 | 實時效率計算 |
| 排行榜位置 | Number | 否 | - | >=1 | 當前排名顯示 |

## 🌐 Web端技術特點 (整合共用規範)

### 響應式設計適配
- **超寬螢幕**: 2560px以上支援三欄佈局（對話+任務+輔助）
- **標準桌面**: 1920px最佳化雙欄佈局
- **筆記本**: 1366px以上單欄加側邊欄
- **平板橫向**: 1024px以上簡化佈局

### AI系統整合
基於共用模組的Web端實現：
- **即時分析引擎**: 整合 [AI算法規格](../common/ai-algorithm-specs.md) 的三維分析
- **口說評分API**: 整合 [口說評分系統](../common/speaking-evaluation-specs.md)
- **語用分析API**: 整合 [語用分析系統](../common/pragmatic-analysis-specs.md)
- **回覆輔助AI**: 三層引導內容生成

### Web API整合
- **Web Speech API**: 語音識別和語音合成
- **Clipboard API**: 複製對話內容和分析結果
- **Fullscreen API**: 沉浸式對話模式
- **Notification API**: 桌面通知和學習提醒
- **IndexedDB**: 對話歷史和分析結果快取

## ⌨️ Web版快捷鍵系統

### 對話操作快捷鍵
- `Enter` - 送出回覆
- `Shift + Enter` - 換行（多行輸入）
- `V` - 開始/停止語音輸入
- `H` - 請求回覆提示（消耗30鑽石）
- `T` - 顯示任務提示（免費但影響任務星）
- `W` - 顯示詞彙使用範例
- `G` - Google翻譯輔助
- `Space` - 播放/暫停AI語音

### 頁面導航快捷鍵
- `Ctrl + T` - 開啟新對話標籤
- `Ctrl + W` - 關閉當前對話
- `Ctrl + Tab` - 切換對話標籤
- `F11` - 全螢幕沉浸式模式
- `Esc` - 退出當前操作

### 分析和訂正快捷鍵
- `1-3` - 切換分析類別（語法/口說/語用）
- `D` - 顯示詳細錯誤
- `P` - 播放口說音檔
- `C` - 進入訂正模式
- `R` - 跳過訂正直接領獎

## 📊 Web版業務邏輯差異

### 第3關特殊機制
基於 [線性闖關學習系統](../common/progressive-stage-system.md) 的Web端實現：
- **雙重任務並行**: 同時追蹤劇情任務和詞彙使用進度
- **三星獨立評估**: 每顆星星獨立計算，最多可獲得0-3顆星
- **命條消耗機制**: 啟動時消耗1個命條，失敗不額外扣除
- **解鎖機制**: 通關後解鎖下一劇本第1關

### 道具系統整合
基於 [共同業務規則 - 道具商店](../common/business-rules.md#br-pay-03-道具商店系統)：
- **回覆提示道具**: 30鑽石，提供三層引導內容
- **限時挑戰道具**: 時間暫停100鑽石、時間加成150鑽石
- **免費輔助功能**: 任務提示、詞彙範例、Google翻譯

### 多會話管理
- **對話狀態同步**: 多標籤對話進度即時同步
- **會話持久化**: 瀏覽器關閉前自動保存對話狀態
- **跨設備同步**: 通過帳戶系統同步學習進度

## 🧪 Web版測試要點

### 第3關流程測試
- [ ] 雙重任務系統正常運作
- [ ] 三星評分機制正確計算
- [ ] 命條消耗和扣除機制
- [ ] 通關後正確解鎖下一劇本

### AI分析功能測試
- [ ] 語法評分準確性
- [ ] 口說五維評分正常
- [ ] 語用建議生成合理
- [ ] 即時分析響應速度<2秒

### 道具功能測試
- [ ] 回覆提示道具正常消費和使用
- [ ] 限時挑戰付費機制
- [ ] 免費輔助功能無限制使用
- [ ] VIP特權正確識別

### Web專用功能測試
- [ ] 多標籤對話管理
- [ ] 全螢幕沉浸式模式
- [ ] 快捷鍵功能完整
- [ ] 響應式佈局適配

## 📝 Web端開發注意事項

### 前端架構
- 使用現代JavaScript框架整合AI分析系統
- 整合多個共用模組API（口說評分、語用分析）
- 實現複雜的雙重任務追蹤邏輯
- 響應式設計支援多種螢幕尺寸

### AI系統整合
- 嚴格遵循 [AI算法規格](../common/ai-algorithm-specs.md) 的分析標準
- 整合 [口說評分系統](../common/speaking-evaluation-specs.md) 的五維評分
- 實現 [語用分析系統](../common/pragmatic-analysis-specs.md) 的建議展示
- 確保AI響應時間<2秒的性能要求

### 業務邏輯整合
- 嚴格遵循 [線性闖關學習系統](../common/progressive-stage-system.md) 的第3關機制
- 整合 [共同業務規則](../common/business-rules.md) 的命條和道具系統
- 實現與前面關卡的詞彙傳遞機制
- 確保跨平台學習進度同步

### 用戶體驗優化
- 對話輸入無延遲響應
- 語音識別準確度>90%
- AI分析結果視覺化呈現
- 支援完整的快捷鍵操作

---

**文檔狀態**: 🟢 已完成 (基於共用規範更新)  
**最後更新**: 2025-09-11  
**版本**: v2.0 - 整合第3關情境對話和AI分析系統  
**相關文檔**: 
- `../common/progressive-stage-system.md` - 線性闖關學習系統規格
- `../common/ai-algorithm-specs.md` - AI算法規格
- `../common/speaking-evaluation-specs.md` - 口說評分系統規格
- `../common/pragmatic-analysis-specs.md` - 語用分析系統規格
- `../common/business-rules.md` - 共同業務規則