root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into feature/bpm

Browse Source
This commit is contained in:
YunaiV 2024-06-23 11:29:23 +08:00
commit 64a691a3c7
58 changed files with 6519 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -6,7 +6,7 @@
"private": false,
"scripts": {
"i": "pnpm install",
"dev": "vite",
"dev": "vite --mode env.local",
"dev-server": "vite --mode dev",
"ts:check": "vue-tsc --noEmit",
"build:local": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build",
@ -29,6 +29,7 @@
"@form-create/designer": "^3.1.3",
"@form-create/element-ui": "^3.1.24",
"@iconify/iconify": "^3.1.1",
"@microsoft/fetch-event-source": "^2.0.1",
"@videojs-player/vue": "^1.0.0",
"@vueuse/core": "^10.9.0",
"@wangeditor/editor": "^5.1.23",
@ -46,11 +47,12 @@
"driver.js": "^1.3.1",
"echarts": "^5.5.0",
"echarts-wordcloud": "^2.1.0",
"element-plus": "2.6.1",
"element-plus": "2.7.0",
"fast-xml-parser": "^4.3.2",
"highlight.js": "^11.9.0",
"jsencrypt": "^3.3.2",
"lodash-es": "^4.17.21",
"marked": "^12.0.2",
"min-dash": "^4.1.1",
"mitt": "^3.0.1",
"nprogress": "^0.2.0",

24
pnpm-lock.yaml
View File

@ -17,6 +17,9 @@ dependencies:
'@iconify/iconify':
specifier: ^3.1.1
version: 3.1.1
'@microsoft/fetch-event-source':
specifier: ^2.0.1
version: 2.0.1
'@videojs-player/vue':
specifier: ^1.0.0
version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.5)(vue@3.4.21)
@ -69,8 +72,8 @@ dependencies:
specifier: ^2.1.0
version: 2.1.0(echarts@5.5.0)
element-plus:
specifier: 2.6.1
version: 2.6.1(vue@3.4.21)
specifier: 2.7.0
version: 2.7.0(vue@3.4.21)
fast-xml-parser:
specifier: ^4.3.2
version: 4.3.6
@ -83,6 +86,9 @@ dependencies:
lodash-es:
specifier: ^4.17.21
version: 4.17.21
marked:
specifier: ^12.0.2
version: 12.0.2
min-dash:
specifier: ^4.1.1
version: 4.2.1
@ -2360,6 +2366,10 @@ packages:
'@jridgewell/sourcemap-codec': 1.4.15
dev: true
/@microsoft/fetch-event-source@2.0.1:
resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==, tarball: https://registry.npmmirror.com/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz}
dev: false
/@nodelib/fs.scandir@2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==, tarball: https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz}
engines: {node: '>= 8'}
@ -5082,8 +5092,8 @@ packages:
resolution: {integrity: sha512-9ItEpeu15hW5m8jKdriL+BQrgwDTXEL9pn4SkillWFu73ZNNNQ2BKKLS+ZHv2vC9UkNhosAeyfxOf/5OSeTCPA==, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.750.tgz}
dev: true
/element-plus@2.6.1(vue@3.4.21):
resolution: {integrity: sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.6.1.tgz}
/element-plus@2.7.0(vue@3.4.21):
resolution: {integrity: sha512-WAiaFLavuWFxof9qwkC27jvkh9nRcNnB506g1vvJSiVaVqjCBWUFCIyJKeN11M1qcv2cS5VV5PfSLjTIkrw87A==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.7.0.tgz}
peerDependencies:
vue: ^3.2.0
dependencies:
@ -6917,6 +6927,12 @@ packages:
object-visit: 1.0.1
dev: true
/marked@12.0.2:
resolution: {integrity: sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==, tarball: https://registry.npmmirror.com/marked/-/marked-12.0.2.tgz}
engines: {node: '>= 18'}
hasBin: true
dev: false
/matches-selector@1.2.0:
resolution: {integrity: sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==, tarball: https://registry.npmmirror.com/matches-selector/-/matches-selector-1.2.0.tgz}
dev: true

4
src/App.vue
View File

@ -54,4 +54,8 @@ body {
.#{$prefix-cls}-grey-mode {
filter: grayscale(100%);
}
.scrollbar__view {
height: 99%!important;
}
</style>

64
src/api/ai/chat/conversation/index.ts Normal file
View File

@ -0,0 +1,64 @@
import request from '@/config/axios'
// AI 聊天对话 VO
export interface ChatConversationVO {
id: string // ID 编号
userId: number // 用户编号
title: string // 对话标题
pinned: boolean // 是否置顶
roleId: number // 角色编号
modelId: number // 模型编号
model: string // 模型标志
temperature: number // 温度参数
maxTokens: number // 单条回复的最大 Token 数量
maxContexts: number // 上下文的最大 Message 数量
// 额外字段
systemMessage?: string // 角色设定
modelName?: string // 模型名字
roleAvatar?: string // 角色头像
modelMaxTokens?: string // 模型的单条回复的最大 Token 数量
modelMaxContexts?: string // 模型的上下文的最大 Message 数量
}
// AI 聊天对话 API
export const ChatConversationApi = {
// 获得【我的】聊天对话
getChatConversationMy: async (id: string) => {
return await request.get({ url: `/ai/chat/conversation/get-my?id=${id}` })
},
// 新增【我的】聊天对话
createChatConversationMy: async (data?: ChatConversationVO) => {
return await request.post({ url: `/ai/chat/conversation/create-my`, data })
},
// 更新【我的】聊天对话
updateChatConversationMy: async (data: ChatConversationVO) => {
return await request.put({ url: `/ai/chat/conversation/update-my`, data })
},
// 删除【我的】聊天对话
deleteChatConversationMy: async (id: string) => {
return await request.delete({ url: `/ai/chat/conversation/delete-my?id=${id}` })
},
// 删除【我的】所有对话，置顶除外
deleteMyAllExceptPinned: async () => {
return await request.delete({ url: `/ai/chat/conversation/delete-my-all-except-pinned` })
},
// 获得【我的】聊天对话列表
getChatConversationMyList: async () => {
return await request.get({ url: `/ai/chat/conversation/my-list` })
},
// 获得对话分页
getChatConversationPage: async (params: any) => {
return await request.get({ url: `/ai/chat/conversation/page`, params })
},
// 管理员删除消息
deleteChatConversationByAdmin: async (id: number) => {
return await request.delete({ url: `/ai/chat/conversation/delete-by-admin?id=${id}` })
}
}

88
src/api/ai/chat/message/index.ts Normal file
View File

@ -0,0 +1,88 @@
import request from '@/config/axios'
import { fetchEventSource } from '@microsoft/fetch-event-source'
import { getAccessToken } from '@/utils/auth'
import { config } from '@/config/axios/config'
// 聊天VO
export interface ChatMessageVO {
id: number // 编号
conversationId: number // 对话编号
type: string // 消息类型
userId: string // 用户编号
roleId: string // 角色编号
model: number // 模型标志
modelId: number // 模型编号
content: string // 聊天内容
tokens: number // 消耗 Token 数量
createTime: Date // 创建时间
roleAvatar: string // 角色头像
userAvatar: string // 创建时间
}
export interface ChatMessageSendVO {
conversationId: string // 对话编号
content: number // 聊天内容
}
// AI chat 聊天
export const ChatMessageApi = {
// 消息列表
messageList: async (conversationId: string | null) => {
return await request.get({
url: `/ai/chat/message/list-by-conversation-id?conversationId=${conversationId}`
})
},
// 发送 send stream 消息
// TODO axios 可以么？ https://apifox.com/apiskills/how-to-create-axios-stream/
sendStream: async (
conversationId: number,
content: string,
ctrl,
enableContext: boolean,
onMessage,
onError,
onClose
) => {
const token = getAccessToken()
return fetchEventSource(`${config.base_url}/ai/chat/message/send-stream`, {
method: 'post',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
},
openWhenHidden: true,
body: JSON.stringify({
conversationId,
content,
useContext: enableContext
}),
onmessage: onMessage,
onerror: onError,
onclose: onClose,
signal: ctrl.signal
})
},
// 删除消息
delete: async (id: string) => {
return await request.delete({ url: `/ai/chat/message/delete?id=${id}` })
},
// 删除消息 - 对话所有消息
deleteByConversationId: async (conversationId: string) => {
return await request.delete({
url: `/ai/chat/message/delete-by-conversation-id?conversationId=${conversationId}`
})
},
// 获得消息分页
getChatMessagePage: async (params: any) => {
return await request.get({ url: '/ai/chat/message/page', params })
},
// 管理员删除消息
deleteChatMessageByAdmin: async (id: number) => {
return await request.delete({ url: `/ai/chat/message/delete-by-admin?id=${id}` })
}
}

98
src/api/ai/image/index.ts Normal file
View File

@ -0,0 +1,98 @@
import request from '@/config/axios'
// AI API 密钥 VO
// TODO @fan：要不前端不弄太多 VO，就用这个 ImageDetailVO？！
export interface ImageDetailVO {
id: number // 编号
prompt: string // 提示词
status: number // 状态
errorMessage: string // 错误信息
type: string // 模型下分不同的类型(清晰、真实...)
taskId: number // dr 任务id
picUrl: string // 任务地址
originalPicUrl: string // 绘制图片地址
platform: string // 平台
model: string // 模型
style: string // 图像生成的风格
size: string // 图片尺寸
buttons: ImageMjButtonsVO[] // mj 操作按钮
createTime: string // 创建时间
updateTime: string // 更新事件
}
export interface ImageMjButtonsVO {
customId: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
emoji: string // 图标 emoji
label: string // Make Variations 文本
style: number // 样式: 2（Primary）、3（Green）
}
export interface ImageMjActionVO {
id: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
customId: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
}
export interface ImagePageReqVO {
pageNo: number // 分页编号
pageSize: number // 分页大小
}
export interface ImageDallReqVO {
prompt: string // 提示词
model: string // 模型
style: string // 图像生成的风格
width: string // 图片宽度
height: string // 图片高度
}
export interface ImageDrawReqVO {
platform: string // 平台
prompt: string // 提示词
model: string // 模型
style: string // 图像生成的风格
width: string // 图片宽度
height: string // 图片高度
options: object // 绘制参数，Map<String, String>
}
export interface ImageMidjourneyImagineReqVO {
prompt: string // 提示词
model: string // 模型 mj nijj
base64Array: string[] // size不能为空
width: string // 图片宽度
height: string // 图片高度
version: string // 版本
}
// TODO 芋艿：review 下整体注释、方法名
// AI API 密钥 API
export const ImageApi = {
// 获取 image 列表
getImageList: async (params: ImagePageReqVO) => {
return await request.get({ url: `/ai/image/my-page`, params })
},
// 获取 image 详细信息
getImageDetail: async (id: number) => {
return await request.get({ url: `/ai/image/get-my?id=${id}`})
},
// 生成图片
drawImage: async (data: ImageDrawReqVO)=> {
return await request.post({ url: `/ai/image/draw`, data })
},
// 删除
deleteImage: async (id: number)=> {
return await request.delete({ url: `/ai/image/delete-my?id=${id}`})
},
// ------------ midjourney
// midjourney - imagine
midjourneyImagine: async (data: ImageMidjourneyImagineReqVO)=> {
return await request.post({ url: `/ai/image/midjourney/imagine`, data })
},
// midjourney - action
midjourneyAction: async (params: ImageMjActionVO)=> {
return await request.get({ url: `/ai/image/midjourney/action`, params })
},
}

44
src/api/ai/model/apiKey/index.ts Normal file
View File

@ -0,0 +1,44 @@
import request from '@/config/axios'
// AI API 密钥 VO
export interface ApiKeyVO {
id: number // 编号
name: string // 名称
apiKey: string // 密钥
platform: string // 平台
url: string // 自定义 API 地址
status: number // 状态
}
// AI API 密钥 API
export const ApiKeyApi = {
// 查询 API 密钥分页
getApiKeyPage: async (params: any) => {
return await request.get({ url: `/ai/api-key/page`, params })
},
// 获得 API 密钥列表
getApiKeySimpleList: async () => {
return await request.get({ url: `/ai/api-key/simple-list` })
},
// 查询 API 密钥详情
getApiKey: async (id: number) => {
return await request.get({ url: `/ai/api-key/get?id=` + id })
},
// 新增 API 密钥
createApiKey: async (data: ApiKeyVO) => {
return await request.post({ url: `/ai/api-key/create`, data })
},
// 修改 API 密钥
updateApiKey: async (data: ApiKeyVO) => {
return await request.put({ url: `/ai/api-key/update`, data })
},
// 删除 API 密钥
deleteApiKey: async (id: number) => {
return await request.delete({ url: `/ai/api-key/delete?id=` + id })
}
}

53
src/api/ai/model/chatModel/index.ts Normal file
View File

@ -0,0 +1,53 @@
import request from '@/config/axios'
// AI 聊天模型 VO
export interface ChatModelVO {
id: number // 编号
keyId: number // API 秘钥编号
name: string // 模型名字
model: string // 模型标识
platform: string // 模型平台
sort: number // 排序
status: number // 状态
temperature: number // 温度参数
maxTokens: number // 单条回复的最大 Token 数量
maxContexts: number // 上下文的最大 Message 数量
}
// AI 聊天模型 API
export const ChatModelApi = {
// 查询聊天模型分页
getChatModelPage: async (params: any) => {
return await request.get({ url: `/ai/chat-model/page`, params })
},
// 获得聊天模型列表
getChatModelSimpleList: async (status?: number) => {
return await request.get({
url: `/ai/chat-model/simple-list`,
params: {
status
}
})
},
// 查询聊天模型详情
getChatModel: async (id: number) => {
return await request.get({ url: `/ai/chat-model/get?id=` + id })
},
// 新增聊天模型
createChatModel: async (data: ChatModelVO) => {
return await request.post({ url: `/ai/chat-model/create`, data })
},
// 修改聊天模型
updateChatModel: async (data: ChatModelVO) => {
return await request.put({ url: `/ai/chat-model/update`, data })
},
// 删除聊天模型
deleteChatModel: async (id: number) => {
return await request.delete({ url: `/ai/chat-model/delete?id=` + id })
}
}

80
src/api/ai/model/chatRole/index.ts Normal file
View File

@ -0,0 +1,80 @@
import request from '@/config/axios'
// AI 聊天角色 VO
export interface ChatRoleVO {
id: number // 角色编号
modelId: number // 模型编号
name: string // 角色名称
avatar: string // 角色头像
category: string // 角色类别
sort: number // 角色排序
description: string // 角色描述
systemMessage: string // 角色设定
welcomeMessage: string // 角色设定
publicStatus: boolean // 是否公开
status: number // 状态
}
// AI 聊天角色 分页请求 vo
export interface ChatRolePageReqVO {
name?: string // 角色名称
category?: string // 角色类别
publicStatus: boolean // 是否公开
pageNo: number // 是否公开
pageSize: number // 是否公开
}
// AI 聊天角色 API
export const ChatRoleApi = {
// 查询聊天角色分页
getChatRolePage: async (params: any) => {
return await request.get({ url: `/ai/chat-role/page`, params })
},
// 查询聊天角色详情
getChatRole: async (id: number) => {
return await request.get({ url: `/ai/chat-role/get?id=` + id })
},
// 新增聊天角色
createChatRole: async (data: ChatRoleVO) => {
return await request.post({ url: `/ai/chat-role/create`, data })
},
// 修改聊天角色
updateChatRole: async (data: ChatRoleVO) => {
return await request.put({ url: `/ai/chat-role/update`, data })
},
// 删除聊天角色
deleteChatRole: async (id: number) => {
return await request.delete({ url: `/ai/chat-role/delete?id=` + id })
},
// ======= chat 聊天
// 获取 my role
getMyPage: async (params: ChatRolePageReqVO) => {
return await request.get({ url: `/ai/chat-role/my-page`, params})
},
// 获取角色分类
getCategoryList: async () => {
return await request.get({ url: `/ai/chat-role/category-list`})
},
// 创建角色
createMy: async (data: ChatRoleVO) => {
return await request.post({ url: `/ai/chat-role/create-my`, data})
},
// 更新角色
updateMy: async (data: ChatRoleVO) => {
return await request.put({ url: `/ai/chat-role/update-my`, data})
},
// 删除角色 my
deleteMy: async (id: number) => {
return await request.delete({ url: `/ai/chat-role/delete-my?id=` + id })
},
}

1
src/assets/ai/clear.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716342375293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2604" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-0.3 1.5-0.4 3-0.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-0.1 4.4-0.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390z m468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z" p-id="2605" fill="#8a8a8a"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 844 B

1
src/assets/ai/copy-style2.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715606039621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M878.250667 981.333333H375.338667a104.661333 104.661333 0 0 1-104.661334-104.661333V375.338667a104.661333 104.661333 0 0 1 104.661334-104.661334h502.912a104.661333 104.661333 0 0 1 104.661333 104.661334v502.912C981.333333 934.485333 934.485333 981.333333 878.250667 981.333333zM375.338667 364.373333a10.666667 10.666667 0 0 0-10.922667 10.965334v502.912c0 6.229333 4.693333 10.922667 10.922667 10.922666h502.912a10.666667 10.666667 0 0 0 10.922666-10.922666V375.338667a10.666667 10.666667 0 0 0-10.922666-10.922667H375.338667z" fill="#ffffff" p-id="4257"></path><path d="M192.597333 753.322667H147.328A104.661333 104.661333 0 0 1 42.666667 648.661333V147.328A104.661333 104.661333 0 0 1 147.328 42.666667H650.24a104.661333 104.661333 0 0 1 104.618667 104.661333v49.962667c0 26.538667-20.309333 46.848-46.848 46.848a46.037333 46.037333 0 0 1-46.848-46.848V147.328a10.666667 10.666667 0 0 0-10.922667-10.965333H147.328a10.666667 10.666667 0 0 0-10.965333 10.965333V650.24c0 6.229333 4.693333 10.922667 10.965333 10.922667h45.269333c26.538667 0 46.848 20.309333 46.848 46.848 0 26.538667-21.845333 45.312-46.848 45.312z" fill="#ffffff" p-id="4258"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/assets/ai/copy.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715352878351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1499" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M624.5 786.3c92.9 0 168.2-75.3 168.2-168.2V309c0-92.4-75.3-168.2-168.2-168.2H303.6c-92.4 0-168.2 75.3-168.2 168.2v309.1c0 92.4 75.3 168.2 168.2 168.2h320.9zM178.2 618.1V309c0-69.4 56.1-125.5 125.5-125.5h320.9c69.4 0 125.5 56.1 125.5 125.5v309.1c0 69.4-56.1 125.5-125.5 125.5h-321c-69.4 0-125.4-56.1-125.4-125.5z" p-id="1500" fill="#8a8a8a"></path><path d="M849.8 295.1v361.5c0 102.7-83.6 186.3-186.3 186.3H279.1v42.7h384.4c126.3 0 229.1-102.8 229.1-229.1V295.1h-42.8zM307.9 361.8h312.3c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.9 9.6 21.4 21.4 21.4zM307.9 484.6h312.3c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.9 9.6 21.4 21.4 21.4z" p-id="1501" fill="#8a8a8a"></path><path d="M620.2 607.4c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.8 9.6 21.4 21.4 21.4h312.3z" p-id="1502" fill="#8a8a8a"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/assets/ai/delete.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715354120346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.1 263.7H118.9c-9.1 0-16.4-7.3-16.4-16.4s7.3-16.4 16.4-16.4H907c9.1 0 16.4 7.3 16.4 16.4s-7.3 16.4-16.3 16.4z" fill="#8a8a8a" p-id="3257"></path><path d="M772.5 928.3H257.4c-27.7 0-50.2-22.5-50.2-50.2V247.2c0-9.1 7.3-16.4 16.4-16.4H801c12.1 0 21.9 9.8 21.9 21.9v625.2c0 27.8-22.6 50.4-50.4 50.4zM240 263.7v614.4c0 9.6 7.8 17.4 17.4 17.4h515.2c9.7 0 17.5-7.9 17.5-17.5V263.7H240zM657.4 131.1H368.6c-9.1 0-16.4-7.3-16.4-16.4s7.3-16.4 16.4-16.4h288.7c9.1 0 16.4 7.3 16.4 16.4s-7.3 16.4-16.3 16.4z" fill="#8a8a8a" p-id="3258"></path><path d="M416 754.5c-9.1 0-16.4-7.3-16.4-16.4V517.8c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4V738c0.1 9.1-7.3 16.5-16.4 16.5z" fill="#8a8a8a" p-id="3259"></path><path d="M416 465.2c-9.1 0-16.4-7.3-16.4-16.4v-59.4c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4v59.4c0.1 9.1-7.3 16.4-16.4 16.4zM604.9 754.5c-9.1 0-16.4-7.3-16.4-16.4v-67.2c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4V738c0 9.1-7.3 16.5-16.4 16.5z" fill="#8a8a8a" opacity=".4" p-id="3260"></path><path d="M604.9 619.1c-9.1 0-16.4-7.3-16.4-16.4V389.4c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4v213.3c0 9.1-7.3 16.4-16.4 16.4z" fill="#8a8a8a" p-id="3261"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/assets/ai/gpt.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716345268026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5622" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M956.408445 419.226665a250.670939 250.670939 0 0 0-22.425219-209.609236A263.163526 263.163526 0 0 0 652.490412 85.715535 259.784384 259.784384 0 0 0 457.728923 0.008192a261.422756 261.422756 0 0 0-249.44216 178.582564 258.453206 258.453206 0 0 0-172.848261 123.901894c-57.03583 96.868753-44.031251 219.132275 32.153053 302.279661a250.670939 250.670939 0 0 0 22.32282 209.609237 263.163526 263.163526 0 0 0 281.595213 123.901893A259.067596 259.067596 0 0 0 566.271077 1023.990784a260.60357 260.60357 0 0 0 249.339762-178.889759 258.453206 258.453206 0 0 0 172.848261-123.901893c57.445423-96.868753 44.13365-218.82508-32.050655-302.074865zM566.578272 957.124721c-45.362429 0-89.496079-15.666934-124.516283-44.543243 1.638372-0.921584 4.198329-2.150363 6.143895-3.481541l206.537289-117.757998a32.35785 32.35785 0 0 0 16.895713-29.081105V474.82892l87.243317 49.97035c1.023983 0.307195 1.638372 1.228779 1.638372 2.252762v238.075953c0 105.8798-86.936122 191.689541-193.942303 191.996736zM148.588578 781.102113a189.846373 189.846373 0 0 1-23.346803-128.612213c1.535974 1.023983 4.09593 2.559956 6.143895 3.48154L337.922959 773.729439c10.444622 6.143896 23.346803 6.143896 34.098621 0l252.30931-143.664758v99.531108c0 1.023983-0.307195 1.945567-1.331177 2.559956l-208.892449 118.986778a196.297463 196.297463 0 0 1-265.518686-70.04041zM94.112704 335.97688c22.630015-39.013737 58.367008-68.81163 101.16948-84.171369V494.591784c0 11.7758 6.45109 22.93721 16.793315 28.978707l252.30931 143.767156L377.141493 716.796006a3.174346 3.174346 0 0 1-2.867152 0.307195l-208.892448-118.986777A190.870355 190.870355 0 0 1 94.215102 335.874482z m717.607001 164.861198L559.410394 357.070922 646.653711 307.20297a3.174346 3.174346 0 0 1 2.969549-0.307195l208.892449 118.986777a190.358364 190.358364 0 0 1 70.961994 262.139544 194.556693 194.556693 0 0 1-101.16948 84.171369V529.407192a31.538664 31.538664 0 0 0-16.588518-28.671513z m87.03852-129.329002c-1.74077-1.023983-4.300727-2.559956-6.246294-3.48154l-206.639687-117.757999a34.09862 34.09862 0 0 0-33.996222 0L399.566711 393.934295v-99.531108c0-1.023983 0.307195-1.945567 1.331178-2.559956l208.892449-119.089176a195.990268 195.990268 0 0 1 265.518686 70.450003c22.732414 38.706542 31.129071 84.171369 23.346803 128.305018zM352.258716 548.862861l-87.243317-49.560757a2.457558 2.457558 0 0 1-1.638372-2.252762V258.870991c0-105.8798 87.243317-191.996736 194.556692-191.689541a194.556693 194.556693 0 0 1 124.209089 44.543243c-1.638372 0.921584-4.198329 2.252762-6.143896 3.48154l-206.639687 117.757999a31.948257 31.948257 0 0 0-16.793315 29.081105l-0.307194 286.715126z m47.307995-100.759887L512 384.001664l112.535687 63.998912v127.997824l-112.228492 63.998912-112.535687-63.998912-0.307195-127.997824z" p-id="5623" fill="#707070"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

121
src/components/FormCreate/src/components/useApiSelect.tsx
View File

@ -27,6 +27,11 @@ export const useApiSelect = (option: ApiSelectProps) => {
type: String,
default: 'GET'
},
// 选项解析函数
parseFunc: {
type: String,
default: ''
},
// 请求参数
data: {
type: String,
@ -41,35 +46,121 @@ export const useApiSelect = (option: ApiSelectProps) => {
multiple: {
type: Boolean,
default: false
},
// 是否远程搜索
remote: {
type: Boolean,
default: false
},
// 远程搜索时携带的参数
remoteField: {
type: String,
default: 'label'
}
},
setup(props) {
const attrs = useAttrs()
const options = ref<any[]>([]) // 下拉数据
const loading = ref(false) // 是否正在从远程获取数据
const queryParam = ref<any>() // 当前输入的值
const getOptions = async () => {
options.value = []
// 接口选择器
if (isEmpty(props.url)) {
return
}
let data = []
switch (props.method) {
case 'GET':
data = await request.get({ url: props.url })
let url: string = props.url
if (props.remote) {
url = `${url}?${props.remoteField}=${queryParam.value}`
}
parseOptions(await request.get({ url: url }))
break
case 'POST':
data = await request.post({ url: props.url, data: jsonParse(props.data) })
const data: any = jsonParse(props.data)
if (props.remote) {
data[props.remoteField] = queryParam.value
}
parseOptions(await request.post({ url: props.url, data: data }))
break
}
}
function parseOptions(data: any) {
// 情况一：如果有自定义解析函数优先使用自定义解析
if (!isEmpty(props.parseFunc)) {
options.value = parseFunc()?.(data)
return
}
// 情况二：返回的直接是一个列表
if (Array.isArray(data)) {
parseOptions0(data)
return
}
// 情况二：返回的是分页数据,尝试读取 list
data = data.list
if (!!data && Array.isArray(data)) {
parseOptions0(data)
return
}
// 情况三：不是 yudao-vue-pro 标准返回
console.warn(
`接口[${props.url}] 返回结果不是 yudao-vue-pro 标准返回建议采用自定义解析函数处理`
)
}
function parseOptions0(data: any[]) {
if (Array.isArray(data)) {
options.value = data.map((item: any) => ({
label: item[props.labelField],
value: item[props.valueField]
label: parseExpression(item, props.labelField),
value: parseExpression(item, props.valueField)
}))
return
}
console.error(`接口[${props.url}] 返回结果不是一个数组`)
console.warn(`接口[${props.url}] 返回结果不是一个数组`)
}
function parseFunc() {
let parse: any = null
if (!!props.parseFunc) {
// 解析字符串函数
parse = new Function(`return ${props.parseFunc}`)()
}
return parse
}
function parseExpression(data: any, template: string) {
// 检测是否使用了表达式
if (template.indexOf('${') === -1) {
return data[template]
}
// 正则表达式匹配模板字符串中的 ${...}
const pattern = /\$\{([^}]*)}/g
// 使用replace函数配合正则表达式和回调函数来进行替换
return template.replace(pattern, (_, expr) => {
// expr 是匹配到的 ${} 内的表达式（这里是属性名），从 data 中获取对应的值
const result = data[expr.trim()] // 去除前后空白，以防用户输入带空格的属性名
if (!result) {
console.warn(
`接口选择器选项模版[${template}][${expr.trim()}] 解析值失败结果为[${result}], 请检查属性名称是否存在于接口返回值中,存在则忽略此条！！！`
)
}
return result
})
}
const remoteMethod = async (query: any) => {
if (!query) {
return
}
loading.value = true
try {
queryParam.value = query
await getOptions()
} finally {
loading.value = false
}
}
onMounted(async () => {
@ -80,15 +171,29 @@ export const useApiSelect = (option: ApiSelectProps) => {
if (props.multiple) {
// fix：多写此步是为了解决 multiple 属性问题
return (
<el-select class="w-1/1" {...attrs} multiple>
<el-select
class="w-1/1"
multiple
loading={loading.value}
{...attrs}
remote={props.remote}
{...(props.remote && { remoteMethod: remoteMethod })}
>
{options.value.map((item, index) => (
<el-option key={index} label={item.label} value={item.value} />
))}
</el-select>
)
}
debugger
return (
<el-select class="w-1/1" {...attrs}>
<el-select
class="w-1/1"
loading={loading.value}
{...attrs}
remote={props.remote}
{...(props.remote && { remoteMethod: remoteMethod })}
>
{options.value.map((item, index) => (
<el-option key={index} label={item.label} value={item.value} />
))}

68
src/components/FormCreate/src/config/selectRule.ts
View File

@ -13,12 +13,30 @@ const selectRule = [
control: [
{
value: 'select',
condition: '=',
condition: '==',
method: 'hidden',
rule: ['multiple']
rule: [
'multiple',
'clearable',
'collapseTags',
'multipleLimit',
'allowCreate',
'filterable',
'noMatchText',
'remote',
'remoteMethod',
'reserveKeyword',
'defaultFirstOption',
'automaticDropdown'
]
}
]
},
{
type: 'switch',
field: 'filterable',
title: '是否可搜索'
},
{ type: 'switch', field: 'multiple', title: '是否多选' },
{
type: 'switch',
@ -43,27 +61,12 @@ const selectRule = [
title: 'autocomplete 属性'
},
{ type: 'input', field: 'placeholder', title: '占位符' },
{
type: 'switch',
field: 'filterable',
title: '是否可搜索'
},
{ type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
{
type: 'input',
field: 'noMatchText',
title: '搜索条件无匹配时显示的文字'
},
{
type: 'switch',
field: 'remote',
title: '其中的选项是否从服务器远程加载'
},
{
type: 'Struct',
field: 'remoteMethod',
title: '自定义远程搜索方法'
},
{ type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
{
type: 'switch',
@ -130,6 +133,7 @@ const apiSelectRule = [
type: 'input',
field: 'labelField',
title: 'label 属性',
info: '可以使用 el 表达式：${属性}，来实现复杂数据组合。如：${nickname}-${id}',
props: {
placeholder: 'nickname'
}
@ -138,9 +142,39 @@ const apiSelectRule = [
type: 'input',
field: 'valueField',
title: 'value 属性',
info: '可以使用 el 表达式：${属性}，来实现复杂数据组合。如：${nickname}-${id}',
props: {
placeholder: 'id'
}
},
{
type: 'input',
field: 'parseFunc',
title: '选项解析函数',
info: `data 为接口返回值,需要写一个匿名函数解析返回值为选择器 options 列表
(data: any)=>{ label: string; value: any }[]`,
props: {
autosize: true,
rows: { minRows: 2, maxRows: 6 },
type: 'textarea',
placeholder: `
function (data) {
console.log(data)
return data.list.map(item=> ({label: item.nickname,value: item.id}))
}`
}
},
{
type: 'switch',
field: 'remote',
info: '是否可搜索',
title: '其中的选项是否从服务器远程加载'
},
{
type: 'input',
field: 'remoteField',
title: '请求参数',
info: '远程请求时请求携带的参数名称，如：name'
}
]

4
src/components/FormCreate/src/config/useDictSelectRule.ts
View File

@ -2,6 +2,7 @@ import { generateUUID } from '@/utils'
import * as DictDataApi from '@/api/system/dict/dict.type'
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
import { selectRule } from '@/components/FormCreate/src/config/selectRule'
import { cloneDeep } from 'lodash-es'
/**
* 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
@ -9,6 +10,7 @@ import { selectRule } from '@/components/FormCreate/src/config/selectRule'
export const useDictSelectRule = () => {
const label = '字典选择器'
const name = 'DictSelect'
const rules = cloneDeep(selectRule)
const dictOptions = ref<{ label: string; value: string }[]>([]) // 字典类型下拉数据
onMounted(async () => {
const data = await DictDataApi.getSimpleDictTypeList()
@ -55,7 +57,7 @@ export const useDictSelectRule = () => {
{ label: '布尔值', value: 'bool' }
]
},
...selectRule
...rules
])
}
}

4
src/components/FormCreate/src/config/useSelectRule.ts
View File

@ -2,6 +2,7 @@ import { generateUUID } from '@/utils'
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
import { selectRule } from '@/components/FormCreate/src/config/selectRule'
import { SelectRuleOption } from '@/components/FormCreate/src/type'
import { cloneDeep } from 'lodash-es'
/**
* 通用选择器规则 hook
@ -11,6 +12,7 @@ import { SelectRuleOption } from '@/components/FormCreate/src/type'
export const useSelectRule = (option: SelectRuleOption) => {
const label = option.label
const name = option.name
const rules = cloneDeep(selectRule)
return {
icon: option.icon,
label,
@ -28,7 +30,7 @@ export const useSelectRule = (option: SelectRuleOption) => {
if (!option.props) {
option.props = []
}
return localeProps(t, name + '.props', [makeRequiredRule(), ...option.props, ...selectRule])
return localeProps(t, name + '.props', [makeRequiredRule(), ...option.props, ...rules])
}
}
}

6
src/components/FormCreate/src/useFormCreateDesigner.ts
View File

@ -71,9 +71,9 @@ export const useFormCreateDesigner = async (designer: Ref) => {
*/
const buildSystemMenu = () => {
// 移除自带的下拉选择器组件，使用 currencySelectRule 替代
designer.value?.removeMenuItem('select')
designer.value?.removeMenuItem('radio')
designer.value?.removeMenuItem('checkbox')
// designer.value?.removeMenuItem('select')
// designer.value?.removeMenuItem('radio')
// designer.value?.removeMenuItem('checkbox')
const components = [userSelectRule, deptSelectRule, dictSelectRule, apiSelectRule0]
const menu: Menu = {
name: 'system',

61
src/components/FormCreate/src/utils/index.ts
View File

@ -1,4 +1,3 @@
// TODO puhui999: 借鉴一下 form-create-designer utils 方法 🤣 (导入不了只能先 copy 过来用下)
export function makeRequiredRule() {
return {
type: 'Required',
@ -17,63 +16,3 @@ export const localeProps = (t, prefix, rules) => {
return rule
})
}
export function upper(str) {
return str.replace(str[0], str[0].toLocaleUpperCase())
}
export function makeOptionsRule(t, to, userOptions) {
console.log(userOptions[0])
const options = [
{ label: t('props.optionsType.struct'), value: 0 },
{ label: t('props.optionsType.json'), value: 1 },
{ label: '用户数据', value: 2 }
]
const control = [
{
value: 0,
rule: [
{
type: 'TableOptions',
field: 'formCreate' + upper(to).replace('.', '>'),
props: { defaultValue: [] }
}
]
},
{
value: 1,
rule: [
{
type: 'Struct',
field: 'formCreate' + upper(to).replace('.', '>'),
props: { defaultValue: [] }
}
]
},
{
value: 2,
rule: [
{
type: 'TableOptions',
field: 'formCreate' + upper(to).replace('.', '>'),
props: { modelValue: [] }
}
]
}
]
options.splice(0, 0)
control.push()
return {
type: 'radio',
title: t('props.options'),
field: '_optionType',
value: 0,
options,
props: {
type: 'button'
},
control
}
}

2
src/components/Icon/src/Icon.vue
View File

@ -22,7 +22,7 @@ const props = defineProps({
const elRef = ref<ElRef>(null)
const isLocal = computed(() => props.icon.startsWith('svg-icon:'))
const isLocal = computed(() => props.icon?.startsWith('svg-icon:'))
const symbolId = computed(() => {
return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon

235
src/components/MarkdownView/index.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<div ref="contentRef" class="markdown-view" v-html="contentHtml"></div>
</template>
<script setup lang="ts">
import {useClipboard} from "@vueuse/core";
import {marked} from 'marked'
import 'highlight.js/styles/vs2015.min.css'
import hljs from 'highlight.js'
import {ref} from "vue";
const {copy} = useClipboard() // 初始化 copy 到粘贴板
const contentRef = ref()
// 代码高亮：https://highlightjs.org/
// 转换 markdown：marked
// marked 渲染器
const renderer = {
code(code, language, c) {
let highlightHtml
try {
highlightHtml = hljs.highlight(code, {language: language, ignoreIllegals: true}).value
} catch (e) {
// skip
}
const copyHtml = `<div id="copy" data-copy='${code}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
return `<pre style="position: relative;">${copyHtml}<code class="hljs">${highlightHtml}</code></pre>`
}
}
// 配置 marked
marked.use({
renderer: renderer
})
// 渲染的html内容
const contentHtml = ref<any>()
// 定义组件属性
const props = defineProps({
content: {
type: String,
required: true
}
})
// 将 props 变为引用类型
const { content } = toRefs(props)
// 监听 content 变化
watch(content, async (newValue, oldValue) => {
await renderMarkdown(newValue);
})
// 渲染 markdown
const renderMarkdown = async (content: string) => {
contentHtml.value = await marked(content)
}
// 组件挂在时
onMounted(async () => {
// 解析转换 markdown
await renderMarkdown(props.content as string);
//
// 添加 copy 监听
contentRef.value.addEventListener('click', (e: any) => {
console.log(e)
if (e.target.id === 'copy') {
copy(e.target?.dataset?.copy)
ElMessage({
message: '复制成功!',
type: 'success'
})
}
})
})
</script>
<style lang="scss">
.markdown-view {
font-family: PingFang SC;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.6rem;
letter-spacing: 0em;
text-align: left;
color: #3b3e55;
max-width: 100%;
pre {
position: relative;
}
pre code.hljs {
width: auto;
}
code.hljs {
border-radius: 6px;
padding-top: 20px;
width: auto;
@media screen and (min-width: 1536px) {
width: 960px;
}
@media screen and (max-width: 1536px) and (min-width: 1024px) {
width: calc(100vw - 400px - 64px - 32px * 2);
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
width: calc(100vw - 32px * 2);
}
@media screen and (max-width: 768px) {
width: calc(100vw - 16px * 2);
}
}
p,
code.hljs {
margin-bottom: 16px;
}
p {
//margin-bottom: 1rem !important;
margin: 0;
margin-bottom: 3px;
}
/* 标题通用格式 */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-G900);
margin: 24px 0 8px;
font-weight: 600;
}
h1 {
font-size: 22px;
line-height: 32px;
}
h2 {
font-size: 20px;
line-height: 30px;
}
h3 {
font-size: 18px;
line-height: 28px;
}
h4 {
font-size: 16px;
line-height: 26px;
}
h5 {
font-size: 16px;
line-height: 24px;
}
h6 {
font-size: 16px;
line-height: 24px;
}
/* 列表（有序，无序） */
ul,
ol {
margin: 0 0 8px 0;
padding: 0;
font-size: 16px;
line-height: 24px;
color: #3b3e55; // var(--color-CG600);
}
li {
margin: 4px 0 0 20px;
margin-bottom: 1rem;
}
ol > li {
list-style-type: decimal;
margin-bottom: 1rem;
// 表达式,修复有序列表序号展示不全的问题
// &:nth-child(n + 10) {
// margin-left: 30px;
// }
// &:nth-child(n + 100) {
// margin-left: 30px;
// }
}
ul > li {
list-style-type: disc;
font-size: 16px;
line-height: 24px;
margin-right: 11px;
margin-bottom: 1rem;
color: #3b3e55; // var(--color-G900);
}
ol ul,
ol ul > li,
ul ul,
ul ul li {
// list-style: circle;
font-size: 16px;
list-style: none;
margin-left: 6px;
margin-bottom: 1rem;
}
ul ul ul,
ul ul ul li,
ol ol,
ol ol > li,
ol ul ul,
ol ul ul > li,
ul ol,
ul ol > li {
list-style: square;
}
}
</style>

2
src/layout/Layout.vue
View File

@ -72,7 +72,7 @@ $prefix-cls: #{$namespace}-layout;
.#{$prefix-cls} {
background-color: var(--app-content-bg-color);
:deep(.#{$elNamespace}-scrollbar__view) {
height: 100% !important;
height: 99% !important;
}
}
</style>

2
src/permission.ts
View File

@ -83,7 +83,7 @@ router.beforeEach(async (to, from, next) => {
const redirectPath = from.query.redirect || to.path
// 修复跳转时不带参数的问题
const redirect = decodeURIComponent(redirectPath as string)
const { basePath, paramsObject: query } = parseURL(redirect)
const { paramsObject: query } = parseURL(redirect)
const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect, query }
next(nextData)
} else {

18
src/utils/dict.ts
View File

@ -1,8 +1,8 @@
/**
* 数据字典工具类
*/
import {useDictStoreWithOut} from '@/store/modules/dict'
import {ElementPlusInfoType} from '@/types/elementPlus'
import { useDictStoreWithOut } from '@/store/modules/dict'
import { ElementPlusInfoType } from '@/types/elementPlus'
const dictStore = useDictStoreWithOut()
@ -24,6 +24,10 @@ export interface NumberDictDataType extends DictDataType {
value: number
}
export interface StringDictDataType extends DictDataType {
value: string
}
export const getDictOptions = (dictType: string) => {
return dictStore.getDictByType(dictType) || []
}
@ -44,8 +48,11 @@ export const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
}
export const getStrDictOptions = (dictType: string) => {
const dictOption: DictDataType[] = []
// 获得通用的 DictDataType 列表
const dictOptions: DictDataType[] = getDictOptions(dictType)
// 转换成 string 类型的 StringDictDataType 类型
// why 需要特殊转换：避免 IDEA 在 v-for="dict in getStrDictOptions(...)" 时，el-option 的 key 会告警
const dictOption: StringDictDataType[] = []
dictOptions.forEach((dict: DictDataType) => {
dictOption.push({
...dict,
@ -209,5 +216,8 @@ export enum DICT_TYPE {
// ========== ERP - 企业资源计划模块 ==========
ERP_AUDIT_STATUS = 'erp_audit_status', // ERP 审批状态
ERP_STOCK_RECORD_BIZ_TYPE = 'erp_stock_record_biz_type' // 库存明细的业务类型
ERP_STOCK_RECORD_BIZ_TYPE = 'erp_stock_record_biz_type', // 库存明细的业务类型
// ========== AI - 人工智能模块 ==========
AI_PLATFORM = 'ai_platform' // AI 平台
}

2
src/utils/download.ts
View File

@ -29,7 +29,7 @@ const download = {
html: (data: Blob, fileName: string) => {
download0(data, fileName, 'text/html')
},
// 下载 Markdown 方法
// 下载 MarkdownView 方法
markdown: (data: Blob, fileName: string) => {
download0(data, fileName, 'text/markdown')
}

79
src/views/ai/chat/ChatEmpty.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div class="chat-empty">
<!-- title -->
<div class="center-container">
<div class="title">芋艿 AI</div>
<div class="role-list">
<div class="role-item" v-for="prompt in promptList" :key="prompt.prompt" @click="handlerPromptClick(prompt)">
{{prompt.prompt}}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const promptList = ref<any[]>() // 角色列表
promptList.value = [
{
"prompt": "今天气怎么样?",
},
{
"prompt": "写一首好听的诗歌?",
}
]
const emits = defineEmits(['onPrompt'])
const handlerPromptClick = async ({ prompt }) => {
emits('onPrompt', prompt)
}
</script>
<style scoped lang="scss">
.chat-empty {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 100%;
.center-container {
display: flex;
flex-direction: column;
justify-content: center;
.title {
font-size: 28px;
font-weight: bold;
text-align: center;
}
.role-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 460px;
margin-top: 20px;
.role-item {
display: flex;
justify-content: center;
width: 180px;
line-height: 50px;
border: 1px solid #e4e4e4;
border-radius: 10px;
margin: 10px;
cursor: pointer;
}
.role-item:hover {
background-color: rgba(243, 243, 243, 0.73);
}
}
}
}
</style>

521
src/views/ai/chat/Conversation.vue Normal file
View File

@ -0,0 +1,521 @@
<!-- AI 对话 -->
<template>
<el-aside width="260px" class="conversation-container" style="height: 100%;">
<!-- 左顶部：对话 -->
<div style="height: 100%;">
<el-button class="w-1/1 btn-new-conversation" type="primary" @click="createConversation">
<Icon icon="ep:plus" class="mr-5px"/>
新建对话
</el-button>
<!-- 左顶部：搜索对话 -->
<el-input
v-model="searchName"
size="large"
class="mt-10px search-input"
placeholder="搜索历史记录"
@keyup="searchConversation"
>
<template #prefix>
<Icon icon="ep:search"/>
</template>
</el-input>
<!-- 左中间：对话列表 -->
<div class="conversation-list">
<el-empty v-if="loading" description="." :v-loading="loading" />
<div v-for="conversationKey in Object.keys(conversationMap)" :key="conversationKey">
<div class="conversation-item classify-title" v-if="conversationMap[conversationKey].length">
<el-text class="mx-1" size="small" tag="b">{{ conversationKey }}</el-text>
</div>
<div
class="conversation-item"
v-for="conversation in conversationMap[conversationKey]"
:key="conversation.id"
@click="handleConversationClick(conversation.id)"
@mouseover="hoverConversationId = conversation.id"
@mouseout="hoverConversationId = ''"
>
<div
:class="conversation.id === activeConversationId ? 'conversation active' : 'conversation'"
>
<div class="title-wrapper">
<img class="avatar" :src="conversation.roleAvatar || roleAvatarDefaultImg"/>
<span class="title">{{ conversation.title }}</span>
</div>
<div class="button-wrapper" v-show="hoverConversationId === conversation.id">
<el-button class="btn" link @click.stop="handlerTop(conversation)" >
<el-icon title="置顶" v-if="!conversation.pinned"><Top /></el-icon>
<el-icon title="置顶" v-if="conversation.pinned"><Bottom /></el-icon>
</el-button>
<el-button class="btn" link @click.stop="updateConversationTitle(conversation)">
<el-icon title="编辑" >
<Icon icon="ep:edit"/>
</el-icon>
</el-button>
<el-button class="btn" link @click.stop="deleteChatConversation(conversation)">
<el-icon title="删除对话" >
<Icon icon="ep:delete"/>
</el-icon>
</el-button>
</div>
</div>
</div>
</div>
<!-- 底部站位 -->
<div style="height: 160px; width: 100%;"></div>
</div>
</div>
<!-- 左底部：工具栏 -->
<!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
<div class="tool-box">
<div @click="handleRoleRepository">
<Icon icon="ep:user"/>
<el-text size="small">角色仓库</el-text>
</div>
<div @click="handleClearConversation">
<Icon icon="ep:delete"/>
<el-text size="small">清空未置顶对话</el-text>
</div>
</div>
<!-- ============= 额外组件 ============= -->
<!-- 角色仓库抽屉 -->
<el-drawer v-model="drawer" title="角色仓库" size="754px">
<Role/>
</el-drawer>
</el-aside>
</template>
<script setup lang="ts">
import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation'
import {ref} from "vue";
import Role from "@/views/ai/chat/role/index.vue";
import {Bottom, Top} from "@element-plus/icons-vue";
import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
const message = useMessage() // 消息弹窗
// 定义属性
const searchName = ref<string>('') // 对话搜索
const activeConversationId = ref<string | null>(null) // 选中的对话，默认为 null
const hoverConversationId = ref<string | null>(null) // 悬浮上去的对话
const conversationList = ref([] as ChatConversationVO[]) // 对话列表
const conversationMap = ref<any>({}) // 对话分组 (置顶、今天、三天前、一星期前、一个月前)
const drawer = ref<boolean>(false) // 角色仓库抽屉 TODO @fan：roleDrawer 会不会好点哈
const loading = ref<boolean>(false) // 加载中
const loadingTime = ref<any>() // 加载中定时器
// 定义组件 props
const props = defineProps({
activeId: {
type: String || null,
required: true
}
})
// 定义钩子
const emits = defineEmits([
'onConversationCreate',
'onConversationClick',
'onConversationClear',
'onConversationDelete'
])
/**
* 对话 - 搜索
*/
const searchConversation = async (e) => {
// 恢复数据
if (!searchName.value.trim().length) {
conversationMap.value = await conversationTimeGroup(conversationList.value)
} else {
// 过滤
const filterValues = conversationList.value.filter(item => {
return item.title.includes(searchName.value.trim())
})
conversationMap.value = await conversationTimeGroup(filterValues)
}
}
/**
* 对话 - 点击
*/
const handleConversationClick = async (id: string) => {
// 过滤出选中的对话
const filterConversation = conversationList.value.filter(item => {
return item.id === id
})
// 回调 onConversationClick
// TODO @fan: 这里 idea 会报黄色警告，有办法解下么？
const res = emits('onConversationClick', filterConversation[0])
// 切换对话
if (res) {
activeConversationId.value = id
}
}
/**
* 对话 - 获取列表
*/
const getChatConversationList = async () => {
try {
// 0. 加载中
loadingTime.value = setTimeout(() => {
loading.value = true
}, 50)
// 1. 获取 对话数据
const res = await ChatConversationApi.getChatConversationMyList()
// 2. 排序
res.sort((a, b) => {
return b.createTime - a.createTime
})
conversationList.value = res
// 3. 默认选中
if (!activeId?.value) {
// await handleConversationClick(res[0].id)
} else {
// tip: 删除的刚好是选中的，那么需要重新挑选一个来进行选中
// const filterConversationList = conversationList.value.filter(item => {
// return item.id === activeId.value
// })
// if (filterConversationList.length <= 0) {
// await handleConversationClick(res[0].id)
// }
}
// 4. 没有任何对话情况
if (conversationList.value.length === 0) {
activeConversationId.value = null
conversationMap.value = {}
return
}
// 5. 对话根据时间分组(置顶、今天、一天前、三天前、七天前、30天前)
conversationMap.value = await conversationTimeGroup(conversationList.value)
} finally {
// 清理定时器
if (loadingTime.value) {
clearTimeout(loadingTime.value)
}
// 加载完成
loading.value = false
}
}
const conversationTimeGroup = async (list: ChatConversationVO[]) => {
// 排序、指定、时间分组(今天、一天前、三天前、七天前、30天前)
const groupMap = {
'置顶': [],
'今天': [],
'一天前': [],
'三天前': [],
'七天前': [],
'三十天前': []
}
// 当前时间的时间戳
const now = Date.now();
// 定义时间间隔常量（单位：毫秒）
const oneDay = 24 * 60 * 60 * 1000;
const threeDays = 3 * oneDay;
const sevenDays = 7 * oneDay;
const thirtyDays = 30 * oneDay;
for (const conversation: ChatConversationVO of list) {
// 置顶
if (conversation.pinned) {
groupMap['置顶'].push(conversation)
continue
}
// 计算时间差（单位：毫秒）
const diff = now - conversation.updateTime;
// 根据时间间隔判断
if (diff < oneDay) {
groupMap['今天'].push(conversation)
} else if (diff < threeDays) {
groupMap['一天前'].push(conversation)
} else if (diff < sevenDays) {
groupMap['三天前'].push(conversation)
} else if (diff < thirtyDays) {
groupMap['七天前'].push(conversation)
} else {
groupMap['三十天前'].push(conversation)
}
}
console.log('----groupMap', groupMap)
return groupMap
}
/**
* 对话 - 新建
*/
const createConversation = async () => {
// 1. 新建对话
const conversationId = await ChatConversationApi.createChatConversationMy(
{} as unknown as ChatConversationVO
)
// 2. 获取对话内容
await getChatConversationList()
// 3. 选中对话
await handleConversationClick(conversationId)
// 4. 回调
emits('onConversationCreate')
}
/**
* 对话 - 更新标题
*/
const updateConversationTitle = async (conversation: ChatConversationVO) => {
// 1. 二次确认
const {value} = await ElMessageBox.prompt('修改标题', {
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '标题不能为空',
inputValue: conversation.title
})
// 2. 发起修改
await ChatConversationApi.updateChatConversationMy({
id: conversation.id,
title: value
} as ChatConversationVO)
message.success('重命名成功')
// 3. 刷新列表
await getChatConversationList()
// 4. 过滤当前切换的
const filterConversationList = conversationList.value.filter(item => {
return item.id === conversation.id
})
if (filterConversationList.length > 0) {
// tip：避免切换对话
if (activeConversationId.value === filterConversationList[0].id) {
emits('onConversationClick', filterConversationList[0])
}
}
}
/**
* 删除聊天对话
*/
const deleteChatConversation = async (conversation: ChatConversationVO) => {
try {
// 删除的二次确认
await message.delConfirm(`是否确认删除对话 - ${conversation.title}?`)
// 发起删除
await ChatConversationApi.deleteChatConversationMy(conversation.id)
message.success('对话已删除')
// 刷新列表
await getChatConversationList()
// 回调
emits('onConversationDelete', conversation)
} catch {
}
}
/**
* 对话置顶
*/
// TODO @fan：应该是 handleXXX，handler 是名词哈
const handlerTop = async (conversation: ChatConversationVO) => {
// 更新对话置顶
conversation.pinned = !conversation.pinned
await ChatConversationApi.updateChatConversationMy(conversation)
// 刷新对话
await getChatConversationList()
}
// TODO @fan:类似 ============ 分块的，最后后面也有 ============ 哈
// ============ 角色仓库
/**
* 角色仓库抽屉
*/
const handleRoleRepository = async () => {
drawer.value = !drawer.value
}
// ============= 清空对话
/**
* 清空对话
*/
const handleClearConversation = async () => {
// TODO @fan：可以使用 await message.confirm( 简化，然后使用 await 改成同步的逻辑，会更简洁
ElMessageBox.confirm(
'确认后对话会全部清空，置顶的对话除外。',
'确认提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
await ChatConversationApi.deleteMyAllExceptPinned()
ElMessage({
message: '操作成功!',
type: 'success'
})
// 清空 对话 和 对话内容
activeConversationId.value = null
// 获取 对话列表
await getChatConversationList()
// 回调 方法
emits('onConversationClear')
})
.catch(() => {
})
}
// ============ 组件 onMounted
const { activeId } = toRefs(props)
watch(activeId, async (newValue, oldValue) => {
// 更新选中
activeConversationId.value = newValue as string
})
// 定义 public 方法
defineExpose({createConversation})
onMounted(async () => {
// 获取 对话列表
await getChatConversationList()
// 默认选中
if (props.activeId != null) {
activeConversationId.value = props.activeId
} else {
// 首次默认选中第一个
if (conversationList.value.length) {
activeConversationId.value = conversationList.value[0].id
// 回调 onConversationClick
await emits('onConversationClick', conversationList.value[0])
}
}
})
</script>
<style scoped lang="scss">
.conversation-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 10px;
padding-top: 10px;
overflow: hidden;
.btn-new-conversation {
padding: 18px 0;
}
.search-input {
margin-top: 20px;
}
.conversation-list {
overflow: auto;
height: 100%;
.classify-title {
padding-top: 10px;
}
.conversation-item {
margin-top: 5px;
}
.conversation {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
padding: 0 5px;
cursor: pointer;
border-radius: 5px;
align-items: center;
line-height: 30px;
&.active {
background-color: #e6e6e6;
.button {
display: inline-block;
}
}
.title-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
padding: 2px 10px;
max-width: 220px;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.77);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
width: 25px;
height: 25px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-items: center;
}
// 对话编辑、删除
.button-wrapper {
right: 2px;
display: flex;
flex-direction: row;
justify-items: center;
color: #606266;
.btn {
margin: 0;
}
}
}
}
// 角色仓库、清空未设置对话
.tool-box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
//width: 100%;
padding: 0 20px;
background-color: #f4f4f4;
box-shadow: 0 0 1px 1px rgba(228, 228, 228, 0.8);
line-height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--el-text-color);
> div {
display: flex;
align-items: center;
color: #606266;
padding: 0;
margin: 0;
cursor: pointer;
> span {
margin-left: 5px;
}
}
}
}
</style>

322
src/views/ai/chat/Message.vue Normal file
View File

@ -0,0 +1,322 @@
<template>
<div ref="messageContainer" style="height: 100%; overflow-y: auto; position: relative">
<div class="chat-list" v-for="(item, index) in list" :key="index">
<!-- 靠左 message -->
<div class="left-message message-item" v-if="item.type !== 'user'">
<div class="avatar">
<el-avatar :src="roleAvatar" />
</div>
<div class="message">
<div>
<el-text class="time">{{ formatDate(item.createTime) }}</el-text>
</div>
<div class="left-text-container" ref="markdownViewRef">
<MarkdownView class="left-text" :content="item.content" />
</div>
<div class="left-btns">
<el-button class="btn-cus" link @click="noCopy(item.content)">
<img class="btn-image" src="@/assets/ai/copy.svg" />
</el-button>
<el-button class="btn-cus" link @click="onDelete(item.id)">
<img class="btn-image" src="@/assets/ai/delete.svg" style="height: 17px" />
</el-button>
</div>
</div>
</div>
<!-- 靠右 message -->
<div class="right-message message-item" v-if="item.type === 'user'">
<div class="avatar">
<el-avatar :src="userAvatar" />
</div>
<div class="message">
<div>
<el-text class="time">{{ formatDate(item.createTime) }}</el-text>
</div>
<div class="right-text-container">
<div class="right-text">{{ item.content }}</div>
</div>
<div class="right-btns">
<el-button class="btn-cus" link @click="noCopy(item.content)">
<img class="btn-image" src="@/assets/ai/copy.svg" />
</el-button>
<el-button class="btn-cus" link @click="onDelete(item.id)">
<img
class="btn-image"
src="@/assets/ai/delete.svg"
style="height: 17px; margin-right: 12px"
/>
</el-button>
<el-button class="btn-cus" link @click="onRefresh(item)">
<el-icon size="17"><RefreshRight /></el-icon>
</el-button>
<el-button class="btn-cus" link @click="onEdit(item)">
<el-icon size="17"><Edit /></el-icon>
</el-button>
</div>
</div>
</div>
</div>
</div>
<!-- 回到底部 -->
<div v-if="isScrolling" class="to-bottom" @click="handleGoBottom">
<el-button :icon="ArrowDownBold" circle />
</div>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import MarkdownView from '@/components/MarkdownView/index.vue'
import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
import { useClipboard } from '@vueuse/core'
import { PropType } from 'vue'
import { ArrowDownBold, Edit, RefreshRight } from '@element-plus/icons-vue'
import { ChatConversationVO } from '@/api/ai/chat/conversation'
import {useUserStore} from '@/store/modules/user';
import userAvatarDefaultImg from '@/assets/imgs/avatar.gif'
import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
const { copy } = useClipboard() // 初始化 copy 到粘贴板
// 判断 消息列表 滚动的位置(用于判断是否需要滚动到消息最下方)
const messageContainer: any = ref(null)
const isScrolling = ref(false) //用于判断用户是否在滚动
const userStore = useUserStore()
const userAvatar = computed(() => userStore.user.avatar ?? userAvatarDefaultImg)
const roleAvatar = computed(() => props.conversation.roleAvatar ?? roleAvatarDefaultImg)
// 定义 props
const props = defineProps({
conversation: {
type: Object as PropType<ChatConversationVO>,
required: true
},
list: {
type: Array as PropType<ChatMessageVO[]>,
required: true
}
})
// ============ 处理对话滚动 ==============
const scrollToBottom = async (isIgnore?: boolean) => {
await nextTick(() => {
// TODO @fan：中文写作习惯，中英文之间要有空格；另外，nextick 哈，idea 如果有绿色波兰线，可以关注下
//注意要使用nexttick以免获取不到dom
if (isIgnore || !isScrolling.value) {
messageContainer.value.scrollTop =
messageContainer.value.scrollHeight - messageContainer.value.offsetHeight
}
})
}
function handleScroll() {
const scrollContainer = messageContainer.value
const scrollTop = scrollContainer.scrollTop
const scrollHeight = scrollContainer.scrollHeight
const offsetHeight = scrollContainer.offsetHeight
if (scrollTop + offsetHeight < scrollHeight - 100) {
// 用户开始滚动并在最底部之上，取消保持在最底部的效果
isScrolling.value = true
} else {
// 用户停止滚动并滚动到最底部，开启保持到最底部的效果
isScrolling.value = false
}
}
/**
* 复制
*/
const noCopy = async (content) => {
copy(content)
ElMessage({
message: '复制成功!',
type: 'success'
})
}
/**
* 删除
*/
const onDelete = async (id) => {
// 删除 message
await ChatMessageApi.delete(id)
ElMessage({
message: '删除成功!',
type: 'success'
})
// 回调
emits('onDeleteSuccess')
}
/**
* 刷新
*/
const onRefresh = async (message: ChatMessageVO) => {
emits('onRefresh', message)
}
/**
* 编辑
*/
const onEdit = async (message: ChatMessageVO) => {
emits('onEdit', message)
}
/**
* 回到底部
*/
const handleGoBottom = async () => {
const scrollContainer = messageContainer.value
scrollContainer.scrollTop = scrollContainer.scrollHeight
}
/**
* 回到顶部
*/
const handlerGoTop = async () => {
const scrollContainer = messageContainer.value
scrollContainer.scrollTop = 0
}
// 监听 list
// TODO @fan：这个木有，是不是删除啦
const { list, conversationId } = toRefs(props)
watch(list, async (newValue, oldValue) => {
console.log('watch list', list)
})
// 提供方法给 parent 调用
defineExpose({ scrollToBottom, handlerGoTop })
// 定义 emits
const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit'])
// onMounted
onMounted(async () => {
messageContainer.value.addEventListener('scroll', handleScroll)
})
</script>
<style scoped lang="scss">
.message-container {
position: relative;
//top: 0;
//bottom: 0;
//left: 0;
//right: 0;
//width: 100%;
//height: 100%;
overflow-y: scroll;
//padding: 0 15px;
//z-index: -1;
}
// 中间
.chat-list {
display: flex;
flex-direction: column;
overflow-y: hidden;
padding: 0 20px;
.message-item {
margin-top: 50px;
}
.left-message {
display: flex;
flex-direction: row;
}
.right-message {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
}
.avatar {
//height: 170px;
//width: 170px;
}
.message {
display: flex;
flex-direction: column;
text-align: left;
margin: 0 15px;
.time {
text-align: left;
line-height: 30px;
}
.left-text-container {
position: relative;
display: flex;
flex-direction: column;
overflow-wrap: break-word;
background-color: rgba(228, 228, 228, 0.8);
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.8);
border-radius: 10px;
padding: 10px 10px 5px 10px;
.left-text {
color: #393939;
font-size: 0.95rem;
}
}
.right-text-container {
display: flex;
flex-direction: row-reverse;
.right-text {
font-size: 0.95rem;
color: #fff;
display: inline;
background-color: #267fff;
color: #fff;
box-shadow: 0 0 0 1px #267fff;
border-radius: 10px;
padding: 10px;
width: auto;
overflow-wrap: break-word;
white-space: pre-wrap;
}
}
.left-btns {
display: flex;
flex-direction: row;
margin-top: 8px;
}
.right-btns {
display: flex;
flex-direction: row-reverse;
margin-top: 8px;
}
}
// 复制、删除按钮
.btn-cus {
display: flex;
background-color: transparent;
align-items: center;
.btn-image {
height: 20px;
}
}
.btn-cus:hover {
cursor: pointer;
background-color: #f6f6f6;
}
}
// 回到底部
.to-bottom {
position: absolute;
z-index: 1000;
bottom: 0;
right: 50%;
}
</style>

15
src/views/ai/chat/MessageLoading.vue Normal file
View File

@ -0,0 +1,15 @@
<!-- message 加载页面 -->
<template>
<div class="message-loading" >
<el-skeleton animated />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.message-loading {
padding: 30px 30px;
}
</style>

50
src/views/ai/chat/MessageNewChat.vue Normal file
View File

@ -0,0 +1,50 @@
<!-- message 新增对话 -->
<template>
<div class="new-chat" >
<div class="box-center">
<div class="tip">点击下方按钮，开始你的对话吧</div>
<div class="btns"><el-button type="primary" round @click="handlerNewChat">新建对话</el-button></div>
</div>
</div>
</template>
<script setup lang="ts">
// 定义钩子
const emits = defineEmits(['onNewChat'])
/**
* 新建 chat
*/
const handlerNewChat = async () => {
await emits('onNewChat')
}
</script>
<style scoped lang="scss">
.new-chat {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 100%;
.box-center {
display: flex;
flex-direction: column;
justify-content: center;
.tip {
font-size: 14px;
color: #858585;
}
.btns {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 20px;
}
}
}
</style>

141
src/views/ai/chat/components/ChatConversationUpdateForm.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<Dialog title="设定" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="130px"
v-loading="formLoading"
>
<el-form-item label="角色设定" prop="systemMessage">
<el-input type="textarea" v-model="formData.systemMessage" rows="4" placeholder="请输入角色设定" />
</el-form-item>
<el-form-item label="模型" prop="modelId">
<el-select v-model="formData.modelId" placeholder="请选择模型">
<el-option
v-for="chatModel in chatModelList"
:key="chatModel.id"
:label="chatModel.name"
:value="chatModel.id"
/>
</el-select>
</el-form-item>
<el-form-item label="温度参数" prop="temperature">
<el-input-number
v-model="formData.temperature"
placeholder="请输入温度参数"
:min="0"
:max="2"
:precision="2"
/>
</el-form-item>
<el-form-item label="回复数 Token 数" prop="maxTokens">
<el-input-number
v-model="formData.maxTokens"
placeholder="请输入回复数 Token 数"
:min="0"
:max="4096"
/>
</el-form-item>
<el-form-item label="上下文数量" prop="maxContexts">
<el-input-number
v-model="formData.maxContexts"
placeholder="请输入上下文数量"
:min="0"
:max="20"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { CommonStatusEnum } from '@/utils/constants'
import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
/** AI 聊天角色 表单 */
defineOptions({ name: 'ChatConversationUpdateForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
id: undefined,
systemMessage: undefined,
modelId: undefined,
temperature: undefined,
maxTokens: undefined,
maxContexts: undefined
})
const formRules = reactive({
modelId: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
temperature: [{ required: true, message: '温度参数不能为空', trigger: 'blur' }],
maxTokens: [{ required: true, message: '回复数 Token 数不能为空', trigger: 'blur' }],
maxContexts: [{ required: true, message: '上下文数量不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const chatModelList = ref([] as ChatModelVO[]) // 聊天模型列表
/** 打开弹窗 */
const open = async (id: number) => {
dialogVisible.value = true
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
const data = await ChatConversationApi.getChatConversationMy(id)
formData.value = Object.keys(formData.value).reduce((obj, key) => {
if (data.hasOwnProperty(key)) {
obj[key] = data[key]
}
return obj
}, {})
} finally {
formLoading.value = false
}
}
// 获得下拉数据
chatModelList.value = await ChatModelApi.getChatModelSimpleList(CommonStatusEnum.ENABLE)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ChatConversationVO
await ChatConversationApi.updateChatConversationMy(data)
message.success('对话配置已更新')
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
systemMessage: undefined,
modelId: undefined,
temperature: undefined,
maxTokens: undefined,
maxContexts: undefined
}
formRef.value?.resetFields()
}
</script>

48
src/views/ai/chat/components/Header.vue Normal file
View File

@ -0,0 +1,48 @@
<!-- header -->
<template>
<el-header class="chat-header">
<div class="title">
{{ title }}
</div>
<div class="title-right">
<slot></slot>
</div>
</el-header>
</template>
<script setup lang="ts">
// 设置组件属性
defineProps({
title: {
type: String,
required: true
}
})
</script>
<style scoped lang="scss">
.chat-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 10px;
white-space: nowrap;
text-overflow: ellipsis;
background-color: #ececec;
width: 100%;
.title {
font-size: 20px;
font-weight: bold;
overflow: hidden;
color: #3e3e3e;
max-width: 220px;
}
.title-right {
display: flex;
flex-direction: row;
}
}
</style>

896
src/views/ai/chat/index.vue
View File

@ -1,125 +1,676 @@
<template>
<el-container>
<!-- 左侧：会话列表 -->
<el-aside width="260px" class="conversation-container">
<!-- 左顶部：新建对话 -->
<el-button class="w-1/1" type="primary">
<Icon icon="ep:plus" class="mr-5px" />
新建对话
</el-button>
<!-- 左顶部：搜索对话 -->
<el-input
v-model="searchName"
class="mt-10px"
placeholder="搜索历史记录"
@keyup="searchConversation"
>
<template #prefix>
<Icon icon="ep:search" />
</template>
</el-input>
<!-- 左中间：对话列表 -->
<div class="conversation-list" :style="{ height: leftHeight + 'px' }">
<el-row v-for="conversation in conversationList" :key="conversation.id">
<div
:class="conversation.id === conversationId ? 'conversation active' : 'conversation'"
@click="changeConversation(conversation)"
>
<el-image :src="conversation.avatar" class="avatar" />
<span class="title">{{ conversation.title }}</span>
<span class="button">
<!-- TODO 芋艿：缺置顶按钮 -->
<el-icon title="编辑" @click="updateConversationTitle(conversation)">
<Icon icon="ep:edit" />
</el-icon>
<el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
<Icon icon="ep:delete" />
</el-icon>
</span>
</div>
</el-row>
</div>
<!-- 左底部：工具栏 TODO 芋艿：50% 不太对 -->
<div class="tool-box">
<sapn class="w-1/2"> <Icon icon="ep:user" /> 角色仓库 </sapn>
<sapn class="w-1/2"> <Icon icon="ep:delete" />清空未置顶对话</sapn>
</div>
</el-aside>
<!-- 右侧：会话详情 -->
<el-container class="ai-layout">
<!-- 左侧：对话列表 -->
<Conversation
:active-id="activeConversationId"
ref="conversationRef"
@onConversationCreate="handleConversationCreate"
@onConversationClick="handleConversationClick"
@onConversationClear="handlerConversationClear"
@onConversationDelete="handlerConversationDelete"
/>
<!-- 右侧：对话详情 -->
<el-container class="detail-container">
<!-- 右顶部 TODO 芋艿：右对齐 -->
<el-header class="header">
<el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button>
<el-button>
<Icon icon="ep:user" />
</el-button>
<el-button>
<Icon icon="ep:download" />
</el-button>
<el-button>
<Icon icon="ep:arrow-up" />
</el-button>
<div class="title">
{{ activeConversation?.title ? activeConversation?.title : '对话' }}
<span v-if="list.length">({{ list.length }})</span>
</div>
<div class="btns" v-if="activeConversation">
<el-button type="primary" bg plain size="small" @click="openChatConversationUpdateForm">
<span v-html="activeConversation?.modelName"></span>
<Icon icon="ep:setting" style="margin-left: 10px" />
</el-button>
<el-button size="small" class="btn" @click="handlerMessageClear">
<!-- TODO @fan：style 部分，可以考虑用 unocss 替代 -->
<img src="@/assets/ai/clear.svg" style="height: 14px" />
</el-button>
<!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
<el-button size="small" :icon="Download" class="btn" />
<el-button size="small" :icon="Top" class="btn" @click="handlerGoTop" />
</div>
</el-header>
<el-main>对话列表</el-main>
<el-footer>发送消息框</el-footer>
<!-- main：消息列表 -->
<el-main class="main-container">
<div>
<div class="message-container">
<MessageLoading v-if="listLoading" />
<MessageNewChat v-if="!activeConversation" @on-new-chat="handlerNewChat" />
<ChatEmpty
v-if="!listLoading && messageList.length === 0 && activeConversation"
@on-prompt="doSend"
/>
<Message
v-if="!listLoading && messageList.length > 0"
ref="messageRef"
:conversation="activeConversation"
:list="messageList"
@on-delete-success="handlerMessageDelete"
@on-edit="handlerMessageEdit"
@on-refresh="handlerMessageRefresh"
/>
</div>
</div>
</el-main>
<!-- 底部 -->
<el-footer class="footer-container">
<form class="prompt-from">
<textarea
class="prompt-input"
v-model="prompt"
@keydown="onSend"
@input="onPromptInput"
@compositionstart="onCompositionstart"
@compositionend="onCompositionend"
placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
></textarea>
<div class="prompt-btns">
<div>
<el-switch v-model="enableContext" />
<span style="font-size: 14px; color: #8f8f8f">上下文</span>
</div>
<el-button
type="primary"
size="default"
@click="onSendBtn"
:loading="conversationInProgress"
v-if="conversationInProgress == false"
>
{{ conversationInProgress ? '进行中' : '发送' }}
</el-button>
<el-button
type="danger"
size="default"
@click="stopStream()"
v-if="conversationInProgress == true"
>
停止
</el-button>
</div>
</form>
</el-footer>
</el-container>
<!-- ========= 额外组件 ========== -->
<!-- 更新对话 Form -->
<ChatConversationUpdateForm
ref="chatConversationUpdateFormRef"
@success="handlerTitleSuccess"
/>
</el-container>
</template>
<script setup lang="ts">
const conversationList = [
{
id: 1,
title: '测试标题',
avatar:
'http://test.yudao.iocoder.cn/96c787a2ce88bf6d0ce3cd8b6cf5314e80e7703cd41bf4af8cd2e2909dbd6b6d.png'
},
{
id: 2,
title: '测试对话',
avatar:
'http://test.yudao.iocoder.cn/96c787a2ce88bf6d0ce3cd8b6cf5314e80e7703cd41bf4af8cd2e2909dbd6b6d.png'
}
]
const conversationId = ref(1)
const searchName = ref('')
const leftHeight = window.innerHeight - 240 // TODO 芋艿：这里还不太对
// TODO @fan：是不是把 index.vue 相关的，在这里新建一个 index 目录，然后挪进去哈。因为 /ai/chat 还会有其它功能。例如说，现在的 /ai/chat/manager 管理
import Conversation from './Conversation.vue'
import Message from './Message.vue'
import ChatEmpty from './ChatEmpty.vue'
import MessageLoading from './MessageLoading.vue'
import MessageNewChat from './MessageNewChat.vue'
import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
import ChatConversationUpdateForm from '@/views/ai/chat/components/ChatConversationUpdateForm.vue'
import { Download, Top } from '@element-plus/icons-vue'
const changeConversation = (conversation) => {
console.log(conversation)
conversationId.value = conversation.id
// TODO 芋艿：待实现
}
const route = useRoute() // 路由
const message = useMessage() // 消息弹窗
const updateConversationTitle = (conversation) => {
console.log(conversation)
// TODO 芋艿：待实现
}
// ref 属性定义
const activeConversationId = ref<string | null>(null) // 选中的对话编号
const activeConversation = ref<ChatConversationVO | null>(null) // 选中的 Conversation
const conversationInProgress = ref(false) // 对话进行中
const conversationInAbortController = ref<any>() // 对话进行中 abort 控制器(控制 stream 对话)
const inputTimeout = ref<any>() // 处理输入中回车的定时器
const prompt = ref<string>() // prompt
const enableContext = ref<boolean>(true) // 是否开启上下文
const deleteConversationTitle = (conversation) => {
console.log(conversation)
// TODO 芋艿：待实现
}
// TODO @fan：这几个变量，可以注释在补下哈；另外，fullText 可以明确是生成中的消息 Text，这样更容易理解哈；
const fullText = ref('')
const displayedText = ref('')
const textSpeed = ref<number>(50) // Typing speed in milliseconds
const textRoleRunning = ref<boolean>(false) // Typing speed in milliseconds
const searchConversation = () => {
// TODO 芋艿：待实现
}
</script>
<style lang="scss" scoped>
.conversation-container {
.conversation-list {
.conversation {
display: flex;
justify-content: flex-start;
width: 100%;
padding: 5px 5px 0 0;
cursor: pointer;
&.active {
// TODO 芋艿：这里不太对
background-color: #343540;
.button {
display: inline;
// chat message 列表
// TODO @fan：list、listLoading、listLoadingTime 不能体现出来是消息列表，是不是可以变量再优化下
const list = ref<ChatMessageVO[]>([]) // 列表的数据
const listLoading = ref<boolean>(false) // 是否加载中
const listLoadingTime = ref<any>() // time 定时器，如果加载速度很快，就不进入加载中
// 判断 消息列表 滚动的位置(用于判断是否需要滚动到消息最下方)
const messageRef = ref()
const conversationRef = ref()
const isComposing = ref(false) // 判断用户是否在输入
// 默认 role 头像
const defaultRoleAvatar =
'http://test.yudao.iocoder.cn/eaef5f41acb911dd718429a0702dcc3c61160d16e57ba1d543132fab58934f9f.png'
// =========== 自提滚动效果
// TODO @fan：这个方法，要不加个方法注释
const textRoll = async () => {
let index = 0
try {
// 只能执行一次
if (textRoleRunning.value) {
return
}
// 设置状态
textRoleRunning.value = true
displayedText.value = ''
const task = async () => {
// 调整速度
const diff = (fullText.value.length - displayedText.value.length) / 10
if (diff > 5) {
textSpeed.value = 10
} else if (diff > 2) {
textSpeed.value = 30
} else if (diff > 1.5) {
textSpeed.value = 50
} else {
textSpeed.value = 100
}
// 对话结束，就按 30 的速度
if (!conversationInProgress.value) {
textSpeed.value = 10
}
// console.log('index < fullText.value.length', index < fullText.value.length, conversationInProgress.value)
if (index < fullText.value.length) {
displayedText.value += fullText.value[index]
index++
// 更新 message
const lastMessage = list.value[list.value.length - 1]
lastMessage.content = displayedText.value
// TODO @fan：ist.value？，还是 ist.value.length 哈？
list.value[list.value - 1] = lastMessage
// 滚动到住下面
await scrollToBottom()
// 重新设置任务
timer = setTimeout(task, textSpeed.value)
} else {
// 不是对话中可以结束
if (!conversationInProgress.value) {
textRoleRunning.value = false
clearTimeout(timer)
console.log('字体滚动退出!')
} else {
// 重新设置任务
timer = setTimeout(task, textSpeed.value)
}
}
}
let timer = setTimeout(task, textSpeed.value)
} finally {
}
}
// ============ 处理对话滚动 ==============
function scrollToBottom(isIgnore?: boolean) {
// isIgnore = isIgnore !== null ? isIgnore : false
nextTick(() => {
if (messageRef.value) {
messageRef.value.scrollToBottom(isIgnore)
}
})
}
// ============= 处理聊天输入回车发送 =============
// TODO @fan：是不是可以通过 @keydown.enter、@keydown.shift.enter 来实现，回车发送、shift+回车换行；主要看看，是不是可以简化 isComposing 相关的逻辑
const onCompositionstart = () => {
isComposing.value = true
}
const onCompositionend = () => {
// console.log('输入结束...')
setTimeout(() => {
isComposing.value = false
}, 200)
}
const onPromptInput = (event) => {
// 非输入法 输入设置为 true
if (!isComposing.value) {
// 回车 event data 是 null
if (event.data == null) {
return
}
isComposing.value = true
}
// 清理定时器
if (inputTimeout.value) {
clearTimeout(inputTimeout.value)
}
// 重置定时器
inputTimeout.value = setTimeout(() => {
isComposing.value = false
}, 400)
}
// ============== 对话消息相关 =================
/**
* 发送消息
*/
const onSend = async (event) => {
// 判断用户是否在输入
if (isComposing.value) {
return
}
// 进行中不允许发送
if (conversationInProgress.value) {
return
}
const content = prompt.value?.trim() as string
if (event.key === 'Enter') {
if (event.shiftKey) {
// 插入换行
prompt.value += '\r\n'
event.preventDefault() // 防止默认的换行行为
} else {
// 发送消息
await doSend(content)
event.preventDefault() // 防止默认的提交行为
}
}
}
const onSendBtn = async () => {
await doSend(prompt.value?.trim() as string)
}
const doSend = async (content: string) => {
if (content.length < 2) {
// TODO @fan：这个 message.error(`上传文件大小不能超过${props.fileSize}MB!`) 可以替代，这种形式
ElMessage({
message: '请输入内容!',
type: 'error'
})
return
}
// TODO @fan：这个 message.error(`上传文件大小不能超过${props.fileSize}MB!`) 可以替代，这种形式
if (activeConversationId.value == null) {
ElMessage({
message: '还没创建对话，不能发送!',
type: 'error'
})
return
}
// 清空输入框
prompt.value = ''
// TODO @fan：idea 这里会报类型错误，是不是可以解决下哈
const userMessage = {
conversationId: activeConversationId.value,
content: content
} as ChatMessageVO
// stream
await doSendStream(userMessage)
}
const doSendStream = async (userMessage: ChatMessageVO) => {
// 创建AbortController实例，以便中止请求
conversationInAbortController.value = new AbortController()
// 标记对话进行中
conversationInProgress.value = true
// 设置为空
fullText.value = ''
try {
// 先添加两个假数据，等 stream 返回再替换
list.value.push({
id: -1,
conversationId: activeConversationId.value,
type: 'user',
content: userMessage.content,
createTime: new Date()
} as ChatMessageVO)
list.value.push({
id: -2,
conversationId: activeConversationId.value,
type: 'system',
content: '思考中...',
createTime: new Date()
} as ChatMessageVO)
// 滚动到最下面
// TODO @fan：可以 await nextTick()；然后同步调用 scrollToBottom()
nextTick(async () => {
await scrollToBottom()
})
// 开始滚动
textRoll()
// 发送 event stream
let isFirstMessage = true // TODO @fan：isFirstChunk 会更精准
ChatMessageApi.sendStream(
userMessage.conversationId, // TODO 芋艿：这里可能要在优化；
userMessage.content,
conversationInAbortController.value,
enableContext.value,
async (res) => {
console.log('res', res)
const { code, data, msg } = JSON.parse(res.data)
if (code !== 0) {
message.alert(`对话异常! ${msg}`)
return
}
// 如果内容为空，就不处理。
if (data.receive.content === '') {
return
}
// 首次返回需要添加一个 message 到页面，后面的都是更新
if (isFirstMessage) {
isFirstMessage = false
// 弹出两个 假数据
list.value.pop()
list.value.pop()
// 更新返回的数据
list.value.push(data.send)
list.value.push(data.receive)
}
// debugger
fullText.value = fullText.value + data.receive.content
// 滚动到最下面
await scrollToBottom()
},
(error) => {
message.alert(`对话异常! ${error}`)
// TODO @fan：是不是可以复用 stopStream 方法
// 标记对话结束
conversationInProgress.value = false
// 结束 stream 对话
conversationInAbortController.value.abort()
},
() => {
// TODO @fan：是不是可以复用 stopStream 方法
// 标记对话结束
conversationInProgress.value = false
// 结束 stream 对话
conversationInAbortController.value.abort()
}
)
} finally {
}
}
const stopStream = async () => {
console.log('stopStream...')
// tip：如果 stream 进行中的 message，就需要调用 controller 结束
if (conversationInAbortController.value) {
conversationInAbortController.value.abort()
}
// 设置为 false
conversationInProgress.value = false
}
// ============== message 数据 =================
/** 消息列表 */
const messageList = computed(() => {
if (list.value.length > 0) {
return list.value
}
// 没有消息时，如果有 systemMessage 则展示它
// TODO add by 芋艿：这个消息下面，不能有复制、删除按钮
if (activeConversation.value?.systemMessage) {
return [
{
id: 0,
type: 'system',
content: activeConversation.value.systemMessage
}
]
}
return []
})
// TODO @fan：一般情况下，项目方法注释用 /** */，啊哈，主要保持风格统一，= = 少占点行哈，
/**
* 获取 - message 列表
*/
const getMessageList = async () => {
try {
// time 定时器，如果加载速度很快，就不进入加载中
listLoadingTime.value = setTimeout(() => {
listLoading.value = true
}, 60)
if (activeConversationId.value === null) {
return
}
// 获取列表数据
list.value = await ChatMessageApi.messageList(activeConversationId.value)
// 滚动到最下面
await nextTick(() => {
// 滚动到最后
scrollToBottom()
})
} finally {
// time 定时器，如果加载速度很快，就不进入加载中
if (listLoadingTime.value) {
clearTimeout(listLoadingTime.value)
}
// 加载结束
listLoading.value = false
}
}
/** 修改聊天对话 */
const chatConversationUpdateFormRef = ref()
const openChatConversationUpdateForm = async () => {
chatConversationUpdateFormRef.value.open(activeConversationId.value)
}
/**
* 对话 - 标题修改成功
*/
const handlerTitleSuccess = async () => {
// TODO 需要刷新 对话列表
await getConversation(activeConversationId.value)
}
/**
* 对话 - 创建
*/
const handleConversationCreate = async () => {
// 创建新的对话，清空输入框
prompt.value = ''
}
/**
* 对话 - 点击
*/
const handleConversationClick = async (conversation: ChatConversationVO) => {
// 对话进行中，不允许切换
if (conversationInProgress.value) {
await message.alert('对话中，不允许切换!')
return false
}
// 更新选中的对话 id
activeConversationId.value = conversation.id
activeConversation.value = conversation
// 处理进行中的对话
if (conversationInProgress.value) {
await stopStream()
}
// 刷新 message 列表
await getMessageList()
// 滚动底部
scrollToBottom(true)
// 清空输入框
prompt.value = ''
return true
}
/**
* 对话 - 清理全部对话
*/
const handlerConversationClear = async () => {
// TODO @fan：需要加一个 对话进行中，不允许切换
activeConversationId.value = null
activeConversation.value = null
list.value = []
}
/**
* 对话 - 删除
*/
const handlerConversationDelete = async (delConversation: ChatConversationVO) => {
// 删除的对话如果是当前选中的，那么就重置
if (activeConversationId.value === delConversation.id) {
await handlerConversationClear()
}
}
/**
* 对话 - 获取
*/
const getConversation = async (id: string | null) => {
if (!id) {
return
}
const conversation: ChatConversationVO = await ChatConversationApi.getChatConversationMy(id)
if (conversation) {
activeConversation.value = conversation
activeConversationId.value = conversation.id
}
}
/**
* 对话 - 新建
*/
// TODO @fan：应该是 handleXXX，handler 是名词哈
const handlerNewChat = async () => {
// 创建对话
await conversationRef.value.createConversation()
}
// ============ message ===========
/**
* 删除 message
*/
const handlerMessageDelete = async () => {
if (conversationInProgress.value) {
message.alert('回答中，不能删除!')
return
}
// 刷新 message
await getMessageList()
}
/**
* 编辑 message：设置为 prompt，可以再次编辑
*/
const handlerMessageEdit = async (message: ChatMessageVO) => {
prompt.value = message.content
}
/**
* 刷新 message：基于指定消息，再次发起对话
*/
const handlerMessageRefresh = async (message: ChatMessageVO) => {
await doSend(message.content)
}
/**
* 回到顶部
*/
const handlerGoTop = async () => {
await messageRef.value.handlerGoTop()
}
/**
* message 清除
*/
const handlerMessageClear = async () => {
if (!activeConversationId.value) {
return
}
// TODO @fan：需要 try catch 下，不然点击取消会报异常
// 确认提示
await message.delConfirm('确认清空对话消息？')
// 清空对话
await ChatMessageApi.deleteByConversationId(activeConversationId.value as string)
// TODO @fan：是不是直接置空就好啦；
// 刷新 message 列表
await getMessageList()
}
/** 初始化 **/
onMounted(async () => {
// 设置当前对话 TODO 角色仓库过来的，自带 conversationId 需要选中
if (route.query.conversationId) {
const id = route.query.conversationId as string
activeConversationId.value = id
await getConversation(id)
}
// 获取列表数据
listLoading.value = true
await getMessageList()
})
</script>
<style lang="scss" scoped>
.ai-layout {
// TODO @范 这里height不能 100% 先这样临时处理
position: absolute;
flex: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.conversation-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 10px;
padding-top: 10px;
.btn-new-conversation {
padding: 18px 0;
}
.search-input {
margin-top: 20px;
}
.conversation-list {
margin-top: 20px;
.conversation {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
padding: 0 5px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
align-items: center;
line-height: 30px;
&.active {
background-color: #e6e6e6;
.button {
display: inline-block;
}
}
.title-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
padding: 5px 10px;
max-width: 220px;
@ -128,39 +679,144 @@ const searchConversation = () => {
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
flex-direction: row;
justify-items: center;
}
.button {
position: absolute;
// 对话编辑、删除
.button-wrapper {
right: 2px;
top: 16px;
display: flex;
flex-direction: row;
justify-items: center;
color: #606266;
.el-icon {
margin-right: 5px;
}
}
}
}
.tool-box {
// 角色仓库、清空未设置对话
.tool-box {
line-height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--el-text-color);
> div {
display: flex;
justify-content: flex-start;
padding: 0 20px 10px 20px;
border-top: 1px solid black;
align-items: center;
color: #606266;
padding: 0;
margin: 0;
cursor: pointer;
> span {
margin-left: 5px;
}
}
}
}
// 头部
.detail-container {
background: #ffffff;
.header {
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 10px;
justify-content: space-between;
background: #fbfbfb;
box-shadow: 0 0 0 0 #dcdfe6;
.title {
font-size: 18px;
font-weight: bold;
}
.btns {
display: flex;
width: 300px;
flex-direction: row;
justify-content: flex-end;
//justify-content: space-between;
.btn {
padding: 10px;
}
}
}
}
// main 容器
.main-container {
margin: 0;
padding: 0;
position: relative;
height: 100%;
width: 100%;
.message-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
//width: 100%;
//height: 100%;
overflow-y: hidden;
padding: 0;
margin: 0;
}
}
// 底部
.footer-container {
display: flex;
flex-direction: column;
height: auto;
margin: 0;
padding: 0;
.prompt-from {
display: flex;
flex-direction: column;
height: auto;
border: 1px solid #e3e3e3;
border-radius: 10px;
margin: 10px 20px 20px 20px;
padding: 9px 10px;
}
.prompt-input {
height: 80px;
//box-shadow: none;
border: none;
box-sizing: border-box;
resize: none;
padding: 0px 2px;
//padding: 5px 5px;
overflow: auto;
}
.prompt-input:focus {
outline: none;
}
.prompt-btns {
display: flex;
justify-content: space-between;
padding-bottom: 0px;
padding-top: 5px;
}
}
</style>

163
src/views/ai/chat/manager/ChatConversationList.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="用户编号" prop="userId">
<el-select
v-model="queryParams.userId"
clearable
placeholder="请输入用户编号"
class="!w-240px"
>
<el-option
v-for="item in userList"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="聊天编号" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入聊天编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="对话编号" align="center" prop="id" width="180" fixed="left" />
<el-table-column label="对话标题" align="center" prop="title" width="180" fixed="left" />
<el-table-column label="用户" align="center" prop="userId" width="180">
<template #default="scope">
<span>{{ userList.find((item) => item.id === scope.row.userId)?.nickname }}</span>
</template>
</el-table-column>
<el-table-column label="角色" align="center" prop="roleName" width="180" />
<el-table-column label="模型标识" align="center" prop="model" width="180" />
<el-table-column label="消息数" align="center" prop="messageCount" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="温度参数" align="center" prop="temperature" />
<el-table-column label="回复 Token 数" align="center" prop="maxTokens" width="120" />
<el-table-column label="上下文数量" align="center" prop="maxContexts" width="120" />
<el-table-column label="操作" align="center" width="180" fixed="right">
<template #default="scope">
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['ai:chat-conversation:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
import * as UserApi from '@/api/system/user'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ChatConversationVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: undefined,
title: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ChatConversationApi.getChatConversationPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ChatConversationApi.deleteChatConversationByAdmin(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(async () => {
getList()
// 获得用户列表
userList.value = await UserApi.getSimpleUserList()
})
</script>

175
src/views/ai/chat/manager/ChatMessageList.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="对话编号" prop="conversationId">
<el-input
v-model="queryParams.conversationId"
placeholder="请输入对话编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="用户编号" prop="userId">
<el-select
v-model="queryParams.userId"
clearable
placeholder="请输入用户编号"
class="!w-240px"
>
<el-option
v-for="item in userList"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="消息编号" align="center" prop="id" width="180" fixed="left" />
<el-table-column
label="对话编号"
align="center"
prop="conversationId"
width="180"
fixed="left"
/>
<el-table-column label="用户" align="center" prop="userId" width="180">
<template #default="scope">
<span>{{ userList.find((item) => item.id === scope.row.userId)?.nickname }}</span>
</template>
</el-table-column>
<el-table-column label="角色" align="center" prop="roleName" width="180" />
<el-table-column label="消息类型" align="center" prop="type" width="100" />
<el-table-column label="模型标识" align="center" prop="model" width="180" />
<el-table-column label="消息内容" align="center" prop="content" width="300" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="回复消息编号" align="center" prop="replyId" width="180" />
<el-table-column label="携带上下文" align="center" prop="useContext" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.useContext" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope">
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['ai:chat-message:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
import * as UserApi from '@/api/system/user'
import { DICT_TYPE } from '@/utils/dict'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ChatMessageVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
conversationId: undefined,
userId: undefined,
content: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ChatMessageApi.getChatMessagePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ChatMessageApi.deleteChatMessageByAdmin(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(async () => {
getList()
// 获得用户列表
userList.value = await UserApi.getSimpleUserList()
})
</script>

20
src/views/ai/chat/manager/index.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<ContentWrap>
<el-tabs>
<el-tab-pane label="对话列表">
<ChatConversationList />
</el-tab-pane>
<el-tab-pane label="消息列表">
<ChatMessageList />
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
import ChatConversationList from './ChatConversationList.vue'
import ChatMessageList from './ChatMessageList.vue'
/** AI 聊天对话 列表 */
defineOptions({ name: 'ChatConversation' })
</script>

47
src/views/ai/chat/role/RoleCategoryList.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div class="category-list">
<div class="category" v-for="(category) in categoryList" :key="category">
<el-button plain round size="small" v-if="category !== active" @click="handleCategoryClick(category)">{{ category }}</el-button>
<el-button plain round size="small" v-else type="primary" @click="handleCategoryClick(category)">{{ category }}</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import {PropType} from "vue";
// 定义属性
defineProps({
categoryList: {
type: Array as PropType<string[]>,
required: true
},
active: {
type: String,
required: false,
default: '全部'
}
})
// 定义回调
const emits = defineEmits(['onCategoryClick'])
// 处理分类点击事件
const handleCategoryClick = async (category) => {
emits('onCategoryClick', category)
}
</script>
<style scoped lang="scss">
.category-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
.category {
display: flex;
flex-direction: row;
margin-right: 10px;
}
}
</style>

188
src/views/ai/chat/role/RoleList.vue Normal file
View File

@ -0,0 +1,188 @@
<template>
<div class="card-list" ref="tabsRef" @scroll="handleTabsScroll">
<div class="card-item" v-for="role in roleList" :key="role.id">
<el-card class="card" body-class="card-body">
<!-- 更多 -->
<div class="more-container" v-if="showMore">
<el-dropdown @command="handleMoreClick">
<span class="el-dropdown-link">
<el-button type="text" >
<el-icon><More /></el-icon>
</el-button>
</span>
<!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="['edit', role]" >
<el-icon><EditPen /></el-icon>编辑
</el-dropdown-item>
<el-dropdown-item :command="['delete', role]" style="color: red;" >
<el-icon><Delete /></el-icon>
<span>删除</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 头像 -->
<div>
<img class="avatar" :src="role.avatar"/>
</div>
<div class="right-container">
<div class="content-container">
<div class="title">{{ role.name }}</div>
<div class="description">{{ role.description }}</div>
</div>
<div class="btn-container">
<el-button type="primary" size="small" @click="handleUseClick(role)">使用</el-button>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script setup lang="ts">
import {ChatRoleVO} from '@/api/ai/model/chatRole'
import {PropType, ref} from "vue";
import {Delete, EditPen, More} from "@element-plus/icons-vue";
const tabsRef = ref<any>() // tabs ref
// 定义属性
const props = defineProps({
loading: {
type: Boolean,
required: true
},
roleList: {
type: Array as PropType<ChatRoleVO[]>,
required: true
},
showMore: {
type: Boolean,
required: false,
default: false
}
})
// 定义钩子
const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage'])
// more 点击
const handleMoreClick = async (data) => {
const type = data[0]
const role = data[1]
if (type === 'delete') {
emits('onDelete', role)
} else {
emits('onEdit', role)
}
}
// 使用
const handleUseClick = (role) => {
emits('onUse', role)
}
const handleTabsScroll = async () => {
if (tabsRef.value) {
const { scrollTop, scrollHeight, clientHeight } = tabsRef.value;
console.log('scrollTop', scrollTop)
if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
console.log('分页')
// page.value++;
// fetchData(page.value);
await emits('onPage')
}
}
}
onMounted(() => {
console.log('props', props.roleList)
})
</script>
<style lang="scss">
// 重写 card 组件 body 样式
.card-body {
max-width: 240px;
width: 240px;
padding: 15px 15px 10px 15px;
display: flex;
flex-direction: row;
justify-content: flex-start;
position: relative;
}
</style>
<style scoped lang="scss">
// 卡片列表
.card-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
height: 100%;
overflow: auto;
padding: 0px 25px;
padding-bottom: 140px;
align-items: start;
align-content: flex-start;
justify-content: start;
.card {
display: inline-block;
margin-right: 20px;
border-radius: 10px;
margin-bottom: 20px;
position: relative;
.more-container {
position: absolute;
top: 0;
right: 12px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 10px;
overflow: hidden;
}
.right-container {
margin-left: 10px;
width: 100%;
//height: 100px;
.content-container {
height: 85px;
.title {
font-size: 18px;
font-weight: bold;
color: #3e3e3e;
}
.description {
margin-top: 10px;
font-size: 14px;
color: #6a6a6a;
}
}
.btn-container {
display: flex;
flex-direction: row-reverse;
margin-top: 2px;
}
}
}
}
</style>

296
src/views/ai/chat/role/index.vue Normal file
View File

@ -0,0 +1,296 @@
<!-- chat 角色仓库 -->
<template>
<el-container class="role-container">
<ChatRoleForm ref="formRef" @success="handlerAddRoleSuccess" />
<!-- header -->
<Header title="角色仓库" style="position: relative" />
<!-- main -->
<el-main class="role-main">
<div class="search-container">
<!-- 搜索按钮 -->
<el-input
:loading="loading"
v-model="search"
class="search-input"
size="default"
placeholder="请输入搜索的内容"
:suffix-icon="Search"
@change="getActiveTabsRole"
/>
<el-button
v-if="activeRole == 'my-role'"
type="primary"
@click="handlerAddRole"
style="margin-left: 20px"
>
<!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
<el-icon>
<User />
</el-icon>
添加角色
</el-button>
</div>
<!-- tabs -->
<el-tabs v-model="activeRole" class="tabs" @tab-click="handleTabsClick">
<el-tab-pane class="role-pane" label="我的角色" name="my-role">
<RoleList
:loading="loading"
:role-list="myRoleList"
:show-more="true"
@on-delete="handlerCardDelete"
@on-edit="handlerCardEdit"
@on-use="handlerCardUse"
@on-page="handlerCardPage('my')"
style="margin-top: 20px"
/>
</el-tab-pane>
<el-tab-pane label="公共角色" name="public-role">
<RoleCategoryList
class="role-category-list"
:category-list="categoryList"
:active="activeCategory"
@on-category-click="handlerCategoryClick"
/>
<RoleList
:role-list="publicRoleList"
@on-delete="handlerCardDelete"
@on-edit="handlerCardEdit"
@on-use="handlerCardUse"
@on-page="handlerCardPage('public')"
style="margin-top: 20px"
loading
/>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Header from '@/views/ai/chat/components/Header.vue'
import RoleList from './RoleList.vue'
import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
import RoleCategoryList from './RoleCategoryList.vue'
import { ChatRoleApi, ChatRolePageReqVO, ChatRoleVO } from '@/api/ai/model/chatRole'
import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
import { TabsPaneContext } from 'element-plus'
import { Search, User } from '@element-plus/icons-vue'
const router = useRouter() // 路由对象
// 属性定义
const loading = ref<boolean>(false) // 加载中
const activeRole = ref<string>('my-role') // 选中的角色 TODO @fan：是不是叫 activeTab 会更明确一点哈。选中的角色，会以为是某个角色
const search = ref<string>('') // 加载中
// TODO @fan：要不 myPage、pubPage，搞成类似 const queryParams = reactive({ ，分别搞成两个大的参数哈？
const myPageNo = ref<number>(1) // my 分页下标
const myPageSize = ref<number>(50) // my 分页大小
const myRoleList = ref<ChatRoleVO[]>([]) // my 分页大小
const publicPageNo = ref<number>(1) // public 分页下标
const publicPageSize = ref<number>(50) // public 分页大小
const publicRoleList = ref<ChatRoleVO[]>([]) // public 分页大小
const activeCategory = ref<string>('全部') // 选择中的分类
const categoryList = ref<string[]>([]) // 角色分类类别
/** tabs 点击 */
const handleTabsClick = async (tab: TabsPaneContext) => {
// 设置切换状态
activeRole.value = tab.paneName + ''
// 切换的时候重新加载数据
await getActiveTabsRole()
}
/** 获取 my role 我的角色 */
const getMyRole = async (append?: boolean) => {
const params: ChatRolePageReqVO = {
pageNo: myPageNo.value,
pageSize: myPageSize.value,
name: search.value,
publicStatus: false
}
const { total, list } = await ChatRoleApi.getMyPage(params)
if (append) {
myRoleList.value.push.apply(myRoleList.value, list)
} else {
myRoleList.value = list
}
}
/** 获取 public role 公共角色 */
const getPublicRole = async (append?: boolean) => {
const params: ChatRolePageReqVO = {
pageNo: publicPageNo.value,
pageSize: publicPageSize.value,
category: activeCategory.value === '全部' ? '' : activeCategory.value,
name: search.value,
publicStatus: true
}
const { total, list } = await ChatRoleApi.getMyPage(params)
if (append) {
publicRoleList.value.push.apply(publicRoleList.value, list)
} else {
publicRoleList.value = list
}
}
/** 获取选中的 tabs 角色 */
const getActiveTabsRole = async () => {
if (activeRole.value === 'my-role') {
myPageNo.value = 1
await getMyRole()
} else {
publicPageNo.value = 1
await getPublicRole()
}
}
/** 获取角色分类列表 */
const getRoleCategoryList = async () => {
const res = await ChatRoleApi.getCategoryList()
const defaultRole = ['全部']
categoryList.value = [...defaultRole, ...res]
}
/** 处理分类点击 */
const handlerCategoryClick = async (category: string) => {
// 切换选择的分类
activeCategory.value = category
// 筛选
await getActiveTabsRole()
}
/** 添加/修改操作 */
const formRef = ref()
const handlerAddRole = async () => {
formRef.value.open('my-create', null, '添加角色')
}
/** 添加角色成功 */
const handlerAddRoleSuccess = async (e) => {
// 刷新数据
await getActiveTabsRole()
}
// card 删除
const handlerCardDelete = async (role) => {
await ChatRoleApi.deleteMy(role.id)
// 刷新数据
await getActiveTabsRole()
}
// card 编辑
const handlerCardEdit = async (role) => {
formRef.value.open('my-update', role.id, '编辑角色')
}
/** card 分页：获取下一页 */
const handlerCardPage = async (type) => {
console.log('handlerCardPage', type)
try {
loading.value = true
if (type === 'public') {
publicPageNo.value++
await getPublicRole(true)
} else {
myPageNo.value++
await getMyRole(true)
}
} finally {
loading.value = false
}
}
/** 选择 card 角色：新建聊天对话 */
const handlerCardUse = async (role) => {
// 1. 创建对话
const data: ChatConversationVO = {
roleId: role.id
} as unknown as ChatConversationVO
const conversationId = await ChatConversationApi.createChatConversationMy(data)
// 2. 跳转页面
// TODO @fan：最好用 name，后续可能会改~~~
await router.push({
path: `/ai/chat`,
query: {
conversationId: conversationId
}
})
}
/** 初始化 **/
onMounted(async () => {
// 获取分类
await getRoleCategoryList()
// 获取 role 数据
await getActiveTabsRole()
})
// TODO @fan：css 是不是可以融合到 scss 里面呀？
</script>
<style lang="css">
.el-tabs__content {
position: relative;
height: 100%;
overflow: hidden;
}
.el-tabs__nav-scroll {
margin: 10px 20px;
}
</style>
<!-- 样式 -->
<style scoped lang="scss">
// 跟容器
.role-container {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #ffffff;
overflow: hidden;
display: flex;
flex-direction: column;
.role-main {
flex: 1;
overflow: hidden;
margin: 0;
padding: 0;
position: relative;
.search-container {
margin: 20px 20px 0px 20px;
position: absolute;
right: 0;
top: -5px;
z-index: 100;
}
.search-input {
width: 240px;
}
.tabs {
position: relative;
height: 100%;
.role-category-list {
margin: 0 27px;
}
}
.role-pane {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
position: relative;
}
}
}
</style>

145
src/views/ai/image/ImageDetailDrawer.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<el-drawer
v-model="showDrawer"
title="图片详细"
@close="handlerDrawerClose"
custom-class="drawer-class"
>
<!-- 图片 -->
<div class="item">
<!-- <div class="header">-->
<!-- <div>图片</div>-->
<!-- <div>-->
<!-- </div>-->
<!-- </div>-->
<div class="body">
<!-- TODO @fan: 要不，这里只展示图片？？？不用 ImageTaskCard -->
<ImageTaskCard :image-detail="imageDetail" />
</div>
</div>
<!-- 时间 -->
<div class="item">
<div class="tip">时间</div>
<div class="body">
<div>提交时间：{{imageDetail.createTime}}</div>
<!-- TODO @fan：要不加个完成时间的字段 finishTime？updateTime 不算特别合理哈 -->
<div>生成时间：{{imageDetail.updateTime}}</div>
</div>
</div>
<!-- 模型 -->
<div class="item">
<div class="tip">模型</div>
<div class="body">
{{imageDetail.model}}({{imageDetail.height}}x{{imageDetail.width}})
</div>
</div>
<!-- 提示词 -->
<div class="item">
<div class="tip">提示词</div>
<div class="body">
{{imageDetail.prompt}}
</div>
</div>
<!-- 地址 -->
<div class="item">
<div class="tip">图片地址</div>
<div class="body">
{{imageDetail.picUrl}}
</div>
</div>
<!-- 风格 -->
<div class="item" v-if="imageDetail?.options?.style">
<div class="tip">风格</div>
<div class="body">
<!-- TODO @fan：貌似需要把 imageStyleList 搞到 api/image/index.ts 枚举起来？ -->
<!-- TODO @fan：这里的展示，可能需要按照平台做区分 -->
{{imageDetail?.options?.style}}
</div>
</div>
</el-drawer>
</template>
<script setup lang="ts">
import {ImageApi, ImageDetailVO} from '@/api/ai/image';
import ImageTaskCard from './ImageTaskCard.vue';
const showDrawer = ref<boolean>(false) // 是否显示
const imageDetail = ref<ImageDetailVO>({} as ImageDetailVO) // 图片详细信息
const props = defineProps({
show: {
type: Boolean,
require: true,
default: false
},
id: {
type: Number,
required: true
}
})
/** 抽屉 - close */
const handlerDrawerClose = async () => {
emits('handlerDrawerClose')
}
/** 获取 - 图片 detail */
const getImageDetail = async (id) => {
// 获取图片详细
imageDetail.value = await ImageApi.getImageDetail(id)
}
/** 任务 - detail */
const handlerTaskDetail = async () => {
showDrawer.value = true
}
// watch show
const { show } = toRefs(props)
watch(show, async (newValue, oldValue) => {
showDrawer.value = newValue as boolean
})
// watch id
const { id } = toRefs(props)
watch(id, async (newVal, oldVal) => {
if (newVal) {
await getImageDetail(newVal)
}
})
//
const emits = defineEmits(['handlerDrawerClose'])
//
onMounted(async () => {
})
</script>
<style scoped lang="scss">
.item {
margin-bottom: 20px;
width: 100%;
overflow: hidden;
word-wrap: break-word;
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.tip {
font-weight: bold;
font-size: 16px;
}
.body {
margin-top: 10px;
color: #616161;
.taskImage {
border-radius: 10px;
}
}
}
</style>

210
src/views/ai/image/ImageTask.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<el-card class="dr-task" body-class="task-card" shadow="never">
<template #header>绘画任务</template>
<div class="task-image-list" ref="imageTaskRef">
<ImageTaskCard
v-for="image in imageList"
:key="image"
:image-detail="image"
@on-btn-click="handlerImageBtnClick"
@on-mj-btn-click="handlerImageMjBtnClick"/>
</div>
<div class="task-image-pagination">
<el-pagination background layout="prev, pager, next"
:default-page-size="pageSize"
:total="pageTotal"
@change="handlerPageChange"
/>
</div>
</el-card>
<!-- 图片 detail 抽屉 -->
<ImageDetailDrawer
:show="isShowImageDetail"
:id="showImageDetailId"
@handler-drawer-close="handlerDrawerClose"
/>
</template>
<script setup lang="ts">
import {ImageApi, ImageDetailVO, ImageMjActionVO, ImageMjButtonsVO} from '@/api/ai/image';
import ImageDetailDrawer from './ImageDetailDrawer.vue'
import ImageTaskCard from './ImageTaskCard.vue'
import {ElLoading, LoadingOptionsResolved} from "element-plus";
const message = useMessage() // 消息弹窗
const imageList = ref<ImageDetailVO[]>([]) // image 列表
const imageListInterval = ref<any>() // image 列表定时器，刷新列表
const isShowImageDetail = ref<boolean>(false) // 是否显示 task 详情
const showImageDetailId = ref<number>(0) // 是否显示 task 详情
const imageTaskRef = ref<any>() // ref
const imageTaskLoadingInstance = ref<any>() // loading
const imageTaskLoading = ref<boolean>(false) // loading
const pageNo = ref<number>(1) // page no
const pageSize = ref<number>(10) // page size
const pageTotal = ref<number>(0) // page size
/** 抽屉 - close */
const handlerDrawerClose = async () => {
isShowImageDetail.value = false
}
/** 任务 - detail */
const handlerDrawerOpen = async () => {
isShowImageDetail.value = true
}
/**
* 获取 - image 列表
*/
const getImageList = async (apply:boolean = false) => {
imageTaskLoading.value = true
try {
imageTaskLoadingInstance.value = ElLoading.service({
target: imageTaskRef.value,
text: '加载中...'
} as LoadingOptionsResolved)
const { list, total } = await ImageApi.getImageList({pageNo: pageNo.value, pageSize: pageSize.value})
if (apply) {
imageList.value = [...imageList.value, ...list]
} else {
imageList.value = list
}
pageTotal.value = total
} finally {
if (imageTaskLoadingInstance.value) {
imageTaskLoadingInstance.value.close();
imageTaskLoadingInstance.value = null;
}
}
}
/** 图片 - btn click */
const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
// 获取 image detail id
showImageDetailId.value = imageDetail.id
console.log('type', imageDetail.id)
// 处理不用 btn
if (type === 'more') {
await handlerDrawerOpen()
} else if (type === 'delete') {
await message.confirm(`是否删除照片?`)
await ImageApi.deleteImage(imageDetail.id)
await getImageList()
await message.success("删除成功!")
} else if (type === 'download') {
await downloadImage(imageDetail.picUrl)
}
}
/** 图片 - mj btn click */
const handlerImageMjBtnClick = async (button: ImageMjButtonsVO, imageDetail: ImageDetailVO) => {
// 1、构建 params 参数
const params = {
id: imageDetail.id,
customId: button.customId,
} as ImageMjActionVO
// 2、发送 action
await ImageApi.midjourneyAction(params)
// 3、刷新列表
await getImageList()
}
/** 下载 - image */
// TODO @fan：貌似可以考虑抽到 download 里面，作为一个方法
const downloadImage = async (imageUrl) => {
const image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = imageUrl
image.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d') as CanvasDrawImage
ctx.drawImage(image, 0, 0, image.width, image.height)
const url = canvas.toDataURL('image/png')
const a = document.createElement('a')
a.href = url
a.download = 'image.png'
a.click()
}
}
// page change
const handlerPageChange = async (page) => {
pageNo.value = page
await getImageList(false)
}
/** 暴露组件方法 */
defineExpose({getImageList})
/** 组件挂在的时候 */
onMounted(async () => {
// 获取 image 列表
await getImageList()
// 自动刷新 image 列表
imageListInterval.value = setInterval(async () => {
await getImageList(false)
}, 1000 * 20)
})
/** 组件取消挂在的时候 */
onUnmounted(async () => {
if (imageListInterval.value) {
clearInterval(imageListInterval.value)
}
})
</script>
<style lang="scss">
.task-card {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.task-image-list {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
height: 100%;
overflow: auto;
padding: 20px;
padding-bottom: 140px;
box-sizing: border-box; /* 确保内边距不会增加高度 */
>div {
margin-right: 20px;
margin-bottom: 20px;
}
>div:last-of-type {
//margin-bottom: 100px;
}
}
.task-image-pagination {
position: absolute;
bottom: 60px;
height: 50px;
line-height: 90px;
width: 100%;
z-index: 999;
background-color: #ffffff;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
<style scoped lang="scss">
.dr-task {
width: 100%;
height: 100%;
}
</style>

135
src/views/ai/image/ImageTaskCard.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<el-card body-class="" class="image-card">
<div class="image-operation">
<div>
<el-button type="primary" text bg v-if="imageDetail?.status === 10">生成中</el-button>
<el-button text bg v-else-if="imageDetail?.status === 20">已完成</el-button>
<el-button type="danger" text bg v-else-if="imageDetail?.status === 30">异常</el-button>
</div>
<!-- TODO @fan：1）按钮要不调整成详情、下载、再次生成、删除？；2）如果是再次生成，就把当前的参数填写到左侧的框框里？ -->
<div>
<el-button class="btn" text :icon="Download"
@click="handlerBtnClick('download', imageDetail)"/>
<el-button class="btn" text :icon="Delete" @click="handlerBtnClick('delete', imageDetail)"/>
<el-button class="btn" text :icon="More" @click="handlerBtnClick('more', imageDetail)"/>
</div>
</div>
<div class="image-wrapper" ref="cardImageRef">
<!-- TODO @fan：要不加个点击，大图预览？ -->
<img class="image" :src="imageDetail?.picUrl"/>
<div v-if="imageDetail?.status === 30">{{imageDetail?.errorMessage}}</div>
</div>
<!-- TODO @fan：style 使用 unocss 替代下 -->
<div class="image-mj-btns">
<el-button size="small" v-for="button in imageDetail?.buttons" :key="button"
style="min-width: 40px;margin-left: 0; margin-right: 10px; margin-top: 5px;"
@click="handlerMjBtnClick(button)"
>
{{ button.label }}{{ button.emoji }}
</el-button>
</div>
</el-card>
</template>
<script setup lang="ts">
import {Delete, Download, More} from "@element-plus/icons-vue";
import {ImageDetailVO, ImageMjButtonsVO} from "@/api/ai/image";
import {PropType} from "vue";
import {ElLoading, ElMessageBox} from "element-plus";
const cardImageRef = ref<any>() // 卡片 image ref
const cardImageLoadingInstance = ref<any>() // 卡片 image ref
const message = useMessage()
const props = defineProps({
imageDetail: {
type: Object as PropType<ImageDetailVO>,
require: true
}
})
/** 按钮 - 点击事件 */
const handlerBtnClick = async (type, imageDetail: ImageDetailVO) => {
emits('onBtnClick', type, imageDetail)
}
const handlerLoading = async (status: number) => {
// TODO @fan：这个搞成 Loading 组件，然后通过数据驱动，这样搞可以哇？
if (status === 10) {
cardImageLoadingInstance.value = ElLoading.service({
target: cardImageRef.value,
text: '生成中...'
})
} else {
if (cardImageLoadingInstance.value) {
cardImageLoadingInstance.value.close();
cardImageLoadingInstance.value = null;
}
}
}
/** mj 按钮 click */
const handlerMjBtnClick = async (button: ImageMjButtonsVO) => {
// 确认窗体
await message.confirm(`确认操作 "${button.label} ${button.emoji}" ?`)
emits('onMjBtnClick', button, props.imageDetail)
}
// watch
const { imageDetail } = toRefs(props)
watch(imageDetail, async (newVal, oldVal) => {
await handlerLoading(newVal.status as string)
})
// emits
const emits = defineEmits(['onBtnClick', 'onMjBtnClick'])
//
onMounted(async () => {
await handlerLoading(props.imageDetail.status as string)
})
</script>
<style scoped lang="scss">
.image-card {
width: 320px;
height: auto;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
.image-operation {
display: flex;
flex-direction: row;
justify-content: space-between;
.btn {
//border: 1px solid red;
padding: 10px;
margin: 0;
}
}
.image-wrapper {
overflow: hidden;
margin-top: 20px;
height: 280px;
flex: 1;
.image {
width: 100%;
border-radius: 10px;
}
}
.image-mj-btns {
margin-top: 5px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
}
</style>

398
src/views/ai/image/dall3/index.vue Normal file
View File

@ -0,0 +1,398 @@
<!-- dall3 -->
<template>
<div class="prompt">
<el-text tag="b">画面描述</el-text>
<el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
<!-- TODO @fan：style 看看能不能哟 unocss 替代 -->
<el-input
v-model="prompt"
maxlength="1024"
rows="5"
style="width: 100%; margin-top: 15px;"
input-style="border-radius: 7px;"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
type="textarea"
/>
</div>
<div class="hot-words">
<div>
<el-text tag="b">随机热词</el-text>
</div>
<el-space wrap class="word-list">
<el-button round
class="btn"
:type="(selectHotWord === hotWord ? 'primary' : 'default')"
v-for="hotWord in hotWords"
:key="hotWord"
@click="handlerHotWordClick(hotWord)"
>
{{ hotWord }}
</el-button>
</el-space>
</div>
<div class="model">
<div>
<el-text tag="b">模型选择</el-text>
</div>
<el-space wrap class="model-list">
<div
:class="selectModel === model ? 'modal-item selectModel' : 'modal-item'"
v-for="model in models"
:key="model.key"
>
<el-image
:src="model.image"
fit="contain"
@click="handlerModelClick(model)"
/>
<div class="model-font">{{model.name}}</div>
</div>
</el-space>
</div>
<div class="image-style">
<div>
<el-text tag="b">风格选择</el-text>
</div>
<el-space wrap class="image-style-list">
<div
:class="selectImageStyle === imageStyle ? 'image-style-item selectImageStyle' : 'image-style-item'"
v-for="imageStyle in imageStyleList"
:key="imageStyle.key"
>
<el-image
:src="imageStyle.image"
fit="contain"
@click="handlerStyleClick(imageStyle)"
/>
<div class="style-font">{{imageStyle.name}}</div>
</div>
</el-space>
</div>
<div class="image-size">
<div>
<el-text tag="b">画面比例</el-text>
</div>
<el-space wrap class="size-list">
<div class="size-item"
v-for="imageSize in imageSizeList"
:key="imageSize.key"
@click="handlerSizeClick(imageSize)">
<div :class="selectImageSize === imageSize ? 'size-wrapper selectImageSize' : 'size-wrapper'">
<div :style="imageSize.style"></div>
</div>
<div class="size-font">{{ imageSize.name }}</div>
</div>
</el-space>
</div>
<div class="btns">
<el-button type="primary"
size="large"
round
:loading="drawIn"
@click="handlerGenerateImage">
{{drawIn ? '生成中' : '生成内容'}}
</el-button>
</div>
</template>
<script setup lang="ts">
import {ImageApi, ImageDrawReqVO} from '@/api/ai/image';
// image 模型
interface ImageModelVO {
key: string
name: string
image: string
}
// image 大小
interface ImageSizeVO {
key: string
name: string,
style: string,
width: string,
height: string,
}
// 定义属性
const prompt = ref<string>('') // 提示词
const drawIn = ref<boolean>(false) // 生成中
const selectHotWord = ref<string>('') // 选中的热词
const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城']) // 热词
const selectModel = ref<any>({}) // 模型
// message
const message = useMessage()
// TODO @fan：image 改成项目里自己的哈
// TODO @fan：这个 image，要不看看网上有没合适的图片，作为占位符，啊哈哈
const models = ref<ImageModelVO[]>([
{
key: 'dall-e-3',
name: 'DALL·E 3',
image: 'https://h5.cxyhub.com/images/model_2.png',
},
{
key: 'dall-e-2',
name: 'DALL·E 2',
image: 'https://h5.cxyhub.com/images/model_1.png',
},
]) // 模型
selectModel.value = models.value[0]
const selectImageStyle = ref<any>({}) // style 样式
// TODO @fan：image 改成项目里自己的哈
const imageStyleList = ref<ImageModelVO[]>([
{
key: 'vivid',
name: '清晰',
image: 'https://h5.cxyhub.com/images/model_1.png',
},
{
key: 'natural',
name: '自然',
image: 'https://h5.cxyhub.com/images/model_2.png',
},
]) // style
selectImageStyle.value = imageStyleList.value[0]
const selectImageSize = ref<ImageSizeVO>({} as ImageSizeVO) // 选中 size
const imageSizeList = ref<ImageSizeVO[]>([
{
key: '1024x1024',
name: '1:1',
width: '1024',
height: '1024',
style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
},
{
key: '1024x1792',
name: '3:5',
width: '1024',
height: '1792',
style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
},
{
key: '1792x1024',
name: '5:3',
width: '1792',
height: '1024',
style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
}
]) // size
selectImageSize.value = imageSizeList.value[0]
// 定义 Props
const props = defineProps({})
// 定义 emits
const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
// TODO @fan：如果是简单注释，建议用 /** */，主要是现在项目里是这种风格哈，保持一致好点~
// TODO @fan：handler 应该改成 handle 哈
/** 热词 - click */
const handlerHotWordClick = async (hotWord: string) => {
// 取消选中
if (selectHotWord.value == hotWord) {
selectHotWord.value = ''
return
}
// 选中
selectHotWord.value = hotWord
// 替换提示词
prompt.value = hotWord
}
/** 模型 - click */
const handlerModelClick = async (model: ImageModelVO) => {
if (selectModel.value === model) {
selectModel.value = {} as ImageModelVO
return
}
selectModel.value = model
}
/** 样式 - click */
const handlerStyleClick = async (imageStyle: ImageModelVO) => {
if (selectImageStyle.value === imageStyle) {
selectImageStyle.value = {} as ImageModelVO
return
}
selectImageStyle.value = imageStyle
}
/** size - click */
const handlerSizeClick = async (imageSize: ImageSizeVO) => {
if (selectImageSize.value === imageSize) {
selectImageSize.value = {} as ImageSizeVO
return
}
selectImageSize.value = imageSize
}
/** 图片生产 */
const handlerGenerateImage = async () => {
// 二次确认
await message.confirm(`确认生成内容?`)
try {
// 加载中
drawIn.value = true
// 回调
emits('onDrawStart', selectModel.value.key)
const form = {
platform: 'OpenAI',
prompt: prompt.value, // 提示词
model: selectModel.value.key, // 模型
width: selectImageSize.value.width, // size 不能为空
height: selectImageSize.value.height, // size 不能为空
options: {
style: selectImageStyle.value.key, // 图像生成的风格
}
} as ImageDrawReqVO
// 发送请求
await ImageApi.drawImage(form)
} finally {
// 回调
emits('onDrawComplete', selectModel.value.key)
// 加载结束
drawIn.value = false
}
}
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}
// 热词
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
// 模型
.model {
margin-top: 30px;
.model-list {
margin-top: 15px;
.modal-item {
width: 110px;
//outline: 1px solid blue;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
border: 3px solid transparent;
cursor: pointer;
.model-font {
font-size: 14px;
color: #3e3e3e;
font-weight: bold;
}
}
.selectModel {
border: 3px solid #1293ff;
border-radius: 5px;
}
}
}
// 样式 style
.image-style {
margin-top: 30px;
.image-style-list {
margin-top: 15px;
.image-style-item {
width: 110px;
//outline: 1px solid blue;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
border: 3px solid transparent;
cursor: pointer;
.style-font {
font-size: 14px;
color: #3e3e3e;
font-weight: bold;
}
}
.selectImageStyle {
border: 3px solid #1293ff;
border-radius: 5px;
}
}
}
// 尺寸
.image-size {
width: 100%;
margin-top: 30px;
.size-list {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-top: 20px;
.size-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.size-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 7px;
padding: 4px;
width: 50px;
height: 50px;
background-color: #fff;
border: 1px solid #fff;
}
.size-font {
font-size: 14px;
color: #3e3e3e;
font-weight: bold;
}
}
}
.selectImageSize {
border: 1px solid #1293ff !important;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>

105
src/views/ai/image/index.vue Normal file
View File

@ -0,0 +1,105 @@
<!-- image -->
<template>
<div class="ai-image">
<div class="left">
<div class="segmented">
<el-segmented v-model="selectModel" :options="modelOptions" />
</div>
<div class="modal-switch-container">
<!-- TODO @fan：1）建议 Dall3 改成 OpenAI 绘图。因为 dall3 其实本质是模型；2）涉及到中英文的地方，中文和英文之间，有个空格哈 -->
<Dall3 v-if="selectModel === 'DALL3绘画'"
@on-draw-start="handlerDrawStart"
@on-draw-complete="handlerDrawComplete" />
<Midjourney v-if="selectModel === 'MJ绘画'" />
<StableDiffusion v-if="selectModel === 'Stable Diffusion'" />
</div>
</div>
<div class="main">
<ImageTask ref="imageTaskRef" />
</div>
</div>
</template>
<script setup lang="ts">
// TODO @fan：在整个挪到 /views/ai/image/index 目录。因为我想在 /views/ai/image/manager 做管理的功能，进行下区分！
import Dall3 from './dall3/index.vue'
import Midjourney from './midjourney/index.vue'
import StableDiffusion from './stable-diffusion/index.vue'
import ImageTask from './ImageTask.vue'
// ref
const imageTaskRef = ref<any>() // image task ref
// 定义属性
const selectModel = ref('Stable Diffusion')
const modelOptions = ['DALL3绘画', 'MJ绘画', 'Stable Diffusion']
const drawIn = ref<boolean>(false) // 生成中
/** 绘画 - start */
const handlerDrawStart = async (type) => {
// todo
drawIn.value = true
}
/** 绘画 - complete */
const handlerDrawComplete = async (type) => {
drawIn.value = false
// todo
await imageTaskRef.value.getImageList()
}
//
onMounted( async () => {
})
</script>
<style scoped lang="scss">
.ai-image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
.left {
display: flex;
flex-direction: column;
padding: 20px;
width: 350px;
.segmented {
}
.segmented .el-segmented {
--el-border-radius-base: 16px;
--el-segmented-item-selected-color: #fff;
background-color: #ececec;
width: 350px;
}
.modal-switch-container {
height: 100%;
overflow-y: auto;
margin-top: 30px;
}
}
.main {
flex: 1;
background-color: #fff;
}
.right {
width: 350px;
background-color: #f7f8fa;
}
}
</style>

388
src/views/ai/image/midjourney/index.vue Normal file
View File

@ -0,0 +1,388 @@
<!-- dall3 -->
<template>
<div class="prompt">
<el-text tag="b">画面描述</el-text>
<el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开.</el-text>
<el-input
v-model="prompt"
maxlength="1024"
rows="5"
style="width: 100%; margin-top: 15px;"
input-style="border-radius: 7px;"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
type="textarea"
/>
</div>
<div class="hot-words">
<div>
<el-text tag="b">随机热词</el-text>
</div>
<el-space wrap class="word-list">
<el-button round
class="btn"
:type="(selectHotWord === hotWord ? 'primary' : 'default')"
v-for="hotWord in hotWords"
:key="hotWord"
@click="handlerHotWordClick(hotWord)"
>
{{ hotWord }}
</el-button>
</el-space>
</div>
<div class="image-size">
<div>
<el-text tag="b">尺寸</el-text>
</div>
<el-space wrap class="size-list">
<div class="size-item"
v-for="imageSize in imageSizeList"
:key="imageSize.key"
@click="handlerSizeClick(imageSize)">
<div :class="selectImageSize === imageSize ? 'size-wrapper selectImageSize' : 'size-wrapper'">
<div :style="imageSize.style"></div>
</div>
<div class="size-font">{{ imageSize.key }}</div>
</div>
</el-space>
</div>
<div class="version">
<div>
<el-text tag="b">版本</el-text>
</div>
<el-space wrap class="version-list">
<el-select
v-model="selectVersion"
class="version-select"
clearable
placeholder="请选择版本"
style="width: 350px"
@change="handlerChangeVersion"
>
<el-option
v-for="item in versionList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-space>
</div>
<div class="model">
<div>
<el-text tag="b">模型</el-text>
</div>
<el-space wrap class="model-list">
<div
:class="selectModel === model ? 'modal-item selectModel' : 'modal-item'"
v-for="model in models"
:key="model.key"
>
<el-image
:src="model.image"
fit="contain"
@click="handlerModelClick(model)"
/>
<div class="model-font">{{model.name}}</div>
</div>
</el-space>
</div>
<div class="btns">
<!-- <el-button size="large" round>重置内容</el-button>-->
<el-button type="primary" size="large" round @click="handlerGenerateImage">生成内容</el-button>
</div>
</template>
<script setup lang="ts">
// image 模型
import {ImageApi, ImageMidjourneyImagineReqVO} from "@/api/ai/image";
// message
const message = useMessage()
// 定义 emits
const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
interface ImageModelVO {
key: string
name: string
image: string
}
// image 大小
interface ImageSizeVO {
key: string
style: string,
width: string,
height: string,
}
// 定义属性
const prompt = ref<string>('') // 提示词
const selectHotWord = ref<string>('') // 选中的热词
const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城']) // 热词
const selectModel = ref<any>() // 选中的热词
const models = ref<ImageModelVO[]>([
{
key: 'midjourney',
name: 'MJ',
image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png',
},
{
key: 'niji',
name: 'NIJI',
image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png',
},
]) // 模型
selectModel.value = models.value[0] // 默认选中
const selectImageSize = ref<ImageSizeVO>({} as ImageSizeVO) // 选中 size
const imageSizeList = ref<ImageSizeVO[]>([
{
key: '1:1',
width: "1",
height: "1",
style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
},
{
key: '3:4',
width: "3",
height: "4",
style: 'width: 30px; height: 40px;background-color: #dcdcdc;',
},
{
key: '4:3',
width: "4",
height: "3",
style: 'width: 40px; height: 30px;background-color: #dcdcdc;',
},
{
key: '9:16',
width: "9",
height: "16",
style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
},
{
key: '16:9',
width: "16",
height: "9",
style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
},
]) // size
selectImageSize.value = imageSizeList.value[0]
// version
let versionList = ref<any>([]) // version 列表
const midjourneyVersionList = ref<any>([
{
value: '6.0',
label: 'v6.0',
},
{
value: '5.2',
label: 'v5.2',
},
{
value: '5.1',
label: 'v5.1',
},
{
value: '5.0',
label: 'v5.0',
},
{
value: '4.0',
label: 'v4.0',
},
])
const nijiVersionList = ref<any>([
{
value: '5',
label: 'v5',
},
])
const selectVersion = ref<any>('6.0') // 选中的 version
versionList.value = midjourneyVersionList.value // 默认选择 midjourney
// 定义 Props
const props = defineProps({})
/** 热词 - click */
const handlerHotWordClick = async (hotWord: string) => {
// 取消
if (selectHotWord.value == hotWord) {
selectHotWord.value = ''
return
}
// 选中
selectHotWord.value = hotWord
// 设置提示次
prompt.value = hotWord
}
/** size - click */
const handlerSizeClick = async (imageSize: ImageSizeVO) => {
if (selectImageSize.value === imageSize) {
selectImageSize.value = {} as ImageSizeVO
return
}
selectImageSize.value = imageSize
}
/** 模型 - click */
const handlerModelClick = async (model: ImageModelVO) => {
selectModel.value = model
if (model.key === 'niji') {
versionList.value = nijiVersionList.value // 默认选择 niji
} else {
versionList.value = midjourneyVersionList.value // 默认选择 midjourney
}
selectVersion.value = versionList.value[0].value
}
/** version - click */
const handlerChangeVersion = async (version) => {
console.log('version', version)
}
/** 图片生产 */
const handlerGenerateImage = async () => {
// 二次确认
await message.confirm(`确认生成内容?`)
// todo @范 图片生产逻辑
try {
// 回调
emits('onDrawStart', selectModel.value.key)
// 发送请求
const req = {
prompt: prompt.value,
model: selectModel.value.key,
width: selectImageSize.value.width,
height: selectImageSize.value.height,
version: selectVersion.value,
base64Array: [],
} as ImageMidjourneyImagineReqVO
await ImageApi.midjourneyImagine(req)
} finally {
// 回调
emits('onDrawComplete', selectModel.value.key)
}
}
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}
// 热词
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
// version
.version {
margin-top: 20px;
.version-list {
margin-top: 20px;
width: 100%;
}
}
// 模型
.model {
margin-top: 30px;
.model-list {
margin-top: 15px;
.modal-item {
display: flex;
flex-direction: column;
align-items: center;
width: 150px;
//outline: 1px solid blue;
overflow: hidden;
border: 3px solid transparent;
cursor: pointer;
.model-font {
font-size: 14px;
color: #3e3e3e;
font-weight: bold;
}
}
.selectModel {
border: 3px solid #1293ff;
border-radius: 5px;
}
}
}
// 尺寸
.image-size {
width: 100%;
margin-top: 30px;
.size-list {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-top: 20px;
.size-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.size-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 7px;
padding: 4px;
width: 50px;
height: 50px;
background-color: #fff;
border: 1px solid #fff;
}
.size-font {
font-size: 14px;
color: #3e3e3e;
font-weight: bold;
}
}
}
.selectImageSize {
border: 1px solid #1293ff !important;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>

297
src/views/ai/image/stable-diffusion/index.vue Normal file
View File

@ -0,0 +1,297 @@
<!-- dall3 -->
<template>
<div class="prompt">
<el-text tag="b">画面描述</el-text>
<el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
<!-- TODO @fan：style 看看能不能哟 unocss 替代 -->
<el-input
v-model="prompt"
maxlength="1024"
rows="5"
style="width: 100%; margin-top: 15px;"
input-style="border-radius: 7px;"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
type="textarea"
/>
</div>
<div class="hot-words">
<div>
<el-text tag="b">随机热词</el-text>
</div>
<el-space wrap class="word-list">
<el-button round
class="btn"
:type="(selectHotWord === hotWord ? 'primary' : 'default')"
v-for="hotWord in hotWords"
:key="hotWord"
@click="handlerHotWordClick(hotWord)"
>
{{ hotWord }}
</el-button>
</el-space>
</div>
<div class="group-item">
<div>
<el-text tag="b">采样</el-text>
</div>
<el-space wrap class="group-item-body">
<el-select
v-model="selectSampler"
placeholder="Select"
size="large"
style="width: 350px;"
>
<el-option
v-for="item in sampler"
:key="item.key"
:label="item.name"
:value="item.key"
/>
</el-select>
</el-space>
</div>
<div class="group-item">
<div>
<el-text tag="b">图片尺寸</el-text>
</div>
<el-space wrap class="group-item-body">
<el-select
v-model="selectImageSize"
placeholder="Select"
size="large"
style="width: 350px;"
>
<el-option
v-for="item in imageSizeList"
:key="item.key"
:label="item.key"
:value="item.key"
/>
</el-select>
</el-space>
</div>
<div class="group-item">
<div>
<el-text tag="b">迭代步数</el-text>
</div>
<el-space wrap class="group-item-body">
<el-input v-model="steps" type="number" size="large" style="width: 350px" placeholder="Please input" />
</el-space>
</div>
<div class="group-item">
<div>
<el-text tag="b">随机性</el-text>
</div>
<el-space wrap class="group-item-body">
<el-input v-model="seed" type="number" size="large" style="width: 350px" placeholder="Please input" />
</el-space>
</div>
<div class="btns">
<el-button type="primary"
size="large"
round
:loading="drawIn"
@click="handlerGenerateImage">
{{drawIn ? '生成中' : '生成内容'}}
</el-button>
</div>
</template>
<script setup lang="ts">
import {ImageApi, ImageDrawReqVO} from '@/api/ai/image';
// image 模型
interface ImageModelVO {
key: string
name: string
}
// image 大小
interface ImageSizeVO {
key: string
width: string,
height: string,
}
// 定义属性
const prompt = ref<string>('') // 提示词
const drawIn = ref<boolean>(false) // 生成中
const selectHotWord = ref<string>('') // 选中的热词
const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城']) // 热词
const selectSampler = ref<any>({}) // 模型
// message
const message = useMessage()
// 模型
const sampler = ref<ImageModelVO[]>([
{
key: 'Euler a',
name: 'Euler a',
},
{
key: 'DPM++ 2S a Karras',
name: 'DPM++ 2S a Karras',
},
{
key: 'DPM++ 2M Karras',
name: 'DPM++ 2M Karras',
},
{
key: 'DPM++ SDE Karras',
name: 'DPM++ SDE Karras',
},
{
key: 'DPM++ 2M SDE Karras',
name: 'DPM++ 2M SDE Karras',
},
]) // 模型
selectSampler.value = sampler.value[0]
const selectImageSize = ref<ImageSizeVO>({} as ImageSizeVO) // 选中 size
const imageSizeList = ref<ImageSizeVO[]>([
{
key: '512x512',
width: '512',
height: '512',
},
{
key: '1024x1024',
width: '1024',
height: '1024',
},
{
key: '1024x1792',
width: '1024',
height: '1792',
},
{
key: '1792x1024',
width: '1792',
height: '1024',
},
{
key: '2048x2048',
width: '2048',
height: '2048',
},
{
key: '720x1280',
width: '720',
height: '1280',
},
{
key: '1080x1920',
width: '1080',
height: '1920',
},
{
key: '1440x2560',
width: '1440',
height: '2560',
},
{
key: '2160x3840',
width: '2160',
height: '3840',
},
]) // size
selectImageSize.value = imageSizeList.value[0]
const steps = ref<number>(20) // 迭代步数
const seed = ref<number>(-1) // 控制生成图像的随机性
// 定义 Props
const props = defineProps({})
// 定义 emits
const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
// TODO @fan：如果是简单注释，建议用 /** */，主要是现在项目里是这种风格哈，保持一致好点~
// TODO @fan：handler 应该改成 handle 哈
/** 热词 - click */
const handlerHotWordClick = async (hotWord: string) => {
// 取消选中
if (selectHotWord.value == hotWord) {
selectHotWord.value = ''
return
}
// 选中
selectHotWord.value = hotWord
// 替换提示词
prompt.value = hotWord
}
/** 图片生产 */
const handlerGenerateImage = async () => {
// 二次确认
await message.confirm(`确认生成内容?`)
try {
// 加载中
drawIn.value = true
// 回调
emits('onDrawStart', 'StableDiffusion')
const form = {
platform: 'StableDiffusion',
model: 'stable-diffusion-v1-6',
prompt: prompt.value, // 提示词
width: selectImageSize.value.width, // 图片宽度
height: selectImageSize.value.height, // 图片高度
options: {
sampler: selectSampler.value.key, // 采样算法
seed: seed.value, // 随机种子
steps: steps.value, // 图片生成步数
},
} as ImageDrawReqVO
// 发送请求
await ImageApi.drawImage(form)
} finally {
// 回调
emits('onDrawComplete', 'StableDiffusion')
// 加载结束
drawIn.value = false
}
}
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}
// 热词
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
// 模型
.group-item {
margin-top: 30px;
.group-item-body {
margin-top: 15px;
width: 100%;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>

132
src/views/ai/model/apiKey/ApiKeyForm.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="所属平台" prop="platform">
<el-select v-model="formData.platform" placeholder="请输入平台" clearable>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="密钥" prop="apiKey">
<el-input v-model="formData.apiKey" placeholder="请输入密钥" />
</el-form-item>
<el-form-item label="自定义 API URL" prop="url">
<el-input v-model="formData.url" placeholder="请输入自定义 API URL" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
import { CommonStatusEnum } from '@/utils/constants'
/** AI API 密钥 表单 */
defineOptions({ name: 'ApiKeyForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
name: undefined,
apiKey: undefined,
platform: undefined,
url: undefined,
status: CommonStatusEnum.ENABLE
})
const formRules = reactive({
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
apiKey: [{ required: true, message: '密钥不能为空', trigger: 'blur' }],
platform: [{ required: true, message: '平台不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ApiKeyApi.getApiKey(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ApiKeyVO
if (formType.value === 'create') {
await ApiKeyApi.createApiKey(data)
message.success(t('common.createSuccess'))
} else {
await ApiKeyApi.updateApiKey(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
apiKey: undefined,
platform: undefined,
url: undefined,
status: CommonStatusEnum.ENABLE
}
formRef.value?.resetFields()
}
</script>

180
src/views/ai/model/apiKey/index.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="平台" prop="platform">
<el-select
v-model="queryParams.platform"
placeholder="请输入平台"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['ai:api-key:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="所属平台" align="center" prop="platform">
<template #default="scope">
<dict-tag :type="DICT_TYPE.AI_PLATFORM" :value="scope.row.platform" />
</template>
</el-table-column>
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="密钥" align="center" prop="apiKey" />
<el-table-column label="自定义 API URL" align="center" prop="url" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['ai:api-key:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['ai:api-key:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ApiKeyForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
import ApiKeyForm from './ApiKeyForm.vue'
/** AI API 密钥 列表 */
defineOptions({ name: 'AiApiKey' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ApiKeyVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
platform: undefined,
status: undefined
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ApiKeyApi.getApiKeyPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ApiKeyApi.deleteApiKey(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>

181
src/views/ai/model/chatModel/ChatModelForm.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="所属平台" prop="platform">
<el-select v-model="formData.platform" placeholder="请输入平台" clearable>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="API 秘钥" prop="keyId">
<el-select v-model="formData.keyId" placeholder="请选择 API 秘钥" clearable>
<el-option
v-for="apiKey in apiKeyList"
:key="apiKey.id"
:label="apiKey.name"
:value="apiKey.id"
/>
</el-select>
</el-form-item>
<el-form-item label="模型名字" prop="name">
<el-input v-model="formData.name" placeholder="请输入模型名字" />
</el-form-item>
<el-form-item label="模型标识" prop="model">
<el-input v-model="formData.model" placeholder="请输入模型标识" />
</el-form-item>
<el-form-item label="模型排序" prop="sort">
<el-input-number v-model="formData.sort" placeholder="请输入模型排序" class="!w-1/1" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="温度参数" prop="temperature">
<el-input-number
v-model="formData.temperature"
placeholder="请输入温度参数"
:min="0"
:max="2"
:precision="2"
/>
</el-form-item>
<el-form-item label="回复数 Token 数" prop="maxTokens">
<el-input-number
v-model="formData.maxTokens"
placeholder="请输入回复数 Token 数"
:min="0"
:max="4096"
/>
</el-form-item>
<el-form-item label="上下文数量" prop="maxContexts">
<el-input-number
v-model="formData.maxContexts"
placeholder="请输入上下文数量"
:min="0"
:max="20"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
/** API 聊天模型 表单 */
defineOptions({ name: 'ChatModelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
keyId: undefined,
name: undefined,
model: undefined,
platform: undefined,
sort: undefined,
status: CommonStatusEnum.ENABLE,
temperature: undefined,
maxTokens: undefined,
maxContexts: undefined
})
const formRules = reactive({
keyId: [{ required: true, message: 'API 秘钥不能为空', trigger: 'blur' }],
name: [{ required: true, message: '模型名字不能为空', trigger: 'blur' }],
model: [{ required: true, message: '模型标识不能为空', trigger: 'blur' }],
platform: [{ required: true, message: '所属平台不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const apiKeyList = ref([] as ApiKeyVO[]) // API 密钥列表
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ChatModelApi.getChatModel(id)
} finally {
formLoading.value = false
}
}
// 获得下拉数据
apiKeyList.value = await ApiKeyApi.getApiKeySimpleList(CommonStatusEnum.ENABLE)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ChatModelVO
if (formType.value === 'create') {
await ChatModelApi.createChatModel(data)
message.success(t('common.createSuccess'))
} else {
await ChatModelApi.updateChatModel(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
keyId: undefined,
name: undefined,
model: undefined,
platform: undefined,
sort: undefined,
status: CommonStatusEnum.ENABLE,
temperature: undefined,
maxTokens: undefined,
maxContexts: undefined
}
formRef.value?.resetFields()
}
</script>

185
src/views/ai/model/chatModel/index.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="模型名字" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入模型名字"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="模型标识" prop="model">
<el-input
v-model="queryParams.model"
placeholder="请输入模型标识"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="模型平台" prop="platform">
<el-input
v-model="queryParams.platform"
placeholder="请输入模型平台"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['ai:chat-model:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="所属平台" align="center" prop="platform">
<template #default="scope">
<dict-tag :type="DICT_TYPE.AI_PLATFORM" :value="scope.row.platform" />
</template>
</el-table-column>
<el-table-column label="模型名字" align="center" prop="name" />
<el-table-column label="模型标识" align="center" prop="model" />
<el-table-column label="API 秘钥" align="center" prop="keyId" min-width="140">
<template #default="scope">
<span>{{ apiKeyList.find((item) => item.id === scope.row.keyId)?.name }}</span>
</template>
</el-table-column>
<el-table-column label="排序" align="center" prop="sort" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="温度参数" align="center" prop="temperature" />
<el-table-column label="回复数 Token 数" align="center" prop="maxTokens" min-width="140" />
<el-table-column label="上下文数量" align="center" prop="maxContexts" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['ai:chat-model:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['ai:chat-model:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ChatModelForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
import ChatModelForm from './ChatModelForm.vue'
import { DICT_TYPE } from '@/utils/dict'
import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
/** API 聊天模型 列表 */
defineOptions({ name: 'AiChatModel' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ChatModelVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
model: undefined,
platform: undefined
})
const queryFormRef = ref() // 搜索的表单
const apiKeyList = ref([] as ApiKeyVO[]) // API 密钥列表
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ChatModelApi.getChatModelPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ChatModelApi.deleteChatModel(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(async () => {
getList()
// 获得下拉数据
apiKeyList.value = await ApiKeyApi.getApiKeySimpleList()
})
</script>

190
src/views/ai/model/chatRole/ChatRoleForm.vue Normal file
View File

@ -0,0 +1,190 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="角色头像" prop="avatar">
<UploadImg v-model="formData.avatar" height="60px" width="60px" />
</el-form-item>
<el-form-item label="绑定模型" prop="modelId" v-if="!isUser(formType)">
<el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
<el-option
v-for="chatModel in chatModelList"
:key="chatModel.id"
:label="chatModel.name"
:value="chatModel.id"
/>
</el-select>
</el-form-item>
<el-form-item label="角色类别" prop="category" v-if="!isUser(formType)">
<el-input v-model="formData.category" placeholder="请输入角色类别" />
</el-form-item>
<el-form-item label="角色描述" prop="description">
<el-input type="textarea" v-model="formData.description" placeholder="请输入角色描述" />
</el-form-item>
<el-form-item label="角色设定" prop="systemMessage">
<el-input type="textarea" v-model="formData.systemMessage" placeholder="请输入角色设定" />
</el-form-item>
<el-form-item label="是否公开" prop="publicStatus" v-if="!isUser(formType)">
<el-radio-group v-model="formData.publicStatus">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="角色排序" prop="sort" v-if="!isUser(formType)">
<el-input-number v-model="formData.sort" placeholder="请输入角色排序" class="!w-1/1" />
</el-form-item>
<el-form-item label="开启状态" prop="status" v-if="!isUser(formType)">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import { ChatRoleApi, ChatRoleVO } from '@/api/ai/model/chatRole'
import { CommonStatusEnum } from '@/utils/constants'
import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
/** AI 聊天角色 表单 */
defineOptions({ name: 'ChatRoleForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
modelId: undefined,
name: undefined,
avatar: undefined,
category: undefined,
sort: undefined,
description: undefined,
systemMessage: undefined,
publicStatus: true,
status: CommonStatusEnum.ENABLE
})
const formRules = ref() // reactive(formRulesObj)
const formRef = ref() // 表单 Ref
const chatModelList = ref([] as ChatModelVO[]) // 聊天模型列表
/** 是否【我】自己创建，私有角色 */
// TODO @fan：建议改成计算函数 computed
const isUser = (type: string) => {
return type === 'my-create' || type === 'my-update'
}
// TODO @fan：直接使用 formRules；只要隐藏掉的字段，它是不会校验的哈；
const getFormRules = async (type: string) => {
let formRulesObj = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
avatar: [{ required: true, message: '角色头像不能为空', trigger: 'blur' }],
category: [{ required: true, message: '角色类别不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '角色排序不能为空', trigger: 'blur' }],
description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }],
systemMessage: [{ required: true, message: '角色设定不能为空', trigger: 'blur' }],
publicStatus: [{ required: true, message: '是否公开不能为空', trigger: 'blur' }]
}
formRules.value = reactive(formRulesObj)
}
/** 打开弹窗 */
// TODO @fan：title 是不是收敛到 type 判断生成 title，会更合理
const open = async (type: string, id?: number, title?: string) => {
dialogVisible.value = true
dialogTitle.value = title || t('action.' + type)
formType.value = type
getFormRules(type)
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ChatRoleApi.getChatRole(id)
} finally {
formLoading.value = false
}
}
// 获得下拉数据
chatModelList.value = await ChatModelApi.getChatModelSimpleList(CommonStatusEnum.ENABLE)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ChatRoleVO
// tip: my-create、my-update 是 chat 角色仓库调用
// tip: create、else 是后台管理调用
if (formType.value === 'my-create') {
await ChatRoleApi.createMy(data)
message.success(t('common.createSuccess'))
} else if (formType.value === 'my-update') {
await ChatRoleApi.updateMy(data)
message.success(t('common.updateSuccess'))
} else if (formType.value === 'create') {
await ChatRoleApi.createChatRole(data)
message.success(t('common.createSuccess'))
} else {
await ChatRoleApi.updateChatRole(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
modelId: undefined,
name: undefined,
avatar: undefined,
category: undefined,
sort: undefined,
description: undefined,
systemMessage: undefined,
publicStatus: true,
status: CommonStatusEnum.ENABLE
}
formRef.value?.resetFields()
}
</script>

187
src/views/ai/model/chatRole/index.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="角色名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入角色名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="角色类别" prop="category">
<el-input
v-model="queryParams.category"
placeholder="请输入角色类别"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="是否公开" prop="publicStatus">
<el-select
v-model="queryParams.publicStatus"
placeholder="请选择是否公开"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['ai:chat-role:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="角色名称" align="center" prop="name" />
<el-table-column label="绑定模型" align="center" prop="modelName" />
<el-table-column label="角色头像" align="center" prop="avatar">
<template #default="scope">
<el-image :src="scope?.row.avatar" class="w-32px h-32px" />
</template>
</el-table-column>
<el-table-column label="角色类别" align="center" prop="category" />
<el-table-column label="角色描述" align="center" prop="description" />
<el-table-column label="角色设定" align="center" prop="systemMessage" />
<el-table-column label="是否公开" align="center" prop="publicStatus">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.publicStatus" />
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="角色排序" align="center" prop="sort" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['ai:chat-role:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['ai:chat-role:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ChatRoleForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import { ChatRoleApi, ChatRoleVO } from '@/api/ai/model/chatRole'
import ChatRoleForm from './ChatRoleForm.vue'
/** AI 聊天角色 列表 */
defineOptions({ name: 'AiChatRole' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ChatRoleVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
category: undefined,
publicStatus: true
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ChatRoleApi.getChatRolePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ChatRoleApi.deleteChatRole(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>

25
src/views/crm/statistics/performance/components/ContractCountPerformance.vue
View File

@ -1,5 +1,4 @@
<!-- 员工业绩统计 -->
<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
<template>
<!-- Echarts图 -->
<el-card shadow="never">
@ -64,13 +63,13 @@ const echartsOption = reactive<EChartsOption>({
data: []
},
{
name: '同比增长率（%）',
name: '环比增长率（%）',
type: 'line',
yAxisIndex: 1,
data: []
},
{
name: '环比增长率（%）',
name: '同比增长率（%）',
type: 'line',
yAxisIndex: 1,
data: []
@ -173,7 +172,9 @@ const loadData = async () => {
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
)
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
s.lastMonthCount !== 0
? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
: 'NULL'
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
@ -181,7 +182,9 @@ const loadData = async () => {
(s: StatisticsPerformanceRespVO) => s.lastYearCount
)
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
s.lastYearCount !== 0
? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
: 'NULL'
)
}
@ -197,8 +200,8 @@ const tableData = reactive([
{ title: '当月合同数量统计（个）' },
{ title: '上月合同数量统计（个）' },
{ title: '去年当月合同数量统计（个）' },
{ title: '同比增长率（%）' },
{ title: '环比增长率（%）' }
{ title: '环比增长率（%）' },
{ title: '同比增长率（%）' }
])
// 定义 convertListData 方法，数据行列转置，展示每月数据
@ -214,9 +217,13 @@ const convertListData = () => {
tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] =
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
item.lastMonthCount !== 0
? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
: 'NULL'
tableData[4]['prop' + index] =
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
item.lastYearCount !== 0
? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
: 'NULL'
})
}

25
src/views/crm/statistics/performance/components/ContractPricePerformance.vue
View File

@ -1,5 +1,4 @@
<!-- 员工业绩统计 -->
<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
<template>
<!-- Echarts图 -->
<el-card shadow="never">
@ -64,13 +63,13 @@ const echartsOption = reactive<EChartsOption>({
data: []
},
{
name: '同比增长率（%）',
name: '环比增长率（%）',
type: 'line',
yAxisIndex: 1,
data: []
},
{
name: '环比增长率（%）',
name: '同比增长率（%）',
type: 'line',
yAxisIndex: 1,
data: []
@ -173,7 +172,9 @@ const loadData = async () => {
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
)
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
s.lastMonthCount !== 0
? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
: 'NULL'
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
@ -181,7 +182,9 @@ const loadData = async () => {
(s: StatisticsPerformanceRespVO) => s.lastYearCount
)
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
s.lastYearCount !== 0
? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
: 'NULL'
)
}
@ -197,8 +200,8 @@ const tableData = reactive([
{ title: '当月合同金额统计（元）' },
{ title: '上月合同金额统计（元）' },
{ title: '去年当月合同金额统计（元）' },
{ title: '同比增长率（%）' },
{ title: '环比增长率（%）' }
{ title: '环比增长率（%）' },
{ title: '同比增长率（%）' }
])
// 定义 init 方法
@ -214,9 +217,13 @@ const convertListData = () => {
tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] =
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
item.lastMonthCount !== 0
? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
: 'NULL'
tableData[4]['prop' + index] =
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
item.lastYearCount !== 0
? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
: 'NULL'
})
}

30
src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
View File

@ -17,7 +17,6 @@
:prop="item.prop"
align="center"
>
<!-- TODO @scholar：IDEA 爆红的处理 -->
<template #default="scope">
{{ scope.row[item.prop] }}
</template>
@ -64,13 +63,13 @@ const echartsOption = reactive<EChartsOption>({
data: []
},
{
name: '同比增长率（%）',
name: '环比增长率（%）',
type: 'line',
yAxisIndex: 1,
data: []
},
{
name: '环比增长率（%）',
name: '同比增长率（%）',
type: 'line',
yAxisIndex: 1,
data: []
@ -121,7 +120,6 @@ const echartsOption = reactive<EChartsOption>({
type: 'value',
name: '',
axisTick: {
// TODO @scholar：IDEA 爆红的处理
alignWithLabel: true,
lineStyle: {
width: 0
@ -174,7 +172,9 @@ const loadData = async () => {
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
)
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
s.lastMonthCount !== 0
? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
: 'NULL'
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
@ -182,7 +182,9 @@ const loadData = async () => {
(s: StatisticsPerformanceRespVO) => s.lastYearCount
)
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
s.lastYearCount !== 0
? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
: 'NULL'
)
}
@ -193,14 +195,13 @@ const loadData = async () => {
}
// 初始化数据
// TODO @scholar：加个 as any[]，避免 idea 爆红
const columnsData = reactive([] as any[])
const columnsData = reactive([])
const tableData = reactive([
{ title: '当月回款金额统计（元）' },
{ title: '上月回款金额统计（元）' },
{ title: '去年当月回款金额统计（元）' },
{ title: '同比增长率（%）' },
{ title: '环比增长率（%）' }
{ title: '环比增长率（%）' },
{ title: '同比增长率（%）' }
])
// 定义 init 方法
@ -215,11 +216,14 @@ const convertListData = () => {
tableData[0]['prop' + index] = item.currentMonthCount
tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount
// TODO @scholar：百分比，使用 erpCalculatePercentage 直接计算；如果是 0，则返回 0，统一就好哈；
tableData[3]['prop' + index] =
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
item.lastMonthCount !== 0
? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
: 'NULL'
tableData[4]['prop' + index] =
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
item.lastYearCount !== 0
? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
: 'NULL'
})
}

29
src/views/crm/statistics/performance/index.vue
View File

@ -73,7 +73,7 @@
import * as DeptApi from '@/api/system/dept'
import * as UserApi from '@/api/system/user'
import { useUserStore } from '@/store/modules/user'
import { beginOfDay, formatDate } from '@/utils/formatTime'
import { beginOfDay, endOfDay, formatDate } from '@/utils/formatTime'
import { defaultProps, handleTree } from '@/utils/tree'
import ContractCountPerformance from './components/ContractCountPerformance.vue'
import ContractPricePerformance from './components/ContractPricePerformance.vue'
@ -85,8 +85,8 @@ const queryParams = reactive({
deptId: useUserStore().getUser.deptId,
userId: undefined,
times: [
// 默认显示当年的数据
formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)))
formatDate(beginOfDay(new Date(new Date().getFullYear(), 0, 1))),
formatDate(endOfDay(new Date(new Date().getFullYear(), 11, 31)))
]
})
@ -100,31 +100,20 @@ const userListByDeptId = computed(() =>
: []
)
// TODO @scholar：改成尾注释，保证 vue 内容短一点；变量名小写
// 活跃标签
const activeTab = ref('ContractCountPerformance')
// 1.员工合同数量统计
const ContractCountPerformanceRef = ref()
// 2.员工合同金额统计
const ContractPricePerformanceRef = ref()
// 3.员工回款金额统计
const ReceivablePricePerformanceRef = ref()
const ContractCountPerformanceRef = ref() // 员工合同数量统计
const ContractPricePerformanceRef = ref() // 员工合同金额统计
const ReceivablePricePerformanceRef = ref() // 员工回款金额统计
/** 搜索按钮操作 */
const handleQuery = () => {
// 从 queryParams.times[0] 中获取到了年份
const selectYear = parseInt(queryParams.times[0])
queryParams.times[0] = formatDate(beginOfDay(new Date(selectYear, 0, 1)))
queryParams.times[1] = formatDate(endOfDay(new Date(selectYear, 11, 31)))
// 创建一个新的 Date 对象，设置为指定的年份的第一天
const fullDate = new Date(selectYear, 0, 1, 0, 0, 0)
// 将完整的日期时间格式化为需要的字符串形式，比如 2004-01-01 00:00:00
// TODO @scholar：看看，是不是可以使用 year 哈
queryParams.times[0] = `${fullDate.getFullYear()}-${String(fullDate.getMonth() + 1).padStart(
2,
'0'
)}-${String(fullDate.getDate()).padStart(2, '0')} ${String(fullDate.getHours()).padStart(2, '0')}:${String(fullDate.getMinutes()).padStart(2, '0')}:${String(fullDate.getSeconds()).padStart(2, '0')}`
// 执行查询
switch (activeTab.value) {
case 'ContractCountPerformance':
ContractCountPerformanceRef.value?.loadData?.()

6
src/views/infra/job/index.vue
View File

@ -235,11 +235,7 @@ const handleChangeStatus = async (row: JobApi.JobVO) => {
message.success(text + '成功')
// 刷新列表
await getList()
} catch {
// 取消后，进行恢复按钮
row.status =
row.status === InfraJobStatusEnum.NORMAL ? InfraJobStatusEnum.STOP : InfraJobStatusEnum.NORMAL
}
} catch {}
}
/** 删除按钮操作 */