提交 | 用户 | 时间
|
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> |