From cb7c5b745808c82f6df89adf2456f70279d9cd89 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Sun, 26 May 2024 21:53:26 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91Image=20?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89=EF=BC=8C=E4=BD=BF=E7=94=A8=20Card=20?=
 =?UTF-8?q?=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/ImageDetailDrawer.vue | 66 +++++++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/views/ai/image/ImageDetailDrawer.vue b/src/views/ai/image/ImageDetailDrawer.vue
index a4e234e8..7114beda 100644
--- a/src/views/ai/image/ImageDetailDrawer.vue
+++ b/src/views/ai/image/ImageDetailDrawer.vue
@@ -4,13 +4,35 @@
     title="图片详细"
     @close="handlerDrawerClose"
   >
-    <span>Hi, there!</span>
+    <div class="item">
+      <div class="header">
+        <div>图片</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="body">
+        <ImageTaskCard :image-detail="imageDetail" />
+      </div>
+    </div>
+    <div class="item">
+      <div class="tip">提示词</div>
+      <div class="body">
+        {{imageDetail.prompt}}
+      </div>
+    </div>
   </el-drawer>
 </template>
 
 <script setup lang="ts">
+import {ImageApi, ImageDetailVO} from '@/api/ai/image';
+import ImageTaskCard from './ImageTaskCard.vue';
+import {Delete, Download, More} from "@element-plus/icons-vue";
 
 const showDrawer = ref<boolean>(false) // 是否显示
+const imageDetail = ref<ImageDetailVO>({} as ImageDetailVO) // 图片详细信息
 
 const props = defineProps({
   show: {
@@ -20,7 +42,6 @@ const props = defineProps({
   }
 })
 
-
 /**
  * 抽屉 - close
  */
@@ -28,6 +49,21 @@ const handlerDrawerClose = async () => {
   emits('handlerDrawerClose')
 }
 
+/**
+ * 获取 - 图片 detail
+ */
+const getImageDetail = async (id) => {
+  // 获取图片详细
+  imageDetail.value = await ImageApi.getImageDetail(id)
+}
+
+/**
+ * 任务 - detail
+ */
+const handlerTaskDetail = async () => {
+  showDrawer.value = true
+}
+
 // watch
 const { show } = toRefs(props)
 watch(show, async (newValue, oldValue) => {
@@ -36,7 +72,33 @@ watch(show, async (newValue, oldValue) => {
 //
 const emits = defineEmits(['handlerDrawerClose'])
 
+//
+onMounted(async () => {
+  await getImageDetail(1)
+})
 </script>
 <style scoped lang="scss">
 
+.item {
+  margin-bottom: 20px;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .body {
+    margin-top: 10px;
+    color: #616161;
+  }
+}
+
+.taskImage {
+  border-radius: 10px;
+}
+
+
 </style>