mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 07:03:53 +08:00
欣南科技
@@ -8,6 +8,7 @@
|
||||
* [3.1. `xiaozhi-server` (核心AI引擎 - Python实现)](#31-xiaozhi-server-核心ai引擎---python实现)
|
||||
* [3.2. `manager-api` (管理后端 - Java Spring Boot实现)](#32-manager-api-管理后端---java-spring-boot实现)
|
||||
* [3.3. `manager-web` (Web管理前端 - Vue.js实现)](#33-manager-web-web管理前端---vuejs实现)
|
||||
* [3.4. `manager-mobile` (移动管理端 - uni-app+Vue3实现)](#34-manager-mobile-移动管理端---uni-appvue3实现)
|
||||
4. [数据流与交互机制](#4-数据流与交互机制)
|
||||
5. [核心功能概要](#5-核心功能概要)
|
||||
6. [部署与配置概述](#6-部署与配置概述)
|
||||
@@ -58,6 +59,14 @@
|
||||
* （潜在功能）监控系统运行状态、查看日志、进行故障排查等。
|
||||
* 与 `manager-api` 提供的所有后端管理功能进行全面的交互。
|
||||
|
||||
5. **`manager-mobile` (智控台移动版 - uni-app实现):**
|
||||
这是一个基于uni-app v3 + Vue 3 + Vite的跨端移动管理端，支持App（Android & iOS）和微信小程序。其主要能力包括：
|
||||
* 提供移动设备上的便捷管理界面，与manager-web功能类似但针对移动端进行了优化。
|
||||
* 支持用户登录、设备管理、AI服务配置等核心功能。
|
||||
* 跨平台适配，一套代码可同时运行在iOS、Android和微信小程序上。
|
||||
* 基于alova + @alova/adapter-uniapp实现网络请求，与manager-api无缝集成。
|
||||
* 使用pinia进行状态管理，确保数据一致性。
|
||||
|
||||
**高层交互流程概述:**
|
||||
|
||||
* **语音交互主线:** **ESP32设备**捕捉到用户语音后，通过**WebSocket**将音频数据实时传输给**`xiaozhi-server`**。`xiaozhi-server`完成一系列AI处理（VAD、ASR、LLM交互、TTS）后，再通过WebSocket将合成的语音回复发送回ESP32设备进行播放。所有与语音直接相关的实时交互均在此链路完成。
|
||||
@@ -71,6 +80,7 @@ xiaozhi-esp32-server
|
||||
├─ xiaozhi-server 8000 端口 Python语言开发 负责与esp32通信
|
||||
├─ manager-web 8001 端口 Node.js+Vue开发 负责提供控制台的web界面
|
||||
├─ manager-api 8002 端口 Java语言开发 负责提供控制台的api
|
||||
└─ manager-mobile 跨平台移动应用 uni-app+Vue3开发 负责提供移动版智控台管理
|
||||
```
|
||||
|
||||
---
|
||||
@@ -294,6 +304,68 @@ xiaozhi-esp32-server
|
||||
|
||||
---
|
||||
|
||||
### 3.4. `manager-mobile` (智控台移动版 - uni-app实现)
|
||||
|
||||
`manager-mobile` 组件是一个基于uni-app v3 + Vue 3 + Vite的跨端移动管理端，支持App（Android & iOS）和微信小程序。它为系统管理员提供了移动端的管理界面，使得管理操作更加便捷。
|
||||
|
||||
* **核心目标:**
|
||||
* 提供移动设备上的便捷管理界面，与manager-web功能类似但针对移动端进行了优化。
|
||||
* 支持用户登录、设备管理、AI服务配置等核心功能。
|
||||
* 跨平台适配，一套代码可同时运行在iOS、Android和微信小程序上。
|
||||
* 为移动用户提供流畅、高效的管理体验。
|
||||
|
||||
* **平台兼容性:**
|
||||
|
||||
| H5 | iOS | Android | 微信小程序 |
|
||||
| -- | --- | ------- | ---------- |
|
||||
| √ | √ | √ | √ |
|
||||
|
||||
* **核心技术栈:**
|
||||
* **uni-app v3:** 一个使用Vue.js开发所有前端应用的框架，支持iOS、Android、H5、以及各种小程序。
|
||||
* **Vue 3:** 用于构建用户界面的渐进式框架，提供了更好的性能和新特性。
|
||||
* **Vite:** 下一代前端开发与构建工具，提供极速的开发体验。
|
||||
* **pnpm:** 快速、节省磁盘空间的包管理器。
|
||||
* **alova:** 轻量级、灵活的请求策略库，搭配@alova/adapter-uniapp适配uni-app环境。
|
||||
* **pinia:** Vue的状态管理库，替代Vuex，提供更简洁的API和更好的TypeScript支持。
|
||||
* **UnoCSS:** 具有高性能且极具灵活性的即时原子化CSS引擎。
|
||||
* **TypeScript:** 提供类型安全的开发体验。
|
||||
|
||||
* **关键实现细节:**
|
||||
|
||||
1. **跨平台架构:**
|
||||
* 基于uni-app框架，实现了一套代码多端运行的目标，大幅减少了开发和维护成本。
|
||||
* 针对不同平台的特性和限制，通过条件编译进行平台特定的代码处理。
|
||||
|
||||
2. **项目结构:**
|
||||
* **`src/App.vue`:** 应用的根组件，定义了全局的样式和配置。
|
||||
* **`src/main.ts`:** 应用的入口文件，负责初始化Vue实例、注册插件和路由拦截器。
|
||||
* **`src/pages/`:** 存放应用的页面组件，如登录页、设备管理页等。
|
||||
* **`src/layouts/`:** 定义应用的布局组件，如默认布局、带tabbar的布局等。
|
||||
* **`src/api/`:** 封装与后端API的通信逻辑。
|
||||
* **`src/store/`:** 使用pinia进行状态管理。
|
||||
* **`src/components/`:** 存放可复用的组件。
|
||||
* **`src/utils/`:** 提供通用的工具函数。
|
||||
|
||||
3. **网络请求:**
|
||||
* 基于alova + @alova/adapter-uniapp实现网络请求，统一处理请求头、认证、错误等。
|
||||
* 请求地址和环境配置通过.env文件管理，支持不同环境的切换。
|
||||
|
||||
4. **路由与鉴权:**
|
||||
* 使用uni-app的路由系统，结合路由拦截器实现页面的登录验证和权限控制。
|
||||
* 未登录用户访问需要认证的页面时，会被重定向到登录页。
|
||||
|
||||
5. **状态管理:**
|
||||
* 使用pinia管理应用状态，如用户信息、设备列表等。
|
||||
* 通过pinia-plugin-persistedstate插件实现状态的持久化存储。
|
||||
|
||||
6. **构建与发布:**
|
||||
* 支持多种构建命令，如构建微信小程序、Android和iOS App等。
|
||||
* 使用HBuilderX进行App的云打包，简化了打包流程。
|
||||
|
||||
`manager-mobile` 通过这些技术的应用，为用户提供了一个功能完备、体验流畅的移动端管理工具，使得管理员可以随时随地进行系统管理和配置。
|
||||
|
||||
---
|
||||
|
||||
## 4. 数据流与交互机制
|
||||
|
||||
`xiaozhi-esp32-server` 系统通过各组件间定义清晰的数据流和交互协议来协同工作。主要的通信方式依赖于针对实时交互优化的WebSocket协议和适用于客户端-服务器请求的RESTful API。
|
||||
|
||||
+66
-1
@@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
|
||||
### 平台兼容性
|
||||
|
||||
| H5 | iOS | Android | 微信小程序 | 字节小程序 | 快手小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 |
|
||||
| -- | --- | ------- | ---------- | ---------- | ---------- | ------------ | ---------- | ---------- |
|
||||
| × | √ | √ | √ | × | × | × | × | × |
|
||||
| H5 | iOS | Android | 微信小程序 |
|
||||
| -- | --- | ------- | ---------- |
|
||||
| √ | √ | √ | √ |
|
||||
|
||||
提示：不同 UI 组件在不同平台的适配度略有差异，请以对应组件库文档为准。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user