mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-12 04:03:42 +08:00
306 lines
8.9 KiB
Vue
306 lines
8.9 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 label="mj" size="large">MidJourney</el-radio>
|
|
<el-radio label="sd" size="large">Stable Diffusion</el-radio>
|
|
<el-radio label="dall" size="large">DALL-E</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div class="waterfall" :style="{ height: listBoxHeight + 'px' }" id="waterfall-box">
|
|
<v3-waterfall
|
|
v-if="imgType === 'mj'"
|
|
id="waterfall"
|
|
:list="data['mj']"
|
|
srcKey="img_thumb"
|
|
:gap="12"
|
|
:bottomGap="-5"
|
|
:colWidth="colWidth"
|
|
:distanceToScroll="100"
|
|
:isLoading="loading"
|
|
:isOver="isOver"
|
|
@scrollReachBottom="getNext"
|
|
>
|
|
<template #default="slotProp">
|
|
<div class="list-item">
|
|
<div class="image">
|
|
<el-image
|
|
:src="slotProp.item['img_thumb']"
|
|
: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="opt">
|
|
<el-tooltip class="box-item" content="复制提示词" placement="top">
|
|
<el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
|
|
<DocumentCopy />
|
|
</el-icon>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="box-item" content="画同款" placement="top">
|
|
<i class="iconfont icon-palette-pen" @click="drawSameMj(slotProp.item)"></i>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</v3-waterfall>
|
|
|
|
<v3-waterfall
|
|
v-else-if="imgType === 'dall'"
|
|
id="waterfall"
|
|
:list="data['dall']"
|
|
srcKey="img_thumb"
|
|
:gap="12"
|
|
:bottomGap="-5"
|
|
:colWidth="colWidth"
|
|
:distanceToScroll="100"
|
|
:isLoading="loading"
|
|
:isOver="isOver"
|
|
@scrollReachBottom="getNext"
|
|
>
|
|
<template #default="slotProp">
|
|
<div class="list-item">
|
|
<div class="image">
|
|
<el-image
|
|
:src="slotProp.item['img_thumb']"
|
|
: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="opt">
|
|
<el-tooltip class="box-item" content="复制提示词" placement="top">
|
|
<el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
|
|
<DocumentCopy />
|
|
</el-icon>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</v3-waterfall>
|
|
|
|
<v3-waterfall
|
|
v-else
|
|
id="waterfall"
|
|
:list="data['sd']"
|
|
srcKey="img_thumb"
|
|
:gap="12"
|
|
:bottomGap="-5"
|
|
:colWidth="colWidth"
|
|
:distanceToScroll="100"
|
|
:isLoading="loading"
|
|
:isOver="isOver"
|
|
@scrollReachBottom="getNext"
|
|
>
|
|
<template #default="slotProp">
|
|
<div class="list-item">
|
|
<div class="image">
|
|
<el-image :src="slotProp.item['img_thumb']" 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>
|
|
</template>
|
|
</v3-waterfall>
|
|
|
|
<div class="footer" v-if="isOver">
|
|
<!-- <el-empty
|
|
:image-size="100"
|
|
:image="nodata"
|
|
description="没有更多数据了"
|
|
/> -->
|
|
<span>没有更多数据了</span>
|
|
<i class="iconfont icon-face"></i>
|
|
</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" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import nodata from "@/assets/img/no-data.png";
|
|
import { nextTick, onMounted, onUnmounted, 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";
|
|
import BackTop from "@/components/BackTop.vue";
|
|
import SdTaskView from "@/components/SdTaskView.vue";
|
|
const data = ref({
|
|
mj: [],
|
|
sd: [],
|
|
dall: [],
|
|
});
|
|
const loading = ref(true);
|
|
const isOver = ref(false);
|
|
const imgType = ref("mj"); // 图片类别
|
|
const listBoxHeight = window.innerHeight - 124;
|
|
const colWidth = ref(220);
|
|
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(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) => {
|
|
loading.value = false;
|
|
if (!res.data.items || res.data.items.length === 0) {
|
|
isOver.value = true;
|
|
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);
|
|
});
|
|
};
|
|
|
|
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>
|