1. 项目概述

框架类型：Nuxt 3 + Vue 3 + TypeScript

UI 组件库：Element Plus

样式方案：Tailwind CSS + SCSS

状态管理：Pinia

路由：Nuxt 3 文件系统路由

构建工具：Vite

2. 核心配置文件

2.1 nuxt.config.ts

设置 srcDir 为 src/，所有源代码存放在 src 目录下

引入了 Pinia、Tailwind CSS、Element Plus 和 Swiper 等核心模块

配置了 SVG 图标插件 vite-plugin-svg-icons

设置了全局 CSS 文件 @/assets/styles/index.scss

2.2 tailwind.config.js

自定义了颜色、字体、间距等主题配置

使用了 Element Plus 的 CSS 变量，实现主题统一

支持深色模式 darkMode: 'class'

配置了响应式断点，支持多种屏幕尺寸

3. 目录结构

3.1 主要目录说明

目录	功能说明
`src/components`	全局组件，按功能模块组织
`src/pages`	页面文件，对应路由结构
`src/layouts`	布局组件，定义页面的整体结构
`src/assets`	静态资源，包括图标、图片、样式等
`src/api`	API 接口定义
`src/stores`	Pinia 状态管理
`src/utils`	工具函数
`src/typings`	TypeScript 类型定义

3.2 组件结构

基础组件：如 icon、upload、pagination 等通用组件

业务组件：如 the-chat、layout-side、markdown 等业务相关组件

页面组件：每个页面下的 _components 目录存放该页面专用组件

布局组件：layouts 目录下的组件定义了不同页面的整体布局

3.3 布局系统

default.vue：默认布局，包含侧边栏、顶部导航等

blank.vue：空白布局，用于登录、注册等页面

single-row.vue：单行布局，用于特定业务场景

布局组件下包含 components 目录，存放布局相关的子组件

4. 样式系统

4.1 样式文件结构

src/assets/styles/index.scss：主样式入口，引入了所有子样式文件

element.scss：Element Plus 组件样式覆盖

var.css：CSS 变量定义

dark.css：深色模式样式

tailwind.css：Tailwind CSS 基础样式

public.scss：全局公共样式

mobile.scss：移动端样式

animation.scss：动画效果样式

4.2 样式设计原则

采用原子化 CSS 设计，结合 Tailwind CSS 和自定义 SCSS

使用 CSS 变量统一主题颜色，方便主题切换

支持响应式设计，适配不同屏幕尺寸

组件样式采用 scoped 属性，避免样式冲突

样式优先级：组件内样式 > 自定义 SCSS > Element Plus 默认样式

5. 资源管理

5.1 图标管理

使用 vite-plugin-svg-icons 插件管理 SVG 图标

图标存放在 src/assets/icons/ 目录下

通过 Icon 组件使用，如 <Icon :name="item.icon" />

5.2 图片资源

图片资源存放在 src/assets/image/ 目录下

按业务模块分类，如 draw/、kb/、user/ 等

支持多种图片格式，包括 PNG、SVG 等

6. 路由系统

采用 Nuxt 3 文件系统路由，自动根据 pages 目录生成路由

自定义了路由过滤器，排除 _components 目录下的文件

支持动态路由，如 policy/[type].vue

支持嵌套路由，通过目录嵌套实现

7. 二次开发建议

7.1 UI 修改建议

修改主题颜色：

修改 tailwind.config.js 中的 colors 配置

或修改 src/assets/styles/var.css 中的 CSS 变量

调整布局结构：

修改 layouts/default.vue 调整整体布局

修改 components/layout-side/index.vue 调整侧边栏样式

修改 layouts/components/header/index.vue 调整顶部导航

自定义组件样式：

在组件内使用 <style scoped> 定义组件样式

或在 src/assets/styles/public.scss 中添加全局样式

添加新页面：

在 src/pages/ 目录下创建新的 Vue 文件

页面会自动生成路由，无需手动配置

修改图标：

在 src/assets/icons/ 目录下添加或替换 SVG 图标

使用 <Icon :name="iconName" /> 在组件中使用

7.2 开发流程建议

安装依赖：pnpm install

启动开发服务器：npm run dev

构建生产版本：npm run build

预览生产版本：npm run preview

代码规范检查：npm run lint

代码格式化：npm run prettier

8. 注意事项

项目使用 pnpm 作为包管理器，建议使用 pnpm 安装依赖

开发时需要配置 .env.development 文件，设置 API 地址等环境变量

生产环境使用 .env.production 文件

组件命名采用 PascalCase 或 kebab-case，建议保持一致

页面组件下的 _components 目录用于存放该页面专用组件，不会生成路由

全局组件存放在 src/components/ 目录下，可在整个项目中使用

9. 关键组件说明

9.1 布局组件

layout-side：侧边栏组件，用于导航菜单

header：顶部导航组件，包含用户信息、通知等

footer：页脚组件

9.2 业务组件

the-chat：聊天组件，用于 AI 对话

markdown：Markdown 渲染组件

upload：文件上传组件

pagination：分页组件

draw-result：AI 绘画结果展示组件

9.3 表单组件

form-designer：表单设计器

daterange-picker：日期范围选择器

color-picker：颜色选择器

通过以上分析，您可以清晰地了解项目的结构和设计思路，便于进行二次开发和定制。如果需要更详细的信息，可以参考具体文件的代码实现。

提示词：
在不影响系统现有功能设计和数据结构的前提下，对侧边栏组件进行UI布局优化。将侧边栏菜单项调整为"图标在左、文字在右"的排列方式，确保所有交互功能保持不变。优化过程中需保证视觉一致性，适配不同屏幕尺寸，维持原有交互逻辑和用户体验，不修改任何功能模块或数据处理流程。

在不影响系统现有功能设计和数据结构的前提下进行UI布局优化。
1.分类切换标签，
2.创作模型卡片，
确保所有交互功能保持不变。优化过程中需保证视觉一致性，适配不同屏幕尺寸，维持原有交互逻辑和用户体验，不修改任何功能模块或数据处理流程。

AI功能开发文档

1. DALLE绘画接口

1.1 接口概述

DALLE绘画接口基于OpenAI的DALL·E 3模型，提供文生图功能。

1.2 核心文件

控制器: app/api/controller/draw/DrawController.php

逻辑层: app/api/logic/draw/DrawLogic.php

枚举定义: app/common/enum/draw/DrawEnum.php

1.3 主要接口

1.3.1 生成图片

1.3.2 DALLE3回调处理

1.4 调用流程

客户端发送绘画请求，包含提示词、尺寸、风格等参数

系统验证参数并创建绘画记录

调用DALLE3 API生成图片

接收DALLE3回调，处理生成结果

保存图片并更新记录状态

进行图片审核

1.5 主要参数

参数名	类型	说明	示例值
prompt	string	绘画提示词	"一只猫在草地上玩耍"
draw_api	string	绘画API类型	"dalle3"
size	string	图片尺寸	"1024x1024"
style	string	绘画风格	"vivid"
quality	string	图片质量	"standard"

2. MJ绘画接口

2.1 接口概述

MJ绘画接口基于Midjourney模型，支持多种MJ服务提供商（goapi、acedata）。

2.2 核心文件

控制器: app/api/controller/draw/DrawController.php

逻辑层: app/api/logic/draw/DrawLogic.php

2.3 主要接口

2.3.1 生成图片

2.3.2 MJ回调处理

2.4 调用流程

客户端发送绘画请求

系统验证参数并创建绘画记录

根据配置选择MJ服务提供商（goapi/acedata）

调用对应MJ API生成图片

接收MJ回调，处理生成结果

保存图片并更新记录状态

进行图片审核

2.5 MJ服务类型

服务类型	枚举值	说明
MJ goapi	mj_goapi	使用goapi提供的MJ服务
MJ acedata	mj_acedata	使用acedata提供的MJ服务

3. 豆包绘画接口

3.1 接口概述

豆包绘画接口基于字节跳动的豆包AI模型，提供文生图和图生图功能。

3.2 核心文件

控制器: app/api/controller/draw/DrawController.php

逻辑层: app/api/logic/draw/DrawLogic.php

3.3 主要接口

3.3.1 生成图片

3.3.2 豆包回调处理

3.4 调用流程

客户端发送绘画请求

系统验证参数并创建绘画记录

调用豆包API生成图片

接收豆包回调，处理生成结果

保存图片并更新记录状态

进行图片审核

3.5 豆包绘画引擎

引擎类型	说明
high_aes_general_v20_L	通用绘画引擎
high_aes	动漫风格引擎
i2i_xl_sft	图生图引擎

4. AI音乐接口

4.1 接口概述

AI音乐接口提供音乐生成功能，支持多种风格和时长设置。

4.2 核心文件

控制器: app/api/controller/MusicController.php

逻辑层: app/api/logic/MusicLogic.php

服务层: app/api/service/MusicService.php

4.3 主要接口

4.3.1 生成音乐

4.3.2 歌词联想

4.3.3 音乐配置

4.4 调用流程

客户端发送音乐生成请求，包含风格、时长、标题等参数

系统验证参数并创建音乐记录

调用音乐生成服务

处理生成结果，保存音乐文件

更新记录状态

4.5 音乐风格支持

系统支持多种音乐风格，通过MusicStyle模型配置，可在后台管理界面进行管理。

5. AI视频接口

5.1 接口概述

AI视频接口提供视频生成功能，支持文生视频、图生视频等多种生成方式。

5.2 核心文件

控制器: app/api/controller/VideoController.php

逻辑层: app/api/logic/VideoLogic.php

服务层: app/api/service/VideoService.php

5.3 主要接口

5.3.1 生成视频

5.3.2 视频配置

5.3.3 提示词翻译

5.4 调用流程

客户端发送视频生成请求，包含提示词、风格、时长等参数

系统验证参数并创建视频记录

调用视频生成服务

处理生成结果，保存视频文件

更新记录状态

5.5 提示词翻译支持

系统支持多种提示词翻译方式：

翻译方式	说明
百度翻译	使用百度翻译API
OpenAI翻译	使用OpenAI API进行翻译
智谱翻译	使用智谱AI API进行翻译

6. 核心服务与驱动

6.1 绘画驱动服务

6.2 队列服务

系统使用队列服务处理异步绘画任务：

6.3 配置服务

系统使用配置服务管理各种AI模型的配置：

7. 配置说明

7.1 绘画配置

绘画配置存储在数据库的config表中，配置键为draw_config，包含以下主要配置项：

配置项	说明
status	功能开关，0-关闭，1-开启
translate_switch	翻译开关，0-关闭，1-开启
translate_type	翻译类型，1-系统自动，2-用户手动
power	每次绘画消耗的电量
proxy_url	代理URL
time_out	请求超时时间

7.2 AI模型配置

AI模型配置存储在config/ai.php文件中，包含各种AI模型的详细配置：

8. 总结

本系统提供了完整的AI生成功能，包括DALLE绘画、MJ绘画、豆包绘画、AI音乐和AI视频生成。所有功能都遵循统一的架构设计，包括控制器、逻辑层、服务层和数据层。

系统采用了队列机制处理异步生成任务，支持多种AI服务提供商，并包含完善的审核机制。配置系统允许管理员灵活调整各种AI模型的参数和开关状态。

开发者可以通过调用相应的API接口来使用这些AI功能，系统会自动处理参数验证、任务调度、结果处理等流程。

二次开发基础教程

1. 项目概述#

2. 核心配置文件#

2.1 nuxt.config.ts#

2.2 tailwind.config.js#

3. 目录结构#

3.1 主要目录说明#

3.2 组件结构#

3.3 布局系统#

4. 样式系统#

4.1 样式文件结构#

4.2 样式设计原则#

5. 资源管理#

5.1 图标管理#

5.2 图片资源#

6. 路由系统#

7. 二次开发建议#

7.1 UI 修改建议#

7.2 开发流程建议#

8. 注意事项#

9. 关键组件说明#

9.1 布局组件#

9.2 业务组件#

9.3 表单组件#

AI功能开发文档#

目录#

1. DALLE绘画接口#

1.1 接口概述#

1.2 核心文件#

1.3 主要接口#

1.3.1 生成图片#

1.3.2 DALLE3回调处理#

1.4 调用流程#

1.5 主要参数#

2. MJ绘画接口#

2.1 接口概述#

2.2 核心文件#

2.3 主要接口#

2.3.1 生成图片#

2.3.2 MJ回调处理#

2.4 调用流程#

2.5 MJ服务类型#

3. 豆包绘画接口#

3.1 接口概述#

3.2 核心文件#

3.3 主要接口#

3.3.1 生成图片#

3.3.2 豆包回调处理#

3.4 调用流程#

3.5 豆包绘画引擎#

4. AI音乐接口#

4.1 接口概述#

4.2 核心文件#

4.3 主要接口#

4.3.1 生成音乐#

4.3.2 歌词联想#

4.3.3 音乐配置#

4.4 调用流程#

4.5 音乐风格支持#

5. AI视频接口#

5.1 接口概述#

5.2 核心文件#

5.3 主要接口#

5.3.1 生成视频#

5.3.2 视频配置#

5.3.3 提示词翻译#

5.4 调用流程#

5.5 提示词翻译支持#

6. 核心服务与驱动#

6.1 绘画驱动服务#

6.2 队列服务#

6.3 配置服务#

7. 配置说明#

7.1 绘画配置#

7.2 AI模型配置#

8. 总结#

1. 项目概述

2. 核心配置文件

2.1 nuxt.config.ts

2.2 tailwind.config.js

3. 目录结构

3.1 主要目录说明

3.2 组件结构

3.3 布局系统

4. 样式系统

4.1 样式文件结构

4.2 样式设计原则

5. 资源管理

5.1 图标管理

5.2 图片资源

6. 路由系统

7. 二次开发建议

7.1 UI 修改建议

7.2 开发流程建议

8. 注意事项

9. 关键组件说明

9.1 布局组件

9.2 业务组件

9.3 表单组件

AI功能开发文档

目录

1. DALLE绘画接口

1.1 接口概述

1.2 核心文件

1.3 主要接口

1.3.1 生成图片

1.3.2 DALLE3回调处理

1.4 调用流程

1.5 主要参数

2. MJ绘画接口

2.1 接口概述

2.2 核心文件

2.3 主要接口

2.3.1 生成图片

2.3.2 MJ回调处理

2.4 调用流程

2.5 MJ服务类型

3. 豆包绘画接口

3.1 接口概述

3.2 核心文件

3.3 主要接口

3.3.1 生成图片

3.3.2 豆包回调处理

3.4 调用流程

3.5 豆包绘画引擎

4. AI音乐接口

4.1 接口概述

4.2 核心文件

4.3 主要接口

4.3.1 生成音乐

4.3.2 歌词联想

4.3.3 音乐配置

4.4 调用流程

4.5 音乐风格支持

5. AI视频接口

5.1 接口概述

5.2 核心文件

5.3 主要接口

5.3.1 生成视频

5.3.2 视频配置

5.3.3 提示词翻译

5.4 调用流程

5.5 提示词翻译支持

6. 核心服务与驱动

6.1 绘画驱动服务

6.2 队列服务

6.3 配置服务

7. 配置说明

7.1 绘画配置

7.2 AI模型配置

8. 总结