212 lines
5.6 KiB
Markdown
212 lines
5.6 KiB
Markdown
# 前端项目交接文档
|
||
|
||
## 项目概述
|
||
|
||
### 项目名称
|
||
小智AI语音助手前端项目
|
||
|
||
### 技术栈
|
||
- **框架**: uni-app (Vue 3)
|
||
- **构建工具**: Vite 5.2.8
|
||
- **状态管理**: Pinia 2.1.7
|
||
- **国际化**: Vue-i18n 9.1.9
|
||
- **开发语言**: JavaScript/TypeScript
|
||
|
||
### 项目结构
|
||
```
|
||
webUI/
|
||
├── src/ # 源代码目录
|
||
│ ├── App.vue # 应用入口组件
|
||
│ ├── main.js # 应用入口文件
|
||
│ ├── manifest.json # 应用配置文件
|
||
│ ├── pages.json # 页面路由配置
|
||
│ ├── uni.scss # 全局样式文件
|
||
│ ├── components/ # 公共组件
|
||
│ │ ├── UserAgreement.vue # 用户协议组件
|
||
│ │ └── UserAuth.vue # 用户认证组件
|
||
│ ├── pages/ # 页面目录
|
||
│ │ ├── splash/ # 启动页
|
||
│ │ ├── index/ # 首页
|
||
│ │ ├── mine/ # 我的页面
|
||
│ │ ├── create/ # 创建页面
|
||
│ │ ├── script/ # 剧本编辑
|
||
│ │ ├── voice/ # 声音克隆
|
||
│ │ ├── agreement/ # 协议页面
|
||
│ │ ├── chat/ # 聊天页面
|
||
│ │ └── recharge/ # 充值相关
|
||
│ ├── stores/ # 状态管理
|
||
│ │ └── user.js # 用户状态
|
||
│ ├── utils/ # 工具函数
|
||
│ │ ├── api.js # API接口
|
||
│ │ ├── aiCharacters.js # AI角色配置
|
||
│ │ └── debug.js # 调试工具
|
||
│ └── static/ # 静态资源
|
||
├── dist/ # 构建输出目录
|
||
├── package.json # 项目依赖配置
|
||
├── vite.config.js # Vite配置文件
|
||
└── API接口文档.md # 后端API接口文档
|
||
```
|
||
|
||
## 核心功能模块
|
||
|
||
### 1. 用户认证模块
|
||
- **文件位置**: `src/components/UserAuth.vue`
|
||
- **功能**: 微信小程序登录、用户信息管理
|
||
- **相关API**: `/api/login/wechat`, `/api/user/info`
|
||
|
||
### 2. 首页模块
|
||
- **文件位置**: `src/pages/index/index.vue`
|
||
- **功能**: 展示剧情角色、AI声音列表
|
||
- **相关API**: `/api/home/drama`, `/api/home/voice`
|
||
|
||
### 3. 剧本管理模块
|
||
- **文件位置**: `src/pages/script/editor.vue`
|
||
- **功能**: 创建、编辑、管理用户剧本
|
||
- **相关API**: `/api/script/save`, `/api/script/list`, `/api/script/detail`
|
||
|
||
### 4. 声音克隆模块
|
||
- **文件位置**: `src/pages/voice/clone.vue`
|
||
- **功能**: 上传声音样本、声音克隆、克隆状态查询
|
||
- **相关API**: `/api/voice/upload`, `/api/voice/clone`, `/api/voice/status`
|
||
|
||
### 5. 聊天模块
|
||
- **文件位置**: `src/pages/chat/chat.vue`
|
||
- **功能**: 与AI角色进行对话交互
|
||
- **特点**: 支持实时语音交互、角色切换
|
||
|
||
### 6. 充值模块
|
||
- **文件位置**: `src/pages/recharge/`
|
||
- **功能**: 用户充值、充值历史查询
|
||
- **相关API**: 微信支付相关接口
|
||
|
||
## 开发环境配置
|
||
|
||
### 环境要求
|
||
- Node.js >= 16.0.0
|
||
- npm >= 8.0.0 或 yarn >= 1.22.0
|
||
|
||
### 安装依赖
|
||
```bash
|
||
cd webUI
|
||
npm install
|
||
# 或
|
||
yarn install
|
||
```
|
||
|
||
### 开发命令
|
||
```bash
|
||
# H5开发
|
||
npm run dev:h5
|
||
|
||
# 微信小程序开发
|
||
npm run dev:mp-weixin
|
||
|
||
# 构建H5
|
||
npm run build:h5
|
||
|
||
# 构建微信小程序
|
||
npm run build:mp-weixin
|
||
```
|
||
|
||
## 重要配置文件
|
||
|
||
### 1. pages.json
|
||
- **作用**: 配置页面路由、tabBar、全局样式等
|
||
- **关键配置**:
|
||
- 页面路由配置
|
||
- 底部导航栏配置
|
||
- 页面样式配置
|
||
|
||
### 2. manifest.json
|
||
- **作用**: 应用配置，包括小程序AppID、权限等
|
||
- **关键配置**:
|
||
- 微信小程序AppID: `wxff56c34ef9aceb62`
|
||
- 应用权限配置
|
||
- 平台特定配置
|
||
|
||
### 3. vite.config.js
|
||
- **作用**: Vite构建配置
|
||
- **当前配置**: 使用uni-app插件
|
||
|
||
## 状态管理
|
||
|
||
### Pinia Store
|
||
- **用户状态**: `src/stores/user.js`
|
||
- **功能**: 管理用户登录状态、用户信息、token等
|
||
|
||
## API接口管理
|
||
|
||
### 接口配置
|
||
- **文件位置**: `src/utils/api.js`
|
||
- **功能**: 统一管理API请求、响应拦截、错误处理
|
||
|
||
### 接口文档
|
||
- **文件位置**: `API接口文档.md`
|
||
- **内容**: 详细的后端API接口说明
|
||
|
||
## 构建和部署
|
||
|
||
### 构建输出
|
||
- **H5版本**: `dist/build/h5/`
|
||
- **微信小程序**: `dist/build/mp-weixin/`
|
||
|
||
### 部署说明
|
||
1. H5版本可直接部署到Web服务器
|
||
2. 微信小程序需要上传到微信开发者工具
|
||
|
||
## 开发注意事项
|
||
|
||
### 1. 跨平台兼容性
|
||
- 使用uni-app框架，需要注意不同平台的API差异
|
||
- 微信小程序有特殊的API调用方式
|
||
|
||
### 2. 权限配置
|
||
- 小程序需要配置相应的权限
|
||
- 录音、定位等敏感权限需要用户授权
|
||
|
||
### 3. 性能优化
|
||
- 图片资源优化
|
||
- 代码分包加载
|
||
- 缓存策略
|
||
|
||
### 4. 调试工具
|
||
- 使用`src/utils/debug.js`进行调试
|
||
- 微信开发者工具调试
|
||
- H5浏览器调试
|
||
|
||
## 常见问题
|
||
|
||
### 1. 构建问题
|
||
- 确保Node.js版本符合要求
|
||
- 检查依赖版本兼容性
|
||
- 清理缓存重新安装依赖
|
||
|
||
### 2. 微信小程序问题
|
||
- 检查AppID配置
|
||
- 确认域名白名单配置
|
||
- 检查权限配置
|
||
|
||
### 3. API接口问题
|
||
- 检查接口地址配置
|
||
- 确认请求头设置
|
||
- 检查跨域配置
|
||
|
||
## 联系方式
|
||
|
||
如有技术问题，请联系：
|
||
- 项目负责人：[待填写]
|
||
- 技术文档：参考项目根目录下的技术文档
|
||
- API文档：参考`API接口文档.md`
|
||
|
||
## 更新日志
|
||
|
||
### 最新版本功能
|
||
- 支持微信小程序登录
|
||
- 实现声音克隆功能
|
||
- 集成AI角色对话
|
||
- 支持剧本编辑管理
|
||
|
||
---
|
||
|
||
**注意**: 本文档基于当前项目状态编写，如有更新请及时同步文档内容。
|