diff --git a/web/src/assets/css/images-wall.css b/web/src/assets/css/images-wall.css index d313ec8a..dc6f2cf5 100644 --- a/web/src/assets/css/images-wall.css +++ b/web/src/assets/css/images-wall.css @@ -35,38 +35,40 @@ overflow: hidden; } .page-images-wall .inner .waterfall .list-item .image .el-image { + width: 100%; transition: transform 0.3s; cursor: pointer; } -.page-images-wall .inner .waterfall .list-item .prompt { +.page-images-wall .inner .waterfall .list-item .opt { display: none; position: absolute; - width: 180px; + width: 100%; bottom: 0; left: 0; color: #fff; - padding: 10px 10px 20px 10px; + padding: 8px 10px; line-height: 1.2; border-top-right-radius: 10px; background-color: rgba(10,10,10,0.7); } -.page-images-wall .inner .waterfall .list-item .prompt span { +.page-images-wall .inner .waterfall .list-item .opt span { word-break: break-all; } -.page-images-wall .inner .waterfall .list-item .prompt .el-icon { - position: absolute; - bottom: 10px; - right: 10px; +.page-images-wall .inner .waterfall .list-item .opt .el-icon, +.page-images-wall .inner .waterfall .list-item .opt .iconfont { + top: 2px; cursor: pointer; border: 1px solid #fff; border-radius: 5px; padding: 2px; - font-size: 12px; + font-size: 16px; + margin-right: 10px; } -.page-images-wall .inner .waterfall .list-item .prompt .el-icon:hover { - background-color: #999; +.page-images-wall .inner .waterfall .list-item .opt .el-icon:hover, +.page-images-wall .inner .waterfall .list-item .opt .iconfont:hover { + background-color: #444; } -.page-images-wall .inner .waterfall .list-item:hover .prompt { +.page-images-wall .inner .waterfall .list-item:hover .opt { display: block; animation: expandUp 0.3s ease-in-out forwards; transform-origin: bottom center; diff --git a/web/src/assets/css/images-wall.styl b/web/src/assets/css/images-wall.styl index 19b269e9..b5c5729a 100644 --- a/web/src/assets/css/images-wall.styl +++ b/web/src/assets/css/images-wall.styl @@ -52,19 +52,20 @@ overflow hidden .el-image { + width 100% transition: transform 0.3s; cursor pointer } } - .prompt { + .opt { display none position absolute - width 180px + width 100% bottom 0 left 0 color #ffffff - padding 10px 10px 20px 10px + padding 8px 10px line-height 1.2 border-top-right-radius 10px background-color rgba(10, 10, 10, 0.7) @@ -73,24 +74,23 @@ word-break break-all } - .el-icon { - position absolute - bottom 10px - right 10px + .el-icon, .iconfont { + top 2px cursor pointer border 1px solid #ffffff border-radius 5px padding 2px - font-size 12px; + font-size 16px; + margin-right 10px &:hover { - background-color #999999 + background-color #444444 } } } &:hover { - .prompt { + .opt { display block animation: expandUp 0.3s ease-in-out forwards; transform-origin: bottom center; diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue index c8d90d18..d582af15 100644 --- a/web/src/views/ImageMj.vue +++ b/web/src/views/ImageMj.vue @@ -555,6 +555,7 @@ const options = [ }, ] +const router = useRouter() const params = ref({ task_type: "image", rate: rates[0].value, @@ -565,7 +566,7 @@ const params = ref({ img_arr: [], raw: false, weight: 0.25, - prompt: "", + prompt: router.currentRoute.value.params["prompt"] ?? "", neg_prompt: "", tile: false, quality: 0 @@ -577,7 +578,6 @@ const activeName = ref('image') const runningJobs = ref([]) const finishedJobs = ref([]) -const router = useRouter() const socket = ref(null) const imgCalls = ref(0) diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue index 99d106e3..cbb62a75 100644 --- a/web/src/views/ImagesWall.vue +++ b/web/src/views/ImagesWall.vue @@ -13,7 +13,7 @@
-
- {{ slotProp.item.prompt }} - - - +
+ + + + + + + + +
@@ -58,7 +73,7 @@ - -
- {{ slotProp.item.prompt }} - - - -
@@ -223,7 +231,7 @@
- 画一张同款的 + 画一张同款的
@@ -242,7 +250,10 @@ import {ElMessage} from "element-plus"; import Clipboard from "clipboard"; import {useRouter} from "vue-router"; -const list = ref([]) +const data = ref({ + "mj": [], + "sd": [] +}) const loading = ref(true) const isOver = ref(false) const imgType = ref("mj") // 图片类别 @@ -264,7 +275,7 @@ window.onresize = () => { } const page = ref(0) -const pageSize = ref(20) +const pageSize = ref(15) // 获取下一页数据 const getNext = () => { if (isOver.value) { @@ -286,15 +297,15 @@ const getNext = () => { for (let i = 0; i < imageList.length; i++) { imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75" } - if (list.value.length === 0) { - list.value = imageList + if (data.value[imgType.value].length === 0) { + data.value[imgType.value] = imageList return } if (imageList.length < pageSize.value) { isOver.value = true } - list.value = list.value.concat(imageList) + data.value[imgType.value] = data.value[imgType.value].concat(imageList) }).catch(e => { ElMessage.error("获取图片失败:" + e.message) @@ -317,7 +328,10 @@ onMounted(() => { const changeImgType = () => { document.getElementById('waterfall-box').scrollTo(0, 0) page.value = 0 - list.value = [] + data.value = { + "mj": [], + "sd": [] + } loading.value = true isOver.value = false nextTick(() => getNext()) @@ -330,10 +344,13 @@ const showTask = (row) => { const router = useRouter() -const copyParams = (row) => { +const drawSameSd = (row) => { router.push({name: "image-sd", params: {copyParams: JSON.stringify(row.params)}}) } +const drawSameMj = (row) => { + router.push({name: "image-mj", params: {prompt: row.prompt}}) +}