页面调整

2025-07-19 14:04:48 +08:00
parent 22ee9c6cf1
commit 4b694236ee
161 changed files with 2934 additions and 3979 deletions
--- a/src/component/modules/generalDrag.vue
+++ b/src/component/modules/generalDrag.vue
@@ -62,6 +62,10 @@ export default defineComponent({
 		const store = useStore();
 		const data = reactive({
 			selectIndex:0,
+			observerData:{
+				time:false as any,
+				observer:null as any,
+			},
 		})
 		const dataDom = reactive({
 			generalDragDom:null as any,
@@ -187,6 +191,7 @@ export default defineComponent({
 			let value = collItemSize.num
 			// let num = str == 'like'?value:3
 			for(let i = 0;i < collItemSize.elList.length;i++){
+				if(!collItemSize.elList[i].el)return
 				collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
 				collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
 			}
@@ -276,15 +281,30 @@ export default defineComponent({
 			}, 100);
 		}
 		onMounted(()=>{
-			window.addEventListener('resize', setItemPosition)
-			nextTick(()=>{
-				let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
-				collItemSize.likeStyle.width = width + 'px'
-				collItemSize.likeStyle.height = width * 1.54 + 'px' 
-			})
+			data.observerData.observer = new ResizeObserver(entries => {
+				for (let entry of entries) {
+					clearTimeout(data.observerData.time)
+					data.observerData.time = setTimeout(()=>{
+						nextTick(()=>{
+							collItemSize.num = 2
+							// if(dataDom.generalDragDom.offsetWidth > 900){
+							// 	collItemSize.num = 3
+							// }else{
+							// 	collItemSize.num = 2
+							// }
+							let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
+							collItemSize.likeStyle.width = width + 'px'
+							collItemSize.likeStyle.height = width * 1.54 + 'px' 
+							setItemPosition()
+						})
+					},100)
+					// const { width } = entry.contentRect;
+				}
+			});
+			data.observerData.observer.observe(dataDom.generalDragDom);
 		})
 		onBeforeUnmount(()=>{
-			window.removeEventListener('resize', setItemPosition)
+			data.observerData.observer.unobserve(dataDom.generalDragDom);
 		})
 		return{
 			...toRefs(dataDom),
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -3,10 +3,14 @@
 		<div class="canvasBox" ref="canvasBox">
 			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 				@canvasInit="canvasInit"
-				
+				@changeCanvas="changeCanvas"
 				ref="editCanvas"></editCanvas>
 		</div>
-		<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</div>
+		<div class="btn">
+			<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin-top: auto;">Save</div>
+			<div class="gallery_btn" @click="exportElement">Export</div>
+		</div>
+
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
 		</div>
@@ -31,9 +35,17 @@ export default defineComponent({
 		imgUrl:{
 			type:String,
 			default:''
+		},
+		source:{
+			type:String,
+			default:''
+		},
+		isSubmitCanvasJSON:{
+			type:Boolean,
+			default:false
 		}
 	},
-	emits:['submitBase64Data'],
+	emits:['submitBase64Data','canvasChangeGetJSON'],
    setup(props,{emit}) {
 		const { t } = useI18n();
 		const store = useStore();
@@ -54,26 +66,36 @@ export default defineComponent({
 			data.canvasLoad = true
 		}
 		const canvasLoadAddImg = (url,id)=>{
-			console.log(url,{layerId:id,undoable:false})
-			dataDom.editCanvas.layers[0].id
-			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas,imageMode:'contains',undoable:false})
+			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas.layers[0].id,imageMode:'contains',undoable:false})
 		}
 		const canvasInit = (value)=>{
-			// return
-			console.log(value,123123)
-			setTimeout(()=>{
-				canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
-			},1000)
+			canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
 		}
 		const getCanvasData = ()=>{
 			
 			return canvasExport
 		}
 		const canvasSave = ()=>{
-			dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
-				emit('submitBase64Data',rv)
+			if(props.isSubmitCanvasJSON){
+				emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:0})
+			}else{
+				// dataDom.editCanvas.exportImage({isContainBg:props.source == 'detail',isContainFixed:true}).then((rv)=>{
+				// 	emit('submitBase64Data',rv)
+				// })
+				dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:true}).then((rv)=>{
+					emit('submitBase64Data',rv)
+				})
+			}
+			
+		}
+		const exportElement = ()=>{
+			canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
+				downloadBase64Image(rv,'canvas')
 			})
 		}
+		const changeCanvas = ()=>{
+			emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:5000})
+		}
        onMounted(() => {
 			if(props.imgUrl){
 				let img = new Image()
@@ -106,6 +128,8 @@ export default defineComponent({
 			getCanvasData,
 			canvasSave,
 			canvasInit,
+			exportElement,
+			changeCanvas,
        };
    },
    data(prop) {
@@ -130,12 +154,21 @@ export default defineComponent({
 	height: 100%;
 	position: relative;
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	overflow: hidden;
 	padding-top: 4rem;
 	> .canvasBox{
 		flex: 1;
 		position: relative;
 	}
+	> .btn{
+		margin-top: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		> div{
+			margin-top: 1rem;
+		}
+	}
 }
 </style>
--- a/src/component/modules/generalModalCanvas.vue
+++ b/src/component/modules/generalModalCanvas.vue
@@ -0,0 +1,98 @@
+<template>
+	<div class="modalCanvas generalModel" ref="modalCanvas"></div>
+    <a-modal
+        class="modalCanvas_modal generalModel"
+        v-model:visible="addDetails"
+        :footer="null"
+		:get-container="() => $refs.modalCanvas"
+		width="75%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+		:destroyOnClose="true"
+        wrapClassName="#app"
+        :keyboard="false"
+		:mask="false"
+    >
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
+					</svg>
+
+			</div>
+		</div>
+		
+		<div class="addDetails_center">
+			<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
+		</div>
+		<div></div>
+    </a-modal>
+</template>
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
+export default defineComponent({
+    components: {
+		generalMiniCanvas,
+    },
+	emits: ['setSloganData'],
+    setup(props,{emit}) {
+        let addDetail = reactive({
+			imgUrl:''
+		});
+        let addDetails = ref(false);
+		let init = (data,index)=>{
+			addDetails.value = true
+			addDetail.imgUrl = data.imgUrl || data.url
+        }
+		let submitBase64Data = (data)=>{
+			emit('setSloganData',data)
+			cancelDsign()
+		}
+		let cancelDsign = ()=>{
+			addDetails.value = false
+		}
+        return {
+			...toRefs(addDetail),
+			addDetails,
+			init,
+			submitBase64Data,
+			cancelDsign,
+        };
+    },
+    data() {
+        return {
+        };
+    },
+    mounted() {},
+    methods: {
+       
+    },
+});
+</script>
+<style lang="less" scoped>
+.modalCanvas{
+	width: 0;
+	height: 0;
+}
+.modalCanvas_modal {
+    .closeIcon {
+        z-index: 2;
+    }
+	
+	.addDetails_center{
+		position: relative;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		margin: 0 auto;
+	}
+	.exportCanvasBox_submit{
+		// margin-top: 2.4rem;
+		// text-align: center;
+	}
+}
+</style>
--- a/src/component/modules/selectMenu.vue
+++ b/src/component/modules/selectMenu.vue
@@ -91,7 +91,7 @@ defineExpose({})
 		font-size: 1.6rem;
 		box-sizing: content-box;
 		justify-content: center;
-		padding: 0 2rem;
+		padding: 0 1rem;
 		line-height: 5.4rem;
 		height: 5.4rem;
 		border-radius: 4rem;