1

src/pages/Image/components/DescribeDIalog.vue

+<template>
+  <t-dialog
+    v-model:visible="visible"
+    attach="body"
+    placement="center"
+    :footer="false"
+    class="custom-img-dialog"
+  >
+    <template #header>
+      <div>请耐心等待文字生成</div>
+    </template>
+    <template #body>
+      <div class="custom-dialog-body">
+        <div class="content narrow-scrollbar">{{ text }}</div>
+        <Animation v-show="dialogloading"></Animation>
+      </div>
+    </template>
+  </t-dialog>
+</template>
+
+<script lang="ts" setup>
+import {
+  Dialog as TDialog,
+  Button as TButton,
+  Loading as TLoading,
+} from 'tdesign-vue-next';
+import { PropType, ref, watch } from 'vue';
+import Animation from '@/components/Animation.vue';
+const props = defineProps({
+  modelValue: Boolean,
+  list: Array as PropType<any[]>,
+  dialogloading: Boolean,
+  text: String,
+});
+const emit = defineEmits(['update:modelValue', 'SubmitSplit']);
+const visible = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (v) => {
+    visible.value = v;
+  }
+);
+
+watch(
+  () => visible.value,
+  (v) => {
+    emit('update:modelValue', v);
+  }
+);
+</script>
+
+<style lang="less">
+.custom-img-dialog {
+  .t-dialog {
+    width: 50vw;
+    max-width: 50vw;
+    .t-dialog__body {
+      overflow: hidden;
+    }
+  }
+  .custom-dialog-body {
+    height: 500px;
+    box-sizing: border-box;
+    .content {
+      height: 450px;
+      overflow-y: auto;
+      .img-box {
+        display: flex;
+        justify-content: space-between;
+        .img {
+          width: 300px;
+          height: 300px;
+        }
+        .split_img_loading {
+          width: 300px;
+          height: 300px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .btns {
+        margin: 20px 0;
+        & > :not(:nth-child(1)) {
+          margin-left: 12px;
+        }
+      }
+    }
+    .custom-loading-box {
+      position: relative !important;
+      width: auto !important;
+      height: 50px !important;
+    }
+  }
+}
+</style>

src/pages/Image/components/UploadImg/index.less

-.custom-real-upload {
-  margin-top: 30px;
-  background: #ffffff;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
-  border-radius: 10px;
-  height: 330px;
-  padding: 20px 46px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  .real-upload-close-icon {
-    position: absolute;
-    right: 12px;
-    top: 12px;
-    cursor: pointer;
-  }
-  .real-upload-content {
-    margin-top: 6px;
-    display: flex;
-    justify-content: space-between;
-    .custom-real-upload-component {
-      width: 360px;
-      height: 200px;
-      border: 1px dashed #000000;
-      .t-upload {
-        width: 100%;
-        height: 100%;
-        .custom-upload-click-box {
-          border-radius: 8px;
-          width: 360px;
-          height: 200px;
-          display: flex;
-          justify-content: space-evenly;
-          align-items: center;
-          flex-direction: column;
-          .title {
-            font-weight: 600;
-            font-size: 18px;
-            color: black;
-          }
-          .title2 {
-            font-weight: 400;
-            font-size: 15px;
-            color: #8b8b8b;
-          }
-          .custom-chose-file {
-            background: #fd1753;
-            border-radius: 8px;
-            border: none;
-            width: 200px;
-            height: 46px;
-            --ripple-color: none !important;
-          }
-        }
-        .t-upload__dragger {
-          padding: 0;
-          border: none;
-          width: 360px;
-          height: 200px;
-        }
-      }
-      .custom-uploading-stauts {
+.custom-real-upload-component {
+  width: 360px;
+  height: 200px;
+  border: 1px dashed #000000;
+  .real-upload-box {
+    width: 100%;
+    height: 100%;
+    .t-upload {
+      width: 100%;
+      height: 100%;
+      .custom-upload-click-box {
+        border-radius: 8px;
+        width: 360px;
+        height: 200px;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         flex-direction: column;
-        width: 100%;
-        height: 100%;
-        .uploading-title {
+        .title {
+          font-weight: 600;
+          font-size: 18px;
+          color: black;
+        }
+        .title2 {
           font-weight: 400;
           font-size: 15px;
           color: #8b8b8b;
         }
+        .custom-chose-file {
+          background: #fd1753;
+          border-radius: 8px;
+          border: none;
+          width: 200px;
+          height: 46px;
+          --ripple-color: none !important;
+        }
       }
-      .custom-UploadSuccess-stauts {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
+      .t-upload__dragger {
+        padding: 0;
+        border: none;
+        width: 360px;
+        height: 200px;
+      }
+    }
+    .custom-uploading-stauts {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      .uploading-title {
+        font-weight: 400;
+        font-size: 15px;
+        color: #8b8b8b;
+      }
+    }
+    .custom-UploadSuccess-stauts {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      .UploadSuccess-img {
         width: 100%;
         height: 100%;
-        .UploadSuccess-img {
-          width: 100%;
-          height: 100%;
-        }
-        .title1 {
-          font-weight: 600;
-          font-size: 18px;
-          color: #000000;
-        }
+      }
+      .title1 {
+        font-weight: 600;
+        font-size: 18px;
+        color: #000000;
       }
     }
   }
-  .custom-real-upload-footer {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    .t-button {
-      width: 164px;
-      height: 46px;
-      border: none;
-      --ripple-color: none !important;
-      border-radius: 8px;
-      font-size: 18px;
-    }
-    .submit {
-      background: #ebebeb;
-      color: #9a9a9a;
-      cursor: not-allowed;
-    }
-    .active {
-      background: #fd1753;
-      color: #ffffff;
-      cursor: pointer;
-    }
-    .reset-button {
-      border: 1px solid #dbdbdb;
-      background: white;
-      color: #000000;
-      margin-left: 12px;
-    }
+}
+
+.custom-real-upload-footer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  .t-button {
+    width: 164px;
+    height: 46px;
+    border: none;
+    --ripple-color: none !important;
+    border-radius: 8px;
+    font-size: 18px;
+  }
+  .submit {
+    background: #ebebeb;
+    color: #9a9a9a;
+    cursor: not-allowed;
+  }
+  .active {
+    background: #fd1753;
+    color: #ffffff;
+    cursor: pointer;
+  }
+  .reset-button {
+    border: 1px solid #dbdbdb;
+    background: white;
+    color: #000000;
+    margin-left: 12px;
   }
 }
 .label {

src/pages/Image/components/UploadImg/index.tsx

@@ -232,15 +232,8 @@ export default defineComponent({
       }
     };
     return () => (
-      <div>
-        <div class="label">原图</div>
-        <div class="custom-real-upload">
-          <div class="real-upload-content">
-            <div class="custom-real-upload-component">
-              {currentUploadStatus()}
-            </div>
-          </div>
-        </div>
+      <div class="custom-real-upload-component">
+        <div class="real-upload-box">{currentUploadStatus()}</div>
       </div>
     );
   },

src/pages/Image/index.less

@@ -11,4 +11,34 @@
       background: #fd1753;
     }
   }
+  .custom-mid-select {
+    width: 200px;
+    margin: 20px 0;
+  }
+  .custom-real-upload {
+    margin-top: 30px;
+    background: #ffffff;
+    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    padding: 20px 46px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    .real-upload-close-icon {
+      position: absolute;
+      right: 12px;
+      top: 12px;
+      cursor: pointer;
+    }
+    .real-upload-content {
+      margin-top: 6px;
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: 12px;
+      & > :not(:first-child) {
+        margin-left: 20px;
+      }
+    }
+  }
 }

src/pages/Image/index.tsx

@@ -3,11 +3,15 @@ import './index.less';
 import EnterKeywords from './components/EnterKeywords';
 import { useStore } from 'vuex';
 import UploadImg from './components/UploadImg';
-import { Button as TButton } from 'tdesign-vue-next';
+import {
+  Button as TButton,
+  Select as TSelect,
+  Option as TOption,
+  MessagePlugin,
+} from 'tdesign-vue-next';
 import { Tasks } from '@/utils/api/Task';
 import { filterRepeatTimestamp } from '@/utils/tool';
 import {
-  useSubmitTask,
   IntervalCheckTask,
   SubmitSplitImgTask,
   get_split_img_status,
@@ -16,6 +20,8 @@ import CustomDialog from './components/Dialog/index.vue';
 import Animation from '@/components/Animation.vue';
 import ConfirmDIalog from './components/confimDialog.vue';
 import { new_task_submit } from '@/utils/api/wf_task';
+import DescribeDIalog from './components/DescribeDIalog.vue';
+import { show_message } from '@/utils/tdesign_tool';
 // wf
 export default defineComponent({
   setup(props, ctx) {
@@ -25,22 +31,51 @@ export default defineComponent({
     const task_id = ref();
     // 确认弹窗
     const confirmDialogVisible = ref(false);
+    // 图片生成弹窗
+    const DialogVisible = ref(false);
+    // 文本生成弹窗
+    const DescribeDIalogVisible = ref(false);
     const prompt_num = ref();
     const task_result_list = reactive<{
       list: any[];
     }>({
       list: [],
     });
+    // 三种任务
+    const MidjourneyTaskType = [
+      {
+        // 两种都可以
+        label: 'imagine',
+        value: 1,
+      },
+      // 多图上传--
+      {
+        label: 'blend',
+        value: 2,
+      },
+      // describe生成描述
+      {
+        label: 'describe',
+        value: 3,
+      },
+    ];
+    // select当前的值
+    const SelectValue = ref(1);
     // 关键词
     const keywords = ref('');
     const loading = ref(false);
     const dialogloading = ref(true);
-    // 图片链接
+    // 图片链接--单图
     const Img_url = ref('');
-    // 弹窗状态
-    const DialogVisible = ref(false);
-    // 测试
-    const test_num = ref(1);
+    // 多图上传列表
+    const ImgList = reactive({
+      list: [
+        {
+          img_url: '',
+        },
+      ],
+    });
+
     onMounted(() => {
       store.dispatch('user/AdminConfig');
     });
@@ -72,6 +107,12 @@ export default defineComponent({
         console.log(e);
       }
     };
+    // select的值变化
+    const SelectChange = (value: any) => {
+      ImgList.list = [{ img_url: '' }];
+      Img_url.value = '';
+      keywords.value = '';
+    };
     // 获取返回的切割图片
     const get_split_img = async (prompt_id: number) => {
       try {
@@ -122,8 +163,34 @@ export default defineComponent({
       }
     };
     const submit_before = () => {
-      if (!keywords.value) {
-        return;
+      if (SelectValue.value == 1) {
+        if (!keywords.value) {
+          show_message('请填写关键词');
+          return;
+        }
+      } else if (SelectValue.value == 2) {
+        // 多图上传-至少两张
+        if (ImgList.list.length < 2) {
+          show_message('至少上传两张图片');
+          return;
+        }
+        //
+        let list: any[] = [];
+        ImgList.list.forEach((item: any) => {
+          if (item.img_url) {
+            list.push(item.img_url);
+          }
+        });
+        if (list.length < 2) {
+          show_message('至少上传两张图片');
+          return;
+        }
+      } else if (SelectValue.value == 3) {
+        // 生成文字描述
+        if (!ImgList.list[0].img_url) {
+          show_message('请上传图片');
+          return;
+        }
       }
       // 打开的确认弹窗
       confirmDialogVisible.value = true;
@@ -136,15 +203,36 @@ export default defineComponent({
       }
       submit();
     };
+    // 增加一个上传图片box
+    const add_img_box = () => {
+      if (SelectValue.value == 2 && ImgList.list.length < 5) {
+        ImgList.list.push({
+          img_url: '',
+        });
+      }
+    };
     // 提交任务
     const submit = async () => {
       // prompt_img需要传数组
+      // 公共数据
       let params: any = {
-        type: Img_url.value ? Tasks.img_to_img : Tasks.text_to_img,
-        prompt: keywords.value,
-        prompt_img: [Img_url.value],
         prompt_num: 5,
+        command_type: SelectValue.value,
       };
+      if (SelectValue.value == 1) {
+        params.type = Img_url.value ? Tasks.img_to_img : Tasks.text_to_img;
+        params.prompt = keywords.value;
+        params.prompt_img = [ImgList.list[0].img_url];
+      } else if (SelectValue.value == 2) {
+        let list: any[] = [];
+        ImgList.list.forEach((item: any) => {
+          list.push(item.img_url);
+        });
+        params.prompt_img = list;
+      } else if (SelectValue.value == 3) {
+        params.prompt_img = [ImgList.list[0].img_url];
+      }
+
       try {
         loading.value = true;
         // 请求
@@ -152,12 +240,20 @@ export default defineComponent({
         if (res.code == 0) {
           task_id.value = res.data.task_id;
           prompt_num.value = res.data.prompt_num;
-          // 打开弹窗
-          DialogVisible.value = true;
-          // 清空已返回的图片
-          task_result_list.list = [];
-          // 开启轮询
-          openInterval();
+          if (SelectValue.value == 1) {
+            // img任务
+            // 打开弹窗
+            DialogVisible.value = true;
+            // 清空已返回的图片
+            task_result_list.list = [];
+            // 开启轮询
+            openInterval();
+          } else if (SelectValue.value == 2) {
+            // blend 多图上传
+          } else if (SelectValue.value == 3) {
+            // 生成描述--打开生成文本弹窗
+            DescribeDIalogVisible.value = true;
+          }
         }
         loading.value = false;
       } catch (e) {
@@ -186,12 +282,44 @@ export default defineComponent({
     return () => (
       <div class="img-to-img-page">
         <div class="tips">提示：可不上传图片</div>
-        <EnterKeywords v-model={keywords.value}></EnterKeywords>
-        <UploadImg v-model={Img_url.value}></UploadImg>
-        <TButton
-          onClick={submit_before}
-          class={['submit-button', !keywords.value ? 'disabled' : '']}
+        <TSelect
+          class="custom-mid-select"
+          v-model={SelectValue.value}
+          placeholder="请选择"
+          onChange={SelectChange}
         >
+          {MidjourneyTaskType.map((item: any) => (
+            <TOption
+              key={item.value}
+              value={item.value}
+              label={item.label}
+            ></TOption>
+          ))}
+        </TSelect>
+        {/* 1才输入文字 */}
+        {SelectValue.value == 1 ? (
+          <EnterKeywords v-model={keywords.value}></EnterKeywords>
+        ) : (
+          ''
+        )}
+        <div class="label">原图</div>
+        <div class="custom-real-upload">
+          <div class="real-upload-content">
+            {ImgList.list.map((item: any) => (
+              <UploadImg v-model={item.img_url}></UploadImg>
+            ))}
+          </div>
+        </div>
+        {SelectValue.value == 2 ? (
+          <div>
+            <TButton class="submit-button" onClick={add_img_box}>
+              添加上传图片box
+            </TButton>
+          </div>
+        ) : (
+          ''
+        )}
+        <TButton onClick={submit_before} class={['submit-button']}>
           提交
         </TButton>
         <CustomDialog
@@ -205,6 +333,11 @@ export default defineComponent({
           v-model={confirmDialogVisible.value}
           onSubmit={CanSubmit}
         ></ConfirmDIalog>
+        {/* 文本dialog */}
+        <DescribeDIalog
+          v-model={DescribeDIalogVisible.value}
+          text=""
+        ></DescribeDIalog>
       </div>
     );
   },

src/pages/Image_stable/components/Dialog/index.vue

@@ -12,7 +12,7 @@
     <template #body>
       <div class="custom-dialog-body">
         <div class="content narrow-scrollbar">
-          <div v-for="(item, index) in list" :key="item.id">
+          <div v-for="item in list" :key="item.id">
             <div class="img-box">
               <img class="img" :src="item.img" alt="" />
               <template v-if="item.split_img">

src/utils/tdesign_tool.ts

+import { MessagePlugin } from 'tdesign-vue-next';
+
+export const show_message = (
+  value: string,
+  type: string = 'warning',
+  close: boolean = true
+) => {
+  if (close) {
+    MessagePlugin.closeAll();
+  }
+  if (type == 'warning') {
+    MessagePlugin.warning(value);
+  } else if (type == 'success') {
+    MessagePlugin.success(value);
+  } else if (type == 'info') {
+    MessagePlugin.info(value);
+  } else if (type == 'error') {
+    MessagePlugin.error(value);
+  }
+  // 类型报错-所以用上面的方法
+  // MessagePlugin[type](value);
+};

tsconfig.node.json

@@ -3,7 +3,8 @@
     "composite": true,
     "module": "ESNext",
     "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "suppressImplicitAnyIndexErrors": true
   },
   "include": ["vite.config.ts"]
 }