Explore the Open‑Source Madong Admin System Built with Vue 3, Vite, and TypeScript

Overview

Madong is an open‑source management system that provides a ready‑to‑use front‑end solution for medium‑to‑large projects. The front‑end is built with Vue 3, Vite and TypeScript and includes reusable components, utilities, hooks, dynamic menus, permission verification, multi‑theme configuration and button‑level permission control. The back‑end is implemented with the high‑performance PHP framework Webman .

System Requirements

PHP >= 8.1

MySQL >= 5.7

Key Features

Modern stack: Vue 3, Vite, TypeScript.

Internationalization with built‑in i18n and language switching.

Comprehensive permission scheme, including button‑level control.

Multiple themes and dark mode.

Dynamic menus that adapt to permission settings.

High‑performance mock data based on Nitro.

Rich component library covering common business needs.

Code quality tools: ESLint, Prettier, Stylelint, Publint, CSpell.

Engineering workflow: pnpm monorepo, TurboRepo, Changeset.

UI library support for Ant Design Vue, Element Plus and Naive UI.

Repository

Code repository: https://gitee.com/motion-code/MaDong

Directory Structure

. 
├── app               # Application directory
│   ├── admin         # Admin app
│   ├── dao           # DAO layer
│   ├── enum          # Enums
│   ├── event         # Events
│   ├── middlewere    # Middleware
│   ├── model         # Model layer
│   ├── quere         # Queues
│   ├── services      # Service layer
│   └── functions.php # Custom business functions
├── config            # Configuration files
│   ├── app.php
│   ├── autoload.php
│   ├── bootstrap.php
│   ├── container.php
│   ├── dependence.php
│   ├── database.php
│   ├── exception.php
│   ├── log.php
│   ├── middleware.php
│   ├── process.php
│   ├── redis.php
│   ├── route.php
│   ├── server.php
│   ├── view.php
│   ├── static.php
│   ├── translation.php
│   └── session.php
├── public            # Static assets
├── madong            # Custom extension library
├── process           # Custom processes
├── runtime           # Runtime directory (needs write permission)
├── start.php         # Service entry point
├── vendor            # Composer dependencies
└── support           # Library adapters
    ├── Request.php
    ├── Response.php
    ├── Plugin.php
    ├── helpers.php
    └── bootstrap.php

System Architecture

The back‑end follows a layered architecture consisting of Controller, Service, Validation, DAO and Model layers.

Controller Layer

Parse incoming HTTP requests.

Invoke appropriate service methods.

Return JSON responses to the client.

Handle routing and request parameters.

Service Layer

Implement core business logic.

Interact with the DAO layer for data access.

Manage transactions to ensure data consistency.

Expose APIs used by controllers.

Validation Layer

Define validation rules for input data.

Check request parameters against expected formats.

Return validation errors to prevent invalid data from reaching business logic.

DAO Layer

Encapsulate CRUD operations.

Provide data persistence mechanisms.

Manage database connections and resources.

Model Layer

Define data structures such as User, Order, etc.

Map database records to domain objects.

May contain domain‑specific logic related to the data.