左右侧栏宽度与收起状态
左右侧栏共用同一套宽度、拖拽和收起行为。各侧栏只负责自己的导航、状态来源和主体内容。
状态约束
| 状态 | 宽度规则 | 行为 |
|---|---|---|
| 左侧展开 | 180–480px | 从右边缘拖拽;超出范围时停止变化 |
| 右侧展开 | 240–720px | 从左边缘拖拽;超出范围时停止变化 |
| 收起 | 固定 49px | 左右使用同一 150ms 宽度动画 |
| 重新展开 | 恢复收起前的合法宽度 | 使用同一宽度动画,不丢弃刚调整的宽度 |
实现边界
components/layout/use-resizable-rail.ts 是唯一的宽度行为实现:保存展开宽度、限制范围、处理指针捕获、生成展开/收起样式并控制 transition。左、右侧栏分别提供范围和增长方向,不再各自维护事件监听器。
组件边界
| 文件 | 职责 |
|---|---|
sidebar/sidebar.tsx | 左栏外壳、开关持久化、New chat、收藏和会话组合 |
sidebar/sidebar-primary-nav.tsx | 固定导航、路由高亮、导航图标动画和 Programs 刷新 |
right-sidebar/right-sidebar.tsx | 右栏外壳、文件入口和视图容器 |
right-sidebar/detail-panel.tsx | DAG 选中节点的 Details/Context 切换和详情渲染 |
不在本次结构调整中拆分会话列表或 AppShell;它们有独立状态和交互边界,不能与侧栏外壳移动混在同一次变更中。
验收
分别将左右侧栏拖到边界后收起,应在 150ms 内平滑变为 49px;再次展开应恢复各自之前的宽度。拖动过程中离开 6px 手柄仍应继续响应,释放或取消指针后必须恢复收起动画。
实现状态
已实现:左右侧栏使用同一宽度行为模块;固定导航和详情渲染分别离开外壳文件,外壳组件只负责组合。