feat: 新增comfyui弹窗

src/components/PictureCards.vue

@@ -13,11 +13,10 @@
     <AnwserPictureResult :image_list="image_list"/>
     <AnwserPictureLoading />
     
-    <footer v-if="hasUpload">
+    <footer v-if="hasUpload" class="picture-upload-footer">
       <a-popover :popup-visible="showUpload" position="tl" @popup-visible-change="() => {
         showDeleteTooltip = false;
-      }
-        ">
+      }">
         <div :class="{ 'text-hide': showUpload }">
           <div @click="() => {
             showUpload = true;
@@ -27,8 +26,10 @@
             <img src="@/assets/document/7.svg" class="img-hover" v-if="!showUpload" />
             <img src="@/assets/document/8.svg" class="img-active" v-if="showUpload" />
           </div>
+
           <p>已选择 {{ fileList.length }} 个图片</p>
         </div>
+
         <template #content>
           <div :class="{ 'upload-wrap': true, 'upload-wrap-narrow': uploadFile }">
             <header>
@@ -128,6 +129,10 @@
           </div>
         </template>
       </a-popover>
+
+      <span class="placeholder-width-5px"></span>
+      <ComfyuiBtn />
+
       <!-- <section v-if="hasSlider">
         <p>出题随机性</p>
         <a-slider :default-value="50" :style="{ width: '100px' }" />
@@ -141,12 +146,14 @@ import { defineComponent, ref, inject, reactive } from "vue";
 
 import AnwserPictureResult from './anwser-pictures/AnwserPictureResult.vue';
 import AnwserPictureLoading from './anwser-pictures/AnwserPictureLoading.vue';
+import ComfyuiBtn from './comfyui/ComfyuiBtn.vue';
 
 export default defineComponent({
   props: ["data", "hasUpload", "hasSlider", "uploadFile", "isQuestion", "agentId", "agengtName"],
   components: {
     AnwserPictureResult,
-    AnwserPictureLoading
+    AnwserPictureLoading,
+    ComfyuiBtn
   },
   setup(props) {
     const showUpload = ref(false);
@@ -362,6 +369,17 @@ export default defineComponent({
   }
 }
 
+/**宽度占位 */
+.placeholder-width-5px{
+  display: inline-block;
+  width: 10px;
+}
+.pictures-upload-info{
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
 .upload-main {
   width: 800px;
   height: 109px;
@@ -437,6 +455,9 @@ main {
     }
   }
 
+  footer.picture-upload-footer{
+    justify-content: flex-start;
+  }
   >footer {
     display: flex;
     justify-content: space-between;

src/components/comfyui/ComfyuiBtn.vue

@@ -0,0 +1,58 @@
+<template>
+  <a-button @click="handleClick" class="comfyui-btn">
+    <img class="comfyui-logo-img" :src="logo" /> ComfyUI
+  </a-button>
+
+  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel" modal-class="comfyui-container-modal" body-class="comfyui-container-body" width="90%">
+    <template #title>
+      <img class="comfyui-logo-img" :src="logo" /> ComfyUI
+    </template>
+    
+    <iframe :src="comfyui_src" class="comfyui-iframe"></iframe>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import logo from '../../assets/images/comfyui-logo.png'
+
+const comfyui_src = 'http://192.168.20.119:8188';
+
+const visible = ref(false);
+
+const handleClick = () => {
+    visible.value = true;
+};
+const handleOk = () => {
+    visible.value = false;
+};
+const handleCancel = () => {
+    visible.value = false;
+}
+</script>
+
+<style scoped>
+.comfyui-btn{
+    border-radius: 30px;
+    color: #353535;
+}
+.comfyui-logo-img{
+    width: 22px;
+    display: inline-block;
+    margin-right: 5px;
+}
+</style>
+
+<style>
+.comfyui-container-modal{
+
+}
+.arco-modal-body.comfyui-container-body{
+    width: 100%;
+    padding: 0;
+}
+.arco-modal-body.comfyui-container-body .comfyui-iframe{
+    width: 100%;
+    height: 80vh;
+}
+</style>