ai_uniapp_v2/pages/tool/anime-history.vue

<template>
  <view class="page">
    <scroll-view
      class="scroll"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="refresh"
      @scrolltolower="loadMore"
    >
      <view class="wrap">
        <view class="studio-head">
          <view>
            <text class="eyebrow">AVATAR GALLERY</text>
            <text class="page-title">我的动漫头像</text>
            <text class="page-desc">保存每一次生成结果，完成后可查看大图、下载或继续创作。</text>
          </view>
          <view class="create-btn" @click="goCreate">生成</view>
        </view>

        <view class="stats-row">
          <view class="stat-card">
            <text class="stat-num">{{ total || list.length }}</text>
            <text class="stat-label">全部作品</text>
          </view>
          <view class="stat-card">
            <text class="stat-num">{{ pendingCount }}</text>
            <text class="stat-label">生成中</text>
          </view>
          <view class="stat-card">
            <text class="stat-num">{{ successCount }}</text>
            <text class="stat-label">已完成</text>
          </view>
        </view>

        <view v-if="list.length" class="gallery">
          <view v-for="item in list" :key="item.chat_open_id" class="work-card">
            <view class="poster" @click="openItem(item)">
              <image v-if="item.content && Number(item.is_suc) > -1" class="poster-img" :src="item.content" mode="aspectFill" />
              <view v-else class="poster-empty"></view>

              <view class="status-chip" :class="statusClass(item)">
                {{ statusText(item) }}
              </view>

              <view v-if="Number(item.is_suc) === 0" class="progress-mask">
                <view class="spinner"></view>
                <text>正在生成</text>
              </view>
              <view v-if="Number(item.is_suc) < 0" class="failed-mask">
                <text>{{ item.content || '生成失败' }}</text>
              </view>
            </view>

            <view class="card-info">
              <view class="time-line">
                <text>{{ formatTime(item.add_time) }}</text>
                <view class="delete-btn" @click.stop="deleteItem(item)">删除</view>
              </view>
            </view>
          </view>
        </view>

        <view v-if="!list.length && !loading" class="empty-state">
          <view class="empty-preview">
            <view class="empty-face"></view>
          </view>
          <text class="empty-title">还没有动漫头像</text>
          <text class="empty-desc">上传一张清晰自拍，生成第一张专属头像。</text>
          <view class="empty-action" @click="goCreate">去生成</view>
        </view>

        <view v-if="loading" class="loading">{{ list.length ? '加载更多...' : '加载中...' }}</view>
        <view v-if="list.length && list.length >= total && !loading" class="end-text">已经到底了</view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import { toolApi } from '@/api/index.js'
import { useApp } from '@/utils/useApp.js'

const { toast } = useApp()
const list = ref([])
const page = ref(1)
const total = ref(0)
const loading = ref(false)
const refreshing = ref(false)
let timer = 0

const pendingCount = computed(() => list.value.filter((item) => Number(item.is_suc) === 0).length)
const successCount = computed(() => list.value.filter((item) => Number(item.is_suc) > 0).length)

onLoad(() => refresh())
onUnload(() => clearTimeout(timer))

function formatTime(value) {
  if (!value) return ''
  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
}

async function fetchList(reset = false) {
  if (loading.value) return
  loading.value = true
  try {
    const res = await toolApi.getAnimeList({
      page_no: page.value,
      page_size: 10,
      role: 2
    })
    const rows = res.list || []
    total.value = Number((res.data && res.data.total) || rows.length)
    list.value = reset ? rows : list.value.concat(rows)
    scheduleRefresh()
  } catch (e) {
    toast(e.msg || '历史记录加载失败')
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

function scheduleRefresh() {
  clearTimeout(timer)
  if (list.value.some((item) => Number(item.is_suc) === 0)) {
    timer = setTimeout(() => refreshSilent(), 2500)
  }
}

function refresh() {
  refreshing.value = true
  refreshSilent()
}

function refreshSilent() {
  page.value = 1
  fetchList(true)
}

function loadMore() {
  if (loading.value) return
  if (list.value.length >= total.value) return
  page.value += 1
  fetchList()
}

function openItem(item) {
  if (!item.content || Number(item.is_suc) < 0) return
  uni.navigateTo({ url: `/pages/tool/work-detail?id=${item.chat_open_id}_0&from=anime` })
}

function statusText(item) {
  if (Number(item.is_suc) === 0) return '生成中'
  if (Number(item.is_suc) < 0) return '失败'
  return '完成'
}

function statusClass(item) {
  if (Number(item.is_suc) === 0) return 'pending'
  if (Number(item.is_suc) < 0) return 'failed'
  return 'done'
}

function goCreate() {
  const delta = getPageStackDelta('pages/tool/anime-avatar')
  if (delta > 0) {
    uni.navigateBack({ delta })
    return
  }
  uni.navigateTo({ url: '/pages/tool/anime-avatar' })
}

function getPageStackDelta(routeName) {
  const pages = getCurrentPages()
  const index = pages.findIndex((page) => page.route === routeName)
  return index >= 0 ? pages.length - 1 - index : -1
}

function deleteItem(item) {
  uni.showModal({
    title: '温馨提示',
    content: '是否确认删除该内容？',
    confirmText: '确认删除',
    success: async (res) => {
      if (!res.confirm) return
      try {
        await toolApi.deleteAnime({ chat_open_id: item.chat_open_id })
        toast('删除成功')
        refresh()
      } catch (e) {
        toast(e.msg || '删除失败')
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.page,
.scroll {
  height: 100vh;
  background: #f6f8fc;
}

.wrap {
  padding: 24rpx 28rpx 70rpx;
}

.studio-head {
  padding: 30rpx;
  border-radius: 26rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
}

.studio-head > view:first-child {
  flex: 1;
  min-width: 0;
}

.eyebrow {
  display: block;
  color: #1f8cff;
  font-size: 20rpx;
  font-weight: 800;
  letter-spacing: 0;
}

.page-title {
  display: block;
  margin-top: 10rpx;
  color: #172033;
  font-size: 40rpx;
  line-height: 1.2;
  font-weight: 900;
}

.page-desc {
  display: block;
  margin-top: 12rpx;
  color: #64748b;
  font-size: 24rpx;
  line-height: 1.5;
}

.create-btn {
  width: 112rpx;
  height: 68rpx;
  border-radius: 999rpx;
  color: #ffffff;
  background: #1f8cff;
  font-size: 26rpx;
  line-height: 68rpx;
  text-align: center;
  font-weight: 800;
  box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.22);
  flex-shrink: 0;
}

.stats-row {
  margin-top: 18rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14rpx;
}

.stat-card {
  padding: 20rpx 10rpx;
  border-radius: 20rpx;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 8rpx 20rpx rgba(31, 52, 86, 0.04);
}

.stat-num {
  display: block;
  color: #172033;
  font-size: 34rpx;
  line-height: 1;
  font-weight: 900;
}

.stat-label {
  display: block;
  margin-top: 10rpx;
  color: #7c8a9b;
  font-size: 22rpx;
}

.gallery {
  margin-top: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22rpx;
}

.work-card {
  border-radius: 24rpx;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.06);
}

.poster {
  position: relative;
  width: 100%;
  height: 440rpx;
  background: #dfe7f2;
  overflow: hidden;
}

.poster-img,
.poster-empty {
  width: 100%;
  height: 100%;
}

.poster-empty {
  background: linear-gradient(135deg, #eef4fb, #dbe6f4);
}

.status-chip {
  position: absolute;
  left: 14rpx;
  top: 14rpx;
  height: 42rpx;
  padding: 0 16rpx;
  border-radius: 999rpx;
  color: #ffffff;
  font-size: 22rpx;
  line-height: 42rpx;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8rpx);
}

.status-chip.done {
  background: rgba(31, 140, 255, 0.9);
}

.status-chip.pending {
  background: rgba(249, 115, 22, 0.92);
}

.status-chip.failed {
  background: rgba(239, 68, 68, 0.9);
}

.progress-mask,
.failed-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  color: #ffffff;
  font-size: 26rpx;
  text-align: center;
  background: rgba(15, 23, 42, 0.52);
}

.failed-mask {
  background: rgba(127, 29, 29, 0.72);
}

.spinner {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 18rpx;
  border: 6rpx solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.card-info {
  padding: 18rpx;
}

.time-line {
  display: flex;
  align-items: center;
  gap: 12rpx;
  color: #64748b;
  font-size: 22rpx;
}

.time-line text {
  flex: 1;
  min-width: 0;
}

.delete-btn {
  width: 74rpx;
  height: 44rpx;
  border-radius: 999rpx;
  color: #ef4444;
  background: #fff1f2;
  font-size: 22rpx;
  line-height: 44rpx;
  text-align: center;
  flex-shrink: 0;
}

.empty-state {
  margin-top: 86rpx;
  padding: 56rpx 34rpx;
  border-radius: 28rpx;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
}

.empty-preview {
  width: 150rpx;
  height: 200rpx;
  border-radius: 32rpx;
  background: linear-gradient(135deg, #edf6ff, #fff4f0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-face {
  width: 76rpx;
  height: 76rpx;
  border-radius: 50%;
  border: 6rpx solid #1f8cff;
  position: relative;
}

.empty-face::after {
  content: '';
  position: absolute;
  left: 16rpx;
  right: 16rpx;
  bottom: 18rpx;
  height: 6rpx;
  border-radius: 999rpx;
  background: #1f8cff;
}

.empty-title {
  margin-top: 28rpx;
  color: #172033;
  font-size: 32rpx;
  font-weight: 900;
}

.empty-desc {
  margin-top: 12rpx;
  color: #64748b;
  font-size: 25rpx;
  line-height: 1.5;
}

.empty-action {
  margin-top: 28rpx;
  width: 220rpx;
  height: 72rpx;
  border-radius: 999rpx;
  color: #ffffff;
  background: #1f8cff;
  font-size: 28rpx;
  line-height: 72rpx;
  font-weight: 800;
}

.loading,
.end-text {
  padding: 46rpx 0 20rpx;
  color: #7c8a9b;
  font-size: 24rpx;
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>