【增加】画廊增加 search

Author: cherishsince

src/api/ai/image/index.ts

@@ -57,7 +57,7 @@ export const ImageApi = {
     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 })
   },
   // 获取【我的】绘图记录

src/views/ai/image/square/index.vue

@@ -1,23 +1,39 @@
 <template>
-  <div class="gallery">
-    <div v-for="item in publicList" :key="item" class="gallery-item">
-      <img :src="item.picUrl" class="img"/>
+  <div class="square-container">
+    <el-input
+      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>
 </template>
 <script setup lang="ts">
 import { ImageApi, ImageVO, ImageMidjourneyButtonsVO } from '@/api/ai/image'
+import {Search} from "@element-plus/icons-vue";
 
 /** 属性 */
 const pageNo = ref<number>(1)
 const pageSize = ref<number>(20)
 const publicList = ref<ImageVO[]>([])
+const searchText = ref<string>('')
 
 /** 获取数据 */
 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[];
-  console.log('publicList.value', publicList.value)
+}
+
+/** 搜索 */
+const handleSearch = async () => {
+  await getListData();
 }
 
 onMounted(async () => {
@@ -26,37 +42,43 @@ onMounted(async () => {
 </script>
 <style scoped lang="scss">
 
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 10px;
-  //max-width: 1000px;
-  padding: 20px;
+.square-container {
   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 {
-  width: 100%;
-  height: auto;
-  display: block;
-  transition: transform 0.3s;
-}
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    //max-width: 1000px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  }
 
-.gallery-item:hover img {
-  transform: scale(1.1);
-}
+  .gallery-item {
+    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>