【增加】Image task 增加抽屉详细信息切换

src/api/ai/image/index.ts

@@ -13,6 +13,8 @@ export interface ImageDetailVO {
   platform: string // 平台
   platform: string // 平台
   model: string // 模型
   model: string // 模型
   style: string // 图像生成的风格
   style: string // 图像生成的风格
+  createTime: string // 创建时间
+  updateTime: string // 更新事件
 }
 }
 
 
 export interface ImagePageReqVO {
 export interface ImagePageReqVO {
@@ -35,18 +37,7 @@ export const ImageApi = {
   },
   },
   // 获取 image 详细信息
   // 获取 image 详细信息
   getImageDetail: async (id: number) => {
   getImageDetail: async (id: number) => {
-    // return await request.get({ url: `/ai/api-key/page?`, params })
-    return {
-      id: 1,
-      prompt: '童话里的小屋是什么样子？',
-      status: 'todo',
-      errorMessage: 'error 未登录',
-      type: 'qinxi',
-      taskId: 111,
-      imageUrl: 'https://img.bigpt8.com/uploads/thumbnail/20240509/b7802797e5f709f35a451a1591d4d495.png',
-      platform: 'dr',
-      model: 'dr'
-    } as ImageDetailVO
+    return await request.get({ url: `/ai/image/get?id=${id}`})
   },
   },
   // dall2、dall3 调用
   // dall2、dall3 调用
   dall: async (data: ImageDallReqVO)=> {
   dall: async (data: ImageDallReqVO)=> {

src/views/ai/image/ImageTask.vue

@@ -10,7 +10,8 @@
   </el-card>
   </el-card>
   <!-- 图片 detail 抽屉 -->
   <!-- 图片 detail 抽屉 -->
   <ImageDetailDrawer
   <ImageDetailDrawer
-    :show="showTaskDetail"
+    :show="isShowImageDetail"
+    :id="showImageDetailId"
     @handler-drawer-close="handlerDrawerClose"
     @handler-drawer-close="handlerDrawerClose"
   />
   />
 </template>
 </template>
@@ -24,27 +25,21 @@ const message = useMessage() // 消息弹窗
 
 
 const imageList = ref<ImageDetailVO[]>([]) // image 列表
 const imageList = ref<ImageDetailVO[]>([]) // image 列表
 const imageListInterval = ref<any>() // image 列表定时器，刷新列表
 const imageListInterval = ref<any>() // image 列表定时器，刷新列表
-const showTaskDetail = ref<bool>(false) // 是否显示 task 详情
-
-/**
- * 图片人物 - detail
- */
-const handlerTaskDetail = async () => {
-  showTaskDetail.value = !showTaskDetail.value
-}
+const isShowImageDetail = ref<bool>(false) // 是否显示 task 详情
+const showImageDetailId = ref<number>(0) // 是否显示 task 详情
 
 
 /**
 /**
  * 抽屉 - close
  * 抽屉 - close
  */
  */
 const handlerDrawerClose = async () => {
 const handlerDrawerClose = async () => {
-  showTaskDetail.value = false
+  isShowImageDetail.value = false
 }
 }
 
 
 /**
 /**
  * 任务 - detail
  * 任务 - detail
  */
  */
 const handlerDrawerOpen = async () => {
 const handlerDrawerOpen = async () => {
-  showTaskDetail.value = true
+  isShowImageDetail.value = true
 }
 }
 
 
 /**
 /**
@@ -59,6 +54,9 @@ const getImageList = async () => {
  * 图片 - btn click
  * 图片 - btn click
  */
  */
 const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
 const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
+  // 获取 image detail id
+  showImageDetailId.value = imageDetail.id
+  // 处理不用 btn
   if (type === 'more') {
   if (type === 'more') {
     await handlerDrawerOpen()
     await handlerDrawerOpen()
   } else if (type === 'delete') {
   } else if (type === 'delete') {
@@ -67,7 +65,7 @@ const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
     await getImageList()
     await getImageList()
     await message.success("删除成功!")
     await message.success("删除成功!")
   } else if (type === 'download') {
   } else if (type === 'download') {
-    downloadImage(imageDetail.picUrl)
+    await downloadImage(imageDetail.picUrl)
   }
   }
 }
 }