fix: 工作空间面板改为 flex 子元素,修复与主内容区错位
- workspace-panel 从 position:fixed 改为 flex 子元素,与日志面板布局模式一致 - 移除 margin-right:480px hack,工作空间自然占据宽度 - 移除 updateNavHeight() 和 --nav-height CSS 变量(不再需要) - 移除 border-top(flex 布局下顶部自动对齐)
This commit is contained in:
@@ -167,7 +167,7 @@
|
||||
</div>
|
||||
</div><!-- /.main-wrap -->
|
||||
|
||||
<!-- ═══════════════ 工作空间面板(右侧,常驻显示)═══════════════ -->
|
||||
<!-- ═══════════════ 工作空间面板(右侧,常驻显示,flex 子元素)═══════════════ -->
|
||||
<aside class="workspace-panel" id="workspacePanel">
|
||||
<div class="ws-header">
|
||||
<span class="ws-title">🖥️ 工作空间</span>
|
||||
|
||||
+1
-16
@@ -212,8 +212,6 @@ async function init(): Promise<void> {
|
||||
setupDesktopIntegration();
|
||||
|
||||
bindGlobalEvents();
|
||||
updateNavHeight();
|
||||
window.addEventListener('resize', updateNavHeight);
|
||||
|
||||
await checkConnection();
|
||||
await loadModels();
|
||||
@@ -285,24 +283,11 @@ async function init(): Promise<void> {
|
||||
initSettingsModal();
|
||||
initHistoryModal();
|
||||
setupDesktopIntegration();
|
||||
updateNavHeight();
|
||||
window.addEventListener('resize', updateNavHeight);
|
||||
checkConnection().then(loadModels);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态计算顶部导航高度(header + model-bar),
|
||||
* 设为 CSS 变量 --nav-height,供 workspace-panel 引用
|
||||
*/
|
||||
function updateNavHeight(): void {
|
||||
const header = document.querySelector<HTMLElement>('.app-header');
|
||||
const modelBar = document.querySelector<HTMLElement>('.model-bar');
|
||||
const headerH = header?.getBoundingClientRect().height ?? 0;
|
||||
const modelBarH = modelBar?.getBoundingClientRect().height ?? 0;
|
||||
const total = Math.ceil(headerH + modelBarH);
|
||||
document.documentElement.style.setProperty('--nav-height', `${total}px`);
|
||||
}
|
||||
|
||||
|
||||
function bindGlobalEvents(): void {
|
||||
document.querySelector('#btnNewChat')?.addEventListener('click', startNewSession);
|
||||
|
||||
@@ -2673,17 +2673,14 @@ html, body {
|
||||
/* ═══════════════ 工作空间面板 ═══════════════ */
|
||||
|
||||
.workspace-panel {
|
||||
position: fixed;
|
||||
top: var(--nav-height, 92px); /* JS 动态计算 header + model-bar 实际高度 */
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 480px;
|
||||
background: var(--bg-solid, #202020);
|
||||
border-left: 1px solid var(--border-default, rgba(255,255,255,0.08));
|
||||
border-top: 1px solid var(--border-default, rgba(255,255,255,0.08));
|
||||
min-width: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-solid, #202020);
|
||||
border-left: 1px solid var(--border-default, rgba(255,255,255,0.08));
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
@@ -3083,6 +3080,5 @@ html, body {
|
||||
|
||||
/* ── 主内容区自适应 ── */
|
||||
|
||||
.main-wrap.with-workspace {
|
||||
margin-right: 480px;
|
||||
}
|
||||
/* main-wrap.with-workspace 不再需要 margin-right,
|
||||
工作空间面板已改为 flex 子元素,自然占据宽度 */
|
||||
|
||||
Reference in New Issue
Block a user