52 lines
1.9 KiB
Markdown
52 lines
1.9 KiB
Markdown
# 布局调整：侧边栏置顶、文档标签栏移至侧边栏右侧（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 真机观感待用户验收。
|