From c06dd8e273564e6f4c4cd9e582decf15b275271e Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Sun, 26 May 2024 21:51:42 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91Image=20Tas?=
 =?UTF-8?q?k=20=E4=BD=BF=E7=94=A8=20card=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/ImageTask.vue | 66 +++++++++++---------------------
 1 file changed, 22 insertions(+), 44 deletions(-)

diff --git a/src/views/ai/image/ImageTask.vue b/src/views/ai/image/ImageTask.vue
index 58046f84..a612a85d 100644
--- a/src/views/ai/image/ImageTask.vue
+++ b/src/views/ai/image/ImageTask.vue
@@ -2,22 +2,7 @@
 <template>
   <el-card class="dr-task" body-class="task-card" shadow="never">
     <template #header>绘画任务</template>
-
-    <el-card body-class="" class="image-card" >
-      <div class="image-operation">
-        <div>
-          <el-button type="" text bg >已完成</el-button>
-        </div>
-        <div>
-          <el-button class="btn" text :icon="Download" />
-          <el-button class="btn" text :icon="Delete" />
-          <el-button class="btn" text :icon="More" @click="handlerTaskDetail" />
-        </div>
-      </div>
-      <div class="image-wrapper">
-        <img class="image" src="https://img.bigpt8.com/uploads/thumbnail/20240509/b7802797e5f709f35a451a1591d4d495.png" />
-      </div>
-    </el-card>
+    <ImageTaskCard v-for="image in imageList" :key="image" :image-detail="image" />
   </el-card>
   <!-- 图片 detail 抽屉 -->
   <ImageDetailDrawer
@@ -26,10 +11,13 @@
   />
 </template>
 <script setup lang="ts">
+import {ImageApi, ImageDetailVO} from '@/api/ai/image';
 import ImageDetailDrawer from './ImageDetailDrawer.vue'
+import ImageTaskCard from './ImageTaskCard.vue'
 import {Delete, Download, More} from "@element-plus/icons-vue";
 import {bool} from "vue-types";
 
+const imageList = ref<ImageDetailVO[]>([]) // image 列表
 const showTaskDetail = ref<bool>(false) // 是否显示 task 详情
 
 /**
@@ -40,13 +28,30 @@ const handlerTaskDetail = async () => {
 }
 
 /**
- * 抽屉 - 关闭
+ * 抽屉 - close
  */
 const handlerDrawerClose = async () => {
   showTaskDetail.value = false
 }
 
+/**
+ * 任务 - detail
+ */
+const handlerDrawerOpen = async () => {
+  showTaskDetail.value = true
+}
 
+/**
+ * 获取 - image 列表
+ */
+const getImageList = async () => {
+  imageList.value = await ImageApi.getImageList({pageNo: 1, pageSize: 20})
+}
+
+//
+onMounted(async () => {
+  await getImageList()
+})
 </script>
 
 <style scoped lang="scss">
@@ -60,32 +65,5 @@ const handlerDrawerClose = async () => {
   }
 }
 
-.image-card {
-  width: 360px;
-  border-radius: 10px;
-
-  .image-operation {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .btn {
-      //border: 1px solid red;
-      padding: 10px;
-      margin: 0;
-    }
-  }
-
-  .image-wrapper {
-    overflow: hidden;
-    margin-top: 20px;
-
-    .image {
-      width: 100%;
-      border-radius: 10px;
-    }
-  }
-}
-
 
 </style>