From 66776556d84c3e05d1d1afaa042cf787f80789f4 Mon Sep 17 00:00:00 2001
From: GeekMaster <yangjian102621@gmail.com>
Date: Thu, 17 Jul 2025 18:45:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=20mj=20=E7=BB=98=E5=9B=BE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/ImageMj.vue | 128 ++++++++++++--------------------------
 1 file changed, 41 insertions(+), 87 deletions(-)

diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 905b983f..603399cb 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -688,87 +688,26 @@
                           v-if="item.progress === 100"
                         >
                           <div class="opt" v-if="item['can_opt']">
-                            <div class="flex flex-row justify-start items-center mb-3">
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600"
-                                @click="upscale(1, item)"
-                              >
-                                U1
-                              </button>
-
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
-                                @click="upscale(2, item)"
-                              >
-                                U2
-                              </button>
-
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
-                                @click="upscale(3, item)"
-                              >
-                                U3
-                              </button>
-
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
-                                @click="upscale(4, item)"
-                              >
-                                U4
-                              </button>
-
-                              <div class="show-prompt ml-2">
-                                <el-popover
-                                  placement="left"
-                                  title="提示词"
-                                  :width="240"
-                                  trigger="hover"
+                            <el-row :gutter="8" class="mb-3">
+                              <el-col :span="6" v-for="i in 4" :key="'u' + i">
+                                <button
+                                  class="w-full h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600"
+                                  @click="upscale(i, item)"
                                 >
-                                  <template #reference>
-                                    <i class="iconfont icon-prompt text-white text-xl"></i>
-                                  </template>
-
-                                  <template #default>
-                                    <div class="mj-list-item-prompt">
-                                      <span>{{ item.prompt }}</span>
-                                      <el-icon
-                                        class="copy-prompt-mj"
-                                        :data-clipboard-text="item.prompt"
-                                      >
-                                        <DocumentCopy />
-                                      </el-icon>
-                                    </div>
-                                  </template>
-                                </el-popover>
-                              </div>
-                            </div>
-
-                            <div class="flex flex-row justify-start items-center mb-3">
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600"
-                                @click="variation(1, item)"
-                              >
-                                V1
-                              </button>
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
-                                @click="variation(2, item)"
-                              >
-                                V2
-                              </button>
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
-                                @click="variation(3, item)"
-                              >
-                                V3
-                              </button>
-                              <button
-                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
-                                @click="variation(4, item)"
-                              >
-                                V4
-                              </button>
-                            </div>
+                                  U{{ i }}
+                                </button>
+                              </el-col>
+                            </el-row>
+                            <el-row :gutter="8" class="mb-3">
+                              <el-col :span="6" v-for="i in 4" :key="'v' + i">
+                                <button
+                                  class="w-full h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600"
+                                  @click="variation(i, item)"
+                                >
+                                  V{{ i }}
+                                </button>
+                              </el-col>
+                            </el-row>
                           </div>
 
                           <div
@@ -797,13 +736,28 @@
                                 </el-button>
                               </el-tooltip>
                               <el-tooltip content="删除" placement="top">
-                                <el-button
-                                  type="danger"
-                                  :icon="Delete"
-                                  @click="removeImage(item)"
-                                  circle
-                                />
+                                <el-button type="danger" @click="removeImage(item)" circle>
+                                  <i class="iconfont icon-remove"></i>
+                                </el-button>
                               </el-tooltip>
+                              <el-popover
+                                placement="top"
+                                title="提示词"
+                                :width="240"
+                                trigger="hover"
+                              >
+                                <template #reference>
+                                  <el-button type="primary" circle>
+                                    <i class="iconfont icon-prompt text-white"></i>
+                                  </el-button>
+                                </template>
+
+                                <template #default>
+                                  <div class="mj-list-item-prompt">
+                                    <span>{{ item.prompt }}</span>
+                                  </div>
+                                </template>
+                              </el-popover>
                             </div>
                           </div>
                         </div>
@@ -866,7 +820,7 @@ import { useSharedStore } from '@/store/sharedata'
 import { closeLoading, showLoading, showMessageError } from '@/utils/dialog'
 import { httpGet, httpPost } from '@/utils/http'
 import { copyObj, removeArrayItem } from '@/utils/libs'
-import { Delete, DocumentCopy, InfoFilled, Plus, UploadFilled } from '@element-plus/icons-vue'
+import { Delete, InfoFilled, Plus, UploadFilled } from '@element-plus/icons-vue'
 import Clipboard from 'clipboard'
 import Compressor from 'compressorjs'
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'