# 前端项目交接文档

## 项目概述

### 项目名称
小智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角色对话
- 支持剧本编辑管理

---

**注意**: 本文档基于当前项目状态编写，如有更新请及时同步文档内容。