#!/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()