【增加】AI image 增加图片详情，抽屉

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">