更新记录

V4.5.3（2025-09-08） 下载此版本

⚡ 优化

1. 安装sql优化

平台兼容性

uni-app x(4.01)

艺创AI-聊天绘画系统项目文档

项目概述

艺创AI是一个基于uniapp框架开发的聊天绘画系统，支持多平台部署（H5、小程序、App）。该系统集成了AI聊天、AI绘画、用户管理、支付等功能，提供了完整的智能交互体验。

前台演示

前台演示：cnai.art H5演示：cnai.art/mobile 登录账号：自行注册 登录密码：自行注册

技术栈

• 前端框架: uniapp (Vue 3)
• 状态管理: Pinia
• UI框架: vk-uview-ui
• 样式处理: SCSS, TailwindCSS
• 构建工具: Vite
• 开发语言: TypeScript
• API请求: 自定义request封装

项目结构

uniapp/
├── .env.development.example    # 开发环境变量示例
├── .env.production.example     # 生产环境变量示例
├── .eslintrc.js               # ESLint配置
├── .gitignore                 # Git忽略文件
├── .vscode/                   # VSCode配置
│   ├── extensions.json        # 推荐插件
│   └── settings.json          # 编辑器设置
├── index.html                 # H5入口HTML
├── initialize.js              # 初始化脚本
├── my-release-key.keystore    # Android签名密钥
├── package.json              # 项目依赖和脚本
├── scripts/                   # 构建脚本
│   ├── develop.js            # 开发脚本
│   ├── publish.js            # 发布脚本
│   └── release.mjs           # 发布处理脚本
├── src/                      # 源代码目录
│   ├── App.vue               # 应用根组件
│   ├── androidPrivacy.json   # Android隐私配置
│   ├── api/                  # API接口
│   │   ├── account.ts        # 账户相关接口
│   │   ├── app.ts            # 应用相关接口
│   │   ├── chat.ts           # 聊天相关接口
│   │   ├── drawing.ts        # 绘画相关接口
│   │   ├── 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/                # 自定义钩子
│   │   ├── useAudio.ts       # 音频钩子
│   │   ├── useAudioPlay.ts   # 音频播放钩子
│   │   ├── useCaptchaEffect.ts # 验证码效果钩子
│   │   ├── useCopy.ts        # 复制钩子
│   │   ├── useLockFn.ts      # 锁定函数钩子
│   │   ├── usePolling.ts     # 轮询钩子
│   │   ├── useRecorder.ts    # 录音钩子
│   │   └── useShareMessage.ts # 分享消息钩子
│   ├── lib/                  # 第三方库
│   │   ├── fft.js            # FFT算法库
│   │   └── html2canvas.esm.js # HTML转Canvas库
│   ├── main.ts               # 应用入口文件
│   ├── manifest.json         # 应用配置清单
│   ├── mixins/               # 混入
│   │   ├── index.ts          # 混入入口
│   │   ├── setTitle.ts       # 设置标题混入
│   │   ├── share.ts          # 分享混入
│   │   └── theme.ts          # 主题混入
│   ├── packages/             # 分包目录
│   │   ├── components/       # 分包组件
│   │   ├── pages/            # 分包页面
│   │   └── static/           # 分包静态资源
│   ├── pages/                # 页面
│   │   ├── ai_creation/      # AI创作页面
│   │   ├── app/              # 应用页面
│   │   ├── empty/            # 空页面
│   │   ├── index/            # 首页
│   │   ├── login/            # 登录页面
│   │   ├── pc_login/         # PC登录页面
│   │   ├── skills/           # 技能页面
│   │   ├── user/             # 用户页面
│   │   └── webview/          # WebView页面
│   ├── pages.json            # 页面配置
│   ├── 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      # TailwindCSS样式
│   │   └── var.scss          # 变量样式
│   ├── uni.scss              # uniapp内置样式变量
│   ├── uni_modules/          # uniapp模块
│   │   ├── lime-painter/     # 画笔模块
│   │   ├── mp-html/          # HTML解析模块
│   │   └── vk-uview-ui/      # UI框架
│   └── utils/                # 工具函数
│       ├── auth.ts           # 认证工具
│       ├── cache.ts          # 缓存工具
│       ├── client.ts         # 客户端工具
│       ├── date.ts           # 日期工具
│       ├── device/           # 设备工具
│       ├── download.ts       # 下载工具
│       ├── env.ts            # 环境工具
│       ├── file.ts           # 文件工具
│       ├── html2canvas.ts    # HTML转Canvas工具
│       ├── imgPath.js        # 图片路径工具
│       ├── middleware.ts     # 中间件
│       ├── pay/              # 支付工具
│       ├── request/          # 请求工具
│       ├── theme.ts          # 主题工具
│       ├── util.ts           # 通用工具
│       ├── validate.ts       # 验证工具
│       └── ***.ts         # 微信工具
├── tailwind.config.js        # TailwindCSS配置
├── tsconfig.json             # TypeScript配置
├── typings/                  # 类型定义
│   ├── env.d.ts             # 环境类型定义
│   ├── router.d.ts          # 路由类型定义
│   ├── uni.d.ts             # uniapp类型定义
│   └── vue.d.ts             # Vue类型定义
├── unpackage/                # 编译输出目录
│   └── res/                  # 资源目录
│       └── icons/            # 图标资源
├── vite.config.ts            # Vite配置
└── yarn.lock                 # Yarn依赖锁定文件

核心功能模块

1. 聊天模块

文件位置: src/api/chat.ts

主要功能：

• 获取技能列表
• 获取创作列表
• 获取示例问题列表
• 发送聊天消息
• 获取聊天记录
• 清空上下文和会话
• 收藏和取消收藏聊天记录
• 获取创作详情
• 获取技能详情
• 文本流式聊天
• 获取聊天分类列表
• 聊天分类的增删改查
• 创作聊天
• 获取聊天模型
• 聊天广播
• 音频转换
• 获取插件列表

2. 绘画模块

文件位置: src/api/drawing.ts

主要功能：

• 生成图片
• 获取图片详情
• 获取图片记录
• 删除图片
• 获取关键词分类
• 获取关键词
• 获取绘画示例
• 关键词翻译
• 获取绘画模型
• 意间绘画风格选择
• SD模型列表

3. 用户模块

文件位置: src/stores/user.ts

主要功能：

• 用户信息管理
• 登录状态管理
• 用户信息获取
• 登录和登出
• Token管理

4. 应用配置模块

文件位置: src/config/index.ts

主要功能：

• 应用版本管理
• API基础URL配置
• 请求前缀配置
• 请求超时配置

5. 聊天记录组件

文件位置: src/components/chat-record-item/chat-record-item.vue

主要功能：

• 显示聊天记录
• 支持文本、图片、文件等多种类型消息
• 支持Markdown渲染
• 支持音频播放
• 支持深度思考展示
• 支持复制、收藏、重写、生成海报等操作

6. 首页模块

文件位置: src/pages/index/index.vue

主要功能：

• 聊天界面展示
• 问题示例展示
• 会话管理
• 公告弹窗
• 隐私弹窗
• 下拉刷新

关键API接口

聊天相关接口

1. 获取技能列表: getSkillLists(data)

   • 参数: 分页参数等
   • 返回: 技能列表数据

2. 发送聊天消息: questionChat(data)

   • 参数: 聊天内容、会话ID等
   • 返回: 聊天回复

3. 获取聊天记录: getChatRecord(data)

   • 参数: 会话ID、分页参数等
   • 返回: 聊天记录列表

4. 文本流式聊天: chatSendText(data, config)

   • 参数: 聊天内容、配置信息
   • 返回: 流式文本数据

绘画相关接口

1. 生成图片: drawing(data)

   • 参数: 关键词、操作类型、图片地址等
   • 返回: 生成结果

2. 获取图片记录: drawingRecord(data)

   • 参数: 分页参数等
   • 返回: 图片记录列表

3. 关键词翻译: keywordPromptTranslate(data)

   • 参数: 待翻译的关键词
   • 返回: 翻译结果

状态管理

用户状态 (user.ts)

• userInfo: 用户信息
• token: 登录令牌
• temToken: 临时令牌
• isLogin: 登录状态（计算属性）

应用状态 (app.ts)

• config: 应用配置
• websiteConfig: 网站配置
• h5Config: H5配置
• chatConfig: 聊天配置
• loginConfig: 登录配置

主题状态 (theme.ts)

• theme: 主题配置
• getTheme: 获取主题方法

工具函数

请求工具 (request/)

• 封装了uni.request，支持GET、POST、PUT、DELETE等方法
• 支持请求拦截和响应拦截
• 支持请求取消
• 支持文件上传
• 支持流式请求

缓存工具 (cache.ts)

• 封装了本地存储操作
• 支持设置过期时间
• 支持数据加密

认证工具 (auth.ts)

• Token管理
• 登录状态检查
• 权限验证

构建和部署

开发环境

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 启动H5开发服务器
yarn dev:h5

# 启动微信小程序开发服务器
yarn dev:mp-weixin

# 启动App开发服务器
yarn dev:app

生产环境

# 构建H5
yarn build:h5

# 构建微信小程序
yarn build:mp-weixin

# 构建App
yarn build:app

发布

# 发布所有平台
yarn build

注意事项

1. 多平台适配: 项目支持H5、小程序、公众号、App等多平台，部分功能需要根据平台进行条件编译。
2. 权限管理: 在App和小程序中，需要申请相应的权限才能使用某些功能（如录音、相机等）。
3. API配置: 在不同环境中，需要配置不同的API基础URL。
4. 主题切换: 项目支持主题切换，需要确保所有UI组件都能正确响应主题变化。
5. 性能优化: 对于大量数据的渲染，需要使用虚拟列表或分页加载等方式优化性能。

扩展开发

添加新页面

1. 在src/pages目录下创建新页面文件夹
2. 在页面文件夹中创建.vue文件
3. 在src/pages.json中配置页面路由
4. 根据需要添加页面特有样式和逻辑

添加新API

1. 在src/api目录下创建新的API文件
2. 按照现有格式添加API接口函数
3. 在需要的地方引入并使用新的API接口

添加新组件

1. 在src/components目录下创建新组件文件夹
2. 在组件文件夹中创建.vue文件
3. 按照现有格式编写组件逻辑和样式
4. 在需要的地方引入并使用新组件

总结

艺创AI-聊天绘画系统是一个功能完善的多平台应用，集成了AI聊天和AI绘画等核心功能。项目采用了现代化的技术栈，代码结构清晰，模块化程度高，便于维护和扩展。通过本文档，开发者可以快速了解项目结构和功能，为后续的开发和维护工作提供参考。