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
1.4 KiB
1.4 KiB
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 尺寸调整
技术方案
- 在
.main-content中，在.map-container和.sidebar之间插入一个.resizer元素。 - 使用
mousedown/mousemove/mouseup事件实现拖曳逻辑。 - 拖曳时动态计算并设置 sidebar 宽度。
- Canvas 使用窗口大小而非容器大小，确保拖曳 sidebar 时地图不会被缩放，只改变可视区域。
UI 细节
- Resizer 宽度: 4px
- 默认颜色: 透明或与背景融合
- Hover/拖曳时颜色: 高亮（如
#555或主题色） - 鼠标样式:
col-resize
边界处理
- 拖曳超出最小/最大范围时，宽度固定在边界值。
- 窗口 resize 时，如果当前宽度超过 50% 屏幕宽，自动调整为 50%。