mediaAll/src/view/easyDiffusion/components/listItem.vue

<template>
  <div class="listMain">
    <div style="margin: 0 0 1em 0">
      <el-button
        color="#840800"
        size="small"
        type="danger"
        :icon="Delete"
        @click="dialogVisible = true"
      >
        删除全部
      </el-button>
      <!-- <el-button
        color="rgb(75,77,81)"
        size="small"
        :icon="Download"
        @click="zipconfig.show = true"
      >
        下载图片
      </el-button> -->

      <div style="float: right">
        <!-- <el-button
          color="rgb(107,119,225)"
          size="small"
          :icon="Upload"
        ></el-button> -->
        <el-tooltip effect="dark" placement="bottom-start">
          <template #content>
            <div class="jin">
              <div class="bg" ref="jindutiao">
                <div class="jined" :style="'width:' + jindu / 2 + '%'">
                  <div class="jinart"></div>
                </div>
                <div
                  style="
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                  "
                  @mousemove="mousemove"
                  @mousedown="mousedown"
                  @mouseout="mouseout"
                  @mouseup="mouseup"
                ></div>
              </div>
              <div
                style="
                  width: 3em;
                  overflow: hidden;
                  padding-left: 0.5em;
                  border-radius: 3px;
                  display: inline-block;
                "
              >
                <input
                  type="number"
                  v-model="jindu"
                  @input="change"
                  :max="200"
                />
              </div>
              %
            </div>
          </template>
          <el-button
            color="rgb(75,77,81)"
            size="small"
            :icon="Search"
          ></el-button>
        </el-tooltip>
      </div>
    </div>
    <p v-if="!downlist.length" style="margin: 1em 0">键入提示并按下“生成图片”按钮。</p>
    <p v-if="!downlist.length" style="margin: 1em 0">如果你想引导人工智能，你可以设置一个“初始图片”。</p>
    <p v-if="!downlist.length" style="margin: 1em 0">点击“图像设置”以设置生成的图像数量。</p>
    <p v-if="!downlist.length" >享受！:)</p>
    <!-- <el-empty
      description="请选择左侧选项进行生成图片哦"
      v-if="!downlist.length"
    >
      <template #image>
        <el-icon :size="50"><WarningFilled /></el-icon>
      </template>
    </el-empty> -->
    <div class="listItem" v-for="(item, index) in downlist" :key="index">
      <div class="listHead">
        <h4 style="font-size: 14pt">
          <el-icon><Grid /></el-icon>

          <div
            class="status"
            v-if="item.statusImg"
            v-text="item.statusImg"
          ></div>

          {{ item.prompt || '' }}

          <div class="btngroup" v-if="!item.statusImg">
            <el-button
              color="rgb(75,77,81)"
              size="small"
              :icon="Tools"
              @click="() => setConfig(item)"
            >
              使用这些设置
            </el-button>
            <el-button
              color="#840800"
              size="small"
              type="danger"
              :icon="Delete"
              @click="() => removeItem(index + '')"
            >
              删除
            </el-button>
          </div>
        </h4>
        <div style="margin: 0.5em 0">
          <img
            :src="item.init_image.fileResult"
            alt=""
            style="width: 50px; display: inline-block; vertical-align: middle"
          />
          <small v-if="item.list.length" style="font-size: 10pt; color: #aaa">
            尺寸： {{ item.height }}x{{ item.width }}
          </small>
        </div>
        <div class="loading" v-if="item.statusImg"></div>
        <div class="imagelist">
          <div class="imgbg" v-for="(v, i) in item.list" :key="'son' + i">
            <el-icon
              @click="() => removeItem(index, i)"
              :size="30"
              class="close"
              ><CircleClose
            /></el-icon>
            <el-image
              :style="{ width: jindu / 2 + 'vh', height: jindu / 2 + 'vh' }"
              :src="v.image"
              :zoom-rate="1.2"
              :preview-src-list="getimgeList(item.list)"
              :initial-index="i"
              fit="cover"
            />
            <div v-if="item.list.length" class="baseText">
              {{ item.list[0].height }}x{{ item.list[0].width }}
            </div>
            <div class="topRight">
              <div
                style="
                  display: inline-block;
                  border-radius: 3px;
                  padding: 2px;
                  margin: 2px 0;
                  background-color: #00000060;
                "
              >
                种子：{{ v.seed }}
              </div>
              <div style="margin: 5px 0">
                <el-button
                  color="#202225"
                  size="small"
                  @click="() => downimg(v.image)"
                  >下载图片</el-button
                >
                <el-button
                  color="#202225"
                  size="small"
                  @click="() => downjson(v)"
                  >下载json</el-button
                >
              </div>
              <el-button
                color="#202225"
                size="small"
                @click="() => makeimg(item)"
              >
                制作相似图片
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      class="dark"
      title="清除此窗口中的所有结果和任务？"
      width="30%"
      :center="true"
    >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="clearAll">是的</el-button>
          <el-button @click="dialogVisible = false"> 取消 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog class="dark" v-model="zipconfig.show" title="下载所有图片">
      <div class="zipconfig">
        <div class="zipitem">
          <div style="line-height: 40px">
            <el-icon :size="25"><Folder /></el-icon>
          </div>
          <div style="flex: 3; text-align: left">
            <div>下载为 ZIP 文件</div>
            <small style="font-size: 12px; color: #999999">
              无需下载单个文件，而是生成一个包含所有图像的 zip 文件
            </small>
          </div>
          <div>
            <el-switch v-model="zipconfig.isZip" />
          </div>
        </div>
        <div
          class="zipitem"
          style="
            border-top: 1px solid #202225;
            border-bottom: 1px solid #202225;
          "
        >
          <div style="line-height: 40px">
            <el-icon style="background-color: #ffffff00" :size="25"
              ><Share
            /></el-icon>
          </div>
          <div style="flex: 3; text-align: left">
            <div>添加每个作业文件夹</div>
            <small style="font-size: 12px; color: #999999">
              无需下载单个文件，而是生成一个包含所有图像的 zip 文件
            </small>
          </div>
          <div>
            <el-switch v-model="zipconfig.isZip" />
          </div>
        </div>
        <div class="zipitem">
          <div style="line-height: 40px">
            <el-icon style="background-color: #ffffff00" :size="25"
              ><Operation
            /></el-icon>
          </div>
          <div style="flex: 3; text-align: left">
            <div>添加元数据文件</div>
            <small style="font-size: 12px; color: #999999">
              对于每个映像，还要下载一个 JSON
              文件，其中包含用于生成映像的所有设置
            </small>
          </div>
          <div>
            <el-switch v-model="zipconfig.isZip" />
          </div>
        </div>
      </div>
      <el-button
        type="primary"
        size="small"
        style="display: block; margin: 0 auto"
      >
        开始下载
      </el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import { Delete, Tools, Search } from '@element-plus/icons-vue';
import { ref, defineProps, defineEmits } from 'vue';
const jindutiao = ref(null);
const dialogVisible = ref(false);
const jindu = ref(50);
const emit = defineEmits(['removeItem', 'setconfig', 'makeimg']);
const props = defineProps({
  downlist: Array,
});
const change = e => {
  if (e.target.value > 200) {
    jindu.value = 200;
    return;
  }
  if (e.target.value < 10) {
    jindu.value = 10;
    return;
  }
};

const zipconfig = ref({
  isZip: true,
  iswenjian: true,
  isjson: true,
  show: false,
});

const setConfig = item => {
  emit('setconfig', item);
};

const getimgeList = list => {
  return list.map(v => v.image);
};

const removeItem = (i, index) => {
  let t = i;
  index !== undefined && (t += '-' + index);
  emit('removeItem', t);
};

let isdown = false;
const mousemove = e => {
  if (!isdown) return;
  let m = Math.ceil((e.offsetX / jindutiao.value.clientWidth) * 200);
  m < 10 && (m = 10);
  jindu.value = m;
};

const mousedown = () => {
  isdown = true;
};
const mouseup = () => {
  isdown = false;
};
const mouseout = () => {
  isdown = false;
};

const clearAll = () => {
  dialogVisible.value = false;
  for (let i = 0; i < props.downlist.length; i++) {
    emit('removeItem', i + '');
  }
};

const downimg = base => {
  let base64 = base; // imgSrc 就是base64哈
  let byteCharacters = atob(
    base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, '')
  );
  let byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  let byteArray = new Uint8Array(byteNumbers);
  let blob = new Blob([byteArray], {
    type: undefined,
  });
  let aLink = document.createElement('a');
  aLink.download = Date.now() + '.jpg'; //这里写保存时的图片名称
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};

const downjson = item => {
  const data = JSON.parse(JSON.stringify(item));
  delete data.image;
  const fileText = JSON.stringify(data, undefined, 4);
  let blob = new Blob([fileText], { type: 'text/json' });
  let e = document.createEvent('MouseEvents');
  let a = document.createElement('a');
  a.download = Date.now() + '.json';
  a.href = window.URL.createObjectURL(blob);
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
  e.initMouseEvent(
    'click',
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  a.dispatchEvent(e);
};

const makeimg = item => {
  emit('makeimg', item);
};
</script>

<style scoped>
.listMain {
  padding: 1em 0;
}
.listItem {
  border: 1px solid var(--background-color2);
  margin-bottom: 10pt;
  padding: 5pt;
  border-radius: 5pt;
  box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15),
    0 6px 20px 0 rgba(0, 0, 0, 0.15);
}

.listHead {
  line-height: 1.5em;
}

.btngroup {
  float: right;
}

.jin {
  height: 1.5em;
  width: 15em;
}

.jin .bg {
  display: inline-block;
  margin-top: 0.5em;
  border-radius: 2em;
  width: 10em;
  height: 0.6em;
  background-color: #fff;
  position: relative;
}

.jined {
  border-radius: 2em;
  height: 0.6em;
  background-color: #0011cc;
}
.jinart {
  background-color: #0011cc;
  margin-top: -0.3em;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  float: right;
}

input {
  background-color: #202225;
  outline: none;
  border: none;
  height: 1.5em;
  width: 4em;
  color: #fff;
}

.imgbg {
  position: relative;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 5px;
}

.close {
  display: none;
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 1;
  background-color: #202225;
  border-radius: 50%;
}

.imagelist {
  padding: 0 1em;
}
.baseText {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #00000060;
  font-size: 12px;
  padding: 2px;
  text-shadow: 0px 0px 4px black;
}
.topRight {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  padding: 2px;
  text-shadow: 0px 0px 4px black;
  padding: 3px;
  text-align: right;
}
.imgbg:hover .topRight,
.imgbg:hover .close,
.imgbg:hover .baseText {
  display: block;
}

.zipconfig {
  border-radius: 12px;
  font-size: 14px;
  color: #eee;
  overflow: hidden;
}
.zipitem {
  line-height: 1.5em;
  background: #2f3136;
  padding: 0 1.5em;
  display: flex;
}
.zipitem > div {
  flex: 1;
  background: #ffffff00;
  padding: 5px 0;
  text-align: center;
}
.zipitem > div * {
  background: #ffffff00;
}

.loading {
  background: repeating-linear-gradient(
    -65deg,
    #2f3136,
    #2f3136 4px,
    #292b2f 5px,
    #292b2f 9px,
    #2f3136 10px
  );
  background-size: 200% auto;
  background-position: 0 100%;
  animation: progress-anim 40s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  height: 1em;
  border-radius: 3px;
  margin: 5px 0;
}

@keyframes progress-anim {
  100% {
    background-position: -100% 0;
  }
}

.status {
  background: #805900;
  border: 1px solid #6b4b00;
  color: #fff2d3;
  display: inline-block;
  padding: 3px 5px;
  font-size: 14px;
  border-radius: 5px;
}

</style>
<style scoped>
.el-input__inner{
    color: #ffffff!important;
}
</style>