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

src/api/AigcGeneratorPhotoTaskListApi.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+// @ts-ignore
+import request from '@common/ajax';
+import type { Response } from './types';
+
+export interface GeneratorPhotoTask {
+  pageNum: number;
+  pageSize: number;
+  taskStatus: string;
+}
+
+export interface GeneratorPhotoTaskListItem {
+  records: PhotoTaskRecordsItem[];
+}
+
+export interface PhotoTaskRecordsItem {
+  sceneName: string;
+  createTime: string;
+  taskStatus: string;
+  generatorPhoto: string;
+}
+
+export const generatorPhotoTaskList = (params: GeneratorPhotoTask) => {
+  return request<Response<GeneratorPhotoTaskListItem[]>>({
+    url: '/aigc/generatorPhotoTaskList',
+    method: 'post',
+    params,
+  });
+};

src/api/index.ts

@@ -2,4 +2,5 @@
 // @ts-ignore
 export * from './types';
 
-export * from './AigcSceneListApi';
+export * from './AigcSceneListApi';
+export * from './AigcGeneratorPhotoTaskListApi';

src/common/ajax.js

@@ -19,7 +19,7 @@ const instance = axios.create({
 // 添加拦截器
 instance.interceptors.request.use((config) => {
   // const token = Session.getToken()
-  const token = '0ng6bSau9IwBXmyfzgMCARAMdq_fRWg6D07Y9mmjIyZNGVUrmjCjw2s5_7UcYJNB2WBLEESPROkprEEjfD6HP4Lk-W-rPLISjcJPZCLCFJyEZyCoOHN-71m0C7kG7qqz'
+  const token = 'H7rzcCtsvPqwc0ecDnBT9mlhOqHsWDyS6nXkRjnd1oAgOQqlEhsCy4OZPQ8YyVBj57pmNpwSXJYcd6Ox4YB-W1pHr4aTM9_d6nYJ3OrbRB9f0J7kP9FbbviN609nGO0m'
   config.headers['Authorization'] = `Bearer ${token}`
 
   // get请求映射params参数
@@ -32,6 +32,12 @@ instance.interceptors.request.use((config) => {
     config.url = url
   }
 
+  // post/put/patch 请求将 params 映射到 body（data）
+  if ((config.method === 'post' || config.method === 'put' || config.method === 'patch') && config.params) {
+    config.data = config.params
+    config.params = {}
+  }
+
   return config
 })
 

src/views/history/index.vue

@@ -5,135 +5,79 @@
 
     <!-- 列表 -->
     <div class="list">
-      <div v-for="item in list" :key="item.id" class="card">
+      <div v-for="(item, index) in list" :key="`${item.name}-${index}`" class="card">
-        <!-- 生成中 -->
+        <!-- 排队中 -->
-        <template v-if="item.status === 'processing'">
+        <template v-if="item.status == 0">
-          <div class="left processing-box">
+          <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[] = [
+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 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;

src/views/home/index.vue

@@ -6,7 +6,7 @@
 
     <div class="gradient-overlay"></div>
 
-    <TopNavBar title="AI生成合影" color="white" :showHistory="true" @back="onBack" @history="onHistory" />
+    <TopNavBar title="" color="white" :showHistory="true" @back="onBack" @history="onHistory" />
 
     <div class="content-layer">
       <div class="style-tabs">