颜色问题部署

2025-05-08 15:20:22 +08:00
parent 135c8cfeb7
commit 8bc0a52ab8
4 changed files with 41 additions and 34 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -6,7 +6,7 @@ NODE_ENV = 'development'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
 # 徐佩
-# VUE_APP_BASE_URL = 'http://192.168.1.3:5567'
+# VUE_APP_BASE_URL = 'http://192.168.31.118:5567'
 # 海波
 # VUE_APP_BASE_URL = 'http://192.168.1.7:5567'

--- a/src/component/DetailCopy/designDetail.vue
+++ b/src/component/DetailCopy/designDetail.vue
@@ -168,9 +168,9 @@ export default defineComponent({
 						}else{
 							item.color = {
 								rgba:{
-									r:255,
-									g:255,
-									b:255,
+									r:undefined,
+									g:undefined,
+									b:undefined,
 								}
 							}
 						}
@@ -264,7 +264,7 @@ export default defineComponent({
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
 				let data:any = {
 					changed:false,
-					color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`,
+					color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):(list[i].color.rgba.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''),
 					designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
 					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
 					// maskMinioUrl:'',
--- a/src/component/DetailCopy/detailLeft/colorBox/index.vue
+++ b/src/component/DetailCopy/detailLeft/colorBox/index.vue
@@ -7,10 +7,12 @@
 		<div class="detailText">Color pelette</div>
 		<div class="colorBox">
 			<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
-				<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
-				<div v-show="!item.gradient" class="text">{{ item.hex }}</div>
-				<div v-show="!item.gradient" class="text">{{ item.name }}</div>
-				<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
+				<div v-if="item" class="box">
+					<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
+					<div v-show="!item.gradient" class="text">{{ item.hex }}</div>
+					<div v-show="!item.gradient" class="text">{{ item.name }}</div>
+					<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
+				</div>
 			</div>
 		</div>
 		<div class="detailText">Choose color from image</div>
@@ -79,7 +81,7 @@ export default defineComponent({
 			tcxToColor:'',
 		})
 		watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
-		    if(!newVal?.name && newVal.rgba){
+		    if(!newVal?.name && newVal.rgba && newVal.rgba?.r){
 				let data:any = await getColorName(newVal.rgba)
 				newVal.name = data.name
 				newVal.tcx = data.tcx
@@ -111,6 +113,7 @@ export default defineComponent({
 					colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
 					colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
 					JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
+					&& colorData.selectDetail.color.rgba?.r
 				){
 					if(!isOneChecked){
 						isOneChecked = true
@@ -120,7 +123,7 @@ export default defineComponent({
 						colorData.selectColor = item
 						colorData.colorList.index = index
 					}
-				}else{
+				}else if(colorData.selectDetail.color.rgba?.r){
 					if(!isNoSelect){
 						item = {
 							hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
@@ -174,7 +177,7 @@ export default defineComponent({
 		}
 		const setSelectColor = (item:any,index:number)=>{
 			colorData.colorList.index = index
-			if(item.rgba){
+			if(item?.rgba){
 				colorData.selectColor = item
 			}else{
 				// colorData.colorList.list[colorData.selectDetail.id][index] = {}
@@ -269,19 +272,21 @@ export default defineComponent({
 				&.active{
 					border: 2px solid #000;
 				}
-				> .background{
-					flex: 1;
-					height: 7rem;
-					width: 100%;
-				}
-				> .text{
-					font-weight: 600;
-					line-height: 2rem;
-					text-align: center;
-				}
-				> .backgroundImg{
-					width: 100%;
-					height: 100%;
+				>.box{
+					> .background{
+						flex: 1;
+						height: 7rem;
+						width: 100%;
+					}
+					> .text{
+						font-weight: 600;
+						line-height: 2rem;
+						text-align: center;
+					}
+					> .backgroundImg{
+						width: 100%;
+						height: 100%;
+					}
 				}
 			}
 		}
--- a/src/component/DetailCopy/model/modelPosition.vue
+++ b/src/component/DetailCopy/model/modelPosition.vue
@@ -8,7 +8,7 @@
 			<div  class="detail_modal_item_front"  v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
 				<img :src="item.imageUrl" alt="">
 			</div>
-			<div class="designOpenrtion_btn">
+			<div class="designOpenrtion_btnBox">
 				<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
 					<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
 					<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
@@ -68,7 +68,7 @@ export default defineComponent({
 		watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
 			if(newValue.id == oldValue?.id)return
 			selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
-		})
+		},{immediate: true,})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
 		})
@@ -400,9 +400,9 @@ export default defineComponent({
 			height: auto;
 			position: relative;
 			height: 100%;
-			// display: flex;
-			// align-items: center;
-			// justify-content: center;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			>img{
 				z-index: 2;
 				position: relative;
@@ -420,10 +420,10 @@ export default defineComponent({
 				height: 100%;
 				width: 100%;
 				img{
-					// width: 100%;
-					// height: 100%;
 					width: 100%;
-					height: auto;
+					height: 100%;
+					// width: 100%;
+					// height: auto;
 					float: left;
 					user-select:none;
 					-webkit-user-drag: none;
@@ -438,8 +438,10 @@ export default defineComponent({
 			.designOpenrtion_print{
 				z-index: 1 !important;
 			}
-			> .designOpenrtion_btn{
+			> .designOpenrtion_btnBox{
 				z-index: 99;
+				width: 100%;
+				height: 100%;
 				left: 0;
 				ul{
 					list-style: none;