keling 头像和轮询

web/src/assets/css/image-keling.styl

@@ -203,6 +203,7 @@
   .img-inline {
     display: flex;
     gap: 20px;
+    align-items: center;
 
     .img-uploader {
       text-align: center;

web/src/views/KeLing.vue

@@ -208,7 +208,14 @@
 
           <div v-else class="image2video">
             <div class="image-upload img-inline">
-              <div class="upload-box img-uploader">
+              <div class="upload-box img-uploader video-img-box">
+                <el-icon
+                  v-if="params.image"
+                  @click="remove('start', params.image)"
+                  class="removeimg"
+                  ><CircleCloseFilled
+                /></el-icon>
+
                 <h4>起始帧</h4>
                 <el-upload
                   class="uploader img-uploader"
@@ -222,10 +229,20 @@
                     :src="params.image"
                     class="preview"
                   />
+
                   <el-icon v-else class="upload-icon"><Plus /></el-icon>
                 </el-upload>
               </div>
-              <div class="upload-box img-uploader">
+              <div class="btn-swap" v-if="params.image && params.image_tail">
+                <i class="iconfont icon-exchange" @click="switchReverse"></i>
+              </div>
+              <div class="upload-box img-uploader video-img-box">
+                <el-icon
+                  v-if="params.image_tail"
+                  @click="remove('end', params.image_tail)"
+                  class="removeimg"
+                  ><CircleCloseFilled
+                /></el-icon>
                 <h4>结束帧</h4>
                 <el-upload
                   class="uploader"
@@ -317,13 +334,13 @@
         <!-- 任务列表区域 -->
         <div class="task-list job-list-box">
           <!-- 任务类型筛选 -->
-          <div class="type-btn-group">
+          <!-- <div class="type-btn-group">
             <el-radio-group v-model="taskFilter" @change="fetchTasks">
               <el-radio-button label="all">全部</el-radio-button>
               <el-radio-button label="text2video">文生视频</el-radio-button>
               <el-radio-button label="image2video">图生视频</el-radio-button>
             </el-radio-group>
-          </div>
+          </div> -->
 
           <h2 class="text-xl pt">任务列表</h2>
 
@@ -335,38 +352,50 @@
             <v3-waterfall
               :key="waterfallKey"
               :list="finishedTasks"
-                @scrollReachBottom="fetchTasks"
+              @scrollReachBottom="handleScroll"
-                :gap="20"
+              :gap="8"
-                :bottomGap="20"
+              :bottomGap="8"
-                :colWidth="300"
+              :colWidth="400"
               :distanceToScroll="100"
               :isLoading="loading"
               :isOver="isOver"
               class="task-waterfall"
             >
               <template #default="slotProp">
-                <div
+                <!-- 视频成功渲染部分 -->
-                    class="job-item-box"
+                <div class="job-item-box">
-                    :class="{
-                    processing: slotProp.item.progress < 100,
-                    error: slotProp.item.progress === 101
-                  }"
-                >
                   <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
@@ -377,20 +406,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.err_msg"
+                              >
+                                <DocumentCopy />
+                              </el-icon>
+                            </div>
+                            <div class="mj-list-item-prompt">
+                              <span>{{ slotProp.item.err_msg }}</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"
                         >
@@ -401,20 +474,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">
@@ -441,6 +518,7 @@
 </template>
 
 <script setup>
+import failed from "@/assets/img/failed.png";
 import TaskList from "@/components/TaskList.vue";
 import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
 import {
@@ -450,11 +528,13 @@ import {
   ChromeFilled,
   DocumentCopy,
   Download,
-    CloseBold
+  WarnTriangleFilled,
+  CircleCloseFilled
 } from "@element-plus/icons-vue";
 import { httpGet, httpPost, httpDownload } from "@/utils/http";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { checkSession } from "@/store/cache";
+import { getClientId, checkSession } from "@/store/cache";
+import Clipboard from "clipboard";
 
 import {
   closeLoading,
@@ -466,6 +546,7 @@ import { replaceImg } from "@/utils/libs";
 
 // 参数设置
 const params = reactive({
+  // client_id: getClientId(),
   task_type: "text2video",
   model: "default",
   prompt: "",
@@ -489,7 +570,7 @@ const params = reactive({
   image_tail: ""
 });
 const rates = [
-  {css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png"},
+  { css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
 
   {
     css: "size16-9",
@@ -511,6 +592,7 @@ const changeRate = (item) => {
 };
 
 // 状态变量
+let pollTimer = null;
 const generating = ref(false);
 const isGenerating = ref(false);
 const powerCost = ref(10);
@@ -519,12 +601,13 @@ const taskFilter = ref("all");
 const runningTasks = ref([]);
 const finishedTasks = ref([]);
 const total = ref(0);
-const pageSize = ref(15);
+const pageSize = ref(4);
 const currentPage = ref(1);
 const previewVisible = ref(false);
 const currentVideo = ref("");
 const isOver = ref(false);
 const pullTask = ref(true);
+const waterfallKey = ref(Date.now());
 
 // 方法定义
 
@@ -539,6 +622,7 @@ const uploadStartImage = async (file) => {
     showLoading("图片上传中...");
     const res = await httpPost("/api/upload", formData);
     params.image = res.data.url;
+    console.log("------", params);
     ElMessage.success("上传成功");
     closeLoading();
   } catch (e) {
@@ -546,7 +630,18 @@ const uploadStartImage = async (file) => {
     closeLoading();
   }
 };
+const remove = (type, img) => {
+  if (type === "start") {
+    params.image = "";
+  } else if (type === "end") {
+    params.image_tail = "";
+  }
+};
 
+const switchReverse = () => {
+  //params.image 和 params.image_tail 交换值
+  [params.image, params.image_tail] = [params.image_tail, params.image];
+};
 const uploadEndImage = async (file) => {
   const formData = new FormData();
   formData.append("file", file.file);
@@ -565,7 +660,7 @@ const generatePrompt = async () => {
   }
   isGenerating.value = true;
   try {
-    const res = await httpPost("/api/prompt/video", {prompt: params.prompt});
+    const res = await httpPost("/api/prompt/video", { prompt: params.prompt });
     params.prompt = res.data;
   } catch (e) {
     showMessageError("生成失败: " + e.message);
@@ -575,6 +670,9 @@ const generatePrompt = async () => {
 };
 
 const generate = async () => {
+  //增加防抖
+  if (generating.value) return;
+
   if (!params.prompt?.trim()) {
     return ElMessage.error("请输入视频描述");
   }
@@ -593,10 +691,14 @@ const generate = async () => {
   try {
     await httpPost("/api/video/keling/create", params);
     showMessageOK("任务创建成功");
+    // 新增重置
+    currentPage.value = 1;
+    runningTasks.value = [];
+    finishedTasks.value = [];
+    pullTask.value = true; //新增开始轮询
+    isOver.value = false;
     // 立即获取最新数据
     await fetchTasks();
-    // 开启任务轮询
-    pullTask.value = true;
   } catch (e) {
     showMessageError("创建失败: " + e.message);
   } finally {
@@ -605,67 +707,87 @@ const generate = async () => {
 };
 const loading = ref(false);
 const isLogin = ref(false);
-
+const runningPage = ref(1);
-const fetchTasks = async () => {
+const taskfunction = async (running) => {
-  console.log("fetchTasks", !isLogin.value || isOver.value || loading.value);
-
-  if (!isLogin.value || isOver.value || loading.value) return;
-
-  loading.value = true;
-  try {
   const res = await httpGet("/api/video/list", {
-      page: currentPage.value,
+    page: running ? runningPage.value : currentPage.value,
-      page_size: pageSize.value,
+    page_size: running ? 100000 : pageSize.value,
     type: "keling",
     task_type: taskFilter.value === "all" ? "" : taskFilter.value
   });
-
+  return res;
-    // 精确任务过滤逻辑
+};
+//滚动 瀑布流
+const handleScroll = async () => {
+  if (!isLogin.value || loading.value || isOver.value) return;
+  try {
+    loading.value = true;
+    const res = await taskfunction(false);
     const data = res.data || {};
-    const newRunning = data.items.filter(
-        (task) => task.progress < 100 && task.progress !== 101
-    );
-    runningTasks.value = [...runningTasks.value, ...newRunning];
-    // 如果运行中的任务为零，则停止轮询
-    if (newRunning.length === 0) {
-      pullTask.value = false;
-    }
 
-    const newFinished = data.items.filter((task) => task.progress >= 100);
+    // 去重合并新数据
-    finishedTasks.value = [...finishedTasks.value, ...newFinished];
+    const newItems = data.items
+      .filter(
+        (task) =>
+          task.progress >= 100 &&
+          !finishedTasks.value.some((t) => t.id === task.id)
+      )
+      .map((item) => ({
+        ...item,
+        height: 300 * (Math.random() * 0.3 + 0.6) //生成300~420px随机高度
+      }));
+    finishedTasks.value = [...finishedTasks.value, ...newItems];
 
-    // // 强制刷新瀑布流
+    // 分页逻辑
-    waterfallKey.value = Date.now();
+    if (
-    total.value = data.total;
+      currentPage.value >= data.total_page ||
-
+      data.total <= finishedTasks.value.length
-    const shouldLoadNextPage =
+    ) {
-        runningTasks.value.length > 0 ||
+      isOver.value = true;
-        (runningTasks.value.length === 0 &&
+    } else {
-            finishedTasks.value.length < total.value);
-
-    if (shouldLoadNextPage) {
       currentPage.value++;
     }
-
+  } catch (error) {
-    // 优化加载完成判断
+    console.error("Error:", error);
-    const loadedCount = runningTasks.value.length + finishedTasks.value.length;
-    isOver.value = loadedCount >= total.value;
-
-    console.log("[Pagination] isOver:", isOver.value, {
-      running: runningTasks.value.length,
-      finished: finishedTasks.value.length,
-      total: total.value
-    });
-
-    waterfallKey.value = Date.now();
-  } catch (e) {
-    showMessageError("获取任务列表失败: " + e.message);
   } finally {
     loading.value = false;
+    console.log("finishedTasks.value", finishedTasks.value);
   }
 };
 
-const waterfallKey = ref(Date.now());
+//任务中 轮询
+const fetchTasks = async () => {
+  console.log("开始轮询=====", !isLogin.value || isOver.value || loading.value);
+
+  // if (!isLogin.value || isOver.value || loading.value) return;
+  if (!isLogin.value) return;
+
+  // loading.value = true;
+  try {
+    const res = await taskfunction(true);
+    runningPage.value++;
+    // 精确任务过滤逻辑
+    const data = res.data || {};
+    // 拿到任务中
+    runningTasks.value = data.items.filter((task) => task.progress < 100);
+    if (data.items.length === 0) {
+      pullTask.value = false; //新增停止轮询,下方重新请求一次
+      currentPage.value = 1;
+      runningTasks.value = [];
+      finishedTasks.value = [];
+      pullTask.value = true; //新增开始轮询
+      isOver.value = false;
+      // 立即获取最新数据
+      await handleScroll();
+    } else {
+      pullTask.value = true;
+    }
+  } catch (e) {
+    showMessageError("获取任务列表失败: " + e.message);
+  } finally {
+    // loading.value = false;
+  }
+};
 
 // 检测任务状态
 const checkAllCompleted = () => {
@@ -694,7 +816,7 @@ const downloadVideo = async (task) => {
 const deleteTask = async (task) => {
   try {
     await ElMessageBox.confirm("确定要删除该任务吗？");
-    await httpGet("/api/video/remove", {id: task.id});
+    await httpGet("/api/video/remove", { id: task.id });
     showMessageOK("删除成功");
     await fetchTasks();
   } catch (e) {
@@ -704,6 +826,7 @@ const deleteTask = async (task) => {
   }
 };
 
+const clipboard = ref(null);
 // 生命周期钩子
 onMounted(async () => {
   checkSession()
@@ -712,34 +835,91 @@ onMounted(async () => {
       console.log("mounted-isLogin-可以继续", isLogin.value);
 
       await fetchTasks();
-        setInterval(() => {
+      await handleScroll();
-          if (pullTask.value) {
+
-            fetchTasks();
+      pullTask.value = true;
-          }
+      // pollTimer = setInterval(() => {
-        }, 5000)
+      //   if (pullTask.value) {
+      //     fetchTasks();
+      //   }
+      // }, 5000);
     })
-      .catch(() => {
+    .catch(() => {});
+  //复制
+  clipboard.value = new Clipboard(".copy-prompt-kl");
+  clipboard.value.on("success", () => {
+    ElMessage.success("复制成功！");
+  });
+
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
   });
 });
 onUnmounted(() => {
+  clearInterval(pollTimer);
+  clipboard.value.destroy();
 });
 // 监听任务状态变化
-watch([runningTasks, finishedTasks], () => {
+watch(
-  if (checkAllCompleted()) {
+  () => [...runningTasks.value, ...finishedTasks.value],
-    console.log("所有任务已完成");
+  () => {
+    waterfallKey.value = Date.now();
+  },
+  { deep: true }
+);
+//监听 pullTask true 的时候定时器触发，否则清除定时器
+watch(
+  () => pullTask.value,
+  (newVal) => {
+    if (pullTask.value == true) {
+      pollTimer = setInterval(() => {
+        fetchTasks();
+      }, 5000);
+    } else {
+      clearInterval(pollTimer);
     }
-});
+  }
+);
 </script>
 
 <style lang="stylus" scoped>
 @import "@/assets/css/image-keling.styl"
 @import "@/assets/css/custom-scroll.styl"
-.mj-list-item-prompt {
+  .video-img-box{
+    position: relative;
+    .removeimg{
+      position: absolute;
+      cursor: pointer;
+      font-size: 20px;
+      color: #545454;
+      right: -6px;
+      top: 13px;
+      z-index: 1;
+
+    }
+    &:hover.img-mask{
+      opacity: 1;
+    }
+  }
+.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;
 }
-
+:deep(.running-job-box .image-slot){
-:deep(.running-job-box .image-slot) {
   display: flex
   align-items: center
   flex-direction: column;
@@ -752,88 +932,98 @@ watch([runningTasks, finishedTasks], () => {
   text-align: center
   width: 200px;
   height: 200px;
-
+  .iconfont{
-  .iconfont {
+    font-size: 45px;
-    font-size: 45px
 
   }
-
+  span{
-  span {
     font-size: 15px
   }
 }
 
 
 .record-title
-  padding: 1rem 0
+  padding:1rem 0
-
 .type-btn-group
   margin-bottom: 20px
-
 .task-waterfall
   margin: 0 -10px
   transition: opacity 0.3s ease
 
 .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
+
+    .el-button+.el-button
       margin-left: 0px;
 
     .el-button
-      padding: 6px
+      padding: 3px
       border-radius: 50%
 </style>