|
@@ -16,10 +16,10 @@
|
|
|
<el-form>
|
|
|
<el-form-item label="文章长度">
|
|
|
<div style="text-align: right; width: 100%">
|
|
|
- <el-button plain :class="{ act: form.long === 'small' }">
|
|
|
+ <el-button plain :class="{ act: form.long === 'short' }">
|
|
|
短
|
|
|
</el-button>
|
|
|
- <el-button plain :class="{ act: form.long === 'middle' }">
|
|
|
+ <el-button plain :class="{ act: form.long === 'default' }">
|
|
|
中
|
|
|
</el-button>
|
|
|
<el-button plain :class="{ act: form.long === 'long' }">
|
|
@@ -30,28 +30,177 @@
|
|
|
</el-form>
|
|
|
|
|
|
<div class="btn_group">
|
|
|
- <el-button type="primary" style="width: 100%;">下一步</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="width: 100%"
|
|
|
+ @click="createContent"
|
|
|
+ :loading="load"
|
|
|
+ >生成内容</el-button
|
|
|
+ >
|
|
|
<div class="bottom-content-safe-tip">
|
|
|
- <img
|
|
|
- :src="image_base64.tanhao"
|
|
|
- class="content-safe-tip-icon"
|
|
|
- />
|
|
|
+ <img :src="image_base64.tanhao" class="content-safe-tip-icon" />
|
|
|
<div class="content-safe-tip-text">
|
|
|
声明:内容为概率模型生成,可能会产生不正确的信息,不代表我司的观点和立场
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <template v-if="form.list.length">
|
|
|
+ <el-pagination
|
|
|
+ :page-size="form.count"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="form.list.length"
|
|
|
+ :current-page="form.page"
|
|
|
+ />
|
|
|
+ <div class="item" v-for="(item, i) in form.list[form.page - 1]" :key="i">
|
|
|
+ <div class="content" v-text="item.text"></div>
|
|
|
+ <div class="btn_div">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="左侧导入"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-icon
|
|
|
+ @click="() => inputText(item.text)"
|
|
|
+ style="
|
|
|
+ left: 50;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ cursor: pointer;
|
|
|
+ "
|
|
|
+ color="#cacaca"
|
|
|
+ ><DArrowLeft
|
|
|
+ /></el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="btn_div">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="复制"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-icon
|
|
|
+ style="
|
|
|
+ left: 50;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ cursor: pointer;
|
|
|
+ "
|
|
|
+ color="#cacaca"
|
|
|
+ ><CopyDocument
|
|
|
+ /></el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center">
|
|
|
+ <el-button @click="refresh" type="primary" :icon="Refresh" link
|
|
|
+ >换一批</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
-import {image_base64} from "./data.js"
|
|
|
-// import {commit} from "@/api/aleditor.js";
|
|
|
+import { ref, defineEmits } from 'vue';
|
|
|
+import { image_base64 } from './data.js';
|
|
|
+import { advertisement, generate_pc_get } from '@/api/aleditor.js';
|
|
|
+import { Refresh } from '@element-plus/icons-vue';
|
|
|
+const emits = defineEmits(['closeType', 'setHtml', 'getImage']);
|
|
|
const form = ref({
|
|
|
title: '',
|
|
|
- long: 'small',
|
|
|
+ long: 'short',
|
|
|
+ list: [],
|
|
|
+ page: 1,
|
|
|
+ count: 5,
|
|
|
});
|
|
|
+const load = ref(false);
|
|
|
+
|
|
|
+const createContent = () => {
|
|
|
+ if (!form.value.title) return;
|
|
|
+ const p = {
|
|
|
+ count: form.value.count,
|
|
|
+ data: { title: form.value.title, prev: '', next: '' },
|
|
|
+ generateType: 1,
|
|
|
+ length: form.value.long,
|
|
|
+ noblock: true,
|
|
|
+ query_type: 'slogan',
|
|
|
+ };
|
|
|
+ load.value = true;
|
|
|
+ form.value.page = 1;
|
|
|
+ advertisement({
|
|
|
+ data: p,
|
|
|
+ noload: true,
|
|
|
+ })
|
|
|
+ .then(r => {
|
|
|
+ if (r.errCode !== 0) return (load.value = false);
|
|
|
+ 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 => {
|
|
|
+ load.value = false;
|
|
|
+ if (res.errCode !== 0 && res.data.status === 'RUNNING') {
|
|
|
+ let t = setTimeout(() => {
|
|
|
+ get(p);
|
|
|
+ clearTimeout(t);
|
|
|
+ }, 200);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const list = res.data.result.content;
|
|
|
+ const l = [];
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ const v = list[i];
|
|
|
+ l.push({
|
|
|
+ text: v,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ form.value.list.push(l);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ load.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const inputText = text => {
|
|
|
+ emits('setHtml', text);
|
|
|
+};
|
|
|
+
|
|
|
+const refresh = () => {
|
|
|
+ if (!form.value.title) return;
|
|
|
+ const p = {
|
|
|
+ count: form.value.count,
|
|
|
+ data: { title: form.value.title, prev: '', next: '' },
|
|
|
+ generateType: 1,
|
|
|
+ length: form.value.long,
|
|
|
+ noblock: true,
|
|
|
+ query_type: 'slogan',
|
|
|
+ };
|
|
|
+ load.value = true;
|
|
|
+ advertisement({
|
|
|
+ data: p,
|
|
|
+ noload: true,
|
|
|
+ })
|
|
|
+ .then(r => {
|
|
|
+ if (r.errCode !== 0) return (load.value = false);
|
|
|
+ p.req = { doc_id: r.data.doc_id };
|
|
|
+ get(p);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ load.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@@ -103,4 +252,42 @@ const form = ref({
|
|
|
line-height: 15px;
|
|
|
color: #cacaca;
|
|
|
}
|
|
|
+
|
|
|
+.item {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 45px;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ text-align: left;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px 10px 10px 0;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -ms-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ outline: none;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: justify;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.hover_class,
|
|
|
+.item:hover {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-bottom: 1px solid #f8f8f8;
|
|
|
+}
|
|
|
+
|
|
|
+.btn_div {
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
</style>
|