From 4542337f4f8e5c73261a2bb1d55ee5f17fd9f495 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Sun, 26 May 2024 21:50:59 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20Image=20Task=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/ImageTaskCard.vue | 72 ++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/views/ai/image/ImageTaskCard.vue

diff --git a/src/views/ai/image/ImageTaskCard.vue b/src/views/ai/image/ImageTaskCard.vue
new file mode 100644
index 00000000..c5f9f11a
--- /dev/null
+++ b/src/views/ai/image/ImageTaskCard.vue
@@ -0,0 +1,72 @@
+
+<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" @click="handlerBtnClick('download', imageDetail)" />
+        <el-button class="btn" text :icon="Delete" @click="handlerBtnClick('delete', imageDetail)" />
+        <el-button class="btn" text :icon="More" @click="handlerBtnClick('more', imageDetail)" />
+      </div>
+    </div>
+    <div class="image-wrapper">
+      <img class="image" :src="imageDetail?.imageUrl" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import {Delete, Download, More} from "@element-plus/icons-vue";
+import {ImageDetailVO} from "@/api/ai/image";
+import {PropType} from "vue";
+
+const props = defineProps({
+  imageDetail: {
+    type: Object as PropType<ImageDetailVO>,
+    require: true
+  }
+})
+
+/**
+ * 按钮 - 点击事件
+ */
+const handlerBtnClick = async (type, imageDetail: ImageDetailVO ) => {
+  emits('handlerBtnClick', type, imageDetail)
+}
+
+// emits
+const emits = defineEmits(['handlerBtnClick'])
+
+</script>
+
+<style scoped lang="scss">
+
+.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>