yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能新增】AI：音乐管理 100%

pull/468/MERGE
YunaiV 2024-06-28 09:49:17 +08:00
parent e3c46cab53
commit c0e51bd7aa
4 changed files with 107 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/ai/music/index.ts
View File

@ -28,9 +28,15 @@ export const MusicApi = {
return await request.get({ url: `/ai/music/page`, params })
},
// 修改音乐
updateMusic: async (data: MusicVO) => {
return await request.put({ url: `/ai/music/update`, data })
// 更新绘画发布状态
updateMusicPublicStatus: async (id: number, publicStatus: boolean) => {
return await request.put({
url: '/ai/music/update-public-status',
data: {
id,
publicStatus
}
})
},
// 删除音乐

8
src/store/modules/dict.ts
View File

@ -4,7 +4,7 @@ import { store } from '../index'
import { DictDataVO } from '@/api/system/dict/types'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache('sessionStorage')
// import { getSimpleDictDataList } from '@/api/system/dict/dict.data'
import { getSimpleDictDataList } from '@/api/system/dict/dict.data'
export interface DictValueType {
value: any
@ -45,8 +45,7 @@ export const useDictStore = defineStore('dict', {
this.dictMap = dictMap
this.isSetDict = true
} else {
const res = []
// const res = await getSimpleDictDataList()
const res = await getSimpleDictDataList()
// 设置数据
const dictDataMap = new Map<string, any>()
res.forEach((dictData: DictDataVO) => {
@ -76,8 +75,7 @@ export const useDictStore = defineStore('dict', {
},
async resetDict() {
wsCache.delete(CACHE_KEY.DICT_CACHE)
const res = []
// const res = await getSimpleDictDataList()
const res = await getSimpleDictDataList()
// 设置数据
const dictDataMap = new Map<string, any>()
res.forEach((dictData: DictDataVO) => {

2
src/utils/dict.ts
View File

@ -221,4 +221,6 @@ export enum DICT_TYPE {
// ========== AI - 人工智能模块 ==========
AI_PLATFORM = 'ai_platform', // AI 平台
AI_IMAGE_STATUS = 'ai_image_status', // AI 图片状态
AI_MUSIC_STATUS = 'ai_music_status', // AI 音乐状态
AI_GENERATE_MODE = 'ai_generate_mode' // AI 生成模式
}

120
src/views/ai/music/manager/index.vue
View File

@ -42,13 +42,19 @@
</el-select>
</el-form-item>
<el-form-item label="生成模式" prop="generateMode">
<el-input
<el-select
v-model="queryParams.generateMode"
placeholder="请输入生成模式"
placeholder="请选择生成模式"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.AI_GENERATE_MODE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
@ -58,7 +64,7 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
class="!w-220px"
/>
</el-form-item>
<el-form-item label="是否发布" prop="publicStatus">
@ -86,29 +92,76 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="用户编号" align="center" prop="userId" />
<el-table-column label="音乐名称" align="center" prop="title" />
<el-table-column label="歌词" align="center" prop="lyric" />
<el-table-column label="图片地址" align="center" prop="imageUrl" />
<el-table-column label="音频地址" align="center" prop="audioUrl" />
<el-table-column label="视频地址" align="center" prop="videoUrl" />
<el-table-column label="音乐状态" align="center" prop="status">
<el-table-column label="编号" align="center" prop="id" width="180" fixed="left" />
<el-table-column label="音乐名称" align="center" prop="title" width="180px" 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="status" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.AI_MUSIC_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="描述词" align="center" prop="gptDescriptionPrompt" />
<el-table-column label="提示词" align="center" prop="prompt" />
<el-table-column label="模型平台" align="center" prop="platform" />
<el-table-column label="模型" align="center" prop="model" />
<el-table-column label="生成模式" align="center" prop="generateMode">
<el-table-column label="模型" align="center" prop="model" width="180" />
<el-table-column label="内容" align="center" width="180">
<template #default="{ row }">
<el-link
v-if="row.audioUrl?.length > 0"
type="primary"
:href="row.audioUrl"
target="_blank"
>
音乐
</el-link>
<el-link
v-if="row.videoUrl?.length > 0"
type="primary"
:href="row.videoUrl"
target="_blank"
class="!pl-5px"
>
视频
</el-link>
<el-link
v-if="row.imageUrl?.length > 0"
type="primary"
:href="row.imageUrl"
target="_blank"
class="!pl-5px"
>
封面
</el-link>
</template>
</el-table-column>
<el-table-column label="提示词" align="center" prop="prompt" width="180" />
<el-table-column label="歌词" align="center" prop="lyric" width="180" />
<el-table-column label="描述词" align="center" prop="gptDescriptionPrompt" width="180" />
<el-table-column label="生成模式" align="center" prop="generateMode" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.AI_GENERATE_MODE" :value="scope.row.generateMode" />
</template>
</el-table-column>
<el-table-column label="音乐风格标签" align="center" prop="tags" />
<el-table-column label="任务id" align="center" prop="taskId" />
<el-table-column label="风格标签" align="center" prop="tags" width="180">
<template #default="scope">
<el-tag v-for="tag in scope.row.tags" :key="tag" round class="ml-2px">
{{ tag }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="是否发布" align="center" prop="publicStatus">
<template #default="scope">
<el-switch
v-model="scope.row.publicStatus"
:active-value="true"
:inactive-value="false"
@change="handleUpdatePublicStatusChange(scope.row)"
:disabled="scope.row.status !== 20"
/>
</template>
</el-table-column>
<el-table-column label="任务编号" align="center" prop="taskId" width="180" />
<el-table-column label="错误信息" align="center" prop="errorMessage" />
<el-table-column
label="创建时间"
@ -117,12 +170,7 @@
:formatter="dateFormatter"
width="180px"
/>
<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">
<el-table-column label="操作" align="center" width="100" fixed="right">
<template #default="scope">
<el-button
link
@ -149,6 +197,7 @@
import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { MusicApi, MusicVO } from '@/api/ai/music'
import * as UserApi from '@/api/system/user'
/** AI 音乐 列表 */
defineOptions({ name: 'AiMusicManager' })
@ -170,6 +219,7 @@ const queryParams = reactive({
publicStatus: undefined
})
const queryFormRef = ref() // 搜索的表单
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
/** 查询列表 */
const getList = async () => {
@ -208,8 +258,24 @@ const handleDelete = async (id: number) => {
} catch {}
}
/** 修改是否发布 */
const handleUpdatePublicStatusChange = async (row: MusicVO) => {
try {
// 修改状态的二次确认
const text = row.publicStatus ? '公开' : '私有'
await message.confirm('确认要"' + text + '"该音乐吗?')
// 发起修改状态
await MusicApi.updateMusicPublicStatus(row.id, row.publicStatus)
await getList()
} catch {
row.publicStatus = !row.publicStatus
}
}
/** 初始化 **/
onMounted(() => {
onMounted(async () => {
getList()
// 获得用户列表
userList.value = await UserApi.getSimpleUserList()
})
</script>