FlintCoder (燧石编辑器)

下一代高性能图形化编程平台

🚀 项目概述

FlintCoder 是一个基于 Rust + Vue 3 的现代化图形化编程平台，旨在解决 Scratch 3.0 的性能瓶颈，为用户提供流畅、高效的编程体验。

🏗️ 技术架构

前端技术栈

• 核心框架: Vue 3.5.22 (Composition API)
• 构建工具: Vite 7.1.7 (下一代前端构建工具)
• 运行时: Bun 1.2.23 (极速 JavaScript 运行时，10-25x 更快的依赖安装)
• 开发语言: TypeScript 5.9.3 (类型安全)
• 状态管理: Pinia 2.2.6 (Vue 官方推荐)
• 路由管理: Vue Router 4.4.5
• UI 框架:
  • DaisyUI 5.1.26 + Tailwind CSS 4.1.14 (现代化设计系统)
• 图形渲染:
  • PixiJS 8.5.2 (WebGL 2D 渲染引擎)
  • Blockly 11.1.1 (Google 可视化编程框架)
• 工具库:
  • @vueuse/core 11.2.0 (Vue 组合式工具集)

后端技术栈

• 核心语言: Rust 2024 Edition
• WASM 构建: wasm-bindgen 0.2 + wasm-pack
• Web APIs: web-sys 0.3 + js-sys 0.3
• 序列化: serde 1.0 + serde-wasm-bindgen 0.6
• 内存优化: wee_alloc 0.4 (可选)

构建与部署

• PWA 支持: vite-plugin-pwa 1.0.3 (离线缓存、桌面安装)
• WASM 集成: vite-plugin-wasm 3.3.0 + vite-plugin-top-level-await 1.4.4
• 代码质量: ESLint 9.14.0 + TypeScript ESLint 8.11.0
• 测试框架: Vitest 2.1.4
• 多平台: Web + PWA (未来支持 Tauri 桌面应用)

📁 项目结构

flintcoder/
├── gui/                    # 前端 GUI 应用
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── vite.config.ts
├── engine/                 # Rust 引擎 (编译为 WASM)
│   ├── src/
│   ├── Cargo.toml
│   └── pkg/               # WASM 输出目录
├── docs/                  # 项目文档
├── scripts/               # 构建和开发脚本
└── README.md

🛠️ 开发环境要求

• Bun 1.0+ (推荐 1.2.23+)
• Rust 1.70+
• wasm-pack

🚀 快速开始

环境要求

• Bun 1.0+ (推荐 1.2.23+，极速 JavaScript 运行时)
• Rust 1.70+ (推荐使用 rustup 安装)
• wasm-pack (用于构建 WebAssembly)
• Git (版本控制)

安装环境

1. 安装 Rust

# Windows
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 添加 WASM 目标
rustup target add wasm32-unknown-unknown

2. 安装 wasm-pack

# Windows
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 或使用 cargo
cargo install wasm-pack

3. 安装 Bun

# Windows (PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"

# 或使用 npm (如果已安装)
npm install -g bun

# macOS/Linux
curl -fsSL https://bun.sh/install | bash

构建和运行

使用自动化脚本 (推荐)

# Windows PowerShell
.\build.ps1 -Help          # 查看帮助
.\build.ps1 -Dev           # 开发模式 (启动开发服务器)
.\build.ps1 -Release       # 发布模式构建
.\build.ps1 -Clean         # 清理构建输出

# Unix/Linux/macOS
./build.sh --help          # 查看帮助
./build.sh --dev           # 开发模式
./build.sh --release       # 发布模式构建
./build.sh --clean         # 清理构建输出

使用 bun 脚本

bun run help               # 查看帮助
bun run dev                # 开发模式
bun run build              # 发布模式构建
bun run clean              # 清理构建输出

# 分别构建
bun run build:engine       # 仅构建引擎
bun run build:gui          # 仅构建前端

手动构建

# 1. 构建 Rust 引擎
cd engine
wasm-pack build --target web --out-dir pkg

# 2. 复制引擎到前端
cd ../gui
mkdir -p src/engine
cp -r ../engine/pkg/* src/engine/

# 3. 安装前端依赖并构建
bun install
bun run build

开发服务器

启动开发服务器后，访问 http://localhost:5173 查看应用。

开发服务器支持：

• 🔥 热重载
• 📦 WASM 模块自动加载
• 🎨 Vue 3 组件热更新
• 🛠️ TypeScript 类型检查

📝 开发日志

• 2025.10.1: 项目创建，基础框架搭建

🤝 贡献指南

欢迎加入 FlintCore 社区，成为燧友(sy)！

📄 许可证

MIT License