From ee5d5075b15e521afe7e4728ff0e3cd8a1116e99 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Mon, 22 Apr 2024 17:18:58 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A2=9C=E8=89=B2?= =?UTF-8?q?=E6=B8=90=E5=8F=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/HomePage/ColorboardUpload.vue | 159 +++++++++++++++----- 1 file changed, 125 insertions(+), 34 deletions(-) diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue index 942eda20..cde5ed2d 100644 --- a/src/component/HomePage/ColorboardUpload.vue +++ b/src/component/HomePage/ColorboardUpload.vue @@ -6,7 +6,7 @@
-
+
@@ -49,7 +49,24 @@
--> - +
+
+
+
线性
+
+
+
角度
+
+
+
删除
+
+
+
+
+
+
+
+
-
+
线性
-
-
角度
+
+
+
+
+
删除
-
+
-
+
@@ -164,15 +167,19 @@ export default defineComponent({ }) let driver__ = inject('driver__') let {t} = useI18n() - let gradientArr = ref([ - { - color:'rgb(244, 187, 51)', - left:'0%' - },{ - color:'rgb(39, 193, 191)', - left:'100%' - }, - ]) + let gradient = ref({ + gradientList:[ + { + color:'rgb(244, 187, 51)', + left:'0%' + },{ + color:'rgb(39, 193, 191)', + left:'100%' + }, + ], + angle:45, + selectIndex:-1, + }) return { fileList, colorList, @@ -180,7 +187,7 @@ export default defineComponent({ selectColorList, driver__, t, - gradientArr, + gradient, } }, watch:{ @@ -222,22 +229,22 @@ export default defineComponent({ return data } }, - gradient(gradientArr){ - return (gradientArr)=>{ + setGradient(gradient){ + return (gradient)=>{ let gradientStr = '' - gradientArr.sort((a, b) => { + gradient.gradientList.sort((a, b) => { let aArr = a.left.split('%')[0] let bArr = b.left.split('%')[0] return aArr - bArr; }); - gradientArr.forEach((item,index)=>{ + gradient.gradientList.forEach((item,index)=>{ let str = ',' - if(gradientArr.length == index+1)str = '' + if(gradient.gradientList.length == index+1)str = '' gradientStr += `${item.color} ${item.left}${str}` }) - console.log('linear-gradient(50deg, '+gradientStr+')'); - return 'linear-gradient(50deg, '+gradientStr+')' + console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`); + return `${gradientStr}` } } @@ -560,12 +567,12 @@ export default defineComponent({ this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色 this.store.commit('setColorboardList',colorList) }, + clickGradient(index){ + + }, mousedownGradient(event,item){ - // console.log(event.target.getBoundingClientRect()); - // console.log(event.target.style.left.split('%')); event.stopPropagation(); // isMoible() true为移动端 - // if let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth let position = { x:event.x, @@ -584,8 +591,33 @@ export default defineComponent({ window.addEventListener('mousemove',mousedownGradient) window.addEventListener('mouseup',mouseupGradient) // event.target.addEventListener('touchmove',) + }, + mousedownGradientAngle(event){ + event.stopPropagation(); + // isMoible() true为移动端 + console.log(event.target.getBoundingClientRect()); + let domPosition = event.target.getBoundingClientRect() + console.log(domPosition.x+domPosition.width/2); + let position = { + x:domPosition.x+domPosition.width/2, + y:domPosition.y+domPosition.height/2, + } + let angle = this.gradient.angle + let mousedownGradientAngle = (e)=>{ + let X = position.x + let Y = position.y + let x = e.x - X + let y = Y - e.y + angle = Math.atan2(x,y)*(180 / Math.PI) + this.gradient.angle = angle + } + let mouseupGradientAngle = ()=>{ + window.removeEventListener('mousemove',mousedownGradientAngle) + window.removeEventListener('mouseup',mouseupGradientAngle) + } + window.addEventListener('mousemove',mousedownGradientAngle) + window.addEventListener('mouseup',mouseupGradientAngle) } - } }) @@ -977,6 +1009,35 @@ export default defineComponent({ display: flex; justify-content: space-around; } + .color_setting_operate_control{ + .operate_item_angle{ + .operate_item_angle_box{ + border-radius: 50%; + width: 4rem; + height: 4rem; + border: solid 2px #39215b; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + >div{ + height: 100%; + width: 1rem; + position: relative; + pointer-events:none; + } + >div::before{ + position: absolute; + content: ""; + top: 0.2rem; + width: 1rem; + height: 1rem; + border-radius: 50%; + background: #39215b; + } + } + } + } .color_setting_operate_input{ width: 80%; // padding: 0 10%; @@ -1004,6 +1065,9 @@ export default defineComponent({ cursor: pointer; box-sizing: content-box; z-index: 2; + &.active{ + border: .3rem solid; + } } .color_setting_operate_btn:hover{ border: .3rem solid; From 547fd91d9f93b65c05a18d7a7bca619249306b85 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Tue, 23 Apr 2024 14:32:20 +0800 Subject: [PATCH 3/6] fix --- src/component/HomePage/ColorboardUpload.vue | 36 ++++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue index 51b51083..5e9cc6ab 100644 --- a/src/component/HomePage/ColorboardUpload.vue +++ b/src/component/HomePage/ColorboardUpload.vue @@ -67,7 +67,7 @@
-
+
@@ -170,10 +170,20 @@ export default defineComponent({ let gradient = ref({ gradientList:[ { - color:'rgb(244, 187, 51)', + rgba:{ + r:117, + g:119, + b:255, + a:1, + }, left:'0%' },{ - color:'rgb(39, 193, 191)', + rgba:{ + r:0, + g:222, + b:152, + a:1, + }, left:'100%' }, ], @@ -200,8 +210,20 @@ export default defineComponent({ // }, selectColor:{ handler(newVal,oldVal){ + console.log(newVal); this.colorList[this.selectIndex] = newVal.rgba let colorList =this.colorList.filter((v) => v && Object.keys(v).length) + console.log(newVal); + if(this.gradient.selectIndex>-1){ + this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})` + this.gradient.gradientList[this.gradient.selectIndex].rgba = { + r:newVal.rgba.r, + g:newVal.rgba.g, + b:newVal.rgba.b, + a:1, + } + console.log(this.gradient); + } this.setColorboardList(colorList) // this.clearSelectColor() }, @@ -240,7 +262,7 @@ export default defineComponent({ gradient.gradientList.forEach((item,index)=>{ let str = ',' if(gradient.gradientList.length == index+1)str = '' - gradientStr += `${item.color} ${item.left}${str}` + gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` }) console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`); @@ -568,7 +590,11 @@ export default defineComponent({ this.store.commit('setColorboardList',colorList) }, clickGradient(index){ - + this.gradient.selectIndex = index + let gradientRgba = this.gradient.gradientList[index].rgba + let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1] + let hex = this.rgbaToHex(rgba) + this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色 }, mousedownGradient(event,item){ event.stopPropagation(); From 7aa4d4b1bbd09e6a83b4bc65b78350e60c9cbfbd Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Tue, 23 Apr 2024 16:03:21 +0800 Subject: [PATCH 4/6] fix --- src/component/HomePage/ColorboardUpload.vue | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue index 5e9cc6ab..93d8342e 100644 --- a/src/component/HomePage/ColorboardUpload.vue +++ b/src/component/HomePage/ColorboardUpload.vue @@ -67,7 +67,7 @@
-
+
@@ -589,15 +589,13 @@ export default defineComponent({ this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色 this.store.commit('setColorboardList',colorList) }, - clickGradient(index){ + mousedownGradient(event,item,index){ + event.stopPropagation(); this.gradient.selectIndex = index let gradientRgba = this.gradient.gradientList[index].rgba let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1] let hex = this.rgbaToHex(rgba) this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色 - }, - mousedownGradient(event,item){ - event.stopPropagation(); // isMoible() true为移动端 let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth let position = { From 3825527fa6493698cc334269c590e6dd4970012d Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 24 Apr 2024 14:37:46 +0800 Subject: [PATCH 5/6] fix --- src/component/HomePage/Generate.vue | 10 +++++++--- src/component/HomePage/PrintboardUpload.vue | 8 +++++++- src/component/HomePage/SketchboardUpload.vue | 17 ++++++++++++++++- src/lang/cn.ts | 1 + src/lang/en.ts | 1 + src/views/HomeView/library.vue | 8 ++++++-- 6 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue index 07929310..b78dba67 100644 --- a/src/component/HomePage/Generate.vue +++ b/src/component/HomePage/Generate.vue @@ -43,8 +43,8 @@ -
-
+
+
item.status == 'Invalid').length == 4) { + // (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor') + message.info(this.t('Generate.effectPoor')); + } if(arr.length == 0){ nextTick().then(()=>{ if(this.driver__.driver){ diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue index 080121bc..69821ef1 100644 --- a/src/component/HomePage/PrintboardUpload.vue +++ b/src/component/HomePage/PrintboardUpload.vue @@ -659,7 +659,8 @@ export default defineComponent({ let data = { generateType:generateType, - designType:this.useGenerate.designType, + // designType:this.useGenerate.designType, + designType:'collection', collectionElementId:this.useGenerate.imgId, // collectionElementId:generage?.collectionElementid, level1Type:this.upload.level1Type, @@ -770,6 +771,11 @@ export default defineComponent({ }); }); // this.generateList = rv; + if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) { + message.info(this.t('Generate.effectPoor')); + + // (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor') + } if(arr.length == 0){ nextTick().then(()=>{ if(this.driver__.driver){ diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue index 5e90e0d5..0835cc34 100644 --- a/src/component/HomePage/SketchboardUpload.vue +++ b/src/component/HomePage/SketchboardUpload.vue @@ -766,7 +766,8 @@ export default defineComponent({ let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name let data = { generateType:generateType, - designType:this.useGenerate.designType, + // designType:this.useGenerate.designType, + designType:'collection', collectionElementId:this.useGenerate.imgId, level1Type:this.upload.level1Type, level2Type:this.useGenerate.level2Type, @@ -880,10 +881,24 @@ export default defineComponent({ this.generateList.forEach((item:any,index:any) => { if(item.taskId == element.taskId && element.status == 'Success'){ this.generateList[index] = element + element.imgUrl = element.url + element.id_ = GO.id++ + if(element.category){ + this.sketchCatecoryList.forEach((itemCategory:any) => { + if(itemCategory.name == element.category){ + element.categoryValue = itemCategory?.value + element.category = itemCategory?.name + } + }); + } } }); }); // this.generateList = rv; + if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) { + message.info(this.t('Generate.effectPoor')); + // (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor') + } if(arr.length == 0){ nextTick().then(()=>{ if(this.driver__.driver){ diff --git a/src/lang/cn.ts b/src/lang/cn.ts index 72f11e21..29ad0d97 100644 --- a/src/lang/cn.ts +++ b/src/lang/cn.ts @@ -341,6 +341,7 @@ export default { currently:'您排在队列中的第{generateLineUp}位', Merge:'合成', maximumLength:'输入的内容超过允许输入的最大长度', + effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。', Model:'模型', jsContent1:"您只能上传图片文件！", jsContent2:'图片必须小于2MB', diff --git a/src/lang/en.ts b/src/lang/en.ts index 34bfb86e..6bd36145 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -342,6 +342,7 @@ export default { currently:'You are currently in the {generateLineUp} th position in the queue', Merge:'Merge', maximumLength:'The entered content exceeds the maximum length.', + effectPoor:'The quality of the generated images currently falls below standard. Please consider adjusting your prompt and trying again.', Model:'Model', jsContent1:"You can only upload Image file!", jsContent2:'Image must smaller than 2MB!', diff --git a/src/views/HomeView/library.vue b/src/views/HomeView/library.vue index 21d14d74..7fe60cad 100644 --- a/src/views/HomeView/library.vue +++ b/src/views/HomeView/library.vue @@ -624,6 +624,7 @@ export default defineComponent({ this.captionGeneration = '' this.selectGenerateList = [] this.generateList = [] + this.inputShow = false } this.upload.level1Type = menu.code } @@ -1058,7 +1059,7 @@ export default defineComponent({ let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0] let data = { generateType:generateType, - designType:'', + designType:'collection', collectionElementId:generageImg?.id, level1Type:this.selectCode, level2Type:this.selectCode == 'Sketchboard'?this.designType.value:'', @@ -1176,7 +1177,10 @@ export default defineComponent({ } }); }); - + if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) { + // (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor') + message.info(this.t('Generate.effectPoor')); + } if(arr.length == 0){ this.generateList = this.generateList.filter((item:any)=>item.status == 'Success') clearInterval(this.generateTime) From 2c5775e77c1bfc39abd0b90cc81a744676599b1f Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 24 Apr 2024 14:37:51 +0800 Subject: [PATCH 6/6] fix --- src/component/HomePage/ColorboardUpload.vue | 48 +++++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue index 93d8342e..1ffdbd0d 100644 --- a/src/component/HomePage/ColorboardUpload.vue +++ b/src/component/HomePage/ColorboardUpload.vue @@ -6,7 +6,7 @@
-
+
@@ -49,7 +49,7 @@
--> -
+
线性
@@ -190,6 +190,7 @@ export default defineComponent({ angle:45, selectIndex:-1, }) + let gradientShow = ref(false) return { fileList, colorList, @@ -198,6 +199,7 @@ export default defineComponent({ driver__, t, gradient, + gradientShow, } }, watch:{ @@ -210,11 +212,9 @@ export default defineComponent({ // }, selectColor:{ handler(newVal,oldVal){ - console.log(newVal); this.colorList[this.selectIndex] = newVal.rgba let colorList =this.colorList.filter((v) => v && Object.keys(v).length) - console.log(newVal); - if(this.gradient.selectIndex>-1){ + if(this.gradient.selectIndex>-1 && this.gradientShow){ this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})` this.gradient.gradientList[this.gradient.selectIndex].rgba = { r:newVal.rgba.r, @@ -222,7 +222,12 @@ export default defineComponent({ b:newVal.rgba.b, a:1, } - console.log(this.gradient); + } + this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient)) + if(this.gradientShow){ + // this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient)) + }else{ + this.colorList[this.selectIndex].gradient = '' } this.setColorboardList(colorList) // this.clearSelectColor() @@ -251,8 +256,10 @@ export default defineComponent({ return data } }, - setGradient(gradient){ + setGradient(){ + // return this.setGradientAngle(gradient) return (gradient)=>{ + console.log(gradient,'222'); let gradientStr = '' gradient.gradientList.sort((a, b) => { let aArr = a.left.split('%')[0] @@ -305,8 +312,30 @@ export default defineComponent({ const backIcon = document.createElement('div'); backIcon.classList.add('vc-sketch-color-wrap') let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0] + let colorDom = document.querySelector('.colorboard_upload_modal .vc-chrome-controls .vc-chrome-active-color') + // console.log(colorDom); dropperDom.appendChild(backIcon); - backIcon.addEventListener('click',async ()=>{ + colorDom.addEventListener('click',()=>{ + // this.colorList[this.selectIndex] + console.log(123123123123); + this.gradient.selectIndex = 0 + this.gradientShow = !this.gradientShow + if(this.gradientShow){ + if(this.selectColor.rgba.r){ + this.gradient.gradientList[this.gradient.selectIndex].rgba = { + r:this.selectColor.rgba.r, + g:this.selectColor.rgba.g, + b:this.selectColor.rgba.b, + a:1, + } + } + + this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient)) + }else{ + this.colorList[this.selectIndex].gradient = '' + } + }) + backIcon.addEventListener('click', async ()=>{ try { const dropper = new EyeDropper(); const result = await dropper.open(); @@ -322,7 +351,7 @@ export default defineComponent({ } catch (e) { message.info(this.t('ColorboardUpload.jsContent1')) } - },false) + }) // this.clearSelectColor() // if ("EyeDropper" in window) { // console.log(true); @@ -345,6 +374,7 @@ export default defineComponent({ }, //选择不同的色块 selectColorItem(index,color){ + this.gradientShow = false let hex if(color?.r){ hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])