# 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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[頁面標題] - Drama Ling Web</title>
    <link rel="stylesheet" href="assets/style.css">
    <link rel="stylesheet" href="assets/web-components.css">
</head>
<body class="web-layout">
    <nav class="top-navigation" role="navigation">
        <!-- 頂部導航 -->
    </nav>
    
    <main class="main-content" role="main">
        <!-- 主要內容區域 -->
    </main>
    
    <aside class="side-panel" role="complementary">
        <!-- 側邊工具面板 -->
    </aside>
    
    <footer class="page-footer" role="contentinfo">
        <!-- 頁面底部 -->
    </footer>
</body>
</html>
```

### 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 現有設計架構和共用模組系統，確保與移動端的一致性和資料同步。*