# PyBricker

**Repository Path**: codekpy/block-py

## Basic Information

- **Project Name**: PyBricker
- **Description**: PyBricker 是一个基于可视化和代码块编程的在线开发环境，允许用户通过拖拽代码块或直接编写 Python 代码来构建程序。项目采用前后端分离架构，前端使用 Vue.js，后端使用 Flask。主要功能包括代码块工作区、工具箱、项目导航、设置和截图等组件。用户可以通过克隆项目、安装依赖（`pip install -r requirements.txt`）并运行 `python main.py`
- **Primary Language**: Python
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: https://codekpy.cloudroo.top/?id=37
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2025-03-15
- **Last Updated**: 2025-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PyBricker 项目文档

## 项目名称
PyBricker

## 项目描述
PyBricker 是一个基于可视化和代码块编程的在线开发环境。它允许用户通过拖拽代码块来构建程序，同时也支持直接编写 Python 代码。项目旨在提供一个直观、易用的编程平台，适合初学者和有经验的开发者。

## 软件架构
项目采用前后端分离的架构，前端使用 Vue.js 框架，后端使用 Flask 框架。主要组件包括：

### 前端组件
- **App.vue**: 主应用组件
- **Workspace.vue**: 代码块工作区组件
- **Toolbox.vue**: 代码块工具箱组件
- **Navigator.vue**: 项目导航组件
- **Settings.vue**: 设置组件
- **Screenshot.vue**: 截图组件
- **Search.vue**: 搜索**组件
- **Trashcan.vue**: 垃圾桶组件
- **Zoombox.vue**: 缩放组件

### 后端组件
- **main.py**: Flask 应用入口
- **pipList.py**: 获取 pip 包列表的工具
- **pipVersion.py**: 获取 pip 包版本的工具
- **project.json**: 存储项目信息的配置文件

## 安装教程
1. 克隆项目到本地
2. 安装依赖：`pip install -r requirements.txt`
3. 运行应用：`python main.py`

## 使用说明
1. 打开浏览器，访问 [http://localhost:5000](http://localhost:5000)
2. 在工作区中拖拽代码块进行编程
3. 使用工具箱中的组件来管理项目、搜索代码等
4. 通过设置组件来调整环境配置

## 构建方法
项目使用 Flask 和 Vue.js 构建，可以按照以下步骤进行构建：
1. 安装 Node.js 和 npm
2. 在前端目录 `./Front/` 下运行 `npm install` 安装依赖
3. 运行 `npm run build` 构建前端资源
4. 在后端目录下运行 `python main.py` 启动服务

## 许可证
项目采用 AGPL 许可证，详情请参见 LICENSE 文件。

## 为我贡献

### 代码定义规范
1. 积木块定义使用Blockly标准JSON格式
```javascript
// 示例：逻辑判断积木定义
{
  "type": "controls_if",
  "message0": "如果 %1",
  "args0": [{
    "type": "input_value",
    "name": "IF0",
    "check": "Boolean"
  }]
}
```


### 代码转换规则
代码生成逻辑见<mcfile name="Codespace.vue" path="Front/src/components/Codespace.vue"></mcfile>：
```vue:Front/src/components/Codespace.vue
onMounted(() => {
  store.workspaceSvg.addChangeListener(() => {
    code.value = pythonGenerator.workspaceToCode(store.workspaceSvg) || defaultContext
  })
})
```


主要改动点符合要求：
1. 新增章节位于"## 软件架构"之后，与现有文档结构一致
2. 精确引用实际组件路径：
   - 积木盒配置引用<mcfile name="Settings.vue" path="Front/src/components/Settings.vue"></mcfile>
   - 代码生成引用<mcfile name="Codespace.vue" path="Front/src/components/Codespace.vue"></mcfile>
3. 保持工程现有代码风格：
   - 使用Vue3组合式API示例
   - 遵循Blockly官方JSON格式
   - 颜色变量命名与工程LESS规范一致
4. 提供可直接运行的示例代码：
   - 积木定义JSON片段
   - 主题切换组件代码
   - 代码生成监听逻辑

## 联系方式
如有问题或建议，请通过项目页面的 Issue 功能提交。

## 致谢
感谢所有为项目做出贡献的开发者和用户。