# Drama Ling Web版本 HTML畫面規格書
## 📋 文件資訊
- **版本**: v1.0
- **建立日期**: 2025-09-11
- **基於**: 現有 02_design 規格分析
- **平台**: Web端專用
- **設計系統**: Drama Ling Design System v3.0
---
## 🎯 設計原則與架構
### 設計原則
1. **桌面優先**: 充分利用大螢幕優勢，支援多視窗和複雜工作流
2. **企業級功能**: 提供管理工具、批量操作、詳細分析
3. **無障礙設計**: 完整鍵盤導航支援，符合 WCAG 2.1 AA 標準
4. **響應式布局**: 1200px+ 桌面最佳化，向下相容平板
5. **模組化架構**: 基於共用模組系統，避免重複開發
### 技術架構
- **前端技術**: 響應式 HTML5 + CSS3 + JavaScript
- **設計系統**: CSS Variables + Component Library
- **瀏覽器支援**: Chrome 80+, Safari 13+, Firefox 75+
- **效能要求**: UI 互動 <500ms, AI 回應 <2s
- **無障礙**: 完整鍵盤導航, 螢幕閱讀器支援
---
## 📱 核心頁面規格
### 1. 🏠 學習管理儀表板 (Page_Learning_Dashboard_Advanced_W.html)
#### 功能描述
企業級學習進度管理中心，提供深度分析和多維度數據展示
#### 頁面布局
```
[Header Navigation Bar]
[Left Sidebar] | [Main Content Area] | [Right Panel]
- 快速動作 | - 學習進度總覽 | - 即時統計
- 導航選單 | - 多維度分析圖表 | - 快速設定
- 用戶資訊 | - 詳細學習數據表格 | - 通知中心
| - 自訂報表區域 |
```
#### 核心元件
- **多維度儀表板**: 學習時間、完成率、AI評分趨勢
- **即時數據表格**: 可排序、篩選的學習記錄
- **自訂報表工具**: 拖拽式報表建立器
- **進度預測分析**: AI驅動的學習建議
#### 獨特功能
- 雙螢幕模式: 主儀表板 + 詳細分析視窗
- 鍵盤快捷鍵: Ctrl+D (儀表板), Ctrl+R (報表), Ctrl+S (統計)
- 批量匯出: CSV、PDF、Excel 格式支援
- 即時更新: WebSocket 連線提供即時數據同步
#### 響應式設計
- **桌面 (1920px+)**: 三欄式布局，完整功能展示
- **筆電 (1366px)**: 可摺疊側邊欄，主要功能保持
- **平板 (768px)**: 單欄布局，選單摺疊至頂部
---
### 2. ✏️ 內容創作工具 (Page_Content_Authoring_W.html)
#### 功能描述
Web專用的劇本和詞彙內容創作平台，支援即時預覽和協作
#### 頁面布局
```
[Toolbar: 檔案|編輯|檢視|工具]
[Left Panel] | [Editor Area] | [Right Panel]
- 專案檔案樹 | - 劇本編輯器 | - 即時預覽
- 模板庫 | - 詞彙管理器 | - AI 建議
- 版本控制 | - 語音錄製介面 | - 品質檢查
```
#### 核心元件
- **富文本編輯器**: 支援 Markdown, 語音標註, 難度標記
- **即時預覽器**: 學習者視角的內容預覽
- **AI 內容建議**: 自動語法檢查和表達優化
- **協作工具**: 評論系統、版本比較、變更追蹤
#### 獨特功能
- **拖拽式劇本建構**: 視覺化情境建立工具
- **語音同步錄製**: 內建語音錄製和波形編輯
- **自動難度評級**: AI 分析內容複雜度
- **批量內容處理**: CSV 匯入匯出, 範本套用
#### 技術特色
- 自動儲存機制 (每30秒)
- 離線編輯支援 (Service Worker)
- 快捷鍵支援 (Ctrl+S 儲存, Ctrl+P 預覽)
- 檔案拖拽上傳
---
### 3. 👥 用戶管理系統 (Page_User_Management_W.html)
#### 功能描述
企業級用戶管理中心，支援批量操作和詳細權限控制
#### 頁面布局
```
[搜尋和篩選工具列]
[批量操作工具列]
[Main Data Table] | [Right Detail Panel]
- 用戶清單 (分頁, 排序, 篩選) | - 選中用戶詳細資訊
- 批量選擇核取方塊 | - 學習進度摘要
- 即時狀態更新 | - 權限設定
| - 操作歷史
[底部統計摘要]
```
#### 核心元件
- **高效數據表格**: 虛擬滾動支援10,000+ 用戶
- **進階篩選器**: 多條件組合篩選
- **批量操作工具**: 匯出、權限變更、通知發送
- **用戶詳細面板**: 完整用戶資料和學習分析
#### 獨特功能
- **CSV 批量匯入**: 支援用戶批量建立和更新
- **權限模板系統**: 快速套用角色權限
- **學習進度同步**: 即時顯示各用戶學習狀態
- **自動化通知**: 基於觸發條件的智能通知
#### 企業功能
- 單一登入 (SSO) 整合
- LDAP/Active Directory 同步
- 多組織架構支援
- 審核日誌完整記錄
---
### 4. 📊 深度分析中心 (Page_Analytics_Center_W.html)
#### 功能描述
全方位學習數據分析平台，提供商業智能和學習成效洞察
#### 頁面布局
```
[分析工具列: 時間範圍|維度選擇|圖表類型|匯出]
[Top Summary Cards Row]
[Main Chart Area - 可配置儀表板] | [Insight Panel]
- 拖拽式圖表配置 | - AI 驅動洞察
- 多圖表同步聯動 | - 異常偵測
- 即時數據更新 | - 改善建議
[Bottom Data Detail Table]
```
#### 核心元件
- **動態儀表板**: 可拖拽配置的圖表組合
- **多維度分析**: 時間、用戶、內容、表現等維度
- **預測性分析**: 學習成效預測和風險預警
- **自訂報表生成器**: 拖拽式報表建立
#### 先進功能
- **AI 洞察引擎**: 自動發現數據趨勢和異常
- **A/B 測試框架**: 內容和功能效果比較
- **學習路徑分析**: 用戶學習行為軌跡追蹤
- **ROI 計算器**: 學習投資報酬率分析
#### 視覺化工具
- 互動式圖表 (Chart.js / D3.js)
- 熱力圖和樹狀圖支援
- 地理分佈視覺化
- 即時數據流圖表
---
### 5. ⚙️ 系統設定中心 (Page_System_Settings_W.html)
#### 功能描述
全域系統配置和企業級設定管理平台
#### 頁面布局
```
[Left Navigation Tree] | [Main Settings Panel] | [Preview Panel]
- 一般設定 | - 當前設定區域 | - 設定效果預覽
- 學習系統設定 | - 表單和控制項 | - 即時變更預覽
- 用戶和權限 | - 驗證和確認 | - 說明文件
- 整合和 API | - 匯入/匯出工具 |
- 系統監控 | |
```
#### 核心元件
- **分層設定導航**: 樹狀結構組織複雜設定
- **即時設定預覽**: 變更前預覽效果
- **設定版本控制**: 變更歷史和回復功能
- **批量設定工具**: 範本套用和批量變更
#### 企業功能
- **白標客製化**: 品牌色彩、標誌、域名設定
- **API 金鑰管理**: 第三方整合憑證管理
- **系統效能監控**: 即時效能指標和警告
- **備份和還原**: 自動備份和災難恢復
---
## 🎨 設計系統規格
### 色彩系統
```css
/* 主色調 */
--primary-teal: #00E5CC;
--primary-teal-light: #33E9D1;
--primary-teal-dark: #00B8A3;
/* 輔助色 */
--secondary-purple: #8E44AD;
--secondary-purple-light: #A569C1;
--secondary-purple-dark: #6B3485;
/* 企業功能色 */
--enterprise-blue: #2196F3;
--enterprise-green: #4CAF50;
--enterprise-orange: #FF9800;
--enterprise-red: #F44336;
```
### 間距系統
```css
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
```
### 字體系統
```css
/* 中文字體 */
--font-chinese: "PingFang TC", "Microsoft JhengHei", sans-serif;
/* 英文字體 */
--font-english: "Inter", "Segoe UI", sans-serif;
/* 字體大小 */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
```
---
## 📐 響應式設計規格
### 斷點系統
```css
/* 桌面優先設計 */
@media (max-width: 1920px) { /* 標準桌面 */ }
@media (max-width: 1366px) { /* 筆記型電腦 */ }
@media (max-width: 1024px) { /* 平板橫向 */ }
@media (max-width: 768px) { /* 平板直向 */ }
```
### 布局原則
1. **桌面 (1920px+)**: 多欄式布局，完整功能展示
2. **筆電 (1366px)**: 適度簡化，保持核心功能
3. **平板 (1024px)**: 單欄布局，選單收摺
4. **手機**: 重導向至專用 mobile 版本
---
## 🔧 技術實作規格
### HTML 結構規範
```html
[頁面標題] - Drama Ling Web
```
### JavaScript 架構
- **ES6+ 模組化開發**
- **Web Components 自訂元件**
- **Service Worker 離線支援**
- **WebSocket 即時通訊**
### 效能最佳化
- 程式碼分割和懶載入
- 圖片最佳化和 WebP 支援
- CSS 和 JS 壓縮合併
- CDN 分發和快取策略
---
## ♿ 無障礙規格
### WCAG 2.1 AA 合規性
- **鍵盤導航**: 所有功能支援 Tab 鍵導航
- **螢幕閱讀器**: 完整 ARIA 標籤支援
- **色彩對比**: 文字對比度 > 4.5:1
- **字體放大**: 支援至 200% 放大
### 快捷鍵系統
```
Ctrl + D: 開啟儀表板
Ctrl + S: 儲存當前工作
Ctrl + F: 搜尋功能
Ctrl + H: 說明文件
Esc: 關閉彈出視窗
Alt + M: 主選單
```
---
## 🚀 實作優先級
### 第一階段 (必要功能)
1. **學習管理儀表板** - 核心進度追蹤
2. **用戶管理系統** - 基礎用戶操作
3. **系統設定中心** - 基本配置管理
### 第二階段 (重要功能)
1. **內容創作工具** - 內容管理能力
2. **深度分析中心** - 數據洞察功能
### 第三階段 (增值功能)
1. 進階企業整合功能
2. AI 輔助創作工具
3. 多語言國際化支援
---
## 📝 開發指南
### 命名規範
- **HTML 檔案**: `Page_[功能名稱]_W.html`
- **CSS 類別**: `.web-[元件名稱]`
- **JavaScript 模組**: `webModule[功能名稱].js`
### 版本控制
- 遵循 Git Flow 工作流程
- 分支命名: `feature/web-[功能名稱]`
- 提交訊息格式: `feat(web): [功能描述]`
### 測試需求
- 跨瀏覽器相容性測試
- 響應式設計測試
- 無障礙功能測試
- 效能基準測試
---
*此規格書基於 Drama Ling 現有設計架構和共用模組系統，確保與移動端的一致性和資料同步。*