write(ui): 三栏宽度可拖拽 + localStorage 持久化

- sidebar | workspace 拖拽条:调整侧栏宽(180-500px)
- editor | preview 拖拽条:调整源码/预览比例(15%-85%)
- CSS var --sidebar-w / --editor-fr / --preview-fr 驱动 grid-template-columns
- 鼠标 down 开始 drag,move 实时算 px/dx,up 落盘 localStorage
- 移动端(<768px)自动隐藏拖拽条,回到 100% 切 tab 模式
This commit is contained in:
fam
2026-05-24 17:18:37 +01:00
parent 9328c01c1b
commit 7b868852d2
4 changed files with 270 additions and 9 deletions
+16 -2
View File
@@ -16,7 +16,7 @@ textarea, input { font: inherit; }
.app {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-columns: var(--sidebar-w, 260px) 6px 1fr;
height: 100vh;
}
@@ -92,11 +92,25 @@ textarea, input { font: inherit; }
.editor-pane {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: var(--editor-fr, 1fr) 6px var(--preview-fr, 1fr);
min-height: 0;
border-bottom: 1px solid #e5e5e5;
}
/* 拖拽分隔条 */
.splitter {
background: #e5e5e5;
cursor: col-resize;
transition: background 0.12s;
user-select: none;
}
.splitter:hover { background: #b0c5ff; }
.splitter-main { /* sidebar | workspace */ }
.splitter-editor { /* editor | preview */ }
@media (max-width: 768px) {
.splitter { display: none; }
}
.title-row {
grid-column: 1 / -1;
padding: 10px 16px;