1. Project Overview

AK-Design Visual Low-Code Rapid Development Platform

AK-Design is a pure frontend, drag-and-drop, visual low-code data visualization design and development platform. Its main features include form design, list page design, workflow design, data visualization dashboard design, and data statistics design.

• Uses Elemnet-Plus, a desktop component library based on Vue 3.x. It is widely used and easy to extend.

• Through visual operations, you can quickly and easily create pages for form design, list page design, workflow management, data visualization dashboards, data statistics, and more.

• Provides a powerful collection of components suitable for various complex scenarios.

• Clean code that is easy to customize and extend.

2. Open Source License

The author has not yet specified a mainstream open-source license.

3. Screenshots

4. Feature Overview

Form design

A visual drag-and-drop form design editor that generates forms graphically. It allows you to build forms without writing code and add various validation rules. The designer is easy to use and can quickly generate attractive forms for applications, improving development efficiency.

Main Features of the Designer:

• Provides a powerful and extensive collection of form components.

• Allows form elements to be added using drag-and-drop.

• Allows form elements to be reordered using the mouse.

• Supports predefined validation rules in the designer.

• Can generate complete form views.

• Can generate form data.

• Can automatically generate UI based on form data.

• Can quickly generate forms based on form templates.

• Supports complex interaction controls.

• Supports the development of custom components.

• Supports API Data Processing

...

List Design

The List Designer is a tool that helps you quickly build data display interfaces, making list creation easier and improving work efficiency. Simply drag and drop elements, adjust column order, edit columns, configure styles, and generate the data tables you need. It can also retrieve API data from designed forms.

The List Designer provides a wide range of configuration options, allowing you to drag and drop columns, set column names and widths, and customize column styles. It also offers extensive customization capabilities to meet most of our requirements.

Workflow Design

Data Visualization Dashboard Design

Provides a simple and easy-to-use drag-and-drop solution for designing data visualization dashboards. The editor offers a rich component library and various style configuration options, helping users quickly build and customize their own data visualization dashboards.

Includes chart components, table components, progress bar components, map components, carousel components, background and border components, and commonly used utility tools. Users can select and drag components onto the canvas according to their needs.

• Basic editor page functions, including editing, previewing, exporting, saving, and generating JSON scripts

• Layer functions: show, hide, duplicate, and lock

• Component functions: resize, rotate, drag, duplicate, group, ungroup, alignment, delete, and position adjustment

• Supports user-defined components

• Supports API data and static mock data

• Supports position adjustment using the keyboard

Data Statistics Design

5. Tech Stack

Directory Structure

public
 ├─mock Mock Data\nsrc\n ├─api Data Request Interfaces\n ├─docs User Documentation\n └─views Pages\n   ├─design Main Form Design Components\n     ├─components Shared Components\n     ├─list List Page Design\n     ├─screen Dashboard Design\n     ├─datasource Data Source Design\n     ├─flow Workflow Design\n     └─form Form Design\n   ├─system Basic System Framework Pages, Including Vue File Export Examples\n   └─task Workflow Tasks

Start the Project

# Clone the project
Visit Yifei Open Source: https://code.exmay.com/ Download

# Install dependencies
pnpm install

# Run the Project
pnpm dev

# Use JSON Mock Data (Using Node.js to Mock API Interfaces Is Recommended; See Start Node.js Mock API for Details)

By default, the GitHub example and localhost use JSON mock data. When using Node.js APIs, you can access the project using an http://192.168.xx.xx format
 Or simply comment out the/src/api/index.ts about27line of code

# Build the Project
pnpm build

Start the Node.js Mock API

1. Import /src/nodejs/akform.sql into MySQL.\n\n2. Modify the database connection username, password, and related settings in /src/nodejs/db.js.

# Enter the nodejs Directory

cd nodejs

# Install dependencies

pnpm install

# Run the Project

pnpm dev

Development environment