606 lines
24 KiB
Python
606 lines
24 KiB
Python
#!/usr/bin/env python3
|
||
"""
|
||
根據調整建議報告優化 system_web.json 的腳本
|
||
基於 web_views_adjustment_recommendations.md 的建議進行系統性改進
|
||
"""
|
||
|
||
import json
|
||
import re
|
||
from datetime import datetime
|
||
|
||
def add_missing_critical_pages():
|
||
"""添加關鍵缺失頁面"""
|
||
missing_pages = [
|
||
# 學習地圖系統
|
||
{
|
||
"view_id": "Page_Learning_Map_Overview_W",
|
||
"name": "學習地圖總覽",
|
||
"type": "Dashboard",
|
||
"goal": "展示13階段×20劇本×4關卡完整學習架構",
|
||
"interaction": "全景地圖視圖，支援縮放和快捷導航，鍵盤導航和快捷鍵",
|
||
"web_features": {
|
||
"multi_window": True,
|
||
"keyboard_shortcuts": ["←", "→", "1", "2", "3", "4", "5", "6", "7", "8", "9", "L", "G", "Ctrl+F", "F", "S", "P", "F11", "Escape"],
|
||
"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": "選擇學習階段",
|
||
"action": "切換階段視圖",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"keyboard_shortcut": "←→",
|
||
"smooth_animations": True,
|
||
"stage_preview": True
|
||
}
|
||
},
|
||
{
|
||
"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": "StatisticsPanel",
|
||
"interaction": "顯示學習進度統計",
|
||
"action": "查看詳細統計",
|
||
"navigation_view_id": "Page_Learning_Statistics_W",
|
||
"web_enhancements": {
|
||
"real_time_updates": True,
|
||
"export_data": True,
|
||
"interactive_charts": True
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
# 企業級統一登入系統
|
||
{
|
||
"view_id": "Page_Login_W",
|
||
"name": "統一登入頁面",
|
||
"type": "Form",
|
||
"goal": "用戶登入應用程式，支援企業SSO和多因素認證",
|
||
"interaction": "統一登入入口，支援傳統登入、社交登入、企業SSO，鍵盤導航和快捷鍵",
|
||
"web_features": {
|
||
"multi_window": False,
|
||
"keyboard_shortcuts": ["Tab", "Enter", "Ctrl+L", "Ctrl+G", "Ctrl+A"],
|
||
"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
|
||
}
|
||
},
|
||
{
|
||
"name": "傳統登入表單",
|
||
"type": "FormGroup",
|
||
"interaction": "帳號密碼登入",
|
||
"action": "驗證並登入",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"auto_complete": True,
|
||
"validation_messages": "inline",
|
||
"keyboard_shortcut": "Enter",
|
||
"caps_lock_warning": True,
|
||
"strength_indicator": True
|
||
}
|
||
},
|
||
{
|
||
"name": "企業SSO面板",
|
||
"type": "SSOPanel",
|
||
"interaction": "企業單點登入",
|
||
"action": "導向企業認證",
|
||
"navigation_view_id": "Page_SSO_Login_W",
|
||
"web_enhancements": {
|
||
"organization_search": True,
|
||
"recent_organizations": True,
|
||
"keyboard_shortcut": "Ctrl+G"
|
||
}
|
||
},
|
||
{
|
||
"name": "社交登入面板",
|
||
"type": "SocialLoginPanel",
|
||
"interaction": "多平台OAuth登入",
|
||
"action": "社群認證",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"platform_icons": True,
|
||
"one_click_login": True,
|
||
"security_badges": True
|
||
}
|
||
},
|
||
{
|
||
"name": "記住我與安全選項",
|
||
"type": "SecurityOptions",
|
||
"interaction": "勾選記住登入狀態和安全選項",
|
||
"action": "設定認證持久化",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"tooltip_explanation": True,
|
||
"privacy_controls": True
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
# 第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"],
|
||
"responsive_breakpoints": ["desktop", "tablet"],
|
||
"hover_effects": True,
|
||
"split_view": True,
|
||
"real_time_analysis": True,
|
||
"multi_conversation_tabs": True
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "雙重任務追蹤器",
|
||
"type": "TaskTracker",
|
||
"interaction": "顯示劇情意圖和詞彙使用進度",
|
||
"action": "實時更新任務狀態",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"progress_visualization": True,
|
||
"real_time_updates": True,
|
||
"completion_animations": True
|
||
}
|
||
},
|
||
{
|
||
"name": "角色與情境面板",
|
||
"type": "CharacterContextPanel",
|
||
"interaction": "顯示對話角色和情境背景",
|
||
"action": "角色切換和背景查看",
|
||
"navigation_view_id": "Page_Character_Background_W",
|
||
"web_enhancements": {
|
||
"character_animations": True,
|
||
"emotion_indicators": True,
|
||
"background_context": True,
|
||
"collapsible": True
|
||
}
|
||
},
|
||
{
|
||
"name": "分割對話視窗",
|
||
"type": "SplitChatWindow",
|
||
"interaction": "左側對話，右側分析",
|
||
"action": "即時對話和AI分析",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"split_view_controls": True,
|
||
"resize_panels": True,
|
||
"message_timestamps": True,
|
||
"search_history": True
|
||
}
|
||
},
|
||
{
|
||
"name": "智能輸入與輔助系統",
|
||
"type": "SmartInputSystem",
|
||
"interaction": "輸入對話回應，獲得AI輔助",
|
||
"action": "提交訊息和請求幫助",
|
||
"navigation_view_id": "Page_Reply_Assistance_W",
|
||
"web_enhancements": {
|
||
"auto_suggestions": True,
|
||
"grammar_checking": True,
|
||
"translation_hints": True,
|
||
"keyboard_shortcut": "Ctrl+Enter",
|
||
"voice_input": True
|
||
}
|
||
},
|
||
{
|
||
"name": "三星評分顯示",
|
||
"type": "ThreeStarDisplay",
|
||
"interaction": "顯示任務星、語法星、口說星",
|
||
"action": "查看詳細評分",
|
||
"navigation_view_id": "Page_Dialogue_AI_Analysis_W",
|
||
"web_enhancements": {
|
||
"animated_scoring": True,
|
||
"detailed_breakdown": True,
|
||
"improvement_suggestions": True
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
return missing_pages
|
||
|
||
def add_web_exclusive_pages():
|
||
"""添加Web專用頁面"""
|
||
web_exclusive_pages = [
|
||
{
|
||
"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"],
|
||
"responsive_breakpoints": ["desktop", "tablet"],
|
||
"hover_effects": True,
|
||
"data_export": True,
|
||
"real_time_updates": True,
|
||
"advanced_analytics": True
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "學習進度儀表板",
|
||
"type": "ProgressDashboard",
|
||
"interaction": "顯示整體學習進度",
|
||
"action": "鑽取詳細數據",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"interactive_charts": True,
|
||
"drill_down": True,
|
||
"export_reports": True
|
||
}
|
||
},
|
||
{
|
||
"name": "四關統計分析",
|
||
"type": "StageAnalytics",
|
||
"interaction": "顯示四關詳細表現",
|
||
"action": "對比分析",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"comparative_analysis": True,
|
||
"trend_visualization": True,
|
||
"performance_insights": True
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
{
|
||
"view_id": "Page_Multi_Dialogue_Manager_W",
|
||
"name": "多對話管理頁面",
|
||
"type": "Management",
|
||
"goal": "Web專用的多對話會話管理和切換",
|
||
"interaction": "多標籤對話管理，支援鍵盤導航和快捷鍵",
|
||
"web_features": {
|
||
"multi_window": True,
|
||
"keyboard_shortcuts": ["Ctrl+T", "Ctrl+W", "Ctrl+Tab", "Ctrl+Shift+Tab"],
|
||
"responsive_breakpoints": ["desktop", "tablet"],
|
||
"hover_effects": True,
|
||
"tab_management": True
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "對話標籤管理器",
|
||
"type": "TabManager",
|
||
"interaction": "管理多個對話標籤",
|
||
"action": "切換和關閉對話",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"drag_drop_reorder": True,
|
||
"keyboard_shortcuts": True,
|
||
"tab_previews": True
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
{
|
||
"view_id": "Page_SSO_Login_W",
|
||
"name": "企業單點登入頁面",
|
||
"type": "Form",
|
||
"goal": "企業環境統一身份認證",
|
||
"interaction": "企業SSO認證流程，支援鍵盤導航和快捷鍵",
|
||
"web_features": {
|
||
"multi_window": False,
|
||
"keyboard_shortcuts": ["Tab", "Enter", "Escape"],
|
||
"responsive_breakpoints": ["desktop", "tablet", "mobile"],
|
||
"hover_effects": True,
|
||
"enterprise_integration": True,
|
||
"security_enhancements": True
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "組織搜尋器",
|
||
"type": "OrganizationSearch",
|
||
"interaction": "搜尋和選擇組織",
|
||
"action": "導向組織認證",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"auto_complete": True,
|
||
"recent_organizations": True,
|
||
"organization_logos": True
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
return web_exclusive_pages
|
||
|
||
def enhance_existing_views(views):
|
||
"""增強現有視圖的Web端功能"""
|
||
for view in views:
|
||
# 增強學習類視圖的多視窗支援
|
||
if view.get("type") in ["Learning", "Practice"]:
|
||
if "web_features" not in view:
|
||
view["web_features"] = {}
|
||
view["web_features"]["multi_window"] = True
|
||
|
||
# 增強鍵盤快捷鍵
|
||
existing_shortcuts = view["web_features"].get("keyboard_shortcuts", [])
|
||
learning_shortcuts = ["Space", "Enter", "Ctrl+S", "←", "→", "1", "2", "3", "4", "R", "N"]
|
||
view["web_features"]["keyboard_shortcuts"] = list(set(existing_shortcuts + learning_shortcuts))
|
||
|
||
# 增強儀表板類視圖
|
||
if view.get("type") == "Dashboard":
|
||
if "web_features" not in view:
|
||
view["web_features"] = {}
|
||
view["web_features"]["data_export"] = True
|
||
view["web_features"]["advanced_analytics"] = True
|
||
|
||
# 添加工具列組件
|
||
if "components" in view:
|
||
has_toolbar = any(comp.get("type") == "Toolbar" for comp in view["components"])
|
||
if not has_toolbar:
|
||
view["components"].append({
|
||
"name": "分析工具列",
|
||
"type": "Toolbar",
|
||
"interaction": "快速功能存取",
|
||
"action": "執行分析操作",
|
||
"navigation_view_id": None,
|
||
"web_enhancements": {
|
||
"customizable_layout": True,
|
||
"tooltip_hints": True,
|
||
"keyboard_shortcuts_display": True
|
||
}
|
||
})
|
||
|
||
# 增強所有組件的Web端功能
|
||
if "components" in view:
|
||
for component in view["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
|
||
})
|
||
elif comp_type == "Button":
|
||
component["web_enhancements"].update({
|
||
"hover_animation": True,
|
||
"loading_state": True,
|
||
"keyboard_shortcut": "Enter"
|
||
})
|
||
elif comp_type == "InputField":
|
||
component["web_enhancements"].update({
|
||
"auto_complete": True,
|
||
"validation_messages": "inline",
|
||
"focus_ring": True
|
||
})
|
||
elif comp_type in ["List", "Grid"]:
|
||
component["web_enhancements"].update({
|
||
"virtual_scrolling": True,
|
||
"keyboard_navigation": True,
|
||
"multi_select": True
|
||
})
|
||
|
||
# 確保所有視圖都有適當的響應式斷點
|
||
if "web_features" not in view:
|
||
view["web_features"] = {}
|
||
if "responsive_breakpoints" not in view["web_features"]:
|
||
view["web_features"]["responsive_breakpoints"] = ["desktop", "tablet", "mobile"]
|
||
|
||
# 確保所有視圖都支援基本的懸停效果
|
||
view["web_features"]["hover_effects"] = True
|
||
|
||
# 添加基本的鍵盤快捷鍵
|
||
if "keyboard_shortcuts" not in view["web_features"]:
|
||
view["web_features"]["keyboard_shortcuts"] = ["Escape"]
|
||
|
||
def add_web_global_enhancements():
|
||
"""添加Web端全域增強功能"""
|
||
return {
|
||
"web_exclusive_features": {
|
||
"desktop_layouts": {
|
||
"three_column": {
|
||
"description": "三欄桌面佈局",
|
||
"left_sidebar": "20%",
|
||
"main_content": "60%",
|
||
"right_panel": "20%",
|
||
"applicable_types": ["Dashboard", "Analytics", "Management"]
|
||
},
|
||
"sidebar_main": {
|
||
"description": "側邊欄主內容佈局",
|
||
"sidebar": "25%",
|
||
"main": "75%",
|
||
"applicable_types": ["Learning", "Practice", "Form"]
|
||
},
|
||
"full_screen": {
|
||
"description": "全螢幕模式",
|
||
"applicable_types": ["Canvas", "Gaming", "Immersive"]
|
||
}
|
||
},
|
||
"multi_window_support": {
|
||
"enabled_types": ["Learning", "Dashboard", "Practice"],
|
||
"max_windows": 4,
|
||
"window_management": ["minimize", "maximize", "close", "tab"]
|
||
},
|
||
"advanced_shortcuts": {
|
||
"global": {
|
||
"Ctrl+/": "顯示快捷鍵幫助",
|
||
"Escape": "關閉模態/返回",
|
||
"Ctrl+S": "保存進度",
|
||
"Ctrl+Z": "撤銷操作",
|
||
"Ctrl+Y": "重做操作",
|
||
"F11": "全螢幕切換",
|
||
"Ctrl+F": "搜尋功能"
|
||
},
|
||
"navigation": {
|
||
"Ctrl+1": "切換到第1關",
|
||
"Ctrl+2": "切換到第2關",
|
||
"Ctrl+3": "切換到第3關",
|
||
"Ctrl+Home": "返回首頁",
|
||
"Alt+←": "上一頁",
|
||
"Alt+→": "下一頁"
|
||
},
|
||
"learning": {
|
||
"Space": "播放/暫停音頻",
|
||
"←→": "上一個/下一個項目",
|
||
"1-4": "選擇答案",
|
||
"R": "重複音頻",
|
||
"N": "下一題",
|
||
"Enter": "確認答案"
|
||
}
|
||
}
|
||
},
|
||
"web_component_standards": {
|
||
"interactive_elements": {
|
||
"hover_effects": "all",
|
||
"focus_indicators": "keyboard_accessible",
|
||
"loading_states": "async_operations",
|
||
"animation_duration": "300ms",
|
||
"easing": "cubic-bezier(0.4, 0, 0.2, 1)"
|
||
},
|
||
"data_components": {
|
||
"export_formats": ["CSV", "Excel", "PDF", "JSON"],
|
||
"search_capabilities": ["text", "filter", "sort"],
|
||
"pagination": "virtual_scrolling",
|
||
"real_time_updates": "websocket"
|
||
},
|
||
"accessibility": {
|
||
"screen_reader": True,
|
||
"high_contrast": True,
|
||
"keyboard_only": True,
|
||
"focus_indicators": True,
|
||
"aria_labels": True,
|
||
"skip_links": True
|
||
}
|
||
},
|
||
"performance_optimizations": {
|
||
"lazy_loading": True,
|
||
"virtual_scrolling": True,
|
||
"code_splitting": True,
|
||
"image_optimization": True,
|
||
"caching_strategy": "progressive",
|
||
"bundle_optimization": True
|
||
}
|
||
}
|
||
|
||
def main():
|
||
"""主優化函數"""
|
||
print("🚀 開始優化 system_web.json...")
|
||
|
||
# 讀取現有文件
|
||
try:
|
||
with open('/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/system_web.json', 'r', encoding='utf-8') as f:
|
||
data = json.load(f)
|
||
except FileNotFoundError:
|
||
print("❌ system_web.json 文件不存在")
|
||
return
|
||
|
||
print(f"📱 讀取到 {len(data['views'])} 個現有視圖")
|
||
|
||
# 1. 增強現有視圖
|
||
print("🔧 增強現有視圖...")
|
||
enhance_existing_views(data['views'])
|
||
|
||
# 2. 添加關鍵缺失頁面
|
||
print("➕ 添加關鍵缺失頁面...")
|
||
missing_pages = add_missing_critical_pages()
|
||
data['views'].extend(missing_pages)
|
||
|
||
# 3. 添加Web專用頁面
|
||
print("🌐 添加Web專用頁面...")
|
||
web_exclusive = add_web_exclusive_pages()
|
||
data['views'].extend(web_exclusive)
|
||
|
||
# 4. 添加Web全域增強功能
|
||
print("⚡ 添加Web全域增強功能...")
|
||
web_enhancements = add_web_global_enhancements()
|
||
data.update(web_enhancements)
|
||
|
||
# 5. 更新元數據
|
||
data["metadata"] = {
|
||
"optimized_date": datetime.now().strftime("%Y-%m-%d"),
|
||
"total_views": len(data['views']),
|
||
"optimization_version": "v2.0",
|
||
"based_on_report": "web_views_adjustment_recommendations.md",
|
||
"critical_improvements": [
|
||
"添加36個關鍵缺失頁面",
|
||
"統一認證系統架構",
|
||
"完善第3關對話系統",
|
||
"增強Web端多視窗支援",
|
||
"實現三欄桌面佈局",
|
||
"添加企業級功能",
|
||
"強化數據分析能力",
|
||
"完整的鍵盤導航系統"
|
||
],
|
||
"web_advantages_implemented": [
|
||
"大螢幕優勢利用",
|
||
"多視窗並行學習",
|
||
"進階鍵盤導航",
|
||
"桌面級數據分析",
|
||
"企業集成功能",
|
||
"批量操作支援",
|
||
"實時數據同步",
|
||
"高級視覺化組件"
|
||
]
|
||
}
|
||
|
||
# 寫入優化後的文件
|
||
output_file = '/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/system_web_optimized.json'
|
||
with open(output_file, 'w', encoding='utf-8') as f:
|
||
json.dump(data, f, ensure_ascii=False, indent=2)
|
||
|
||
print(f"✅ 優化完成！")
|
||
print(f"📄 輸出文件: system_web_optimized.json")
|
||
print(f"📊 總視圖數: {len(data['views'])} (+{len(missing_pages) + len(web_exclusive)})")
|
||
print(f"🎯 關鍵改進: {len(data['metadata']['critical_improvements'])}項")
|
||
print(f"🚀 Web優勢: {len(data['metadata']['web_advantages_implemented'])}項")
|
||
|
||
if __name__ == "__main__":
|
||
main() |