xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-17 16:56:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

suno and luma task management funtion in admin console is ready

Browse Source
This commit is contained in:
RockYang 2024-10-10 17:07:40 +08:00
parent d34b785238
commit a678a11c33
17 changed files with 818 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -2,6 +2,7 @@
## v4.1.6
* 功能优化：优化MysQL容器配置文档，解决MysQL容器资源占用过高问题
* 功能新增：管理后台增加AI绘图任务管理，可在管理后台浏览和删除用户的绘图任务
* 功能新增：管理后台增加Suno和Luma任务管理功能
## v4.1.5
* 功能优化：重构 websocket 组件，减少 websocket 连接数，全站共享一个 websocket 连接

112
api/handler/admin/image_handler.go
View File

@ -8,9 +8,12 @@ package admin
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
import (
"fmt"
"geekai/core"
"geekai/core/types"
"geekai/handler"
"geekai/service"
"geekai/service/oss"
"geekai/store/model"
"geekai/store/vo"
"geekai/utils"
@ -21,23 +24,25 @@ import (
type ImageHandler struct {
handler.BaseHandler
userService *service.UserService
uploader *oss.UploaderManager
}
func NewImageHandler(app *core.AppServer, db *gorm.DB) *ImageHandler {
return &ImageHandler{BaseHandler: handler.BaseHandler{App: app, DB: db}}
func NewImageHandler(app *core.AppServer, db *gorm.DB, userService *service.UserService, manager *oss.UploaderManager) *ImageHandler {
return &ImageHandler{BaseHandler: handler.BaseHandler{App: app, DB: db}, userService: userService, uploader: manager}
}
type query struct {
type imageQuery struct {
Prompt string `json:"prompt"`
Username string `json:"username"`
CreatedAt []string `json:"created_time"`
CreatedAt []string `json:"created_at"`
Page int `json:"page"`
PageSize int `json:"page_size"`
}
// MjList Midjourney 任务列表
func (h *ImageHandler) MjList(c *gin.Context) {
var data query
var data imageQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
@ -55,9 +60,7 @@ func (h *ImageHandler) MjList(c *gin.Context) {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
start := utils.Str2stamp(data.CreatedAt[0] + " 00:00:00")
end := utils.Str2stamp(data.CreatedAt[1] + " 00:00:00")
session = session.Where("created_at >= ? AND created_at <= ?", start, end)
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.MidJourneyJob{}).Count(&total)
@ -83,7 +86,7 @@ func (h *ImageHandler) MjList(c *gin.Context) {
// SdList Stable Diffusion 任务列表
func (h *ImageHandler) SdList(c *gin.Context) {
var data query
var data imageQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
@ -101,9 +104,7 @@ func (h *ImageHandler) SdList(c *gin.Context) {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
start := utils.Str2stamp(data.CreatedAt[0] + " 00:00:00")
end := utils.Str2stamp(data.CreatedAt[1] + " 00:00:00")
session = session.Where("created_at >= ? AND created_at <= ?", start, end)
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.SdJob{}).Count(&total)
@ -129,7 +130,7 @@ func (h *ImageHandler) SdList(c *gin.Context) {
// DallList DALL-E 任务列表
func (h *ImageHandler) DallList(c *gin.Context) {
var data query
var data imageQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
@ -147,9 +148,7 @@ func (h *ImageHandler) DallList(c *gin.Context) {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
start := utils.Str2stamp(data.CreatedAt[0] + " 00:00:00")
end := utils.Str2stamp(data.CreatedAt[1] + " 00:00:00")
session = session.Where("created_at >= ? AND created_at <= ?", start, end)
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.DallJob{}).Count(&total)
@ -172,3 +171,84 @@ func (h *ImageHandler) DallList(c *gin.Context) {
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
func (h *ImageHandler) Remove(c *gin.Context) {
id := h.GetInt(c, "id", 0)
tab := c.Query("tab")
tx := h.DB.Begin()
var md, remark, imgURL string
var power, userId, progress int
switch tab {
case "mj":
var job model.MidJourneyJob
if err := h.DB.Where("id", id).First(&job).Error; err != nil {
resp.ERROR(c, "记录不存在")
return
}
tx.Delete(&job)
md = "mid-journey"
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
imgURL = job.ImgURL
break
case "sd":
var job model.SdJob
if res := h.DB.Where("id", id).First(&job); res.Error != nil {
resp.ERROR(c, "记录不存在")
return
}
// 删除任务
tx.Delete(&job)
md = "stable-diffusion"
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
imgURL = job.ImgURL
break
case "dall":
var job model.DallJob
if res := h.DB.Where("id", id).First(&job); res.Error != nil {
resp.ERROR(c, "记录不存在")
return
}
// 删除任务
tx.Delete(&job)
md = "dall-e-3"
power = job.Power
userId = int(job.UserId)
remark = fmt.Sprintf("任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
imgURL = job.ImgURL
break
default:
resp.ERROR(c, types.InvalidArgs)
return
}
if progress != 100 {
err := h.userService.IncreasePower(userId, power, model.PowerLog{
Type: types.PowerRefund,
Model: md,
Remark: remark,
})
if err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
}
tx.Commit()
// remove image
err := h.uploader.GetUploadHandler().Delete(imgURL)
if err != nil {
logger.Error("remove image failed: ", err)
}
resp.SUCCESS(c)
}

200
api/handler/admin/media_handler.go Normal file
View File

@ -0,0 +1,200 @@
package admin
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// * Copyright 2023 The Geek-AI Authors. All rights reserved.
// * Use of this source code is governed by a Apache-2.0 license
// * that can be found in the LICENSE file.
// * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
import (
"fmt"
"geekai/core"
"geekai/core/types"
"geekai/handler"
"geekai/service"
"geekai/service/oss"
"geekai/store/model"
"geekai/store/vo"
"geekai/utils"
"geekai/utils/resp"
"github.com/gin-gonic/gin"
"gorm.io/gorm"
)
type MediaHandler struct {
handler.BaseHandler
userService *service.UserService
uploader *oss.UploaderManager
}
func NewMediaHandler(app *core.AppServer, db *gorm.DB, userService *service.UserService, manager *oss.UploaderManager) *MediaHandler {
return &MediaHandler{BaseHandler: handler.BaseHandler{App: app, DB: db}, userService: userService, uploader: manager}
}
type mediaQuery struct {
Prompt string `json:"prompt"`
Username string `json:"username"`
CreatedAt []string `json:"created_at"`
Page int `json:"page"`
PageSize int `json:"page_size"`
}
// SunoList Suno 任务列表
func (h *MediaHandler) SunoList(c *gin.Context) {
var data mediaQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
}
session := h.DB.Session(&gorm.Session{})
if data.Username != "" {
var user model.User
err := h.DB.Where("username", data.Username).First(&user).Error
if err == nil {
session = session.Where("user_id", user.Id)
}
}
if data.Prompt != "" {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.SunoJob{}).Count(&total)
var list []model.SunoJob
var items = make([]vo.SunoJob, 0)
offset := (data.Page - 1) * data.PageSize
err := session.Order("id DESC").Offset(offset).Limit(data.PageSize).Find(&list).Error
if err == nil {
// 填充数据
for _, item := range list {
var job vo.SunoJob
err = utils.CopyObject(item, &job)
if err != nil {
continue
}
job.CreatedAt = item.CreatedAt.Unix()
items = append(items, job)
}
}
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
// LumaList Luma 视频任务列表
func (h *MediaHandler) LumaList(c *gin.Context) {
var data mediaQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
}
session := h.DB.Session(&gorm.Session{})
if data.Username != "" {
var user model.User
err := h.DB.Where("username", data.Username).First(&user).Error
if err == nil {
session = session.Where("user_id", user.Id)
}
}
if data.Prompt != "" {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.VideoJob{}).Count(&total)
var list []model.VideoJob
var items = make([]vo.VideoJob, 0)
offset := (data.Page - 1) * data.PageSize
err := session.Order("id DESC").Offset(offset).Limit(data.PageSize).Find(&list).Error
if err == nil {
// 填充数据
for _, item := range list {
var job vo.VideoJob
err = utils.CopyObject(item, &job)
if err != nil {
continue
}
job.CreatedAt = item.CreatedAt.Unix()
if job.VideoURL == "" {
job.VideoURL = job.WaterURL
}
items = append(items, job)
}
}
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
func (h *MediaHandler) Remove(c *gin.Context) {
id := h.GetInt(c, "id", 0)
tab := c.Query("tab")
tx := h.DB.Begin()
var md, remark, fileURL string
var power, userId, progress int
switch tab {
case "suno":
var job model.SunoJob
if err := h.DB.Where("id", id).First(&job).Error; err != nil {
resp.ERROR(c, "记录不存在")
return
}
tx.Delete(&job)
md = "suno"
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("SUNO 任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
fileURL = job.AudioURL
break
case "luma":
var job model.VideoJob
if res := h.DB.Where("id", id).First(&job); res.Error != nil {
resp.ERROR(c, "记录不存在")
return
}
// 删除任务
tx.Delete(&job)
md = job.Type
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("LUMA 任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
fileURL = job.VideoURL
if fileURL == "" {
fileURL = job.WaterURL
}
break
default:
resp.ERROR(c, types.InvalidArgs)
return
}
if progress != 100 {
err := h.userService.IncreasePower(userId, power, model.PowerLog{
Type: types.PowerRefund,
Model: md,
Remark: remark,
})
if err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
}
tx.Commit()
// remove image
err := h.uploader.GetUploadHandler().Delete(fileURL)
if err != nil {
logger.Error("remove image failed: ", err)
}
resp.SUCCESS(c)
}

7
api/handler/dalle_handler.go
View File

@ -180,12 +180,7 @@ func (h *DallJobHandler) Remove(c *gin.Context) {
// 删除任务
tx := h.DB.Begin()
if err := tx.Delete(&job).Error; err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
tx.Delete(&job)
// 如果任务未完成，或者任务失败，则恢复用户算力
if job.Progress != 100 {
err := h.userService.IncreasePower(int(job.UserId), job.Power, model.PowerLog{

7
api/handler/mj_handler.go
View File

@ -403,12 +403,7 @@ func (h *MidJourneyHandler) Remove(c *gin.Context) {
// remove job recode
tx := h.DB.Begin()
if err := tx.Delete(&job).Error; err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
tx.Delete(&job)
// 如果任务未完成，或者任务失败，则恢复用户算力
if job.Progress != 100 {
err := h.userService.IncreasePower(job.UserId, job.Power, model.PowerLog{

9
api/handler/sd_handler.go
View File

@ -250,18 +250,13 @@ func (h *SdJobHandler) Remove(c *gin.Context) {
// 删除任务
tx := h.DB.Begin()
if err := tx.Delete(&job).Error; err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
tx.Delete(&job)
// 如果任务未完成，或者任务失败，则恢复用户算力
if job.Progress != 100 {
err := h.userService.IncreasePower(job.UserId, job.Power, model.PowerLog{
Type: types.PowerRefund,
Model: "stable-diffusion",
Remark: fmt.Sprintf("任务失败，退回算力。任务ID：%s， Err: %s", job.TaskId, job.ErrMsg),
Remark: fmt.Sprintf("任务失败，退回算力。任务ID：%d， Err: %s", job.Id, job.ErrMsg),
})
if err != nil {
tx.Rollback()

3
api/handler/video_handler.go
View File

@ -156,6 +156,9 @@ func (h *VideoHandler) List(c *gin.Context) {
continue
}
item.CreatedAt = v.CreatedAt.Unix()
if item.VideoURL == "" {
item.VideoURL = v.WaterURL
}
items = append(items, item)
}

8
api/main.go
View File

@ -545,6 +545,14 @@ func main() {
group.POST("/list/mj", h.MjList)
group.POST("/list/sd", h.SdList)
group.POST("/list/dall", h.DallList)
group.GET("/remove", h.Remove)
}),
fx.Provide(admin.NewMediaHandler),
fx.Invoke(func(s *core.AppServer, h *admin.MediaHandler) {
group := s.Engine.Group("/api/admin/media")
group.POST("/list/suno", h.SunoList)
group.POST("/list/luma", h.LumaList)
group.GET("/remove", h.Remove)
}),
)
// 启动应用程序

2
web/.env.development
View File

@ -6,6 +6,6 @@ VUE_APP_ADMIN_USER=admin
VUE_APP_ADMIN_PASS=admin123
VUE_APP_KEY_PREFIX=GeekAI_DEV_
VUE_APP_TITLE="Geek-AI 创作系统"
VUE_APP_VERSION=v4.1.5
VUE_APP_VERSION=v4.1.6
VUE_APP_DOCS_URL=https://docs.geekai.me
VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai

2
web/.env.production
View File

@ -1,6 +1,6 @@
VUE_APP_API_HOST=
VUE_APP_WS_HOST=
VUE_APP_KEY_PREFIX=GeekAI_
VUE_APP_VERSION=v4.1.5
VUE_APP_VERSION=v4.1.6
VUE_APP_DOCS_URL=https://docs.geekai.me
VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai

2
web/src/assets/css/chat-plus.styl
View File

@ -14,7 +14,7 @@ $borderColor = #4676d0;
padding 10px
width var(--el-aside-width, 320px)
.chat-list {
.media-page {
display: flex
flex-flow: column
//background-color: $sideBgColor

5
web/src/components/admin/AdminSidebar.vue
View File

@ -142,6 +142,11 @@ const items = [
index: '/admin/images',
title: '绘图管理',
},
{
icon: 'mp3',
index: '/admin/medias',
title: '音视频管理',
},
{
icon: 'role',
index: '/admin/manger',

6
web/src/router.js
View File

@ -239,6 +239,12 @@ const routes = [
meta: {title: '绘图管理'},
component: () => import('@/views/admin/ImageList.vue'),
},
{
path: '/admin/medias',
name: 'admin-medias',
meta: {title: '音视频管理'},
component: () => import('@/views/admin/Medias.vue'),
},
{
path: '/admin/powerLog',
name: 'admin-power-log',

2
web/src/views/ChatPlus.vue
View File

@ -2,7 +2,7 @@
<div class="chat-page">
<el-container>
<el-aside>
<div class="chat-list">
<div class="media-page">
<el-button @click="_newChat" color="#21aa93">
<el-icon style="margin-right: 5px">
<Plus/>

41
web/src/views/admin/ChatList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="container chat-list">
<div class="container chat-page">
<el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
<div class="handle-box">
@ -146,7 +146,7 @@
v-model="showContentDialog"
title="消息详情"
>
<div v-html="dialogContent" style="overflow: auto; max-height: 300px"></div>
<div class="chat-line" v-html="dialogContent"></div>
</el-dialog>
<el-dialog
@ -197,12 +197,6 @@ const data = ref({
loading: true
}
})
const items = ref([])
const query = ref({title: "", created_at: []})
const total = ref(0)
const page = ref(1)
const pageSize = ref(15)
const loading = ref(true)
const activeName = ref("chat")
onMounted(() => {
@ -284,11 +278,33 @@ const removeMessage = function (row) {
})
}
const mathjaxPlugin = require('markdown-it-mathjax3')
const md = require('markdown-it')({
breaks: true,
html: true,
linkify: true,
typographer: true,
highlight: function (str, lang) {
if (lang && hl.getLanguage(lang)) {
// 处理代码高亮
const preCode = hl.highlight(lang, str, true).value
// 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
}
// 处理代码高亮
const preCode = md.utils.escapeHtml(str)
// 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
}
});
md.use(mathjaxPlugin)
const showContentDialog = ref(false)
const dialogContent = ref("")
const showContent = (content) => {
showContentDialog.value = true
dialogContent.value = processContent(content)
dialogContent.value = md.render(processContent(content))
}
const showChatItemDialog = ref(false)
@ -309,7 +325,7 @@ const showMessages = (row) => {
</script>
<style lang="stylus" scoped>
.chat-list {
.chat-page {
.handle-box {
margin-bottom 20px
.handle-input {
@ -339,15 +355,14 @@ const showMessages = (row) => {
}
.chat-box {
overflow-y: auto;
overflow-x hidden
overflow hidden
// 变量定义
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
height 90vh
height 90%
.chat-line {
// 隐藏滚动条

51
web/src/views/admin/ImageList.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="container chat-list">
<div class="container image-page">
<el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="Midjourney" name="mj" v-loading="data.mj.loading">
<div class="handle-box">
<el-input v-model.number="data.mj.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'mj')"></el-input>
<el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'mj')" clearable />
<el-input v-model="data.mj.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event,'mj')"></el-input>
@keyup="search($event,'mj')" clearable />
<el-date-picker
v-model="data.mj.query.created_at"
type="daterange"
@ -104,10 +104,10 @@
</el-tab-pane>
<el-tab-pane label="Stable-Diffusion" name="sd" v-loading="data.sd.loading">
<div class="handle-box">
<el-input v-model.number="data.sd.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event, 'sd')"></el-input>
<el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-input v-model="data.sd.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'sd')"></el-input>
@keyup="search($event, 'sd')" clearable />
<el-date-picker
v-model="data.sd.query.created_at"
type="daterange"
@ -200,10 +200,10 @@
</el-tab-pane>
<el-tab-pane label="DALL-E" name="dall">
<div class="handle-box">
<el-input v-model.number="data.dall.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'dall')"></el-input>
<el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'dall')" clearable />
<el-input v-model="data.dall.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'dall')"></el-input>
@keyup="search($event, 'dall')" clearable />
<el-date-picker
v-model="data.dall.query.created_at"
type="daterange"
@ -436,8 +436,9 @@ const fetchDallData = () => {
}
const remove = function (row,tab) {
httpGet('/api/admin/chat/remove?chat_id=' + row.chat_id).then(() => {
httpGet(`/api/admin/image/remove?id=${row.id}&tab=${tab}`).then(() => {
ElMessage.success("删除成功！")
handleChange(tab)
}).catch((e) => {
ElMessage.error("删除失败：" + e.message)
})
@ -452,7 +453,7 @@ const showImage = (url) => {
</script>
<style lang="stylus" scoped>
.chat-list {
.image-page {
.handle-box {
margin-bottom 20px
.handle-input {
@ -480,31 +481,5 @@ const showImage = (url) => {
display flex
justify-content right
}
.chat-box {
overflow hidden
// 变量定义
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
.chat-line {
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
font-size: 14px;
display: flex;
align-items: flex-start;
}
}
}
</style>

450
web/src/views/admin/Medias.vue Normal file
View File

@ -0,0 +1,450 @@
<template>
<div class="container media-page">
<el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="Suno音乐" name="suno" v-loading="data.suno.loading">
<div class="handle-box">
<el-input v-model="data.suno.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'suno')" clearable />
<el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event,'suno')" clearable />
<el-date-picker
v-model="data.suno.query.created_at"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
/>
<el-button type="primary" :icon="Search" @click="fetchSunoData">搜索</el-button>
</div>
<div v-if="data.suno.items.length > 0">
<el-row>
<el-table :data="data.suno.items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID"/>
<el-table-column label="歌曲预览">
<template #default="scope">
<div class="container" v-if="scope.row.cover_url">
<el-image :src="scope.row.cover_url" fit="cover" />
<div class="duration">{{formatTime(scope.row.duration)}}</div>
<button class="play" @click="playMusic(scope.row)">
<img src="/images/play.svg" alt=""/>
</button>
</div>
<el-image v-else src="/images/failed.jpg" style="height: 90px" fit="cover" />
</template>
</el-table-column>
<el-table-column prop="title" label="标题"/>
<el-table-column prop="progress" label="任务进度">
<template #default="scope">
<span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
<el-tag v-else type="danger">已失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="power" label="消耗算力"/>
<el-table-column prop="tags" label="风格"/>
<el-table-column prop="play_times" label="播放次数"/>
<el-table-column label="歌词">
<template #default="scope">
<el-button size="small" type="primary" plain @click="showLyric(scope.row)">查看歌词</el-button>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因">
<template #default="scope">
<el-popover
placement="top-start"
title="失败原因"
:width="300"
trigger="hover"
:content="scope.row.err_msg"
v-if="scope.row.progress === 101"
>
<template #reference>
<el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
</template>
</el-popover>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'suno')">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="pagination">
<el-pagination v-if="data.suno.total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="data.suno.page"
v-model:page-size="data.suno.pageSize"
@current-change="fetchSunoData()"
:total="data.suno.total"/>
</div>
</div>
<el-empty v-else />
</el-tab-pane>
<el-tab-pane label="Luma视频" name="luma" v-loading="data.luma.loading">
<div class="handle-box">
<el-input v-model="data.luma.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-input v-model="data.luma.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-date-picker
v-model="data.luma.query.created_at"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
/>
<el-button type="primary" :icon="Search" @click="fetchLumaData">搜索</el-button>
</div>
<div v-if="data.luma.items.length > 0">
<el-row>
<el-table :data="data.luma.items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID"/>
<el-table-column label="视频预览">
<template #default="scope">
<div class="container">
<div v-if="scope.row.progress === 100">
<video class="video" :src="replaceImg(scope.row.video_url)" preload="auto" loop="loop" muted="muted">
您的浏览器不支持视频播放
</video>
<button class="play" @click="playVideo(scope.row)">
<img src="/images/play.svg" alt=""/>
</button>
</div>
<el-image :src="scope.row.cover_url" fit="cover" v-else-if="scope.row.progress > 100" />
<generating message="正在生成视频" v-else />
</div>
</template>
</el-table-column>
<el-table-column prop="progress" label="任务进度">
<template #default="scope">
<span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
<el-tag v-else type="danger">已失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="power" label="消耗算力"/>
<el-table-column label="提示词">
<template #default="scope">
<el-popover
placement="top-start"
title="提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因">
<template #default="scope">
<el-popover
placement="top-start"
title="失败原因"
:width="300"
trigger="hover"
:content="scope.row.err_msg"
v-if="scope.row.progress === 101"
>
<template #reference>
<el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
</template>
</el-popover>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'luma')">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="pagination">
<el-pagination v-if="data.luma.total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="data.luma.page"
v-model:page-size="data.luma.pageSize"
@current-change="fetchLumaData()"
:total="data.luma.total"/>
</div>
</div>
<el-empty v-else />
</el-tab-pane>
</el-tabs>
<el-dialog
v-model="showVideoDialog"
title="视频预览"
>
<video style="width: 100%; max-height: 90vh;" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted">
您的浏览器不支持视频播放
</video>
</el-dialog>
<div class="music-player" v-if="showPlayer">
<music-player :songs="playList" ref="playerRef" :show-close="true" @close="showPlayer = false" />
</div>
<el-dialog
v-model="showLyricDialog"
title="歌词"
>
<div class="chat-line" v-html="lyrics"></div>
</el-dialog>
</div>
</template>
<script setup>
import {nextTick, onMounted, ref} from "vue";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {dateFormat, formatTime, replaceImg, substr} from "@/utils/libs";
import {Search} from "@element-plus/icons-vue";
import MusicPlayer from "@/components/MusicPlayer.vue";
import Generating from "@/components/ui/Generating.vue";
// 变量定义
const data = ref({
"suno": {
items: [],
query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
total: 0,
page: 1,
pageSize: 10,
loading: true
},
"luma": {
items: [],
query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
total: 0,
page: 1,
pageSize: 10,
loading: true
}
})
const activeName = ref("suno")
const playList = ref([])
const playerRef = ref(null)
const showPlayer = ref(false)
const showLyricDialog = ref(false)
const lyrics = ref("")
const showVideoDialog = ref(false)
const currentVideoUrl = ref('')
onMounted(() => {
fetchSunoData()
})
const handleChange = (tab) => {
switch (tab) {
case "suno":
fetchSunoData()
break
case "luma":
fetchLumaData()
break
}
}
// 搜索对话
const search = (evt,tab) => {
if (evt.keyCode === 13) {
handleChange(tab)
}
}
// 获取数据
const fetchSunoData = () => {
const d = data.value.suno
d.query.page = d.page
d.query.page_size = d.pageSize
httpPost('/api/admin/media/list/suno', d.query).then((res) => {
if (res.data) {
d.items = res.data.items
d.total = res.data.total
d.page = res.data.page
d.pageSize = res.data.page_size
}
d.loading = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
const fetchLumaData = () => {
const d = data.value.luma
d.query.page = d.page
d.query.page_size = d.pageSize
httpPost('/api/admin/media/list/luma', d.query).then((res) => {
if (res.data) {
d.items = res.data.items
d.total = res.data.total
d.page = res.data.page
d.pageSize = res.data.page_size
}
d.loading = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
const remove = function (row,tab) {
httpGet(`/api/admin/media/remove?id=${row.id}&tab=${tab}`).then(() => {
ElMessage.success("删除成功！")
handleChange(tab)
}).catch((e) => {
ElMessage.error("删除失败：" + e.message)
})
}
const playMusic = (item) => {
playList.value = [item]
showPlayer.value = true
nextTick(()=> playerRef.value.play())
}
const playVideo = (item) => {
currentVideoUrl.value = replaceImg(item.video_url)
showVideoDialog.value = true
}
const md = require('markdown-it')({
breaks: true,
html: true,
linkify: true,
});
const showLyric = (item) => {
showLyricDialog.value = true
lyrics.value = md.render(item.prompt)
}
</script>
<style lang="stylus" scoped>
.media-page {
.handle-box {
margin-bottom 20px
.handle-input {
max-width 150px;
margin-right 10px;
}
}
.opt-box {
padding-bottom: 10px;
display flex;
justify-content flex-end
.el-icon {
margin-right: 5px;
}
}
.el-select {
width: 100%
}
.pagination {
padding 20px 0
display flex
justify-content right
}
.container {
width 160px
position relative
.video{
width 160px
border-radius 5px
}
.el-image {
width 160px
height 90px
border-radius 5px
}
.duration {
position absolute
bottom 6px
right 0
background-color rgba(255, 255, 255,.7)
padding 0 3px
font-family 'Input Sans'
font-size 14px
font-weight 700
border-radius .125rem
}
.play {
position absolute
width: 100%
height 100%
top: 0;
left: 50%;
border none
border-radius 5px
background rgba(100, 100, 100, 0.3)
cursor pointer
color #ffffff
opacity 0
transform: translate(-50%, 0px);
transition opacity 0.3s ease 0s
}
&:hover {
.play {
opacity 1
//display block
}
}
}
.music-player {
position absolute
bottom 20px
z-index 99999
width 100%
}
}
</style>