瀑布流样式更改

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,

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"
+              :gap="8"
-              :bottomGap="20"
+              :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-if="slotProp.item.progress === 101"
+                    v-else
+                    class="error-container"
+                    :style="{
+                      width: '100%',
+                      height: `${slotProp.item.height || 300}px`,
+                      objectFit: 'cover'
+                    }"
+                  >
+                    <div
+                      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,21 +396,64 @@
                       />
                     </div>
                   </div>
-
+                  <div class="tools-box">
                     <div class="tools">
                       <el-button
-                      v-if="slotProp.item.progress >= 100"
+                        type="primary"
+                        v-if="
+                          slotProp.item.progress >= 100 &&
+                          slotProp.item.video_url
+                        "
                         @click="downloadVideo(slotProp.item)"
                       >
                         <el-icon><Download /></el-icon>
                       </el-button>
-                    <el-button type="danger" @click="deleteTask(slotProp.item)">
+
+                      <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"
-                        title="提示词"
                           :width="240"
                           trigger="hover"
                         >
@@ -400,20 +464,24 @@
                           </template>
 
                           <template #default>
-                          <div class="mj-list-item-prompt">
+                            <div class="top-tips">
-                            <span>{{ slotProp.item.prompt }}</span>
+                              <span>提示词</span
-                            <el-icon
+                              ><el-icon
-                              class="copy-prompt-mj"
+                                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>
               </template>
               <template #footer>
                 <div class="no-more-data">
@@ -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
+  // margin: 10px
-  border: 1px solid #666;
+  // border: 1px solid #666;
-  padding: 6px;
+  // 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
+  .error-container
-    position: absolute
+    position: relative
-    top: 0
+    background: var(--bg-deep-color)
-    left: 0
-    right: 0
-    bottom: 0
-    background: rgba(0, 0, 0, 0.7)
     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
 
     .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
+    gap: 5px
-    margin:5px 0 0
+    margin: 5px 5px 5px 0;
+
+
     .el-button+.el-button
       margin-left: 0px;
 
     .el-button
-      padding: 6px
+      padding: 3px
       border-radius: 50%
 </style>