houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <div class="square-container">
3     <!-- TODO @fan:style 建议换成 unocss -->
4     <!-- TODO @fan:Search 可以换成 Icon 组件么? -->
5     <el-input
6       v-model="queryParams.prompt"
7       style="width: 100%; margin-bottom: 20px"
8       size="large"
9       placeholder="请输入要搜索的内容"
10       :suffix-icon="Search"
11       @keyup.enter="handleQuery"
12     />
13     <div class="gallery">
14       <!-- TODO @fan:这个图片的风格,要不和 ImageCard.vue 界面一致?(只有卡片,没有操作);因为看着更有相框的感觉~~~ -->
15       <div v-for="item in list" :key="item.id" class="gallery-item">
16         <img :src="item.picUrl" class="img" />
17       </div>
18     </div>
19     <!-- TODO @fan:缺少翻页 -->
20     <!-- 分页 -->
21     <Pagination
22       :total="total"
23       v-model:page="queryParams.pageNo"
24       v-model:limit="queryParams.pageSize"
25       @pagination="getList"
26     />
27   </div>
28 </template>
29 <script setup lang="ts">
30 import { ImageApi, ImageVO } from '@/api/ai/image'
31 import { Search } from '@element-plus/icons-vue'
32
33 // TODO @fan:加个 loading 加载中的状态
34 const loading = ref(true) // 列表的加载中
35 const list = ref<ImageVO[]>([]) // 列表的数据
36 const total = ref(0) // 列表的总页数
37 const queryParams = reactive({
38   pageNo: 1,
39   pageSize: 10,
40   publicStatus: true,
41   prompt: undefined
42 })
43
44 /** 查询列表 */
45 const getList = async () => {
46   loading.value = true
47   try {
48     const data = await ImageApi.getImagePageMy(queryParams)
49     list.value = data.list
50     total.value = data.total
51   } finally {
52     loading.value = false
53   }
54 }
55
56 /** 搜索按钮操作 */
57 const handleQuery = () => {
58   queryParams.pageNo = 1
59   getList()
60 }
61
62 /** 初始化 */
63 onMounted(async () => {
64   await getList()
65 })
66 </script>
67 <style scoped lang="scss">
68 .square-container {
69   background-color: #fff;
70   padding: 20px;
71
72   .gallery {
73     display: grid;
74     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
75     gap: 10px;
76     //max-width: 1000px;
77     background-color: #fff;
78     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
79   }
80
81   .gallery-item {
82     position: relative;
83     overflow: hidden;
84     background: #f0f0f0;
85     cursor: pointer;
86     transition: transform 0.3s;
87   }
88
89   .gallery-item img {
90     width: 100%;
91     height: auto;
92     display: block;
93     transition: transform 0.3s;
94   }
95
96   .gallery-item:hover img {
97     transform: scale(1.1);
98   }
99
100   .gallery-item:hover {
101     transform: scale(1.05);
102   }
103 }
104 </style>