Nexus/docs/design/specs/2026-06-01-files-editor-panel-design.md

文件管理编辑器面板（SPA）

日期: 2026-06-01
状态: 已确认
依据: 2026-05-18-file-manager-v2-design.md §四、2026-05-30-monaco-ide-editor changelog

背景

当前 MonacoEditor.vue 使用 v-dialog fullscreen，遮挡整个应用，与历史设计不符：

文档	编辑器形态
v2 设计 §四	工具栏 + 编辑区 + 底部状态栏（行/列/语言），非占满视口
v2 计划任务 5	对话框约 95vw × 90vh
2026-05-30 IDE 重构	分屏 IDE、多标签、可最小化/最大化，非唯一全屏

目标

1. 编辑器默认嵌入 #/files 页面底部，文件列表仍可见（约上半屏）
2. 多文件标签页，切换保留各文件内容与修改状态
3. 状态栏：行、列、语言、远程路径
4. 工具栏：保存、主题、最大化、关闭面板、最小化到底部标签条
5. 保留 Ctrl+S、Esc、未保存关闭确认

布局（v2 完整）

┌─ 工具栏 / 面包屑 / 文件表（可滚动，约 42vh）────────┐
├─ 编辑器面板 ────────────────────────────────────────┤
│ [tab1●] [tab2]                    [保存][主题][⛶][─][×] │
│ ┌─ Monaco ─────────────────────────────────────┐   │
│ └──────────────────────────────────────────────┘   │
│ 行 12, 列 4  │  python  │  /www/.../main.py          │
└────────────────────────────────────────────────────┘

最小化：仅显示底部标签条，点击恢复。最大化：position: fixed 铺满视口，文件表隐藏。

v2 补齐（2026-06-01）

• 左侧目录树懒加载（browse 子目录）
• 新建空文件、压缩/解压、排序、扩展名筛选
• 右键：复制路径、终端、压缩、解压
• 快捷键 F5 / F2 / Delete / Backspace / Ctrl+A

验收

• 打开编辑器后仍能看到文件列表并切换目录
• 同时打开 2+ 文件，标签切换内容正确
• 状态栏行列随光标更新
• 最大化/最小化/关闭面板行为符合预期
• 未保存关闭单标签或整面板有确认
• 目录树、新建文件、压缩解压、排序筛选、快捷键