项目地址：pythonvisualeditor.netlify.app
技术栈：原生 HTML/JS + Skulpt + CodeMirror 5
一、为什么要做这个项目？
作为一个常年和 H5 游戏打交道的人，我见过太多新手被 Python 环境配置劝退的场景：
pip install报错红一片- Python 版本冲突搞到怀疑人生
- 想画个图还得装 matplotlib，结果依赖地狱...
"能不能让小白在浏览器里直接写 Python、直接看到效果？"
这就是 PyVisual Pro 诞生的原因——零安装、零配置，打开浏览器就能跑 Python，还能实时可视化输出。
二、核心功能一览
1. 🚀 浏览器内运行 Python（真·无需后端）
核心依赖是 Skulpt——一个用 JavaScript 实现的 Python 解释器。它能把 Python 代码编译成 JS 执行，完全在客户端运行：
JavaScript
复制
// 初始化 Skulpt 引擎
Sk.configure({
output: outf, // 标准输出捕获
read: builtinRead, // 文件读取
inputfun: inputfun // input() 支持
});
这意味着：
- ✅ 不需要服务器，纯静态托管（我用的 Netlify）
- ✅ 代码在本地执行，隐私安全
- ✅ 加载一次后离线也能用
2. 🎨 Turtle 图形实时渲染
最香的功能！写几行代码就能画图：
Python
复制
import turtle
t = turtle.Turtle()
for i in range(36):
t.circle(100)
t.right(10)
Skulpt 会把 turtle 指令映射到 HTML5 Canvas 上，实时渲染。支持：
- 前进/后退/转向 (
forward,left,right) - 画笔控制 (
penup,pendown,pensize,color) - 填充 (
begin_fill,end_fill) - 下载生成的图片
3. ✨ 类 VS Code 的编辑体验
用 CodeMirror 5 搭建的编辑器，功能一点不含糊：
表格
| 功能 | 实现细节 |
|---|---|
| 语法高亮 | Python mode + 自定义 token |
| 智能提示 | 自建 200+ 关键词库，支持属性补全 |
| 错误定位 | 运行时捕获异常，高亮错误行并跳转 |
| 快捷键 | F5 运行、Ctrl+S 保存、Ctrl+N 新建 |
| 自动保存 | 2 秒无操作自动写入 localStorage |
智能提示的贴心设计：
输入 str. 会自动提示字符串方法（split, replace 等），输入 turtle. 会提示图形 API，类型标签一目了然：
plain
复制
split str
replace str
forward turtle
4. 🌓 深浅主题一键切换
右上角 🌓 按钮切换，基于 CSS 变量实现：
css
复制
:root {
--bg-primary: #f8f9fa;
--accent-color: #1a73e8;
}
[data-theme="dark"] {
--bg-primary: #1e1e1e;
--accent-color: #4ec9b0; /* VS Code 同款青绿色 */
}
暗色主题配色参考了 VS Code 的 Monokai，代码高亮也会同步切换。
三、技术实现细节（踩坑记录）
坑 1：Skulpt 的 input() 会阻塞执行
Skulpt 默认的 inputfun 返回 Promise，但在某些情况下会导致执行卡住。我的解决方案是强制使用同步的 window.prompt：
JavaScript
复制
function inputfun(prompt) {
return window.prompt(prompt || "输入:");
}
虽然交互简陋了点，但胜在稳定不卡死。
坑 2：Turtle 画布的生命周期管理
每次运行新代码前必须清空旧画布，否则图形会叠加。我的处理逻辑：
JavaScript
复制
const container = document.getElementById('turtle-container');
const placeholder = document.getElementById('canvasPlaceholder');
container.innerHTML = ''; // 清空所有 canvas
container.appendChild(placeholder); // 放回占位符
同时用 Sk.TurtleGraphics.target 指定渲染容器，让 Skulpt 知道往哪画。
坑 3：死循环导致页面卡死
加个超时保护（15 秒），用 Promise.race 实现：
JavaScript
复制
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => reject(new Error('执行超时')), 15000);
});
await Promise.race([runPromise, timeoutPromise]);
超时后自动终止，并提示用户检查是否有死循环。
四、代码架构解析
plain
复制
PyVisual Pro
├── 编辑器层 (CodeMirror)
│ ├── 语法高亮 (python.js)
│ ├── 自动补全 (show-hint.js + 自定义 hint 函数)
│ └── 快捷键绑定 (F5/Ctrl+S/Ctrl+N)
├── 执行层 (Skulpt)
│ ├── Python → JS 编译
│ ├── 输出捕获 (outf)
│ ├── 输入处理 (inputfun)
│ └── Turtle → Canvas 映射
└── UI 层
├── 主题切换 (CSS 变量)
├── 标签页切换 (控制台/画布)
├── 示例代码库 (9 个内置模板)
└── 文件操作 (新建/打开/保存)
内置的 9 个示例代码：
表格
| 分类 | 示例 |
|---|---|
| 基础 | Hello World、变量与运算、循环结构 |
| Turtle | 正方形、圆形、彩色螺旋、分形树 |
| 算法 | 斐波那契数列、素数判断 |
点击"示例"按钮直接加载，新手可以边改边学。
五、适用场景
- 编程入门教学 - 老师投屏演示，学生跟着敲
- 快速验证想法 - 不用开 PyCharm，浏览器秒开
- Turtle 图形学习 - 可视化反馈即时，成就感强
- 面试/考试环境 - 统一环境，避免配置差异
六、未来规划
- 支持
matplotlib基础图表（Skulpt 有实验性支持） - 代码分享功能（生成短链接）
- 多文件项目管理
- 移动端适配优化
七、结语
PyVisual Pro 不是什么高大上的框架，只是一个把几样成熟技术拼在一起、解决具体痛点的小工具。但正是这种"开箱即用"的体验，能降低编程的入门门槛。
如果你也在做教育类产品，或者想给团队搞个轻量级的 Python 演练环境，欢迎参考这个项目。代码完全开源（单 HTML 文件），部署到 Netlify/Vercel 只要 30 秒。
🔗 在线体验： pythonvisualeditor.netlify.app
如果这篇分享对你有帮助，欢迎点赞收藏～ 有问题评论区留言，我会回复！ p.s.第一次点开运行时需要下载20到30M的pyodide包，加载有点慢，以后就好了，稍等一下哦~谢谢！
