HT 估计可能多数同学没听过吧？没关系，我刚进现在的公司时，第一次听到 HT 也是一脸懵逼。经过一段时间使用之后我认为公司那个 HT 编辑器很不好用也不好维护，因此我认真学习了 HT，准备重构它。于是下班后我开始尝试重构，持续了差不多一个月，差不多能跑起来了。
使用场景
拓扑编辑器是一个低代码大屏可视化应用工具。编辑器默认采用 Node.js 作为后台服务，客户端通过 Websocket（http://socket.io/）和服务端通讯操作本地文件系统。
设计师可以使用编辑器丰富的绘图工具创作图标图纸，产品运维可以充分利用导入外部素材模型组态大屏原型页面，开发人员可以通过在线开发 components 实现复用功能。
该项目前端没有用 React/Vue 之类的框架前端，主要使用 ES6 和 Web 版 HT，基于 Vite 构建。后端主要使用 Node.js/Socket.io/Express。
特性
- 支持简单拖拽画图编辑;
- 支持图纸、图标、组件、场景和模型导入（拖拽）导出（右键菜单）;
- 支持常见格式的 2D 资源和 3D 模型上传（拖拽）;
- 支持 SVG、CAD 文件导入及图纸、图标的转换;
- 支持 Obj、mtl 3D 格式及贴图;
- 支持图纸、图标场景预览;
- 支持属性、样式和字段的数据绑定
- 支持主题、菜单、标签页及控制功能的配置和自定义;
- 支持多语言;
- 支持 Http(s)和 websocket 多协议;
- 支持整合第三方数据可视化库（Echarts）。
截图
- 2D 编辑器 (默认)
运行开发环境
- 修改配置文件
// server/config.ini
[Dev]
port = 4000
autoOpen = false
storagePrefix =
urlPrefix =
is3D = false
clientDir = ../client
customDir = ../instance/custom
storageDir = ../instance/storage- 运行开发环境客户端
cd tp-editor\client
npm run dev- 使用 nodemon 运行开发环境服务端
cd tp-editor\server
npm run dev运行生产环境
- 修改配置文件
// server/config.ini
[Pro]
port = 3000
autoOpen = true
storagePrefix =
urlPrefix =
is3D = false
clientDir = public
customDir = ../instance/custom
storageDir = ../instance/storage- 编译生产环境客户端
cd tp-editor\client
npm run build- 双击 run.bat，就这样~~
评论 (0)