aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

generate交互更新

Browse Source
This commit is contained in:
X1627315083
2024-05-28 16:00:26 +08:00
parent c4952ff2c5 f98ea23128
commit ff9b2ea1a1
26 changed files with 1536 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/component/HomePage/PrintboardUpload.vue
View File

@@ -6,25 +6,32 @@
<div class="upload_header_item">
<div class="switch_type_list">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('PrintboardUpload.Upload') }}</span>
<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('PrintboardUpload.Library') }}</span>
<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_2_1"
:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span>{{ $t('PrintboardUpload.Generate') }}</span>
<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel">{{ scene.label }} <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
<ul v-show="openMenu">
<li v-for="item,index in sceneList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.label }}</li>
</ul>
</div>
</div>
</div>
@@ -85,7 +92,7 @@
</div>
</div>
<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
@@ -105,8 +112,17 @@
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_border">
<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
<div class="input_box_btnBox">
<input class="search_input"
@click="inputFocus()"
@input="ifMaximumLength"
@keydown.enter="getgenerate"
:maxlength='inputShow?0:9999'
:class="{forbidden:generateCheckbox}"
:readonly="generateCheckbox"
:placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
</div>
<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
</textarea>
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
@@ -125,6 +141,13 @@
</div>
<span ref="inputShowText"></span>
</div>
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
<div class="search_keyword_center_left">
<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
</div>
</div>
</div>
<!-- <div>
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
@@ -166,7 +189,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent,h,ref,computed,inject,createVNode, nextTick } from 'vue'
import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
@@ -182,6 +205,7 @@ import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import axios from 'axios'
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
export default defineComponent({
@@ -190,6 +214,7 @@ export default defineComponent({
Material,
Generate,
scaleImage,
generalMenu,
},
setup(){
let store:any =useStore()
@@ -224,6 +249,24 @@ export default defineComponent({
level2Type:'',
designType:''
})
let workspace = ref({})
let sceneList = ref([
{
label:'pattern',
value:'pattern'
},{
label:'slogan',
value:'slogan'
},{
label:'logo',
value:'logo'
},
])
let scene = ref({
label:'pattern',
value:'pattern'
})
let openMenu = ref(false)
return {
fileList,
printImgList,
@@ -246,6 +289,10 @@ export default defineComponent({
remGenerateTime,
useGenerate,
isUseGenerate,
workspace,
sceneList,
scene,
openMenu,
}
},
computed:{
@@ -295,7 +342,7 @@ export default defineComponent({
}),
source:axios.CancelToken.source(),
isTextarea:false,
isInputFocus:false,
}
},
mounted(){
@@ -305,6 +352,9 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl()
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
if(this.driver__.driver){
this.captionGeneration = 'Elegant floral print for high-fashion attire'
}else{
@@ -669,6 +719,13 @@ export default defineComponent({
if(this.generateCheckbox) return
this.isTextarea = !this.isTextarea
},
cliSetKeyword(value:any){
let str = ''
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
str = ','
}
this.captionGeneration += str + value
},
ifMaximumLength(){
this.inputTime = setTimeout(()=>{
if(this.captionGeneration?.split(/\s+/).length > 250){
@@ -679,6 +736,18 @@ export default defineComponent({
}
},500)
},
inputFocus(){
if(this.isInputFocus) return
if(this.generateCheckbox) return
this.isInputFocus = true
let setDomCli = ()=>{
this.isInputFocus = false
document.removeEventListener('click',setDomCli)
}
setTimeout(()=>{
document.addEventListener('click',setDomCli)
},200)
},
getgenerate(){
clearInterval(this.remGenerateTime)
this.remGenerate = false
@@ -967,6 +1036,23 @@ export default defineComponent({
}
// }
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
console.log(data);
let generate:any = this.$refs.Generate
generate.scene = data
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
}
@@ -986,7 +1072,7 @@ export default defineComponent({
display: flex;
align-items: center;
position: relative;
z-index: 11;
.switch_type_item {
display: flex;
align-items: center;
@@ -1025,12 +1111,34 @@ export default defineComponent({
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-top: auto;
>div{
width: 14rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 14rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.printboard_body{