Skip to content

AIGC聊天绘画系统「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绘画、分销推广、会员套餐、充值套餐、卡密兑换、模型计费、会员回流优惠券等丰富的营销功能。部分功能开发中,欢迎前往体验~。

License

Notifications You must be signed in to change notification settings

cnaiart/Chat-Painting-System

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

艺创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接口

// 聊天相关接口
- chatSendText: 发送文本消息
- questionChat: 问题对话
- getChatRecord: 获取聊天记录
- cleanChatContext: 清空上下文
- cleanChatRecord: 清空会话
- collectChatRecord: 收藏对话

2. AI绘画系统

核心功能

  • 文生图: 根据文字描述生成图片
  • 图生图: 基于参考图生成新图片
  • 图片放大: 支持图片高清放大
  • 图片变体: 生成图片的变体版本
  • 风格选择: 支持多种绘画风格
  • 模型选择: 支持多种AI绘画模型

支持的绘画引擎

  • DALL-E 3: OpenAI最新绘画模型
  • Stable Diffusion: 开源绘画模型
  • 意间绘画: 中文优化绘画引擎
  • Midjourney: 高质量绘画模型

主要API接口

// 绘画相关接口
- drawing: 生成图片
- drawingDetail: 获取绘画详情
- drawingRecord: 获取绘画记录
- drawingDelete: 删除绘画记录
- keywordPromptTranslate: 关键词翻译

3. 用户系统

核心功能

  • 多端登录: 支持微信、手机号、邮箱登录
  • 用户信息: 完整的用户资料管理
  • 会员系统: VIP会员等级管理
  • 账户余额: 余额充值与消费记录
  • 邀请机制: 邀请好友获得奖励
  • 第三方绑定: 支持微信、支付宝绑定

主要API接口

// 用户相关接口
- getUserInfo: 获取用户信息
- userEdit: 编辑用户信息
- userBindEmail: 绑定邮箱
- userBindMobile: 绑定手机
- accountLog: 余额明细

4. 支付系统

支持的支付方式

  • 微信支付: 微信小程序、H5支付
  • 支付宝支付: APP、H5支付
  • 余额支付: 系统内余额支付
  • 兑换码: 激活码兑换会员

主要功能

  • 套餐管理: 多种会员套餐选择
  • 订单管理: 完整的订单流程
  • 支付回调: 安全的支付结果处理
  • 退款机制: 支持订单退款

5. 任务中心

任务类型

  • 每日签到: 连续签到获得奖励
  • 邀请好友: 邀请新用户获得奖励
  • 首次充值: 首次充值额外奖励
  • 完善信息: 完善个人资料获得奖励
  • 分享应用: 分享应用获得奖励

奖励机制

  • 积分奖励: 完成任务获得积分
  • 余额奖励: 直接获得余额
  • 会员时长: 获得VIP会员时长
  • 绘画次数: 获得免费绘画次数

6. 推广系统

推广功能

  • 邀请海报: 自动生成推广海报
  • 邀请码: 个人专属邀请码
  • 推广统计: 实时推广数据统计
  • 分佣机制: 多级分佣系统
  • 提现功能: 推广收益提现

配置系统

环境配置

开发环境 (.env.development)

# 基础配置
VITE_APP_BASE_URL=http://your-domain.com
VITE_APP_NAME=艺创AI

生产环境 (.env.production)

# 基础配置
VITE_APP_BASE_URL=https://your-domain.com
VITE_APP_NAME=艺创AI

应用配置 (src/config/index.ts)

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日

About

AIGC聊天绘画系统「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绘画、分销推广、会员套餐、充值套餐、卡密兑换、模型计费、会员回流优惠券等丰富的营销功能。部分功能开发中,欢迎前往体验~。

Resources

License

Stars

Watchers

Forks

Packages

No packages published