284 lines
9.7 KiB
Python
284 lines
9.7 KiB
Python
#!/usr/bin/env python3
|
|
"""
|
|
將Mobile視圖轉換為Web視圖的轉換腳本
|
|
基於 system_views.json 生成 system_views_web_complete.json
|
|
"""
|
|
|
|
import json
|
|
import re
|
|
from datetime import datetime
|
|
|
|
def convert_view_id(mobile_id):
|
|
"""將Mobile視圖ID轉換為Web格式"""
|
|
if mobile_id and mobile_id.startswith('UI_'):
|
|
return mobile_id.replace('UI_', 'Page_') + '_W'
|
|
return mobile_id
|
|
|
|
def get_web_enhancements_for_type(component_type, component_name):
|
|
"""根據組件類型返回Web端增強功能"""
|
|
enhancements = {}
|
|
|
|
# 通用增強
|
|
enhancements["hover_effects"] = True
|
|
|
|
# 按類型分別處理
|
|
if component_type == "Button":
|
|
enhancements.update({
|
|
"keyboard_shortcut": "Enter",
|
|
"loading_state": True,
|
|
"hover_animation": True
|
|
})
|
|
elif component_type == "InputField":
|
|
enhancements.update({
|
|
"auto_complete": True,
|
|
"validation_messages": "inline",
|
|
"focus_ring": True
|
|
})
|
|
elif component_type == "Chart":
|
|
enhancements.update({
|
|
"interactive_legend": True,
|
|
"zoom_pan": True,
|
|
"export_data": True
|
|
})
|
|
elif component_type == "List":
|
|
enhancements.update({
|
|
"virtual_scrolling": True,
|
|
"multi_select": True,
|
|
"keyboard_navigation": True
|
|
})
|
|
elif component_type == "Modal":
|
|
enhancements.update({
|
|
"keyboard_shortcuts": ["Escape"],
|
|
"backdrop_click_close": True,
|
|
"focus_trap": True
|
|
})
|
|
|
|
return enhancements
|
|
|
|
def get_web_features_for_view(view_type, view_name):
|
|
"""根據視圖類型返回Web端特性"""
|
|
features = {
|
|
"multi_window": False,
|
|
"keyboard_shortcuts": ["Escape"],
|
|
"responsive_breakpoints": ["desktop", "tablet", "mobile"],
|
|
"hover_effects": True
|
|
}
|
|
|
|
# 學習類視圖增強
|
|
if view_type in ["Learning", "Practice"]:
|
|
features.update({
|
|
"multi_window": True,
|
|
"keyboard_shortcuts": ["Space", "Enter", "Ctrl+S", "Escape"],
|
|
"audio_controls": True
|
|
})
|
|
|
|
# 表單類視圖增強
|
|
elif view_type == "Form":
|
|
features.update({
|
|
"form_validation": "realtime",
|
|
"keyboard_shortcuts": ["Tab", "Enter", "Escape"],
|
|
"auto_save": True
|
|
})
|
|
|
|
# 儀表板類視圖增強
|
|
elif view_type == "Dashboard":
|
|
features.update({
|
|
"multi_window": True,
|
|
"keyboard_shortcuts": ["Ctrl+F", "Ctrl+R", "Escape"],
|
|
"data_export": True
|
|
})
|
|
|
|
return features
|
|
|
|
def add_web_specific_components(components, view_type):
|
|
"""為視圖添加Web特有組件"""
|
|
web_components = []
|
|
|
|
# 為所有視圖添加快捷鍵提示
|
|
if view_type in ["Learning", "Practice"]:
|
|
web_components.append({
|
|
"name": "快捷鍵提示面板",
|
|
"type": "ShortcutPanel",
|
|
"interaction": "顯示可用快捷鍵",
|
|
"action": "切換顯示",
|
|
"navigation_view_id": None,
|
|
"web_enhancements": {
|
|
"contextual_shortcuts": True,
|
|
"toggle_visibility": "Ctrl+/"
|
|
}
|
|
})
|
|
|
|
# 為儀表板添加工具列
|
|
if view_type == "Dashboard":
|
|
web_components.append({
|
|
"name": "工具列",
|
|
"type": "Toolbar",
|
|
"interaction": "快速功能存取",
|
|
"action": "執行常用操作",
|
|
"navigation_view_id": None,
|
|
"web_enhancements": {
|
|
"customizable_layout": True,
|
|
"tooltip_hints": True
|
|
}
|
|
})
|
|
|
|
return web_components
|
|
|
|
def convert_mobile_to_web_view(mobile_view):
|
|
"""轉換單個Mobile視圖為Web視圖"""
|
|
web_view = mobile_view.copy()
|
|
|
|
# 轉換視圖ID
|
|
web_view["view_id"] = convert_view_id(mobile_view["view_id"])
|
|
|
|
# 增強交互描述
|
|
if "interaction" in web_view:
|
|
web_view["interaction"] += "，支援鍵盤導航和快捷鍵"
|
|
|
|
# 添加Web特性
|
|
web_view["web_features"] = get_web_features_for_view(
|
|
mobile_view.get("type", ""),
|
|
mobile_view.get("name", "")
|
|
)
|
|
|
|
# 處理組件
|
|
if "components" in mobile_view:
|
|
web_components = []
|
|
for component in mobile_view["components"]:
|
|
web_component = component.copy()
|
|
|
|
# 轉換導航ID
|
|
if "navigation_view_id" in web_component and web_component["navigation_view_id"]:
|
|
web_component["navigation_view_id"] = convert_view_id(web_component["navigation_view_id"])
|
|
|
|
# 添加Web增強功能
|
|
web_component["web_enhancements"] = get_web_enhancements_for_type(
|
|
component.get("type", ""),
|
|
component.get("name", "")
|
|
)
|
|
|
|
web_components.append(web_component)
|
|
|
|
# 添加Web特有組件
|
|
web_specific = add_web_specific_components(web_components, mobile_view.get("type", ""))
|
|
web_components.extend(web_specific)
|
|
|
|
web_view["components"] = web_components
|
|
|
|
return web_view
|
|
|
|
def main():
|
|
"""主轉換函數"""
|
|
print("🚀 開始轉換Mobile視圖為Web視圖...")
|
|
|
|
# 讀取Mobile視圖文件
|
|
with open('/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/system_views.json', 'r', encoding='utf-8') as f:
|
|
mobile_data = json.load(f)
|
|
|
|
print(f"📱 讀取到 {len(mobile_data['views'])} 個Mobile視圖")
|
|
|
|
# 轉換所有視圖
|
|
web_views = []
|
|
for mobile_view in mobile_data['views']:
|
|
web_view = convert_mobile_to_web_view(mobile_view)
|
|
web_views.append(web_view)
|
|
|
|
# 構建完整的Web視圖數據
|
|
web_data = {
|
|
"views": web_views,
|
|
"web_global_features": {
|
|
"common_shortcuts": {
|
|
"Ctrl+/": "顯示快捷鍵幫助",
|
|
"Escape": "關閉模態/返回",
|
|
"Ctrl+S": "保存進度",
|
|
"Ctrl+Z": "撤銷操作",
|
|
"Ctrl+Y": "重做操作",
|
|
"Tab": "導航焦點",
|
|
"Shift+Tab": "反向導航",
|
|
"Enter": "確認操作",
|
|
"Space": "播放/暫停",
|
|
"Ctrl+F": "搜尋功能",
|
|
"Ctrl+R": "重新整理"
|
|
},
|
|
"accessibility": {
|
|
"screen_reader": True,
|
|
"high_contrast": True,
|
|
"keyboard_only": True,
|
|
"focus_indicators": True,
|
|
"aria_labels": True,
|
|
"skip_links": True
|
|
},
|
|
"responsive_design": {
|
|
"breakpoints": {
|
|
"desktop": "1200px+",
|
|
"laptop": "992px-1199px",
|
|
"tablet": "768px-991px",
|
|
"mobile": "320px-767px"
|
|
},
|
|
"layout_adaptation": True,
|
|
"touch_optimization": "tablet_mobile",
|
|
"fluid_typography": True
|
|
},
|
|
"performance": {
|
|
"lazy_loading": True,
|
|
"virtual_scrolling": True,
|
|
"code_splitting": True,
|
|
"caching_strategy": "progressive",
|
|
"image_optimization": True,
|
|
"bundle_optimization": True
|
|
},
|
|
"user_experience": {
|
|
"loading_states": True,
|
|
"error_boundaries": True,
|
|
"offline_support": "basic",
|
|
"progressive_enhancement": True,
|
|
"smooth_animations": True
|
|
}
|
|
},
|
|
"web_component_types": {
|
|
"Layout": ["Sidebar", "Header", "Footer", "Grid", "Flex"],
|
|
"Navigation": ["Breadcrumb", "Tabs", "Pagination", "Menu"],
|
|
"Input": ["SmartInput", "Dropdown", "DatePicker", "FileUpload"],
|
|
"Display": ["Chart", "Table", "Card", "Badge", "Avatar"],
|
|
"Feedback": ["Toast", "Modal", "Tooltip", "ProgressBar"],
|
|
"Interactive": ["Button", "Link", "Toggle", "Slider"],
|
|
"Media": ["AudioPlayer", "VideoPlayer", "ImageGallery"],
|
|
"Specialized": ["ShortcutPanel", "AssistancePanel", "AnalysisPanel"]
|
|
},
|
|
"metadata": {
|
|
"generated_from": "system_views.json (Mobile UI)",
|
|
"conversion_date": datetime.now().strftime("%Y-%m-%d"),
|
|
"total_web_views": len(web_views),
|
|
"conversion_script": "convert_views_to_web.py",
|
|
"naming_convention": "UI_* -> Page_*_W",
|
|
"web_enhancements_added": [
|
|
"Multi-window support",
|
|
"Comprehensive keyboard shortcuts",
|
|
"Advanced hover effects",
|
|
"Enhanced navigation patterns",
|
|
"Desktop-optimized layouts",
|
|
"Advanced form controls",
|
|
"Real-time feedback systems",
|
|
"Full accessibility features",
|
|
"Performance optimizations",
|
|
"Responsive design patterns"
|
|
],
|
|
"compatibility": {
|
|
"browsers": ["Chrome 90+", "Firefox 88+", "Safari 14+", "Edge 90+"],
|
|
"frameworks": ["React", "Vue", "Angular"],
|
|
"css_features": ["Grid", "Flexbox", "CSS Variables", "Container Queries"]
|
|
}
|
|
}
|
|
}
|
|
|
|
# 寫入Web視圖文件
|
|
output_file = '/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/system_views_web_complete.json'
|
|
with open(output_file, 'w', encoding='utf-8') as f:
|
|
json.dump(web_data, f, ensure_ascii=False, indent=2)
|
|
|
|
print(f"💻 成功生成 {len(web_views)} 個Web視圖")
|
|
print(f"📄 輸出文件: system_views_web_complete.json")
|
|
print("✅ 轉換完成！")
|
|
|
|
if __name__ == "__main__":
|
|
main() |