# AIGC聊天绘画系统
**Repository Path**: wmkt/chataigc
## Basic Information
- **Project Name**: AIGC聊天绘画系统
- **Description**: AIGC聊天绘画系统「PHP源码版」，基于前后端分离架构以及Vue3、uni-app、ThinkPHP6.x、PHP8.0技术栈开发，包含PC端、H5端、小程序端、APP端。ChatAI聚合对接国内外知名主流大语言模型接口及中转平台，如ChatGLM、讯飞星火、文心一言、GPT3.5、GPT4.0、API2D、知数云。并且聚合对接MJ绘画、SD绘画、意间AI等多种绘画通道，实现了AI对
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.cnai.art/
- **GVP Project**: No
## Statistics
- **Stars**: 17
- **Forks**: 11
- **Created**: 2024-09-28
- **Last Updated**: 2025-09-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: aigc, chat, chatGPT, ai对话, AI绘画
## README
艺创AI-聊天绘画系统「PHP源码版」
🚀快速开发、🛠️ 一键生成代码、✅后台多端自适应、📱手机端、🖥️PC（电脑）端前台
## 👀体验后台
### 管理后台
**地址：
账号：admin 密码：123456**
### 微信小程序前台
### 手机端网页前台
https://cnai.art/mobile
### PC（电脑）端网页前台
https://cnai.art/
### 开发文档
地址：https://doc.cnai.art/
### 艺创AI官网
地址：https://urlnet.cn/
## 🔥🔥系统为商业授权后才可使用
## 👨💻简介
艺创AI-聊天绘画系统「PHP源码版」，基于前后端分离架构以及Vue3、uni-app、ThinkPHP6.x、PHP8.0技术栈开发，包含PC端、H5端、小程序端、APP端。ChatAI聚合对接国内外知名主流大语言模型接口及中转平台，如ChatGLM、讯飞星火、文心一言、GPT3.5、GPT4.0、API2D、知数云。并且聚合对接MJ绘画、SD绘画、意间AI等多种绘画通道，实现了AI对话+AI绘画的融合使用。系统功能包括：AI智能对话、AI创作模型、AI绘画、分销推广、会员套餐、充值套餐、卡密兑换、模型计费、会员回流优惠券等丰富的营销功能。部分功能开发中，欢迎前往体验~。
### 🧰场景介绍
1.已经搭建好前后端分离的底层，包含程序安装、登录、登出、工作台、菜单权限控制、角色、管理员、部门管理、岗位管理、素材管理、网站设置、图库管理等基础功能，无需重复造轮子。更有开发者工具功能，一键生成代码，大大节省开发时间。
2.可视化系统程序安装界面，可自定义安装数据，开发者可快速扩展发行自己的软件产品。
3.定位为通用的软件系统管理后台，方便开发者快速开发软件系统，文档清晰、代码易懂、简单易用。
4.集成通用的微信支付（API3）、微信小程序公众号登录、阿里云、腾讯云短信，阿里云OSS、腾讯云COS、七牛云OSS等通用模块。
### 🐙后端架构方面
1.服务端使用PHP8.0开发，性能有突破性的提升。
2.使用最新ThinkPHP6框架，目前国内最流行的PHP框架，高性能、简单易用、文档齐全、支持composer快速安装组件、支持Redis、支持PSR多种规范等。
### 🐹前端架构方面
#### ✍后台
1.使用最流性的前后端分离方案typescript、vue3、vite开发，保持了代码的简洁、一致和规范。
2.后台界面使用element-plus UI框架，简单精美的后台界面，丰富的组件库，方便快速开发，满足各种后台交互。
#### 👛手机前台
手机端uniapp前台，可以编译成手机H5网页、微信小程序、安卓App，苹果App等客户端。
#### 🌍PC端前台
PC端前台使用Nuxt.js，支持服务器端渲染(SSR)，对SEO友好。
### 🛠️ 代码生成器
一键生成前后端业务代码，大大提示开发效率。
### 🖥️界面预览
### 📱手机端前台界面
# 艺创AI-聊天绘画系统「PHP源码版」- UniApp端详细文档
## 项目概述
艺创AI是一款基于UniApp开发的跨平台AI聊天绘画系统，支持微信小程序、H5、APP等多端部署。系统集成了AI聊天对话、AI绘画创作、用户管理、支付系统、任务中心等完整功能模块。
## 技术架构
### 核心技术栈
- **前端框架**: UniApp (Vue3 + TypeScript)
- **状态管理**: Pinia
- **路由管理**: uniapp-router-next
- **UI组件库**: uView Plus (vk-uview-ui)
- **样式方案**: TailwindCSS + SCSS
- **构建工具**: Vite
- **代码规范**: ESLint + Prettier
### 平台支持
- ✅ 微信小程序 (mp-weixin)
- ✅ H5网页 (h5)
- ✅ APP (Android/iOS)
- ✅ 支付宝小程序 (mp-alipay)
- ✅ 百度小程序 (mp-baidu)
- ✅ 抖音小程序 (mp-toutiao)
- ✅ QQ小程序 (mp-qq)
## 项目结构
```
src/
├── api/ # API接口封装
│ ├── account.ts # 账户相关接口
│ ├── app.ts # 应用配置接口
│ ├── chat.ts # 聊天相关接口
│ ├── drawing.ts # AI绘画接口
│ ├── member.ts # 会员相关接口
│ ├── news.ts # 资讯接口
│ ├── pay.ts # 支付接口
│ ├── promotion.ts # 推广接口
│ ├── qrcode.ts # 二维码接口
│ ├── recharge.ts # 充值接口
│ ├── redeem_code.ts # 兑换码接口
│ ├── shop.ts # 商城接口
│ ├── square.ts # 广场接口
│ ├── task.ts # 任务接口
│ └── user.ts # 用户接口
├── components/ # 公共组件
│ ├── agreement/ # 协议组件
│ ├── audio-play/ # 音频播放组件
│ ├── avatar-upload/ # 头像上传组件
│ ├── chat-plugins/ # 聊天插件组件
│ ├── chat-record-item/ # 聊天记录项组件
│ ├── chat-scroll-view/ # 聊天滚动视图
│ ├── dialog-poster/ # 海报对话框组件
│ ├── dragon-button/ # 龙形按钮组件
│ ├── drop-down/ # 下拉菜单组件
│ ├── file-upload/ # 文件上传组件
│ ├── floating-menu/ # 浮动菜单组件
│ ├── guided-popup/ # 引导弹窗组件
│ ├── l-textarea/ # 增强文本域组件
│ ├── loading/ # 加载组件
│ ├── model-picker/ # 模型选择器组件
│ ├── network-switch/ # 网络切换组件
│ ├── notice-popup/ # 通知弹窗组件
│ ├── page-app/ # 应用页面组件
│ ├── page-status/ # 页面状态组件
│ ├── payment/ # 支付组件
│ ├── price/ # 价格显示组件
│ ├── recorder/ # 录音组件
│ ├── tabbar/ # 标签栏组件
│ ├── ua-markdown/ # Markdown渲染组件
│ └── widgets/ # 小部件组件
├── config/ # 配置文件
│ └── index.ts # 应用配置
├── enums/ # 枚举定义
│ ├── agreementEnums.ts # 协议枚举
│ ├── appEnums.ts # 应用枚举
│ ├── constantEnums.ts # 常量枚举
│ └── requestEnums.ts # 请求枚举
├── hooks/ # 自定义Hooks
│ ├── useAudio.ts # 音频Hook
│ ├── useAudioPlay.ts # 音频播放Hook
│ ├── useCaptchaEffect.ts # 验证码Hook
│ ├── useCopy.ts # 复制Hook
│ ├── useLockFn.ts # 函数锁定Hook
│ ├── usePolling.ts # 轮询Hook
│ ├── useRecorder.ts # 录音Hook
│ └── useShareMessage.ts # 分享Hook
├── lib/ # 第三方库
│ ├── fft.js # 音频处理库
│ └── html2canvas.esm.js # HTML转图片库
├── pages/ # 主包页面
│ ├── ai_creation/ # AI创作页面
│ ├── app/ # 应用页面
│ ├── empty/ # 空页面
│ ├── index/ # 首页
│ ├── login/ # 登录页面
│ ├── pc_login/ # PC登录页面
│ ├── skills/ # 技能大全页面
│ ├── user/ # 用户中心页面
│ └── webview/ # 网页视图页面
├── packages/ # 分包页面
│ └── pages/
│ ├── 404/ # 404页面
│ ├── agreement/ # 协议页面
│ ├── apply/ # 申请页面
│ ├── article_detail/ # 文章详情页面
│ ├── article_list/ # 文章列表页面
│ ├── as_us/ # 关于我们页面
│ ├── cancelaccount/ # 注销账户页面
│ ├── change_password/ # 修改密码页面
│ ├── chat/ # 聊天页面
│ ├── collection/ # 收藏页面
│ ├── create/ # 创作页面
│ ├── create_history/ # 创作历史页面
│ ├── customer_service/ # 客服页面
│ ├── distribution_order/ # 分销订单页面
│ ├── drawing/ # AI绘图页面
│ ├── earnings_detail/ # 收益详情页面
│ ├── enlarge_user/ # 扩大用户页面
│ ├── feedback/ # 反馈页面
│ ├── follow_official/ # 关注公众号页面
│ ├── forget_pwd/ # 忘记密码页面
│ ├── invite_poster/ # 邀请海报页面
│ ├── mind_map/ # 思维导图页面
│ ├── open_vip/ # 开通VIP页面
│ ├── promotion_center/ # 推广中心页面
│ ├── qrcode/ # 二维码页面
│ ├── recharge/ # 充值页面
│ ├── recharge_record/ # 充值记录页面
│ ├── redeem_code/ # 兑换码页面
│ ├── register/ # 注册页面
│ ├── square/ # 绘画广场页面
│ ├── task_center/ # 任务中心页面
│ ├── team_fans/ # 团队粉丝页面
│ ├── user_set/ # 用户设置页面
│ ├── withdraw/ # 提现页面
│ └── withdraw_record/ # 提现记录页面
├── plugins/ # 插件配置
│ ├── index.ts # 插件入口
│ └── modules/ # 插件模块
├── router/ # 路由配置
│ └── index.ts # 路由入口
├── static/ # 静态资源
│ └── images/ # 图片资源
├── stores/ # 状态管理
│ ├── androidPermissions.ts # Android权限状态
│ ├── app.ts # 应用状态
│ ├── navigationBarTitle.ts # 导航栏标题状态
│ ├── theme.ts # 主题状态
│ └── user.ts # 用户状态
├── styles/ # 样式文件
│ ├── index.scss # 主样式文件
│ ├── public.scss # 公共样式
│ ├── tailwind.css # Tailwind样式
│ └── var.scss # 样式变量
├── utils/ # 工具函数
│ ├── auth.ts # 认证工具
│ ├── cache.ts # 缓存工具
│ ├── client.ts # 客户端工具
│ ├── date.ts # 日期工具
│ ├── device/ # 设备相关工具
│ ├── download.ts # 下载工具
│ ├── env.ts # 环境工具
│ ├── file.ts # 文件工具
│ ├── html2canvas.ts # HTML转图片工具
│ ├── imgPath.js # 图片路径工具
│ ├── middleware.ts # 中间件工具
│ ├── pay/ # 支付相关工具
│ ├── request/ # 请求封装
│ ├── theme.ts # 主题工具
│ ├── util.ts # 通用工具
│ ├── validate.ts # 验证工具
│ └── wechat.ts # 微信相关工具
└── uni_modules/ # UniApp模块
├── lime-painter/ # 绘画组件
├── mp-html/ # HTML渲染组件
└── vk-uview-ui/ # uView UI组件库
```
## 功能模块详解
### 1. AI聊天系统
#### 核心功能
- **智能对话**: 支持多种AI模型的智能对话
- **上下文记忆**: 支持对话上下文保持
- **语音输入**: 支持语音转文字输入
- **语音播报**: 支持AI回复语音播报
- **收藏管理**: 支持对话记录收藏
- **分类管理**: 支持对话分类管理
#### 技术实现
- 使用EventStream实现流式响应
- 集成Web Speech API实现语音识别
- 支持Markdown格式渲染
- 支持代码高亮显示
#### 主要API接口
```typescript
// 聊天相关接口
- chatSendText: 发送文本消息
- questionChat: 问题对话
- getChatRecord: 获取聊天记录
- cleanChatContext: 清空上下文
- cleanChatRecord: 清空会话
- collectChatRecord: 收藏对话
```
### 2. AI绘画系统
#### 核心功能
- **文生图**: 根据文字描述生成图片
- **图生图**: 基于参考图生成新图片
- **图片放大**: 支持图片高清放大
- **图片变体**: 生成图片的变体版本
- **风格选择**: 支持多种绘画风格
- **模型选择**: 支持多种AI绘画模型
#### 支持的绘画引擎
- **DALL-E 3**: OpenAI最新绘画模型
- **Stable Diffusion**: 开源绘画模型
- **意间绘画**: 中文优化绘画引擎
- **Midjourney**: 高质量绘画模型
#### 主要API接口
```typescript
// 绘画相关接口
- drawing: 生成图片
- drawingDetail: 获取绘画详情
- drawingRecord: 获取绘画记录
- drawingDelete: 删除绘画记录
- keywordPromptTranslate: 关键词翻译
```
### 3. 用户系统
#### 核心功能
- **多端登录**: 支持微信、手机号、邮箱登录
- **用户信息**: 完整的用户资料管理
- **会员系统**: VIP会员等级管理
- **账户余额**: 余额充值与消费记录
- **邀请机制**: 邀请好友获得奖励
- **第三方绑定**: 支持微信、支付宝绑定
#### 主要API接口
```typescript
// 用户相关接口
- getUserInfo: 获取用户信息
- userEdit: 编辑用户信息
- userBindEmail: 绑定邮箱
- userBindMobile: 绑定手机
- accountLog: 余额明细
```
### 4. 支付系统
#### 支持的支付方式
- **微信支付**: 微信小程序、H5支付
- **支付宝支付**: APP、H5支付
- **余额支付**: 系统内余额支付
- **兑换码**: 激活码兑换会员
#### 主要功能
- **套餐管理**: 多种会员套餐选择
- **订单管理**: 完整的订单流程
- **支付回调**: 安全的支付结果处理
- **退款机制**: 支持订单退款
### 5. 任务中心
#### 任务类型
- **每日签到**: 连续签到获得奖励
- **邀请好友**: 邀请新用户获得奖励
- **首次充值**: 首次充值额外奖励
- **完善信息**: 完善个人资料获得奖励
- **分享应用**: 分享应用获得奖励
#### 奖励机制
- **积分奖励**: 完成任务获得积分
- **余额奖励**: 直接获得余额
- **会员时长**: 获得VIP会员时长
- **绘画次数**: 获得免费绘画次数
### 6. 推广系统
#### 推广功能
- **邀请海报**: 自动生成推广海报
- **邀请码**: 个人专属邀请码
- **推广统计**: 实时推广数据统计
- **分佣机制**: 多级分佣系统
- **提现功能**: 推广收益提现
## 配置系统
### 环境配置
#### 开发环境 (.env.development)
```bash
# 基础配置
VITE_APP_BASE_URL=http://your-domain.com
VITE_APP_NAME=艺创AI
```
#### 生产环境 (.env.production)
```bash
# 基础配置
VITE_APP_BASE_URL=https://your-domain.com
VITE_APP_NAME=艺创AI
```
### 应用配置 (src/config/index.ts)
```typescript
const config = {
version: "4.5.3", // 版本号
baseUrl: "https://api.xxx.com/", // API域名
urlPrefix: "api", // API前缀
timeout: 30000, // 请求超时时间(30秒)
}
```
### 应用配置 (src/manifest.json)
- **应用信息**: 名称、描述、版本号
- **平台配置**: 微信小程序、APP、H5等
- **权限配置**: 相机、麦克风、存储等权限
- **支付配置**: 微信、支付宝支付配置
- **分享配置**: 微信分享配置
## 开发规范
### 代码规范
- **TypeScript**: 严格类型检查
- **ESLint**: 代码质量检查
- **Prettier**: 代码格式化
- **命名规范**: 统一使用小写+连字符命名
### 文件命名规范
- **页面文件**: `xxx.vue`
- **组件文件**: `xxx/xxx.vue`
- **API文件**: `xxx.ts`
- **工具文件**: `xxx.ts`
- **样式文件**: `xxx.scss`
### 目录规范
- **功能模块化**: 按功能模块组织代码
- **组件复用**: 公共组件统一放在components
- **状态管理**: 统一使用Pinia管理状态
- **路由管理**: 统一使用uniapp-router-next
## 部署指南
### 微信小程序部署
1. **配置appid**: 修改`manifest.json`中的mp-weixin.appid
2. **配置域名**: 设置request合法域名
3. **上传代码**: 使用HBuilderX上传
4. **提交审核**: 微信官方审核
### H5部署
1. **构建项目**: `npm run build:h5`
2. **上传文件**: 将dist/build/h5目录上传到服务器
3. **配置域名**: 配置nginx指向h5目录
4. **配置SSL**: 配置HTTPS证书
### APP部署
1. **Android打包**: `npm run build:app`
2. **iOS打包**: 使用HBuilderX云打包
3. **应用签名**: 配置应用签名证书
4. **应用商店**: 上传到各大应用商店
## 性能优化
### 代码优化
- **懒加载**: 页面和组件懒加载
- **分包加载**: 使用分包加载减少首屏加载时间
- **图片优化**: 使用WebP格式，压缩图片大小
- **缓存策略**: 合理使用本地缓存
### 网络优化
- **CDN加速**: 静态资源使用CDN
- **接口缓存**: 合理设置接口缓存
- **请求合并**: 合并多个请求
- **错误重试**: 网络错误自动重试
## 安全策略
### 数据安全
- **HTTPS通信**: 所有接口使用HTTPS
- **数据加密**: 敏感数据加密传输
- **权限验证**: 接口权限验证
- **输入验证**: 前端输入验证
### 应用安全
- **代码混淆**: 生产环境代码混淆
- **防调试**: 防止代码调试
- **防篡改**: 防止应用篡改
- **权限管理**: 合理申请系统权限
## 更新日志
### v4.5.3版本更新内容
- 新增AI绘画功能
- 优化聊天体验
- 修复已知bug
- 提升系统稳定性
### 后续规划
- 支持更多AI模型
- 增加语音对话功能
- 优化用户界面
- 增强数据分析能力
## 技术支持
### 开发团队
- **产品名称**: 艺创AI
- **版本号**: 4.5.3
- **技术栈**: UniApp + Vue3 + TypeScript
- **支持平台**: 微信小程序、H5、APP
---
*本文档最后更新时间: 2024年10月1日*