optimze the style for stable diffusion image dialog

web/src/assets/css/image-sd.css

@@ -3,10 +3,6 @@
 }
 .page-sd .inner {
   display: flex;
-/* 修改滚动条的颜色 */
-/* 修改滚动条轨道的背景颜色 */
-/* 修改滚动条的滑块颜色 */
-/* 修改滚动条的滑块的悬停颜色 */
 }
 .page-sd .inner .sd-box {
   margin: 10px;
@@ -70,19 +66,6 @@
 .page-sd .inner .el-form .el-form-item__label {
   color: #fff;
 }
-.page-sd .inner ::-webkit-scrollbar {
-  width: 10px; /* 滚动条宽度 */
-}
-.page-sd .inner ::-webkit-scrollbar-track {
-  background-color: #282c34;
-}
-.page-sd .inner ::-webkit-scrollbar-thumb {
-  background-color: #444;
-  border-radius: 10px;
-}
-.page-sd .inner ::-webkit-scrollbar-thumb:hover {
-  background-color: #666;
-}
 .page-sd .inner .task-list-box {
   width: 100%;
   padding: 10px;
@@ -179,9 +162,85 @@
   width: auto;
   height: auto;
 }
-.mj-list-item-prompt .el-icon {
+.page-sd .el-overlay-dialog .el-dialog {
+  background-color: #1a1b1e;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title {
+  color: #f5f5f5;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body {
+  padding: 0 0 0 15px !important;
+  display: flex;
+  height: 100%;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row {
+  width: 100%;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container {
+  display: flex;
+  justify-content: center;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
+  background-color: #25262b;
+  padding: 1rem 1.5rem;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line {
+  width: 100%;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt {
+  background-color: #35363b;
+  padding: 10px;
+  color: #999;
+  overflow: auto;
+  max-height: 100px;
+  min-height: 50px;
+  position: relative;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt .el-icon {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  cursor: pointer;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper {
+  margin-top: 10px;
+  display: flex;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label {
+  display: flex;
+  width: 100px;
+  color: #a5a5a5;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper .item-value {
+  display: flex;
+  width: 100%;
+  background-color: #35363b;
+  padding: 2px 5px;
+  border-radius: 5px;
+  color: #f5f5f5;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params {
+  padding: 20px 0 10px 0;
+}
+.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
+  width: 100%;
+}
+.page-sd .mj-list-item-prompt .el-icon {
   margin-left: 10px;
   cursor: pointer;
   position: relative;
   top: 2px;
 }
+.custom-scroll ::-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+}
+.custom-scroll ::-webkit-scrollbar-track {
+  background-color: #282c34;
+}
+.custom-scroll ::-webkit-scrollbar-thumb {
+  background-color: #444;
+  border-radius: 10px;
+}
+.custom-scroll ::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+}

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

@@ -233,52 +233,73 @@
         display flex
         height 100%
 
-        .img-container {
-          display flex
-          justify-content center
+        .el-row {
           width 100%
-        }
 
-        .task-info {
-          max-width 320px
-          min-width 320px
-          background-color #25262b
-          padding 10px 15px
+          .img-container {
+            display flex
+            justify-content center
+          }
 
-          .info-line {
-            width 100%
+          .task-info {
+            background-color #25262b
+            padding 1rem 1.5rem
 
-            .prompt {
-              background-color #35363b
-              padding 10px
-              color #999999
-              overflow auto
-              max-height 100px
-              min-height 50px
-            }
+            .info-line {
+              width 100%
 
-            .wrapper {
-              margin-top 10px
-              display flex
-
-              label {
-                display flex
-                width 100px
-                color #a5a5a5
-              }
-
-              .item-value {
-                display flex
-                width 100%
+              .prompt {
                 background-color #35363b
-                padding 2px 5px
-                border-radius 5px
-                color #F5F5F5
+                padding 10px
+                color #999999
+                overflow auto
+                max-height 100px
+                min-height 50px
+
+                position relative
+
+                .el-icon {
+                  position absolute
+                  right 10px
+                  bottom 10px
+                  cursor pointer
+                }
               }
+
+              .wrapper {
+                margin-top 10px
+                display flex
+
+                label {
+                  display flex
+                  width 100px
+                  color #a5a5a5
+                }
+
+                .item-value {
+                  display flex
+                  width 100%
+                  background-color #35363b
+                  padding 2px 5px
+                  border-radius 5px
+                  color #F5F5F5
+                }
+              }
+
             }
 
+            .copy-params {
+              padding 20px 0 10px 0
+
+              .el-button {
+                width 100%
+              }
+            }
           }
         }
+
+        // end el-row
+
       }
     }
   }

web/src/views/ImageSd.vue

@@ -129,7 +129,7 @@
               <el-form-item label="高清修复">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;" @change="switchHdFix"/>
+                    <el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;"/>
                     <el-tooltip
                         effect="light"
                         content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
@@ -145,7 +145,7 @@
               </el-form-item>
             </div>
 
-            <div v-show="showHdFix">
+            <div v-show="params.hd_fix">
               <div class="param-line">
                 <el-form-item label="重绘幅度">
                   <template #default>
@@ -369,95 +369,115 @@
 
     <!-- 任务详情弹框 -->
     <el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
-      <div class="img-container">
-        <el-image :src="item['img_url']"
-                  :style="{maxHeight: fullImgHeight+'px'}" fix="cover"/>
-      </div>
-
-      <div class="task-info">
-        <div class="info-line">
-          <el-divider>
-            正向提示词
-          </el-divider>
-          <div class="prompt">{{ item.prompt }}</div>
-
-        </div>
-
-        <div class="info-line">
-          <el-divider>
-            反向提示词
-          </el-divider>
-          <div class="prompt">{{ item.params.negative_prompt }}</div>
-        </div>
-
-        <div class="info-line">
-          <div class="wrapper">
-            <label>采样方法：</label>
-            <div class="item-value">{{ item.params.sampler }}</div>
+      <el-row :gutter="20">
+        <el-col :span="16">
+          <div class="img-container" :style="{maxHeight: fullImgHeight+'px'}">
+            <el-image :src="item['img_url']" fit="contain"/>
           </div>
-        </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="task-info">
+            <div class="info-line">
+              <el-divider>
+                正向提示词
+              </el-divider>
+              <div class="prompt">
+                <span>{{ item.prompt }}</span>
+                <el-icon class="copy-prompt" :data-clipboard-text="item.prompt">
+                  <DocumentCopy/>
+                </el-icon>
+              </div>
 
-        <div class="info-line">
-          <div class="wrapper">
-            <label>图片尺寸：</label>
-            <div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
-          </div>
-        </div>
-
-        <div class="info-line">
-          <div class="wrapper">
-            <label>迭代步数：</label>
-            <div class="item-value">{{ item.params.steps }}</div>
-          </div>
-        </div>
-
-        <div class="info-line">
-          <div class="wrapper">
-            <label>引导系数：</label>
-            <div class="item-value">{{ item.params.cfg_scale }}</div>
-          </div>
-        </div>
-
-        <div class="info-line">
-          <div class="wrapper">
-            <label>随机因子：</label>
-            <div class="item-value">{{ item.params.seed }}</div>
-          </div>
-        </div>
-
-        <div v-if="item.params.hd_fix">
-          <el-divider>
-            高清修复
-          </el-divider>
-          <div class="info-line">
-            <div class="wrapper">
-              <label>重绘幅度：</label>
-              <div class="item-value">{{ item.params.hd_redraw_rate }}</div>
             </div>
-          </div>
 
-          <div class="info-line">
-            <div class="wrapper">
-              <label>放大算法：</label>
-              <div class="item-value">{{ item.params.hd_scale_alg }}</div>
+            <div class="info-line">
+              <el-divider>
+                反向提示词
+              </el-divider>
+              <div class="prompt">
+                <span>{{ item.params.negative_prompt }}</span>
+                <el-icon class="copy-prompt" :data-clipboard-text="item.params.negative_prompt">
+                  <DocumentCopy/>
+                </el-icon>
+              </div>
             </div>
-          </div>
 
-          <div class="info-line">
-            <div class="wrapper">
-              <label>放大倍数：</label>
-              <div class="item-value">{{ item.params.hd_scale }}</div>
+            <div class="info-line">
+              <div class="wrapper">
+                <label>采样方法：</label>
+                <div class="item-value">{{ item.params.sampler }}</div>
+              </div>
             </div>
-          </div>
 
-          <div class="info-line">
-            <div class="wrapper">
-              <label>迭代步数：</label>
-              <div class="item-value">{{ item.params.hd_steps }}</div>
+            <div class="info-line">
+              <div class="wrapper">
+                <label>图片尺寸：</label>
+                <div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
+              </div>
             </div>
+
+            <div class="info-line">
+              <div class="wrapper">
+                <label>迭代步数：</label>
+                <div class="item-value">{{ item.params.steps }}</div>
+              </div>
+            </div>
+
+            <div class="info-line">
+              <div class="wrapper">
+                <label>引导系数：</label>
+                <div class="item-value">{{ item.params.cfg_scale }}</div>
+              </div>
+            </div>
+
+            <div class="info-line">
+              <div class="wrapper">
+                <label>随机因子：</label>
+                <div class="item-value">{{ item.params.seed }}</div>
+              </div>
+            </div>
+
+            <div v-if="item.params.hd_fix">
+              <el-divider>
+                高清修复
+              </el-divider>
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>重绘幅度：</label>
+                  <div class="item-value">{{ item.params.hd_redraw_rate }}</div>
+                </div>
+              </div>
+
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>放大算法：</label>
+                  <div class="item-value">{{ item.params.hd_scale_alg }}</div>
+                </div>
+              </div>
+
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>放大倍数：</label>
+                  <div class="item-value">{{ item.params.hd_scale }}</div>
+                </div>
+              </div>
+
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>迭代步数：</label>
+                  <div class="item-value">{{ item.params.hd_steps }}</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="copy-params">
+              <el-button type="primary" round @click="copyParams(item)">画一张同款的</el-button>
+            </div>
+
           </div>
-        </div>
-      </div>
+        </el-col>
+      </el-row>
+
     </el-dialog>
   </div>
 </template>
@@ -476,7 +496,6 @@ import {getSessionId, getUserToken} from "@/store/session";
 const listBoxHeight = ref(window.innerHeight - 40)
 const mjBoxHeight = ref(window.innerHeight - 150)
 const fullImgHeight = ref(window.innerHeight - 60)
-const showHdFix = ref(false)
 const showTaskDialog = ref(false)
 const item = ref({})
 
@@ -608,11 +627,6 @@ onMounted(() => {
   })
 })
 
-// 启用高清修复
-const switchHdFix = () => {
-  showHdFix.value = params.value.hd_fix === true;
-}
-
 
 // 创建绘图任务
 const promptRef = ref(null)
@@ -635,6 +649,11 @@ const showTask = (row) => {
   showTaskDialog.value = true
 }
 
+const copyParams = (row) => {
+  params.value = row.params
+  showTaskDialog.value = false
+}
+
 </script>
 
 <style lang="stylus">