From 9c8d10b70c58735fcf5f82e08f8a2cadc956cd17 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Sun, 26 May 2024 20:59:42 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91AI=20image?=
 =?UTF-8?q?=20=E5=A2=9E=E5=8A=A0=E5=9B=BE=E7=89=87=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=EF=BC=8C=E6=8A=BD=E5=B1=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/ImageDetailDrawer.vue | 42 ++++++++++++++++++++++++
 src/views/ai/image/ImageTask.vue         | 29 ++++++++++++++--
 2 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ai/image/ImageDetailDrawer.vue

diff --git a/src/views/ai/image/ImageDetailDrawer.vue b/src/views/ai/image/ImageDetailDrawer.vue
new file mode 100644
index 00000000..a4e234e8
--- /dev/null
+++ b/src/views/ai/image/ImageDetailDrawer.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-drawer
+    v-model="showDrawer"
+    title="图片详细"
+    @close="handlerDrawerClose"
+  >
+    <span>Hi, there!</span>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+
+const showDrawer = ref<boolean>(false) // 是否显示
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    require: true,
+    default: false
+  }
+})
+
+
+/**
+ * 抽屉 - close
+ */
+const handlerDrawerClose = async () => {
+  emits('handlerDrawerClose')
+}
+
+// watch
+const { show } = toRefs(props)
+watch(show, async (newValue, oldValue) => {
+  showDrawer.value = newValue as boolean
+})
+//
+const emits = defineEmits(['handlerDrawerClose'])
+
+</script>
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ai/image/ImageTask.vue b/src/views/ai/image/ImageTask.vue
index f4c4b9b2..58046f84 100644
--- a/src/views/ai/image/ImageTask.vue
+++ b/src/views/ai/image/ImageTask.vue
@@ -11,19 +11,42 @@
         <div>
           <el-button class="btn" text :icon="Download" />
           <el-button class="btn" text :icon="Delete" />
-          <el-button class="btn" text :icon="More" />
+          <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>
-
   </el-card>
+  <!-- 图片 detail 抽屉 -->
+  <ImageDetailDrawer
+    :show="showTaskDetail"
+    @handler-drawer-close="handlerDrawerClose"
+  />
 </template>
 <script setup lang="ts">
-
+import ImageDetailDrawer from './ImageDetailDrawer.vue'
 import {Delete, Download, More} from "@element-plus/icons-vue";
+import {bool} from "vue-types";
+
+const showTaskDetail = ref<bool>(false) // 是否显示 task 详情
+
+/**
+ * 图片人物 - detail
+ */
+const handlerTaskDetail = async () => {
+  showTaskDetail.value = !showTaskDetail.value
+}
+
+/**
+ * 抽屉 - 关闭
+ */
+const handlerDrawerClose = async () => {
+  showTaskDetail.value = false
+}
+
+
 </script>
 
 <style scoped lang="scss">