diff --git a/.env.dev b/.env.dev
index 38b3deea..d429345a 100644
--- a/.env.dev
+++ b/.env.dev
@@ -5,4 +5,4 @@ NODE_ENV = 'development'
 # VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'http://192.168.1.9:17088'
-# VUE_APP_BASE_URL = '18.167.251.121:17088'
+# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 915daa2e..63f4717b 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -988,13 +988,14 @@ i {
   position: fixed;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.4);
   left: 0;
   top: 0;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #fff;
   flex-direction: column;
 }
 .mark_loading .mark_loading_text {
@@ -1011,7 +1012,14 @@ i {
   margin: 0 5px;
   color: red;
 }
-.mark_loading .mark_loading_btn {
+.mark_loading .mark_loading_title {
+  font-size: 3rem;
+  text-decoration: underline;
+  cursor: pointer;
+  margin-bottom: 2rem;
+}
+.mark_loading .mark_loading_btn,
+.mark_loading .mark_loading_btn2 {
   margin-top: 10px;
   text-align: center;
   border: 2px solid;
@@ -1023,4 +1031,10 @@ i {
   background: #39215b;
   color: #fff;
   border: none;
+  margin: 0 2rem;
+}
+.mark_loading .mark_loading_btn2 {
+  border: 2px solid #000;
+  background: rgba(0, 0, 0, 0);
+  color: #fff;
 }
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index f9ba0b1e..50a21c2e 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -1057,13 +1057,14 @@ i{
     position: fixed;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.4);
     left: 0;
     top: 0;
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
+	color: #fff;
 	flex-direction: column;
 	.mark_loading_text{
 		text-align: center;
@@ -1082,7 +1083,14 @@ i{
 		}
 		
 	}
-	.mark_loading_btn{
+	.mark_loading_title{
+		font-size: 3rem;
+		text-decoration: underline;
+		cursor: pointer;
+		margin-bottom: 2rem;
+		// color: #fff;
+	}
+	.mark_loading_btn,.mark_loading_btn2{
 		// border: #000;
 		// color: #fff;
 		margin-top: 10px;
@@ -1096,5 +1104,11 @@ i{
 		background: #39215b;
 		color: #fff;
 		border: none;
+		margin: 0 2rem;
+	}
+	.mark_loading_btn2{
+		border: 2px solid #000;
+		background: rgba(0,0,0,0);
+		color: #fff;
 	}
 }
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index a617ecc6..01876934 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -1,414 +1,863 @@
 <template>
-   <a-modal class="modal_component Export" 
-            v-model:visible="showUpgradePlan" 
-            :footer="null" 
-            width="78%"
-            :maskClosable="false"
-            :centered="true"
-			:closable="false"
-			:keyboard="false"
-        >
+    <a-modal
+        class="modal_component Export"
+        v-model:visible="showUpgradePlan"
+        :footer="null"
+        width="78%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+        :keyboard="false"
+    >
         <div class="UpgradePlan_closeIcon">
-			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
-		</div>
-		<div class="UpgradePlan_content">
-			<div>Export</div>
-		</div>
-		<!-- <div>
+            <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+        </div>
+        <div class="UpgradePlan_content">
+            <div>Export</div>
+        </div>
+        <!-- <div>
 			<canvas ref="exportCanvas"></canvas>
 		</div> -->
-		<div class="exportCanvasBox">
-			<div class="exportCanvasBox_left">
-				<div class="exportCanvasBox_title">
-					Canvas Title
+        <div class="exportCanvasBox">
+            <div class="exportCanvasBox_left">
+                <div class="exportCanvasBox_title">Canvas Title</div>
+                <label>
+                    <div>Width:</div>
+                    <input
+                        type="number"
+                        @input="setMaxInput('width', 500)"
+                        v-model="canvasWH.width"
+                    />
+                </label>
+                <label>
+                    <div>Height:</div>
+                    <input
+                        type="number"
+                        @input="setMaxInput('height', 1000)"
+                        v-model="canvasWH.height"
+                    />
+                </label>
+                <div class="exportCanvasBox_title" @click.stop="setCloseNav()">
+					Canvas Nav
+					<div
+                        :class="[
+                            'icon',
+                            'iconfont',
+                            'icon-xiala',
+							closeNav?'icon-rotate':''
+                        ]"
+                    >
+					</div>
 				</div>
-				<label>
-					<div>Width:</div>
-					<input type="number" @input="setMaxInput('width',600)" v-model="canvasWH.width">
-				</label>
-				<label>
-					<div>Height:</div>
-					<input type="number" @input="setMaxInput('height',1000)" v-model="canvasWH.height">
-				</label>
-			</div>
-			<div class="exportCanvasBox_center">
-				<!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
-			</div>
-			<!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
-			<div class="exportCanvasBox_right">
-				<div class="" @click="setExport">export</div>
-			</div>
-		</div>
-	</a-modal>
+                <div class="exportCanvasBox_img" :class="{closeNav:'closeNav'}">
+                    <div
+                        class="exportCanvasBox_allItem"
+                        v-for="(item,key) in allBoardData"
+                    >
+                        <div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>
+
+						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item">
+							<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
+							<div>{{colorItem.tcx}}</div>
+							<div>{{colorItem.name}}</div>
+						</div>
+
+                        <div
+                            class="exportCanvasBox_item"
+							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']"
+                            v-for="imgItem in item"
+							draggable
+							@dragstart="onDragstart(key)"
+                        >
+                            <img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="exportCanvasBox_center">
+                <!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
+            </div>
+            <!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
+            <div class="exportCanvasBox_right">
+                <div class="" @click="setExport">export</div>
+                <div class="" @click="multiselect">all</div>
+            </div>
+            <div class="mark_loading" v-show="isShowMark">
+                <a-spin size="large" />
+            </div>
+        </div>
+    </a-modal>
 </template>
 <script>
-import { defineComponent, computed, h, ref, nextTick, inject,reactive, onMounted } from "vue";
+import {
+    defineComponent,
+    computed,
+    h,
+    ref,
+    nextTick,
+    inject,
+    reactive,
+    onMounted,
+} from "vue";
 import { Https } from "@/tool/https";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import { useStore } from "vuex";
-import { forEach } from "jszip";
+import JSZip, { forEach } from "jszip";
+import { message, Modal } from "ant-design-vue";
+const FileSaver = require("file-saver");
 export default defineComponent({
-	components: {
-		scaleImage,	
-		ExportNewCoolection,
-	},
-    props: ["msg",'sketchCatecoryList'],
+    components: {
+        scaleImage,
+        ExportNewCoolection,
+    },
+    props: ["msg", "sketchCatecoryList"],
     setup() {
         const store = useStore();
 
-        let showUpgradePlan = ref(false)
-		let canvas = reactive({})
-		// let canvasDom = ref()
-		let canvasWH = ref({
-			width:400,
-			height:1400,
-		})
-
-		let sketch = computed(()=>{
-			return store.state.HomeStoreModule.showSketchList})
-		// let sketch = ref([[],[],[]])
-		let sketchList = computed(()=>{
-			return store.state.UploadFilesModule.showSketchboard})
-		let allBoardData = computed(()=>{return store.state.UploadFilesModule.allBoardData})
-        let likeDesignCollectionList = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
-		let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
-		let init = () =>{
-			showUpgradePlan.value = true
-			nextTick().then(async ()=>{
-				let canvasBox = document.querySelector('.Export .exportCanvasBox_center')
-				canvasBox.innerHTML = ''; // 清空原有内容
-				var canvasDom = document.createElement('canvas')
-				canvasBox.appendChild(canvasDom);
-				canvas = new fabric.Canvas(canvasDom, {
-					backgroundColor: "rgba(255, 255, 255)",
-					// fill: '#ffde7d',
-					// selection: false, //设置多选
-					width: canvasWH.value.width,
-					height: canvasWH.value.height,
-					isDrawingMode: false, // 开启绘图模式
-				});
-				let disposeMoodboardShow = true
-				let arr = ['disposeMoodboard','moodboardFiles','printboardFiles','colorBoards','sketchboardFiles','likeDesignCollectionList']
-				let position = { //设置每个图形位置的初始值
-					x:0,
-					y:0,
-					height:0,
-				}
-				let sketchGrouping = 3//sketch分组
-				let likeDesign = 4//整体图分组
-				let oldKey = ''
-				let margin = 20//每个图形边距
-				// arr.forEach((item,index)=>{
-				for (const item of arr) {
-					for (const key in allBoardData.value) {
-						if(item == key){//循环渲染顺序
-							let setImgWidth = canvasWH.value.width//这是设置画布等宽
-							let sketchGroupingItem = []
-							if(disposeMoodboardShow && item == 'disposeMoodboard' && allBoardData.value[key].length != 0 && allBoardData.value[key][0] != null){//如果是mood 需要判断用户是否点击layout
-								disposeMoodboardShow = false
-							}
-							if(item == 'moodboardFiles' && !disposeMoodboardShow){
-								continue
-							}
-							if(item == 'printboardFiles'){
-								setImgWidth = canvasWH.value.width/8
-							}
-							if(item == 'sketchboardFiles'){
-								setImgWidth = (canvasWH.value.width-(sketchGrouping-1)*20)/sketchGrouping
-							}
-							if(item == 'likeDesignCollectionList'){
-								setImgWidth = (canvasWH.value.width-(likeDesign-1)*20)/likeDesign
-							}
-							for (const [allItemIndex, allItem] of allBoardData.value[key].entries()) {
-								await new Promise((resolve,reject)=>{
-									if(key == 'colorBoards'){
-										
-										var text = new fabric.Text(allItem.tcx, {
-											left: 0,
-											top: 60,
-											fontSize: 14,
-											fontFamily: 'Arial',
-											textAlign: "left",
-											fill: 'black',
-										});
-										let text1 = new fabric.Text(allItem.name, {
-											left:0,
-											top: 80,
-											width:20,
-											fontSize: 14,
-											fontFamily: 'Arial',
-											textAlign: "left",
-										});
-										let width = 110>text1.width?110:text1.width
-										var color = new fabric.Rect({
-											width: width,
-											height: 60,
-											textAlign: "left",
-											fill: `rgb(${allItem.rgbValue.r},${allItem.rgbValue.g},${allItem.rgbValue.b})`,
-										});
-										if((position.x+width > canvasWH.value.width) || (oldKey != key)){
-											position.x = 0
-											position.y += position.height
-										}
-										var group = new fabric.Group([color, text, text1], {
-											left: position.x,
-											top: position.y,
-											width:width,
-											fill:'rgb(255,255,255)',
-											cornerSize: 10, // 选中时，角的大小为20
-											transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-											stroke: '#212121',
-											strokeWidth: 1,
-										});
-										// 将矩形对象添加到 canvas 中
-										canvas.add(group);
-										oldKey = key
-										position.x += width + margin
-										position.height = group.height+margin
-										resolve()
-									}else{
-										let itemCanvasImg = allItem.imgUrl
-										if(key == 'likeDesignCollectionList'){
-											itemCanvasImg = allItem.designOutfitUrl
-										}
-										fabric.Image.fromURL(itemCanvasImg, (img) => {
-											let proportion = img.height/img.width//计算图形宽高比例
-											let scaleWH = setImgWidth/img.width//计算放到画布上缩小倍率
-											if((position.x+img.width*scaleWH > canvasWH.value.width) || (oldKey != key)){
-												position.x = 0
-												position.y += position.height
-											}
-											img.set({
-												// width: setImgWidth/img.width,
-												// height: canvasWH.value.height/img.height,
-												left: position.x,
-												top: position.y,
-												scaleX: setImgWidth/img.width,
-												scaleY: img.width*proportion*scaleWH/img.height,
-												cornerSize: 10, // 选中时，角的大小为20
-												// lockRotation:true,
-												// lockScalingX:true,
-												lockRotation:true,
-												crossOrigin: 'anonymous',
-												transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-												// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
-											})
-											position.height = img.height*scaleWH+margin
-											if(key == 'sketchboardFiles'){
-												position.x += img.width*scaleWH+margin
-												if(sketchGroupingItem.length>=3){
-												}else{
-													sketchGroupingItem.push(JSON.parse(JSON.stringify(position)))
-												}
-												if(sketchGroupingItem.length>=3){
-													let sketchXyIndex = {
-														maxIndex:0,
-														maxNum: 9999999999,
-														minNum:0,
-														minIndex:0,
-													}
-													sketchGroupingItem.forEach((sketchItem,sketchIndex)=>{
-														if(sketchItem.height < sketchXyIndex.maxNum){
-															sketchXyIndex.maxNum = sketchItem.height
-															sketchXyIndex.maxIndex = sketchIndex
-														}
-														if(sketchItem.height > sketchXyIndex.minNum){
-															sketchXyIndex.minNum = sketchItem.height
-															sketchXyIndex.minIndex = sketchIndex
-														}
-													})
-													if(allBoardData.value[key].length == allItemIndex+1){
-														position = sketchGroupingItem[sketchXyIndex.minIndex]
-													}else{
-														position = sketchGroupingItem[sketchXyIndex.maxIndex]
-														position.y += position.height
-														position.x -= img.width*scaleWH+margin
-													}
-												}
-												
-											}else{
-												position.x += img.width*scaleWH
-											}
-											img.lock_rotation = true
-											canvas.add(img);
-											oldKey = key
-											resolve()
-										},{crossOrigin: 'Anonymous'})
+        let showUpgradePlan = ref(false);
+        let canvas = reactive({});
+        // let canvasDom = ref()
+        let canvasWH = ref({
+            width: 400,
+            height: 1200,
+        });
+		canvasWH.value.width = [window.innerWidth/2.4]
+		canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
+		console.log(canvasWH.value.width);
+        let sketch = computed(() => {
+            return store.state.HomeStoreModule.showSketchList;
+        });
+        let sketchList = computed(() => {
+            return store.state.UploadFilesModule.showSketchboard;
+        });
+        let allBoardData = computed(() => {
+            return store.state.UploadFilesModule.allBoardData;
+        });
+        let likeDesignCollectionList = computed(() => {
+            return store.state.HomeStoreModule.likeDesignCollectionList;
+        });
+        let isShowMark = false;
+        // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
+		let position = {
+			//设置每个图形位置的初始值
+			x: 0,
+			y: 0,
+			height: 0,
+		};
+        let init = () => {
+            showUpgradePlan.value = true;
+			console.log(position);
+            nextTick().then(async () => {
+                allBoardData.value.likeDesignCollectionList =
+                    likeDesignCollectionList;
+                let canvasBox = document.querySelector(
+                    ".Export .exportCanvasBox_center"
+                );
+                canvasBox.innerHTML = ""; // 清空原有内容
+                var canvasDom = document.createElement("canvas");
+                canvasBox.appendChild(canvasDom);
+                canvas = new fabric.Canvas(canvasDom, {
+                    backgroundColor: "rgba(255, 255, 255)",
+                    // fill: '#ffde7d',
+                    // selection: false, //设置多选
+                    width: canvasWH.value.width,
+                    height: canvasWH.value.height,
+                    isDrawingMode: false, // 开启绘图模式
+                });
+				canvasOnDrop()
+                let disposeMoodboardShow = true;
+                let arr = [
+                    "disposeMoodboard",
+                    "moodboardFiles",
+                    "printboardFiles",
+                    "colorBoards",
+                    "sketchboardFiles",
+                    "likeDesignCollectionList",
+                ];
+                
+                let sketchGrouping = 3; //sketch分组
+                let likeDesign = 4; //整体图分组
+                let oldKey = "";
+                let margin = 20; //每个图形边距
+                // arr.forEach((item,index)=>{
+                for (const item of arr) {
+                    for (const key in allBoardData.value) {
+                        if (item == key) {
+                            //循环渲染顺序
+                            let setImgWidth = canvasWH.value.width; //这是设置画布等宽
+                            let sketchGroupingItem = [];
+                            if (
+                                disposeMoodboardShow &&
+                                item == "disposeMoodboard" &&
+                                allBoardData.value[key].length != 0 &&
+                                allBoardData.value[key][0] != null
+                            ) {
+                                //如果是mood 需要判断用户是否点击layout
+                                disposeMoodboardShow = false;
+                            }
+                            if (
+                                item == "moodboardFiles" &&
+                                !disposeMoodboardShow
+                            ) {
+                                continue;
+                            }
+                            if (item == "printboardFiles") {
+                                setImgWidth = canvasWH.value.width / 8;
+                            }
+                            if (item == "sketchboardFiles") {
+                                setImgWidth =
+                                    (canvasWH.value.width -
+                                        (sketchGrouping - 1) * 20) /
+                                    sketchGrouping;
+                            }
+                            if (item == "likeDesignCollectionList") {
+                                setImgWidth =
+                                    (canvasWH.value.width -
+                                        (likeDesign - 1) * 20) /
+                                    likeDesign;
+                            }
+                            for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
+                                await new Promise((resolve, reject) => {
+                                    if (key == "colorBoards") {
+                                        var text = new fabric.Text(
+                                            allItem.tcx,
+                                            {
+                                                left: 0,
+                                                top: 60,
+                                                fontSize: 14,
+                                                fontFamily: "Arial",
+                                                textAlign: "left",
+                                                fill: "black",
+                                            }
+                                        );
+                                        let text1 = new fabric.Text(
+                                            allItem.name,
+                                            {
+                                                left: 0,
+                                                top: 80,
+                                                width: 20,
+                                                fontSize: 14,
+                                                fontFamily: "Arial",
+                                                textAlign: "left",
+                                            }
+                                        );
+                                        let width =
+                                            110 > text1.width
+                                                ? 110
+                                                : text1.width;
+                                        var color = new fabric.Rect({
+                                            width: width,
+                                            height: 60,
+                                            textAlign: "left",
+                                            fill: `rgb(${allItem.rgbValue.r},${allItem.rgbValue.g},${allItem.rgbValue.b})`,
+                                        });
+                                        if (
+                                            position.x + width >
+                                                canvasWH.value.width ||
+                                            oldKey != key
+                                        ) {
+                                            position.x = 0;
+                                            position.y += position.height;
+                                        }
+                                        var group = new fabric.Group(
+                                            [color, text, text1],
+                                            {
+                                                left: position.x,
+                                                top: position.y,
+                                                width: width,
+                                                fill: "rgb(255,255,255)",
+                                                cornerSize: 10, // 选中时，角的大小为20
+                                                transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+                                                stroke: "#212121",
+                                                strokeWidth: 1,
+                                            }
+                                        );
+                                        // 将矩形对象添加到 canvas 中
+                                        canvas.add(group);
+                                        oldKey = key;
+                                        position.x += width + margin;
+                                        position.height = group.height + margin;
+                                        resolve();
+                                    } else {
+                                        let itemCanvasImg = allItem.imgUrl;
+                                        if (key == "likeDesignCollectionList") {
+                                            itemCanvasImg =
+                                                allItem.designOutfitUrl;
+                                        }
+                                        fabric.Image.fromURL(
+                                            itemCanvasImg,
+                                            (img) => {
+                                                let proportion = img.height / img.width; //计算图形宽高比例
+                                                let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
+                                                if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
+                                                    position.x = 0;
+                                                    position.y += position.height;
+                                                }
+                                                img.set({
+                                                    // width: setImgWidth/img.width,
+                                                    // height: canvasWH.value.height/img.height,
+                                                    left: position.x,
+                                                    top: position.y,
+                                                    scaleX:
+                                                        setImgWidth / img.width,
+                                                    scaleY:(img.width * proportion * scaleWH) / img.height,
+                                                    cornerSize: 10, // 选中时，角的大小为20
+                                                    // lockRotation:true,
+                                                    // lockScalingX:true,
+                                                    lockRotation: true,
+                                                    crossOrigin: "anonymous",
+                                                    transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+                                                    // cornerColor: "#a1de93", // 选中时，角的颜色是 青色
+                                                });
+                                                position.height = img.height * scaleWH + margin;
+                                                if (key == "sketchboardFiles") {
+                                                    position.x +=
+                                                        img.width * scaleWH +
+                                                        margin;
+                                                    if (
+                                                        sketchGroupingItem.length >=
+                                                        3
+                                                    ) {
+                                                    } else {
+                                                        sketchGroupingItem.push(
+                                                            JSON.parse(
+                                                                JSON.stringify(
+                                                                    position
+                                                                )
+                                                            )
+                                                        );
+                                                    }
+                                                    if (sketchGroupingItem.length >=3) {
+                                                        let sketchXyIndex = {
+                                                            maxIndex: 0,
+                                                            maxNum: 9999999999,
+                                                            minNum: 0,
+                                                            minIndex: 0,
+                                                        };
+                                                        sketchGroupingItem.forEach(
+                                                            (sketchItem,sketchIndex) => {
+                                                                if (sketchItem.height <sketchXyIndex.maxNum) {
+                                                                    sketchXyIndex.maxNum = sketchItem.height;
+                                                                    sketchXyIndex.maxIndex = sketchIndex;
+                                                                }
+                                                                if (sketchItem.height > sketchXyIndex.minNum) {
+                                                                    sketchXyIndex.minNum = sketchItem.height;
+                                                                    sketchXyIndex.minIndex = sketchIndex;
+                                                                }
+                                                            }
+                                                        );
+                                                        if (allBoardData.value[key].length == allItemIndex + 1) {
+                                                            position = sketchGroupingItem[sketchXyIndex.minIndex];
+                                                        } else {
+                                                            position = sketchGroupingItem[ sketchXyIndex.maxIndex];
+                                                            position.y += position.height;
+                                                            position.x -= img.width * scaleWH + margin;
+                                                        }
+                                                    }
+                                                } else {
+                                                    position.x += img.width * scaleWH;
+                                                }
+                                                img.lock_rotation = true;
+                                                canvas.add(img);
+                                                oldKey = key;
+                                                resolve();
+                                            },
+                                            { crossOrigin: "Anonymous" }
+                                        );
+                                    }
+                                });
+                            }
+                        }
+                    }
+                }
+            });
+        };
+		let setCanvasImage = (itemCanvasImg)=>{
+			fabric.Image.fromURL(
+				itemCanvasImg,
+				(img) => {
+					let proportion = img.height / img.width; //计算图形宽高比例
+					let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
+					if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
+						position.x = 0;
+						position.y += position.height;
+					}
+					img.set({
+						// width: setImgWidth/img.width,
+						// height: canvasWH.value.height/img.height,
+						left: position.x,
+						top: position.y,
+						scaleX:
+							setImgWidth / img.width,
+						scaleY:(img.width * proportion * scaleWH) / img.height,
+						cornerSize: 10, // 选中时，角的大小为20
+						// lockRotation:true,
+						// lockScalingX:true,
+						lockRotation: true,
+						crossOrigin: "anonymous",
+						transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+						// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
+					});
+					position.height = img.height * scaleWH + margin;
+					if (key == "sketchboardFiles") {
+						position.x +=
+							img.width * scaleWH +
+							margin;
+						if (
+							sketchGroupingItem.length >=
+							3
+						) {
+						} else {
+							sketchGroupingItem.push(
+								JSON.parse(
+									JSON.stringify(
+										position
+									)
+								)
+							);
+						}
+						if (sketchGroupingItem.length >=3) {
+							let sketchXyIndex = {
+								maxIndex: 0,
+								maxNum: 9999999999,
+								minNum: 0,
+								minIndex: 0,
+							};
+							sketchGroupingItem.forEach(
+								(sketchItem,sketchIndex) => {
+									if (sketchItem.height <sketchXyIndex.maxNum) {
+										sketchXyIndex.maxNum = sketchItem.height;
+										sketchXyIndex.maxIndex = sketchIndex;
 									}
-								});
+									if (sketchItem.height > sketchXyIndex.minNum) {
+										sketchXyIndex.minNum = sketchItem.height;
+										sketchXyIndex.minIndex = sketchIndex;
+									}
+								}
+							);
+							if (allBoardData.value[key].length == allItemIndex + 1) {
+								position = sketchGroupingItem[sketchXyIndex.minIndex];
+							} else {
+								position = sketchGroupingItem[ sketchXyIndex.maxIndex];
+								position.y += position.height;
+								position.x -= img.width * scaleWH + margin;
 							}
 						}
+					} else {
+						position.x += img.width * scaleWH;
 					}
-				}
+					img.lock_rotation = true;
+					canvas.add(img);
+					oldKey = key;
+					resolve();
+				},
+				{ crossOrigin: "Anonymous" }
+			);
+		}
+        //设置导出
+        let setExport = async () => {
+            var imageDataURL = canvas.toDataURL({
+                format: "png", // 导出格式为 PNG
+                quality: 1, // 图片质量为 1（最高质量）
+            });
+            let a = document.createElement("a");
+            let img = [];
+            let index = 0;
+            img.push({
+                imgUrl: imageDataURL,
+                name: "collection.png",
+            });
+            let num = 0;
+            for (let key in allBoardData.value) {
+                if (key !== "colorBoards" && key !== "moodTemplateId") {
+                    for (let item of allBoardData.value[key]) {
+                        if (
+                            key == "disposeMoodboard" &&
+                            allBoardData.value[key][0] == undefined
+                        ) {
+                            break;
+                        }
 
-			})
-		}
-		//设置导出
-		let setExport = ()=>{
-			var imageDataURL = canvas.toDataURL({
-				format: 'png', // 导出格式为 PNG
-				quality: 1 // 图片质量为 1（最高质量）
-			});
-			console.log(imageDataURL);
-		}
-		//关闭画布
-		let cancelDsign = () =>{
-			showUpgradePlan.value = false
-		}
-		//设置画布宽高
-		let setMaxInput = (str,maxNum) =>{
-			if(str == 'width' && canvasWH.value.width >= maxNum){
-				canvasWH.value.width = maxNum
-			}else if(str == 'height' && canvasWH.value.height >= maxNum){
-				canvasWH.value.height = maxNum
-			}
-			canvas.setHeight(canvasWH.value.height);
-			canvas.setWidth(canvasWH.value.width);
-		}
-	
-		onMounted (()=>{
+                        let nameTail = item?.imgUrl
+                            ?.split(".")
+                            .pop()
+                            .split("?")
+                            .shift();
+
+                        let data = {
+                            imgUrl: item.imgUrl,
+                            name: item?.resData?.name + index + "." + nameTail,
+                        };
+                        if (key == "likeDesignCollectionList") {
+                            data.imgUrl = item.designOutfitUrl;
+                            data.name = "result" + index + "." + nameTail;
+                        }
+                        img.push(data);
+                        index++;
+                    }
+                    num++;
+                }
+            }
+            let dataList = [];
+            likeDesignCollectionList.value.forEach((item) => {
+                // let nameTail = item?.designOutfitUrl
+                //     ?.split(".")
+                //     .pop()
+                //     .split("?")
+                //     .shift();
+                // let data = {
+                //     imgUrl: item.designOutfitUrl,
+                //     name: "result" + index + "." + nameTail,
+                // };
+                dataList.push(item.designItemId);
+                // img.push(data);
+                index++;
+            });
+            let mannequinList = [];
+            await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
+                .then((rv) => {
+                    mannequinList = rv;
+                })
+                .catch((rv) => {});
+            mannequinList.forEach((item) => {
+                let nameTail = item?.split(".").pop().split("?").shift();
+                let data = {
+                    imgUrl: item,
+                    name: "mannequin" + index + "." + nameTail,
+                };
+                img.push(data);
+                index++;
+            });
+            downImg(img);
+        };
+        let getImgArrayBuffer = (url) => {
+            return new Promise((resolve, reject) => {
+                //通过请求获取文件blob格式
+                let xmlhttp = new XMLHttpRequest();
+                xmlhttp.open("GET", url, true);
+                xmlhttp.responseType = "blob";
+                xmlhttp.onload = function () {
+                    if (this.status == 200) {
+                        resolve(this.response);
+                    } else {
+                        reject(this.status);
+                    }
+                };
+                xmlhttp.send();
+            });
+        };
+        let downImg = (imagesParams) => {
+            let zip = new JSZip();
+            let cache = {};
+            let promises = [];
+            for (let item of imagesParams) {
+                const promise = getImgArrayBuffer(item.imgUrl).then((data) => {
+                    // 下载文件, 并存成ArrayBuffer对象(blob)
+                    zip.file(item.name, data, { binary: true }); // 逐个添加文件
+                    cache[item.title] = data;
+                });
+                promises.push(promise);
+            }
+            Promise.all(promises)
+                .then(() => {
+                    zip.generateAsync({ type: "blob" }).then((content) => {
+                        // 生成二进制流
+                        FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
+                        isShowMark = false;
+                    });
+                })
+                .catch((res) => {
+                    // message.warning(t('HomeView.jsContent3'));
+                    isShowMark = false;
+                });
+        };
+        //关闭画布
+        let cancelDsign = () => {
+            showUpgradePlan.value = false;
+			position = {
+				//设置每个图形位置的初始值
+				x: 0,
+				y: 0,
+				height: 0,
+			};
 			
- 			
-		})
+        };
+        //设置画布宽高
+        let setMaxInput = (str, maxNum) => {
+            if (str == "width") {
+                // maxNum = window.innerWidth < 1100 ? 400 : maxNum;
+				maxNum = [window.innerWidth/2.4]
+				maxNum = maxNum.map(num => Math.round(num / 10) * 10)[0];
+            }
+            if (str == "width" && canvasWH.value.width >= maxNum) {
+                canvasWH.value.width = maxNum;
+            } else if (str == "height" && canvasWH.value.height >= maxNum) {
+                canvasWH.value.height = maxNum;
+            }
+            canvas.setHeight(canvasWH.value.height);
+            canvas.setWidth(canvasWH.value.width);
+        };
+
+		let closeNav = ref(false)
+		let setCloseNav = ()=>{
+			closeNav.value = !closeNav.value
+		}
+		
+		function multiselect() {
+			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
+			const sel = new fabric.ActiveSelection(canvas.getObjects(), {
+				canvas
+			})
+			// console.log(sel)
+			canvas.setActiveObject(sel)
+			canvas.requestRenderAll()
+			const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
+			if (activeObject && activeObject.type === 'activeSelection') {
+				const totalWidth = activeObject.width * activeObject.scaleX;
+				const totalHeight = activeObject.height * activeObject.scaleY;
+				console.log('Total Width:', totalWidth);
+				console.log('Total Height:', totalHeight);
+			}
+
+		}
+		let currentType = ref()
+		let onDragstart = (type)=>{
+			console.log(type);
+			currentType.value = type
+		}
+		let canvasOnDrop = ()=>{
+			canvas.on('drop', function(opt) {
+				// 省略部分代码......
+				let offset = {
+					left: canvas.getSelectionElement().getBoundingClientRect().left,
+					top: canvas.getSelectionElement().getBoundingClientRect().top
+				}
+				let point = {
+					x: opt.e.x - offset.left,
+					y: opt.e.y - offset.top,
+				}
+				let pointerVpt = canvas.restorePointerVpt(point)
+				switch (currentType.value) {
+					case 'disposeMoodboard':
+					createRect(pointerVpt.y, pointerVpt.x)
+					break
+					case 'circle':
+					createCircle(pointerVpt.y, pointerVpt.x)
+					break
+					case 'img':
+					createImg(pointerVpt.y, pointerVpt.x)
+					break
+				}
+				// 创建完元素，把当前操作的元素类型设置回 null
+				currentType.value = null
+				})
+
+				// 创建矩形
+				function createRect(top, left) {
+				canvas.add(new fabric.Rect({
+					top,
+					left,
+					width: 60,
+					height: 60,
+					fill: 'pink'
+				}))
+			}
+		}
+		
+        onMounted(() => {});
 
         return {
-			showUpgradePlan,
-			canvasWH,
-			init,
-			setExport,
-			cancelDsign,
-			setMaxInput,
+            showUpgradePlan,
+            canvasWH,
+            init,
+            setExport,
+            cancelDsign,
+            setMaxInput,
+            isShowMark,
+            allBoardData,
+			closeNav,
+			setCloseNav,
+			multiselect,
+			onDragstart,
         };
     },
     data(prop) {
-        return {
-		}
+        return {};
     },
-	
-    mounted() {
-    },
-	watch:{
-		// driver__:{
-		// 	handler(newVal,oldVal){
-		// 		if(this.type_.type2 == 'Printboard'){
-		// 			if(newVal.index >= 14 && newVal.index < 15){
-		// 				this.setKeyword(newVal.index-14)
-		// 			}else{
-		// 			}
-		// 		}else if(this.type_.type2 == 'Sketchboard'){
-					
-		// 		}
-				
-		// 	}
-		// },
-		
-	},
-    methods: {
-        
-		
-		
+
+    mounted() {},
+    watch: {
+        // driver__:{
+        // 	handler(newVal,oldVal){
+        // 		if(this.type_.type2 == 'Printboard'){
+        // 			if(newVal.index >= 14 && newVal.index < 15){
+        // 				this.setKeyword(newVal.index-14)
+        // 			}else{
+        // 			}
+        // 		}else if(this.type_.type2 == 'Sketchboard'){
+        // 		}
+        // 	}
+        // },
     },
+    methods: {},
 });
 </script>
 <style lang="less" scoped>
 .Export {
-	flex: 1;
+    flex: 1;
     // height: 30rem;
     // overflow-x: hidden;
-	display: flex;
+    display: flex;
     flex-direction: column;
     border-right: 1px solid #e5e5e5;
-	position: relative;
-	.UpgradePlan_content{
-		font-size: var(--aida-fsize2);
-		font-weight: 900;
-		color: rgba(0, 0, 0, 0.65);
-	}
-    .UpgradePlan_closeIcon{
-		top: calc(2rem*1.2);
-		right: calc(2rem*1.2);
+    position: relative;
+    .UpgradePlan_content {
+        font-size: var(--aida-fsize2);
+        font-weight: 900;
+        color: rgba(0, 0, 0, 0.65);
+    }
+    .UpgradePlan_closeIcon {
+        top: calc(2rem * 1.2);
+        right: calc(2rem * 1.2);
         cursor: pointer;
-		width: calc(4rem*1.2);
-		height: calc(4rem*1.2);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		.fi-rr-cross-small::before{
-			padding: calc(.2rem*1.2);
-			border-radius: 5px;
-			border: solid 2px rgba(0, 0, 0, 0.25);
-			transition: 1s all;
-			color: rgba(0, 0, 0, 0.55);
-		}
-		&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
-			border: solid 2px rgba(0, 0, 0, 0.55);
-			color: rgba(0, 0, 0, 1);
-		}
-	}
-	.exportCanvasBox{
-		flex: 1;
-		overflow-x: hidden;
-		display: flex;
-		margin-top: 2rem;
-		.exportCanvasBox_title{
-			margin-bottom: 1rem;
-			font-size: 1.8rem;
-			font-weight: 600;
-		}
-		.exportCanvasBox_left{
-			label{
-				cursor: pointer;
-				display: flex;
-				div{
-					width: 5rem;
-				}
-				input{
-					width: 10em;
-				}
+        width: calc(4rem * 1.2);
+        height: calc(4rem * 1.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        .fi-rr-cross-small::before {
+            padding: calc(0.2rem * 1.2);
+            border-radius: 5px;
+            border: solid 2px rgba(0, 0, 0, 0.25);
+            transition: 1s all;
+            color: rgba(0, 0, 0, 0.55);
+        }
+        &.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before {
+            border: solid 2px rgba(0, 0, 0, 0.55);
+            color: rgba(0, 0, 0, 1);
+        }
+    }
+    .exportCanvasBox {
+        flex: 1;
+        overflow-x: hidden;
+        display: flex;
+        margin-top: 2rem;
+        justify-content: space-between;
+        .exportCanvasBox_title {
+            margin-bottom: .5rem;
+            font-size: 1.8rem;
+            font-weight: 600;
+			margin-top: 2rem;
+			display: flex;
+			justify-content: space-between;
+			padding-right: 2rem;
+			cursor: pointer;
+			.icon{
+				transition: all .3s;
 			}
+			&.icon-rotate{
+				transform: rotate(90deg);
+			}
+        }
+		.exportCanvasBox_intro{
+			margin-bottom: 1rem;
+            font-size: 1.6rem;
+            font-weight: 600;
+			width: 100%;
 		}
-		.exportCanvasBox_center{
+        .exportCanvasBox_right,
+        .exportCanvasBox_left {
+			width: 25rem;
 			height: 100%;
 			overflow-x: hidden;
-		}
-		.export_new_collection_review{
-			position: initial;
-			margin: 10rem auto;
-			margin-bottom: 0;
-		}
-	}
-	
+        }
+        .exportCanvasBox_left {
+            label {
+                cursor: pointer;
+                display: flex;
+                div {
+                    width: 5rem;
+                }
+                input {
+                    width: 10em;
+                }
+            }
+            .exportCanvasBox_img {
+				transition: .3s all;
+				overflow: hidden;
+				height: auto;
+				&.closeNav{
+					// height: 0;
+				}
+                .exportCanvasBox_allItem {
+                    display: flex;
+                    flex-wrap: wrap;
+                    .exportCanvasBox_item {
+                        text-align: center;
+                        img {
+                            max-width: 7rem;
+                            max-height: 7rem;
+                            object-fit: contain;
+							margin-right: 2rem;
+							margin-bottom: 2rem;
+                        }
+                    }
+					.exportCanvasBox_item_color{
+						width: 8rem;
+						margin-right: 2rem;
+						margin-bottom: 2rem;
+						.exportCanvasBox_item_BGcolor{
+							height: 5rem;
+						}
+					}
+					.exportCanvasBox_item_dispose{
+						img{
+							max-width: 100%;
+							max-height: 100%;
+						}
+					}
+                }
+            }
+        }
+        .exportCanvasBox_center {
+            height: 100%;
+            overflow-x: hidden;
+        }
+        .export_new_collection_review {
+            position: initial;
+            margin: 10rem auto;
+            margin-bottom: 0;
+        }
+    }
 }
-	
-
 </style>
 <style lang="less">
-.Export{
-	.ant-modal-content{
-		border-radius: calc(1rem*1.2);
-		overflow: hidden;
-		.ant-modal-header{
-			background-color: #fff;
-			border-bottom: none;
-		}
-		.ant-modal-body{
-			display: flex;
-			flex-direction: column;
-			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
-			// height: calc(65vh - 6.4rem);
-			height: calc(65rem*1.2);
-			background: #f9fafb;
-		}
-		//进度完成字体颜色
-		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
-			color: #000;
-		}
-		.ant-progress-circle .ant-progress-text{
-			color:rgba(0, 0, 0, 0.55);
-			font-size: calc(1.6rem*1.2);
-		}
-	}
+.Export {
+    .ant-modal-content {
+        border-radius: calc(1rem * 1.2);
+        overflow: hidden;
+        .ant-modal-header {
+            background-color: #fff;
+            border-bottom: none;
+        }
+        .ant-modal-body {
+            display: flex;
+            flex-direction: column;
+            padding: calc(5rem * 1.2) calc(5rem * 1.2) !important;
+            // height: calc(65vh - 6.4rem);
+            height: calc(65rem * 1.2);
+            background: #f9fafb;
+        }
+        //进度完成字体颜色
+        .ant-progress-circle.ant-progress-status-success .ant-progress-text {
+            color: #000;
+        }
+        .ant-progress-circle .ant-progress-text {
+            color: rgba(0, 0, 0, 0.55);
+            font-size: calc(1.6rem * 1.2);
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/component/HomePage/Header.vue b/src/component/HomePage/Header.vue
index 48fefe85..3664db87 100644
--- a/src/component/HomePage/Header.vue
+++ b/src/component/HomePage/Header.vue
@@ -37,12 +37,13 @@
 					class="trialApproval button_second credits hideChecked"
                 >
 					Credits : 
-					<span :title="presentAssignment">
-						<!-- <div>{{ String(presentAssignment[presentAssignment.legnth-1]) }}</div> -->
-						<div class="credits_item" v-for="item in String(presentAssignment)" :style="{'transform': 'translateY('+item*-100+'%)'}">
+					<span :title="credits">
+						<!-- <div>{{ String(credits.value[credits.value.legnth-1]) }}</div> -->
+						<div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}">
 							<div v-for="numItem in 10">{{ numItem-1 }}</div>
 						</div>
 					</span>
+					<i @click="getCredits" class="fi fi-br-refresh" :class="[activeCredits?'active':'']"></i>
 					<i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i>
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                 </div>
@@ -103,6 +104,11 @@
 				<span class="icon iconfont icon-yuyan"></span>
 				<span class="select_item_des">{{$t('Header.language')}}</span>
 			</div>
+			<div class="select_item" @click="orderForm()">
+				
+				<i class="fi fi-rs-notebook"></i>
+				<span class="select_item_des">View Orders</span>
+			</div>
 			<div class="select_item" @click="logout()">
 				<span class="icon iconfont icon-tuichu"></span
 				><span class="select_item_des">{{$t('Header.logOff')}}</span>
@@ -179,13 +185,15 @@
                 <!-- 绑定邮箱第一步 end -->
             </div>
         </a-modal>
+		<payOrder ref="payOrder"></payOrder>
 		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
     </div>
 </template>
 <script >
-import { defineComponent, createVNode, ref } from "vue";
+import { defineComponent, createVNode, ref, computed } from "vue";
 import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import payOrder from "@/component/Pay/payOrder.vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
 import Habit from "@/component/Detail/habit.vue";
 import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
@@ -200,6 +208,7 @@ export default defineComponent({
         VerificationCodeInput,
 		Habit,
 		UpgradePlan,
+		payOrder,
     },
 	setup(){
         const store = useStore();
@@ -207,12 +216,18 @@ export default defineComponent({
 		const {locale} = useI18n()
 		let isTest = ref()
 		let isMurmur = ref()
+		let credits = computed(()=>{
+			return store.state.UserHabit.credits.value
+		})
+		let activeCredits = ref(false)
 		return {
 			store,
 			t,
 			locale,
 			isTest,
 			isMurmur,
+			credits,
+			activeCredits,
 		}
 	},
     data() {
@@ -243,11 +258,10 @@ export default defineComponent({
 				// {name:'Tiếng Việt',value:'VIETNAMESE'},
 				// {name:'Italiano',value:'ITALIAN'},       
 			],
-			presentAssignment:String(0),
         };
     },
 	watch: {
-		// presentAssignment(newVal,oldVal){
+		// credits.value(newVal,oldVal){
 		// 	console.log(String(newVal).length);
 		// }
 	},
@@ -283,7 +297,16 @@ export default defineComponent({
 			UpgradePlan.init()
 		},
 		Assignment(){//任务
-			this.presentAssignment = Number(this.presentAssignment) + 123
+			let num = 123+this.credits
+			this.store.commit('setCredits',num)
+		},
+		getCredits(){//刷新当前积分
+			let num = 123+this.credits
+			this.activeCredits = true
+			setTimeout(()=>{
+				this.activeCredits = false
+			},300)
+			this.store.commit('setCredits',num)
 		},
         //点击下拉图标出现操作
         changeShowOperateContent() {
@@ -364,7 +387,11 @@ export default defineComponent({
                 clearInterval(this.timer);
             }
         },
-
+		//查看订单
+		orderForm(){
+			let payOrder = this.$refs.payOrder
+			payOrder.init()
+		},
         //登出
         async logout() {
             let data = {
@@ -654,6 +681,7 @@ export default defineComponent({
 				display: inline-block;
 				overflow: hidden;
 				display: flex;
+				margin-right: .9rem;
 				.credits_item{
 					transition: .3s all;
 					div{
@@ -670,6 +698,15 @@ export default defineComponent({
 				font-size: 1.8rem;
 				cursor: pointer;
 			}
+			.fi-br-refresh{
+				margin-left: 0;
+				border-left: none;
+				padding-left: 0;
+				&.active{
+					transition: all .3s;
+					transform: rotate(360deg);
+				}
+			}
 		}
 		.trialApproval{
 			margin-left: 2rem;
diff --git a/src/component/HomePage/UpgradePlan.vue b/src/component/HomePage/UpgradePlan.vue
index f5bf7533..3b2037c5 100644
--- a/src/component/HomePage/UpgradePlan.vue
+++ b/src/component/HomePage/UpgradePlan.vue
@@ -1,8 +1,9 @@
 <template>
+	<!-- 如果需要套餐就78 -->
    <a-modal class="modal_component UpgradePlan_modal" 
             v-model:visible="showUpgradePlan" 
             :footer="null" 
-            width="78%"
+            width="35%"
             :maskClosable="false"
             :centered="true"
 			:closable="false"
@@ -13,15 +14,15 @@
 			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
 		</div>
 		<div class="UpgradePlan_content">
-			<div>Upgrade your Account Subscription Plan</div>
+			<div>Buy credlts</div>
 		</div>
-		<div v-show="stepNum == 0" class="UpgradePlan_nav">
+		<!-- <div v-show="stepNum == 0" class="UpgradePlan_nav">
 			<div class="UpgradePlan_nav_content">
 				<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
 				<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
 				<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
 			</div>
-		</div>
+		</div> -->
 		<div v-show="stepNum == 0" class="UpgradePlan_payList">
 			<div v-show="planNum == 0" class="UpgradePlan_payList0">
 				<div class="UpgradePlan_payList-item" v-for="item in productList">
@@ -49,6 +50,7 @@
 						</li>
 					</ul>
 					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
+					
 				</div>
 			</div>
 			<div v-show="planNum == 2" class="UpgradePlan_payList2">
@@ -57,14 +59,14 @@
 						<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
 					</div>
 					<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} credits</div>
-					<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">USD</span></div>
+					<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">HKD</span></div>
 					<div class="UpgradePlan_payList2_input">
 						<div class="UpgradePlan_payList2_input_remo"  @click="removePriceNum">-</div>
 						<input type="number" v-model="price.num">
 						<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
 					</div>
 					<div class="UpgradePlan_payList2_describe">All credits are shared within the {{  }} name organization</div>
-					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade">UPGRADE NOW</div>
+					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(1)">Continue</div>
 				</div>
 			</div>
 		</div>
@@ -72,19 +74,19 @@
 			<div class="UpgradePlan_payAffirm_title">Select payment method</div>
 			<div class="UpgradePlan_payAffirm_content">
 				<label>
-					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
+					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
 					<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
 					PayPal
 				</label>
-				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
+				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
 
 				</div>
 				<label>
-					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
+					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
 					<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
 					支付宝
 				</label>
-				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
+				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
 
 				</div>
 			</div>
@@ -100,11 +102,7 @@
 			</div>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
-			<div>Has it been paid?</div>
-			<div>
-				<div @click="getTradeQuery">Yes</div>
-				<div @click="getTradeQuery">No</div>
-			</div>
+			<div class="mark_loading_title" @click="getTradeQuery">Paid completed</div>
 		</div>
 	</a-modal>
 </template>
@@ -128,20 +126,23 @@ export default defineComponent({
     props: ["msg",'sketchCatecoryList'],
     setup() {
         // console.log(prop.msg);
+        const store = useStore();
         let showUpgradePlan = ref(false)
-		let planNum = ref(0)
+		let planNum = ref(2)
 		let stepNum = ref(0)
 		let price = ref({
 			num:1,
 			price:15,
 			credits:115,
 		})
-		let modeOfPayment = ref('alipay')
+		let modeOfPayment = ref('paypal')
 		let clause = ref(false)//同意条款
 		let productList = ref([])
 		let payIndex = ref(0)
 		let isShowMark = ref(false)
+		let newWindow:any = ref()
         return {
+			store,
 			showUpgradePlan,
 			planNum,
 			stepNum,
@@ -151,6 +152,7 @@ export default defineComponent({
 			productList,
 			payIndex,
 			isShowMark,
+			newWindow,
         };
     },
     data(prop) {
@@ -162,17 +164,12 @@ export default defineComponent({
 		this.getProductList()
     },
 	watch:{
-		// driver__:{
+		// newWindowState:{
 		// 	handler(newVal,oldVal){
-		// 		if(this.type_.type2 == 'Printboard'){
-		// 			if(newVal.index >= 14 && newVal.index < 15){
-		// 				this.setKeyword(newVal.index-14)
-		// 			}else{
-		// 			}
-		// 		}else if(this.type_.type2 == 'Sketchboard'){
-					
+		// 		console.log(newVal);
+		// 		if(newVal){
+		// 			this.newWindow?.close();
 		// 		}
-				
 		// 	}
 		// },
 		
@@ -205,32 +202,54 @@ export default defineComponent({
 			}
 		},
 		payment(){//付款
-			console.log(this.modeOfPayment,'alipay','paypal');
+			// console.log(this.modeOfPayment,'alipay','paypal');
+			let url = window.location.href 
+			// url = url.replace(/\/[^/]+$/, '') + '/home';
+			url = url.replace(/\/[^/]+$/, '') + '/paySucceed';
 			if(!this.clause){
 				return
 			}
-			let url = window.location.href 
-			url = url.replace(/\/[^/]+$/, '') + '/paySucceed';
-			Https.axiosPost(Https.httpUrls.pagePay+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
-                (rv: any) => {
-					// var newWindow:any = window.open();
-					// newWindow.document.write(rv);
-					document.write(rv);
+			let httpsUrl = Https.httpUrls.payAlipay
+			
+			if(this.modeOfPayment == 'paypal'){
+				httpsUrl = Https.httpUrls.payPaypal
+			}
+			Https.axiosPost(httpsUrl+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
+				(rv: any) => {
+					console.log(rv);
+					var width = 800;
+					var height = 600;
+					var left = (screen.width - width) / 2;
+					var top = (screen.height - height) / 2;
+					this.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
+					if(this.modeOfPayment == 'paypal'){
+						// 在新窗口中写入内容
+						// newWindow.document.write(rv.approve);
+						this.newWindow.location.href = rv.approve;
+					}else{
+						this.newWindow.document.write(rv);
+					}
+					this.isShowMark = true
 					// this.isShowMark = true
-                }
-            ).catch(res=>{
-            });
+				}
+			).catch(res=>{
+			});
+			
 		},
 		//查询是否支付
-		// getTradeQuery(){
-		// 	let params = 1
-		// 	Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
-		// 		if (rv) {
-		// 			console.log(rv);
-					
-		// 		}
-		// 	})
-		// },
+		getTradeQuery(){
+			this.isShowMark = false
+			this.newWindow.close();
+			let num = this.store.state.UserHabit.credits.value+111
+			this.store.commit('setCredits',num)
+
+			// let params = 1
+			// Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
+			// 	if (rv) {
+			// 		console.log(rv);
+			// 	}
+			// })
+		},
 		cancel(){//取消
 			this.stepNum = 0
 			this.modeOfPayment = 'alipay'
@@ -256,6 +275,9 @@ export default defineComponent({
     flex-direction: column;
     border-right: 1px solid #e5e5e5;
 	position: relative;
+	.mark_loading{
+		position: absolute;
+	}
 	.UpgradePlan_content{
 		font-size: var(--aida-fsize2);
 		font-weight: 900;
@@ -350,7 +372,7 @@ export default defineComponent({
 				}
 				.UpgradePlan_payList2_name,.UpgradePlan_payList2_unitPrice{
 					font-size: 1.8rem;
-					font-weight: 600;
+					font-weight: 900;
 				}
 				.UpgradePlan_payList2_name{
 					font-weight: 900;
@@ -361,7 +383,7 @@ export default defineComponent({
 					justify-content: center;
 					div{
 						font-size: 4rem;
-						font-weight: 600;
+						font-weight: 800;
 						cursor: pointer;
 					}
 					input{
@@ -385,12 +407,12 @@ export default defineComponent({
 				.UpgradePlan_payList2_describe{
 					background: #f2f2f4;
 					padding: 1rem 3rem;
-					border-radius: 2rem;
+					border-radius: 1.2rem;
 				}
 				.UpgradePlan_payList-item-upgrade{
 					position: initial;
 					transform: translate(0,0);
-					padding: 1rem 2rem;
+					// padding: 1rem 2rem;
 				}
 			}
 			
@@ -497,8 +519,8 @@ export default defineComponent({
 			display: flex;
 			flex-direction: column;
 			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
-			// height: calc(65vh - 6.4rem);
-			height: calc(65rem*1.2);
+			height: calc(55rem*1.2);
+			// height: calc(65rem*1.2);
 		}
 		//进度完成字体颜色
 		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
diff --git a/src/component/Pay/payOrder.vue b/src/component/Pay/payOrder.vue
index ff7a72f4..d6e733c1 100644
--- a/src/component/Pay/payOrder.vue
+++ b/src/component/Pay/payOrder.vue
@@ -79,12 +79,13 @@
                                         v-if="column?.Operations"
                                     >
                                         <div
+											v-if="record.orderStatus == '支付成功'"
                                             class="operate_item"
                                             @click="refund(record)"
                                         >
                                             refund
                                         </div>
-                                        <!-- <div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div> -->
+                                        <div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
                                     </div>
                                 </template>
                             </a-table>
@@ -139,19 +140,13 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
-import HeaderComponent from "@/component/HomePage/Header.vue";
-import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
 import { Https } from "@/tool/https";
 import { formatTime } from "@/tool/util";
 import { Modal, message } from "ant-design-vue";
-import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { useI18n } from "vue-i18n";
 export default defineComponent({
     components: {
-        HeaderComponent,
-        HistoryDetail,
-        RobotAssist,
     },
     setup() {
         let rangePickerValue: any = ref([]);
@@ -207,7 +202,7 @@ export default defineComponent({
                     title: useI18n().t("HistoryPage.Operations"),
                     key: "operation",
                     align: "center",
-                    fixed: "right",
+                    fixed: "left",
                     width: 90,
                     // slots:{customRender:'action'}
                     Operations: true,
@@ -251,14 +246,12 @@ export default defineComponent({
     mounted() {},
     methods: {
         init() {
-            console.log(123123);
             this.showPayOrder = true;
             this.getHistoryList();
             nextTick().then(() => {
                 let history_table_content = document.getElementsByClassName(
                     "history_table_content"
                 )[0];
-                console.log(history_table_content);
                 this.historyTableHeight =
                     history_table_content.scrollHeight - 130;
             });
@@ -299,13 +292,12 @@ export default defineComponent({
             };
 
             Https.axiosGet(Https.httpUrls.orderInfoList).then((rv: any) => {
-                console.log(rv);
                 this.total = rv.length;
-                console.log(this.total);
                 this.collectionList = rv.slice(
                     (this.currentPage - 1) * this.pageSize,
                     (this.currentPage - 1) * this.pageSize + this.pageSize
                 );
+				
             });
             // Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
             //     (rv: any) => {
@@ -343,9 +335,8 @@ export default defineComponent({
 
         refund(record: any) {
             // this.$router.push({name:'home',params: {id:record.id}})
-			this.record = record.orderNo
+			this.record = record
 			this.showRefundReason = true
-            
         },
 		getReasonCategory(){
 			if(this.reason == 'Rests'){
@@ -357,15 +348,19 @@ export default defineComponent({
 			let reason = this.reason
 			this.loadingShow = true
 			if(this.reason == 'Rests'){
-				// console.log(this.reasonTextarea);
 				reason = this.reasonTextarea?this.reasonTextarea:this.reason
 			}
+
 			// return
+			
+			let httpsUrl = Https.httpUrls.tradeRefundAlipay
+			if(this.record.paymentType == "PayPal"){
+				httpsUrl = Https.httpUrls.tradeRefundPaypal
+			}
 			Https.axiosPost(
-                Https.httpUrls.tradeRefund + `/${this.record}/${reason}`,
+                httpsUrl + `/${this.record.orderNo}/${reason}`,
                 {}
             ).then((rv: any) => {
-				console.log(rv);
 				this.getHistoryList()
 				this.loadingShow = false
 				this.showRefundReason = false
@@ -554,6 +549,7 @@ export default defineComponent({
                             padding: 0 1rem;
 
                             .operate_item {
+								flex: 1;
                                 font-size: 1.4rem;
                                 font-family: Roboto;
                                 font-weight: 400;
diff --git a/src/store/uploadFile/uploadFile.ts b/src/store/uploadFile/uploadFile.ts
index 0292d2b3..f86545b2 100644
--- a/src/store/uploadFile/uploadFile.ts
+++ b/src/store/uploadFile/uploadFile.ts
@@ -194,8 +194,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         },
         setAllBoardData(state){
             state.allBoardData = {
-                moodboardFiles:state.moodboard,
 				disposeMoodboard:state.disposeMoodboard,
+                moodboardFiles:state.moodboard,
                 printboardFiles:state.printboard,
                 colorBoards:state.colorBoards,
                 sketchboardFiles:state.sketchboard,
diff --git a/src/store/userHabit/userHabit.ts b/src/store/userHabit/userHabit.ts
index 189484ce..8401b050 100644
--- a/src/store/userHabit/userHabit.ts
+++ b/src/store/userHabit/userHabit.ts
@@ -3,6 +3,7 @@ import {RootState} from '../index'
 import { Https } from "@/tool/https";
 interface DesignDetail{
     clothingType:any,
+	credits:any,
     // devise:any,
     // deviseType:any,
     // system_per:any,
@@ -13,13 +14,17 @@ interface DesignDetail{
 const HomeStoreModule : Module<DesignDetail,RootState> = {
     state:{
         clothingType:[],
-		
-        
+		credits:{
+			value:0
+		},
     },
     mutations:{
         res_clothingType(state,data){
             state.clothingType = data
         },
+		setCredits(state,data){
+			state.credits.value = data
+		},
     },
 
     actions:{
@@ -39,7 +44,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 			// 	})
 			// 	.catch((rv) => {
 			// 	});
-		}
+		},
     }
 }
 
diff --git a/src/tool/https.js b/src/tool/https.js
index 45e4e512..609941fa 100644
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -135,9 +135,13 @@ export const Https = {
 
 		//充值相关
         productList:`/api/product/list`, //获取商品列表
-        pagePay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
+        payAlipay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
+        payPaypal:`/api/paypal/trade`, //paypal确认支付
+
         orderInfoList:`/api/order-info/list`, //查询订单列表
-        tradeRefund:`/api/ali-pay/trade/refund`, //查询订单列表
+        tradeRefundAlipay:`/api/ali-pay/trade/refund`, //支付宝退款
+        tradeRefundPaypal:`/api/paypal/trade/refund`, //paypal退款
+
         tradeQuery:`/api/ali-pay/trade/query/{orderNo}`, //查询订单状态
 		
         getRgbByHsvBatch:`/api/element/getRgbByHsvBatch`, //通过hsv值数组批量获取潘通信息
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 116a115e..729c5873 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -892,6 +892,13 @@ export default defineComponent({
 		//处理选择组的数据
 		dealHistoryChooseData(data: any, type: any) {
 			let collectionData = {
+				disposeMoodboard: data.collection.moodTemplateId?[{
+					id:data.collection.moodTemplateId,
+					imgUrl:data.collection.moodTemplateUrl,
+					resData:{
+						name:data.collection.moodTemplateName,
+					}
+				}]:[],
 				moodboardFiles: this.dealViewChooseData(
 					data.collection.moodBoards,"Moodboard"
 				),
@@ -908,13 +915,7 @@ export default defineComponent({
 				marketingSketchFiles: this.dealViewChooseData(
 					data.collection.marketingSketchs,""
 				),
-				disposeMoodboard: data.collection.moodTemplateId?[{
-					id:data.collection.moodTemplateId,
-					imgUrl:data.collection.moodTemplateUrl,
-					resData:{
-						name:data.collection.moodTemplateName,
-					}
-				}]:[]
+				
 			};
 			// console.log(data);
 			this.store.commit("setAllBoardDataChoose", collectionData);
diff --git a/src/views/paySucceed.vue b/src/views/paySucceed.vue
index 298cd2c3..ee366f5d 100644
--- a/src/views/paySucceed.vue
+++ b/src/views/paySucceed.vue
@@ -1,6 +1,6 @@
 <template>
      <div class="paySucceed_page">
-		<HeaderComponent></HeaderComponent>
+		<!-- <HeaderComponent></HeaderComponent> -->
 		<div class="paySucceed_centent">
 			<div class="paySucceed_centent_title"><i class="fi fi-ss-check-circle"></i>支付成功</div>
 			<div class="paySucceed_centent_btn">
@@ -9,7 +9,7 @@
 			</div>
 		</div>
 		<payOrder ref="payOrder"></payOrder>
-		<RobotAssist></RobotAssist>
+		<!-- <RobotAssist></RobotAssist> -->
     </div>
 </template>
 <script lang="ts">
@@ -20,6 +20,7 @@ import { Modal,message } from 'ant-design-vue';
 import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import payOrder from "@/component/Pay/payOrder.vue";
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n';
 export default defineComponent({
     components: {
@@ -28,10 +29,10 @@ export default defineComponent({
 		payOrder,
     },
     setup() {
-      
+        const store = useStore();
 		let {t} = useI18n()
         return {
-           
+			store,
 			t,
         }
     },
@@ -41,7 +42,12 @@ export default defineComponent({
         }
     },
     mounted(){
-		
+		// sessionStorage.setItem('newWindow', JSON.stringify(true))
+		// let aa:any = sessionStorage.getItem('newWindow')
+		// window.alert(aa)
+		// aa.close();
+		window.close()
+		// this.store.commit('setNewWindow',true)
     },
     methods:{
 		turnToPage(name:any) {