zoujing/aigc-frontend
1
0
Fork 0
generated from duanshuwen/webapp-vue-frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 生成图片历史记录接口对接

Browse Source
This commit is contained in:
zoujing
2026-04-05 14:54:53 +08:00
parent 84360653ed
commit 410c33ad1d
5 changed files with 122 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/views/history/index.vue
View File

@@ -5,135 +5,79 @@
<!-- 列表 -->
<div class="list">
<div v-for="item in list" :key="item.id" class="card">
<!-- 生成中 -->
<template v-if="item.status === 'processing'">
<div class="left processing-box">
生成中
<div v-for="(item, index) in list" :key="`${item.name}-${index}`" class="card">
<!-- 排队中 -->
<template v-if="item.status == 0">
<div class="left queued-box">排队中</div>
<div class="right">
<div class="name">{{ item.name }}</div>
<div class="status-text">排队中</div>
<div class="time">{{ item.time }}</div>
</div>
</template>
<!-- 生成中 -->
<template v-else-if="item.status == 1">
<div class="left processing-box">生成中</div>
<div class="right">
<div class="name">{{ item.name }}</div>
<div class="progress">
<div class="bar" :style="{ width: item.progress + '%' }"></div>
<div class="bar" :style="{ width: (item.progress || 0) + '%' }"></div>
</div>
<div class="status-text">生成中</div>
<div class="status-text">生成中 {{ item.progress ? item.progress + '%' : '' }}</div>
</div>
</template>
<!-- 已完成 -->
<template v-else>
<template v-else-if="item.status == 2">
<img class="thumb" :src="item.cover" />
<div class="right">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
<div class="status-text">已完成</div>
</div>
<button class="view-btn" @click="lookPicture(item)">查看</button>
</template>
<!-- 失败 -->
<template v-else>
<div class="left failed-box">失败</div>
<div class="right">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
<div class="status-text">生成失败</div>
</div>
</template>
</div>
<div class="tip">仅保留最近20天生成记录</div>
<div class="tip"> {{ list.length == 0 ? '暂无记录' : `仅保留最近20天生成记录` }}</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
// @ts-ignore
import TopNavBar from '../components/TopNavBar.vue';
// @ts-ignore
import { generatorPhotoTaskList } from '@api';
interface TaskItem {
id: number
name: string
status: 'processing' | 'done'
status: 0 | 1 | 2 | 3 // 0: 排队中, 1: 生成中, 2: 已完成, 3: 失败
progress?: number
cover?: string
time?: string
}
const list: TaskItem[] = [
{
id: 1,
name: '冬日情书',
status: 'processing',
progress: 40,
},
{
id: 2,
name: '无边戏水',
status: 'done',
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
time: '2026-02-23 16:27:35',
},
{
id: 3,
name: '冬日情书',
status: 'processing',
progress: 40,
},
{
id: 4,
name: '无边戏水',
status: 'done',
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
time: '2026-02-23 16:27:35',
},
{
id: 5,
name: '冬日情书',
status: 'processing',
progress: 40,
},
{
id: 6,
name: '无边戏水',
status: 'done',
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
time: '2026-02-23 16:27:35',
},
{
id: 7,
name: '冬日情书',
status: 'processing',
progress: 40,
},
{
id: 8,
name: '无边戏水',
status: 'done',
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
time: '2026-02-23 16:27:35',
},
{
id: 9,
name: '冬日情书',
status: 'processing',
progress: 40,
},
{
id: 10,
name: '无边戏水',
status: 'done',
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
time: '2026-02-23 16:27:35',
},
{
id: 11,
name: '冬日情书',
status: 'processing',
progress: 40,
},
{
id: 12,
name: '无边戏水',
status: 'done',
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
time: '2026-02-23 16:27:35',
},
]
const list: TaskItem[] = []
const router = useRouter();
@@ -147,6 +91,28 @@ const lookPicture = (item: TaskItem) => {
router.push({ path: '/prepicture', query: { data: encoded } });
}
const getTaskList = () => {
generatorPhotoTaskList({ pageNum: 1, pageSize: 20 }).then(res => {
if (res.code === 0) {
const data = res.data || [];
list.splice(0, list.length, ...data.map(item => {
let statusNum: number = item.taskStatus as unknown as number; // 先尝试直接转换为数字
return {
name: item.sceneName,
status: statusNum as 0 | 1 | 2 | 3,
progress: statusNum === 1 ? 50 : undefined, // 若后端有真实进度请替换
cover: item.generatorPhoto,
time: item.createTime,
} as TaskItem;
}));
}
});
}
onMounted(() => {
getTaskList();
});
</script>
<style scoped>
@@ -190,6 +156,32 @@ const lookPicture = (item: TaskItem) => {
font-size: 14px;
}
/* 排队中 */
.queued-box {
width: 72px;
height: 72px;
border-radius: 12px;
background: #23313e;
display: flex;
align-items: center;
justify-content: center;
color: #9fb7d0;
font-size: 14px;
}
/* 失败 */
.failed-box {
width: 72px;
height: 72px;
border-radius: 12px;
background: #3a1f22;
display: flex;
align-items: center;
justify-content: center;
color: #ff9b9b;
font-size: 14px;
}
/* 已完成缩略图 */
.thumb {
width: 72px;