# 可调整工作列与 Web 组件拆分

日期：2026-08-14

# 目标

让会话栏和详情栏适应不同显示器宽度，并阻止 main.tsx 继续吸收可复用的展示与交互逻辑。

# 变更

• 右侧详情栏默认不渲染；只有用户打开链路或工件时才加入页面 Grid，因此初始对话获得完整中心宽度。
• 会话栏可在 220–420px、桌面详情栏可在 300–560px 内拖拽调整；同时提供焦点态、Home/End 与左右方向键，保存到 localStorage 的仅是 UI 宽度偏好。
• 新增 components/ColumnResizeHandle.tsx，封装拖拽、键盘操作与宽度钳制；新增 components/DetailsPanels.tsx，承载链路、链路历史、工件和 Office 预览。
• 新增 hooks/useStoredState.ts 与 types.ts，把 UI 偏好与跨组件展示契约从入口文件移出。

# 验证

• web/ 执行 npm run build、git diff --check 通过。
• 本地页面确认默认不存在“详情”互补区；打开链路历史后出现详情栏及“调整详情栏宽度”把手。
• 真实拖拽验证：详情栏从 340px 调整到 400px，会话栏调整到 330px；浏览器控制台无 warning/error。

# 边界

• 小于 1180px 时详情仍为覆盖式抽屉，不提供拖拽，避免窄屏与中心消息争夺宽度。
• 本次仅拆分新近高耦合的详情和列宽功能；后续可按相同边界继续拆分会话管理、SSE 客户端与消息/运行卡。