文件树与文档 Tab 栏
左侧 FileTree 提供层级导航，顶部 DocumentTabBar 支持多文档快速切换——两者共同构成工作区的核心导航骨架。
VizChat 工作区的导航由两个组件构成：左侧 文件树（FileTree） 负责层级浏览与管理，顶部 文档 Tab 栏（DocumentTabBar） 负责已打开文档的快速切换。两者绑定同一个工作区，通过文档 ID 联动。
FileTree（左侧文件树）
文件树展示当前工作区下所有文档，按 path 字段构建虚拟目录。数据层由 build-tree-data.ts 负责，把扁平的 WorkspaceDocument[] 列表转换成层级树。
功能：
- 层级浏览：文件夹可展开/折叠，支持键盘方向键
- 类型图标：按
DocumentType展示不同图标（画布、故事板、图片、PDF 等） - 右键菜单：重命名、删除、在新 Tab 打开
- 拖拽移动：拖动文档改变
path - 搜索过滤：按文件名实时过滤
DocumentTabBar（顶部 Tab 栏）
Tab 栏显示当前已打开的文档，类似浏览器或 IDE 的 tab：
- 多文档并行：同时打开多个画布、故事板、文档，一键切换
- 未保存标记：内容未保存时在 tab 上显示脏状态点
- 关闭 / 关闭其他：右键菜单支持批量关闭
- 拖拽排序：可调整 tab 顺序
两者联动
┌───────────────────────────────────────────────┐
│ [Tab A*] [Tab B] [Tab C] [+] │ ← DocumentTabBar
├────────────┬──────────────────────────────────┤
│ ▼ 项目 │ │
│ 📊 A │ │
│ 🎬 B │ DocumentWorkspace │
│ 📝 C │ （渲染当前激活文档） │
│ ▶ 归档 │ │
└────────────┴──────────────────────────────────┘
FileTree在文件树双击文档 → 在 Tab 栏打开并激活 → DocumentWorkspace 加载对应渲染器。