c406d2988f
* feat: add draggable sidebar resizer - Add resizer handle between map and event panel - Sidebar width adjustable from 300px to 50% screen width - Default width remains 400px - Auto-adjust on window resize * fix: preserve map zoom when resizing sidebar Only update viewport screen size without re-fitting the map * fix: use window size for canvas to prevent map scaling on resize - Canvas size now based on window instead of container - Sidebar resize only clips the visible area, map stays same size - Remove CSS stretch on canvas element * docs: update sidebar-resizer spec with canvas fix
49 lines
1.4 KiB
Markdown
49 lines
1.4 KiB
Markdown
# Sidebar Resizer 规格
|
||
|
||
## 概述
|
||
|
||
在地图区域和事件记录面板（sidebar）之间添加一条可拖曳的分隔线，允许用户调整 sidebar 的宽度。
|
||
|
||
## 需求
|
||
|
||
### 功能
|
||
|
||
- 在 `.map-container` 和 `.sidebar` 之间添加一个垂直的 resizer 手柄。
|
||
- 用户可以通过拖曳该手柄来调整 sidebar 的宽度。
|
||
|
||
### 宽度限制
|
||
|
||
- **最小宽度**: 300px
|
||
- **最大宽度**: 50% 屏幕宽度
|
||
- **默认宽度**: 400px
|
||
|
||
### 持久化
|
||
|
||
- 不需要持久化，每次打开页面都恢复为默认 400px。
|
||
|
||
## 实现细节
|
||
|
||
### 修改文件
|
||
|
||
- `web/src/App.vue` - resizer 逻辑
|
||
- `web/src/components/game/GameCanvas.vue` - canvas 尺寸调整
|
||
|
||
### 技术方案
|
||
|
||
1. 在 `.main-content` 中，在 `.map-container` 和 `.sidebar` 之间插入一个 `.resizer` 元素。
|
||
2. 使用 `mousedown` / `mousemove` / `mouseup` 事件实现拖曳逻辑。
|
||
3. 拖曳时动态计算并设置 sidebar 宽度。
|
||
4. Canvas 使用窗口大小而非容器大小，确保拖曳 sidebar 时地图不会被缩放，只改变可视区域。
|
||
|
||
### UI 细节
|
||
|
||
- Resizer 宽度: 4px
|
||
- 默认颜色: 透明或与背景融合
|
||
- Hover/拖曳时颜色: 高亮（如 `#555` 或主题色）
|
||
- 鼠标样式: `col-resize`
|
||
|
||
### 边界处理
|
||
|
||
- 拖曳超出最小/最大范围时，宽度固定在边界值。
|
||
- 窗口 resize 时，如果当前宽度超过 50% 屏幕宽，自动调整为 50%。
|