keling 样式和瀑布流

web/src/views/KeLing.vue

@@ -22,10 +22,18 @@
                   <el-col :span="8" v-for="item in rates" :key="item.value">
                     <div
                       class="flex-col items-center"
-                      :class="item.value === params.aspect_ratio ? 'grid-content active' : 'grid-content'"
+                      :class="
+                        item.value === params.aspect_ratio
+                          ? 'grid-content active'
+                          : 'grid-content'
+                      "
                       @click="changeRate(item)"
                     >
-                      <el-image class="icon proportion" :src="item.img" fit="cover"></el-image>
+                      <el-image
+                        class="icon proportion"
+                        :src="item.img"
+                        fit="cover"
+                      ></el-image>
                       <div class="texts">{{ item.text }}</div>
                     </div>
                   </el-col>
@@ -65,7 +73,12 @@
             <!-- 创意程度 -->
             <div class="param-line">
               <el-form-item label="创意程度">
-                <el-slider v-model="params.cfg_scale" :min="0" :max="1" :step="0.1" />
+                <el-slider
+                  v-model="params.cfg_scale"
+                  :min="0"
+                  :max="1"
+                  :step="0.1"
+                />
               </el-form-item>
             </div>
 
@@ -82,7 +95,10 @@
 
               <!-- 添加运镜类型选择 -->
               <el-form-item label="运镜类型">
-                <el-select v-model="params.camera_control.type" placeholder="请选择运镜类型">
+                <el-select
+                  v-model="params.camera_control.type"
+                  placeholder="请选择运镜类型"
+                >
                   <el-option label="请选择" value="" />
                   <el-option label="简单运镜" value="simple" />
                   <el-option label="下移拉远" value="down_back" />
@@ -93,24 +109,51 @@
               </el-form-item>
 
               <!-- 仅在simple模式下显示详细配置 -->
-              <div class="camera-control" v-if="params.camera_control.type === 'simple'">
+              <div
+                class="camera-control"
+                v-if="params.camera_control.type === 'simple'"
+              >
                 <el-form-item label="水平移动">
-                  <el-slider v-model="params.camera_control.config.horizontal" :min="-10" :max="10" />
+                  <el-slider
+                    v-model="params.camera_control.config.horizontal"
+                    :min="-10"
+                    :max="10"
+                  />
                 </el-form-item>
                 <el-form-item label="垂直移动">
-                  <el-slider v-model="params.camera_control.config.vertical" :min="-10" :max="10" />
+                  <el-slider
+                    v-model="params.camera_control.config.vertical"
+                    :min="-10"
+                    :max="10"
+                  />
                 </el-form-item>
                 <el-form-item label="左右旋转">
-                  <el-slider v-model="params.camera_control.config.pan" :min="-10" :max="10" />
+                  <el-slider
+                    v-model="params.camera_control.config.pan"
+                    :min="-10"
+                    :max="10"
+                  />
                 </el-form-item>
                 <el-form-item label="上下旋转">
-                  <el-slider v-model="params.camera_control.config.tilt" :min="-10" :max="10" />
+                  <el-slider
+                    v-model="params.camera_control.config.tilt"
+                    :min="-10"
+                    :max="10"
+                  />
                 </el-form-item>
                 <el-form-item label="横向翻转">
-                  <el-slider v-model="params.camera_control.config.roll" :min="-10" :max="10" />
+                  <el-slider
+                    v-model="params.camera_control.config.roll"
+                    :min="-10"
+                    :max="10"
+                  />
                 </el-form-item>
                 <el-form-item label="镜头缩放">
-                  <el-slider v-model="params.camera_control.config.zoom" :min="-10" :max="10" />
+                  <el-slider
+                    v-model="params.camera_control.config.zoom"
+                    :min="-10"
+                    :max="10"
+                  />
                 </el-form-item>
               </div>
             </div>
@@ -122,12 +165,19 @@
       <div class="main-content task-list-inner">
         <!-- 任务类型选择 -->
         <div class="param-line">
-          <el-tabs v-model="params.task_type" @tab-change="tabChange" class="title-tabs">
+          <el-tabs
+            v-model="params.task_type"
+            @tab-change="tabChange"
+            class="title-tabs"
+          >
             <el-tab-pane label="文生视频" name="text2video">
               <div class="text">使用文字描述想要生成视频的内容</div>
             </el-tab-pane>
             <el-tab-pane label="图生视频" name="image2video">
-              <div class="text">以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG /JPG/JPEG 格式图片；</div>
+              <div class="text">
+                以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG
+                /JPG/JPEG 格式图片；
+              </div>
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -142,7 +192,13 @@
               placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
             />
             <el-row class="text-info">
-              <el-button class="generate-btn" @click="generatePrompt" :loading="isGenerating" size="small" color="#5865f2">
+              <el-button
+                class="generate-btn"
+                @click="generatePrompt"
+                :loading="isGenerating"
+                size="small"
+                color="#5865f2"
+              >
                 <i class="iconfont icon-chuangzuo"></i>
                 生成专业视频提示词
               </el-button>
@@ -153,15 +209,35 @@
             <div class="image-upload img-inline">
               <div class="upload-box img-uploader">
                 <h4>起始帧</h4>
-                <el-upload class="uploader img-uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadStartImage" accept=".jpg,.png,.jpeg">
-                  <img v-if="params.image" :src="params.image" class="preview" />
+                <el-upload
+                  class="uploader img-uploader"
+                  :auto-upload="true"
+                  :show-file-list="false"
+                  :http-request="uploadStartImage"
+                  accept=".jpg,.png,.jpeg"
+                >
+                  <img
+                    v-if="params.image"
+                    :src="params.image"
+                    class="preview"
+                  />
                   <el-icon v-else class="upload-icon"><Plus /></el-icon>
                 </el-upload>
               </div>
               <div class="upload-box img-uploader">
                 <h4>结束帧</h4>
-                <el-upload class="uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadEndImage" accept=".jpg,.png,.jpeg">
-                  <img v-if="params.image_tail" :src="params.image_tail" class="preview" />
+                <el-upload
+                  class="uploader"
+                  :auto-upload="true"
+                  :show-file-list="false"
+                  :http-request="uploadEndImage"
+                  accept=".jpg,.png,.jpeg"
+                >
+                  <img
+                    v-if="params.image_tail"
+                    :src="params.image_tail"
+                    class="preview"
+                  />
                   <el-icon v-else class="upload-icon"><Plus /></el-icon>
                 </el-upload>
               </div>
@@ -170,7 +246,10 @@
               <div class="flex-row justify-between items-center">
                 <div class="flex-row justify-start items-center">
                   <span>提示词：</span>
-                  <el-tooltip content="输入你想要的内容，用逗号分割" placement="right">
+                  <el-tooltip
+                    content="输入你想要的内容，用逗号分割"
+                    placement="right"
+                  >
                     <el-icon>
                       <InfoFilled />
                     </el-icon>
@@ -179,7 +258,12 @@
               </div>
             </div>
             <div class="param-line pt">
-              <el-input v-model="params.prompt" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="描述视频画面细节" />
+              <el-input
+                v-model="params.prompt"
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 6 }"
+                placeholder="描述视频画面细节"
+              />
             </div>
           </div>
 
@@ -188,7 +272,10 @@
             <div class="flex-row justify-between items-center">
               <div class="flex-row justify-start items-center">
                 <span>不希望出现的内容：（可选）</span>
-                <el-tooltip content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
+                <el-tooltip
+                  content="不想出现在图片上的元素(例如：树，建筑)"
+                  placement="right"
+                >
                   <el-icon>
                     <InfoFilled />
                   </el-icon>
@@ -208,83 +295,172 @@
           <!-- 算力显示 -->
           <el-row class="text-info">
             <el-text type="primary"
-              >每次生成视频消耗 <el-text type="warning">{{ powerCost }}算力;</el-text> </el-text
+              >每次生成视频消耗
+              <el-text type="warning">{{ powerCost }}算力;</el-text> </el-text
             >&nbsp;&nbsp;
             <el-text type="primary"
-              >当前可用算力：<el-text type="warning">{{ availablePower }}</el-text></el-text
+              >当前可用算力：<el-text type="warning">{{
+                availablePower
+              }}</el-text></el-text
             >
           </el-row>
 
           <!-- 生成按钮 -->
           <div class="submit-btn">
-            <el-button type="primary" :dark="false" @click="generate" round>立即生成</el-button>
+            <el-button type="primary" :dark="false" @click="generate" round
+              >立即生成</el-button
+            >
           </div>
         </div>
 
         <!-- 任务列表区域 -->
         <div class="task-list job-list-box">
-          <h2 class="text-xl param-line pt">任务列表</h2>
-
           <!-- 任务类型筛选 -->
+          <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>
 
-          <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>
+          <h2 class="text-xl pt">任务列表</h2>
 
           <!-- 运行中的任务 -->
-          <div class="running-tasks" v-if="runningTasks.length > 0">
-            <h3>运行中</h3>
-            <div class="task-grid">
-              <div v-for="task in runningTasks" :key="task.id" class="task-card">
-                <div class="status">处理中...</div>
-                <div class="prompt">{{ task.prompt }}</div>
-              </div>
-            </div>
-          </div>
+          <task-list :list="runningTasks" />
+          <template v-if="finishedTasks.length > 0">
+            <h2 class="record-title pt">创作记录</h2>
+            <!-- 已完成的任务 -->
+            <v3-waterfall
+              :key="waterfallKey"
+              :list="finishedTasks"
+              @scrollReachBottom="fetchTasks"
+              :gap="20"
+              :bottomGap="20"
+              :colWidth="300"
+              :distanceToScroll="100"
+              :isLoading="loading"
+              :isOver="isOver"
+              class="task-waterfall"
+            >
+              <template #default="slotProp">
+                <div
+                  class="job-item-box"
+                  :class="{
+                    processing: slotProp.item.progress < 100,
+                    error: slotProp.item.progress === 101
+                  }"
+                >
+                  <video
+                    v-if="slotProp.item.progress >= 100"
+                    class="preview"
+                    :src="slotProp.item.video_url"
+                    @click="previewVideo(slotProp.item)"
+                    controls
+                  ></video>
 
-          <!-- 已完成的任务 -->
-          <div class="finished-tasks">
-            <h3>已完成</h3>
-            <div class="task-grid">
-              <div v-for="task in finishedTasks" :key="task.id" class="task-card">
-                <video class="preview" :src="task.video_url" @click="previewVideo(task)" controls></video>
-                <div class="tools">
-                  <el-button @click="downloadVideo(task)">下载</el-button>
-                  <el-button @click="deleteTask(task)">删除</el-button>
+                  <div v-else class="status-overlay">
+                    <div
+                      v-if="slotProp.item.progress === 101"
+                      class="error-status"
+                    >
+                      <el-icon><CloseBold /></el-icon>
+                      任务失败
+                    </div>
+                    <div v-else class="processing-status">
+                      <el-progress
+                        :percentage="slotProp.item.progress"
+                        :stroke-width="12"
+                        status="success"
+                      />
+                    </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"
+                      >
+                        <template #reference>
+                          <el-icon class="chromefilled">
+                            <ChromeFilled />
+                          </el-icon>
+                        </template>
+
+                        <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 />
+                            </el-icon>
+                          </div>
+                        </template>
+                      </el-popover>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 分页控制 -->
-          <el-pagination
-            v-if="total > pageSize"
-            background
-            layout="prev, pager, next"
-            :total="total"
-            :page-size="pageSize"
-            @current-change="handlePageChange"
-          />
+              </template>
+              <template #footer>
+                <div class="no-more-data">
+                  <span>没有更多数据了</span>
+                  <i class="iconfont icon-face"></i>
+                </div>
+              </template>
+            </v3-waterfall>
+          </template>
         </div>
       </div>
     </div>
 
     <!-- 视频预览对话框 -->
     <el-dialog v-model="previewVisible" title="视频预览" width="80%">
-      <video v-if="currentVideo" :src="currentVideo" controls style="width: 100%"></video>
+      <video
+        v-if="currentVideo"
+        :src="currentVideo"
+        controls
+        style="width: 100%"
+      ></video>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue";
-import { Plus, InfoFilled } from "@element-plus/icons-vue";
+import TaskList from "@/components/TaskList.vue";
+import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
+import {
+  Plus,
+  Delete,
+  InfoFilled,
+  ChromeFilled,
+  DocumentCopy,
+  Download
+} from "@element-plus/icons-vue";
 import { httpGet, httpPost, httpDownload } from "@/utils/http";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { getClientId } from "@/store/cache";
-import {closeLoading, showLoading, showMessageError, showMessageOK} from "@/utils/dialog";
+import { getClientId, checkSession } from "@/store/cache";
+
+import {
+  closeLoading,
+  showLoading,
+  showMessageError,
+  showMessageOK
+} from "@/utils/dialog";
+import { replaceImg } from "@/utils/libs";
 
 // 参数设置
 const params = reactive({
@@ -305,11 +481,11 @@ const params = reactive({
       pan: 0,
       tilt: 0,
       roll: 0,
-      zoom: 0,
-    },
+      zoom: 0
+    }
   },
   image: "",
-  image_tail: "",
+  image_tail: ""
 });
 const rates = [
   { css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
@@ -318,14 +494,14 @@ const rates = [
     css: "size16-9",
     value: "16:9",
     text: "16:9",
-    img: "/images/mj/rate_16_9.png",
+    img: "/images/mj/rate_16_9.png"
   },
   {
     css: "size9-16",
     value: "9:16",
     text: "9:16",
-    img: "/images/mj/rate_9_16.png",
-  },
+    img: "/images/mj/rate_9_16.png"
+  }
 ];
 
 // 切换图片比例
@@ -342,10 +518,11 @@ const taskFilter = ref("all");
 const runningTasks = ref([]);
 const finishedTasks = ref([]);
 const total = ref(0);
-const pageSize = ref(12);
+const pageSize = ref(15);
 const currentPage = ref(1);
 const previewVisible = ref(false);
 const currentVideo = ref("");
+const isOver = ref(false);
 
 // 方法定义
 
@@ -361,10 +538,10 @@ const uploadStartImage = async (file) => {
     const res = await httpPost("/api/upload", formData);
     params.image = res.data.url;
     ElMessage.success("上传成功");
-    closeLoading()
+    closeLoading();
   } catch (e) {
     showMessageError("上传失败: " + e.message);
-    closeLoading()
+    closeLoading();
   }
 };
 
@@ -396,9 +573,12 @@ const generatePrompt = async () => {
 };
 
 const generate = async () => {
-  if (!params.prompt) {
-    return showMessageError("请输入视频描述");
+  if (!params.prompt?.trim()) {
+    return ElMessage.error("请输入视频描述");
   }
+  // if (params.task_type === "image2video" && !params.image) {
+  //   return ElMessage.error("请上传起始帧图片");
+  // }
 
   generating.value = true;
   // 处理图片链接
@@ -407,6 +587,7 @@ const generate = async () => {
   try {
     await httpPost("/api/video/keling/create", params);
     showMessageOK("任务创建成功");
+    // 立即获取最新数据
     fetchTasks();
   } catch (e) {
     showMessageError("创建失败: " + e.message);
@@ -414,26 +595,69 @@ const generate = async () => {
     generating.value = false;
   }
 };
+const loading = ref(false);
+const isLogin = ref(false);
 
 const fetchTasks = async () => {
+  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_size: pageSize.value,
       type: "keling",
-      task_type: taskFilter.value === "all" ? "" : taskFilter.value,
+      task_type: taskFilter.value === "all" ? "" : taskFilter.value
     });
-    runningTasks.value = res.data.items.filter((task) => task.progress < 100);
-    finishedTasks.value = res.data.items.filter((task) => task.progress === 100);
-    total.value = res.data.total;
+
+    // 精确任务过滤逻辑
+    const data = res.data || {};
+    const newRunning = data.items.filter(
+      (task) => task.progress < 100 && task.progress !== 101
+    );
+    runningTasks.value = [...runningTasks.value, ...newRunning];
+
+    const newfinished = data.items.filter((task) => task.progress >= 100);
+    finishedTasks.value = [...finishedTasks.value, ...newfinished];
+
+    // // 强制刷新瀑布流
+    waterfallKey.value = Date.now();
+    total.value = data.total;
+
+    const shouldLoadNextPage =
+      runningTasks.value.length > 0 ||
+      (runningTasks.value.length === 0 &&
+        finishedTasks.value.length < total.value);
+
+    if (shouldLoadNextPage) {
+      currentPage.value++;
+    }
+
+    // 优化加载完成判断
+    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;
   }
 };
 
-const handlePageChange = (page) => {
-  currentPage.value = page;
-  fetchTasks();
+const waterfallKey = ref(Date.now());
+
+// 检测任务状态
+const checkAllCompleted = () => {
+  return runningTasks.value.length === 0;
 };
 
 const previewVideo = (task) => {
@@ -468,13 +692,119 @@ const deleteTask = async (task) => {
   }
 };
 
+fetchTasks();
 // 生命周期钩子
-onMounted(() => {
-  fetchTasks();
+onMounted(async () => {
+  checkSession()
+    .then(async () => {
+      isLogin.value = true;
+      console.log("mounted-isLogin-可以继续", isLogin.value);
+      await fetchTasks();
+    })
+    .catch(() => {});
+
+  // fetchTasks();
+});
+onUnmounted(() => {});
+// 监听任务状态变化
+watch([runningTasks, finishedTasks], () => {
+  if (checkAllCompleted()) {
+    console.log("所有任务已完成");
+  }
 });
 </script>
 
 <style lang="stylus" scoped>
 @import "@/assets/css/image-keling.styl"
 @import "@/assets/css/custom-scroll.styl"
+.mj-list-item-prompt{
+  max-height: 600px;
+  overflow: auto;
+}
+:deep(.running-job-box .image-slot){
+  display: flex
+  align-items: center
+  flex-direction: column;
+  justify-content: center
+  width: 100%
+  height: 100%
+  font-size: 30px
+  color: #909399
+  background: #f5f7fa
+  text-align: center
+  width: 200px;
+  height: 200px;
+  .iconfont{
+    font-size: 45px
+
+  }
+  span{
+    font-size: 15px
+  }
+}
+
+
+.record-title
+  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
+  overflow: hidden
+  margin: 10px
+  border: 1px solid #666;
+  padding: 6px;
+  border-radius: 6px;
+  break-inside: avoid
+  video
+    min-height: 200px;
+  .chromefilled
+    font-size: 24px;
+  .show-prompt
+    display: flex;
+    align-items: center;
+  &:hover
+    transform: translateY(-3px)
+
+  .status-overlay
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background: rgba(0, 0, 0, 0.7)
+    display: flex
+    align-items: center
+    justify-content: center
+
+    .error-status
+      color: #ff4d4f
+      text-align: center
+      .el-icon
+        font-size: 24px
+        display: block
+        margin-bottom: 8px
+
+    .processing-status
+      width: 80%
+      .el-progress
+        margin: 0 auto
+
+  .tools
+    align-items: center;
+    justify-content: flex-end;
+    display: flex
+    gap: 8px
+    margin:5px 0 0
+    .el-button+.el-button
+      margin-left: 0px;
+
+    .el-button
+      padding: 6px
+      border-radius: 50%
 </style>