代码优化

web/src/views/admin/Medias.vue

@@ -1,146 +1,140 @@
 <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">
+      <el-tab-pane
+        v-for="media in mediaTypes"
+        :key="media.name"
+        :label="media.label"
+        :name="media.name"
+        v-loading="data[media.name].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
-          <el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'suno')" clearable />
+            v-model="data[media.name].query.username"
+            placeholder="用户名"
+            class="handle-input mr10"
+            @keyup="search($event, media.name)"
+            clearable
+          />
+          <el-input
+            v-model="data[media.name].query.prompt"
+            placeholder="提示词"
+            class="handle-input mr10"
+            @keyup="search($event, media.name)"
+            clearable
+          />
           <el-date-picker
-            v-model="data.suno.query.created_at"
+            v-model="data[media.name].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"
+            style="
+              margin-right: 10px;
+              width: 200px;
+              position: relative;
+              top: 3px;
+            "
           />
-          <el-button type="primary" :icon="Search" @click="fetchSunoData">搜索</el-button>
+          <el-button type="primary" :icon="Search" @click="media.fetchData"
+            >搜索</el-button
+          >
         </div>
 
-        <div v-if="data.suno.items.length > 0">
+        <div v-if="data[media.name].items.length > 0">
           <el-row>
-            <el-table :data="data.suno.items" :row-key="(row) => row.id" table-layout="auto">
+            <el-table
+              :data="data[media.name].items"
+              :row-key="(row) => row.id"
+              table-layout="auto"
+            >
               <el-table-column prop="user_id" label="用户ID" />
-              <el-table-column label="歌曲预览">
+              <el-table-column label="预览">
-                <template #default="scope">
+                <template
+                  #default="scope"
+                  v-if="media.previewComponent === 'MusicPreview'"
+                >
                   <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>
+                    <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" />
+                  <el-image
+                    v-else
+                    src="/images/failed.jpg"
+                    style="height: 90px"
+                    fit="cover"
+                  />
                 </template>
-              </el-table-column>
+                <template
-              <el-table-column prop="title" label="标题" />
+                  #default="scope"
-              <el-table-column prop="progress" label="任务进度">
+                  v-if="media.previewComponent === 'VideoPreview'"
-                <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>
+                      <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" />
+                    <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>
+                  <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 v-if="media.previewComponent === 'MusicPreview'">
+                <el-table-column prop="tags" label="风格" />
+                <el-table-column prop="play_times" label="播放次数" />
+                <el-table-column label="歌词">
                   <template #default="scope">
-                  <el-popover placement="top-start" title="提示词" :width="300" trigger="hover" :content="scope.row.prompt">
+                    <el-button
+                      size="small"
+                      type="primary"
+                      plain
+                      @click="showLyric(scope.row)"
+                      >查看歌词</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </template>
+              <el-table-column
+                label="提示词"
+                v-if="media.previewComponent === 'VideoPreview'"
+              >
+                <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>
@@ -155,15 +149,17 @@
               <el-table-column label="失败原因">
                 <template #default="scope">
                   <el-popover
+                    v-if="scope.row.progress === 101"
                     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>
+                      <el-text type="danger">{{
+                        substr(scope.row.err_msg, 20)
+                      }}</el-text>
                     </template>
                   </el-popover>
                   <span v-else>无</span>
@@ -171,7 +167,10 @@
               </el-table-column>
               <el-table-column label="操作" width="180">
                 <template #default="scope">
-                  <el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'luma')">
+                  <el-popconfirm
+                    title="确定要删除当前记录吗?"
+                    @confirm="remove(scope.row, media.name)"
+                  >
                     <template #reference>
                       <el-button size="small" type="danger">删除</el-button>
                     </template>
@@ -183,29 +182,40 @@
 
           <div class="pagination">
             <el-pagination
-              v-if="data.luma.total > 0"
+              v-if="data[media.name].total > 0"
               background
               layout="total,prev, pager, next"
               :hide-on-single-page="true"
-              v-model:current-page="data.luma.page"
+              v-model:current-page="data[media.name].page"
-              v-model:page-size="data.luma.pageSize"
+              v-model:page-size="data[media.name].pageSize"
-              @current-change="fetchLumaData()"
+              @current-change="media.fetchData"
-              :total="data.luma.total"
+              :total="data[media.name].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
+        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" />
+      <music-player
+        :songs="playList"
+        ref="playerRef"
+        :show-close="true"
+        @close="showPlayer = false"
+      />
     </div>
 
     <el-dialog v-model="showLyricDialog" title="歌词">
@@ -223,7 +233,6 @@ 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: [],
@@ -231,7 +240,7 @@ const data = ref({
     total: 0,
     page: 1,
     pageSize: 10,
-    loading: true,
+    loading: true
   },
   luma: {
     items: [],
@@ -239,9 +248,38 @@ const data = ref({
     total: 0,
     page: 1,
     pageSize: 10,
-    loading: true,
+    loading: true
   },
+  keling: {
+    items: [],
+    query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
+    total: 0,
+    page: 1,
+    pageSize: 10,
+    loading: true
+  }
 });
+
+const mediaTypes = [
+  {
+    name: "suno",
+    label: "Suno音乐",
+    fetchData: () => fetchSunoData(),
+    previewComponent: "MusicPreview"
+  },
+  {
+    name: "luma",
+    label: "Luma视频",
+    fetchData: () => fetchLumaData(),
+    previewComponent: "VideoPreview"
+  },
+  {
+    name: "keling",
+    label: "可灵视频",
+    fetchData: () => fetchKelingData(),
+    previewComponent: "VideoPreview"
+  }
+];
 const activeName = ref("suno");
 const playList = ref([]);
 const playerRef = ref(null);
@@ -263,6 +301,9 @@ const handleChange = (tab) => {
     case "luma":
       fetchLumaData();
       break;
+    case "keling":
+      fetchKelingData();
+      break;
   }
 };
 
@@ -311,6 +352,24 @@ const fetchLumaData = () => {
       ElMessage.error("获取数据失败：" + e.message);
     });
 };
+const fetchKelingData = () => {
+  const d = data.value.keling;
+  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}`)
@@ -320,6 +379,16 @@ const remove = function (row, tab) {
     })
     .catch((e) => {
       ElMessage.error("删除失败：" + e.message);
+    })
+    .finally(() => {
+      nextTick(() => {
+        // data.value[tab].page = 1;
+        // data.value[tab].pageSize = 10;
+        const mediaType = mediaTypes.find((type) => type.name === tab);
+        if (mediaType && mediaType.fetchData) {
+          mediaType.fetchData();
+        }
+      });
     });
 };
 
@@ -337,7 +406,7 @@ const playVideo = (item) => {
 const md = require("markdown-it")({
   breaks: true,
   html: true,
-  linkify: true,
+  linkify: true
 });
 
 const showLyric = (item) => {