160 lines
4.7 KiB
Markdown
160 lines
4.7 KiB
Markdown
# 🌐 Web視圖結構生成說明
|
||
|
||
## 📋 生成概述
|
||
**基礎文件**: `system_views.json` (121個Mobile視圖)
|
||
**生成日期**: 2025-09-12
|
||
**轉換工具**: `convert_views_to_web.py`
|
||
**目標**: 為Web端開發提供完整的視圖結構設計
|
||
|
||
## 📂 生成結果
|
||
|
||
### 🎯 **主要輸出文件**
|
||
1. **`system_views_web.json`** - 6個示例Web視圖 (手動精選)
|
||
2. **`system_views_web_complete.json`** - 121個完整Web視圖 (自動生成)
|
||
3. **`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特性**
|
||
```json
|
||
"web_features": {
|
||
"multi_window": true/false,
|
||
"keyboard_shortcuts": ["Escape", "Ctrl+S", "Space"],
|
||
"responsive_breakpoints": ["desktop", "tablet", "mobile"],
|
||
"hover_effects": true,
|
||
"audio_controls": true // 學習類視圖專用
|
||
}
|
||
```
|
||
|
||
#### 2️⃣ **組件級增強**
|
||
```json
|
||
"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端特色功能
|
||
|
||
### ⌨️ **快捷鍵系統**
|
||
```javascript
|
||
// 全域快捷鍵
|
||
"Ctrl+/" : "顯示快捷鍵幫助"
|
||
"Escape" : "關閉模態/返回"
|
||
"Ctrl+S" : "保存進度"
|
||
"Tab" : "導航焦點"
|
||
"Enter" : "確認操作"
|
||
|
||
// 學習模組專用
|
||
"Space" : "播放/暫停"
|
||
"1-4" : "選擇答案"
|
||
"←/→" : "上一個/下一個"
|
||
"R" : "重複音頻"
|
||
```
|
||
|
||
### 🖱️ **交互增強**
|
||
- **懸停效果**: 所有可互動元素
|
||
- **工具提示**: 詳細資訊顯示
|
||
- **拖拽操作**: 地圖導航、學習卡片
|
||
- **縮放控制**: 圖表、地圖視圖
|
||
- **批量操作**: 複習系統、成績管理
|
||
|
||
### 📱 **響應式設計**
|
||
```css
|
||
/* 斷點設計 */
|
||
desktop: 1200px+ /* 三欄佈局、豐富交互 */
|
||
laptop: 992-1199px /* 兩欄佈局、簡化工具 */
|
||
tablet: 768-991px /* 單欄佈局、觸控優化 */
|
||
mobile: 320-767px /* 基本功能、底部導航 */
|
||
```
|
||
|
||
## 🔧 開發團隊使用指南
|
||
|
||
### 💻 **前端工程師**
|
||
1. **參考完整文件**: `system_views_web_complete.json`
|
||
2. **實作組件**: 基於 `web_enhancements` 規格
|
||
3. **快捷鍵整合**: 參考 `common_shortcuts` 配置
|
||
4. **響應式設計**: 遵循 `responsive_breakpoints` 指引
|
||
|
||
### 🎨 **UI/UX設計師**
|
||
1. **設計參考**: `system_views_web.json` (精選示例)
|
||
2. **組件規格**: 參考 `web_component_types` 分類
|
||
3. **交互設計**: 基於 `web_features` 和 `web_enhancements`
|
||
4. **無障礙設計**: 遵循 `accessibility` 標準
|
||
|
||
### 📋 **產品經理**
|
||
1. **功能對比**: Mobile vs Web 功能差異
|
||
2. **用戶體驗**: Web端專屬交互模式
|
||
3. **開發優先級**: 基於 `multi_window` 和復雜度評估
|
||
|
||
## 📈 視圖類型分析
|
||
|
||
### 🏗️ **按視圖類型統計**
|
||
- **Learning** (學習類): ~30個 - 多視窗、豐富快捷鍵
|
||
- **Form** (表單類): ~15個 - 即時驗證、自動完成
|
||
- **Dashboard** (儀表板): ~20個 - 數據視覺化、導出功能
|
||
- **Detail** (詳情類): ~25個 - 深度資訊、增強導航
|
||
- **Modal** (模態類): ~20個 - 鍵盤控制、焦點管理
|
||
- **其他**: ~11個 - 特殊功能、混合類型
|
||
|
||
### 🎯 **開發優先級建議**
|
||
1. **高優先級**: Learning類視圖 (核心功能)
|
||
2. **中優先級**: Dashboard類視圖 (數據分析)
|
||
3. **低優先級**: Detail類視圖 (資訊展示)
|
||
|
||
## ⚠️ 維護注意事項
|
||
|
||
### 🔄 **同步更新**
|
||
- 當 `system_views.json` 更新時，重新運行轉換腳本
|
||
- 檢查自定義增強功能是否需要調整
|
||
- 確保導航關聯關係的一致性
|
||
|
||
### 🔍 **質量檢查**
|
||
- 驗證所有 `navigation_view_id` 轉換正確
|
||
- 確認 `web_enhancements` 符合設計規範
|
||
- 測試快捷鍵配置無衝突
|
||
|
||
### 📝 **自定義擴展**
|
||
```python
|
||
# 在 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` |