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

<template>
  <div class="square-container">
    <!-- TODO @fan：style 建议换成 unocss -->
    <!-- TODO @fan：Search 可以换成 Icon 组件么？ -->
    <el-input
      v-model="queryParams.prompt"
      style="width: 100%; margin-bottom: 20px"
      size="large"
      placeholder="请输入要搜索的内容"
      :suffix-icon="Search"
      @keyup.enter="handleQuery"
      class="!w-240px"
    />
    <div class="gallery">
      <!-- TODO @fan：这个图片的风格，要不和 ImageCard.vue 界面一致？（只有卡片，没有操作）；因为看着更有相框的感觉~~~ -->
      <div v-for="item in list" :key="item.id" class="gallery-item">
        <img :src="item.picUrl" class="img" />
      </div>
    </div>
    <!-- TODO @fan：缺少翻页 -->
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup lang="ts">
import { ImageApi, ImageVO } from '@/api/ai/image'
import { Search } from '@element-plus/icons-vue'

// TODO @fan：加个 loading 加载中的状态
const loading = ref(true) // 列表的加载中
const list = ref<ImageVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  publicStatus: true,
  prompt: undefined
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ImageApi.getImagePageMy(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 初始化 */
onMounted(async () => {
  await getList()
})
</script>
<style scoped lang="scss">
.square-container {
  padding: 20px;
  background-color: #fff;

  .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 rgb(0 0 0 / 10%);
  }

  .gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #f0f0f0;
    transition: transform 0.3s;
  }

  .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s;
  }

  .gallery-item:hover img {
    transform: scale(1.1);
  }

  .gallery-item:hover {
    transform: scale(1.05);
  }
}
</style>