【增加】画廊增加 search

src/api/ai/image/index.ts

@@ -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 })
   },
   },
   // 获取【我的】绘图记录
   // 获取【我的】绘图记录

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

 <template>
 <template>
+  <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 class="gallery">
       <div v-for="item in publicList" :key="item" class="gallery-item">
       <div v-for="item in publicList" :key="item" class="gallery-item">
         <img :src="item.picUrl" class="img"/>
         <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 {
+  background-color: #fff;
+  padding: 20px;
+
+
+  .gallery {
     display: grid;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 10px;
     gap: 10px;
     //max-width: 1000px;
     //max-width: 1000px;
-  padding: 20px;
     background-color: #fff;
     background-color: #fff;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
-}
+  }
 
 
-.gallery-item {
+  .gallery-item {
     position: relative;
     position: relative;
     overflow: hidden;
     overflow: hidden;
     background: #f0f0f0;
     background: #f0f0f0;
     cursor: pointer;
     cursor: pointer;
     transition: transform 0.3s;
     transition: transform 0.3s;
-}
+  }
 
 
-.gallery-item img {
+  .gallery-item img {
     width: 100%;
     width: 100%;
     height: auto;
     height: auto;
     display: block;
     display: block;
     transition: transform 0.3s;
     transition: transform 0.3s;
-}
+  }
 
 
-.gallery-item:hover img {
+  .gallery-item:hover img {
     transform: scale(1.1);
     transform: scale(1.1);
-}
+  }
 
 
-.gallery-item:hover {
+  .gallery-item:hover {
     transform: scale(1.05);
     transform: scale(1.05);
+  }
+
 }
 }
 
 
 </style>
 </style>