webUI/前端交接文档.md

前端项目交接文档

项目概述

项目名称

小智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

安装依赖

cd webUI
npm install
# 或
yarn install

开发命令

# 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角色对话
• 支持剧本编辑管理

---

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