# ArenaNext
**Repository Path**: box3lab/arena-next-plugin
## Basic Information
- **Project Name**: ArenaNext
- **Description**: ArenaNext 是神岛 Arena 编辑器的功能抢先体验版插件，让用户提前体验下一代编辑器的创新特性。该插件集成了多种强大功能和增强特性，经过用户验证和优化后的功能将会正式内置到未来的编辑器版本中。其中核心 AI 助手"AIChat 吉 PT"提供智能 JavaScript 编程辅助，为开发者提供代码分析、错误修复和代码优化。通过神岛代码编辑器深度集成，它提供了超越基础代码提示的智能化编程体验
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://box3lab.com/
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-07
- **Last Updated**: 2025-10-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🚀 ArenaNext - 下一代的神岛 Arena 编辑器插件
ArenaNext 是神岛 Arena 编辑器的功能抢先体验版插件，让用户提前体验下一代编辑器的创新特性。经过用户验证和优化后的功能将会正式内置到未来的编辑器版本中。
核心 AI 助手 "AIChat 吉 PT" 提供智能 JavaScript 编程辅助，通过与神岛代码编辑器的深度集成，为开发者提供代码分析、错误修复和代码优化等功能，创造超越基础代码提示的智能化编程体验。
## 📋 目录
- [✨ 主要功能](#-主要功能)
- [🔧 技术实现](#-技术实现)
- [📂 项目结构](#-项目结构)
- [📥 安装与使用](#-安装与使用)
- [🛠️ 技术栈](#️-技术栈)
- [🔄 持续改进](#-持续改进)
- [👥 开发团队](#-开发团队)
- [📜 许可证](#-许可证)
- [🙏 贡献](#-贡献)
## ✨ 主要功能
### 🐛 代码错误处理与修复
- **🔍 智能错误高亮显示**：在代码行尾直接显示错误信息，红色背景标识错误行，橙色标识警告行
- **📊 错误列表面板**：在编辑器底部展示代码错误、警告和提示
- **🔧 一键修复**：点击"吉 PT 一键修复"按钮自动分析并修复所有代码问题
- **💡 错误解释**：点击单个错误的"解释报错"按钮获取详细错误解释和修复建议
- **⚡ 快速修复集成**：右键单击错误标记直接访问 AI 修复建议
- **🤖 AI 错误解释助手**：在控制台错误旁显示 AI 按钮，点击后智能分析错误并提供修复方案
### 📊 代码分析与优化
- **🔎 代码透镜(CodeLens)**：在函数和类定义上方提供智能操作菜单
- **📋 代码复制**：通过代码透镜菜单一键复制整个函数或类的代码
- **👁️ Peek 定义视图**：点击引用可预览代码定义，支持只读模式，无需跳转即可查看引用代码
- **📝 上下文菜单**：右键点击编辑器访问丰富的代码分析功能：
- ✅ 纠正代码错误
- 🔄 长函数拆分
- ⚙️ 优化重构代码
- 📚 详细解释代码
- 💬 注释生成
- 📘 API 详细解释和示例
### 🧩 代码包管理
- **📦 代码包浏览**：通过左侧菜单访问代码包库，浏览可用的代码模块
- **🔍 代码包搜索**：快速搜索和筛选代码包，轻松找到需要的功能
- **📥 多种导入方式**：支持控制台导入和新脚本导入两种方式
- **📖 文档访问**：直接访问代码包的详细文档和使用说明
- **🔄 实时更新**：自动获取最新的代码包列表和更新
- **📤 代码包投稿/更新**：支持开发者提交和更新自己的代码包
### 🎨 Monaco 编辑器增强
- **⚡ JavaScript/TypeScript 语言服务增强**：提供高级类型检查和语法分析
- **🔍 TypeScript 支持**：自动识别 .ts 和 .tsx 文件，提供类型检查和代码导航
- **💡 智能内联补全**：
- 🤖 基于 AI 的智能代码补全
- 📊 项目上下文感知补全
- 🔄 自动导入分析
- 📝 支持 JSDoc 注释补全
- 🔍 类型感知补全
- **⚙️ 代码严格度设置**：可配置的 JavaScript/TypeScript 验证选项，支持本地保存配置：
- 📋 基础检查：检查 JS/TS 文件类型
- 🔒 类型严格性：禁止隐式 any、严格空值检查、禁止隐式 this
- 🔍 代码质量：未使用局部变量/参数检查、隐式返回检查等
- 📏 代码风格规范：禁止隐式类型转换、一致返回值要求
- 🛡️ 安全相关：禁用 eval、原型方法安全调用
- **👁️ Peek 定义查看**：只读模式的代码引用查看，提高代码浏览效率
- **💾 配置持久化**：自动保存用户配置到本地存储，下次使用时自动恢复
- **🎭 语法高亮优化**：精确匹配 VS Code 的语法配色
- **🔠 智能括号引导线**：点击代码时显示不同颜色的垂直引导线
- **🎨 颜色可视化**：为 GameRGBColor、GameRGBAColor 和 Vec3.create 提供实时颜色预览
- **💡 代码提示优化**：自动补全提示优化，提高代码编写效率
### 🖌 UI 增强功能
- **🚦 错误类型区分**：通过不同的颜色和图标直观区分错误、警告、注意和信息
- 🔴 错误（红色）
- 🟠 警告（橙色）
- 🟡 注意（黄色）
- 🔵 信息（蓝色）
- **🔍 错误列表过滤**：通过类型筛选器快速聚焦于特定类型的问题
- **↕️ 可调整大小的面板**：拖动调整错误列表高度，保存用户首选项
- **📍 智能定位**：自动适应调试面板位置，确保最佳界面布局
- **🧹 控制台清理**：一键清空控制台日志，提高调试效率
### 💻 编辑体验增强
- **🔍 自动代码选择**：点击错误项自动选择相关代码，提高工作效率
- **✨ 自动格式化**：回车/粘贴/保存时自动格式化代码，实时保持代码整洁，提高代码质量
- **📁 虚拟文件系统**：维护编辑器内的文件结构，实现跨文件代码分析
### ⌨️ 快捷键支持
- **Ctrl+S**：格式化当前脚本文件
- **F5**：运行地图
## 🔧 技术实现
### 组件架构
- **🔧 EditorErrorList**：错误列表 UI 组件，支持交互式错误管理
- **🤖 ErrorAIHelper**：AI 错误解释助手，为控制台错误添加智能分析功能
- **🧹 ConsoleCleaner**：控制台清理工具，提供一键清空日志功能
- **⚙️ MonacoIntegration**：Monaco 编辑器的深度集成
- **🎨 UIComponents**：UI 组件和界面交互系统，包括代码包浏览器和导入系统
- **🔄 AI 通信**：与后端 AI 服务的无缝通信，用于代码分析和建议
## 📂 项目结构
项目采用模块化结构设计，核心功能按照职责划分到不同目录中：
```
arenanext/
├── 📦 dist/ # 编译输出目录
│ └── 📄 arenanext.user.js # 用户脚本最终打包文件
├── 📁 src/ # 源代码
│ ├── 📁 components/ # UI和功能组件
│ │ ├── 📄 EditorActions.js # 编辑器动作处理
│ │ ├── 📄 EditorErrorList.js # 错误列表UI与交互
│ │ ├── 📄 MonacoIntegration.js # Monaco编辑器功能集成
│ │ ├── 📄 ErrorAIHelper.js # AI错误解释助手
│ │ ├── 📄 ConsoleCleaner.js # 控制台清理工具
│ │ └── 📄 UIComponents.js # 通用UI组件和代码包管理
│ ├── 📁 monaco/ # Monaco编辑器增强
│ │ ├── 📄 languageServices.js # 语言服务增强
│ │ ├── 📄 typeScriptOptions.js # TS/JS配置选项
│ │ ├── 📄 codeLens.js # 代码透镜实现
│ │ ├── 📄 inlineCompletionsProvider.js # AI 智能内联补全
│ │ ├── 📄 errorDecorations.js # 错误装饰与高亮
│ │ ├── 📄 virtualFileSystem.js # 虚拟文件系统
│ │ ├── 📄 editorActions.js # 编辑器操作扩展
│ │ ├── 📄 utils.js # Monaco工具函数
│ │ └── 📄 index.js # Monaco模块入口
│ ├── 📁 services/ # 服务层
│ │ └── 📄 apiService.js # AI API通信服务
│ ├── 📁 styles/ # 样式文件
│ │ └── 📄 main.css # 全局样式定义
│ ├── 📁 utils/ # 工具函数
│ │ ├── 📄 domUtils.js # DOM操作工具
│ │ ├── 📄 fileUtils.js # 文件操作工具
│ │ └── 📄 promptTemplates.js # AI提示模板
│ └── 📄 index.js # 主入口文件
├── 📄 package.json # 项目依赖配置
├── 📄 webpack.config.js # Webpack构建配置
└── 📄 LICENSE # 开源许可证
```
### 🧩 核心模块说明
#### 组件模块 (components/)
- **🧾 EditorErrorList**: 提供错误列表 UI、交互和错误管理功能
- **🤖 ErrorAIHelper**: 实现 AI 错误解释按钮，将错误信息发送给 AI 进行分析
- **🧹 ConsoleCleaner**: 实现控制台清理按钮，一键清空调试日志
- **⚙️ MonacoIntegration**: 集成 Monaco 编辑器的各种增强功能
- **🎨 UIComponents**: 提供通用 UI 组件和界面交互，包括代码包浏览器和管理功能
#### Monaco 增强 (monaco/)
- **⚡ languageServices**: JavaScript/TypeScript 语言服务增强，提供更精确的代码分析
- **🔎 codeLens**: 实现代码透镜功能，在函数和类上方显示操作菜单
- **🚨 errorDecorations**: 错误高亮和行尾错误提示实现
- **⚙️ typeScriptOptions**: TypeScript/JavaScript 验证选项配置，支持本地存储
- **📁 virtualFileSystem**: 维护编辑器内文件结构的虚拟文件系统
### 🔄 功能与文件对应关系
| 功能特性 | 实现文件 | 说明 |
| :----------------: | :---------------------------------: | :---------------------------------------------: |
| 🚨 代码错误高亮 | monaco/errorDecorations.js | 在代码中高亮显示错误并在行尾添加错误信息 |
| 📊 错误列表面板 | components/EditorErrorList.js | 可排序、过滤的错误列表 UI 组件 |
| 🤖 AI 错误解释 | components/ErrorAIHelper.js | 为错误日志添加 AI 解释按钮 |
| 🧹 控制台清理 | components/ConsoleCleaner.js | 一键清空调试控制台日志 |
| 🔎 代码透镜 | monaco/codeLens.js | 在函数和类上方显示操作菜单 |
| 👁️ Peek 定义查看 | monaco/languageServices.js | 只读模式的代码引用预览 |
| 🎨 语法高亮优化 | monaco/languageServices.js | 自定义语法高亮主题和配色 |
| 📝 TypeScript 支持 | monaco/languageServices.js | 自动检测文件类型和编译器配置 |
| ⚙️ 类型检查增强 | monaco/typeScriptOptions.js | 配置 JavaScript 验证选项和严格度 |
| 💾 配置本地存储 | monaco/typeScriptOptions.js | 将用户配置持久化到本地，下次自动恢复设置 |
| 📁 虚拟文件系统 | monaco/virtualFileSystem.js | 跨文件代码分析的虚拟文件管理 |
| 💡 智能内联补全 | monaco/inlineCompletionsProvider.js | AI 驱动的智能代码补全，支持上下文感知和频率限制 |
| 📦 代码包管理 | components/UIComponents.js | 实现代码包浏览、搜索和导入等功能 |
## 📥 安装与使用
### 用户安装
1. 安装 **Tampermonkey** 或其他用户脚本管理器浏览器扩展
- Chrome: [Tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)
- Firefox: [Tampermonkey](https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/)
- Edge: [Tampermonkey](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd)
2. 安装 ArenaNext 插件
- 访问[安装链接](https://static.pgaot.com/Assets/js/arenanext.user.js)
- 在弹出的 Tampermonkey 页面中点击"安装"按钮
3. 在神岛编辑器中使用
- 打开 [神岛编辑器](https://dao3.fun)
- 插件会自动加载并激活
### 📦 代码包功能
1. **🔍 访问代码包库**
- 在编辑器左侧菜单中找到"代码包"图标并点击
- 界面将显示可用代码包的网格视图，包含标题、描述和导入选项
2. **🔎 搜索与浏览**
- 使用搜索框快速查找特定代码包
- 代码包按时间排序，最新的显示在前面
- 每个代码包显示详细描述和文档链接
3. **📥 导入代码包**
- 点击"导入"按钮打开导入选项
- 选择导入方式：控制台导入或新脚本导入
- 导入完成后会显示成功通知
4. **📤 投稿与更新**
- 开发者可以提交自己的代码包供社区使用
- 支持更新已有代码包
### 💻 TypeScript 支持与 Peek 定义查看
1. **🔄 自动语言检测**
- 系统会自动根据文件扩展名(.ts/.js)识别语言类型
- TypeScript 文件会获得完整的类型检查和代码智能提示
2. **👁️ Peek 定义功能**
- 点击代码中的变量、函数等引用可打开只读预览窗口
- 无需离开当前编辑位置即可查看定义
- 支持在同一文件或跨文件引用之间导航
### ⚙️ 配置保存功能
编辑器严格度设置现已支持本地保存，您的配置会自动存储在浏览器的 localStorage 中：
1. 在编辑器左侧菜单找到"脚本检查严格度设置"
2. 根据需要调整选项（如严格模式、类型检查等）
3. 设置会自动保存，下次打开编辑器时自动应用
4. 配置跟随浏览器环境，在同一浏览器中将保持一致
### 🤖 AI 错误解释助手
控制台错误解释功能提供智能错误分析：
1. 当控制台出现错误时，每条错误消息右侧会显示一个 "AI" 按钮
2. 点击该按钮，AI 助手会分析错误并提供详细解释
3. AI 会给出错误原因分析和具体修复建议
4. 适用于语法错误、运行时错误、逻辑错误等多种错误类型
## 🛠️ 技术栈
| 技术 | 版本 | 用途 |
| :-----------: | :-----: | :------------: |
| JavaScript | ES6+ | 核心开发语言 |
| TypeScript | 支持 | 类型定义和检查 |
| Monaco Editor | API | 代码编辑器集成 |
| jQuery | ^3.6.0 | DOM 操作 |
| Marked | ^4.0.2 | Markdown 渲染 |
| Highlight.js | ^11.4.0 | 代码高亮 |
| Webpack | ^5.88.2 | 构建工具 |
## 🔄 持续改进
ArenaNext 插件不断更新以提供更好的编程体验。最新增强功能包括：
- **📦 代码包管理功能**：浏览、搜索和导入社区代码包
- **📝 TypeScript 全面支持**：自动语言检测和类型检查
- **👁️ Peek 定义查看**：只读模式的代码引用浏览功能
- **💾 用户配置持久化**：编辑器配置自动保存到本地，下次使用时自动恢复
- **🤖 AI 错误解释增强**：优化错误解释按钮的稳定性和交互体验
- **🧹 控制台清理功能**：一键清空控制台日志，提高调试效率
- **🔍 TypeScript 错误码智能过滤**：减少无关提示，专注于重要错误
- **🎨 错误类型的颜色编码和图标区分**：更直观的错误提示系统
## 👥 开发团队
## 📜 许可证
[Apache-2.0 License](./LICENSE)
## 🙏 贡献
您的反馈和贡献对于 ArenaNext 的改进至关重要！我们欢迎并重视所有用户反馈，这将直接影响哪些功能将被选入编辑器核心。
欢迎通过以下方式提供您的建议和反馈：
- 🐞 Gitee Issues：报告问题或提出功能建议
- 🌐 官网：https://box3lab.com
- 📊 用户调查：定期参与我们的用户体验调查
---
Copyright © 2024-2025 神岛实验室 (Box3Lab)。保留所有权利。
