前端二开解决方案-模板编辑器

为什么不？

为什么不是低代码？

现有产品本身已经属于低代码的相关的工业产品了，没必要花费巨大成本来进行二次低代码开发。

用户群体

对前端不熟悉的用户群体。

主要难题

1. 工程师有自己既有的软件使用习惯和偏好，有一定的替代成本；
2. 大部分客户内部没有前端工程师，前端二开需要有更便捷的解决方案；
3. 复杂业务场景实现后，如何快排查和定位问题；
4. 如何快速赋能问题；

用户难点

对于没有前端基础的用户来说，开发一个组件，主要难点在于

1. 前端生态的不了解
2. 有前端模板的情况下，如何快捷找到位置，并进行改造
3. 开发完成后，仍然需要查阅各种二开文档来进行编译。
4. 有一定的前期和后期的上手成本

方案

模板编辑器为了解决以上问题，对模板进行实时在线编译，并提供各种功能，减少对前端生态的依赖，尽可能的采用二开的形式就完成目标业务的开发

模版编辑

场景：

模板功能由产品规划，前后端各自定义

组件：

1、控制组件显隐

2、http请求按钮等

3、控制表格的一些功能

界面

整个页面由左右两部分组成，左边是模版的可视区域，右边是模板的编辑区域。

左侧画面由模板实时渲染而成。

如何使用

• 页面模版中每个组件支持选中，选中之后，右侧面板出现其选中组件的代码，以及当前代码执行的日志。
• 可以对代码进行更改，保存后，实时响应到页面上
• 二开组件库为组件组件内已经封装好的可用组件，可跟进文档及配置使用，有具体的使用案例

当用户右键（防止和原来的事件发生冲突）点击画面中的某些模块时，右侧编辑区域立即显示当前组件的代码，该组件代码可编辑，当编辑保存后，页面会实时刷新页面。

编辑区域下面是日志区域，可以看到当前模板执行日志。

最下面的区域为编译区域，由两部分组成，

• 一部分为实时热更新区域（实时显示可能会影响界面性能，通信增加）；
• 组件模板编译区域，用来打包当前模板，打包完成后，可进行下载。

技术方案

技术点：NodeJs + Vue3 + Vite + Typescript + Websocket

现阶段可以通过网页来做，如果想要去掉环境等依赖等成本，可以考虑使用Electron来打包生成exe或者dmg文件

模版相关

由于考虑用户群体，所以该模板不考虑TS/TSX等功能，需要尽可能的简单化。

模版中每个位置都需要支持可点击，因此需要在开发时，涉及每个模块都需要封装成组件，封装细节较高

编译相关

需要自定义Vite编译插件，该插件需要对模板中的所有组件进行解析，补充其hook，用于可以拿到组件的实例Instance，满足用户在使用时，可以实时查看当前选中组件的props与事件等数据

NodeJs相关

当用户在画布中点击需要定制的组件时，需要将该组件ID获取到，通过请求Nodejs服务，获取组件代码，

当用户保存时，需要将保存的代码添加到本地组件中进行替换，使用vite进行实时编译，界面同步刷新

Electron相关

如果支持软件直接使用，无需用户进行改造代码，直接安装使用。