pc_nuxt/app/pages/pic/index.vue

<template>
  <div>
    <!-- Hero -->
    <section class="border-b border-[var(--c-e8eef7)] bg-gradient-to-br from-[var(--c-ffffff)] via-[var(--c-f3f0ff)] to-[var(--c-eef6ff)]">
      <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
        <nav aria-label="面包屑" class="flex items-center gap-1.5 text-xs text-[var(--c-8a97a8)]">
          <NuxtLink to="/" class="hover:text-[var(--c-0b8cff)]">首页</NuxtLink>
          <span>/</span>
          <span class="text-[var(--c-4b5b70)]">AI 图片</span>
        </nav>

        <h1 class="mt-4 text-3xl font-extrabold text-[var(--c-172033)] sm:text-4xl">AI 图片大全</h1>
        <p class="mt-3 max-w-2xl text-sm leading-relaxed text-[var(--c-66758a)] sm:text-base">
          精选 AI 在线用户生成的作品，包含 AI 绘画、AI 动漫头像等，点击查看提示词与大图。
        </p>

        <div class="mt-6 flex flex-wrap gap-3">
          <NuxtLink
            to="/draw/anime/"
            class="inline-flex h-10 items-center gap-1.5 rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] px-5 text-sm font-bold text-white shadow-[0_10px_22px_var(--sh-11-140-255-240)] transition-opacity hover:opacity-90"
          >
            <UIcon name="i-lucide-zap" class="size-4" />
            我也要生成
          </NuxtLink>
          <NuxtLink
            to="/info"
            class="inline-flex h-10 items-center rounded-full bg-[var(--c-ffffff)] px-5 text-sm font-bold text-[var(--c-5b6b80)] shadow-sm transition-colors hover:text-[var(--c-0b8cff)]"
          >
            看 AI 资讯
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 瀑布流图片 -->
    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8 lg:py-12">
      <div v-if="pending" class="columns-2 gap-4 sm:columns-3 lg:columns-4">
        <div v-for="i in 12" :key="i" class="mb-4 h-56 animate-pulse rounded-2xl bg-[var(--c-ffffff)]" />
      </div>

      <div v-else-if="list.length" class="columns-2 gap-4 sm:columns-3 lg:columns-4">
        <NuxtLink
          v-for="item in list"
          :key="`${item.chat_open_id}_${item.img_index}`"
          :to="picUrl(item)"
          class="group mb-4 block break-inside-avoid overflow-hidden rounded-2xl bg-[var(--c-ffffff)] shadow-[0_8px_24px_var(--sh-34-68-112-60)] transition-shadow hover:shadow-[0_14px_34px_var(--sh-34-68-112-140)]"
        >
          <div class="relative overflow-hidden bg-[var(--c-eef3f8)]">
            <img
              :src="item.img"
              :alt="item.prompts || 'AI 生成图片'"
              class="w-full transition-transform duration-500 group-hover:scale-105"
              loading="lazy"
            >
          </div>
          <div v-if="item.prompts" class="p-3">
            <p class="line-clamp-2 text-xs leading-relaxed text-[var(--c-66758a)]">{{ item.prompts }}</p>
          </div>
        </NuxtLink>
      </div>

      <!-- 空态 -->
      <div v-else class="rounded-2xl bg-[var(--c-ffffff)] py-20 text-center shadow-[0_8px_28px_var(--sh-34-68-112-50)]">
        <UIcon name="i-lucide-image-off" class="mx-auto mb-4 size-12 text-[var(--c-a0aabb)]" />
        <div class="text-base font-extrabold text-[var(--c-172033)]">暂无公开作品</div>
        <div class="mt-2 text-sm text-[var(--c-8a95a6)]">成为第一个分享 AI 作品的人</div>
        <NuxtLink
          to="/draw/anime/"
          class="mt-5 inline-flex h-10 items-center rounded-full bg-[var(--c-0b8cff)] px-6 text-sm font-extrabold text-white transition-colors hover:bg-[var(--c-0a7ce0)]"
        >
          去创作
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
const { post } = useApi()

/** 详情 URL 与原站一致：/pic/{chat_open_id}_{img_index}.html */
function picUrl(item) {
  return `/pic/${item.chat_open_id}_${item.img_index || 0}.html`
}

await useLegacyAppSeo({
  appKey: 'pic',
  fallbackTitle: 'AI动漫头像图片-AI作画生成动漫头像图片大全',
  fallbackDescription: 'AI图片通常指的是利用人工智能技术生成或编辑的图片。这种技术可以应用于多个领域，根据用户的需求或偏好，AI可以生成个性化的图片，例如定制的动漫头像、表情包等。',
  fallbackKeywords: '动漫头像，AI图片，头像图片，AI动漫，AI头像',
  canonicalPath: '/pic/',
})

const { data, pending } = await useAsyncData('pic-list', () =>
  post('/art/getlist', { page_no: 1, page_size: 30 }).catch(() => ({ list: [] })))

const list = computed(() => (data.value?.list || []).filter(i => i.img))
</script>