Nexus/docs/changelog/2026-06-01-files-floating-editor.md

2026-06-01 文件管理：浮动可拖动编辑器 + 目录树内置

摘要

• 文件管理页不再显示左侧目录树，文件列表全宽展示。
• 编辑器改为 Teleport 到 body 的浮动面板，支持标题栏拖动、右下角缩放，位置与尺寸持久化到 localStorage。
• 目录树移入 FileEditorWorkbench 左侧栏；在树中导航会同步文件管理页的当前路径；树右键仍可触发粘贴目标。

动机

用户反馈：① 应是「编辑器带文件树」，而非「文件管理带文件树」；② 编辑器应可浮动、可拖动，而非固定在页面底部内嵌分屏。

涉及文件

文件	变更
frontend/src/components/FileEditorWorkbench.vue	浮动面板、内置 FileDirectoryTree、path-change / paste-target
frontend/src/components/FileDirectoryTree.vue	新增 embedded 紧凑模式
frontend/src/composables/useFloatingPanel.ts	拖动/缩放与 localStorage 持久化
frontend/src/pages/FilesPage.vue	移除左侧树与 files-browser--split

迁移 / 重启

• 仅前端构建部署，无需后端重启。

验证方式

1. 打开 #/files，选择服务器并浏览目录——页面无左侧树，列表全宽。
2. 点击「编辑」——出现居中浮动编辑器，左侧有目录树，可拖动标题栏移动、拖右下角缩放。
3. 在编辑器目录树点击文件夹——文件管理页路径与列表同步更新。
4. 最小化后底部出现标签 dock；全屏按钮仍可铺满视口。