Yifei Open Source introduces creative, innovative, interesting, and practical open-source applications, systems, software, hardware, and technologies. It is an open-source technology community platform for exploring, discovering, sharing, using, and interacting with others. It is committed to building a vibrant open-source community and fostering a new open-source ecosystem.

1. Project Overview

Jiandan Cloud Visual Form Designer

Possibly One of the Most Extensible Form Designers

The biggest advantage of Jiandanyun's visual form designer is that it renders Vue code directly rather than using JSON-based array rendering. Most Vue visual form designers on the market use JSON rendering. Rendering directly from Vue source code offers better cohesion, lower coupling, higher reusability, stronger encapsulation, and easier extensibility. Because it uses direct Vue source code rendering, any code written online can be rendered as long as it follows Vue syntax conventions and the generated Vue code is valid. No compilation is required. It fully inherits Vue's powerful extensibility, readability, modularity, reusability, and encapsulation. It can also easily integrate with virtually all Vue components available on the market, such as ECharts, DataV, Element UI, Baidu Maps, AMap, Ant Design Vue, and various custom components.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

PC Design	iPad Design	Mobile Design
PC Preview	iPad Preview	Mobile Preview
View the JavaScript source code, edit code online, add functions, and integrate them with the code generated by the designer.	Template HTML Section	CSS Section: Customize the styles according to the interface design and make adjustments as needed.

Export the Vue source code and copy it directly into your project. You can access it after configuring the routing.

🏆 MyBatis Dynamic APIs

Dynamic APIs can be generated online. After saving, they automatically provide create, delete, query, export, and import operations. You can also edit and modify the dynamic APIs  Dynamic APIs

API Editing: Supports intelligent suggestions for table names and table fields.	Backend Validation of API Parameters	List API Field Display	Online API Testing

4. Feature Overview

Distinctive features compared with other form designers on the market:

1. Design all three modes together using a single form.

2. Generate a single set of code that supports previews on PC, iPad, and mobile devices.

3. Supports online editing of Vue code logic without conflicting with Vue code generated by the visual designer. You can also insert debugger statements to debug while designing.

4. Supports online CSS editing, allowing you to customize the CSS styles of forms.

5. Supports downloading Vue source code locally, which can be previewed directly without any modifications.

6. Properties, components, events, and common CSS styles can all be configured through configuration files.

7. Vue source code is generated using jQuery + jQuery Template. Different code styles, business logic, and frameworks can be generated based on different business requirements. Existing supported form projects include Element UI forms, Ant Design Vue forms, and Mini UI forms. It can also support generating App UI and Mini Program syntax code.

8. Different templates can be created for different business requirements to generate specialized business forms, such as survey forms, large-screen data visualization dashboards, workflow forms, and general-purpose CRUD forms. As long as a business scenario has a certain degree of commonality, we can create a dedicated template parser for it.

9. Supports many convenient shortcuts. For example, clicking an event can switch to the source code and edit the corresponding event method.

10. Detail components automatically support import and export after drag-and-drop configuration.

11. Adds row and column controls for more precise layout management.

Mind Map of the No-Code Development, Design, and Execution Workflow Implemented by Jiandan Cloud Visual Forms

As shown in the mind map, the visual platform mainly consists of two components: a form designer and a MyBatis syntax parsing engine. The generated code is produced using jQueryTemplate template syntax. Therefore, it supports source code generation for the element-ui, mini-ui, Ant Design, and uniapp frameworks. However, the issues highlighted in red below need to be resolved.

5. Tech Stack

Technologies Used:

Plugins such as vue2.0, element-ui, monaco, vuedraggable, jsplumb.js, jquery, and jquerytemplate.

Installation Guide

Download addresses for other Node.js versions: Enter link description

• After downloading the project for the first time, install the project dependencies:

npm install

• Local development

npm run serve

• Build

npm run build