From 88eaddbd1d1214894542741f0e4702a3766a1d7a Mon Sep 17 00:00:00 2001
From: lqins <lqins168@gmail.com>
Date: Mon, 3 Mar 2025 17:58:45 +0800
Subject: [PATCH] =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/theme-dark.styl |   2 +
 web/src/assets/img/failed.png      | Bin 0 -> 4546 bytes
 web/src/views/KeLing.vue           | 253 +++++++++++++++++++++--------
 3 files changed, 190 insertions(+), 65 deletions(-)
 create mode 100644 web/src/assets/img/failed.png

diff --git a/web/src/assets/css/theme-dark.styl b/web/src/assets/css/theme-dark.styl
index 6c536df5..4676dd6b 100644
--- a/web/src/assets/css/theme-dark.styl
+++ b/web/src/assets/css/theme-dark.styl
@@ -47,6 +47,8 @@
   --hover-deep-color:#30323c;
   --tab-title-bg:#525777;//顶部tab栏背景切换
   --tab-title-color:#fff;//顶部tab栏文字切换
+  //深黑色
+  --bg-deep-color:rgba(255,255,255,0.8);
    //layout 
   .more-menus li.moreTitle,
   .twoTittle .title,
diff --git a/web/src/assets/img/failed.png b/web/src/assets/img/failed.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c9d2b51fb7e61402ac02e408a9fe72f13175b12
GIT binary patch
literal 4546
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

literal 0
HcmV?d00001

diff --git a/web/src/views/KeLing.vue b/web/src/views/KeLing.vue
index 9a056d00..efc791bb 100644
--- a/web/src/views/KeLing.vue
+++ b/web/src/views/KeLing.vue
@@ -332,11 +332,13 @@
             <h2 class="record-title pt">创作记录</h2>
             <!-- 已完成的任务 -->
             <v3-waterfall
+              :virtual-time="200"
+              :distance-to-scroll="150"
               :key="waterfallKey"
               :list="finishedTasks"
               @scrollReachBottom="fetchTasks"
-              :gap="20"
-              :bottomGap="20"
+              :gap="8"
+              :bottomGap="8"
               :colWidth="300"
               :distanceToScroll="100"
               :isLoading="loading"
@@ -344,6 +346,7 @@
               class="task-waterfall"
             >
               <template #default="slotProp">
+                <!-- 视频成功渲染部分 -->
                 <div
                   class="job-item-box"
                   :class="{
@@ -352,20 +355,38 @@
                   }"
                 >
                   <video
-                    v-if="slotProp.item.progress >= 100"
+                    v-if="
+                      slotProp.item.progress >= 100 && slotProp.item.video_url
+                    "
                     class="preview"
                     :src="slotProp.item.video_url"
                     @click="previewVideo(slotProp.item)"
                     controls
+                    :style="{
+                      width: '100%',
+                      height: `${slotProp.item.height || 400}px`
+                    }"
                   ></video>
 
-                  <div v-else class="status-overlay">
+                  <!-- 失败/无图状态 -->
+                  <div
+                    v-else
+                    class="error-container"
+                    :style="{
+                      width: '100%',
+                      height: `${slotProp.item.height || 300}px`,
+                      objectFit: 'cover'
+                    }"
+                  >
                     <div
-                      v-if="slotProp.item.progress === 101"
+                      v-if="
+                        slotProp.item.progress >= 100 &&
+                        !slotProp.item.video_url
+                      "
                       class="error-status"
                     >
-                      <el-icon><CloseBold /></el-icon>
-                      任务失败
+                      <img :src="failed" />
+                      生成失败
                     </div>
                     <div v-else class="processing-status">
                       <el-progress
@@ -375,42 +396,89 @@
                       />
                     </div>
                   </div>
-
-                  <div class="tools">
-                    <el-button
-                      v-if="slotProp.item.progress >= 100"
-                      @click="downloadVideo(slotProp.item)"
-                    >
-                      <el-icon><Download /></el-icon>
-                    </el-button>
-                    <el-button type="danger" @click="deleteTask(slotProp.item)">
-                      <el-icon><Delete /></el-icon>
-                    </el-button>
-                    <div class="show-prompt">
-                      <el-popover
-                        placement="left"
-                        title="提示词"
-                        :width="240"
-                        trigger="hover"
+                  <div class="tools-box">
+                    <div class="tools">
+                      <el-button
+                        type="primary"
+                        v-if="
+                          slotProp.item.progress >= 100 &&
+                          slotProp.item.video_url
+                        "
+                        @click="downloadVideo(slotProp.item)"
                       >
-                        <template #reference>
-                          <el-icon class="chromefilled">
-                            <ChromeFilled />
-                          </el-icon>
-                        </template>
+                        <el-icon><Download /></el-icon>
+                      </el-button>
 
-                        <template #default>
-                          <div class="mj-list-item-prompt">
-                            <span>{{ slotProp.item.prompt }}</span>
-                            <el-icon
-                              class="copy-prompt-mj"
-                              :data-clipboard-text="slotProp.item.prompt"
-                            >
-                              <DocumentCopy />
+                      <div
+                        class="show-prompt"
+                        v-if="
+                          slotProp.item.progress >= 100 &&
+                          !slotProp.item.video_url &&
+                          slotProp.item.err_msg
+                        "
+                      >
+                        <el-popover
+                          placement="left"
+                          :width="240"
+                          trigger="hover"
+                        >
+                          <template #reference>
+                            <el-icon class="chromefilled error-txt"
+                              ><WarnTriangleFilled
+                            /></el-icon>
+                          </template>
+
+                          <template #default>
+                            <div class="top-tips">
+                              <span>错误详细信息</span
+                              ><el-icon
+                                class="copy-prompt-kl"
+                                :data-clipboard-text="slotProp.item.prompt"
+                              >
+                                <DocumentCopy />
+                              </el-icon>
+                            </div>
+                            <div class="mj-list-item-prompt">
+                              <span>{{ slotProp.item.prompt }}</span>
+                            </div>
+                          </template>
+                        </el-popover>
+                      </div>
+
+                      <el-button
+                        type="danger"
+                        @click="deleteTask(slotProp.item)"
+                      >
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                      <div class="show-prompt">
+                        <el-popover
+                          placement="left"
+                          :width="240"
+                          trigger="hover"
+                        >
+                          <template #reference>
+                            <el-icon class="chromefilled">
+                              <ChromeFilled />
                             </el-icon>
-                          </div>
-                        </template>
-                      </el-popover>
+                          </template>
+
+                          <template #default>
+                            <div class="top-tips">
+                              <span>提示词</span
+                              ><el-icon
+                                class="copy-prompt-kl"
+                                :data-clipboard-text="slotProp.item.prompt"
+                              >
+                                <DocumentCopy />
+                              </el-icon>
+                            </div>
+                            <div class="mj-list-item-prompt">
+                              <span>{{ slotProp.item.prompt }}</span>
+                            </div>
+                          </template>
+                        </el-popover>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -440,6 +508,7 @@
 </template>
 
 <script setup>
+import failed from "@/assets/img/failed.png";
 import TaskList from "@/components/TaskList.vue";
 import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
 import {
@@ -448,11 +517,13 @@ import {
   InfoFilled,
   ChromeFilled,
   DocumentCopy,
-  Download
+  Download,
+  WarnTriangleFilled
 } from "@element-plus/icons-vue";
 import { httpGet, httpPost, httpDownload } from "@/utils/http";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { getClientId, checkSession } from "@/store/cache";
+import Clipboard from "clipboard";
 
 import {
   closeLoading,
@@ -620,7 +691,12 @@ const fetchTasks = async () => {
     runningTasks.value = [...runningTasks.value, ...newRunning];
 
     const newfinished = data.items.filter((task) => task.progress >= 100);
-    finishedTasks.value = [...finishedTasks.value, ...newfinished];
+    const finishedList = [...finishedTasks.value, ...newfinished];
+    finishedTasks.value = finishedList.map((item) => ({
+      ...item,
+      height: 300 * (Math.random() * 0.4 + 0.6) // 生成300~420px随机高度
+    }));
+    console.log("finishedTasks: " + finishedList);
 
     // // 强制刷新瀑布流
     waterfallKey.value = Date.now();
@@ -693,6 +769,8 @@ const deleteTask = async (task) => {
 };
 
 fetchTasks();
+const clipboard = ref(null);
+
 // 生命周期钩子
 onMounted(async () => {
   checkSession()
@@ -704,8 +782,18 @@ onMounted(async () => {
     .catch(() => {});
 
   // fetchTasks();
+  clipboard.value = new Clipboard(".copy-prompt-kl");
+  clipboard.value.on("success", () => {
+    ElMessage.success("复制成功！");
+  });
+
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
+onUnmounted(() => {
+  clipboard.value.destroy();
 });
-onUnmounted(() => {});
 // 监听任务状态变化
 watch([runningTasks, finishedTasks], () => {
   if (checkAllCompleted()) {
@@ -717,6 +805,20 @@ watch([runningTasks, finishedTasks], () => {
 <style lang="stylus" scoped>
 @import "@/assets/css/image-keling.styl"
 @import "@/assets/css/custom-scroll.styl"
+.copy-prompt-kl{
+  cursor pointer
+}
+.top-tips{
+  height: 30px
+  font-size: 18px
+  line-height: 30px
+  display: flex
+  align-items: center;
+  span{
+    margin-right: 10px
+    color:#000
+  }
+}
 .mj-list-item-prompt{
   max-height: 600px;
   overflow: auto;
@@ -735,7 +837,7 @@ watch([runningTasks, finishedTasks], () => {
   width: 200px;
   height: 200px;
   .iconfont{
-    font-size: 45px
+    font-size: 45px;
 
   }
   span{
@@ -754,57 +856,78 @@ watch([runningTasks, finishedTasks], () => {
 
 .job-item-box
   position: relative
-  transition: transform 0.3s ease
+  background: #f5f5f5;
+  transition: height 0.3s ease;
   overflow: hidden
-  margin: 10px
-  border: 1px solid #666;
-  padding: 6px;
+  // margin: 10px
+  // border: 1px solid #666;
+  // padding: 6px;
   border-radius: 6px;
   break-inside: avoid
   video
     min-height: 200px;
+    width: 100%;
+    object-fit: cover;
+
   .chromefilled
     font-size: 24px;
+    color: #fff;
+    &.error-txt{
+      color: #ffff54;
+      cursor:pointer;
+    }
   .show-prompt
     display: flex;
     align-items: center;
   &:hover
-    transform: translateY(-3px)
+    // transform: translateY(-3px)
+    .tools-box{
+      display:block
+      background:rgba(0, 0, 0, 0.3)
+      width : 100%;
+    }
 
-  .status-overlay
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background: rgba(0, 0, 0, 0.7)
+  .error-container
+    position: relative
+    background: var(--bg-deep-color)
     display: flex
     align-items: center
     justify-content: center
+    img{
+      width: 66%;
+      height: 66%;
+      object-fit: cover;
+      margin: 0 auto;
+    }
 
     .error-status
-      color: #ff4d4f
+      color: #c2c6cc
       text-align: center
-      .el-icon
-        font-size: 24px
-        display: block
-        margin-bottom: 8px
+      font-size: 24px
+
 
     .processing-status
       width: 80%
       .el-progress
         margin: 0 auto
-
+  .tools-box{
+    display:none
+    position:absolute;
+    top: 0;
+    right: 0;
+  }
   .tools
     align-items: center;
     justify-content: flex-end;
     display: flex
-    gap: 8px
-    margin:5px 0 0
+    gap: 5px
+    margin: 5px 5px 5px 0;
+
+
     .el-button+.el-button
       margin-left: 0px;
 
     .el-button
-      padding: 6px
+      padding: 3px
       border-radius: 50%
 </style>