Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-26 00:53:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

update:增加移动版智控台的说明

Browse Source
This commit is contained in:
hrz
2025-08-16 11:37:23 +08:00
parent 3057d35111
commit 52c4e65686
3 changed files with 141 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/README_en.md
+66 -1
View File
@@ -8,6 +8,7 @@
* [3.1. `xiaozhi-server` (Core AI Engine - Python Implementation)](#31-xiaozhi-server-core-ai-engine---python-implementation)
* [3.2. `manager-api` (Management Backend - Java Spring Boot Implementation)](#32-manager-api-management-backend---java-spring-boot-implementation)
* [3.3. `manager-web` (Web Management Frontend - Vue.js Implementation)](#33-manager-web-web-management-frontend---vuejs-implementation)
* [3.4. `manager-mobile` (Mobile Management Console - uni-app Implementation)](#34-manager-mobile-mobile-management-console---uniapp-implementation)
4. [Data Flow and Interaction Mechanisms](#4-data-flow-and-interaction-mechanisms)
5. [Key Features Summary](#5-key-features-summary)
6. [Deployment and Configuration Overview](#6-deployment-and-configuration-overview)
@@ -72,6 +73,7 @@ xiaozhi-esp32-server
├─ xiaozhi-server Port 8000 Python development Responsible for ESP32 communication
├─ manager-web Port 8001 Node.js+Vue development Responsible for providing web interface for console
├─ manager-api Port 8002 Java development Responsible for providing console API
└─ manager-mobile Cross-platform mobile application uni-app+Vue3 development Responsible for providing mobile console management
```
---
@@ -190,7 +192,70 @@ The `manager-web` is a Single Page Application (SPA) providing the administrativ
4. **State Management (`src/store/index.js`):** Vuex manages global state (user info, device lists, etc.) via state, getters, mutations, and actions (often involving API calls).
5. **API Communication (`src/apis/`):** Modularized API service files make asynchronous calls to `manager-api`.
6. **Build Process & PWA Features:** Vue CLI (Webpack) bundles assets. Workbox enables PWA features like caching.
7. **Environment Configuration (`.env` files):** Manages settings like the `manager-api` base URL for different environments.
7. **Environment Configuration (`.env` files):**
* The `.env` (and `.env.development`, `.env.production`, etc.) files in the project root directory are used to define environment variables. These variables (such as `VUE_APP_API_BASE_URL` to specify the base URL of `manager-api`) can be accessed in the application code through `process.env.VUE_APP_XXX`, allowing configuration of different parameters for different build environments (development, testing, production).
`manager-web` constructs a powerful, maintainable, and user-friendly management interface through the comprehensive application of these technologies, providing solid frontend support for the configuration and monitoring of the `xiaozhi-esp32-server` system.
### 3.4. `manager-mobile` (Mobile Management Console - uni-app Implementation)
The `manager-mobile` component is a cross-platform mobile management application based on uni-app v3 + Vue 3 + Vite, supporting App (Android & iOS) and WeChat Mini Program. It provides system administrators with a mobile management interface, making management operations more convenient.
* **Core Objectives:**
* Provide a convenient management interface on mobile devices, similar in functionality to manager-web but optimized for mobile platforms.
* Support core functions such as user login, device management, and AI service configuration.
* Cross-platform adaptation, allowing a single codebase to run on iOS, Android, and WeChat Mini Programs.
* Provide mobile users with a smooth and efficient management experience.
* **Platform Compatibility:**
| H5 | iOS | Android | WeChat Mini Program |
| -- | --- | ------- | ------------------ |
| × | √ | √ | √ |
* **Core Technologies:**
* **uni-app v3:** A framework for developing all frontend applications using Vue.js, supporting iOS, Android, H5, and various mini-programs.
* **Vue 3:** A progressive framework for building user interfaces, providing better performance and new features.
* **Vite:** The next generation frontend development and build tool, offering an extremely fast development experience.
* **pnpm:** A fast, disk space-efficient package manager.
* **alova:** A lightweight, flexible request strategy library, paired with @alova/adapter-uniapp to adapt to the uni-app environment.
* **pinia:** State management library for Vue, replacing Vuex, providing a simpler API and better TypeScript support.
* **UnoCSS:** A high-performance and extremely flexible instant atomic CSS engine.
* **TypeScript:** Provides a type-safe development experience.
* **Key Implementation Details:**
1. **Cross-Platform Architecture:**
* Based on the uni-app framework, achieving the goal of "write once, run anywhere," significantly reducing development and maintenance costs.
* Handling platform-specific code through conditional compilation to address the characteristics and limitations of different platforms.
2. **Project Structure:**
* **`src/App.vue`:** The root component of the application, defining global styles and configurations.
* **`src/main.ts`:** The entry file of the application, responsible for initializing the Vue instance, registering plugins, and setting up route interceptors.
* **`src/pages/`:** Stores application page components, such as login pages, device management pages, etc.
* **`src/layouts/`:** Defines application layout components, such as default layouts, layouts with tabbar, etc.
* **`src/api/`:** Encapsulates communication logic with backend APIs.
* **`src/store/`:** Uses pinia for state management.
* **`src/components/`:** Stores reusable components.
* **`src/utils/`:** Provides common utility functions.
3. **Network Requests:**
* Implements network requests based on alova + @alova/adapter-uniapp, unified handling of request headers, authentication, errors, etc.
* Request addresses and environment configurations are managed through .env files, supporting switching between different environments.
4. **Routing and Authentication:**
* Uses uni-app's routing system, combined with route interceptors to implement page login verification and permission control.
* When unlogged users access pages requiring authentication, they are redirected to the login page.
5. **State Management:**
* Uses pinia to manage application state, such as user information, device lists, etc.
* Implements persistent storage of state through the pinia-plugin-persistedstate plugin.
6. **Build and Release:**
* Supports multiple build commands, such as building WeChat Mini Programs, Android, and iOS Apps.
* Uses HBuilderX for cloud packaging of Apps, simplifying the packaging process.
`manager-mobile` provides users with a fully functional, smooth mobile management tool through the application of these technologies, allowing administrators to perform system management and configuration anytime, anywhere.
---