fix: banner移入content-wrapper,标签栏下方直接是两栏布局

This commit is contained in:
thzxx
2026-05-21 12:04:54 +08:00
parent dbbd0f4abb
commit d25c2ec30d
3 changed files with 19 additions and 8 deletions
+8 -7
View File
@@ -84,13 +84,6 @@
</button> </button>
</div> </div>
<!-- External modification banner -->
<div id="modified-banner" class="hidden">
<span>文件已被外部程序修改</span>
<button id="btn-reload" class="banner-btn">重新加载</button>
<button id="btn-dismiss" class="banner-btn">忽略</button>
</div>
<!-- Workspace: Sidebar + Main Content --> <!-- Workspace: Sidebar + Main Content -->
<div id="workspace"> <div id="workspace">
<!-- Sidebar --> <!-- Sidebar -->
@@ -108,6 +101,13 @@
<!-- Main content area --> <!-- Main content area -->
<div id="main-content"> <div id="main-content">
<div id="content-wrapper">
<!-- External modification banner -->
<div id="modified-banner" class="hidden">
<span>文件已被外部程序修改</span>
<button id="btn-reload" class="banner-btn">重新加载</button>
<button id="btn-dismiss" class="banner-btn">忽略</button>
</div>
<!-- Editor panel --> <!-- Editor panel -->
<div id="editor-panel"> <div id="editor-panel">
<!-- Search & Replace Bar --> <!-- Search & Replace Bar -->
@@ -144,6 +144,7 @@
<div id="preview-panel"> <div id="preview-panel">
<div id="preview" class="markdown-body"></div> <div id="preview" class="markdown-body"></div>
</div> </div>
</div>
<!-- Welcome screen --> <!-- Welcome screen -->
<div id="welcome-screen"> <div id="welcome-screen">
+2 -1
View File
@@ -17,6 +17,7 @@
const editorPanel = document.getElementById('editor-panel'); const editorPanel = document.getElementById('editor-panel');
const previewPanel = document.getElementById('preview-panel'); const previewPanel = document.getElementById('preview-panel');
const mainContent = document.getElementById('main-content'); const mainContent = document.getElementById('main-content');
const contentWrapper = document.getElementById('content-wrapper');
const tabList = document.getElementById('tab-list'); const tabList = document.getElementById('tab-list');
// Sidebar // Sidebar
@@ -822,7 +823,7 @@
document.addEventListener('mousemove', (e) => { document.addEventListener('mousemove', (e) => {
if (!isResizing) return; if (!isResizing) return;
const rect = mainContent.getBoundingClientRect(); const rect = contentWrapper.getBoundingClientRect();
const pct = Math.max(20, Math.min(80, ((e.clientX - rect.left) / rect.width) * 100)); const pct = Math.max(20, Math.min(80, ((e.clientX - rect.left) / rect.width) * 100));
editorPanel.style.flex = `0 0 ${pct}%`; editorPanel.style.flex = `0 0 ${pct}%`;
previewPanel.style.flex = `0 0 ${100 - pct}%`; previewPanel.style.flex = `0 0 ${100 - pct}%`;
+9
View File
@@ -308,11 +308,20 @@ html, body {
#main-content { #main-content {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
min-width: 0; min-width: 0;
} }
#content-wrapper {
flex: 1;
display: flex;
flex-direction: row;
overflow: hidden;
min-height: 0;
}
/* ===== Editor Panel ===== */ /* ===== Editor Panel ===== */
#editor-panel { #editor-panel {
flex: 1; flex: 1;