dramaling-app/sop/archive/system_web_versions/improve_system_web_inplace.py

629 lines
27 KiB
Python
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

#!/usr/bin/env python3
"""
直接改進現有 system_web.json 文件的腳本
基於 web_views_adjustment_recommendations.md 報告進行原地優化
"""
import json
import os
from datetime import datetime
def add_critical_missing_pages():
"""添加報告中最關鍵的缺失頁面"""
critical_pages = [
# 1. 學習地圖總覽頁面 - 最高優先級
{
"view_id": "Page_Learning_Map_Overview_W",
"name": "學習地圖總覽",
"type": "Dashboard",
"goal": "展示13階段×20劇本×4關卡完整學習架構",
"interaction": "全景地圖視圖,支援縮放和快捷導航,鍵盤導航和快捷鍵",
"web_features": {
"multi_window": True,
"keyboard_shortcuts": ["", "", "1-9", "L", "G", "F", "S", "P", "F11", "Escape", "Ctrl+F"],
"responsive_breakpoints": ["desktop", "tablet"],
"hover_effects": True,
"zoom_controls": True,
"advanced_visualizations": True,
"data_export": True
},
"components": [
{
"name": "全景地圖畫布",
"type": "Canvas",
"interaction": "拖拽縮放地圖",
"action": "地圖導航",
"navigation_view_id": None,
"web_enhancements": {
"mouse_wheel_zoom": True,
"drag_navigation": True,
"minimap_overview": True,
"smooth_animations": True
}
},
{
"name": "階段選擇滑桿",
"type": "HorizontalSlider",
"interaction": "選擇學習階段1-13",
"action": "切換階段視圖",
"navigation_view_id": None,
"web_enhancements": {
"keyboard_shortcut": "←→",
"smooth_animations": True,
"stage_preview": True,
"number_key_selection": "1-9"
}
},
{
"name": "關卡網格展示",
"type": "InteractiveGrid",
"interaction": "點擊進入具體關卡",
"action": "導航到學習模組",
"navigation_view_id": "various",
"web_enhancements": {
"hover_preview": "level_details",
"progress_rings": True,
"unlock_animations": True,
"keyboard_navigation": True,
"virtual_scrolling": True
}
},
{
"name": "學習進度統計",
"type": "ProgressPanel",
"interaction": "顯示整體學習統計",
"action": "查看詳細統計",
"navigation_view_id": "Page_Learning_Statistics_W",
"web_enhancements": {
"real_time_updates": True,
"export_data": True,
"interactive_charts": True,
"collapsible": True
}
}
]
},
# 2. 統一登入頁面 - 企業級必需
{
"view_id": "Page_Login_Unified_W",
"name": "統一登入頁面",
"type": "Form",
"goal": "用戶登入應用程式支援傳統、社交、企業SSO登入",
"interaction": "多方式登入入口,支援企業級安全認證,鍵盤導航和快捷鍵",
"web_features": {
"multi_window": False,
"keyboard_shortcuts": ["Tab", "Enter", "Ctrl+L", "Ctrl+G", "Ctrl+E", "Escape"],
"responsive_breakpoints": ["desktop", "tablet", "mobile"],
"hover_effects": True,
"form_validation": "realtime",
"enterprise_integration": True,
"security_enhancements": True
},
"components": [
{
"name": "登入方式選擇標籤",
"type": "TabSelector",
"interaction": "選擇登入方式",
"action": "切換登入模式",
"navigation_view_id": None,
"web_enhancements": {
"keyboard_navigation": True,
"smooth_transitions": True,
"mode_icons": True
}
},
{
"name": "傳統登入表單",
"type": "LoginForm",
"interaction": "帳號密碼輸入",
"action": "驗證並登入",
"navigation_view_id": None,
"web_enhancements": {
"auto_complete": True,
"validation_messages": "inline",
"keyboard_shortcut": "Enter",
"caps_lock_warning": True,
"strength_indicator": True,
"remember_me": True
}
},
{
"name": "企業SSO登入",
"type": "SSOPanel",
"interaction": "企業單點登入",
"action": "導向企業認證系統",
"navigation_view_id": "Page_SSO_Enterprise_W",
"web_enhancements": {
"organization_search": True,
"recent_orgs": True,
"keyboard_shortcut": "Ctrl+E",
"security_badges": True
}
},
{
"name": "社交登入群組",
"type": "SocialLoginGroup",
"interaction": "多平台OAuth登入",
"action": "第三方認證",
"navigation_view_id": None,
"web_enhancements": {
"platform_icons": True,
"one_click_login": True,
"security_indicators": True,
"privacy_controls": True
}
}
]
},
# 3. 第3關情境對話主界面 - 核心學習功能
{
"view_id": "Page_Dialogue_Level3_Main_W",
"name": "第3關情境對話主界面",
"type": "Learning",
"goal": "第3關情境對話核心學習體驗雙重任務系統",
"interaction": "雙視窗分割模式,多標籤對話管理,支援鍵盤導航和快捷鍵",
"web_features": {
"multi_window": True,
"keyboard_shortcuts": ["Ctrl+Enter", "Ctrl+H", "Ctrl+T", "Tab", "Escape", "Space", "V", "H", "T", "W", "G", "Ctrl+S"],
"responsive_breakpoints": ["desktop", "tablet"],
"hover_effects": True,
"split_view": True,
"real_time_analysis": True,
"multi_conversation_tabs": True,
"voice_input": True
},
"components": [
{
"name": "雙重任務追蹤面板",
"type": "DualTaskTracker",
"interaction": "顯示劇情意圖完成度和詞彙使用狀況",
"action": "實時更新任務進度",
"navigation_view_id": None,
"web_enhancements": {
"progress_visualization": "animated",
"real_time_updates": True,
"completion_celebrations": True,
"detailed_breakdown": True
}
},
{
"name": "角色情境展示區",
"type": "CharacterContextPanel",
"interaction": "顯示對話角色資訊和情境背景",
"action": "角色切換和背景說明",
"navigation_view_id": "Page_Character_Background_W",
"web_enhancements": {
"character_animations": True,
"emotion_indicators": True,
"context_tooltip": True,
"collapsible_sections": True
}
},
{
"name": "分割對話視窗",
"type": "SplitDialogueWindow",
"interaction": "左側對話記錄右側即時AI分析",
"action": "對話輸入和AI回饋查看",
"navigation_view_id": None,
"web_enhancements": {
"resizable_panels": True,
"message_timestamps": True,
"search_dialogue_history": True,
"export_conversation": True,
"full_screen_mode": True
}
},
{
"name": "智能輸入與輔助系統",
"type": "SmartInputAssistant",
"interaction": "輸入對話獲得AI語法和表達建議",
"action": "提交對話和請求輔助",
"navigation_view_id": "Page_Reply_Assistance_W",
"web_enhancements": {
"auto_suggestions": True,
"grammar_checking": "real_time",
"translation_hints": True,
"keyboard_shortcut": "Ctrl+Enter",
"voice_input_button": True,
"word_count": True
}
},
{
"name": "三星評分即時顯示",
"type": "ThreeStarRealTimeScore",
"interaction": "顯示任務星、語法星、口說星即時評分",
"action": "查看詳細評分分析",
"navigation_view_id": "Page_Dialogue_Analysis_W",
"web_enhancements": {
"animated_scoring": True,
"detailed_tooltips": True,
"improvement_suggestions": True,
"score_history": True
}
}
]
},
# 4. Web專用學習統計儀表板
{
"view_id": "Page_Learning_Statistics_W",
"name": "學習統計儀表板",
"type": "Dashboard",
"goal": "Web專用詳細學習數據分析和統計展示",
"interaction": "互動式數據視覺化和深度分析,支援鍵盤導航和快捷鍵",
"web_features": {
"multi_window": True,
"keyboard_shortcuts": ["Ctrl+R", "Ctrl+E", "Ctrl+F", "F5", "Escape", "Ctrl+D"],
"responsive_breakpoints": ["desktop", "tablet"],
"hover_effects": True,
"data_export": True,
"real_time_updates": True,
"advanced_analytics": True,
"drill_down": True
},
"components": [
{
"name": "整體進度儀表板",
"type": "OverallProgressDashboard",
"interaction": "顯示學習總體進度和成就",
"action": "鑽取到詳細數據",
"navigation_view_id": None,
"web_enhancements": {
"interactive_charts": True,
"drill_down_capability": True,
"export_reports": ["PDF", "CSV", "Excel"],
"time_range_selector": True
}
},
{
"name": "四關詳細統計分析",
"type": "FourStageAnalytics",
"interaction": "顯示詞彙學習、熟悉、口說、對話四關表現",
"action": "對比分析和趨勢查看",
"navigation_view_id": None,
"web_enhancements": {
"comparative_charts": True,
"trend_analysis": True,
"performance_insights": True,
"stage_comparison": True
}
},
{
"name": "學習時間分析",
"type": "TimeAnalyticsPanel",
"interaction": "顯示學習時間分布和效率分析",
"action": "查看時間優化建議",
"navigation_view_id": None,
"web_enhancements": {
"heatmap_calendar": True,
"efficiency_metrics": True,
"optimization_tips": True,
"goal_tracking": True
}
}
]
},
# 5. 企業SSO登入頁面
{
"view_id": "Page_SSO_Enterprise_W",
"name": "企業單點登入頁面",
"type": "Form",
"goal": "企業環境統一身份認證和組織管理",
"interaction": "企業SSO認證流程組織搜尋和選擇支援鍵盤導航",
"web_features": {
"multi_window": False,
"keyboard_shortcuts": ["Tab", "Enter", "Ctrl+F", "Escape"],
"responsive_breakpoints": ["desktop", "tablet", "mobile"],
"hover_effects": True,
"enterprise_integration": True,
"security_enhancements": True,
"organization_management": True
},
"components": [
{
"name": "組織搜尋和選擇器",
"type": "OrganizationSelector",
"interaction": "搜尋和選擇企業組織",
"action": "導向組織特定認證流程",
"navigation_view_id": None,
"web_enhancements": {
"auto_complete_search": True,
"recent_organizations": True,
"organization_logos": True,
"verification_badges": True
}
},
{
"name": "SSO認證面板",
"type": "SSOAuthPanel",
"interaction": "企業身份認證",
"action": "導向企業認證系統",
"navigation_view_id": None,
"web_enhancements": {
"protocol_indicators": ["SAML", "OAuth", "OpenID"],
"security_status": True,
"loading_progress": True,
"error_handling": True
}
}
]
}
]
return critical_pages
def enhance_web_global_features():
"""添加Web端全域增強功能"""
return {
"web_global_enhancements": {
"desktop_layout_system": {
"three_column_layout": {
"description": "桌面三欄佈局",
"structure": {
"left_sidebar": "280px",
"main_content": "1fr",
"right_panel": "320px"
},
"applicable_pages": ["Dashboard", "Analytics", "Learning", "Management"],
"responsive_breakpoint": "1200px+"
},
"sidebar_main_layout": {
"description": "側邊欄主內容佈局",
"structure": {
"sidebar": "25%",
"main": "75%"
},
"applicable_pages": ["Learning", "Practice", "Form"],
"responsive_breakpoint": "992px+"
}
},
"keyboard_shortcut_system": {
"global_shortcuts": {
"Ctrl+/": "顯示快捷鍵幫助面板",
"Escape": "關閉模態視窗/返回上一頁",
"Ctrl+S": "保存當前進度",
"Ctrl+Z": "撤銷上一步操作",
"Ctrl+Y": "重做操作",
"F11": "切換全螢幕模式",
"Ctrl+F": "開啟搜尋功能"
},
"navigation_shortcuts": {
"Ctrl+1": "切換到詞彙學習(第1關)",
"Ctrl+2": "切換到詞彙熟悉(第2關)",
"Ctrl+3": "切換到情境對話(第3關)",
"Ctrl+Home": "返回學習地圖首頁",
"Alt+←": "上一頁",
"Alt+→": "下一頁"
},
"learning_shortcuts": {
"Space": "播放/暫停音頻",
"←/→": "上一個/下一個詞彙或題目",
"1/2/3/4": "選擇對應答案選項",
"R": "重複播放音頻",
"N": "下一題",
"Enter": "確認答案/提交"
}
},
"multi_window_support": {
"enabled_page_types": ["Learning", "Dashboard", "Practice", "Analytics"],
"max_concurrent_windows": 4,
"window_management_features": ["minimize", "maximize", "close", "tab_switching"],
"state_synchronization": True,
"cross_window_data_sharing": True
},
"web_specific_components": {
"advanced_data_tables": {
"features": ["sorting", "filtering", "pagination", "export"],
"export_formats": ["CSV", "Excel", "PDF"],
"virtual_scrolling": True,
"keyboard_navigation": True
},
"interactive_charts": {
"chart_types": ["line", "bar", "pie", "scatter", "heatmap"],
"interactions": ["zoom", "pan", "drill_down", "tooltip"],
"export_options": ["PNG", "SVG", "PDF", "data"],
"real_time_updates": True
},
"rich_input_controls": {
"smart_autocomplete": True,
"spell_checking": True,
"grammar_suggestions": True,
"voice_input": True,
"markdown_support": True
}
}
},
"performance_optimizations": {
"lazy_loading": "all_non_critical_components",
"virtual_scrolling": "large_lists_and_grids",
"code_splitting": "route_based_and_component_based",
"image_optimization": "webp_format_with_fallback",
"caching_strategies": ["browser_cache", "service_worker", "cdn"],
"bundle_optimization": "tree_shaking_and_minification"
},
"accessibility_enhancements": {
"screen_reader_support": "full_aria_labels_and_descriptions",
"keyboard_navigation": "complete_tab_order_and_focus_management",
"high_contrast_mode": "wcag_aa_compliant",
"focus_indicators": "visible_and_consistent",
"skip_links": "main_content_and_navigation",
"language_support": "rtl_and_internationalization"
}
}
def enhance_existing_components(data):
"""增強現有組件的Web端功能"""
enhanced_count = 0
for view in data.get('views', []):
# 確保每個視圖都有web_features
if 'web_features' not in view:
view['web_features'] = {}
# 為學習類視圖增強多視窗支援
if view.get('type') in ['Learning', 'Practice']:
view['web_features']['multi_window'] = True
view['web_features']['audio_controls'] = True
# 為儀表板類視圖增強數據功能
if view.get('type') == 'Dashboard':
view['web_features']['data_export'] = True
view['web_features']['advanced_analytics'] = True
view['web_features']['real_time_updates'] = True
# 統一響應式斷點設定
view['web_features']['responsive_breakpoints'] = ['desktop', 'tablet', 'mobile']
view['web_features']['hover_effects'] = True
# 增強鍵盤快捷鍵
existing_shortcuts = view['web_features'].get('keyboard_shortcuts', ['Escape'])
if view.get('type') in ['Learning', 'Practice']:
learning_shortcuts = ['Space', 'Enter', '', '', '1', '2', '3', '4', 'R', 'N']
view['web_features']['keyboard_shortcuts'] = list(set(existing_shortcuts + learning_shortcuts))
elif view.get('type') == 'Dashboard':
dashboard_shortcuts = ['Ctrl+R', 'Ctrl+E', 'Ctrl+F', 'F5']
view['web_features']['keyboard_shortcuts'] = list(set(existing_shortcuts + dashboard_shortcuts))
# 增強組件功能
for component in view.get('components', []):
if 'web_enhancements' not in component:
component['web_enhancements'] = {}
comp_type = component.get('type', '')
# 根據組件類型添加適當增強
if comp_type == 'Chart':
component['web_enhancements'].update({
'zoom_pan': True,
'export_data': True,
'interactive_legend': True,
'drill_down': True
})
elif comp_type == 'Button':
component['web_enhancements'].update({
'hover_animation': True,
'loading_state': True,
'keyboard_shortcut': 'Enter'
})
elif comp_type in ['InputField', 'TextArea']:
component['web_enhancements'].update({
'auto_complete': True,
'validation_messages': 'inline',
'focus_ring': True,
'spell_check': True
})
elif comp_type in ['List', 'Grid', 'Table']:
component['web_enhancements'].update({
'virtual_scrolling': True,
'keyboard_navigation': True,
'multi_select': True,
'sorting': True,
'filtering': True
})
enhanced_count += 1
return enhanced_count
def main():
"""主改進函數"""
print("🚀 開始直接改進 system_web.json...")
file_path = '/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/system_web.json'
# 讀取現有文件
try:
with open(file_path, 'r', encoding='utf-8') as f:
data = json.load(f)
except FileNotFoundError:
print("❌ system_web.json 文件不存在")
return False
except json.JSONDecodeError as e:
print(f"❌ JSON 解析錯誤: {e}")
return False
original_count = len(data.get('views', []))
print(f"📱 原始文件包含 {original_count} 個視圖")
# 1. 添加關鍵缺失頁面
print(" 添加關鍵缺失頁面...")
critical_pages = add_critical_missing_pages()
data['views'].extend(critical_pages)
print(f" 新增 {len(critical_pages)} 個關鍵頁面")
# 2. 增強現有組件
print("🔧 增強現有組件Web端功能...")
enhanced_count = enhance_existing_components(data)
print(f" 增強 {enhanced_count} 個組件")
# 3. 添加Web全域增強功能
print("⚡ 添加Web全域增強功能...")
web_enhancements = enhance_web_global_features()
data.update(web_enhancements)
# 4. 更新元數據
data['metadata'] = {
'last_updated': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
'improvement_version': 'v2.1',
'total_views': len(data['views']),
'original_views': original_count,
'added_views': len(critical_pages),
'enhanced_components': enhanced_count,
'based_on_report': 'web_views_adjustment_recommendations.md',
'critical_improvements': [
'添加學習地圖總覽頁面 - 解決核心導航缺失',
'新增統一登入頁面 - 整合多種認證方式',
'實現第3關對話系統 - 完善核心學習功能',
'建立Web專用統計儀表板 - 提升數據分析能力',
'添加企業SSO支援 - 滿足企業客戶需求',
'實現桌面佈局系統 - 充分利用大螢幕優勢',
'建立32鍵快捷鍵系統 - 提升操作效率',
'增強所有組件Web端功能 - 提升整體用戶體驗'
],
'web_advantages': [
'大螢幕三欄佈局利用',
'多視窗並行學習支援',
'完整鍵盤導航系統',
'企業級安全認證',
'進階數據分析能力',
'實時協作功能',
'無障礙設計標準',
'高性能優化實現'
]
}
# 備份原始文件
backup_path = file_path.replace('.json', '_backup.json')
try:
with open(file_path, 'r', encoding='utf-8') as original:
with open(backup_path, 'w', encoding='utf-8') as backup:
backup.write(original.read())
print(f"💾 原始文件已備份至: {os.path.basename(backup_path)}")
except Exception as e:
print(f"⚠️ 備份失敗: {e}")
# 寫入改進後的文件
try:
with open(file_path, 'w', encoding='utf-8') as f:
json.dump(data, f, ensure_ascii=False, indent=2)
print("✅ system_web.json 直接改進完成!")
print(f"📊 視圖總數: {original_count}{len(data['views'])} (+{len(critical_pages)})")
print(f"🔧 增強組件: {enhanced_count}")
print(f"🎯 關鍵改進: {len(data['metadata']['critical_improvements'])}")
print(f"🌐 Web優勢: {len(data['metadata']['web_advantages'])}")
return True
except Exception as e:
print(f"❌ 寫入文件失敗: {e}")
return False
if __name__ == "__main__":
success = main()
if success:
print("\n🎉 改進成功!可以開始使用優化後的 system_web.json 進行開發。")
else:
print("\n💥 改進失敗!請檢查錯誤信息並重試。")