keling style changed

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

@@ -0,0 +1,587 @@
+.page-keling {
+  display: flex;
+  min-height: 100vh;
+
+  .grid-content {
+    // background-color #383838
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 8px 14px;
+    display: flex;
+    cursor: pointer;
+    margin-bottom: 10px;
+    // border 1px solid #383838
+    border: 1px solid var(--chat-bg);
+
+    &:hover {
+      border: 1px solid var(--theme-border-hover);
+    }
+
+    .icon {
+      width: 20px;
+      height: 20px;
+      margin-bottom: 5px;
+    }
+
+    .text {
+      margin-left: 5px;
+      margin-top: 2px;
+    }
+  }
+
+  .param-line.pt {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .grid-content.active {
+    // color #47fff1
+    // background-color #585858
+    border: 1px solid var(--theme-border-hover);
+  }
+
+  .h-20 {
+    height: 4rem !important;
+  }
+
+  .scrollbar-type-nav {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    background-color: var(--tab-title-bg);
+    width: fit-content;
+    border: 1px solid rgba(79, 89, 102, 0.078);
+    border-radius: 20px;
+    margin: 0 auto;
+
+    // background: var(--chat-bg);
+    // width 100%
+    li {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 5px 8px;
+      height: 26px;
+      border-radius: 4px;
+      // border 1px solid rgb(80,80,80)
+      padding: 2px 12px;
+      // background rgba(60,60,60 0.9)
+      color: var(--theme-text-tertiary);
+      font-weight: bold;
+      font-size: 14px;
+      cursor: pointer;
+
+      .image {
+        width: 22px;
+        height: 22px;
+        overflow: hidden;
+        margin-right: 5px;
+        border-radius: 50%;
+      }
+
+      span {
+        color: var(--tab-title-color);
+      }
+
+      .el-icon {
+        fill: var(--tab-title-color);
+        color: var(--tab-title-color);
+      }
+
+      &.active {
+        background: #fff;
+        color: var(--el-color-primary);
+        border-radius: 20px;
+
+        span {
+          color: var(--el-color-primary);
+        }
+
+        .el-icon {
+          fill: var(--el-color-primary);
+          color: var(--el-color-primary) !important;
+        }
+      }
+    }
+  }
+
+  .main-content {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    padding-bottom: 1rem;
+    flex: 1;
+    background: var(--chat-bg);
+    // width: 100%;
+    // padding 0 10px 10px 10px
+    color: var(--text-theme-color);
+    overflow-x: hidden;
+  }
+
+  .camera-control {
+    padding: 10px;
+    border-radius: 4px;
+    background: var(--card-bg);
+
+    :deep(.el-form-item:last-child) {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .title-tabs {
+    :deep(.el-tabs__item.is-active) {
+      color: var(--theme-textcolor-normal);
+      font-size: 18px;
+    }
+
+    :deep(.el-tabs__item) {
+      color: var(--text-theme-color);
+      font-size: 18px;
+    }
+  }
+
+  .el-tabs {
+    --el-tabs-header-height: 55px;
+  }
+
+  .el-tabs__item {
+    color: var(--text-theme-color);
+    font-size: 18px;
+  }
+
+  .el-tabs__item.is-active, .title-tabs .el-tabs__item.is-active {
+  }
+
+  .title-tabs .el-tabs__active-bar {
+    background-color: var(--theme-textcolor-normal);
+  }
+
+  .el-textarea {
+    --el-input-focus-border-color: var(--el-color-primary);
+  }
+
+  .el-textarea__inner {
+    background: transparent;
+    color: var(--text-theme-color);
+  }
+
+  .el-input__wrapper {
+    background: transparent;
+    padding: 5px;
+  }
+
+  .text {
+    margin-bottom: 10px;
+    color: #6b778c;
+    font-size: 15px;
+  }
+
+  .param-line.pt {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .form-item-inner {
+    display: flex;
+    align-items: center;
+
+    .el-icon {
+      margin-left: 10px;
+    }
+  }
+
+  .el-form-item__label {
+    color: var(--text-theme-color);
+  }
+
+  // 图片上传样式
+  .img-inline {
+    display: flex;
+    gap: 20px;
+
+    .img-uploader {
+      text-align: center;
+
+      :deep(.el-upload) {
+        border: 1px dashed var(--el-border-color);
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        width: 120px;
+        height: 120px;
+        line-height: 120px;
+        transition: var(--el-transition-duration-fast);
+        margin-bottom: 20px;
+
+        &:hover {
+          border-color: var(--el-color-primary);
+        }
+
+        .el-icon.uploader-icon {
+          font-size: 28px;
+          color: #8c939d;
+          width: 100%;
+          height: 120px;
+          text-align: center;
+        }
+      }
+    }
+
+    .img-list-box {
+      display: flex;
+
+      .img-item {
+        width: 120px;
+        position: relative;
+        margin-right: 10px;
+
+        .el-image {
+          width: 120px;
+          height: 120px;
+          border-radius: 5px;
+        }
+
+        .el-button {
+          position: absolute;
+          right: 5px;
+          top: 5px;
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+  }
+
+  .el-row.text-info {
+    width: 100%;
+    padding: 10px 0;
+
+    .el-tag {
+      margin-right: 10px;
+    }
+  }
+
+  // 提交按钮
+  .submit-btn {
+    display: flex;
+    margin: 20px 0;
+
+    .el-button {
+      width: 200px;
+    }
+  }
+
+  .job-list-box {
+    // 任务列表
+    @import 'running-job-list.styl';
+
+    .finish-job-list {
+      #waterfall {
+        display: flex;
+        justify-content: center;
+        padding-top: 20px;
+        flex-flow: column;
+
+        .waterfall-item {
+          overflow: visible;
+
+          .job-item {
+            width: 100%;
+            height: 100%;
+            border: 1px solid #666666;
+            padding: 6px;
+            border-radius: 6px;
+
+            // position relative
+            .el-image {
+              overflow: auto;
+            }
+
+            .opt {
+              padding-top: 5px;
+
+              .opt-line {
+                margin: 6px 0;
+
+                ul {
+                  display: flex;
+                  flex-flow: row;
+
+                  li {
+                    margin-right: 6px;
+
+                    a {
+                      padding: 3px 0;
+                      width: 40px;
+                      text-align: center;
+                      border-radius: 5px;
+                      display: block;
+                      cursor: pointer;
+                      background-color: #4E5058;
+                      color: #fff;
+
+                      &:hover {
+                        background-color: #6D6F78;
+                      }
+                    }
+                  }
+
+                  .show-prompt {
+                    font-size: 20px;
+                    cursor: pointer;
+                  }
+                }
+              }
+            }
+
+            .remove {
+              display: none;
+              position: absolute;
+              right: 10px;
+              top: 10px;
+            }
+
+            &:hover {
+              .remove {
+                display: block;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .el-image {
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+
+      .el-image-viewer__wrapper {
+        img {
+          width: auto;
+          height: auto;
+        }
+      }
+
+      .image-slot {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+        min-height: 220px;
+        color: var(--text-theme-color);
+        overflow: hidden;
+
+        .err-msg-container {
+          overflow: hidden;
+          word-break: break-all;
+          padding: 15px;
+
+          .title {
+            font-size: 20px;
+            text-align: center;
+            font-weight: bold;
+            color: #f56c6c;
+            margin-bottom: 30px;
+          }
+
+          .opt {
+            display: flex;
+            justify-content: center;
+          }
+        }
+
+        .iconfont {
+          font-size: 50px;
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    .el-image.upscale {
+      img {
+        // height 310px
+      }
+
+      .image-slot {
+        min-height: 310px;
+      }
+
+      .el-image-viewer__wrapper {
+        img {
+          width: auto;
+          height: auto;
+        }
+      }
+    }
+  }
+
+  .inner {
+    display: flex;
+    width: 100%;
+
+    .mj-box {
+      margin: 10px;
+      // background-color #262626
+      // border 1px solid #454545
+      // height: calc(100vh - 50px)
+      // overflow: scroll
+      min-width: 300px;
+      max-width: 300px;
+      padding: 10px;
+      border-radius: 10px;
+      color: var(--text-theme-color);
+      font-size: 14px;
+      overflow: auto;
+
+      h2 {
+        font-weight: bold;
+        font-size: 20px;
+        text-align: center;
+        color: var(--theme-textcolor-normal);
+      }
+
+      // 隐藏滚动条
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        background-color: transparent;
+      }
+
+      .mj-params {
+        margin-top: 10px;
+        overflow: auto;
+
+        .param-line {
+          padding: 0 10px;
+
+          .el-icon {
+            position: relative;
+          }
+
+          .model {
+            background: var(--card-bg);
+            // border 1px solid #454545
+            border-radius: 8px;
+            padding: 5px;
+            margin-bottom: 10px;
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            cursor: pointer;
+            border: 1px solid var(--chat-bg);
+
+            &:hover {
+              border: 1px solid var(--theme-border-hover);
+            }
+
+            .el-image {
+              height: 40px;
+              width: 100%;
+            }
+
+            .text {
+              margin-top: 4px;
+              font-size: 12px;
+            }
+          }
+
+          .model.active {
+            // color #47fff1
+            // background-color #585858
+            border: 1px solid var(--theme-border-hover);
+          }
+
+          .form-item-inner {
+            display: flex;
+            align-items: center;
+
+            .el-select {
+              --el-select-input-focus-border-color: var(--el-color-primary);
+              --el-input-focus-border-color: var(--el-color-primary);
+            }
+
+            .el-input__wrapper {
+              background: var(--chat-bg);
+            }
+
+            .el-input__inner {
+              color: var(--text-theme-color);
+            }
+
+            .el-icon {
+              margin-left: 10px;
+            }
+          }
+
+          .img-uploader {
+            .el-upload {
+              border: 1px dashed var(--el-border-color);
+              border-radius: 6px;
+              cursor: pointer;
+              position: relative;
+              overflow: hidden;
+              width: 100%;
+              transition: var(--el-transition-duration-fast);
+
+              &:hover {
+                border-color: var(--el-color-primary);
+              }
+
+              .el-icon.uploader-icon {
+                font-size: 28px;
+                color: #8c939d;
+                width: 100%;
+                height: 120px;
+                text-align: center;
+              }
+            }
+          }
+        }
+
+        .param-line.pt {
+          display: flex;
+          align-items: center;
+          padding-top: 5px;
+          padding-bottom: 5px;
+        }
+      }
+    }
+
+    .el-form {
+      .el-form-item__label {
+        color: var(--text-theme-color);
+      }
+
+      .el-input, .el-slider {
+        width: 180px;
+      }
+
+      .uploader-icon {
+        font-size: 24px;
+        position: relative;
+        top: 3px;
+      }
+    }
+
+    .no-more-data {
+      text-align: center;
+      padding: 30px;
+    }
+
+    .generate-btn {
+      .iconfont {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.mj-list-item-prompt {
+  .el-icon {
+    margin-left: 10px;
+    cursor: pointer;
+    position: relative;
+  }
+}

web/src/assets/css/theme-dark.styl

@@ -45,6 +45,8 @@
   --chat-content-bg:rgba(86, 86, 95, .2);
   --chat-user-content-bg: #762AA4;
   --hover-deep-color:#30323c;
+  --tab-title-bg:#525777;//顶部tab栏背景切换
+  --tab-title-color:#fff;//顶部tab栏文字切换
    //layout 
   .more-menus li.moreTitle,
   .twoTittle .title,

web/src/assets/css/theme-light.styl

@@ -39,6 +39,10 @@
   --el-bg-color:#fff;
   --el-fill-color-blank: #fff;
   --el-pagination-button-bg-color: rgba(86,86,95,0.2);
+  --tab-title-bg:#fff;//顶部tab栏背景切换
+  --tab-title-color:#595959;//顶部tab栏文字切换
+
+
 
   // 操作按钮
   --btn-bg: rgba(100, 100, 100, .1);

web/src/views/KeLing.vue

@@ -2,136 +2,231 @@
   <div class="page-keling">
     <div class="inner custom-scroll">
       <!-- 左侧参数设置面板 -->
-      <div class="param-panel">
+      <el-scrollbar max-height="100vh">
-        <h2>视频参数设置</h2>
+        <div class="mj-box">
-        <el-form :model="params" label-width="80px" label-position="left">
+          <h2>视频参数设置</h2>
-          <!-- 任务类型选择 -->
+          <el-form :model="params" label-width="80px" label-position="left">
-          <div class="param-line">
+            <!-- 任务类型选择 -->
-            <el-tabs v-model="params.task_type" @tab-change="tabChange">
+            <!-- <div class="flex h-20">
-              <el-tab-pane label="文生视频" name="text2video">
+              <ul class="scrollbar-type-nav">
-                <div class="text">使用文字描述生成视频内容</div>
+                <li
-              </el-tab-pane>
+                  v-for="item in videoTypes"
-              <el-tab-pane label="图生视频" name="image2video">
+                  :key="item.value"
-                <div class="text">使用参考图片辅助生成视频</div>
+                  :class="{ active: params.task_type === item.value }"
-              </el-tab-pane>
+                  @click="tabChange(item.value)"
-            </el-tabs>
+                >
-          </div>
+                  <span style="margin-right: 4px">{{ item.label }} </span>
+                  <el-tooltip :content="item.tip" placement="right">
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </li>
+              </ul>
+            </div> -->
+            <!-- 画面比例 -->
+            <div class="param-line">
+              <div class="param-line pt">
+                <span>画面比例：</span>
+                <el-tooltip content="生成画面的尺寸比例" placement="right">
+                  <el-icon>
+                    <InfoFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+              <!-- <el-select v-model="params.aspect_ratio" placeholder="请选择比例">
+              <el-option label="16:9 横屏" value="16:9" />
+              <el-option label="9:16 竖屏" value="9:16" />
+              <el-option label="1:1 方形" value="1:1" />
+            </el-select> -->
+              <div class="param-line pt">
+                <el-row :gutter="10">
+                  <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'
+                      "
+                      @click="changeRate(item)"
+                    >
+                      <el-image
+                        class="icon proportion"
+                        :src="item.img"
+                        fit="cover"
+                      ></el-image>
+                      <div class="text">{{ item.text }}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+            <!-- 模型选择 -->
+            <div class="param-line">
+              <el-form-item label="模型选择">
+                <el-select v-model="params.model" placeholder="请选择模型">
+                  <el-option label="默认模型" value="default" />
+                  <el-option label="动漫风格" value="anime" />
+                </el-select>
+              </el-form-item>
+            </div>
 
-          <!-- 模型选择 -->
+            <!-- 视频时长 -->
-          <div class="param-line">
+            <div class="param-line">
-            <el-form-item label="模型选择">
+              <el-form-item label="视频时长">
-              <el-select v-model="params.model" placeholder="请选择模型">
+                <el-select v-model="params.duration" placeholder="请选择时长">
-                <el-option label="默认模型" value="default" />
+                  <el-option label="5秒" value="5" />
-                <el-option label="动漫风格" value="anime" />
+                  <el-option label="10秒" value="10" />
-              </el-select>
+                </el-select>
-            </el-form-item>
+              </el-form-item>
-          </div>
+            </div>
 
-          <!-- 视频时长 -->
+            <!-- 生成模式 -->
-          <div class="param-line">
+            <div class="param-line">
-            <el-form-item label="视频时长">
+              <el-form-item label="生成模式">
-              <el-select v-model="params.duration" placeholder="请选择时长">
+                <el-select v-model="params.mode" placeholder="请选择模式">
-                <el-option label="5秒" value="5" />
+                  <el-option label="标准模式" value="std" />
-                <el-option label="10秒" value="10" />
+                  <el-option label="专业模式" value="pro" />
-              </el-select>
+                </el-select>
-            </el-form-item>
+              </el-form-item>
-          </div>
+            </div>
 
-          <!-- 生成模式 -->
+            <!-- 创意程度 -->
-          <div class="param-line">
+            <div class="param-line">
-            <el-form-item label="生成模式">
+              <el-form-item label="创意程度">
-              <el-select v-model="params.mode" placeholder="请选择模式">
+                <el-slider
-                <el-option label="标准模式" value="std" />
+                  v-model="params.cfg_scale"
-                <el-option label="专业模式" value="pro" />
+                  :min="0"
-              </el-select>
+                  :max="1"
-            </el-form-item>
+                  :step="0.1"
-          </div>
+                />
+              </el-form-item>
+            </div>
 
-          <!-- 画面比例 -->
+            <!-- 运镜控制 -->
-          <div class="param-line">
+            <div class="param-line">
-            <el-form-item label="画面比例">
+              <div class="param-line pt">
-              <el-select v-model="params.aspect_ratio" placeholder="请选择比例">
+                <span>运镜控制：</span>
-                <el-option label="16:9 横屏" value="16:9" />
+                <el-tooltip content="生成画面的运镜效果" placement="right">
-                <el-option label="9:16 竖屏" value="9:16" />
+                  <el-icon>
-                <el-option label="1:1 方形" value="1:1" />
+                    <InfoFilled />
-              </el-select>
+                  </el-icon>
-            </el-form-item>
+                </el-tooltip>
-          </div>
+              </div>
-
-          <!-- 创意程度 -->
-          <div class="param-line">
-            <el-form-item label="创意程度">
-              <el-slider 
-                v-model="params.cfg_scale" 
-                :min="0" 
-                :max="1" 
-                :step="0.1"
-              />
-            </el-form-item>
-          </div>
-
-          <!-- 运镜控制 -->
-          <div class="param-line">
-            <el-form-item label="运镜控制">
               <div class="camera-control">
                 <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>
-            </el-form-item>
+            </div>
-          </div>
+          </el-form>
-        </el-form>
+        </div>
-      </div>
+      </el-scrollbar>
 
       <!-- 右侧主内容区 -->
       <div class="main-content">
+        <div class="param-line task-list-inner">
+          <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>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+
         <!-- 生成操作区 -->
         <div class="generation-area">
           <div v-if="params.task_type === 'text2video'" class="text2video">
             <el-input
               v-model="params.prompt"
               type="textarea"
-              :rows="4"
+              :autosize="{ minRows: 4, maxRows: 6 }"
-              placeholder="请输入视频描述..."
+              placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
             />
-            <el-button class="generate-btn" @click="generatePrompt" :loading="isGenerating">
+            <el-row class="text-info">
-              <i class="iconfont icon-chuangzuo"></i>
+              <el-button
-              生成专业提示词
+                class="generate-btn"
-            </el-button>
+                @click="generatePrompt"
+                :loading="isGenerating"
+                size="small"
+                color="#5865f2"
+              >
+                <i class="iconfont icon-chuangzuo"></i>
+                生成专业视频提示词
+              </el-button>
+            </el-row>
           </div>
 
           <div v-else class="image2video">
-            <div class="image-upload">
+            <div class="image-upload img-inline">
-              <div class="upload-box">
+              <div class="upload-box img-uploader">
-                <h3>起始帧</h3>
+                <h4>起始帧</h4>
                 <el-upload
-                  class="uploader"
+                  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" />
+                  <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">
+              <div class="upload-box img-uploader">
-                <h3>结束帧</h3>
+                <h4>结束帧</h4>
                 <el-upload
                   class="uploader"
                   :auto-upload="true"
@@ -139,44 +234,92 @@
                   :http-request="uploadEndImage"
                   accept=".jpg,.png,.jpeg"
                 >
-                  <img v-if="params.image_tail" :src="params.image_tail" class="preview" />
+                  <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>
             </div>
-            <el-input
+            <div class="param-line pt">
-              v-model="params.prompt"
+              <div class="flex-row justify-between items-center">
-              type="textarea"
+                <div class="flex-row justify-start items-center">
-              :rows="3"
+                  <span>提示词：</span>
-              placeholder="补充描述文本..."
+                  <el-tooltip
-            />
+                    content="输入你想要的内容，用逗号分割"
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+            <div class="param-line pt">
+              <el-input
+                v-model="params.prompt"
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 6 }"
+                placeholder="描述视频画面细节"
+              />
+            </div>
           </div>
 
           <!-- 排除内容 -->
-          <el-input
+          <div class="param-line pt">
-            v-model="params.negative_prompt"
+            <div class="flex-row justify-between items-center">
-            type="textarea"
+              <div class="flex-row justify-start items-center">
-            :rows="3"
+                <span>不希望出现的内容：（可选）</span>
-            placeholder="请输入不希望出现的内容..."
+                <el-tooltip
-          />
+                  content="不想出现在图片上的元素(例如：树，建筑)"
-
+                  placement="right"
-          <!-- 算力显示 -->
+                >
-          <div class="power-info">
+                  <el-icon>
-            <span>消耗算力: {{ powerCost }}</span>
+                    <InfoFilled />
-            <span>可用算力: {{ availablePower }}</span>
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+          <div class="param-line pt">
+            <el-input
+              v-model="params.negative_prompt"
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 6 }"
+              placeholder="请在此输入你不希望出现在视频上的内容"
+            />
           </div>
 
+          <!-- 算力显示 -->
+          <el-row class="text-info">
+            <el-text type="primary"
+              >每次生成视频消耗
+              <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-row>
+
           <!-- 生成按钮 -->
-          <el-button type="primary" @click="generate" :loading="generating">
+          <div class="submit-btn">
-            立即生成
+            <el-button type="primary" :dark="false" @click="generate" round
-          </el-button>
+              >立即生成</el-button
+            >
+          </div>
         </div>
 
         <!-- 任务列表区域 -->
-        <div class="task-list">
+        <div class="task-list job-list-box">
-          <h2>任务列表</h2>
+          <h2 class="text-xl param-line pt">任务列表</h2>
-          
+
           <!-- 任务类型筛选 -->
+
           <el-radio-group v-model="taskFilter" @change="fetchTasks">
             <el-radio-button label="all">全部</el-radio-button>
             <el-radio-button label="text2video">文生视频</el-radio-button>
@@ -187,7 +330,11 @@
           <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
+                v-for="task in runningTasks"
+                :key="task.id"
+                class="task-card"
+              >
                 <div class="status">处理中...</div>
                 <div class="prompt">{{ task.prompt }}</div>
               </div>
@@ -198,10 +345,14 @@
           <div class="finished-tasks">
             <h3>已完成</h3>
             <div class="task-grid">
-              <div v-for="task in finishedTasks" :key="task.id" class="task-card">
+              <div
-                <video 
+                v-for="task in finishedTasks"
-                  class="preview" 
+                :key="task.id"
-                  :src="task.video_url" 
+                class="task-card"
+              >
+                <video
+                  class="preview"
+                  :src="task.video_url"
                   @click="previewVideo(task)"
                   controls
                 ></video>
@@ -228,7 +379,7 @@
 
     <!-- 视频预览对话框 -->
     <el-dialog v-model="previewVisible" title="视频预览" width="80%">
-      <video 
+      <video
         v-if="currentVideo"
         :src="currentVideo"
         controls
@@ -239,26 +390,26 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted } from "vue";
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, InfoFilled } from "@element-plus/icons-vue";
-import { httpGet, httpPost, httpDownload } from '@/utils/http'
+import { httpGet, httpPost, httpDownload } from "@/utils/http";
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox } from "element-plus";
-import { getClientId } from '@/store/cache'
+import { getClientId } from "@/store/cache";
-import { showMessageError, showMessageOK } from '@/utils/dialog'
+import { showMessageError, showMessageOK } from "@/utils/dialog";
 
 // 参数设置
 const params = reactive({
   client_id: getClientId(),
-  task_type: 'text2video',
+  task_type: "text2video",
-  model: 'default',
+  model: "default",
-  prompt: '',
+  prompt: "",
-  negative_prompt: '',
+  negative_prompt: "",
   cfg_scale: 0.7,
-  mode: 'std',
+  mode: "std",
-  aspect_ratio: '16:9',
+  aspect_ratio: "16:9",
-  duration: '5',
+  duration: "5",
   camera_control: {
-    type: 'simple',
+    type: "simple",
     config: {
       horizontal: 0,
       vertical: 0,
@@ -268,227 +419,252 @@ const params = reactive({
       zoom: 0
     }
   },
-  image: '',
+  image: "",
-  image_tail: ''
+  image_tail: ""
-})
+});
+const rates = [
+  { css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
+
+  {
+    css: "size16-9",
+    value: "16:9",
+    text: "16:9",
+    img: "/images/mj/rate_16_9.png"
+  },
+  {
+    css: "size9-16",
+    value: "9:16",
+    text: "9:16",
+    img: "/images/mj/rate_9_16.png"
+  }
+];
+
+// 切换图片比例
+const changeRate = (item) => {
+  params.aspect_ratio = item.value;
+};
 
 // 状态变量
-const generating = ref(false)
+const generating = ref(false);
-const isGenerating = ref(false)
+const isGenerating = ref(false);
-const powerCost = ref(10)
+const powerCost = ref(10);
-const availablePower = ref(100)
+const availablePower = ref(100);
-const taskFilter = ref('all')
+const taskFilter = ref("all");
-const runningTasks = ref([])
+const runningTasks = ref([]);
-const finishedTasks = ref([])
+const finishedTasks = ref([]);
-const total = ref(0)
+const total = ref(0);
-const pageSize = ref(12)
+const pageSize = ref(12);
-const currentPage = ref(1)
+const currentPage = ref(1);
-const previewVisible = ref(false)
+const previewVisible = ref(false);
-const currentVideo = ref('')
+const currentVideo = ref("");
 
 // 方法定义
+const videoTypes = [
+  {
+    label: "文生视频",
+    value: "text2video",
+    tip: "使用文字描述生成视频内容"
+  },
+  {
+    label: "图生视频",
+    value: "image2video",
+    tip: "使用参考图片辅助生成视频"
+  }
+];
 const tabChange = (tab) => {
-  params.task_type = tab
+  params.task_type = tab;
-}
+};
 
 const uploadStartImage = async (file) => {
-  const formData = new FormData()
+  const formData = new FormData();
-  formData.append('file', file.file)
+  formData.append("file", file.file);
   try {
-    const res = await httpPost('/api/upload', formData)
+    const res = await httpPost("/api/upload", formData);
-    params.image = res.data.url
+    params.image = res.data.url;
-    ElMessage.success('上传成功')
+    ElMessage.success("上传成功");
   } catch (e) {
-    showMessageError('上传失败: ' + e.message)
+    showMessageError("上传失败: " + e.message);
   }
-}
+};
 
 const uploadEndImage = async (file) => {
-  const formData = new FormData()
+  const formData = new FormData();
-  formData.append('file', file.file)
+  formData.append("file", file.file);
   try {
-    const res = await httpPost('/api/upload', formData)
+    const res = await httpPost("/api/upload", formData);
-    params.image_tail = res.data.url
+    params.image_tail = res.data.url;
-    ElMessage.success('上传成功')
+    ElMessage.success("上传成功");
   } catch (e) {
-    showMessageError('上传失败: ' + e.message)
+    showMessageError("上传失败: " + e.message);
   }
-}
+};
 
 const generatePrompt = async () => {
   if (!params.prompt) {
-    return showMessageError('请输入视频描述')
+    return showMessageError("请输入视频描述");
   }
-  isGenerating.value = true
+  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
+    params.prompt = res.data;
   } catch (e) {
-    showMessageError('生成失败: ' + e.message)
+    showMessageError("生成失败: " + e.message);
   } finally {
-    isGenerating.value = false
+    isGenerating.value = false;
   }
-}
+};
 
 const generate = async () => {
   if (!params.prompt) {
-    return showMessageError('请输入视频描述')
+    return showMessageError("请输入视频描述");
   }
-  
+
-  generating.value = true
+  generating.value = true;
   try {
-    await httpPost('/api/video/keling/create', params)
+    await httpPost("/api/video/keling/create", params);
-    showMessageOK('任务创建成功')
+    showMessageOK("任务创建成功");
-    fetchTasks()
+    fetchTasks();
   } catch (e) {
-    showMessageError('创建失败: ' + e.message)
+    showMessageError("创建失败: " + e.message);
   } finally {
-    generating.value = false
+    generating.value = false;
   }
-}
+};
 
 const fetchTasks = async () => {
   try {
-    const res = await httpGet('/api/video/list', {
+    const res = await httpGet("/api/video/list", {
       page: currentPage.value,
       page_size: pageSize.value,
-      type: 'keling',
+      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)
+    runningTasks.value = res.data.items.filter((task) => task.progress < 100);
-    finishedTasks.value = res.data.items.filter(task => task.progress === 100)
+    finishedTasks.value = res.data.items.filter(
-    total.value = res.data.total
+      (task) => task.progress === 100
+    );
+    total.value = res.data.total;
   } catch (e) {
-    showMessageError('获取任务列表失败: ' + e.message)
+    showMessageError("获取任务列表失败: " + e.message);
   }
-}
+};
 
 const handlePageChange = (page) => {
-  currentPage.value = page
+  currentPage.value = page;
-  fetchTasks()
+  fetchTasks();
-}
+};
 
 const previewVideo = (task) => {
-  currentVideo.value = task.video_url
+  currentVideo.value = task.video_url;
-  previewVisible.value = true
+  previewVisible.value = true;
-}
+};
 
 const downloadVideo = async (task) => {
   try {
-    const res = await httpDownload(`/api/download?url=${task.video_url}`)
+    const res = await httpDownload(`/api/download?url=${task.video_url}`);
-    const blob = new Blob([res.data])
+    const blob = new Blob([res.data]);
-    const link = document.createElement('a')
+    const link = document.createElement("a");
-    link.href = URL.createObjectURL(blob)
+    link.href = URL.createObjectURL(blob);
-    link.download = `video_${task.id}.mp4`
+    link.download = `video_${task.id}.mp4`;
-    link.click()
+    link.click();
-    URL.revokeObjectURL(link.href)
+    URL.revokeObjectURL(link.href);
   } catch (e) {
-    showMessageError('下载失败: ' + e.message)
+    showMessageError("下载失败: " + e.message);
   }
-}
+};
 
 const deleteTask = async (task) => {
   try {
-    await ElMessageBox.confirm('确定要删除该任务吗？')
+    await ElMessageBox.confirm("确定要删除该任务吗？");
-    await httpGet('/api/video/remove', { id: task.id })
+    await httpGet("/api/video/remove", { id: task.id });
-    showMessageOK('删除成功')
+    showMessageOK("删除成功");
-    fetchTasks()
+    fetchTasks();
   } catch (e) {
-    if (e !== 'cancel') {
+    if (e !== "cancel") {
-      showMessageError('删除失败: ' + e.message)
+      showMessageError("删除失败: " + e.message);
     }
   }
-}
+};
 
 // 生命周期钩子
 onMounted(() => {
-  fetchTasks()
+  fetchTasks();
-})
+});
 </script>
 
 <style lang="stylus" scoped>
-.page-keling
+@import "@/assets/css/image-keling.styl"
-  display: flex
+@import "@/assets/css/custom-scroll.styl"
-  height: 100vh
-  
-  .inner
-    display: flex
-    width: 100%
-    padding: 20px
-    gap: 20px
 
-    .param-panel
-      width: 300px
-      background: #fff
-      padding: 20px
-      border-radius: 8px
-      
-    .main-content
-      flex: 1
-      background: #fff
-      padding: 20px
-      border-radius: 8px
 
-      .generation-area
-        margin-bottom: 30px
 
-        .image-upload
-          display: flex
-          gap: 20px
-          margin-bottom: 20px
 
-          .upload-box
+    // .param-panel
-            flex: 1
+    //   width: 300px
-            
+    //   padding: 20px
-            .uploader
+    //   border-radius: 8px
-              border: 1px dashed #d9d9d9
-              border-radius: 6px
-              cursor: pointer
-              position: relative
-              overflow: hidden
-              
-              .preview
-                width: 100%
-                height: 200px
-                object-fit: cover
-                
-              .upload-icon
-                font-size: 28px
-                color: #8c939d
-                width: 100%
-                height: 200px
-                text-align: center
-                line-height: 200px
 
-        .power-info
+    // .main-content
-          margin: 20px 0
+    //   flex: 1
-          display: flex
+    //   background: #fff
-          justify-content: space-between
+    //   padding: 20px
+    //   border-radius: 8px
 
-      .task-list
+    //   .generation-area
-        .task-grid
+    //     margin-bottom: 30px
-          display: grid
-          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
-          gap: 20px
-          margin: 20px 0
 
-          .task-card
+    //     .image-upload
-            border: 1px solid #eee
+    //       display: flex
-            border-radius: 8px
+    //       gap: 20px
-            overflow: hidden
+    //       margin-bottom: 20px
 
-            .preview
+    //       .upload-box
-              width: 100%
+    //         flex: 1
-              height: 200px
-              object-fit: cover
 
-            .tools
+    //         .uploader
-              padding: 10px
+    //           border: 1px dashed #d9d9d9
-              display: flex
+    //           border-radius: 6px
-              justify-content: space-around
+    //           cursor: pointer
+    //           position: relative
+    //           overflow: hidden
 
-.camera-control
+    //           .preview
-  padding: 10px
+    //             width: 100%
-  border: 1px solid #eee
+    //             height: 200px
-  border-radius: 4px
+    //             object-fit: cover
-</style> 
+
+    //           .upload-icon
+    //             font-size: 28px
+    //             color: #8c939d
+    //             width: 100%
+    //             height: 200px
+    //             text-align: center
+    //             line-height: 200px
+
+    //     .power-info
+    //       margin: 20px 0
+    //       display: flex
+    //       justify-content: space-between
+
+    //   .task-list
+    //     .task-grid
+    //       display: grid
+    //       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
+    //       gap: 20px
+    //       margin: 20px 0
+
+    //       .task-card
+    //         border: 1px solid #eee
+    //         border-radius: 8px
+    //         overflow: hidden
+
+    //         .preview
+    //           width: 100%
+    //           height: 200px
+    //           object-fit: cover
+
+    //         .tools
+    //           padding: 10px
+    //           display: flex
+    //           justify-content: space-around
+</style>