優化 web ui 載入方式

This commit is contained in:
Minidoracat 2025-06-06 19:55:37 +08:00
parent bb89de33fc
commit b5c87c3ba6
3 changed files with 48 additions and 5 deletions

View File

@ -23,6 +23,27 @@ if TYPE_CHECKING:
from ..main import WebUIManager
def load_user_layout_settings() -> str:
"""載入用戶的佈局模式設定"""
try:
# 使用與 GUI 版本相同的設定檔案路徑
config_dir = Path.home() / ".config" / "mcp-feedback-enhanced"
settings_file = config_dir / "ui_settings.json"
if settings_file.exists():
with open(settings_file, 'r', encoding='utf-8') as f:
settings = json.load(f)
layout_mode = settings.get('layoutMode', 'separate')
debug_log(f"從設定檔案載入佈局模式: {layout_mode}")
return layout_mode
else:
debug_log("設定檔案不存在,使用預設佈局模式: separate")
return 'separate'
except Exception as e:
debug_log(f"載入佈局設定失敗: {e},使用預設佈局模式: separate")
return 'separate'
def setup_routes(manager: 'WebUIManager'):
"""設置路由"""
@ -42,13 +63,17 @@ def setup_routes(manager: 'WebUIManager'):
})
# 有活躍會話時顯示回饋頁面
# 載入用戶的佈局模式設定
layout_mode = load_user_layout_settings()
return manager.templates.TemplateResponse("feedback.html", {
"request": request,
"project_directory": current_session.project_directory,
"summary": current_session.summary,
"title": "Interactive Feedback - 回饋收集",
"version": __version__,
"has_session": True
"has_session": True,
"layout_mode": layout_mode
})
@manager.app.get("/api/translations")

View File

@ -273,8 +273,20 @@ class FeedbackApp {
});
});
// 根據佈局模式確定初始頁籤
let initialTab = this.currentTab;
if (this.layoutMode.startsWith('combined')) {
// 合併模式時,確保初始頁籤是 combined
initialTab = 'combined';
} else {
// 分離模式時,如果當前頁籤是 combined則切換到 feedback
if (this.currentTab === 'combined') {
initialTab = 'feedback';
}
}
// 設置初始頁籤(不觸發保存,避免循環調用)
this.setInitialTab(this.currentTab);
this.setInitialTab(initialTab);
}
setInitialTab(tabName) {
@ -1423,8 +1435,14 @@ class FeedbackApp {
input.checked = input.value === this.layoutMode;
});
// 應用佈局樣式
document.body.className = `layout-${this.layoutMode}`;
// 檢查當前 body class 是否已經正確,避免不必要的 DOM 操作
const expectedClassName = `layout-${this.layoutMode}`;
if (document.body.className !== expectedClassName) {
console.log(`應用佈局模式: ${this.layoutMode}`);
document.body.className = expectedClassName;
} else {
console.log(`佈局模式已正確: ${this.layoutMode},跳過 DOM 更新`);
}
// 控制頁籤顯示/隱藏
this.updateTabVisibility();

View File

@ -378,7 +378,7 @@
}
</style>
</head>
<body>
<body class="layout-{{ layout_mode }}">
<div class="container">
<!-- ===== 頁面頭部區域 ===== -->
<header class="header">