mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-02-15 10:54:24 +08:00
378 lines
13 KiB
Vue
378 lines
13 KiB
Vue
<template>
|
|
<div class="page-images-wall">
|
|
<div class="inner custom-scroll">
|
|
<div class="header">
|
|
<h2 class="text-xl pt-4 pb-4">AI 绘画作品墙</h2>
|
|
<div class="settings pr-14">
|
|
<el-radio-group v-model="imgType" @change="changeImgType">
|
|
<el-radio value="mj" size="large">MidJourney</el-radio>
|
|
<el-radio value="sd" size="large">Stable Diffusion</el-radio>
|
|
<el-radio value="dall" size="large">DALL-E</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div class="waterfall" :style="{ height: listBoxHeight + 'px' }" id="waterfall-box">
|
|
<Waterfall
|
|
v-if="imgType === 'mj'"
|
|
id="waterfall-mj"
|
|
:list="data['mj']"
|
|
:row-key="waterfallOptions.rowKey"
|
|
:gutter="waterfallOptions.gutter"
|
|
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
|
:width="waterfallOptions.width"
|
|
:breakpoints="waterfallOptions.breakpoints"
|
|
:img-selector="waterfallOptions.imgSelector"
|
|
:background-color="waterfallOptions.backgroundColor"
|
|
:animation-effect="waterfallOptions.animationEffect"
|
|
:animation-duration="waterfallOptions.animationDuration"
|
|
:animation-delay="waterfallOptions.animationDelay"
|
|
:animation-cancel="waterfallOptions.animationCancel"
|
|
:lazyload="waterfallOptions.lazyload"
|
|
:load-props="waterfallOptions.loadProps"
|
|
:cross-origin="waterfallOptions.crossOrigin"
|
|
:align="waterfallOptions.align"
|
|
:is-loading="loading"
|
|
:is-over="isOver"
|
|
@afterRender="loading = false"
|
|
>
|
|
<template #default="{ item, url }">
|
|
<div
|
|
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
|
>
|
|
<div class="overflow-hidden rounded-lg">
|
|
<LazyImg
|
|
:url="url"
|
|
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
|
@click="previewImg(item)"
|
|
/>
|
|
</div>
|
|
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
|
<div
|
|
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
|
>
|
|
<div class="opt">
|
|
<el-tooltip class="box-item" content="复制提示词" placement="top">
|
|
<el-button
|
|
type="info"
|
|
circle
|
|
class="copy-prompt-wall"
|
|
:data-clipboard-text="item.prompt"
|
|
>
|
|
<i class="iconfont icon-file"></i>
|
|
</el-button>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="box-item" content="画同款" placement="top">
|
|
<el-button type="primary" circle @click="drawSameMj(item)">
|
|
<i class="iconfont icon-palette"></i>
|
|
</el-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Waterfall>
|
|
|
|
<Waterfall
|
|
v-if="imgType === 'sd'"
|
|
id="waterfall-sd"
|
|
:list="data['sd']"
|
|
:row-key="waterfallOptions.rowKey"
|
|
:gutter="waterfallOptions.gutter"
|
|
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
|
:width="waterfallOptions.width"
|
|
:breakpoints="waterfallOptions.breakpoints"
|
|
:img-selector="waterfallOptions.imgSelector"
|
|
:background-color="waterfallOptions.backgroundColor"
|
|
:animation-effect="waterfallOptions.animationEffect"
|
|
:animation-duration="waterfallOptions.animationDuration"
|
|
:animation-delay="waterfallOptions.animationDelay"
|
|
:animation-cancel="waterfallOptions.animationCancel"
|
|
:lazyload="waterfallOptions.lazyload"
|
|
:load-props="waterfallOptions.loadProps"
|
|
:cross-origin="waterfallOptions.crossOrigin"
|
|
:align="waterfallOptions.align"
|
|
:is-loading="loading"
|
|
:is-over="isOver"
|
|
@afterRender="loading = false"
|
|
>
|
|
<template #default="{ item, url }">
|
|
<div
|
|
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
|
>
|
|
<div class="overflow-hidden rounded-lg">
|
|
<LazyImg
|
|
:url="url"
|
|
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
|
@click="showTask(item)"
|
|
/>
|
|
</div>
|
|
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
|
<div
|
|
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
|
>
|
|
<div class="opt">
|
|
<el-tooltip class="box-item" content="复制提示词" placement="top">
|
|
<el-button
|
|
type="info"
|
|
circle
|
|
class="copy-prompt-wall"
|
|
:data-clipboard-text="item.prompt"
|
|
>
|
|
<i class="iconfont icon-file"></i>
|
|
</el-button>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="box-item" content="画同款" placement="top">
|
|
<el-button type="primary" circle @click="drawSameSd(item)">
|
|
<i class="iconfont icon-palette"></i>
|
|
</el-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Waterfall>
|
|
|
|
<Waterfall
|
|
v-if="imgType === 'dall'"
|
|
id="waterfall-dall"
|
|
:list="data['dall']"
|
|
:row-key="waterfallOptions.rowKey"
|
|
:gutter="waterfallOptions.gutter"
|
|
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
|
:width="waterfallOptions.width"
|
|
:breakpoints="waterfallOptions.breakpoints"
|
|
:img-selector="waterfallOptions.imgSelector"
|
|
:background-color="waterfallOptions.backgroundColor"
|
|
:animation-effect="waterfallOptions.animationEffect"
|
|
:animation-duration="waterfallOptions.animationDuration"
|
|
:animation-delay="waterfallOptions.animationDelay"
|
|
:animation-cancel="waterfallOptions.animationCancel"
|
|
:lazyload="waterfallOptions.lazyload"
|
|
:load-props="waterfallOptions.loadProps"
|
|
:cross-origin="waterfallOptions.crossOrigin"
|
|
:align="waterfallOptions.align"
|
|
:is-loading="loading"
|
|
:is-over="isOver"
|
|
@afterRender="loading = false"
|
|
>
|
|
<template #default="{ item, url }">
|
|
<div
|
|
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
|
>
|
|
<div class="overflow-hidden rounded-lg">
|
|
<LazyImg
|
|
:url="url"
|
|
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
|
@click="previewImg(item)"
|
|
/>
|
|
</div>
|
|
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
|
<div
|
|
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
|
>
|
|
<div class="opt">
|
|
<el-tooltip class="box-item" content="复制提示词" placement="top">
|
|
<el-button
|
|
type="info"
|
|
circle
|
|
class="copy-prompt-wall"
|
|
:data-clipboard-text="item.prompt"
|
|
>
|
|
<i class="iconfont icon-file"></i>
|
|
</el-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Waterfall>
|
|
|
|
<div class="flex flex-col items-center justify-center py-10">
|
|
<img
|
|
:src="waterfallOptions.loadProps.loading"
|
|
class="max-w-[50px] max-h-[50px]"
|
|
v-if="loading"
|
|
/>
|
|
<div v-else>
|
|
<button
|
|
class="px-5 py-2 rounded-full bg-purple-700 text-md text-white cursor-pointer hover:bg-purple-800 transition-all duration-300"
|
|
@click="getNext"
|
|
v-if="!isOver"
|
|
>
|
|
加载更多
|
|
</button>
|
|
<div class="no-more-data" v-else>
|
|
<span class="text-gray-500 mr-2">没有更多数据了</span>
|
|
<i class="iconfont icon-face"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<back-top :right="30" :bottom="30" />
|
|
</div>
|
|
<!-- end of waterfall -->
|
|
</div>
|
|
<!-- 任务详情弹框 -->
|
|
<sd-task-view
|
|
v-model="showTaskDialog"
|
|
:data="item"
|
|
@drawSame="drawSameSd"
|
|
@close="showTaskDialog = false"
|
|
/>
|
|
|
|
<!-- 图片预览 -->
|
|
<el-image-viewer
|
|
@close="
|
|
() => {
|
|
previewURL = ''
|
|
}
|
|
"
|
|
v-if="previewURL !== ''"
|
|
:url-list="[previewURL]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BackTop from '@/components/BackTop.vue'
|
|
import SdTaskView from '@/components/SdTaskView.vue'
|
|
import { useSharedStore } from '@/store/sharedata'
|
|
import { httpGet } from '@/utils/http'
|
|
import Clipboard from 'clipboard'
|
|
import { ElMessage } from 'element-plus'
|
|
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
|
|
import 'vue-waterfall-plugin-next/dist/style.css'
|
|
|
|
const store = useSharedStore()
|
|
const waterfallOptions = store.waterfallOptions
|
|
|
|
const data = ref({
|
|
mj: [],
|
|
sd: [],
|
|
dall: [],
|
|
})
|
|
const loading = ref(true)
|
|
const isOver = ref(false)
|
|
const imgType = ref('mj') // 图片类别
|
|
const listBoxHeight = window.innerHeight - 124
|
|
const showTaskDialog = ref(false)
|
|
const item = ref({})
|
|
const previewURL = ref('')
|
|
|
|
const previewImg = (item) => {
|
|
previewURL.value = item.img_url
|
|
}
|
|
|
|
const page = ref(0)
|
|
const pageSize = ref(15)
|
|
// 获取下一页数据
|
|
const getNext = () => {
|
|
if (isOver.value) {
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
page.value = page.value + 1
|
|
let url = ''
|
|
switch (imgType.value) {
|
|
case 'mj':
|
|
url = '/api/mj/imgWall'
|
|
break
|
|
case 'sd':
|
|
url = '/api/sd/imgWall'
|
|
break
|
|
case 'dall':
|
|
url = '/api/dall/imgWall'
|
|
break
|
|
}
|
|
httpGet(`${url}?page=${page.value}&page_size=${pageSize.value}`)
|
|
.then((res) => {
|
|
if (!res.data.items || res.data.items.length === 0) {
|
|
isOver.value = true
|
|
loading.value = false
|
|
return
|
|
}
|
|
|
|
// 生成缩略图
|
|
const imageList = res.data.items
|
|
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 (data.value[imgType.value].length === 0) {
|
|
data.value[imgType.value] = imageList
|
|
return
|
|
}
|
|
|
|
if (imageList.length < pageSize.value) {
|
|
isOver.value = true
|
|
}
|
|
data.value[imgType.value] = data.value[imgType.value].concat(imageList)
|
|
})
|
|
.catch((e) => {
|
|
ElMessage.error('获取图片失败：' + e.message)
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
getNext()
|
|
|
|
const clipboard = ref(null)
|
|
onMounted(() => {
|
|
clipboard.value = new Clipboard('.copy-prompt-wall')
|
|
clipboard.value.on('success', () => {
|
|
ElMessage.success('复制成功！')
|
|
})
|
|
|
|
clipboard.value.on('error', () => {
|
|
ElMessage.error('复制失败！')
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
clipboard.value.destroy()
|
|
})
|
|
|
|
const changeImgType = () => {
|
|
console.log(imgType.value)
|
|
document.getElementById('waterfall-box').scrollTo(0, 0)
|
|
page.value = 0
|
|
data.value = {
|
|
mj: [],
|
|
sd: [],
|
|
dall: [],
|
|
}
|
|
loading.value = true
|
|
isOver.value = false
|
|
nextTick(() => getNext())
|
|
}
|
|
|
|
const showTask = (row) => {
|
|
item.value = row
|
|
showTaskDialog.value = true
|
|
}
|
|
|
|
const router = useRouter()
|
|
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 } })
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
@import '../assets/css/images-wall.styl';
|
|
@import '../assets/css/custom-scroll.styl';
|
|
</style>
|