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

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>

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