lym12321/rm-ui-designer

An easy way to design RoboMaster UI

RoboMaster UI Designer

如何使用

1. 直接使用我们的在线Demo
2. 打开在线Demo后使用浏览器弹出的安装应用功能安装PWA应用以供离线使用
3. 在Release中下载我们使用Tauri打包的本地应用，支持Windows、Linux、MacOS平台

各客户端可自由选择，数据类型互通，均自备自动更新功能

自行部署

本项目为纯前端项目，可直接部署在任何静态服务器上，如Nginx、Apache等， 在线demo使用Github Pages托管，如需自行构建前端可以参考以下步骤：

git clone https://github.com/bismarckkk/RM-UI-Designer.git
cd RM-UI-Designer
yarn
yarn build

如果需要自行构建Tauri应用，首先需要配置Tauri编译环境， 然后自行生成签名密钥并配置tauri.conf.json中的tauri.updater.pubKey字段， 将私钥和密码加入环境变量，然后执行以下命令进行构建

yarn tauri build

也可以在Github上Fork我们的项目，利用Github Action进行跨平台构建

路线图

• 基本组件
  • 直线
  • 矩形
  • 正圆
  • 椭圆
  • 文本
  • 圆弧
  • 自定义背景图
• 高级组件
  • 旋转矩形
  • 平行四边形
  • 路径
• 编辑功能
  • 拖拽
  • 缩放
  • 通过缩放翻转
  • 撤销/重做
  • 多选
  • 复制/粘贴
  • 删除
  • 自动保存到浏览器
  • 保存/读取文件
  • 在同一工程中切换frame
• 高级功能
  • 生成代码
  • UI模拟器
  • PWA应用
  • Tauri应用
• 功能改进
  • 文本切换为自绘方案，与客户端对齐
  • 历史记录采用内部事件机制记录，不再保存整个画布

贡献代码

欢迎修复任何bug或添加上述路线图中的功能，请fork本项目主分支，然后提交PR，PR需要任何一个管理员审核通过即可合并

项目结构

详见代码目录结构

组件结构

联系作者

• Email: [email protected]
• QQ: 3040585972