neicanCMS/src/view/allMedia/AIeditor/components/inspiration.vue

<template>
  <div class="model-item-container">
    <div top="" class="model-item-part">
      <div class="progress_bar">
        <div class="bar_item" v-for="(item, i) in steps" :key="item.text + i">
          <div class="item_child">
            <div
              class="cricle c_play"
              :style="{
                backgroundColor:
                  status.step >= i
                    ? 'rgb(228, 242, 255)'
                    : 'rgb(238, 238, 238)',
                backgroundImage: getBG(i),
              }"
              v-text="status.step < i ? i + 1 : ''"
            ></div>
            <div
              class="item-child-label active"
              style="width: 50px"
              v-text="item.text"
            ></div>
          </div>
          <div class="c_right c_right_grey"></div>
        </div>
      </div>
    </div>
    <el-form
      label-width="100px"
      v-if="status.step === 0"
      :model="form"
      label-position="left"
    >
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="文章长度">
        <div style="text-align: right; width: 100%">
          <el-button
            @click="form.long = 'short'"
            plain
            :class="{ act: form.long === 'short' }"
          >
            短
          </el-button>
          <el-button
            @click="form.long = 'default'"
            plain
            :class="{ act: form.long === 'default' }"
          >
            中
          </el-button>
          <el-button
            @click="form.long = 'long'"
            plain
            :class="{ act: form.long === 'long' }"
          >
            长
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="摘要条数">
        <div style="text-align: right; width: 100%">
          <el-input-number v-model="form.num" :min="1" />
        </div>
      </el-form-item>
    </el-form>

    <el-form
      label-width="100px"
      v-if="status.step === 1"
      :model="form"
      label-position="top"
    >
      <el-form-item label="您可以选择/编辑摘要：">
        <div
          style="
            position: relative;
            margin-top: 1em;
            border: 1px solid #fff;
            border-radius: 4px;
          "
          :style="{ borderColor: form.radio === i ? '#3b82f6' : '#fff' }"
          v-for="(_, i) in form.intro_list"
          :key="i"
        >
          <el-icon
            class="select"
            :color="form.radio === i ? '#3b82f6' : '#333'"
            @click="form.radio = i"
            ><Check
          /></el-icon>
          <el-input v-model="form.intro_list[i]" type="textarea" :rows="6" />
        </div>
      </el-form-item>
    </el-form>

    <el-form
      label-width="100px"
      v-if="status.step === 2"
      :model="form"
      label-position="top"
    >
      <el-form-item
        label="您可以选择编辑/增删/重组大纲："
        style="display: block"
      >
        <div
          class="dagang"
          v-for="(item, i) in form.contents_list"
          :key="'dg' + i"
        >
          <el-icon :size="20" class="add"><CirclePlus /></el-icon>
          <el-icon :size="20" class="close"><CircleClose /></el-icon>
          <el-input
            v-model="item.title"
            style="width: 100%"
            class="no_border"
          />
        </div>
      </el-form-item>
    </el-form>

    <div class="step4" v-if="status.step === 3">
      <b>标题:</b>
      {{ form.title }}
      <p
        style="padding: 5px 10px"
        v-for="(item, i) in form.contents_list"
        :key="item + i"
        v-text="item.title"
      ></p>
    </div>

    <div class="btn_group">
      <el-button
        type="primary"
        v-if="status.step > 0"
        plain
        @click="status.step--"
      >
        上一步
      </el-button>
      <el-button type="primary" :loading="load" @click="createEdior">
        下一步
      </el-button>
      <div class="bottom-content-safe-tip">
        <img :src="image_base64.tanhao" class="content-safe-tip-icon" />
        <div class="content-safe-tip-text">
          声明：内容为概率模型生成，可能会产生不正确的信息，不代表我司的观点和立场
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import { image_base64 } from './data.js';
import { commit, generate_pc_get } from '@/api/aleditor.js';
const emits = defineEmits(['closeType', 'setHtml', 'setImage', 'setTitle']);
const steps = [
  {
    text: '标题',
  },
  {
    text: '摘要',
  },
  {
    text: '大纲',
  },
  {
    text: '内容',
  },
];
const form = ref({
  intro_list: [],
  contents_list: [],
  title: '',
  title2: '',
  num: 1,
  long: 'short',
  radio: 0,
});
const load = ref(false);
const status = ref({
  step: 0,
});

const getBG = i => {
  if (status.value.step == i) return 'url(' + image_base64.play + ')';
  if (status.value.step > i) return 'url(' + image_base64.duigou + ')';
  return undefined;
};

// 第一步
const createEdior = () => {
  load.value = true;
  let generateType = undefined;
  let query_type = undefined;
  // 如果是大纲到内容则清空intro_list
  if (status.value.step === 2) form.value.intro_list = [];
  if (form.value.intro_list.length) {
    generateType = 7;
    query_type = 'title';
  } else if (!form.value.intro_list.length && form.value.long === 'short') {
    generateType = 8;
    query_type = 'all';
  } else {
    generateType = 6;
    query_type = 'intro';
  }
  const p = {
    data: {
      title: form.value.title,
      intro: form.value.intro_list.length
        ? form.value.intro_list[form.value.radio]
        : undefined,
    },
    outLineCnt: status.value.step === 1 ? 5 : undefined,
    domain: 'paper',
    generateType,
    intro_count: form.value.long === 'short' ? undefined : form.value.num,
    length: form.value.long,
    query_type,
  };
  status.value.step++;
  commit({
    data: p,
    noload: true,
  })
    .then(r => {
      if (!r.data) return;
      p.req = {
        doc_id: r.data.doc_id,
      };
      get(p);
    })
    .catch(() => {
      load.value = false;
    });
};

const get = p => {
  generate_pc_get({
    data: p,
    noload: true,
  })
    .then(res => {
      if (res.errCode !== 0 && res.data.status === 'RUNNING') {
        let t = setTimeout(() => {
          clearTimeout(t);
          get(p);
        }, 800);
        return;
      }
      load.value = false;
      if (status.value.step === 1) {
        const intro = res.data.result.introList.length
          ? res.data.result.introList
          : [res.data.result.intro || ''];
        form.value.intro_list = intro;
      }
      if (status.value.step === 2) {
        console.log(res.data.result.contents);
        form.value.contents_list = res.data.result.contents || [];
      }
      if (status.value.step === 3) {
        emits('setTitle', res.data.result.title);
        emits('setHtml', res.data.result.intro);
        emits('closeType');
      }
    })
    .catch(() => {
      load.value = false;
    });
};
</script>

<style scoped>
.model-item-container {
  text-align: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 0;
  width: 95%;
  height: 100%;
}

.model-item-part {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  font-size: 14px;
}

.bar_item,
.progress_bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.progress_bar {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 14px;
}

.bar_item {
  width: 90px;
}

.item_child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c_right_grey {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjE1NiAxLjAxYS41NDcuNTQ3IDAgMDAwIC43NjVMNS43MzYgNy41bC01LjU4IDUuNzI0YS41NDguNTQ4IDAgMDAuMTcuODgyLjUyLjUyIDAgMDAuNTc3LS4xMTdMNi44MzcgNy45YS41NzMuNTczIDAgMDAwLS43OTlMLjkwMyAxLjAxYS41MjEuNTIxIDAgMDAtLjc0NyAweiIgZmlsbD0iI0UxRTFFMSIvPjwvc3ZnPg==);
}
.c_right {
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 29%;
  width: 25px;
  height: 100%;
}

.cricle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  line-height: 25px;
  text-align: center;
  color: #8e8e8e;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: 50%;
  margin-right: 5px;
  background-size: 40%;
}

.item-child-label.active {
  color: #4b4b4b;
}

.item-child-label {
  color: #8e8e8e;
}

.act {
  color: var(--el-button-hover-text-color);
  border-color: var(--el-button-hover-border-color);
  background-color: var(--el-button-hover-bg-color);
  outline: 0;
}

.btn_group {
  position: absolute;
  width: 100%;
  text-align: right;
  bottom: 0;
  padding-right: 1em;
}
.bottom-content-safe-tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  zoom: 0.83;
}
.bottom-content-safe-tip .content-safe-tip-icon {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}
.bottom-content-safe-tip .content-safe-tip-text {
  font-size: 12px;
  line-height: 15px;
  color: #cacaca;
}

.dagang {
  padding: 0 0 0 30px;
  position: relative;
  margin-bottom: 1em;
}

.dagang .add {
  position: absolute;
  left: 2px;
  top: 5px;
  display: none;
}
.dagang .close {
  position: absolute;
  right: 3px;
  z-index: 1;
  top: 5px;
  display: none;
}
.no_border .el-input__wrapper {
  box-shadow: none;
}

.dagang:hover .add,
.dagang:hover .close {
  display: block;
  cursor: pointer;
}

.dagang:hover .no_border .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
}
.select {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}
.step4 {
  padding: 40px;
  text-align: left;
  color: #8e8e8e;
  background-color: #f5f5f5;
  line-height: 1.1em;
}
.step4 * {
  vertical-align: middle;
}
</style>

<style>
.model-item-container .el-form-item__content {
  display: block;
}

.model-item-container .el-textarea__inner {
  padding-top: 1em;
}
</style>