feat: midjourney page task and image list component is ready

2025-11-07 09:43:43 +08:00 · 2023-09-15 17:40:39 +08:00
parent 39dbffd8d0
commit e0a62d9b35
15 changed files with 458 additions and 56 deletions
--- a/web/src/assets/css/image-mj.css
+++ b/web/src/assets/css/image-mj.css
@@ -3,6 +3,10 @@
 }
 .page-mj .inner {
  display: flex;
+/* 修改滚动条的颜色 */
+/* 修改滚动条轨道的背景颜色 */
+/* 修改滚动条的滑块颜色 */
+/* 修改滚动条的滑块的悬停颜色 */
 }
 .page-mj .inner .mj-box {
  margin: 10px;
@@ -143,27 +147,60 @@
 .page-mj .inner .el-form .el-slider {
  width: 180px;
 }
+.page-mj .inner ::-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+}
+.page-mj .inner ::-webkit-scrollbar-track {
+  background-color: #282c34;
+}
+.page-mj .inner ::-webkit-scrollbar-thumb {
+  background-color: #444;
+  border-radius: 10px;
+}
+.page-mj .inner ::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+}
 .page-mj .inner .task-list-box {
  width: 100%;
  padding: 10px;
  color: #fff;
  overflow-x: hidden;
-  overflow-y: auto;
 }
-.page-mj .inner .task-list-box .task-list-inner .grid-content {
+.page-mj .inner .task-list-box .running-job-list .job-item {
+  width: 100%;
+  padding: 2px;
+  background-color: #555;
+}
+.page-mj .inner .task-list-box .running-job-list .job-item .el-image {
+  width: 100%;
+  height: 100%;
+}
+.page-mj .inner .task-list-box .running-job-list .job-item .el-image .image-slot {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #fff;
+}
+.page-mj .inner .task-list-box .running-job-list .job-item .el-image .image-slot .iconfont {
+  font-size: 50px;
+  margin-bottom: 10px;
+}
+.page-mj .inner .task-list-box .task-list-inner .job-item {
  margin-bottom: 20px;
 }
-.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line {
+.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line {
  margin: 6px 0;
 }
-.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul {
+.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul {
  display: flex;
  flex-flow: row;
 }
-.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li {
+.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li {
  margin-right: 10px;
 }
-.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li a {
+.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li a {
  padding: 3px 0;
  width: 50px;
  text-align: center;
@@ -173,6 +210,12 @@
  background-color: #4e5058;
  color: #fff;
 }
-.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li a:hover {
+.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li a:hover {
  background-color: #6d6f78;
 }
+.mj-list-item-prompt .el-icon {
+  margin-left: 10px;
+  cursor: pointer;
+  position: relative;
+  top: 2px;
+}
--- a/web/src/assets/css/image-mj.styl
+++ b/web/src/assets/css/image-mj.styl
@@ -182,17 +182,68 @@
      }
    }

+    /* 修改滚动条的颜色 */
+
+    ::-webkit-scrollbar {
+      width: 10px; /* 滚动条宽度 */
+    }
+
+    /* 修改滚动条轨道的背景颜色 */
+
+    ::-webkit-scrollbar-track {
+      background-color: #282C34;
+    }
+
+    /* 修改滚动条的滑块颜色 */
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #444444;
+      border-radius 10px
+    }
+
+    /* 修改滚动条的滑块的悬停颜色 */
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #666666;
+    }

    .task-list-box {
      width 100%
      padding 10px
      color #ffffff
      overflow-x hidden
-      overflow-y auto
+
+      .running-job-list {
+        .job-item {
+          //border: 1px solid #454545;
+          width: 100%;
+          padding 2px
+          background-color #555555
+
+          .el-image {
+            width 100%
+            height 100%
+
+            .image-slot {
+              display flex
+              flex-flow column
+              justify-content center
+              align-items center
+              height 100%
+              color #ffffff
+
+              .iconfont {
+                font-size 50px
+                margin-bottom 10px
+              }
+            }
+          }
+        }
+      }

      .task-list-inner {

-        .grid-content {
+        .job-item {
          margin-bottom 20px

          .opt {
@@ -231,4 +282,13 @@
    }
  }

+}
+
+.mj-list-item-prompt {
+  .el-icon {
+    margin-left 10px
+    cursor pointer
+    position relative
+    top 2px
+  }
 }
--- a/web/src/components/ChatMidJourney.vue
+++ b/web/src/components/ChatMidJourney.vue
@@ -109,6 +109,7 @@ const send = (url, index) => {
  emits('disable-input')
  httpPost(url, {
    index: index,
+    src: "chat",
    message_id: data.value?.["message_id"],
    message_hash: data.value?.["image"]?.hash,
    session_id: getSessionId(),
--- a/web/src/components/ItemList.vue
+++ b/web/src/components/ItemList.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="waterfall" ref="container">
+    <div class="waterfall-inner">
+      <div
+          class="waterfall-item"
+          v-for="(item, index) in items"
+          :key="index"
+          :style="{width:itemWidth + 'px', height:height+'px', marginBottom: margin*2+'px'}"
+      >
+        <div :style="{marginLeft: margin+'px', marginRight: margin+'px'}">
+          <div class="item-wrapper">
+            <slot :item="item" :index="index"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 列表组件
+import {onMounted, ref} from "vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  gap: {
+    type: Number,
+    default: 10
+  },
+  width: {
+    type: Number,
+    default: 240
+  },
+  height: {
+    type: Number,
+    default: 240
+  }
+});
+
+const container = ref(null)
+const itemWidth = ref(props.width)
+const margin = ref(props.gap)
+
+onMounted(() => {
+  computeSize()
+})
+
+const computeSize = () => {
+  const w = container.value.offsetWidth - 10 // 减去滚动条的宽度
+  let cols = Math.floor(w / props.width)
+  itemWidth.value = w / cols
+  while (itemWidth.value < props.width && cols > 1) {
+    cols -= 1
+    itemWidth.value = w / cols
+  }
+
+  if (props.gap > 0) {
+    margin.value = props.gap / 2
+  }
+}
+
+window.onresize = () => {
+  computeSize()
+}
+</script>
+
+<style scoped lang="stylus">
+
+.waterfall {
+
+  .waterfall-inner {
+    display flex
+    flex-wrap wrap
+
+    .waterfall-item {
+
+      div {
+        display flex
+        height 100%
+        overflow hidden
+
+        .item-wrapper {
+          height 100%
+          width 100%
+        }
+      }
+    }
+  }
+}
+
+</style>
--- a/web/src/components/mobile/ChatMidJourney.vue
+++ b/web/src/components/mobile/ChatMidJourney.vue
@@ -69,6 +69,8 @@ import {showNotify} from "vant";
 const props = defineProps({
  content: Object,
  icon: String,
+  chatId: String,
+  roleId: Number,
  createdAt: String
 });

@@ -104,11 +106,15 @@ const send = (url, index) => {
  emits('disable-input')
  httpPost(url, {
    index: index,
+    src: "chat",
    message_id: data.value?.["message_id"],
    message_hash: data.value?.["image"]?.hash,
    session_id: getSessionId(),
    key: data.value?.["key"],
    prompt: data.value?.["prompt"],
+    chat_id: props.chatId,
+    role_id: props.roleId,
+    icon: props.icon,
  }).then(() => {
    showNotify({type: "success", message: "任务推送成功，请耐心等待任务执行..."})
    loading.value = false
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -118,7 +118,6 @@ const changeNav = (item) => {
  .content {
    width: 100%;
    height: 100vh;
-    overflow-y: scroll;
    box-sizing: border-box;
  }

--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -120,7 +120,7 @@
              <el-form-item label="原始模式">
                <template #default>
                  <div class="form-item-inner">
-                    <el-switch v-model="params.raw"/>
+                    <el-switch v-model="params.raw" style="--el-switch-on-color: #47fff1;"/>
                    <el-tooltip
                        effect="light"
                        content="启用新的RAW模式，以“不带偏见”的方式生成图像。<br/> 同时也意味着您需要添加更长的提示。"
@@ -166,6 +166,7 @@
                  :auto-upload="true"
                  :show-file-list="false"
                  :http-request="afterRead"
+                  style="--el-color-primary:#47fff1"
              >
                <el-image v-if="params.img !== ''" :src="params.img" fit="cover"/>
                <el-icon v-else class="uploader-icon">
@@ -178,7 +179,8 @@
              <el-form-item label="图像权重">
                <template #default>
                  <div class="form-item-inner">
-                    <el-slider v-model="params.weight" :max="1" :step="0.01" style="width: 180px"/>
+                    <el-slider v-model="params.weight" :max="1" :step="0.01"
+                               style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
                    <el-tooltip
                        effect="light"
                        content="使用图像权重参数--iw来调整图像 URL 与文本的重要性 <br/>权重较高时意味着图像提示将对完成的作业产生更大的影响"
@@ -209,24 +211,107 @@
          <el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
        </div>
      </div>
-      <div class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
-        <div class="task-list-inner">
+      <div class="task-list-box">
+        <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
          <h2>任务列表</h2>
          <div class="running-job-list">
-            <el-row :gutter="20">
-              <el-col :span="4" v-for="n in 10">
-                <div class="grid-content">
-                  <el-image src="http://172.22.11.47:9010/chatgpt-plus/1694167591080692.png"/>
+            <waterfall :items="runningJobs" v-if="runningJobs.length > 0">
+              <template #default="scope">
+                <div class="job-item">
+                  <el-popover
+                      placement="top-start"
+                      :title="getTaskType(scope.item.type)"
+                      :width="240"
+                      trigger="hover"
+                  >
+                    <template #reference>
+                      <el-image :src="scope.item.img_url"
+                                :zoom-rate="1.2"
+                                :preview-src-list="[scope.item.img_url]"
+                                fit="cover"
+                                :initial-index="0" loading="lazy" v-if="scope.item.progress > 0">
+                        <template #placeholder>
+                          <div class="image-slot">
+                            正在加载图片
+                          </div>
+                        </template>
+
+                        <template #error>
+                          <div class="image-slot">
+                            <el-icon>
+                              <Picture/>
+                            </el-icon>
+                          </div>
+                        </template>
+                      </el-image>
+                      <el-image fit="cover" v-else>
+                        <template #error>
+                          <div class="image-slot">
+                            <i class="iconfont icon-quick-start"></i>
+                            <span>任务正在排队中</span>
+                          </div>
+                        </template>
+                      </el-image>
+                    </template>
+
+                    <template #default>
+                      <div class="mj-list-item-prompt">
+                        <span>{{ scope.item.prompt }}</span>
+                        <el-icon class="copy-prompt" :data-clipboard-text="scope.item.prompt">
+                          <DocumentCopy/>
+                        </el-icon>
+                      </div>
+                    </template>
+                  </el-popover>
+
                </div>
-              </el-col>
-            </el-row>
+              </template>
+            </waterfall>
+            <el-empty :image-size="100" v-else/>
          </div>
          <h2>创作记录</h2>
          <div class="finish-job-list">
-            <el-row :gutter="20">
-              <el-col :span="4" v-for="n in 100">
-                <div class="grid-content">
-                  <el-image src="http://172.22.11.47:9010/chatgpt-plus/1694568531910050.png" fit="cover"/>
+            <waterfall :items="finishedJobs" height="350" v-if="finishedJobs.length > 0">
+              <template #default="scope">
+                <div class="job-item">
+                  <el-popover
+                      placement="top-start"
+                      title="提示词"
+                      :width="240"
+                      trigger="hover"
+                  >
+                    <template #reference>
+                      <el-image :src="scope.item.img_url"
+                                :zoom-rate="1.2"
+                                :preview-src-list="previewImgList"
+                                fit="cover"
+                                :initial-index="scope.index" loading="lazy" v-if="scope.item.progress > 0">
+                        <template #placeholder>
+                          <div class="image-slot">
+                            正在加载图片
+                          </div>
+                        </template>
+
+                        <template #error>
+                          <div class="image-slot">
+                            <el-icon>
+                              <Picture/>
+                            </el-icon>
+                          </div>
+                        </template>
+                      </el-image>
+                    </template>
+
+                    <template #default>
+                      <div class="mj-list-item-prompt">
+                        <span>{{ scope.item.prompt }}</span>
+                        <el-icon class="copy-prompt" :data-clipboard-text="scope.item.prompt">
+                          <DocumentCopy/>
+                        </el-icon>
+                      </div>
+                    </template>
+                  </el-popover>
+
                  <div class="opt">
                    <div class="opt-line">
                      <ul>
@@ -247,23 +332,28 @@
                    </div>
                  </div>
                </div>
-              </el-col>
-            </el-row>
-          </div>
+              </template>
+            </waterfall>
+          </div> <!-- end finish job list-->
        </div>
-      </div>
+
+        <el-backtop :right="100" :bottom="100"/>
+      </div><!-- end task list box -->
    </div>
+
  </div>
 </template>

 <script setup>
-import {ref} from "vue"
-import {DeleteFilled, InfoFilled, Plus} from "@element-plus/icons-vue";
+import {onMounted, ref} from "vue"
+import {DeleteFilled, DocumentCopy, InfoFilled, Picture, Plus} from "@element-plus/icons-vue";
 import Compressor from "compressorjs";
-import {httpPost} from "@/utils/http";
+import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import Waterfall from "@/components/ItemList.vue";
+import Clipboard from "clipboard";

-const listBoxHeight = window.innerHeight - 20
+const listBoxHeight = window.innerHeight - 40
 const mjBoxHeight = window.innerHeight - 150
 const rates = [
  {css: "horizontal", value: "16:9", text: "横图"},
@@ -286,6 +376,43 @@ const params = ref({
  prompt: ""
 })

+const runningJobs = ref([])
+const finishedJobs = ref([])
+const previewImgList = ref([])
+
+onMounted(() => {
+  fetchFinishedJobs()
+  fetchRunningJobs()
+
+  const clipboard = new Clipboard('.copy-prompt');
+  clipboard.on('success', () => {
+    ElMessage.success('复制成功！');
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+
+const fetchFinishedJobs = () => {
+  httpGet("/api/mj/jobs?status=1").then(res => {
+    finishedJobs.value = res.data
+    for (let index in finishedJobs.value) {
+      previewImgList.value.push(finishedJobs.value[index]["img_url"])
+    }
+  }).catch(e => {
+    ElMessage.error("获取任务失败：" + e.message)
+  })
+}
+
+const fetchRunningJobs = () => {
+  httpGet("/api/mj/jobs?status=0").then(res => {
+    runningJobs.value = res.data
+  }).catch(e => {
+    ElMessage.error("获取任务失败：" + e.message)
+  })
+}
+
 // 切换图片比例
 const changeRate = (item) => {
  params.value.rate = item.value
@@ -317,6 +444,18 @@ const afterRead = (file) => {
  });
 };

+const getTaskType = (type) => {
+  switch (type) {
+    case "image":
+      return "绘画任务"
+    case "upscale":
+      return "放大任务"
+    case "variation":
+      return "变化任务"
+  }
+  return "未知任务"
+}
+
 // 创建绘图任务
 const generate = () => {

--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -49,6 +49,8 @@
            <chat-mid-journey v-else-if="item.type==='mj'"
                              :content="item.content"
                              :icon="item.icon"
+                              :role-id="role"
+                              :chat-id="chatId"
                              @disable-input="disableInput(true)"
                              @enable-input="enableInput"
                              :created-at="dateFormat(item['created_at'])"/>