各位开发者们，今天有个超重磅消息要宣布！一款和 VSCODE 操作布局极为类似的可视化开发神器 ——Joker 智能可视化开发平台正式上线啦！它将给大家带来前所未有的开发体验，不管你是前端开发大神、后端技术高手，还是 AI 开发领域的探索者，Joker 都能满足你的需求。

工作台作为一款在线可视化开发工具，是我们日常开发过程中的得力助手。通过工作台，我们能够在仓库内便捷地进行代码开发，它集成了前端组件、页面、方法、API，以及服务端的数据库、缓存、控制器（API）和配置文件等丰富资源，实现了可视化开发操作。

不仅如此，平台还内置了功能强劲的 Javascript/Typescript 表达式编辑器，借助这一工具，开发者可以通过表达式编写的方式，实现更为复杂和高级的功能开发。同时，在开发流程中，平台提供的代码检查功能会实时运行，及时发现潜在问题，并给出具有针对性的解决方案，有效提升开发的准确性，减少错误排查时间，大幅提高开发效率 。

功能区域

按功能可以将工作台划分为三个大的区域：

• 左侧面板： 这里是我们的菜单面板，里面包含了我们常用的功能菜单面板，按照不同的项目类型和打开的文件类型，会展示不同的菜单。
• 中间面板： 这里是我们的工作区，当我们打开文件时，平台会根据文件类型展示不同的可视化工作区的工作面板。
• 底部面板： 这里是我们的项目基本信息展示区，展示了项目中的错误异常、文件大小、版本等信息。

资源管理器

资源管理器以直观的项目文件目录树形式呈现，是管理项目文件的关键区域。在这里，你能够便捷地进行创建文件、修改文件基本信息、删除文件以及复制/粘贴文件等操作，高效管理项目中的各类文件资源。

当鼠标悬停在资源上时，资源右侧会出现菜单操作按钮，点击三点图标即可打开文件操作菜单，其中包含以下常用功能：

文件菜单

• 创建文件夹：该选项仅在文件夹资源处显示，可在当前文件夹内创建子文件夹，方便进行业务分类。合理规划文件夹结构，有助于确保代码生成时文件目录的合理性，提升项目整体的组织性与可维护性。
• 创建 XX：依据不同的根目录或父节点，会展示不同的创建文件菜单，满足多样化的文件创建需求，让你能够快速创建所需文件。
• 提交纪录：点击此选项可查看文件的提交日志，详细记录了文件被谁操作过、操作时间以及具体的操作内容，方便追溯文件的变更历史，了解项目进展与团队协作情况。
• 编辑：用于编辑文件节点信息，例如修改文件名、调整路由信息等文件基础属性，让你能够灵活调整文件的标识与路径设置。
• 删除：可删除文件或文件夹，但根目录受到保护无法删除，保障项目核心结构的稳定性，避免因误操作导致项目文件系统的混乱。
• 复制：点击复制后，文件内容会被暂存到内存中，便于在目标文件夹或父文件中进行粘贴操作，实现文件的快速复制，提高文件管理效率。
• 粘贴：当有文件被复制后，粘贴菜单才会展示，用于完成文件的粘贴操作，完成文件的复制转移流程。
• 移动/剪贴：通过此操作可将文件进行剪贴，并在目标文件位置粘贴，从而实现文件的移动，方便调整文件在项目目录中的位置。

在仓库创建时，平台会依据仓库类型自动创建符合规范的根目录文件夹。为确保规范性与一致性，用户无法自行创建新的根目录，但可以在平台创建的根目录下自由创建子文件夹。平台所创建的根目录按照功能进行划分，契合通用业务规范。

根目录说明

• 组件：此文件夹专门存放通用或跨页面的 UI 组件资源，可在其内部通过文件夹进一步细分种类，方便管理与查找。该文件夹仅存在于前端项目（非方法集）中，是构建前端页面的重大资源存储地。
• 方法：主要存放通用方法集，你可以根据业务类型在内部创建不同种类的方法功能集，将相关方法进行归类管理，提高代码的复用性与可维护性。
• 页面：用于存放页面布局及功能页面文件，是创建实际展示页面的主要区域。在这里，你可以设计和搭建用户直接交互的页面，该文件夹仅适用于前端项目（非方法集）。
• 资源：主要存放项目内的图片、字体等类型文件，平台支持上传图片等资源，并提供可视化的快速引用功能，方便在项目开发过程中快速调用这些资源，提升开发效率。
• 缓存：该文件夹存放服务端业务数据缓存策略，可在此创建特定业务的缓存类型及缓存策略，优化服务端数据处理性能，仅服务端项目（非方法集）存在此文件夹。
• 控制器：主要存放服务端对外提供的控制器（API），你可以在此创建 API 方法，实现服务端与外部的交互接口，方便数据传输与功能调用，仅服务端项目（非方法集）适用。
• 项目配置（文件）：在此处可以维护当前项目的基本信息，如开放哪些组件、方法集、样式变量；配置路由守卫等安全与访问控制功能；维护当前项目的 NPM 引用，确保项目依赖的正常管理；还能设置全局变量、全局方法等，实现项目的全局配置与管理。
• 环境变量（文件）：可创建缓存变量和环境，在运行时能够根据实际需求选择环境，从而确定环境变量的值，实现对不同运行环境的差异化配置，满足项目在开发、测试、生产等不同阶段的需求。

打开文件

在操作界面中，打开文件的方式十分便捷。当你单击文件节点，即可快速打开对应的文件。系统采用智能管理机制，若打开的文件未进行任何变更，在你打开下一个文件时，上一个未变更的文件会自动关闭，以保持操作界面的简洁有序。

但如果你不想修改文件内容，却希望该文件始终保留在打开文件任务栏中，只需双击文件节点，即可实现文件在任务栏的保留，方便随时查看与切换。

此外，在资源管理器下方，设有“打开的编辑器”面板，在这里，你可以清晰地查看已经打开的文件列表，快速定位和切换所需文件，进一步提升操作效率。

保存文件

完成文件修改后，只需按下 Ctrl（Windows 系统）或 Command（Mac 系统）+S 组合键，即可快速保存修改内容，让你的工作成果得以即时留存。

快捷键

平台配备快捷键，一键触发交互功能，高效又便捷。

• Ctrl/Command + S：保存资源
• Ctrl/Command + P：快速资源查找
• Ctrl/Command + C：在前端可视化面板中可实现元素复制
• Ctrl/Command + V：在前端可视化面板中可实现元素粘贴
• Ctrl/Command + Z：在前端可视化面板中可实现操作撤销

组件数据

在 前端 项目中，当你打开 组件 或 页面 类型的文件时，左侧菜单面板会展示出 组件数据 菜单。这一菜单对于前端开发人员而言是极为常用的工具之一，通过它可以查看当前组件或页面的内部数据。

在此处，你能够对组件的“状态数据”和“逻辑/事件”进行维护，还能查看“布局大纲树”，以便更全面、深入地了解和管理组件或页面的相关数据与结构 。

组件中心

在 前端 项目里，当你打开 组件 或 页面 类型的文件，左侧菜单面板便会呈现出 组件中心 菜单。对于前端开发人员来说，这是极其常用的工具之一。借助该菜单，你能够查看当前项目中可用的组件列表，而且只需通过简单的拖拽操作，就能快速添加引用组件。

在此处，默认展示的是基础组件，这些基础组件无法被删除。倘若基础组件无法满足日常开发需求，你可以前往 组件方市场 安装插件。安装完成后，其他插件里可用的组件就会在此处展示出来。

请求管理

在 前端(应用类型) 项目中，左侧菜单会出现请求管理菜单选项。这里是对当前项目中请求 API 进行聚焦维护的关键区域。

在请求管理面板中，点击下方的请求管理按钮，便能打开请求管理编辑器。在这个编辑器里，你可以进行一系列关键操作：

• 接口管理：能够方便地创建新接口，编辑现有接口的各项参数与配置，以及在不再需要时删除接口，灵活把控接口的增删改。
• 全局配置设置：可以对接口请求的全局配置进行调整，例如设置请求超时时间，确保在网络不佳时请求不会长时间等待；配置请求切面事件，实现对请求前后逻辑的自定义处理；以及进行请求数据转换，让接收和发送的数据格式符合项目需求 ，全面优化接口请求的各项参数与流程。

数据模型

在**服务端（应用类型）**项目里，左侧菜单会呈现数据模型菜单选项。这里堪称维护当前项目中数据库表的核心区域。

在数据模型面板中，只需点击下方的管理数据库按钮，就能打开数据库管理编辑器。在这个功能强劲的编辑器中，你可以对数据库表结构进行全面维护。平台提供了高度灵活的表结构设计支持，无论是建立数据表之间的关联关系，设定主键约束，还是创建联合索引等复杂设计，都能在此轻松完成，充分满足各类复杂的数据管理需求 。

运行调试

运行调试面板是实现对当前项目进行完整运行调试操作的关键区域。

值得注意的是，在此面板中，你可以根据项目需求，选择不同的环境去运行调试，以满足项目在不同场景下的测试与优化要求 。

导出代码

平台支持在开发分支中执行代码导出操作。只需点击“导出代码”菜单，即可生成开发分支下的代码。

需注意，在导出代码前，平台会自动对代码进行全量文件扫描检查。只有当扫描结果显示不存在任何问题时，才会允许文件代码顺利导出，以此确保导出代码的质量与完整性。

组件方法市场

平台设有组件方法市场，为开发人员提供了一个便捷的插件管理平台。在此，开发人员能够对插件进行安装、更新以及卸载操作。这些插件均由其他开发人员开发完成并对外公开。

主工作区

工作台的中间区域便是我们的主工作区，它承担着展示不同文件类型可视化编辑器的重任，是日常工作的核心操作区域。

主工作区从上到下主要分为两个部分：

• 任务栏：此处展示着处于打开/编辑状态的文件。
• 编辑器：作为文件编辑器的渲染区域，也是实际进行开发编辑的地方。

在任务栏中，不同的展示效果对应着文件的不同状态：

1. 若文件名为斜体，表明当前文件既未编辑也未修改，在打开下一个文件时，该文件会自动关闭。若希望将其保留在任务栏，可双击该任务，或者在资源管理面板中双击目标文件。
2. 当文件后显示圆点，则意味着当前文件已发生变更，但尚未保存。
3. 当鼠标移入任务项时，其后会展示关闭按钮。若文件未保存就关闭，系统会弹出是否保存的询问提示。

底部状态栏

工作台底部的底部状态栏，主要用于展示项目的各类状态信息，具体涵盖：项目名称、分类、类型、问题面板、文件大小、登录状态等内容。

其中，问题面板是一项常用功能。在此处，你能够查看当前项目的代码问题。不仅如此，在创建项目版本时，还需通过问题面板完成代码检查，只有这样才能触发发布的后续流程，确保项目代码质量符合发布标准。