更新记录

1.2.3（2025-12-05） 下载此版本

⚡ 优化

1. 调用全文分词时存在内存不足
2. 增加上下文引用条数设置上限
3. 对话文件上传支持一次选多个
4. 对话时增加显示加载状态样式

平台兼容性

艺创数字人SaaS系统

项目概述

艺创数字人SaaS系统是一个基于uni-app框架开发的跨平台应用，专注于AI数字人创建、声音克隆和形象合成等功能。该系统支持多端部署，包括微信小程序、H5网页、App等平台，为用户提供一站式数字人创作体验。

基本信息

• 项目名称: 艺创数字人SaaS系统
• 应用名称: 艺创数字人SaaS系统
• 版本: 1.2.2
• 开发框架: uni-app + Vue 3 + TypeScript
• 构建工具: Vite
• 包管理器: pnpm
• 作者: JXDN
• 许可证: MIT

技术栈

核心技术

• 前端框架: Vue 3.5.13
• 开发语言: TypeScript 5.7.2
• 构建工具: Vite 5.2.8
• 跨平台框架: uni-app 3.0.0
• 状态管理: Pinia 2.3.0
• UI框架: uni-ui 1.5.7
• 样式方案: UnoCSS 0.64.1
• HTTP请求: Axios 1.7.9
• 路由管理: uniapp-router-next 1.2.7

开发工具与配置

• 代码规范: ESLint 9.17.0
• 代码格式化: Prettier 3.4.2
• 样式预处理器: Sass 1.72.0
• 图标库: Iconify (carbon, icon-park-outline, ri, streamline, tabler)
• 工具库: lodash-es 4.17.21, radash 12.1.0, number-precision 1.6.0
• 录音功能: recorder-core 1.3.24102001
• 分页组件: z-paging 2.3.8
• 国际化: vue-i18n 9.14.2
• 微信SDK: weixin-js-sdk 1.6.0

项目结构

src/
├── api/                    # API接口定义
│   ├── ai_copywriting.ts  # AI文案相关接口
│   ├── article.ts         # 文章相关接口
│   ├── audio.ts           # 声音相关接口
│   ├── avatar.ts          # 形象相关接口
│   ├── common.ts          # 通用接口
│   ├── dashboard.ts       # 仪表盘接口
│   ├── pay.ts             # 支付接口
│   ├── power.ts           # 算力接口
│   ├── test.ts            # 测试接口
│   ├── topic.ts           # 话题接口
│   ├── user.ts            # 用户接口
│   └── wechat.ts          # 微信接口
├── bundle/                # 分包页面
│   └── pages/
├── components/            # 公共组件
│   ├── ActionSheet.vue    # 动作面板
│   ├── Agreement.vue      # 协议组件
│   ├── AiCopywritingContent.vue  # AI文案内容
│   ├── ArticleCard.vue    # 文章卡片
│   ├── ConfirmModal.vue   # 确认弹窗
│   ├── EmptyStatus.vue    # 空状态
│   ├── FuiTabs.vue        # 选项卡
│   ├── KefuPop.vue        # 客服弹窗
│   ├── LoginPop/          # 登录弹窗
│   ├── ProPicker.vue      # 选择器
│   ├── ProductCard.vue    # 产品卡片
│   ├── Tabbar.vue         # 底部导航
│   ├── ThemeToggle.vue    # 主题切换
│   ├── TitleContent.vue   # 标题内容
│   ├── VerificationCode.vue  # 验证码
│   └── layout/            # 布局组件
├── composables/           # 组合式函数
│   ├── useAudio.ts        # 音频处理
│   ├── usePollingTask.ts  # 轮询任务
│   ├── useRecording.ts    # 录音功能
│   ├── useRequest.ts      # 请求处理
│   ├── useTheme.ts        # 主题处理
│   └── useToast.ts        # 提示信息
├── config/                # 配置文件
│   └── index.ts
├── enums/                 # 枚举定义
│   ├── appEnums.ts        # 应用枚举
│   ├── cacheEnums.ts      # 缓存枚举
│   ├── constantEnums.ts   # 常量枚举
│   ├── pageEnum.ts        # 页面枚举
│   ├── requestEnum.ts     # 请求枚举
│   ├── requestEnums.ts    # 请求枚举
│   └── variableEnum.ts    # 变量枚举
├── hooks/                 # 钩子函数
│   └── wechat.ts          # 微信钩子
├── layouts/               # 布局组件
│   ├── auth.vue           # 认证布局
│   └── default.vue        # 默认布局
├── pages/                 # 页面
│   ├── create_profile/    # 创建形象
│   ├── create_sound/      # 创建声音
│   ├── demo/              # 演示
│   ├── digital_people/    # 数字人
│   ├── home/              # 首页
│   ├── login/             # 登录
│   ├── product/           # 作品
│   ├── profile/           # 资产
│   └── user/              # 用户
├── router/                # 路由配置
│   └── index.ts
├── static/                # 静态资源
│   ├── favicon.ico
│   ├── fileTypeMap.ts
│   ├── icons/             # 图标
│   ├── images/            # 图片
│   └── logo.svg
├── stores/                # 状态管理
│   ├── app.ts             # 应用状态
│   └── user.ts            # 用户状态
├── styles/                # 样式文件
│   ├── global.scss        # 全局样式
│   └── reset.scss         # 重置样式
├── types/                 # 类型定义
│   ├── ai_copywriting.d.ts
│   ├── article.d.ts
│   ├── audio.d.ts
│   ├── avatar.d.ts
│   ├── global.d.ts
│   ├── paging.d.ts
│   ├── params.d.ts
│   ├── power.d.ts
│   ├── props.d.ts
│   ├── topic.d.ts
│   └── wx.d.ts
├── utils/                 # 工具函数
│   ├── cache.ts           # 缓存工具
│   ├── check.ts           # 检查工具
│   ├── client.ts          # 客户端工具
│   ├── crypto.ts          # 加密工具
│   ├── env.ts             # 环境工具
│   ├── helper.ts          # 辅助工具
│   ├── util.ts            # 通用工具
│   └── wechat.ts          # 微信工具
├── App.vue                # 应用入口
├── main.ts                # 主入口
├── manifest.json          # 应用配置
├── pages.json             # 页面配置
└── uni.scss               # uni-app样式

核心功能模块

1. 数字人创建

数字人创建是系统的核心功能，允许用户通过选择形象、声音和文案来创建数字人视频。

主要功能:

• 形象选择：从已有形象中选择或上传新形象
• 声音选择：从已有声音中选择或上传新声音
• 文案输入：手动输入文案或使用AI生成文案
• 合成模式：极速模式、普通模式等不同质量的合成选项
• 算力消耗：根据不同模式消耗不同算力

技术实现:

• API接口：apiPostCreateCompleteFlow、apiPostAiAvatarCreate
• 页面路径：/pages/digital_people/index
• 组件：SelectProfilePop、SelectTonePop、SelectCopywritingPop

2. 形象克隆

形象克隆功能允许用户上传视频或录制视频来创建数字人形象。

主要功能:

• 视频上传：支持从相册选择或录制视频
• 视频处理：自动提取视频封面和时长信息
• 形象命名：为创建的形象命名
• 形象管理：查看、编辑、删除已创建的形象

技术实现:

• API接口：apiPostAvatarVideoCreate、apiGetAvatarVideoList
• 页面路径：/pages/create_profile/index
• 组件：Agreement（用户协议）

3. 声音克隆

声音克隆功能允许用户录制声音或上传音频文件来创建数字人声音。

主要功能:

• 录音功能：支持录音、暂停、播放、重置
• 录音时长控制：限制录音时长在6-14秒之间
• 声音命名：为创建的声音命名
• 声音管理：查看、编辑、删除已创建的声音
• 文案类型：支持中文和英文两种文案类型

技术实现:

• API接口：apiPostVoiceCreate、apiGetVoiceList
• 页面路径：/pages/create_sound/index
• 组件：SoundPop、useRecording（录音钩子）

4. AI文案生成

AI文案生成功能为用户提供智能文案创作服务。

主要功能:

• 文案生成：基于用户需求生成文案
• 话题推荐：提供热门话题推荐
• 热点话题：展示当前热点话题
• 文案编辑：对生成的文案进行编辑和调整

技术实现:

• API接口：apiGetRandomTopicList、AI文案相关接口
• 页面路径：/bundle/pages/ai_copywriting/index
• 组件：AiCopywritingContent

5. 用户系统

用户系统提供用户注册、登录、个人信息管理等功能。

主要功能:

• 微信登录：支持微信小程序授权登录
• 个人信息：查看和编辑个人信息
• 账号设置：修改昵称、手机号、密码等
• 算力管理：查看算力余额和充值记录

技术实现:

• API接口：apiGetUser、登录相关接口
• 页面路径：/pages/user/index、/bundle/pages/user_set/index
• 状态管理：useUserStore

6. 作品管理

作品管理功能允许用户查看和管理创建的数字人作品。

主要功能:

• 作品列表：展示用户创建的所有数字人作品
• 作品详情：查看作品的详细信息
• 作品状态：显示作品的处理状态（处理中、已完成、失败）
• 作品分享：支持分享作品到微信好友或朋友圈

技术实现:

• API接口：apiGetAiAvatarList、apiGetAiAvatarDetail
• 页面路径：/pages/product/index
• 组件：ProductList、ProductCard

数据结构

用户信息（UserInfo）

interface UserInfo {
    id: number;
    sn: number;
    sex: string;
    account: string;
    nickname: string;
    real_name: string;
    avatar: string;
    mobile: string;
    create_time: string;
    is_new_user: number;
    is_auth: number;
    user_money: string;
    has_password: boolean;
    static: { label: string; value: number }[];
}

数字人项目（AiAvatarItem）

interface AiAvatarItem {
    id: number;
    tenant_id: number;
    uid: number;
    title: string;
    task_id: string;
    voice_id: string;
    video_id: string;
    cost_power: string;
    status: taskStatusType; // '0' | '1' | '2'
    completion_time: string;
    cost_time: string;
    file_id: string;
    duration: string;
    size: string;
    cover: string;
    create_time: string;
    user: UserInfo;
    voice: VoiceItem;
    video: AvatarVideoItem;
    resultFile: string;
}

形象项目（AvatarVideoItem）

interface AvatarVideoItem {
    id: number;
    tenant_id: number;
    uid: number;
    name: string;
    record: string;
    file_id: string;
    cover: string;
    create_time: string;
    duration: string;
    video_url: string;
}

声音项目（VoiceItem）

interface VoiceItem {
    id: number;
    tenant_id: number;
    uid: number;
    name: string;
    record: string;
    file_id: string;
    cover: string;
    create_time: string;
    duration: string;
    voice_url: string;
    status: taskStatusType; // '0' | '1' | '2'
}

创建数字人参数（CreateCompleteFlow）

interface CreateCompleteFlow {
    /*  声音模型-现在默认为 1 */
    voice_mode: number;
    /*  声音id */
    voice_id: number | null;
    /** 声音合成内容 */
    content: string;
    /** 音色名称-可选 */
    timbre?: string | null;
    /** 形象 id */
    video_id: number | null;
    /** 合成模式 */
    video_mode: number | null;
    /** 数字人名称 */
    video_name: string;
}

状态管理

应用状态（useAppStore）

export const useAppStore = defineStore('app', () => {
  const siteConfig = ref<SiteConfig | null>(null)
  const theme = ref<themeType>(THEME)

  const setTheme = (newTheme?: themeType) => { ... }
  const getConfig = async () => { ... }

  return {
    siteConfig,
    setTheme,
    theme,
    getConfig
  }
})

用户状态（useUserStore）

export const useUserStore = defineStore('user', () => {
  const token = ref<string | null>(TOKEN)
  const userInfo = ref<UserInfo | null>(null)
  const loginTimeStamp = ref<number>(LOGIN_TIME_STAMP)

  const isLogin = computed(() => { ... })

  const clearToken = () => { ... }
  const setToken = (newToken: string | null) => { ... }
  const getUser = async () => { ... }
  const login = async (newToken: string) => { ... }
  const logout = async () => { ... }

  return {
    token,
    isLogin,
    setToken,
    clearToken,
    userInfo,
    login,
    getUser,
    logout,
    refreshToken,
  }
})

工具函数

通用工具（util.ts）

/**
 * 图片路径拼接
 * @param url 路径
 * @return 图片路径
 */
export function joinUrl(url: string) { ... }

/**
 * 防抖函数
 * @param func 要防抖的函数
 * @param time 延迟时间
 * @return 防抖后的函数
 */
export function debounce(func: (_p: any) => any, time = 1000) { ... }

/**
 * 获取元素节点信息
 * @param selector 选择器
 * @param all 是否多选
 * @param context 当前组件实例
 */
export function getRect(selector: string, all = false, context?: any) { ... }

/**
 * 获取当前页面实例
 */
export function currentPage() { ... }

/**
 * 导航跳转
 * @param link 跳转信息
 * @param navigateType 跳转类型
 */
export function navigateTo(link: Link, navigateType: 'navigateTo' | 'switchTab' | 'reLaunch' = 'navigateTo') { ... }

/**
 * 显示消息提示框
 * @param title 弹出内容
 * @param duration 延时多少毫秒
 */
export function toast(title: string | undefined, duration = 2000) { ... }

录音工具（useRecording.ts）

export const useRecording = () => {
  const isRecording = ref(false)
  const audioFilePath = ref('')
  const audioFile = ref<File | null>(null)
  const recordingDuration = ref(0)
  const recorderManager = uni.getRecorderManager()

  const startRecording = () => { ... }
  const stopRecording = () => { ... }
  const resetRecording = () => { ... }

  return {
    isRecording,
    audioFilePath,
    audioFile,
    recordingDuration,
    startRecording,
    stopRecording,
    resetRecording,
  }
}

音频工具（useAudio.ts）

export const useAudio = () => {
  const innerAudioContext = uni.createInnerAudioContext()
  const isPlaying = ref(false)

  const play = (src: string) => { ... }
  const pause = () => { ... }
  const stop = () => { ... }

  return {
    play,
    pause,
    stop,
    isPlaying,
  }
}

轮询任务（usePollingTask.ts）

export const usePollingTask = (callback: (stop: () => void) => Promise<void>, options?: PollingOptions) => {
  let timer: NodeJS.Timeout | null = null
  let attempts = 0
  let startTime = Date.now()

  const start = () => { ... }
  const clear = () => { ... }

  return {
    start,
    clear,
  }
}

构建与部署

开发环境

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 微信小程序开发
pnpm wx

# H5开发
pnpm dev:h5

# App开发
pnpm dev:app

生产环境

# 构建所有平台
pnpm build

# 构建H5
pnpm build:h5

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

# 构建App
pnpm build:app

代码检查

# 代码检查
pnpm lint

# 自动修复
pnpm lint:fix

# 类型检查
pnpm type-check

平台支持

微信小程序

• 支持程度: 完全支持
• 特殊功能: 微信登录、微信支付、微信分享
• 配置文件: manifest.json中的mp-weixin配置

H5网页

• 支持程度: 完全支持
• 路由模式: history模式
• 基础路径: /mobile/
• 配置文件: manifest.json中的h5配置

App

• 支持程度: 完全支持
• 支持平台: Android、iOS
• 配置文件: manifest.json中的app-plus配置

其他小程序平台

• 支付宝小程序: 部分支持
• 百度小程序: 部分支持
• 字节跳动小程序: 部分支持
• QQ小程序: 部分支持

项目特点

1. 跨平台开发

基于uni-app框架，一套代码多端运行，支持微信小程序、H5、App等多个平台。

2. 现代化技术栈

使用Vue 3 + TypeScript + Vite构建，提供优秀的开发体验和代码质量。

3. 组件化开发

采用组件化开发模式，提高代码复用性和可维护性。

4. 状态管理

使用Pinia进行状态管理，提供简洁、高效的状态管理方案。

5. 类型安全

全面使用TypeScript，提供类型安全支持，减少运行时错误。

6. 样式方案

使用UnoCSS作为样式方案，提供原子化CSS，提高样式编写效率。

7. 自动化导入

使用unplugin-auto-import自动导入API和组件，减少手动导入的工作量。

8. 代码规范

使用ESLint和Prettier进行代码规范和格式化，保证代码质量。

总结

艺创数字人SaaS系统是一个功能完善、技术先进的跨平台应用，专注于AI数字人创作。通过形象克隆、声音克隆、AI文案生成等功能，为用户提供一站式数字人创作体验。项目采用现代化的技术栈，具有良好的可扩展性和可维护性，适合作为数字人创作领域的基础平台。

系统的核心优势在于其跨平台能力、丰富的功能模块和先进的技术架构，能够满足不同用户群体的需求，为数字人创作领域提供有力的技术支持。