docs: 布局调整说明(docs/19,侧边栏置顶与标签栏右移)

This commit is contained in:
Muse
2026-11-14 14:46:59 +08:00
parent 5bf89defd6
commit 41e0331dc9

View File

@@ -0,0 +1,51 @@
# 布局调整:侧边栏置顶、文档标签栏移至侧边栏右侧(2026-11-14)
## 用户要求
左侧栏应该置顶,打开文档的 tab 页栏应该在左侧栏右边。
## 调整前
```
.app(纵向)
TitleBar 整行
MenuBar 整行
TabBar 整行 ← 标签栏横贯全宽,侧边栏只能从它下方开始
.main(横向)
Sidebar | EditorArea
StatusBar 整行
```
## 调整后
```
.app(纵向)
TitleBar 整行
MenuBar 整行
.main(横向)
Sidebar 从菜单栏下方贯通到状态栏(置顶)
.content-col(纵向,新增)
TabBar 只占侧边栏右侧的内容列
EditorArea
StatusBar 整行
```
## 实现
- `src/App.tsx`:TabBar 从 MenuBar 与 .main 之间移入 .main 内的新容器
`.content-col`(侧边栏右侧的纵向列),位于编辑区上方;其余 props 与回调不变。
- `src/styles.css`:
- 新增 `.content-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }`;
- `.tabbar` 加 `flex: none`,在纵向列里不被压缩;
- `.editor-area` 补 `min-height: 0`,保证编辑区在列内正确伸缩;
- 打印规则的容器选择器同步加入 `.content-col`、`.editor-area`。
- 隐藏侧边栏时内容列占满整行,标签栏随之回到左边缘,无需额外处理。
## 验证
- 本机无头浏览器实测几何(1280×820,侧边栏宽 250px):菜单栏 top=38 起、
高 32;侧边栏 top=70(紧贴菜单栏下方)、高 724(贯通至状态栏);
标签栏 top=70、left=250(正好从侧边栏右边缘起)、高 36;
编辑区 top=106、left=250。截图见当次会话附件。
- vitest 87 通过 + 2 跳过;tsc 0 错误;vite 构建通过。
- 已随提交 `5bf89de` 推送 Gitea main;Windows 真机观感待用户验收。