hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-06-19 06:42:00 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

【增加】画廊增加 search

Browse Source
This commit is contained in:
cherishsince 2024-07-19 15:45:18 +08:00
parent bd643f9376
commit fcf948e781
2 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/ai/image/index.ts
View File

@ -57,7 +57,7 @@ export const ImageApi = {
return await request.get({ url: `/ai/image/my-page`, params }) return await request.get({ url: `/ai/image/my-page`, params })
}, },
// 获取公开的绘图记录 // 获取公开的绘图记录
getImagePagePublic: async (params: PageParam) => { getImagePagePublic: async (params) => {
return await request.get({ url: `/ai/image/public-page`, params }) return await request.get({ url: `/ai/image/public-page`, params })
}, },
// 获取【我的】绘图记录 // 获取【我的】绘图记录

84
src/views/ai/image/square/index.vue
View File

@ -1,23 +1,39 @@
<template> <template>
<div class="gallery"> <div class="square-container">
<div v-for="item in publicList" :key="item" class="gallery-item"> <el-input
<img :src="item.picUrl" class="img"/> v-model="searchText"
style="width: 100%;margin-bottom: 20px;"
size="large"
placeholder="请输入要搜索的内容"
:suffix-icon="Search"
@keyup.enter="handleSearch"
/>
<div class="gallery">
<div v-for="item in publicList" :key="item" class="gallery-item">
<img :src="item.picUrl" class="img"/>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ImageApi, ImageVO, ImageMidjourneyButtonsVO } from '@/api/ai/image' import { ImageApi, ImageVO, ImageMidjourneyButtonsVO } from '@/api/ai/image'
import {Search} from "@element-plus/icons-vue";
/** 属性 */ /** 属性 */
const pageNo = ref<number>(1) const pageNo = ref<number>(1)
const pageSize = ref<number>(20) const pageSize = ref<number>(20)
const publicList = ref<ImageVO[]>([]) const publicList = ref<ImageVO[]>([])
const searchText = ref<string>('')
/** 获取数据 */ /** 获取数据 */
const getListData = async () => { const getListData = async () => {
const res = await ImageApi.getImagePagePublic({pageNo: pageNo.value, pageSize: pageSize.value}); const res = await ImageApi.getImagePagePublic({pageNo: pageNo.value, pageSize: pageSize.value, prompt: searchText.value});
publicList.value = res.list as ImageVO[]; publicList.value = res.list as ImageVO[];
console.log('publicList.value', publicList.value) }
/** 搜索 */
const handleSearch = async () => {
await getListData();
} }
onMounted(async () => { onMounted(async () => {
@ -26,37 +42,43 @@ onMounted(async () => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.gallery { .square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
//max-width: 1000px;
padding: 20px;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 20px;
}
.gallery-item {
position: relative;
overflow: hidden;
background: #f0f0f0;
cursor: pointer;
transition: transform 0.3s;
}
.gallery-item img { .gallery {
width: 100%; display: grid;
height: auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
display: block; gap: 10px;
transition: transform 0.3s; //max-width: 1000px;
} background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.gallery-item:hover img { .gallery-item {
transform: scale(1.1); position: relative;
} overflow: hidden;
background: #f0f0f0;
cursor: pointer;
transition: transform 0.3s;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item:hover {
transform: scale(1.05);
}
.gallery-item:hover {
transform: scale(1.05);
} }
</style> </style>