低代码开发平台-toga页面设计

BeeWare 的 Toga 布局助手是一款专为 BeeWare Toga 框架设计的可视化布局工具。它允许开发者通过直观的拖拽界面快速构建 Python 原生应用的 UI 结构，并自动生成符合 Toga 规范的 Python 源代码。该工具支持实时预览、属性编辑以及多窗口设计，极大地简化了 Toga 应用的界面开发流程。

本软件采用前后端分离的架构设计：

前端：
基于 HTML5/CSS3/JavaScript (ES6+) 开发，是一个单文件无依赖的 Web 应用。
实现了拖拽式设计器，利用 DOM 操作模拟 Toga 的组件树。
内置组件属性管理与代码生成引擎，能够将设计图实时转换为 Python 代码。
后端：
基于 Python FastAPI 构建。
提供静态文件服务（托管前端 HTML 文件）。
提供简单的 API 接口（如 /api/save）用于数据交互与持久化。
利用 Uvicorn 作为 ASGI 服务器运行。
安装教程
环境准备：

确保已安装 Python 3.7 或更高版本。
安装依赖： 在终端中执行以下命令安装 FastAPI 和 Uvicorn： pip install fastapi uvicorn

获取代码：

克隆或下载本仓库。
将 designer.html 和 app.py 文件放置在同一个本地文件夹中。
启动服务：

在命令行中进入该文件夹，运行以下命令启动服务： python app.py
服务启动成功后，终端会显示 Uvicorn running on http://0.0.0.0:8000。
访问工具：

打开浏览器访问：http://localhost:8000
即可开始使用 Toga 可视化布局助手。
使用说明
组件拖拽：

从左侧“组件库”面板中选择需要的组件（如 Button, Label, Box, TextInput 等）。
按住鼠标左键将其拖拽至中间的“设计画布”区域。
放置在容器组件（如 Box）内时，容器会高亮显示释放区域。
页面与布局管理：

使用左侧底部的“页面管理”面板，点击“+ 新建”按钮可以添加新的窗口（页面），点击列表项可以切换当前编辑的页面。
选中画布中的容器组件（Box），在右侧属性面板中修改“布局”方向（垂直/水平）来调整内部组件的排列方式。
属性编辑：

点击画布中的任意组件，右侧“属性面板”将显示该组件的详细属性。
您可以直接在输入框中修改属性值（如文本内容、ID、数值、布尔值等），画布会实时预览修改效果。
每个属性下方都附带了详细的中文说明，帮助您理解其具体作用。
工具会自动进行类型检测（如数值、布尔值），确保生成的代码语法正确。
代码导出：

点击顶部工具栏的“🐍 导出代码”按钮。
在弹出的窗口中，您可以看到自动生成的完整 Python 源代码。
生成的代码中包含了详细的中文注释，解释了每一部分的功能。
您可以点击“📋 复制”将代码复制到剪贴板，或点击“💾 下载”将代码保存为 .py 文件。