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'),
-       url('iconfont.woff?t=1694420182193') format('woff'),
-       url('iconfont.ttf?t=1694420182193') format('truetype');
+  src: url('iconfont.woff2?t=1697164072791') format('woff2'),
+       url('iconfont.woff?t=1697164072791') format('woff'),
+       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": "知识库",