4.7 KiB

Raw Blame History

🌐 Web視圖結構生成說明

📋 生成概述

基礎文件: system_views.json (121個Mobile視圖)
生成日期: 2025-09-12
轉換工具: convert_views_to_web.py
目標: 為Web端開發提供完整的視圖結構設計

📂 生成結果

🎯 主要輸出文件

system_views_web.json - 6個示例Web視圖 (手動精選)
system_views_web_complete.json - 121個完整Web視圖 (自動生成)
convert_views_to_web.py - 自動轉換腳本

📊 轉換統計

Mobile視圖總數: 121個
Web視圖總數: 121個
轉換成功率: 100%
生成文件大小: 5,977行

🔄 轉換規則

📱➡️💻 命名轉換

Mobile格式: UI_ComponentName
Web格式:   Page_ComponentName_W

範例:
UI_Login_Main → Page_Login_Main_W
UI_Vocab_Level1_Learning → Page_Vocab_Level1_Learning_W
UI_Dialogue_Main → Page_Dialogue_Main_W

🌟 Web端增強功能

1️⃣ 全域Web特性

"web_features": {
  "multi_window": true/false,
  "keyboard_shortcuts": ["Escape", "Ctrl+S", "Space"],
  "responsive_breakpoints": ["desktop", "tablet", "mobile"],
  "hover_effects": true,
  "audio_controls": true  // 學習類視圖專用
}

2️⃣ 組件級增強

"web_enhancements": {
  "hover_effects": true,
  "keyboard_shortcut": "Enter", 
  "loading_state": true,
  "auto_complete": true,
  "validation_messages": "inline"
}

3️⃣ Web專用組件類型

ShortcutPanel - 快捷鍵提示面板
Toolbar - 工具列
AssistancePanel - 輔助面板
AnalysisPanel - 分析面板
SmartInput - 智能輸入框

🎮 Web端特色功能

⌨️ 快捷鍵系統

// 全域快捷鍵
"Ctrl+/" : "顯示快捷鍵幫助"
"Escape" : "關閉模態/返回"
"Ctrl+S" : "保存進度"
"Tab"    : "導航焦點"
"Enter"  : "確認操作"

// 學習模組專用
"Space"  : "播放/暫停"
"1-4"    : "選擇答案"
"←/→"    : "上一個/下一個"
"R"      : "重複音頻"

🖱️ 交互增強

懸停效果: 所有可互動元素
工具提示: 詳細資訊顯示
拖拽操作: 地圖導航、學習卡片
縮放控制: 圖表、地圖視圖
批量操作: 複習系統、成績管理

📱 響應式設計

/* 斷點設計 */
desktop: 1200px+   /* 三欄佈局、豐富交互 */
laptop:  992-1199px /* 兩欄佈局、簡化工具 */
tablet:  768-991px  /* 單欄佈局、觸控優化 */
mobile:  320-767px  /* 基本功能、底部導航 */

🔧 開發團隊使用指南

💻 前端工程師

參考完整文件: system_views_web_complete.json
實作組件: 基於 web_enhancements 規格
快捷鍵整合: 參考 common_shortcuts 配置
響應式設計: 遵循 responsive_breakpoints 指引

🎨 UI/UX設計師

設計參考: system_views_web.json (精選示例)
組件規格: 參考 web_component_types 分類
交互設計: 基於 web_features 和 web_enhancements
無障礙設計: 遵循 accessibility 標準

📋 產品經理

功能對比: Mobile vs Web 功能差異
用戶體驗: Web端專屬交互模式
開發優先級: 基於 multi_window 和復雜度評估

📈 視圖類型分析

🏗️ 按視圖類型統計

Learning (學習類): ~30個 - 多視窗、豐富快捷鍵
Form (表單類): ~15個 - 即時驗證、自動完成
Dashboard (儀表板): ~20個 - 數據視覺化、導出功能
Detail (詳情類): ~25個 - 深度資訊、增強導航
Modal (模態類): ~20個 - 鍵盤控制、焦點管理
其他: ~11個 - 特殊功能、混合類型

🎯 開發優先級建議

高優先級: Learning類視圖 (核心功能)
中優先級: Dashboard類視圖 (數據分析)
低優先級: Detail類視圖 (資訊展示)

⚠️ 維護注意事項

🔄 同步更新

當 system_views.json 更新時，重新運行轉換腳本
檢查自定義增強功能是否需要調整
確保導航關聯關係的一致性

🔍 質量檢查

驗證所有 navigation_view_id 轉換正確
確認 web_enhancements 符合設計規範
測試快捷鍵配置無衝突

📝 自定義擴展

# 在 convert_views_to_web.py 中自定義增強邏輯
def get_custom_enhancements(view_id, view_name):
    if "Level1" in view_id:
        return {"beginner_mode": True}
    return {}

最後更新: 2025-09-12
文件版本: v1.0
維護者: Drama Ling Web開發團隊
相關文件: web-component-architecture.md, web-design-system-guide.md

4.7 KiB Raw Blame History Unescape Escape