Sessions
侧边栏自定义
拖拽调整侧边栏宽度、Peek 模式、折叠与展开
侧边栏自定义
侧边栏的可见性、宽度、Peek 模式都由 appStore 管理,并通过 localStorage 持久化。WinCode 把侧边栏做成可完全隐藏、可浮出、可拖拽调整宽度的组件,以适应不同屏幕尺寸。
折叠与展开
| 操作 | 触发方式 | 源码位置 |
|---|---|---|
| 切换侧边栏 | 标题栏按钮 / 快捷键 | appStore.toggleSidebar() |
| 请求切换 | 跨组件通信(如键盘 Hook) | requestSidebarToggle() 增加计数器,由 AppWorkspace 监听 |
| 强制打开 | 打开项目等操作 | openSidebar() |
| 强制关闭 | 全屏模式等 | closeSidebar() |
开关状态写入 localStorage['sidebar-open'],应用重启后保留。
拖拽调整宽度
侧边栏右侧有一个 ResizeHandle(在 AppWorkspace.tsx 中),鼠标按下后进入拖拽模式:
- 最小宽度 220 px,最大宽度 420 px(由
clampSidebarWidth强制) - 默认宽度 260 px
- 拖拽过程中
setSidebarWidth(next, true)同步写入localStorage['sidebar-width'] - 拖拽时添加
resizing属性到Sidebar,禁用transition以避免卡顿
右 Explorer 面板的宽度同样可拖拽,最小 360 px,与侧边栏独立计算。
Peek 模式
当侧边栏被折叠时,WinCode 不会完全放弃它 —— 而是进入 Peek 模式:
- 屏幕左侧保留一条 3 px 宽的触发区(
sidebarPeekTriggerRef) - 鼠标进入触发区时,以浮动方式弹出侧边栏(
floating属性) - 鼠标离开侧边栏面板或触发区后自动隐藏
- 面板以
translate-x-0 / -translate-x-2+ 淡入淡出过渡,动画时长 200ms
Peek 面板与常规侧边栏共用同一个 Sidebar 组件,只是多了 floating 与 temporaryVisible 两个 props:
<Sidebar
floating // 绝对定位 + 阴影
temporaryVisible={sidebarPeekVisible} // 临时可见,不依赖 sidebarOpen
projectRefreshVersion={...}
/>Peek 模式下点击某个会话,会触发正常的激活逻辑,但不会保持侧边栏打开 —— 需要再次手动展开。
浮动侧边栏的样式
floating 模式启用时:
absolute inset-y-0 left-0 z-30 shadow-[var(--shadow-lg)]与普通模式的区别:
| 模式 | 定位 | 阴影 | 占用布局 |
|---|---|---|---|
| 普通 | 静态 flex 子元素 | 仅右边框 | 占用主工作区宽度 |
| 浮动 | absolute + z-30 | shadow-lg | 覆盖在主工作区之上 |
切换动画
侧边栏展开/折叠有 200ms 的 transition-[width,opacity,transform] 动画:
- 展开:从
-translate-x-2 opacity-0过渡到translate-x-0 opacity-100 - 折叠:反向过渡
- 拖拽中或
AppWorkspace触发的同步动画期间,resizing属性为true,此时禁用 transition 以防抖动