jettcheng1018
/
dramaling-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-app/sop/archive/web-html-specifications.md

11 KiB
Raw Blame History

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 金鑰管理: 第三方整合憑證管理
  • 系統效能監控: 即時效能指標和警告
  • 備份和還原: 自動備份和災難恢復

🎨 設計系統規格

色彩系統

/* 主色調 */
--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;

間距系統

--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 */

字體系統

/* 中文字體 */
--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 */

📐 響應式設計規格

斷點系統

/* 桌面優先設計 */
@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 結構規範

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