docs: update images for readme

README.md

@@ -1,12 +1,12 @@
 # ChatGPT-Plus
 
 **ChatGPT-PLUS** 基于 AI 大语言模型 API 实现的 AI 助手全套开源解决方案，自带运营管理后台，开箱即用。集成了 OpenAI, Azure,
-ChatGLM,讯飞星火，文心一言等多个平台的大语言模型。主要有如下特性：
+ChatGLM,讯飞星火，文心一言等多个平台的大语言模型。集成了 MidJourney 和 Stable Diffusion AI绘画功能。主要有如下特性：
 
 * 完整的开源系统，前端应用和后台管理系统皆可开箱即用。
 * 聊天体验跟 ChatGPT 官方版本完全一致。
 * 内置了各种预训练好的角色，比如小红书写手，英语翻译大师，苏格拉底，孔子，乔布斯，周报助手等。轻松满足你的各种聊天和应用需求。
-* 支持 MidJourney AI 绘画集成，开箱即用。
+* 支持 MidJourney / Stable Diffusion AI 绘画集成，开箱即用。
 * 支持使用个人微信二维码作为充值收费的支付渠道，无需企业支付通道。（可定制开发其他支付通道支持）
 * 集成插件 API 功能，可结合 GPT 开发各种强大的插件，已内置实现了微博热搜，今日头条，今日早报和 AI 绘画函数插件。
 
@@ -30,9 +30,9 @@ ChatGLM,讯飞星火，文心一言等多个平台的大语言模型。主要有
 
 ![ChatGPT function plugin](/docs/imgs/mj.jpg)
 
-### 用户设置
+### 绘图作品展
 
-![ChatGPT user profle](/docs/imgs/user_profile.png)
+![ChatGPT image_list](/docs/imgs/image-list.png)
 
 ### 登录页面
 
@@ -50,7 +50,8 @@ ChatGLM,讯飞星火，文心一言等多个平台的大语言模型。主要有
 
 ![Mobile chat list](/docs/imgs/mobile_chat_list.png)
 ![Mobile chat session](/docs/imgs/mobile_chat_session.png)
-![Mobile chat setting](/docs/imgs/mobile_chat_setting.png)
+![Mobile chat setting](/docs/imgs/mobile_user_profile.png)
+![Mobile chat setting](/docs/imgs/mobile_user_profile.png)
 
 ### 7. 体验地址
 
@@ -101,12 +102,10 @@ ChatGPT 的服务。
 * Github 地址：https://github.com/yangjian102621/chatgpt-plus
 * 码云地址：https://gitee.com/blackfox/chatgpt-plus
 
-
 ## 客户端下载
 
 目前已经支持 Win/Linux/Mac/Android 客户端，下载地址为：https://github.com/yangjian102621/chatgpt-plus/releases/tag/v3.1.2
 
-
 ## TODOLIST
 
 * [x] 整合 Midjourney AI 绘画 API
@@ -134,7 +133,7 @@ cd docker/mysql
 # 创建 mysql 容器
 docker-compose up -d
 # 导入数据库
-docker exec -i chatgpt-plus-mysql sh -c 'exec mysql -uroot -p12345678' < ../../database/chatgpt_plus-v3.1.4.sql
+docker exec -i chatgpt-plus-mysql sh -c 'exec mysql -uroot -p12345678' < ../../database/chatgpt_plus-v3.1.5.sql
 ```
 
 如果你本地已经安装了 MySQL 服务，那么你只需手动导入数据库即可。
@@ -222,8 +221,11 @@ WeChatBot = false # 是否启动微信机器人
 ```
 
 > 1. 如果你不知道如何获取 Discord 用户 Token 和 Bot Token
-请查参考 [Midjourney｜如何集成到自己的平台](https://zhuanlan.zhihu.com/p/631079476)。
-> 2. `Txt2ImgJsonPath` 的默认用的是使用最广泛的 [stable-diffusion-webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui) 项目的 API，如果你用的是其他版本，比如秋叶的懒人包部署的，那么请将对应的 text2img 的参数报文复制放在 `res/text2img.json` 文件中即可。
+     请查参考 [Midjourney｜如何集成到自己的平台](https://zhuanlan.zhihu.com/p/631079476)。
+> 2. `Txt2ImgJsonPath`
+     的默认用的是使用最广泛的 [stable-diffusion-webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui) 项目的
+     API，如果你用的是其他版本，比如秋叶的懒人包部署的，那么请将对应的 text2img 的参数报文复制放在 `res/text2img.json`
+     文件中即可。
 
 修改 nginx 配置文档 `docker/conf/nginx/conf.d/chatgpt-plus.conf`，把后端转发的地址改成当前主机的内网 IP 地址。
 
@@ -250,6 +252,42 @@ location /static/ {
 
 ### 3. 启动应用
 
+先修改 `docker/docker-compose.yaml` 文件中的镜像地址，改成最新的版本：
+
+```yaml
+version: '3'
+services:
+  # 后端 API 镜像
+  chatgpt-plus-api:
+    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-api:v3.1.5 #这里改成最新的 release 版本地址
+    container_name: chatgpt-plus-api
+    restart: always
+    environment:
+      - DEBUG=false
+      - LOG_LEVEL=info
+      - CONFIG_FILE=config.toml
+    ports:
+      - "5678:5678"
+    volumes:
+      - /usr/share/zoneinfo/Asia/Shanghai:/etc/localtime
+      - ./conf/config.toml:/var/www/app/config.toml
+      - ./logs:/var/www/app/logs
+      - ./static:/var/www/app/static
+
+  # 前端应用镜像
+  chatgpt-plus-web:
+    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-web:v3.1.5 #这里改成最新的 release 版本地址
+    container_name: chatgpt-plus-web
+    restart: always
+    ports:
+      - "8080:8080" # 这边是对外的端口，支持 8080，80和443
+    volumes:
+      - ./logs/nginx:/var/log/nginx
+      - ./conf/nginx/conf.d:/etc/nginx/conf.d
+      - ./conf/nginx/nginx.conf:/etc/nginx/nginx.conf
+      - ./ssl:/etc/nginx/ssl
+```
+
 ```shell
 cd docker
 docker-compose up -d

api/handler/mj_handler.go

@@ -315,14 +315,26 @@ func (h *MidJourneyHandler) Variation(c *gin.Context) {
 // JobList 获取 MJ 任务列表
 func (h *MidJourneyHandler) JobList(c *gin.Context) {
 	status := h.GetInt(c, "status", 0)
-	var items []model.MidJourneyJob
-	var res *gorm.DB
-	userId, _ := c.Get(types.LoginUserID)
+	userId := h.GetInt(c, "user_id", 0)
+	page := h.GetInt(c, "page", 0)
+	pageSize := h.GetInt(c, "page_size", 0)
+
+	session := h.db.Session(&gorm.Session{})
 	if status == 1 {
-		res = h.db.Where("user_id = ? AND progress = 100", userId).Order("id DESC").Find(&items)
+		session = session.Where("progress = ?", 100).Order("id DESC")
 	} else {
-		res = h.db.Where("user_id = ? AND progress < 100", userId).Order("id ASC").Find(&items)
+		session = session.Where("progress < ?", 100).Order("id ASC")
 	}
+	if userId > 0 {
+		session = session.Where("user_id = ?", userId)
+	}
+	if page > 0 && pageSize > 0 {
+		offset := (page - 1) * pageSize
+		session = session.Offset(offset).Limit(pageSize)
+	}
+
+	var items []model.MidJourneyJob
+	res := session.Find(&items)
 	if res.Error != nil {
 		resp.ERROR(c, types.NoData)
 		return

api/handler/sd_handler.go

@@ -163,14 +163,26 @@ func (h *SdJobHandler) Image(c *gin.Context) {
 // JobList 获取 MJ 任务列表
 func (h *SdJobHandler) JobList(c *gin.Context) {
 	status := h.GetInt(c, "status", 0)
-	var items []model.SdJob
-	var res *gorm.DB
-	userId, _ := c.Get(types.LoginUserID)
+	userId := h.GetInt(c, "user_id", 0)
+	page := h.GetInt(c, "page", 0)
+	pageSize := h.GetInt(c, "page_size", 0)
+
+	session := h.db.Session(&gorm.Session{})
 	if status == 1 {
-		res = h.db.Where("user_id = ? AND progress = 100", userId).Order("id DESC").Find(&items)
+		session = session.Where("progress = ?", 100).Order("id DESC")
 	} else {
-		res = h.db.Where("user_id = ? AND progress < 100", userId).Order("id ASC").Find(&items)
+		session = session.Where("progress < ?", 100).Order("id ASC")
 	}
+	if userId > 0 {
+		session = session.Where("user_id = ?", userId)
+	}
+	if page > 0 && pageSize > 0 {
+		offset := (page - 1) * pageSize
+		session = session.Offset(offset).Limit(pageSize)
+	}
+
+	var items []model.SdJob
+	res := session.Find(&items)
 	if res.Error != nil {
 		resp.ERROR(c, types.NoData)
 		return

docker/docker-compose.yaml

@@ -2,7 +2,7 @@ version: '3'
 services:
   # 后端 API 程序
   chatgpt-plus-api:
-    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-api:v3.1.4
+    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-api:v3.1.5
     container_name: chatgpt-plus-api
     restart: always
     environment:
@@ -19,7 +19,7 @@ services:
 
   # 前端应用
   chatgpt-plus-web:
-    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-web:v3.1.4
+    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-web:v3.1.5
     container_name: chatgpt-plus-web
     restart: always
     ports:

web/package-lock.json

@@ -23,6 +23,7 @@
         "pinia": "^2.1.4",
         "qs": "^6.11.1",
         "sortablejs": "^1.15.0",
+        "v3-waterfall": "^1.2.1",
         "vant": "^4.5.0",
         "vue": "^3.2.13",
         "vue-router": "^4.0.15"
@@ -10459,6 +10460,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v3-waterfall": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/v3-waterfall/-/v3-waterfall-1.2.1.tgz",
+      "integrity": "sha512-zjfT1FuHupsAahvS4mr3Yb8k2SHB8srW6st+/cBXwrsyhbCcj8Qhb1QtNUuEIx/tbpLQrMpxtJunZXkaKBfAEA=="
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -19518,6 +19524,11 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true
     },
+    "v3-waterfall": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/v3-waterfall/-/v3-waterfall-1.2.1.tgz",
+      "integrity": "sha512-zjfT1FuHupsAahvS4mr3Yb8k2SHB8srW6st+/cBXwrsyhbCcj8Qhb1QtNUuEIx/tbpLQrMpxtJunZXkaKBfAEA=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

web/package.json

@@ -17,14 +17,15 @@
     "good-storage": "^1.1.1",
     "highlight.js": "^11.7.0",
     "json-bigint": "^1.0.0",
+    "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "md-editor-v3": "^2.2.1",
     "pinia": "^2.1.4",
     "qs": "^6.11.1",
     "sortablejs": "^1.15.0",
+    "v3-waterfall": "^1.2.1",
     "vant": "^4.5.0",
     "vue": "^3.2.13",
-    "lodash": "^4.17.21",
     "vue-router": "^4.0.15"
   },
   "devDependencies": {

web/src/assets/css/chat-plus.css

@@ -63,7 +63,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: 210px;
+  width: 190px;
 }
 #app .common-layout .el-aside .chat-list .content .chat-list-item .chat-title {
   color: #c1c1c1;

web/src/assets/css/custom-scroll.css

@@ -0,0 +1,13 @@
+.custom-scroll ::-webkit-scrollbar {
+  width: 8px; /* 滚动条宽度 */
+}
+.custom-scroll ::-webkit-scrollbar-track {
+  background-color: #282c34;
+}
+.custom-scroll ::-webkit-scrollbar-thumb {
+  background-color: #444;
+  border-radius: 8px;
+}
+.custom-scroll ::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+}

web/src/assets/css/custom-scroll.styl

@@ -0,0 +1,26 @@
+.custom-scroll {
+  /* 修改滚动条的颜色 */
+
+  ::-webkit-scrollbar {
+    width: 8px; /* 滚动条宽度 */
+  }
+
+  /* 修改滚动条轨道的背景颜色 */
+
+  ::-webkit-scrollbar-track {
+    background-color: #282C34;
+  }
+
+  /* 修改滚动条的滑块颜色 */
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #444444;
+    border-radius 8px
+  }
+
+  /* 修改滚动条的滑块的悬停颜色 */
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #666666;
+  }
+}

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

@@ -3,10 +3,6 @@
 }
 .page-mj .inner {
   display: flex;
-/* 修改滚动条的颜色 */
-/* 修改滚动条轨道的背景颜色 */
-/* 修改滚动条的滑块颜色 */
-/* 修改滚动条的滑块的悬停颜色 */
 }
 .page-mj .inner .mj-box {
   margin: 10px;
@@ -147,19 +143,6 @@
 .page-mj .inner .el-form .el-slider {
   width: 180px;
 }
-.page-mj .inner ::-webkit-scrollbar {
-  width: 10px; /* 滚动条宽度 */
-}
-.page-mj .inner ::-webkit-scrollbar-track {
-  background-color: #282c34;
-}
-.page-mj .inner ::-webkit-scrollbar-thumb {
-  background-color: #444;
-  border-radius: 10px;
-}
-.page-mj .inner ::-webkit-scrollbar-thumb:hover {
-  background-color: #666;
-}
 .page-mj .inner .task-list-box {
   width: 100%;
   padding: 10px;

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

@@ -182,160 +182,7 @@
       }
     }
 
-    /* 修改滚动条的颜色 */
-
-    ::-webkit-scrollbar {
-      width: 10px; /* 滚动条宽度 */
-    }
-
-    /* 修改滚动条轨道的背景颜色 */
-
-    ::-webkit-scrollbar-track {
-      background-color: #282C34;
-    }
-
-    /* 修改滚动条的滑块颜色 */
-
-    ::-webkit-scrollbar-thumb {
-      background-color: #444444;
-      border-radius 10px
-    }
-
-    /* 修改滚动条的滑块的悬停颜色 */
-
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: #666666;
-    }
-
-    .task-list-box {
-      width 100%
-      padding 10px
-      color #ffffff
-      overflow-x hidden
-
-      .running-job-list {
-        .job-item {
-          //border: 1px solid #454545;
-          width: 100%;
-          padding 2px
-          background-color #555555
-
-          .job-item-inner {
-            position relative
-            height 100%
-            overflow hidden
-
-            .progress {
-              position absolute
-              width 100%
-              height 100%
-              top 0
-              left 0
-              display flex
-              justify-content center
-              align-items center
-
-              span {
-                font-size 20px
-                color #ffffff
-              }
-            }
-          }
-        }
-      }
-
-
-      .finish-job-list {
-        .job-item {
-          width 100%
-          height 100%
-
-          .opt {
-            .opt-line {
-              margin 6px 0
-
-              ul {
-                display flex
-                flex-flow row
-
-                li {
-                  margin-right 10px
-
-                  a {
-                    padding 3px 0
-                    width 44px
-                    text-align center
-                    border-radius 5px
-                    display block
-                    cursor pointer
-                    background-color #4E5058
-                    color #ffffff
-
-                    &:hover {
-                      background-color #6D6F78
-                    }
-                  }
-                }
-
-                .show-prompt {
-                  font-size 20px
-                  cursor pointer
-                }
-              }
-            }
-          }
-
-        }
-
-      }
-
-      .el-image {
-        width 100%
-        height 100%
-        max-height 240px
-
-        img {
-          height 240px
-        }
-
-        .el-image-viewer__wrapper {
-          img {
-            width auto
-            height auto
-          }
-        }
-
-        .image-slot {
-          display flex
-          flex-flow column
-          justify-content center
-          align-items center
-          height 100%
-          min-height 200px
-          color #ffffff
-
-          .iconfont {
-            font-size 50px
-            margin-bottom 10px
-          }
-        }
-      }
-
-      .el-image.upscale {
-        max-height 304px
-
-        img {
-          height 304px
-        }
-
-        .el-image-viewer__wrapper {
-          img {
-            width auto
-            height auto
-          }
-        }
-      }
-    }
+    @import "task-list.styl"
   }
 
 }

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

@@ -231,16 +231,3 @@
   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

@@ -87,222 +87,11 @@
       }
     }
 
-    .task-list-box {
-      width 100%
-      padding 10px
-      color #ffffff
-      overflow-x hidden
-
-      .running-job-list {
-        .job-item {
-          //border: 1px solid #454545;
-          width: 100%;
-          padding 2px
-          background-color #555555
-
-          .job-item-inner {
-            position relative
-            height 100%
-            overflow hidden
-
-            .progress {
-              position absolute
-              width 100%
-              height 100%
-              top 0
-              left 0
-              display flex
-              justify-content center
-              align-items center
-
-              span {
-                font-size 20px
-                color #ffffff
-              }
-            }
-          }
-        }
+    @import "task-list.styl"
   }
 
+  @import "sd-task-dialog.styl"
 
-      .finish-job-list {
-        .job-item {
-          width 100%
-          height 100%
-
-          .opt {
-            .opt-line {
-              margin 6px 0
-
-              ul {
-                display flex
-                flex-flow row
-
-                li {
-                  margin-right 10px
-
-                  a {
-                    padding 3px 0
-                    width 44px
-                    text-align center
-                    border-radius 5px
-                    display block
-                    cursor pointer
-                    background-color #4E5058
-                    color #ffffff
-
-                    &:hover {
-                      background-color #6D6F78
-                    }
-                  }
-                }
-
-                .show-prompt {
-                  font-size 20px
-                  cursor pointer
-                }
-              }
-            }
-          }
-
-        }
-
-      }
-
-      .el-image {
-        width 100%
-        height 100%
-        max-height 240px
-
-        img {
-          height 240px
-        }
-
-        .el-image-viewer__wrapper {
-          img {
-            width auto
-            height auto
-          }
-        }
-
-        .image-slot {
-          display flex
-          flex-flow column
-          justify-content center
-          align-items center
-          height 100%
-          min-height 200px
-          color #ffffff
-
-          .iconfont {
-            font-size 50px
-            margin-bottom 10px
-          }
-        }
-      }
-
-      .el-image.upscale {
-        max-height 304px
-
-        img {
-          height 304px
-        }
-
-        .el-image-viewer__wrapper {
-          img {
-            width auto
-            height auto
-          }
-        }
-      }
-    }
-  }
-
-  .el-overlay-dialog {
-    .el-dialog {
-      background-color #1a1b1e
-
-      .el-dialog__header {
-        .el-dialog__title {
-          color #F5F5F5
-        }
-      }
-
-      .el-dialog__body {
-        padding 0 0 0 15px !important
-        display flex
-        height 100%
-
-        .el-row {
-          width 100%
-
-          .img-container {
-            display flex
-            justify-content center
-          }
-
-          .task-info {
-            background-color #25262b
-            padding 1rem 1.5rem
-
-            .info-line {
-              width 100%
-
-              .prompt {
-                background-color #35363b
-                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
-
-      }
-    }
-  }
 
   .mj-list-item-prompt {
     .el-icon {
@@ -315,30 +104,3 @@
 
 }
 
-.custom-scroll {
-  /* 修改滚动条的颜色 */
-
-  ::-webkit-scrollbar {
-    width: 10px; /* 滚动条宽度 */
-  }
-
-  /* 修改滚动条轨道的背景颜色 */
-
-  ::-webkit-scrollbar-track {
-    background-color: #282C34;
-  }
-
-  /* 修改滚动条的滑块颜色 */
-
-  ::-webkit-scrollbar-thumb {
-    background-color: #444444;
-    border-radius 10px
-  }
-
-  /* 修改滚动条的滑块的悬停颜色 */
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: #666666;
-  }
-}
-

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

@@ -0,0 +1,175 @@
+.page-images-wall {
+  display: flex;
+  background-color: #282c34;
+}
+.page-images-wall .inner {
+  width: 100%;
+  color: #fff;
+  overflow: hidden;
+}
+.page-images-wall .inner .header {
+  display: flex;
+  padding: 0 40px;
+}
+.page-images-wall .inner .header h2 {
+  width: 300px;
+}
+.page-images-wall .inner .header .settings {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+}
+.page-images-wall .inner .header .settings .el-radio-group {
+  font-size: 16px;
+}
+.page-images-wall .inner .header .settings .el-radio-group .el-radio {
+  color: #fff;
+}
+.page-images-wall .inner .waterfall {
+  position: relative;
+  margin: 0 auto;
+  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;
+  cursor: pointer;
+}
+.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 .footer {
+  display: flex;
+  padding: 20px;
+  align-items: center;
+  justify-content: center;
+}
+.page-images-wall .inner .footer .iconfont {
+  margin-left: 6px;
+}
+.page-images-wall .el-overlay-dialog .el-dialog {
+  background-color: #1a1b1e;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title {
+  color: #f5f5f5;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body {
+  padding: 0 0 0 15px !important;
+  display: flex;
+  height: 100%;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row {
+  width: 100%;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container {
+  display: flex;
+  justify-content: center;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
+  background-color: #25262b;
+  padding: 1rem 1.5rem;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line {
+  width: 100%;
+}
+.page-images-wall .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-images-wall .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-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper {
+  margin-top: 10px;
+  display: flex;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label {
+  display: flex;
+  width: 100px;
+  color: #a5a5a5;
+}
+.page-images-wall .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-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params {
+  padding: 20px 0 10px 0;
+}
+.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
+  width: 100%;
+}
+@-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

@@ -0,0 +1,117 @@
+@keyframes expandUp {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+.page-images-wall {
+  display: flex;
+  background-color: #282c34;
+
+  .inner {
+    width 100%
+    color #ffffff
+    overflow hidden
+
+    .header {
+      display flex
+      padding 0 40px
+
+      h2 {
+        width 300px
+      }
+
+      .settings {
+        width 100%
+        display flex
+        justify-content right
+
+        .el-radio-group {
+          font-size 16px
+
+          .el-radio {
+            color #ffffff
+          }
+
+        }
+      }
+    }
+
+    .waterfall {
+      position: relative;
+      margin: 0 auto;
+      overflow-y auto
+      overflow-x hidden
+
+      .list-item {
+
+        .image {
+          overflow hidden
+
+          .el-image {
+            transition: transform 0.3s;
+            cursor pointer
+          }
+        }
+
+        .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
+      }
+    }
+  }
+
+  @import "sd-task-dialog.styl"
+}

web/src/assets/css/sd-task-dialog.css

@@ -0,0 +1,63 @@
+.el-overlay-dialog .el-dialog {
+  background-color: #1a1b1e;
+}
+.el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title {
+  color: #f5f5f5;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body {
+  padding: 0 0 0 15px !important;
+  display: flex;
+  height: 100%;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row {
+  width: 100%;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container {
+  display: flex;
+  justify-content: center;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
+  background-color: #25262b;
+  padding: 1rem 1.5rem;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line {
+  width: 100%;
+}
+.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;
+}
+.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;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper {
+  margin-top: 10px;
+  display: flex;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label {
+  display: flex;
+  width: 100px;
+  color: #a5a5a5;
+}
+.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;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params {
+  padding: 20px 0 10px 0;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
+  width: 100%;
+}

web/src/assets/css/sd-task-dialog.styl

@@ -0,0 +1,85 @@
+.el-overlay-dialog {
+  .el-dialog {
+    background-color #1a1b1e
+
+    .el-dialog__header {
+      .el-dialog__title {
+        color #F5F5F5
+      }
+    }
+
+    .el-dialog__body {
+      padding 0 0 0 15px !important
+      display flex
+      height 100%
+
+      .el-row {
+        width 100%
+
+        .img-container {
+          display flex
+          justify-content center
+        }
+
+        .task-info {
+          background-color #25262b
+          padding 1rem 1.5rem
+
+          .info-line {
+            width 100%
+
+            .prompt {
+              background-color #35363b
+              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/assets/css/task-list.css

@@ -0,0 +1,96 @@
+.task-list-box {
+  width: 100%;
+  padding: 10px;
+  color: #fff;
+  overflow-x: hidden;
+}
+.task-list-box .running-job-list .job-item {
+  width: 100%;
+  padding: 2px;
+  background-color: #555;
+}
+.task-list-box .running-job-list .job-item .job-item-inner {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+.task-list-box .running-job-list .job-item .job-item-inner .progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.task-list-box .running-job-list .job-item .job-item-inner .progress span {
+  font-size: 20px;
+  color: #fff;
+}
+.task-list-box .finish-job-list .job-item {
+  width: 100%;
+  height: 100%;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line {
+  margin: 6px 0;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul {
+  display: flex;
+  flex-flow: row;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul li {
+  margin-right: 10px;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
+  padding: 3px 0;
+  width: 44px;
+  text-align: center;
+  border-radius: 5px;
+  display: block;
+  cursor: pointer;
+  background-color: #4e5058;
+  color: #fff;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
+  background-color: #6d6f78;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
+  font-size: 20px;
+  cursor: pointer;
+}
+.task-list-box .el-image {
+  width: 100%;
+  height: 100%;
+  max-height: 240px;
+}
+.task-list-box .el-image img {
+  height: 240px;
+}
+.task-list-box .el-image .el-image-viewer__wrapper img {
+  width: auto;
+  height: auto;
+}
+.task-list-box .el-image .image-slot {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  min-height: 200px;
+  color: #fff;
+}
+.task-list-box .el-image .image-slot .iconfont {
+  font-size: 50px;
+  margin-bottom: 10px;
+}
+.task-list-box .el-image.upscale {
+  max-height: 304px;
+}
+.task-list-box .el-image.upscale img {
+  height: 304px;
+}
+.task-list-box .el-image.upscale .el-image-viewer__wrapper img {
+  width: auto;
+  height: auto;
+}

web/src/assets/css/task-list.styl

@@ -0,0 +1,129 @@
+.task-list-box {
+  width 100%
+  padding 10px
+  color #ffffff
+  overflow-x hidden
+
+  .running-job-list {
+    .job-item {
+      //border: 1px solid #454545;
+      width: 100%;
+      padding 2px
+      background-color #555555
+
+      .job-item-inner {
+        position relative
+        height 100%
+        overflow hidden
+
+        .progress {
+          position absolute
+          width 100%
+          height 100%
+          top 0
+          left 0
+          display flex
+          justify-content center
+          align-items center
+
+          span {
+            font-size 20px
+            color #ffffff
+          }
+        }
+      }
+    }
+  }
+
+
+  .finish-job-list {
+    .job-item {
+      width 100%
+      height 100%
+
+      .opt {
+        .opt-line {
+          margin 6px 0
+
+          ul {
+            display flex
+            flex-flow row
+
+            li {
+              margin-right 10px
+
+              a {
+                padding 3px 0
+                width 44px
+                text-align center
+                border-radius 5px
+                display block
+                cursor pointer
+                background-color #4E5058
+                color #ffffff
+
+                &:hover {
+                  background-color #6D6F78
+                }
+              }
+            }
+
+            .show-prompt {
+              font-size 20px
+              cursor pointer
+            }
+          }
+        }
+      }
+
+    }
+
+  }
+
+  .el-image {
+    width 100%
+    height 100%
+    max-height 240px
+
+    img {
+      height 240px
+    }
+
+    .el-image-viewer__wrapper {
+      img {
+        width auto
+        height auto
+      }
+    }
+
+    .image-slot {
+      display flex
+      flex-flow column
+      justify-content center
+      align-items center
+      height 100%
+      min-height 200px
+      color #ffffff
+
+      .iconfont {
+        font-size 50px
+        margin-bottom 10px
+      }
+    }
+  }
+
+  .el-image.upscale {
+    max-height 304px
+
+    img {
+      height 304px
+    }
+
+    .el-image-viewer__wrapper {
+      img {
+        width auto
+        height auto
+      }
+    }
+  }
+}

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": "知识库",

web/src/main.js

@@ -33,6 +33,8 @@ import {
     Uploader
 } from "vant";
 import router from "@/router";
+import 'v3-waterfall/dist/style.css'
+import V3waterfall from "v3-waterfall";
 
 const app = createApp(App)
 app.use(createPinia())
@@ -62,6 +64,7 @@ app.use(ShareSheet);
 app.use(Switch);
 app.use(Uploader);
 app.use(Tag);
+app.use(V3waterfall)
 app.use(router).use(ElementPlus).mount('#app')
 
 

web/src/router.js

@@ -22,7 +22,7 @@ const routes = [
             },
             {
                 name: 'image-sd',
-                path: '/sd',
+                path: '/sd/',
                 meta: {title: 'Stable Diffusion 绘画中心'},
                 component: () => import('@/views/ImageSd.vue'),
             },
@@ -40,9 +40,9 @@ const routes = [
             },
             {
                 name: 'images',
-                path: '/images',
-                meta: {title: '绘画社区'},
-                component: () => import('@/views/Images.vue'),
+                path: '/images-wall',
+                meta: {title: '作品展示'},
+                component: () => import('@/views/ImagesWall.vue'),
             },
             {
                 name: 'user-invitation',

web/src/views/Home.vue

@@ -45,7 +45,7 @@ const navs = ref([
   {path: "/mj", icon: "image", title: "MJ 绘画"},
   {path: "/sd", icon: "palette", title: "SD 绘画"},
   {path: "/apps", icon: "menu", title: "应用中心"},
-  {path: "/images", icon: "image-list", title: "绘画社区"},
+  {path: "/images-wall", icon: "image-list", title: "作品展示"},
   {path: "/knowledge", icon: "book", title: "我的知识库"},
   {path: "/member", icon: "vip-user", title: "会员计划"},
   {path: "/invite", icon: "share", title: "推广计划"},

web/src/views/ImageMj.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-mj">
-    <div class="inner">
+    <div class="inner custom-scroll">
       <div class="mj-box">
         <h2>MidJourney 创作中心</h2>
 
@@ -379,7 +379,6 @@ import {getSessionId, getUserToken} from "@/store/session";
 
 const listBoxHeight = ref(window.innerHeight - 40)
 const mjBoxHeight = ref(window.innerHeight - 150)
-
 window.onresize = () => {
   listBoxHeight.value = window.innerHeight - 40
   mjBoxHeight.value = window.innerHeight - 150
@@ -476,14 +475,14 @@ onMounted(() => {
   checkSession().then(user => {
     imgCalls.value = user['img_calls']
     // 获取运行中的任务
-    httpGet("/api/mj/jobs?status=0").then(res => {
+    httpGet(`/api/mj/jobs?status=0&user_id=${user['id']}`).then(res => {
       runningJobs.value = res.data
     }).catch(e => {
       ElMessage.error("获取任务失败：" + e.message)
     })
 
     // 获取运行中的任务
-    httpGet("/api/mj/jobs?status=1").then(res => {
+    httpGet(`/api/mj/jobs?status=1&user_id=${user['id']}`).then(res => {
       finishedJobs.value = res.data
       previewImgList.value = []
       for (let index in finishedJobs.value) {
@@ -601,4 +600,5 @@ const send = (url, index, item) => {
 
 <style lang="stylus">
 @import "@/assets/css/image-mj.styl"
+@import "@/assets/css/custom-scroll.styl"
 </style>

web/src/views/ImageSd.vue

@@ -539,6 +539,11 @@ const runningJobs = ref([])
 const finishedJobs = ref([])
 const previewImgList = ref([])
 const router = useRouter()
+// 检查是否有画同款的参数
+const _params = router.currentRoute.value.params["copyParams"]
+if (_params) {
+  params.value = JSON.parse(_params)
+}
 
 const socket = ref(null)
 const imgCalls = ref(0)
@@ -681,4 +686,5 @@ const copyParams = (row) => {
 
 <style lang="stylus">
 @import "@/assets/css/image-sd.styl"
+@import "@/assets/css/custom-scroll.styl"
 </style>

web/src/views/Images.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="page-images" :style="{ height: winHeight + 'px' }">
-    <div class="inner">
-      <h1>绘画作品广场</h1>
-      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {ref} from "vue"
-
-const winHeight = ref(window.innerHeight)
-</script>
-
-<style lang="stylus" scoped>
-.page-images {
-  display: flex;
-  justify-content: center;
-  align-items center
-  background-color: #282c34;
-
-  .inner {
-    text-align center
-
-    h1 {
-      color: #202020;
-      font-size: 80px;
-      font-weight: bold;
-      letter-spacing: 0.1em;
-      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
-    }
-
-    h2 {
-      color #ffffff;
-      font-weight: bold;
-    }
-  }
-
-}
-</style>

web/src/views/ImagesWall.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="page-images-wall">
+    <div class="inner custom-scroll">
+      <div class="header">
+        <h2>AI 绘画作品墙</h2>
+        <div class="settings">
+          <el-radio-group v-model="imgType" @change="changeImgType">
+            <el-radio label="mj" size="large">MidJourney</el-radio>
+            <el-radio label="sd" size="large">Stable Diffusion</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="waterfall" :style="{ height:listBoxHeight + 'px' }" id="waterfall-box">
+        <v3-waterfall id="waterfall" :list="list" srcKey="img_url"
+                      :gap="12"
+                      :bottomGap="-5"
+                      :colWidth="colWidth"
+                      :distanceToScroll="100"
+                      :isLoading="loading"
+                      :isOver="false"
+                      @scrollReachBottom="getNext">
+          <template #default="slotProp">
+            <div class="list-item">
+              <div class="image" v-if="imgType === 'mj'">
+                <el-image :src="slotProp.item['img_url']+'?imageView2/4/w/300/q/75'"
+                          :zoom-rate="1.2"
+                          :preview-src-list="[slotProp.item['img_url']]"
+                          :preview-teleported="true"
+                          :initial-index="10"
+                          loading="lazy">
+                  <template #placeholder>
+                    <div class="image-slot">
+                      正在加载图片
+                    </div>
+                  </template>
+
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon>
+                        <Picture/>
+                      </el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+              <div class="image" v-else>
+                <el-image :src="slotProp.item['img_url']+'?imageView2/4/w/300/q/75'" loading="lazy"
+                          @click="showTask(slotProp.item)">
+                  <template #placeholder>
+                    <div class="image-slot">
+                      正在加载图片
+                    </div>
+                  </template>
+
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon>
+                        <Picture/>
+                      </el-icon>
+                    </div>
+                  </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>
+
+        <div class="footer" v-if="isOver">
+          <span>没有更多数据了</span>
+          <i class="iconfont icon-face"></i>
+        </div>
+
+      </div>
+    </div>
+    <!-- 任务详情弹框 -->
+    <el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
+      <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>
+        </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>
+
+            <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 class="info-line">
+              <div class="wrapper">
+                <label>采样方法：</label>
+                <div class="item-value">{{ item.params.sampler }}</div>
+              </div>
+            </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>
+        </el-col>
+      </el-row>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {nextTick, onMounted, ref} from "vue"
+import {DocumentCopy, Picture} from "@element-plus/icons-vue";
+import {httpGet} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import Clipboard from "clipboard";
+import {useRouter} from "vue-router";
+
+const list = ref([])
+const loading = ref(true)
+const isOver = ref(false)
+const imgType = ref("mj") // 图片类别
+const listBoxHeight = window.innerHeight - 71
+const colWidth = ref(240)
+const fullImgHeight = ref(window.innerHeight - 60)
+const showTaskDialog = ref(false)
+const item = ref({})
+
+// 计算瀑布流列宽度
+const calcColWidth = () => {
+  const listBoxWidth = window.innerWidth - 60 - 80
+  const rows = Math.floor(listBoxWidth / colWidth.value)
+  colWidth.value = Math.floor((listBoxWidth - (rows - 1) * 12) / rows)
+}
+calcColWidth()
+window.onresize = () => {
+  calcColWidth()
+}
+
+const page = ref(0)
+const pageSize = ref(20)
+// 获取下一页数据
+const getNext = () => {
+  if (isOver.value) {
+    return
+  }
+
+  loading.value = true
+  page.value = page.value + 1
+  const url = imgType.value === "mj" ? "/api/mj/jobs" : "/api/sd/jobs"
+  // 获取运行中的任务
+  httpGet(`${url}?status=1&page=${page.value}&page_size=${pageSize.value}`).then(res => {
+    loading.value = false
+    if (list.value.length === 0) {
+      list.value = res.data
+      return
+    }
+
+    if (res.data.length < pageSize.value) {
+      isOver.value = true
+    }
+    list.value = list.value.concat(res.data)
+
+  }).catch(e => {
+    ElMessage.error("获取图片失败：" + e.message)
+  })
+}
+
+getNext()
+
+onMounted(() => {
+  const clipboard = new Clipboard('.copy-prompt');
+  clipboard.on('success', () => {
+    ElMessage.success({message: "复制成功！", duration: 500});
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+
+const changeImgType = () => {
+  document.getElementById('waterfall-box').scrollTo(0, 0)
+  page.value = 0
+  list.value = []
+  isOver.value = false
+  nextTick(() => getNext())
+}
+
+const showTask = (row) => {
+  item.value = row
+  showTaskDialog.value = true
+}
+
+
+const router = useRouter()
+const copyParams = (row) => {
+  router.push({name: "image-sd", params: {copyParams: JSON.stringify(row.params)}})
+}
+
+</script>
+
+<style lang="stylus">
+@import "@/assets/css/images-wall.styl"
+@import "@/assets/css/custom-scroll.styl"
+</style>