|
@@ -1,99 +1,237 @@
|
|
|
<template>
|
|
|
- <div class="model-item-container">
|
|
|
- <br />
|
|
|
- <el-form label-width="100px" :model="form" label-position="top">
|
|
|
- <el-form-item label="请输入主题/话题/问题">
|
|
|
- <el-input
|
|
|
- v-model="form.title"
|
|
|
- type="textarea"
|
|
|
- :rows="5"
|
|
|
- maxlength="1000"
|
|
|
- show-word-limit
|
|
|
- placeholder="如:列出5种吃了不长胖的食物"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <el-form>
|
|
|
- <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>
|
|
|
-
|
|
|
- <div class="btn_group">
|
|
|
- <el-button type="primary" style="width: 100%">生成内容</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 class="model-item-container">
|
|
|
+ <br />
|
|
|
+ <el-form label-width="100px" :model="form" label-position="top">
|
|
|
+ <el-form-item label="请输入主题/话题/问题">
|
|
|
+ <el-input
|
|
|
+ v-model="form.title"
|
|
|
+ type="textarea"
|
|
|
+ :rows="5"
|
|
|
+ maxlength="1000"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="如:列出5种吃了不长胖的食物"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form>
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <div class="btn_group">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="width: 100%"
|
|
|
+ @click="create"
|
|
|
+ :loading="load"
|
|
|
+ >生成内容</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>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script setup>
|
|
|
- import { ref } from 'vue';
|
|
|
- import {image_base64} from "./data.js"
|
|
|
- // import {commit} from "@/api/aleditor.js";
|
|
|
- const form = ref({
|
|
|
- title: '',
|
|
|
- num: 1
|
|
|
+
|
|
|
+ <template v-if="form.list.length">
|
|
|
+ <div class="item" v-for="(item, i) in form.list" :key="i">
|
|
|
+ <div class="content" v-text="item.text"></div>
|
|
|
+ <div class="btn_div">
|
|
|
+ <el-tooltip 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 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>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, defineEmits } from 'vue';
|
|
|
+import { image_base64 } from './data.js';
|
|
|
+import { advertisement, generate_pc_get } from '@/api/aleditor.js';
|
|
|
+const emits = defineEmits(['closeType', 'setHtml', 'getImage']);
|
|
|
+const load = ref(false);
|
|
|
+const form = ref({
|
|
|
+ title: '',
|
|
|
+ num: 1,
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+const inputText = text => {
|
|
|
+ emits('setHtml', text);
|
|
|
+};
|
|
|
+
|
|
|
+const create = () => {
|
|
|
+ load.value = true;
|
|
|
+ const p = {
|
|
|
+ count: form.value.num,
|
|
|
+ data: {
|
|
|
+ content: form.value.title,
|
|
|
+ occupation: form.value.career,
|
|
|
+ type: form.value.type,
|
|
|
+ },
|
|
|
+ generateType: 24,
|
|
|
+ length:
|
|
|
+ form.value.long === 'short'
|
|
|
+ ? 200
|
|
|
+ : form.value.long === 'default'
|
|
|
+ ? 400
|
|
|
+ : 800,
|
|
|
+ noblock: true,
|
|
|
+ query_type: 'dialog',
|
|
|
+ };
|
|
|
+ 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);
|
|
|
});
|
|
|
- </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%;
|
|
|
- }
|
|
|
-
|
|
|
- .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 {
|
|
|
- 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;
|
|
|
- }
|
|
|
- </style>
|
|
|
-
|
|
|
+};
|
|
|
+
|
|
|
+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;
|
|
|
+ });
|
|
|
+};
|
|
|
+</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%;
|
|
|
+}
|
|
|
+
|
|
|
+.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 {
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.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>
|