feat: add draw same image for midjourney page

web/src/assets/css/images-wall.css

@@ -35,38 +35,40 @@
   overflow: hidden;
 }
 .page-images-wall .inner .waterfall .list-item .image .el-image {
+  width: 100%;
   transition: transform 0.3s;
   cursor: pointer;
 }
-.page-images-wall .inner .waterfall .list-item .prompt {
+.page-images-wall .inner .waterfall .list-item .opt {
   display: none;
   position: absolute;
-  width: 180px;
+  width: 100%;
   bottom: 0;
   left: 0;
   color: #fff;
-  padding: 10px 10px 20px 10px;
+  padding: 8px 10px;
   line-height: 1.2;
   border-top-right-radius: 10px;
   background-color: rgba(10,10,10,0.7);
 }
-.page-images-wall .inner .waterfall .list-item .prompt span {
+.page-images-wall .inner .waterfall .list-item .opt span {
   word-break: break-all;
 }
-.page-images-wall .inner .waterfall .list-item .prompt .el-icon {
+.page-images-wall .inner .waterfall .list-item .opt .el-icon,
-  position: absolute;
+.page-images-wall .inner .waterfall .list-item .opt .iconfont {
-  bottom: 10px;
+  top: 2px;
-  right: 10px;
   cursor: pointer;
   border: 1px solid #fff;
   border-radius: 5px;
   padding: 2px;
-  font-size: 12px;
+  font-size: 16px;
+  margin-right: 10px;
 }
-.page-images-wall .inner .waterfall .list-item .prompt .el-icon:hover {
+.page-images-wall .inner .waterfall .list-item .opt .el-icon:hover,
-  background-color: #999;
+.page-images-wall .inner .waterfall .list-item .opt .iconfont:hover {
+  background-color: #444;
 }
-.page-images-wall .inner .waterfall .list-item:hover .prompt {
+.page-images-wall .inner .waterfall .list-item:hover .opt {
   display: block;
   animation: expandUp 0.3s ease-in-out forwards;
   transform-origin: bottom center;

web/src/assets/css/images-wall.styl

@@ -52,19 +52,20 @@
           overflow hidden
 
           .el-image {
+            width 100%
             transition: transform 0.3s;
             cursor pointer
           }
         }
 
-        .prompt {
+        .opt {
           display none
           position absolute
-          width 180px
+          width 100%
           bottom 0
           left 0
           color #ffffff
-          padding 10px 10px 20px 10px
+          padding 8px 10px
           line-height 1.2
           border-top-right-radius 10px
           background-color rgba(10, 10, 10, 0.7)
@@ -73,24 +74,23 @@
             word-break break-all
           }
 
-          .el-icon {
+          .el-icon, .iconfont {
-            position absolute
+            top 2px
-            bottom 10px
-            right 10px
             cursor pointer
             border 1px solid #ffffff
             border-radius 5px
             padding 2px
-            font-size 12px;
+            font-size 16px;
+            margin-right 10px
 
             &:hover {
-              background-color #999999
+              background-color #444444
             }
           }
         }
 
         &:hover {
-          .prompt {
+          .opt {
             display block
             animation: expandUp 0.3s ease-in-out forwards;
             transform-origin: bottom center;

web/src/views/ImageMj.vue

@@ -555,6 +555,7 @@ const options = [
   },
 ]
 
+const router = useRouter()
 const params = ref({
   task_type: "image",
   rate: rates[0].value,
@@ -565,7 +566,7 @@ const params = ref({
   img_arr: [],
   raw: false,
   weight: 0.25,
-  prompt: "",
+  prompt: router.currentRoute.value.params["prompt"] ?? "",
   neg_prompt: "",
   tile: false,
   quality: 0
@@ -577,7 +578,6 @@ const activeName = ref('image')
 
 const runningJobs = ref([])
 const finishedJobs = ref([])
-const router = useRouter()
 
 const socket = ref(null)
 const imgCalls = ref(0)

web/src/views/ImagesWall.vue

@@ -13,7 +13,7 @@
       <div class="waterfall" :style="{ height:listBoxHeight + 'px' }" id="waterfall-box">
         <v3-waterfall v-if="imgType === 'mj'"
                       id="waterfall"
-                      :list="list"
+                      :list="data['mj']"
                       srcKey="img_thumb"
                       :gap="12"
                       :bottomGap="-5"
@@ -46,11 +46,26 @@
                   </template>
                 </el-image>
               </div>
-              <div class="prompt">
+              <div class="opt">
-                <span>{{ slotProp.item.prompt }}</span>
+                <el-tooltip
+                    class="box-item"
+                    effect="light"
+                    content="复制提示词"
+                    placement="top"
+                >
                   <el-icon class="copy-prompt" :data-clipboard-text="slotProp.item.prompt">
                     <DocumentCopy/>
                   </el-icon>
+                </el-tooltip>
+
+                <el-tooltip
+                    class="box-item"
+                    effect="light"
+                    content="画同款"
+                    placement="top"
+                >
+                  <i class="iconfont icon-palette-pen" @click="drawSameMj(slotProp.item)"></i>
+                </el-tooltip>
               </div>
             </div>
           </template>
@@ -58,7 +73,7 @@
 
         <v3-waterfall v-else
                       id="waterfall"
-                      :list="list"
+                      :list="data['sd']"
                       srcKey="img_thumb"
                       :gap="12"
                       :bottomGap="-5"
@@ -87,13 +102,6 @@
                   </template>
                 </el-image>
               </div>
-
-              <div class="prompt">
-                <span>{{ slotProp.item.prompt }}</span>
-                <el-icon class="copy-prompt" :data-clipboard-text="slotProp.item.prompt">
-                  <DocumentCopy/>
-                </el-icon>
-              </div>
             </div>
           </template>
         </v3-waterfall>
@@ -223,7 +231,7 @@
             </div>
 
             <div class="copy-params">
-              <el-button type="primary" round @click="copyParams(item)">画一张同款的</el-button>
+              <el-button type="primary" round @click="drawSameSd(item)">画一张同款的</el-button>
             </div>
 
           </div>
@@ -242,7 +250,10 @@ import {ElMessage} from "element-plus";
 import Clipboard from "clipboard";
 import {useRouter} from "vue-router";
 
-const list = ref([])
+const data = ref({
+  "mj": [],
+  "sd": []
+})
 const loading = ref(true)
 const isOver = ref(false)
 const imgType = ref("mj") // 图片类别
@@ -264,7 +275,7 @@ window.onresize = () => {
 }
 
 const page = ref(0)
-const pageSize = ref(20)
+const pageSize = ref(15)
 // 获取下一页数据
 const getNext = () => {
   if (isOver.value) {
@@ -286,15 +297,15 @@ const getNext = () => {
     for (let i = 0; i < imageList.length; i++) {
       imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
     }
-    if (list.value.length === 0) {
+    if (data.value[imgType.value].length === 0) {
-      list.value = imageList
+      data.value[imgType.value] = imageList
       return
     }
 
     if (imageList.length < pageSize.value) {
       isOver.value = true
     }
-    list.value = list.value.concat(imageList)
+    data.value[imgType.value] = data.value[imgType.value].concat(imageList)
 
   }).catch(e => {
     ElMessage.error("获取图片失败：" + e.message)
@@ -317,7 +328,10 @@ onMounted(() => {
 const changeImgType = () => {
   document.getElementById('waterfall-box').scrollTo(0, 0)
   page.value = 0
-  list.value = []
+  data.value = {
+    "mj": [],
+    "sd": []
+  }
   loading.value = true
   isOver.value = false
   nextTick(() => getNext())
@@ -330,10 +344,13 @@ const showTask = (row) => {
 
 
 const router = useRouter()
-const copyParams = (row) => {
+const drawSameSd = (row) => {
   router.push({name: "image-sd", params: {copyParams: JSON.stringify(row.params)}})
 }
 
+const drawSameMj = (row) => {
+  router.push({name: "image-mj", params: {prompt: row.prompt}})
+}
 </script>
 
 <style lang="stylus">