English
Mobile Development Documentation
Introduction
zhontai-ui-admin-app is a mobile admin application built with Vue 3 + Vitesse UniApp + UniApp + Vite + wot-ui + alova + Pinia + UnoCSS.
This project adopts a modern frontend tech stack, supporting multi-platform deployment (H5, Mini Program, App, etc.), providing complete backend management functionality.
Purchase App source code to download source code.If you have already purchased the App source code,
Follow Service Account
Search for the service account 「中台小雪」 on WeChat. After following, click 【H5演示】 or 【小程序】 in the bottom menu to experience directly.
Scan to Experience
WeChat Mini Program
Browser H5
Tech Stack
| Technology | Version | Description |
|---|---|---|
| Vue | ^3.4.38 | Progressive JavaScript Framework |
| Vite | ^5.2.8 | Next Generation Frontend Build Tool |
| UniApp | 3.0.0-4080520251106001 | Cross-platform Development Framework |
| wot-ui | ^2.2.0 | Mobile UI Component Library |
| alova | 3.3.4 | Lightweight Request Strategy Library |
| Pinia | ^2.3.1 | Vue State Management Library |
| UnoCSS | 66.0.0 | Atomic CSS Engine |
| TypeScript | ~5.5.4 | JavaScript Superset |
| vue-i18n | 9.1.9 | Internationalization Solution |
Features
- 📱 Multi-platform: Supports H5, WeChat Mini Program, Alipay Mini Program, App, and more
- 🎨 Rich Components: Based on wot-ui for comprehensive mobile components
- 🔐 Complete Authentication: Full login authentication and route guard mechanism
- 🌏 Internationalization: Support for multi-language switching
- 📦 Auto Import: Auto-import of APIs and components for improved development efficiency
- 🎯 Type Safety: Complete TypeScript type definitions
- 🚀 Build Optimization: Vite-based and bundle-optimized builds
Feature Introduction
- Dynamic Menu Workspace (recursive tree construction + collapsible panel grid)
- Message Center (paginated query + multi-dimensional filtering + unread badge + message details + unread message count)
- Personal Center System (My Homepage / Personal Settings / Personal Info / Password Change)
- Complete Package Management CRUD (paginated list + filtering + form validation)
- Multi-project Swagger API Auto-generation (AdminApis / DevApis / DemoApis)
- Dynamic Chained API Calls (
AdminApis.auth.login()) - Seamless Token Refresh (smart threshold judgment + anti-infinite loop + failure degradation)
- Recursive Query Component Implementation (Message Category)
- Dual-mode Navigation Bar Wrapper (Main Interface Navbar / Popup Interface PopupNavbar)
- Full Dark Mode Support
- Internationalization (i18n) Chinese/English Switching
- Button-level Permission Control (
useAuthpermission control Hook) - Dynamic Route Generation + Route Guards
Documentation Index
- Getting Started - Environment setup and project startup
- Project Structure - Directory structure and file descriptions
- Configuration - Project configuration details