suno and luma task management funtion in admin console is ready

CHANGELOG.md

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

api/handler/admin/image_handler.go

@@ -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 {
+func NewImageHandler(app *core.AppServer, db *gorm.DB, userService *service.UserService, manager *oss.UploaderManager) *ImageHandler {
-	return &ImageHandler{BaseHandler: handler.BaseHandler{App: app, DB: db}}
+	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")
+		session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
-		end := utils.Str2stamp(data.CreatedAt[1] + " 00:00:00")
-		session = session.Where("created_at >= ? AND created_at <= ?", start, end)
 	}
 	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")
+		session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
-		end := utils.Str2stamp(data.CreatedAt[1] + " 00:00:00")
-		session = session.Where("created_at >= ? AND created_at <= ?", start, end)
 	}
 	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")
+		session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
-		end := utils.Str2stamp(data.CreatedAt[1] + " 00:00:00")
-		session = session.Where("created_at >= ? AND created_at <= ?", start, end)
 	}
 	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)
+}

api/handler/admin/media_handler.go

@@ -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)
+}

api/handler/dalle_handler.go

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

api/handler/mj_handler.go

@@ -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.Delete(&job)
-		tx.Rollback()
-		resp.ERROR(c, err.Error())
-		return
-	}
-
 	// 如果任务未完成，或者任务失败，则恢复用户算力
 	if job.Progress != 100 {
 		err := h.userService.IncreasePower(job.UserId, job.Power, model.PowerLog{

api/handler/sd_handler.go

@@ -250,18 +250,13 @@ func (h *SdJobHandler) Remove(c *gin.Context) {
 
 	// 删除任务
 	tx := h.DB.Begin()
-	if err := tx.Delete(&job).Error; err != nil {
+	tx.Delete(&job)
-		tx.Rollback()
-		resp.ERROR(c, err.Error())
-		return
-	}
-
 	// 如果任务未完成，或者任务失败，则恢复用户算力
 	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()

api/handler/video_handler.go

@@ -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)
 	}
 

api/main.go

@@ -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)
 		}),
 	)
 	// 启动应用程序

web/.env.development

@@ -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

web/.env.production

@@ -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

web/src/assets/css/chat-plus.styl

@@ -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

web/src/components/admin/AdminSidebar.vue

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

web/src/router.js

@@ -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',

web/src/views/ChatPlus.vue

@@ -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/>

web/src/views/admin/ChatList.vue

@@ -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 hidden
-    overflow-x hidden
 
     // 变量定义
     --content-font-size: 16px;
     --content-color: #c1c1c1;
 
     font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    height 90vh
+    height 90%
 
     .chat-line {
       // 隐藏滚动条

web/src/views/admin/ImageList.vue

@@ -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"
+          <el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event,'mj')"></el-input>
+                    @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"
+          <el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event, 'sd')"></el-input>
+                    @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"
+          <el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event,'dall')"></el-input>
+                    @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>

web/src/views/admin/Medias.vue

@@ -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>