企业官网建设流程全解析

• 后端
• 前端
• 开发工具

Compiler Explorer（Godbolt）的 IDE 模式（又称 Tree View / 树视图）将浏览器中的在线编译器升级为轻量级的多文件开发环境：你可以在一个面板中组织项目文件、通过.zip归档保存与恢复整个工程、启用 CMake / Cargo / Make / Maven 等构建系统，并让挂在树上的编译器与执行器看到项目里的全部文件。本文以仓库文档 docs/IDEMode.md 为骨架，结合前端核心实现 static/panes/tree.ts、static/multifile-service.ts 与 shared/build-systems.ts 的源码，完整讲解 IDE 模式的功能、操作方式、快捷键行为与底层工作机制，读完即可在 Compiler Explorer 中高效搭建并调试多文件项目。

什么是 IDE 模式（Tree View）

"IDE Mode"（树视图）允许你同时处理多个文件。与默认的单文件编辑模式不同，Tree View 把项目以层级结构展示在专用面板中，体验与传统 IDE 的文件浏览器一致。它的核心价值在于：

• 文件组织：在树中新增、重命名、删除源文件，直观看到项目全貌；
• 构建控制：决定哪些文件参与编译、哪些文件被排除，支持自定义构建系统参数；
• 工程化：整个项目（含全部文件与设置）可打包为.zip保存，随时重新加载；
• 多文件编译：只有属于树的编译器和执行器才能看到树管理的全部文件，实现跨文件编译与执行。

从实现角度看，Tree View 由前端Tree类驱动（static/panes/tree.ts），底层数据管理由MultifileService承担（static/multifile-service.ts），两者通过 EventHub 与编辑器、编译器进行事件通信。

核心功能一览

IDE 模式提供了完整的多文件项目工作流，主要包括以下能力：

• 文件资源管理器：树视图以层级结构展示项目文件，外观与操作习惯类似传统 IDE（views/templates/panes/tree.pug 中通过Included files/Excluded files两个分组呈现）。
• 文件操作：直接在树视图中完成全部文件管理——
  • 新增文件：创建新的源文件（“Add new...” 菜单中的Source editor项）；
  • 重命名文件：修改现有文件的名称；
  • 删除文件：从项目中移除文件（删除前会弹出确认对话框，源码见 static/panes/tree.ts）；
  • 包含/排除构建：决定文件是否参与编译，分别对应树行中的 stage / unstage 按钮（includeByFileId/excludeByFileId）。
• 项目管理：
  • 保存与加载：将整个项目（所有文件与设置）保存为.zip归档，之后加载该.zip即可完整还原项目。源码中saveProjectToZipfile使用 JSZip 把isIncluded的文件打包为project-<时间戳>.zip（static/multifile-service.ts），加载时则校验文件名合法性、过滤超大文件并去除 UTF-8 BOM（static/multifile-service.ts）；
  • 构建系统支持：树视图支持构建系统项目，可开启构建模式并传入自定义参数。
• 拖放导入：将本机文件直接拖入树视图即可加入项目；若拖入的是.zip文件，则自动按项目归档加载（static/panes/tree.ts）。
• 语言感知：树视图能感知语言，可在面板中为项目选择主语言；新增文件时也会依据扩展名自动推断语言（getLanguageIdFromFilename，见 static/multifile-service.ts）。

构建系统与自定义参数

原文档指出：树视图支持 CMake 项目，开启 CMake 模式后可提供自定义构建参数，但项目根目录必须存在CMakeLists.txt；且文档中说明 CMake 模式仅在选择 C、C++、Fortran、CUDA 或 Assembly 语言时可用。

需要说明的是，当前仓库的构建系统支持已经在此基础上演进出可插拔的构建系统注册表（shared/build-systems.ts），TreeBuildSystem包括cmake、cargo、make、maven与none（不使用构建系统）。各构建系统的关键属性如下：

与构建系统交互的界面细节（源自 views/templates/panes/tree.pug 与 static/panes/tree.ts）：

• 工具栏上的build system 下拉按钮：显示当前选中的构建系统名称（未选中时显示 “No build”），菜单中除可用的构建系统外始终提供 “No build” 选项；若当前语言的可用构建系统为空，按钮会被禁用。
• 选择构建系统后，面板下方会展开参数输入框（Build system arguments...）与自定义输出文件名输入框（对应customOutputFilename）。切换语言时，若新语言与该构建系统不兼容，构建系统会被自动重置为none（static/multifile-service.ts）。
• 每个构建系统的参数会被分别记忆（buildSystemArgs字段）：切换构建系统时不会把上一个系统的参数带过去；首次选中的构建系统会预填其defaultArgs，被清空过的则保持为空（static/panes/tree.ts）。
• 对于 CMake 项目，加载.zip时会特别关注CMakeLists.txt并尝试打开它（static/panes/tree.ts）；主源文件（main source）的判定在构建系统存在时以清单文件为准，否则按语言默认主文件名判定（Pascal 例外，以.dpr结尾为准，见 static/multifile-service.ts）。

Ctrl+S 行为详解

当存在激活的 Tree View 时，在任意编辑器中按下Ctrl+S（macOS 为Cmd+S）都会把该编辑器对应的文件纳入树中并刷新；如果文件尚未命名，会先弹出对话框要求输入文件名，再纳入树。

该行为由设置项"In Tree (IDE) mode, Ctrl+S includes the current file"（设置键enableCtrlStree）控制，默认开启。源码中该设置的定义与默认值位于 static/settings.ts；实际处理逻辑在 static/panes/editor.ts：

1. 若enableCtrlStree为真且 Hub 中存在树（hub.hasTree()），则调用第一个树（当前实现约定使用trees[0]，源码注释标注todo: change when multiple trees are used）的multifileService.includeByEditorId(this.id)将当前编辑器纳入项目并刷新树。
2. 若设置被关闭，或当前没有激活的 Tree View，则回退到通用"Ctrl+S"设置定义的四种行为：

上述回退分支同样可在 static/panes/editor.ts 中看到：enableCtrlS === 'true'对应下载保存，'2'对应格式化，'3'对应忽略（连续按 5 次还会在界面弹出提示气泡，对应样式类.ctrlSNothing，见 static/styles/explorer.scss），'4'对应手动触发编译。

标签页（Tab）行为

当 Tree View 激活时，从树中打开文件，其编辑器会以标签页形式堆叠在同一个编辑器面板内，而不是各自新建独立面板；点击已经打开的文件会切换到已有标签页，而不会打开重复副本。从顶部菜单新增的面板（如新的编辑器或 diff 视图）也会被堆叠进编辑器区域，而不是放在布局根位置。

这一行为由 Hub 的addInEditorStackIfPossible方法承载（调用见 static/panes/tree.ts 与 static/panes/tree.ts）：若布局支持堆叠则加入现有编辑器栈，保证 IDE 模式下编辑器区整洁有序。

添加编译器和执行器（重要注意事项）

重要：在 IDE 模式下，编译器和执行器必须从 Tree View 面板中通过其"Add compiler"和"Add executor"按钮添加。不要从单个源码编辑器的下拉菜单中选择编译器——那些编译器与树没有关联，不会参与多文件构建。只有属于树的编译器和执行器才能看到树管理的全部文件。

该约束在代码层面清晰可循：树的 "Add new..." 菜单中提供Compiler与Execution only两个入口（views/templates/panes/tree.pug），点击后分别通过Components.getCompilerForTree(this.id, ...)与Components.getExecutorForTree(this.id, ...)创建带树 ID 归属的组件（static/panes/tree.ts）；树通过监听compilerOpen/compilerClose事件维护属于自己的编译器集合ourCompilers（static/panes/tree.ts），只有这些编译器能收到每个文件的包含/排除变更通知并参与requestCompilation触发的多文件构建（static/panes/tree.ts）。

如何打开 Tree View

在顶部菜单中点击"Add..."按钮，选择"Tree (IDE Mode)"即可打开 Tree View 面板。打开后面板顶部提供：

• Project 菜单：加载项目（从.zip）、保存项目（另存为.zip）；
• Add new... 菜单：新增源编辑器、编译器、执行器；
• Build system 下拉：选择构建系统（No build / CMake / Cargo / Make / Maven 视语言而定）；
• 语言选择器：切换项目主语言。

面板主体以两个分组列出文件：Included files（参与构建）与Excluded files（排除在构建之外），每个文件行提供打开、重命名、删除、包含/排除等操作按钮（模板见 views/templates/panes/tree.pug）。

实现细节与架构

IDE 模式的核心逻辑位于前端文件 static/panes/tree.ts，该文件负责 UI、文件操作以及与 Compiler Explorer 其他部分（编辑器、编译器）的通信；UI 模板位于 views/templates/panes/tree.pug。整体架构可概括为三层协作：

1. 展示层（Tree 类，static/panes/tree.ts)：管理面板 DOM、构建系统与语言选择、新增/删除/重命名/包含排除文件的交互、拖放导入、项目 zip 的保存与加载，以及编译结果到来后的汇编行着色（LineColouring）。
2. 数据层（MultifileService，static/multifile-service.ts)：维护MultifileFile[]（含isIncluded、isOpen、isMainSource、filename、content、editorId、langId等字段）、主源文件判定、构建系统状态、文件合法性校验（隐藏文件、扩展名与构建系统清单名检查）与 zip 读写。
3. 构建系统层（shared/build-systems.ts）：以描述符形式声明各构建系统的清单文件名、兼容语言、默认参数与产物名；前端据此渲染菜单与输入框，后端另有对应驱动负责真正执行构建。

事件通信方面，Tree 通过eventHub监听editorOpen、editorClose、compilerOpen、compilerClose、compileResult、renamePane等事件，并在treeOpen/treeClose时向 Hub 注册/注销自己（static/panes/tree.ts）；编辑器侧则在 Ctrl+S 时通过 Hub 访问树并调用其multifileService完成文件纳入。TreeState中的cmakeArgs、customOutputFilename、buildSystemArgs、buildSystem等字段会随 golden-layout 的setState持久化，从而实现刷新页面或分享链接后的状态还原（static/panes/tree.ts、static/panes/tree.ts）。

使用建议与注意事项

• 多文件项目请始终通过树的按钮添加编译器和执行器，否则无法参与多文件构建。
• 使用 CMake 等构建系统时，确保项目内存在对应清单文件（如CMakeLists.txt），并根据需要填写构建参数与自定义输出文件名；不同构建系统的参数各自记忆，切换时互不干扰。
• 借助 Ctrl+S 的“纳入树”行为，可以快速把散落在编辑器中的代码归入当前项目，而无需手动新建文件。
• 项目可通过 "Save" 导出为.zip归档，方便本地备份或在会话间迁移；同样地，把.zip拖入树视图即可一键恢复整个项目。

• 后端
• 前端
• 开发工具