feat:交接

2025-11-04 19:25:16 +08:00
parent 4b8498203d
commit d45e556c20
20 changed files with 4441 additions and 677 deletions
--- a/前端交接文档.md
+++ b/前端交接文档.md
@@ -0,0 +1,211 @@
+# 前端项目交接文档
+
+## 项目概述
+
+### 项目名称
+小智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角色对话
+- 支持剧本编辑管理
+
+---
+
+**注意**: 本文档基于当前项目状态编写，如有更新请及时同步文档内容。