合并画布代码

This commit is contained in:
X1627315083
2025-06-18 11:05:23 +08:00
parent 903c0ebdf5
commit 9c7fae36eb
118 changed files with 23633 additions and 8201 deletions

View File

@@ -11,7 +11,7 @@
<p>New Project</p>
</div>
<div class="navList marginT2">
<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value}">
<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value,history:item.value == 'history'}">
<div class="titleBox" @click="setOpenType(item.value,item.list)">
<div class="left">
@@ -32,36 +32,44 @@
</div>
</div>
<div class="detail" v-else-if="item.value == 'history'">
<div class="detailItem history" v-for="childItem,index in item.list" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
<div class="text" style="width: 100%;">
<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
</div>
<div class="type">{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
<div class="btn">
<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item.list)"></i>
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
<div class="operation" v-show="historyData.selectHistoryIndex == index">
<div class="item" @click.stop="editName(childItem)">
<i class="fi fi-rr-edit"></i>
<span>Rename</span>
</div>
<div class="item" v-if="childItem.process == 'SINGLE_DESIGN' || childItem.process == 'SERIES_DESIGN'" @click.stop="setting(childItem)">
<i class="fi fi-rr-settings-sliders"></i>
<span>Setting</span>
</div>
<div class="item" v-if="bathGenerationList.indexOf(childItem.process)>-1" @click.stop="bathGeneration(childItem)">
<i class="fi fi-rr-settings-sliders"></i>
<span>Batch Generation</span>
</div>
<div class="item" @click.stop="deleteItem(childItem)">
<i class="icon iconfont icon-shanchu operate_icon"></i>
<span>Delete</span>
<div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem">
<div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">Today</div>
<div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">Yesterday</div>
<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a wseek</div>
<div class="timeType" v-if="historyTypeItem == 'EarlierTodaylist' && item.EarlierTodaylist.length>0">Earlier</div>
<div v-for="childItem,index in item[historyTypeItem]" class="detailItem history" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
<div class="text" style="width: 100%;">
<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
</div>
<div class="type">{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
<div class="btn">
<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item[historyTypeItem])"></i>
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
<div class="operation" v-show="historyData.selectHistoryIndex == index">
<div class="item" @click.stop="editName(childItem)">
<i class="fi fi-rr-edit"></i>
<span>Rename</span>
</div>
<div class="item" v-if="childItem.process == 'SINGLE_DESIGN' || childItem.process == 'SERIES_DESIGN'" @click.stop="setting(childItem)">
<i class="fi fi-rr-settings-sliders"></i>
<span>Setting</span>
</div>
<div class="item" v-if="bathGenerationList.indexOf(childItem.process)>-1" @click.stop="bathGeneration(childItem)">
<i class="fi fi-rr-settings-sliders"></i>
<span>Batch Generation</span>
</div>
<div class="item" @click.stop="deleteItem(childItem)">
<i class="icon iconfont icon-shanchu operate_icon"></i>
<span>Delete</span>
</div>
</div>
</div>
</div>
</div>
<div v-show="!historyData.isNoData" class="material_content_list_loding">
<span class="historyPage_loading" v-show="!historyData.isShowLoading"></span>
<span v-show="historyData.isShowLoading">
@@ -217,7 +225,7 @@
You can use these features only after becoming a regular user~
</div>
<div class="router" v-else-if="!getLangIsShowMark">
<home ref="home" @setTask="setTask"></home>
<home ref="home" @setNewProject="()=>leftShow=!leftShow" @setTask="setTask"></home>
</div>
</div>
</div>
@@ -289,7 +297,7 @@ export default defineComponent({
openType:'',
openTypeChild:'',
isLanguage:false,
openTypeList:openTypeList(t),
openTypeList:computed(()=>openTypeList(t)),
projectSetting:null,
historyData:{
isNoData:false,
@@ -297,10 +305,14 @@ export default defineComponent({
isNull:false,
searchCollectionName:'',
historyTextarea:'',
historyList:[],
updateTimeType:['Todaylist','Yesterdaylist','WithinAWeeklist','EarlierTodaylist'],
selectHistoryIndex:-1,
page:1,
size:10,
isToday:false,
isYesterday:false,
isWithinAWeek:false,
isEarlier:false,
},
bathGenerationList:["poseTransfer","SERIES_DESIGN","toProduct","relight"]
})
@@ -323,6 +335,7 @@ export default defineComponent({
homeMainData.openType = ''
homeMainData.openTypeChild = ''
}
if(query.create == 'true')settingGetHistory()
})
},
{ immediate: true } // 立即触发一次以处理初始参数
@@ -450,11 +463,11 @@ export default defineComponent({
homeMainData.openType = ''
}else {
homeMainData.openType = type
if(type == 'history'){
if(list.length == 0){
// if(type == 'history'){
// if(list.length == 0){
}
}
// }
// }
}
}
let setPorfolioDom = ()=>{
@@ -501,11 +514,31 @@ export default defineComponent({
}
const settingGetHistory = ()=>{
homeMainData.historyData.page = 1
homeMainData.openTypeList.history.list = []
homeMainData.openTypeList.history.Todaylist = []
homeMainData.openTypeList.history.Yesterdaylist = []
homeMainData.openTypeList.history.WithinAWeeklist = []
homeMainData.openTypeList.history.EarlierTodaylist = []
homeMainData.historyData.isShowLoading = false
homeMainData.historyData.isNoData = false
}
provide('settingGetHistory',settingGetHistory)
const categorizeDate = (inputDate) => {
const now = new Date();
const date = new Date(inputDate);
// 计算时间差(毫秒)
const diffTime = now - date;
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
// 判断逻辑
if ((diffDays === -1 || diffDays === 0) && date.getDate() === now.getDate()) {
return "Today";
} else if (diffDays === 1 || (diffDays === 0 && date.getDate() !== now.getDate())) {
return "Yesterday";
} else if (diffDays <= 7) {
return "WithinAWeek";
} else {
return "Earlier";
}
}
const getHistory = ()=>{
if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
homeMainData.historyData.isShowLoading = true
@@ -528,8 +561,12 @@ export default defineComponent({
homeMainData.historyData.isNull = false
}
if (rv.content.length > 0) {
rv.content.forEach((item)=>{
let str = categorizeDate(item.updateTime) + 'list'
homeMainData.openTypeList.history[str].push(item)
})
homeMainData.historyData.isNull = false
homeMainData.openTypeList.history.list.push(...rv.content)
// homeMainData.openTypeList.history.list.push(...rv.content)
} else {
homeMainData.historyData.isNoData = true
}
@@ -571,9 +608,14 @@ export default defineComponent({
}
const editName = (item)=>{
homeMainData.historyData.selectHistoryIndex = -1
homeMainData.openTypeList.history.list.forEach((item)=>{
item.editName = false
})
for (const key in homeMainData.openTypeList.history) {
let list = ['EarlierTodaylist','Todaylist','WithinAWeeklist','Yesterdaylist']
if(list.indexOf(key) == -1)continue
homeMainData.openTypeList.history[key].forEach((item)=>{
item.editName = false
})
}
item.editName = true
homeMainData.historyData.historyTextarea = item.name
}
@@ -939,6 +981,9 @@ export default defineComponent({
// padding: 1.2rem;
max-height: 5rem;
border-radius: 2rem;
&.history{
flex: 1;
}
> .titleBox{
padding: 1.2rem;
display: flex;
@@ -982,10 +1027,18 @@ export default defineComponent({
> .detail{
position: relative;
height: 100%;
min-height: 10rem;
> img{
width: 100%;
}
> .detailItem{
.timeType{
font-size: 1.6rem;
color: #52525b;
font-weight: 400;
margin-top: 1.2rem;
margin-bottom: .8rem;
}
.detailItem{
cursor: pointer;
padding: 1.2rem 1.1rem 1.2rem 2.2rem;
font-size: 1.4rem;
@@ -1119,7 +1172,7 @@ export default defineComponent({
}
}
> .detailItem:last-child{
.detailItem:last-child{
margin-bottom: 0;
}
> .material_content_list_loding{
@@ -1165,7 +1218,7 @@ export default defineComponent({
}
> .detailBox{
> .detail{
> .detailItem{
.detailItem{
padding: .8rem;
> svg{
margin-right: 2.5rem;

View File

@@ -398,9 +398,9 @@
>
</a-upload>
</i>
<div :title="$t('Generate.style')">
<!-- <div :title="$t('Generate.style')">
<generalMenu v-if="printModelList" class="printModel" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
</div>
</div> -->
</div>
<textarea
@@ -412,30 +412,35 @@
@click.stop=""
v-model="captionGeneration"
></textarea>
<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
<div class="generage_btn started_btn" style="padding: 1.5rem 2rem;">
<div @click.stop="getgenerate">
<span v-if="
selectCode == 'Moodboard' ||
(selectCode == 'Printboard' && scene?.value == 'Pattern') ||
(selectCode == 'Sketchboard' && scene?.value == 'generate')">{{ speedData.label }}</span>
<span v-else>{{ $t('LibraryPage.Generate') }}</span>
<div class="generage_btn_box">
<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
<div class="generage_btn started_btn">
<div @click.stop="getgenerate" style="display: flex;">
<i v-if="
selectCode == 'Moodboard' ||
(selectCode == 'Printboard' && scene?.value == 'Pattern') ||
(selectCode == 'Sketchboard')" class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;"></i>
<span v-else>{{ $t('LibraryPage.Generate') }}</span>
</div>
<div class="icon iconfont icon-xiala" v-show="
selectCode == 'Moodboard' ||
(selectCode == 'Printboard' && scene?.value == 'Pattern') ||
(selectCode == 'Sketchboard')" :class="{active:speedState}" @click.stop="openSpeed"></div>
</div>
<div class="content" v-if="scene?.value != 'extract'" v-show="speedState">
<div v-for="item in speedList" :class="{active:item.value == speedData.value}" v-show="(selectCode == 'Moodboard' && item?.value != 'flux') || (selectCode == 'Sketchboard' && item?.value != 'flux') || selectCode == 'Printboard'" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
<div class="content" v-else v-show="speedState">
<div v-for="item in extractList" :class="{active:item.value == speedData.value}" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
<div class="icon iconfont icon-xiala" v-show="
selectCode == 'Moodboard' ||
(selectCode == 'Printboard' && scene?.value == 'Pattern') ||
(selectCode == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
</div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remGenerate[selectCode]" @click.stop="removeGenerate" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
<span class="inputShowText" ref="inputShowText"></span>
</div>
@@ -450,13 +455,15 @@
</div>
<div class="content_body_table scroll_style">
<div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id" :class="[img.status != 'Success'?'hideEvents':'']" v-show="img.status == 'Success'"
<div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id" :class="[img.status != 'Success'?'hideEvents':'']"
:draggable="!isGenerate[selectCode]" @dragstart="startDrag($event,index)" @dragover.prevent @drop="drop($event,index)">
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
<!-- <img v-show="img.status != 'Success'" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
<div class="img_item_hover">
<img v-if="img?.imgUrl" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
<div v-else class="loading">
<a-spin size="large" ></a-spin>
</div>
<div class="img_item_hover" v-show="img?.imgUrl">
<div class="img_operate_content left">
<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
@@ -472,7 +479,7 @@
</div>
</div>
</div>
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
<sketchCategory v-show="selectCode == 'Sketchboard' && img?.imgUrl" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
</div>
<div class="content_img_name"></div>
</div>
@@ -711,6 +718,17 @@ export default defineComponent({
value:'wx',
},
],
extractList:[
{
title:'This method may produce slight discrepancies between the extracted line art and the original image.',
label:'High',
value:'',
},{
title:'Note: The extracted line art might have minor variations from the original.',
label:'FLUX',
value:'flux',
},
],
speedState:false,
speedData:{
title:'Picture quality is average, speed is fast',
@@ -728,7 +746,12 @@ export default defineComponent({
}
const setSpeed = (item:any)=>{
speed.speedData = item
speed.speedState = false
}
watch(()=>scene,(newVal,oldVal)=>{
console.log(newVal)
})
let getSex = () =>{
sex.value = store.state.UserHabit.sex.value[0].value
getPosition()
@@ -908,6 +931,11 @@ export default defineComponent({
}else{
this.isSloganHint = ''
}
if(newVal.value == 'extract'){
this.speedData = this.extractList[0]
}else{
this.speedData = this.speedList[0]
}
}
},
'$route.query':{
@@ -1112,7 +1140,6 @@ export default defineComponent({
this.isShowMark = true
Https.axiosPost(Https.httpUrls.brandDNAPage,data).then(
(rv: any) => {
console.log(rv);
this.brandDNAList = rv.content
this.total = rv.total
this.isShowMark = false
@@ -1564,10 +1591,7 @@ export default defineComponent({
})
},
getgenerate(){
if(this.scene?.value == 'extract'){
this.imageToSketch()
return
}
this.isInputFocus = false
this.isTextarea = false
let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
@@ -1576,60 +1600,77 @@ export default defineComponent({
}
clearInterval(this.remGenerateTime[selectCodeStr])
this.remGenerate[selectCodeStr] = false
let level2Type = ''
let collectionElementId = ''
let base64 = ''
if(this.selectGenerateList?.[0]){
collectionElementId = this.selectGenerateList[0].id
if(this.selectGenerateList[0].base64){
base64 = this.selectGenerateList[0].imgUrl
let httpsUrl = Https.httpUrls.generatePrepare
let data:any
if(this.scene?.value == 'extract'){
httpsUrl = Https.httpUrls.imageToSketch
if((!this.printModel?.id && !this.printModel?.value) || !this.selectGenerateList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
data = {
"elementId": this.selectGenerateList[0].id,
gender:this.sex,
"style": this.printModel.value,
"styleImageId": this.printModel.id?this.printModel.id:''
}
}else{
let level2Type = ''
let collectionElementId = ''
let base64 = ''
if(this.selectGenerateList?.[0]){
collectionElementId = this.selectGenerateList[0].id
if(this.selectGenerateList[0].base64){
base64 = this.selectGenerateList[0].imgUrl
}
}
let sloganText = ''
let arr = ["Painting Style","Illustration Style","Real Style"]
sloganText = this.captionGeneration
if(this.selectCode == "Sketchboard"){
level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
if(this.workspace.styleName){
sloganText = `${this.workspace.styleName},${sloganText}`
}
}else if(this.selectCode == "Printboard"){
level2Type = this.scene?.value
if(level2Type == 'Slogan' && this.captionGeneration == ''){
sloganText = this.isSloganHint
}else if(level2Type == 'Pattern'){
sloganText = `${arr[this.printModel.num-1]},${sloganText}`
}
if(!base64 && level2Type == 'Slogan'){
message.info(this.t('Generate.jsContent10'));
return
}
}
data = {
generateType:'text',
designType:'collection',
collectionElementId:collectionElementId,
level1Type:selectCodeStr,
level2Type:level2Type,
userId:(this?.userDetail as any).userId,
isTestUser:this.driver__.driver?false:this.isTest,
text:sloganText,
seed:this.searchPictureSeed,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
modelName:this.speedData.value,//为1就是Print
gender:selectCodeStr == 'Sketchboard'?this.sex:'',
sloganBase64:base64,
}
this.generateLevel2[selectCodeStr] = data.level2Type
}
let sloganText = ''
let arr = ["Painting Style","Illustration Style","Real Style"]
sloganText = this.captionGeneration
if(this.selectCode == "Sketchboard"){
level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
if(this.workspace.styleName){
sloganText = `${this.workspace.styleName},${sloganText}`
}
}else if(this.selectCode == "Printboard"){
level2Type = this.scene?.value
if(level2Type == 'Slogan' && this.captionGeneration == ''){
sloganText = this.isSloganHint
}else if(level2Type == 'Pattern'){
sloganText = `${arr[this.printModel.num-1]},${sloganText}`
}
if(!base64 && level2Type == 'Slogan'){
message.info(this.t('Generate.jsContent10'));
return
}
}
let data = {
generateType:'text',
designType:'collection',
collectionElementId:collectionElementId,
level1Type:selectCodeStr,
level2Type:level2Type,
userId:(this?.userDetail as any).userId,
isTestUser:this.driver__.driver?false:this.isTest,
text:sloganText,
seed:this.searchPictureSeed,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
modelName:this.speedData.value,//为1就是Print
gender:selectCodeStr == 'Sketchboard'?this.sex:'',
sloganBase64:base64,
}
this.generateLevel2[selectCodeStr] = data.level2Type
this.isGenerate[selectCodeStr] = true
this.isTextarea = false
this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
this.remGenerate[selectCodeStr] = true
},10000)
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
// this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
// },10000)
Https.axiosPost(httpsUrl, data).then(
(rv) => {
if(this.scene?.value == 'extract'){
rv = {
uniqueId:[rv]
}
}
if(data.isTestUser){
let str:any
if(selectCodeStr == 'Moodboard'){
@@ -1648,8 +1689,12 @@ export default defineComponent({
// return
// }
}
let rvData = rv.uniqueId.map((item:any)=>{
return{taskId:item,status:''}
})
this.remGenerate[selectCodeStr] = true//出现取消按钮
this.generateList[selectCodeStr].unshift(...rvData)
this.setGenerate(selectCodeStr,rv.uniqueId)
}
).catch(res=>{
// this.isShowMark = false
@@ -1701,11 +1746,15 @@ export default defineComponent({
element.category = itemCategory?.name
}
});
// element.categoryValue = this.scene?.name
// element.category = this.scene?.value
this.generateList[str].unshift(element)
// this.generateList[str].unshift(element)
let index = this.generateList[str].findIndex((item:any)=>item.taskId == element.taskId)
this.generateList[str][index] = element
data = data.filter((item:any) => item !== element.taskId);
}else if(element.status == 'Fail' || element.status == 'Invalid'){
data = data.filter((item:any) => item !== element.taskId);
this.generateList = this.generateList.filter((item:any) => item.taskId !== element.taskId);
message.info(this.t('Generate.everyTimeEffectPoor'));
}
});
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
@@ -1750,6 +1799,9 @@ export default defineComponent({
}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
this.generateProceedList.forEach((generateProceedListItem:any)=>{
this.generateList[this.selectCode] = this.generateList[this.selectCode].filter((item:any) => generateProceedListItem.taskId!== item.taskId);
})
this.generateProceedList = []
}
).catch(res=>{
@@ -2257,7 +2309,13 @@ export default defineComponent({
// width: 100%;
// height: 100%;
}
.loading{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&:hover .img_item_hover{
// display: block;
opacity: 1;