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