feat: optimize the midjourney image list styles

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

@@ -31,6 +31,52 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+.page-images-wall .inner .waterfall .list-item .image {
+  overflow: hidden;
+}
+.page-images-wall .inner .waterfall .list-item .image .el-image {
+  transition: transform 0.3s;
+}
+.page-images-wall .inner .waterfall .list-item .prompt {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  color: #fff;
+  padding: 10px 10px 20px 10px;
+  line-height: 1.2;
+  background-color: rgba(10,10,10,0.7);
+}
+.page-images-wall .inner .waterfall .list-item .prompt .el-icon {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  cursor: pointer;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  padding: 2px;
+  font-size: 12px;
+}
+.page-images-wall .inner .waterfall .list-item .prompt .el-icon:hover {
+  background-color: #999;
+}
+.page-images-wall .inner .waterfall .list-item:hover .prompt {
+  display: block;
+  animation: expandUp 0.3s ease-in-out forwards;
+  transform-origin: bottom center;
+  transform: scaleY(0); /* 初始状态，元素高度为0 */
+}
+.page-images-wall .inner .waterfall .list-item:hover .image .el-image {
+  transform: scale(1.2); /* 放大图像到1.2倍大小 */
+}
+.page-images-wall .inner .waterfall .footer {
+  display: flex;
+  padding: 20px;
+  align-items: center;
+  justify-content: center;
+}
+.page-images-wall .inner .waterfall .footer .iconfont {
+  margin-left: 6px;
+}
 .page-images-wall .custom-scroll ::-webkit-scrollbar {
   width: 10px; /* 滚动条宽度 */
 }
@@ -44,3 +90,35 @@
 .page-images-wall .custom-scroll ::-webkit-scrollbar-thumb:hover {
   background-color: #666;
 }
+@-moz-keyframes expandUp {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+@-webkit-keyframes expandUp {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+@-o-keyframes expandUp {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+@keyframes expandUp {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}

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

@@ -1,3 +1,12 @@
+@keyframes expandUp {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
 .page-images-wall {
   display: flex;
   background-color: #282c34;
@@ -36,6 +45,69 @@
       margin: 0 auto;
       overflow-y auto
       overflow-x hidden
+
+      .list-item {
+
+        .image {
+          overflow hidden
+
+          .el-image {
+            transition: transform 0.3s;
+          }
+        }
+
+        .prompt {
+          display none
+          position absolute
+          bottom 0
+          color #ffffff
+          padding 10px 10px 20px 10px
+          line-height 1.2
+          background-color rgba(10, 10, 10, 0.7)
+
+          .el-icon {
+            position absolute
+            bottom 10px
+            right 10px
+            cursor pointer
+            border 1px solid #ffffff
+            border-radius 5px
+            padding 2px
+            font-size 12px;
+
+            &:hover {
+              background-color #999999
+            }
+          }
+        }
+
+        &:hover {
+          .prompt {
+            display block
+            animation: expandUp 0.3s ease-in-out forwards;
+            transform-origin: bottom center;
+            transform: scaleY(0); /* 初始状态，元素高度为0 */
+          }
+
+          .image {
+            .el-image {
+              transform: scale(1.2); /* 放大图像到1.2倍大小 */
+            }
+          }
+        }
+      }
+
+
+      .footer {
+        display flex
+        padding 20px
+        align-items center
+        justify-content center
+
+        .iconfont {
+          margin-left 6px
+        }
+      }
     }
 
   }

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1694420182193') format('woff2'),
+  src: url('iconfont.woff2?t=1697164072791') format('woff2'),
-       url('iconfont.woff?t=1694420182193') format('woff'),
+       url('iconfont.woff?t=1697164072791') format('woff'),
-       url('iconfont.ttf?t=1694420182193') format('truetype');
+       url('iconfont.ttf?t=1697164072791') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-face:before {
+  content: "\e64b";
+}
+
 .icon-book:before {
   content: "\e622";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "845789",
+      "name": "笑脸",
+      "font_class": "face",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
     {
       "icon_id": "11836501",
       "name": "知识库",

web/src/views/ImagesWall.vue

@@ -12,9 +12,10 @@
       </div>
       <v3-waterfall class="waterfall" id="waterfall" :list="list" srcKey="img_url" :gap="12" :colWidth="colWidth"
                     :style="{ height:listBoxHeight + 'px' }"
-                    :distanceToScroll="100" :isLoading="loading" :isOver="over" @scrollReachBottom="getNext">
+                    :distanceToScroll="200" :isLoading="loading" :isOver="over" @scrollReachBottom="getNext">
         <template #default="slotProp">
           <div class="list-item">
+            <div class="image">
               <el-image :src="slotProp.item['img_url']+'?imageView2/4/w/300/q/75'"
                         :zoom-rate="1.2"
                         :preview-src-list="[slotProp.item['img_url']]"
@@ -36,6 +37,21 @@
                 </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>
+
+        <template #footer>
+          <div class="footer">
+            <span>没有更多数据了</span>
+            <i class="iconfont icon-face"></i>
+          </div>
         </template>
       </v3-waterfall>
     </div>
@@ -43,16 +59,17 @@
 </template>
 
 <script setup>
-import {ref} from "vue"
+import {onMounted, ref} from "vue"
-import {Picture} from "@element-plus/icons-vue";
+import {DocumentCopy, Picture} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import Clipboard from "clipboard";
 
 const list = ref([])
 const loading = ref(true)
 const over = ref(false)
 const imgType = ref("mj") // 图片类别
-const listBoxHeight = window.innerHeight - 100
+const listBoxHeight = window.innerHeight - 71
 const colWidth = ref(240)
 
 // 计算瀑布流列宽度
@@ -91,6 +108,17 @@ const getNext = () => {
 
 getNext()
 
+onMounted(() => {
+  const clipboard = new Clipboard('.copy-prompt');
+  clipboard.on('success', () => {
+    ElMessage.success({message: "复制成功！", duration: 500});
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+
 </script>
 
 <style lang="stylus" scoped>