From 3aa56c1c3ff5369e7cf307a3718e1e5ff2fc57ba Mon Sep 17 00:00:00 2001
From: bighuixiang <472705331@qq.com>
Date: Wed, 18 Jun 2025 22:57:10 +0800
Subject: [PATCH] refactor: clean up HomeView.vue and update Vite config

- Reformatted imports in HomeView.vue for better readability.
- Removed unnecessary comments and improved component structure.
- Updated styles in HomeView.vue for consistency.
- Removed input path from rollupOptions in vite.config.js.
---
 components.d.ts                         |   13 +
 src/component/HomePage/ExportModel.vue  | 6215 ++++++++++++-----------
 src/component/home/design/index.vue     | 4856 ++++++++++--------
 src/component/modules/generalCanvas.vue | 3276 ++++++------
 src/views/HomeView/HomeView.vue         |   77 +-
 vite.config.js                          |    1 -
 6 files changed, 7799 insertions(+), 6639 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 208a14d8..e349e734 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,11 +8,24 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ABadge: typeof import('ant-design-vue/es')['Badge']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     AImage: typeof import('ant-design-vue/es')['Image']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
     APopover: typeof import('ant-design-vue/es')['Popover']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASlider: typeof import('ant-design-vue/es')['Slider']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATabPane: typeof import('ant-design-vue/es')['TabPane']
+    ATabs: typeof import('ant-design-vue/es')['Tabs']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index 140a86f0..95ca00af 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -1,247 +1,524 @@
 <template>
-	<div ref="ExportModal">
+  <div ref="ExportModal">
     <a-modal
-        class="modal_component Export generalModel"
-        v-model:visible="showUpgradePlan"
-        :footer="null"
-		:get-container="() => $refs.ExportModal"
-        width="78%"
-        :maskClosable="false"
-        :centered="true"
-        :closable="false"
-        :keyboard="false"
-		:destroyOnClose="true"
+      class="modal_component Export generalModel"
+      v-model:visible="showUpgradePlan"
+      :footer="null"
+      :get-container="() => $refs.ExportModal"
+      width="78%"
+      :maskClosable="false"
+      :centered="true"
+      :closable="false"
+      :keyboard="false"
+      :destroyOnClose="true"
     >
-		<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="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
-
-			</div>
-		</div>
-        <div class="UpgradePlan_content">
-            <div>{{ $t('exportModel.EditExport') }}</div>
+      <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="white"
+            />
+            <rect
+              x="34.6274"
+              y="32.5059"
+              width="3"
+              height="29"
+              rx="1.5"
+              transform="rotate(135 34.6274 32.5059)"
+              fill="white"
+            />
+          </svg>
         </div>
-        <!-- <div>
+      </div>
+      <div class="UpgradePlan_content">
+        <div>{{ $t("exportModel.EditExport") }}</div>
+      </div>
+      <!-- <div>
 			<canvas ref="exportCanvas"></canvas>
 		</div> -->
-        <div class="exportCanvasBox">
-            <div class="exportCanvasBox_left">
-                <!-- <div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div> -->
-               
-				<!-- <label style="width: 10%">
+      <div class="exportCanvasBox">
+        <div class="exportCanvasBox_left">
+          <!-- <div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div> -->
+
+          <!-- <label style="width: 10%">
 					<div>Width:</div>
 					<input type="number" @input="setMaxInput('width', 1000)" v-model="canvasWH.width"/>
 				</label> -->
-				<label style="width: 10%">
-					<div>{{ $t('exportModel.Height') }}:</div>
-					<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height"  style="max-width: 50%"/>
-				</label>
-                <div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
-					{{ $t('exportModel.CanvasNav') }}
-					<div
-                        :class="[
-                            'icon',
-                            'iconfont',
-                            'icon-xiala',
-							closeNav.nav?'icon-rotate':''
-                        ]"
-                    >
-					</div>
-					<div class="exportCanvasBox_imgbor exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
-						<div
-							class="exportCanvasBox_allItem"
-							v-for="(item,key) in allBoardData"
-						>	
-							<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
-							<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
-							<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
-							<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
-							<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
-							<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
-							<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
-							<div v-if="key == 'colorBoards'" class="exportCanvasBox_item_colorBor">
-								<div v-for="colorItem in item"  class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click.stop="isMoible?setDragstart(key,colorItem):''">
-									<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
-									<div v-else>
-										<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>
-							</div>
-							<div
-								v-if="key != 'moodboardPosition' && key != 'colorBoards'"
-								class="exportCanvasBox_item"
-								v-for="imgItem in item"
-								:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
-								draggable
-								@dragstart="onDragstart(key,imgItem)"
-								@click.stop="setDragstart(key,imgItem)"
-							>
-								<div class="exportCanvasBox_img">
-									<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
-					<div class="label_item" v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
-						<div >{{ $t('exportModel.Color') }}</div>
-						<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-						<div class="labelHover_show exportCanvasBox_imgbor">
-							<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
-						</div>
-					</div>
-					<div class="label_item" v-show="operation != 'move'">
-						<div >{{ $t('exportModel.Size') }}:</div>
-						<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
-					</div>
-					<div class="label_item" v-show="operation == 'pencil'">
-						<div >{{ $t('exportModel.Brushwork') }}:</div>
-						<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
-							style="flex: 1"
-							@change="brushworkChange"
-							>
-							<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
-								<img :src="item.url" alt="">
-							</a-select-option>
-						</a-select>
-					</div>
-					<div class="label_item texture" v-show="operation == 'texture'">
-						<div >{{ $t('exportModel.Texture') }}:</div>
-						<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
-							style="flex: 1"
-							@change="textureValueChange"
-							>
-							<!-- v-model:value="brushwork" -->
-							<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
-								<img :src="item.url" alt="">
-							</a-select-option>
-						</a-select>
-					</div>
-					<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
-						<div >{{ $t('exportModel.FillBack') }}:</div>
-						<div class="exportCanvasBox_left_tool_item leftAlign">
-							<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
-							<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
-						</div>
-					</div>
-					<div class="label_item" v-show="operation === 'move'">
-						<div >{{ $t('exportModel.Layer') }}:</div>
-						<div class="exportCanvasBox_left_tool_item top">
-							<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
-							<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
-							<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
-							<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
-						</div>
-					</div>
-					<!-- <div class="label_item" v-show="allSelectWidth > -1 && operation != 'move'">
+          <label style="width: 10%">
+            <div>{{ $t("exportModel.Height") }}:</div>
+            <input
+              type="number"
+              @input="setMaxInput('height', 30000)"
+              v-model="canvasWH.height"
+              style="max-width: 50%"
+            />
+          </label>
+          <div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
+            {{ $t("exportModel.CanvasNav") }}
+            <div
+              :class="[
+                'icon',
+                'iconfont',
+                'icon-xiala',
+                closeNav.nav ? 'icon-rotate' : '',
+              ]"
+            ></div>
+            <div
+              class="exportCanvasBox_imgbor exportCanvasBox_left_item"
+              :class="{ closeNav: closeNav.nav }"
+            >
+              <div
+                class="exportCanvasBox_allItem"
+                v-for="(item, key) in allBoardData"
+              >
+                <div
+                  v-if="item[0] && key == 'disposeMoodboard'"
+                  class="exportCanvasBox_intro"
+                >
+                  Entirety Moodboard
+                </div>
+                <div
+                  v-if="item[0] && key == 'printboardFiles'"
+                  class="exportCanvasBox_intro"
+                >
+                  Printboard
+                </div>
+                <div
+                  v-if="item[0] && key == 'moodboardFiles'"
+                  class="exportCanvasBox_intro"
+                >
+                  Moodboard
+                </div>
+                <div
+                  v-if="item[0] && key == 'colorBoards'"
+                  class="exportCanvasBox_intro"
+                >
+                  Color
+                </div>
+                <div
+                  v-if="item[0] && key == 'sketchboardFiles'"
+                  class="exportCanvasBox_intro"
+                >
+                  Sketch
+                </div>
+                <div
+                  v-if="item[0] && key == 'likeDesignCollectionList'"
+                  class="exportCanvasBox_intro"
+                >
+                  Selected Design
+                </div>
+                <div
+                  v-if="item[0] && key == 'FinalizeImage'"
+                  class="exportCanvasBox_intro"
+                >
+                  Selected Product
+                </div>
+                <div
+                  v-if="key == 'colorBoards'"
+                  class="exportCanvasBox_item_colorBor"
+                >
+                  <div
+                    v-for="colorItem in item"
+                    class="exportCanvasBox_item_color"
+                    :class="{ active: colorItem.upScaleChecked }"
+                    draggable="true"
+                    @dragstart="onDragstart(key, colorItem)"
+                    @click.stop="isMoible ? setDragstart(key, colorItem) : ''"
+                  >
+                    <div
+                      class="color_content"
+                      v-if="colorItem.gradient"
+                      :style="{
+                        height: '10rem',
+                        'background-image': colorItem?.gradient
+                          ? `linear-gradient(${
+                              colorItem?.gradient.angle
+                            }deg,${setGradient(colorItem?.gradient)}`
+                          : 'none',
+                      }"
+                    ></div>
+                    <div v-else>
+                      <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>
+                </div>
+                <div
+                  v-if="key != 'moodboardPosition' && key != 'colorBoards'"
+                  class="exportCanvasBox_item"
+                  v-for="imgItem in item"
+                  :class="[
+                    key == 'disposeMoodboard'
+                      ? 'exportCanvasBox_item_dispose'
+                      : '',
+                    imgItem?.upScaleChecked ? 'active' : '',
+                  ]"
+                  draggable
+                  @dragstart="onDragstart(key, imgItem)"
+                  @click.stop="setDragstart(key, imgItem)"
+                >
+                  <div class="exportCanvasBox_img">
+                    <img
+                      :src="
+                        key == 'likeDesignCollectionList'
+                          ? imgItem?.designOutfitUrl
+                          : imgItem?.imgUrl
+                      "
+                      alt=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column"
+          >
+            <div
+              class="label_item"
+              v-show="
+                operation != 'move' &&
+                operation != 'eraser' &&
+                operation != 'texture'
+              "
+            >
+              <div>{{ $t("exportModel.Color") }}</div>
+              <input
+                type="color"
+                @input="setPencilColor"
+                v-model="canvasPencilColor"
+              />
+              <div class="labelHover_show exportCanvasBox_imgbor">
+                <div
+                  v-for="item in colorHistoryList"
+                  :style="{ background: item }"
+                  @click="setColorHistory(item)"
+                ></div>
+              </div>
+            </div>
+            <div class="label_item" v-show="operation != 'move'">
+              <div>{{ $t("exportModel.Size") }}:</div>
+              <input
+                @change="setFontFamily"
+                type="range"
+                @input="setPencilWidth"
+                min="3"
+                max="50"
+                v-model="canvasPencilWidth[operation]"
+              />
+            </div>
+            <div class="label_item" v-show="operation == 'pencil'">
+              <div>{{ $t("exportModel.Brushwork") }}:</div>
+              <a-select
+                ref="select"
+                class="label_select"
+                size="small"
+                v-model:value="brushworkValue"
+                style="flex: 1"
+                @change="brushworkChange"
+              >
+                <a-select-option
+                  class="label_select_item"
+                  v-for="item in brushList"
+                  :value="item.value"
+                >
+                  <img :src="item.url" alt="" />
+                </a-select-option>
+              </a-select>
+            </div>
+            <div class="label_item texture" v-show="operation == 'texture'">
+              <div>{{ $t("exportModel.Texture") }}:</div>
+              <a-select
+                ref="select"
+                class="label_select"
+                size="small"
+                v-model:value="textureValue"
+                style="flex: 1"
+                @change="textureValueChange"
+              >
+                <!-- v-model:value="brushwork" -->
+                <a-select-option
+                  class="label_select_item"
+                  v-for="item in textureList"
+                  :value="item.value"
+                >
+                  <img :src="item.url" alt="" />
+                </a-select-option>
+              </a-select>
+            </div>
+            <div
+              class="label_item"
+              v-show="
+                operation != 'pencil' &&
+                operation != 'eraser' &&
+                operation != 'move' &&
+                operation != 'text' &&
+                operation != 'texture' &&
+                operation != ''
+              "
+            >
+              <div>{{ $t("exportModel.FillBack") }}:</div>
+              <div class="exportCanvasBox_left_tool_item leftAlign">
+                <i
+                  class="icon iconfont icon-tuceng1"
+                  @click="setOperationMode('fill')"
+                  :class="{ active: operationMode == 'fill' }"
+                ></i>
+                <i
+                  class="icon iconfont icon-tuceng"
+                  @click="setOperationMode('border')"
+                  :class="{ active: operationMode == 'border' }"
+                ></i>
+              </div>
+            </div>
+            <div class="label_item" v-show="operation === 'move'">
+              <div>{{ $t("exportModel.Layer") }}:</div>
+              <div class="exportCanvasBox_left_tool_item top">
+                <i
+                  class="icon iconfont icon-shangyiceng"
+                  @click="setLayerIndex('Front')"
+                ></i>
+                <i
+                  class="icon iconfont icon-shangyiceng2"
+                  @click="setLayerIndex('Forward')"
+                ></i>
+                <i
+                  class="icon iconfont icon-xiayiceng"
+                  @click="setLayerIndex('Backwards')"
+                ></i>
+                <i
+                  class="icon iconfont icon-shangyiceng1"
+                  @click="setLayerIndex('Back')"
+                ></i>
+              </div>
+            </div>
+            <!-- <div class="label_item" v-show="allSelectWidth > -1 && operation != 'move'">
 						<div >{{ $t('exportModel.Width') }}</div>
 						<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
 					</div> -->
-					<div class="label_item" v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
-						<div>Font Family</div>
-						<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
-							style="flex: 1"
-							@change="setFontFamily"
-							>
-							<!-- v-model:value="brushwork" -->
-							<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
-								{{item.name}}
-							</a-select-option>
-						</a-select>
-					</div>
-					<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+            <div
+              class="label_item"
+              v-show="
+                (operation == '' || operation == 'text' || textDataShow) &&
+                operation != 'move'
+              "
+            >
+              <div>Font Family</div>
+              <a-select
+                ref="select"
+                class="label_select"
+                size="small"
+                v-model:value="fontFamily"
+                style="flex: 1"
+                @change="setFontFamily"
+              >
+                <!-- v-model:value="brushwork" -->
+                <a-select-option
+                  class="label_select_item"
+                  v-for="item in textFontFamilyList"
+                  :style="{ 'font-family': item.value }"
+                  :value="item.value"
+                >
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </div>
+            <!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
 						<div >{{ $t('exportModel.Height') }}</div>
 						<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
 					</div> -->
-				</div>
-				<div class="shortcutKeys_box">
-					<div class="gallery_btn white" @click.stop="setCloseNav('shortcut')">
-						{{ $t('exportModel.ShortcutKeys') }}
-						<i class="icon iconfont icon-xiala" :class="closeNav.shortcut?'icon-rotate-tool':''" ></i>
-					</div>
-					<div class="shortcutKeys_list">
-						<div class="shortcutKeys_list_item" v-for="item in keysList" :key="item.name">
-							<div class="name">{{ item.name }}</div>
-							<div class="key">
-								<div v-if="!isWindow">{{ item.macKey }}</div>
-								<div v-else>{{ item.winDowKey }}</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				
-				<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
+          </div>
+          <div class="shortcutKeys_box">
+            <div
+              class="gallery_btn white"
+              @click.stop="setCloseNav('shortcut')"
+            >
+              {{ $t("exportModel.ShortcutKeys") }}
+              <i
+                class="icon iconfont icon-xiala"
+                :class="closeNav.shortcut ? 'icon-rotate-tool' : ''"
+              ></i>
+            </div>
+            <div class="shortcutKeys_list">
+              <div
+                class="shortcutKeys_list_item"
+                v-for="item in keysList"
+                :key="item.name"
+              >
+                <div class="name">{{ item.name }}</div>
+                <div class="key">
+                  <div v-if="!isWindow">{{ item.macKey }}</div>
+                  <div v-else>{{ item.winDowKey }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
 					{{ $t('exportModel.More') }}
 				</div>
 				 -->
-            </div>
-			<!-- <div @click="toSvg">12312312312</div> -->
-			<div class="exportCanvasBox_center_box exportCanvasBox_left">
-				<div class="exportCanvasBox_left_tool exportCanvasBox_title">
-					<div class="exportCanvasBox_left_tool_item">
-						<i class="icon iconfont icon-chehui" @click="historyState('')" :title="isWindow?'Ctrl+Z':'Command+Z'"></i>
-						<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')" :title="isWindow?'Ctrl+Shift+Z':'Command+Ctrl+Z'"></i>
-						<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}" :title="isWindow?'M':'M'"></i>
-						<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}" :title="isWindow?'B':'B'"></i>
-						<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}" :title="isWindow?'E':'E'"></i>
-						<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
-						
-						<label class="uploadImage" :title="isWindow?'Ctrl+O':'Command+O'">
-							<i class="fi fi-br-upload" ></i>
-							<input type="file" @change="uploadImage" accept="image/*">
-						</label>
-						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
-						<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
-						<!-- <i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:operation == 'zoomIn'}"></i>
+        </div>
+        <!-- <div @click="toSvg">12312312312</div> -->
+        <div class="exportCanvasBox_center_box exportCanvasBox_left">
+          <div class="exportCanvasBox_left_tool exportCanvasBox_title">
+            <div class="exportCanvasBox_left_tool_item">
+              <i
+                class="icon iconfont icon-chehui"
+                @click="historyState('')"
+                :title="isWindow ? 'Ctrl+Z' : 'Command+Z'"
+              ></i>
+              <i
+                class="icon iconfont icon-fanchehui"
+                @click="historyState('reverse')"
+                :title="isWindow ? 'Ctrl+Shift+Z' : 'Command+Ctrl+Z'"
+              ></i>
+              <i
+                class="icon iconfont icon-move"
+                @click="setOperation('move')"
+                :class="{ active: operation == 'move' }"
+                :title="isWindow ? 'M' : 'M'"
+              ></i>
+              <i
+                class="icon iconfont icon-bianji"
+                @click="setOperation('pencil')"
+                :class="{ active: operation == 'pencil' }"
+                :title="isWindow ? 'B' : 'B'"
+              ></i>
+              <i
+                class="icon iconfont icon-xiangpi_huaban1"
+                @click="setOperation('eraser')"
+                :class="{ active: operation == 'eraser' }"
+                :title="isWindow ? 'E' : 'E'"
+              ></i>
+              <i
+                class="icon iconfont icon-caizhi"
+                @click="setOperation('texture')"
+                :class="{ active: operation == 'texture' }"
+              ></i>
+
+              <label
+                class="uploadImage"
+                :title="isWindow ? 'Ctrl+O' : 'Command+O'"
+              >
+                <i class="fi fi-br-upload"></i>
+                <input type="file" @change="uploadImage" accept="image/*" />
+              </label>
+              <i
+                class="icon iconfont"
+                @click="setOperation('text')"
+                :class="{ active: operation == 'text' }"
+                >T</i
+              >
+              <i
+                class="icon iconfont icon-IC-yehua"
+                @click="setLiquefaction()"
+              ></i>
+              <!-- <i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:operation == 'zoomIn'}"></i>
 						<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:operation == 'zoomOut'}"></i> -->
-						<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate-tool':''"  @click.stop="setCloseNav('tool')"></i>
-					</div>
-					<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
-						<div class="exportCanvasBox_left_tool_item exportCanvasBox_left_tool_item_more">
-							<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
-						<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
-						<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
-						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
-						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
-						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
-						</div>
-					</div>
-				</div>
-				<div class="exportCanvasBox_center">
-					<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
-					<!-- <div>
+              <i
+                class="icon iconfont icon-xiala"
+                :class="closeNav.tool ? 'icon-rotate-tool' : ''"
+                @click.stop="setCloseNav('tool')"
+              ></i>
+            </div>
+            <div
+              class="exportCanvasBox_left_tool exportCanvasBox_left_item"
+              :class="{ closeNav: closeNav.tool }"
+            >
+              <div
+                class="exportCanvasBox_left_tool_item exportCanvasBox_left_tool_item_more"
+              >
+                <i
+                  class="icon iconfont icon-xian"
+                  @click="setOperation('fold')"
+                  :class="{ active: operation == 'fold' }"
+                ></i>
+                <i
+                  class="icon iconfont icon-checkbox-full"
+                  @click="setOperation('rect')"
+                  :class="{ active: operation == 'rect' }"
+                ></i>
+                <!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
+                <!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
+                <i
+                  class="icon iconfont icon-sanjiaoxing"
+                  @click="setOperation('triangle')"
+                  :class="{ active: operation == 'triangle' }"
+                ></i>
+                <i
+                  class="icon iconfont icon-tx-fill-tuoyuanxing"
+                  @click="setOperation('ellipse')"
+                  :class="{ active: operation == 'ellipse' }"
+                ></i>
+              </div>
+            </div>
+          </div>
+          <div class="exportCanvasBox_center">
+            <div
+              class="editFrontBack_pencilbtn"
+              v-show="!isShowMark"
+              :style="pencilbtnStyle"
+            ></div>
+            <!-- <div>
 						<div>
 							<div></div>
 							<span>16:9</span>
 						</div>
 					</div> -->
-				</div>
-				<div class="exportCanvasBox_scroll">
-					<div></div>
-				</div>
-			</div>
-            
-			
-			<div class="exportCanvasBox_bottom">
-				
-				<div class="exportCanvasBox_left_btn Guide_1_38">
-					<div class="exportCanvasBox_left_credits" v-show="credits<1">
-						<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
-					</div>
-					<!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
-					<div class="subitOkPreviewBtn" @click="setSubmit">{{ $t('exportModel.Save') }}</div>
-					<div class="subitOkPreviewBtn" @click="setShare">{{ $t('exportModel.Share') }}</div>
-					<div class="subitOkPreviewBtn" @click="setExport">{{ $t('exportModel.Export') }}</div>
-				</div>
-			</div>
-            <!-- <div class="exportCanvasBox_right">
+          </div>
+          <div class="exportCanvasBox_scroll">
+            <div></div>
+          </div>
+        </div>
+
+        <div class="exportCanvasBox_bottom">
+          <div class="exportCanvasBox_left_btn Guide_1_38">
+            <div class="exportCanvasBox_left_credits" v-show="credits < 1">
+              <div>
+                <span class="icon iconfont icon-zhuyi"></span
+                >{{ $t("exportModel.insufficient") }}
+              </div>
+            </div>
+            <!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
+            <div class="subitOkPreviewBtn" @click="setSubmit">
+              {{ $t("exportModel.Save") }}
+            </div>
+            <div class="subitOkPreviewBtn" @click="setShare">
+              {{ $t("exportModel.Share") }}
+            </div>
+            <div class="subitOkPreviewBtn" @click="setExport">
+              {{ $t("exportModel.Export") }}
+            </div>
+          </div>
+        </div>
+        <!-- <div class="exportCanvasBox_right">
                 <div class="exportCanvasBox_title">
 					High-definition Download
 				</div>
@@ -256,2674 +533,2942 @@
 					<div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div>
 				</div>
             </div> -->
-			<!-- <div @click="toSvg()">2312312312</div> -->
+        <!-- <div @click="toSvg()">2312312312</div> -->
 
-            <div class="mark_loading" v-show="isShowMark">
-                <a-spin size="large" />
-            </div>
+        <div class="mark_loading" v-show="isShowMark">
+          <a-spin size="large" />
         </div>
-		<a-modal 
-			v-model:visible="showSRExport"
-			class="modal_component SRExport generalModel"
-			width="48%"
-			:maskClosable="false"
-			:centered="true"
-			:closable="false"
-			:keyboard="false"
-        	:footer="null"
-			:mask="false"
-		>
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
-			</div>
-		</div>
-			<div class="modal_title_text">
-				<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
-				<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}</div>
-			</div>
-			<div class="SRExport_operate">
-				<div class="SRExport_operate_box">
-					<div>{{ $t('exportModel.Scale') }}:</div>
-					<!-- <input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/> -->
-					<!-- <a-select ref="select" class="SRExport_operate_sclae" size="small" v-model:value="scaleSR"
+      </div>
+      <a-modal
+        v-model:visible="showSRExport"
+        class="modal_component SRExport generalModel"
+        width="48%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+        :keyboard="false"
+        :footer="null"
+        :mask="false"
+      >
+        <div class="generalModel_btn">
+          <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+            <i class="fi fi-rr-cross-small"></i>
+          </div>
+        </div>
+        <div class="modal_title_text">
+          <div class="modal_title_text_max">{{ $t("exportModel.SR") }}</div>
+          <div class="modal_title_text_intro">
+            {{
+              $t("exportModel.requiresCredits", {
+                data: allExportSR.filter((item) => item.checked).length * 5,
+              })
+            }}
+          </div>
+        </div>
+        <div class="SRExport_operate">
+          <div class="SRExport_operate_box">
+            <div>{{ $t("exportModel.Scale") }}:</div>
+            <!-- <input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/> -->
+            <!-- <a-select ref="select" class="SRExport_operate_sclae" size="small" v-model:value="scaleSR"
 						style="flex: 1"
 						@change="setScaleSR"
 						>
 						<a-select-option class="label_select_item" v-for="item in scaleSRList" :value="item.value">
 						</a-select-option>
 					</a-select> -->
-					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==2}" @click="setScaleSR(2)">2</div>
-					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==4}" @click="setScaleSR(4)">4</div>
-					<!-- <div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div> -->
-				</div>
-				<div :class="['check_all_block',allChecked ? 'check_all' : '']" @click="selectAllImg()">
-					<div class="check_block"><div class="check_block_body"></div></div>
-					<div>all</div>
-				</div>
-			</div>
-			<div class="SRExport_img">
-				<div class="SRExport_img_item_box" v-for="item in allExportSR" @click="selectImg(item)">
-					<input type="checkbox" v-model="item.checked">
-					<img class="SRExport_img_item" :src="item.imgUrl" alt="">
-				</div>
-			</div>
-			<div class="generalModelOperate_endBtn">
-				<div class="generalModelOperate_btn_cancel" @click="cancelSRExport">{{ $t('exportModel.Cancel') }}</div>
-				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
-			</div>
-		</a-modal>
-		<publish ref="publish" @clearPublish="clearPublish"></publish>
-		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction" @clearLiquefaction="clearLiquefaction"></liquefaction>
+            <div
+              class="SRExport_operate_item_sclae"
+              :class="{ active: scaleSR == 2 }"
+              @click="setScaleSR(2)"
+            >
+              2
+            </div>
+            <div
+              class="SRExport_operate_item_sclae"
+              :class="{ active: scaleSR == 4 }"
+              @click="setScaleSR(4)"
+            >
+              4
+            </div>
+            <!-- <div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div> -->
+          </div>
+          <div
+            :class="['check_all_block', allChecked ? 'check_all' : '']"
+            @click="selectAllImg()"
+          >
+            <div class="check_block"><div class="check_block_body"></div></div>
+            <div>all</div>
+          </div>
+        </div>
+        <div class="SRExport_img">
+          <div
+            class="SRExport_img_item_box"
+            v-for="item in allExportSR"
+            @click="selectImg(item)"
+          >
+            <input type="checkbox" v-model="item.checked" />
+            <img class="SRExport_img_item" :src="item.imgUrl" alt="" />
+          </div>
+        </div>
+        <div class="generalModelOperate_endBtn">
+          <div class="generalModelOperate_btn_cancel" @click="cancelSRExport">
+            {{ $t("exportModel.Cancel") }}
+          </div>
+          <div
+            class="generalModelOperate_btn_ok"
+            :class="[
+              credits < allExportSR.filter((item) => item.checked).length * 5
+                ? 'active'
+                : '',
+            ]"
+            @click="setExportSR"
+          >
+            OK
+          </div>
+        </div>
+      </a-modal>
+      <publish ref="publish" @clearPublish="clearPublish"></publish>
+      <liquefaction
+        ref="liquefaction"
+        @submitLiquefaction="submitLiquefaction"
+        @clearLiquefaction="clearLiquefaction"
+      ></liquefaction>
     </a-modal>
-</div>
+  </div>
 </template>
 <script>
-import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,onBeforeUnmount
+import {
+  defineComponent,
+  computed,
+  h,
+  ref,
+  nextTick,
+  inject,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
 } from "vue";
 import { Https } from "@/tool/https";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import { useStore } from "vuex";
 import JSZip, { forEach } from "jszip";
 // import fabric from 'fabric';
 import { message, Modal } from "ant-design-vue";
-import domTurnImg from '@/tool/domTurnImg'
-import { openGuide,driverObj__ } from "@/tool/guide";
-const FileSaver = require("file-saver");
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetRemoveImage } from "@/tool/canvasDrawing";
+import domTurnImg from "@/tool/domTurnImg";
+import { openGuide, driverObj__ } from "@/tool/guide";
+import FileSaver from "file-saver";
+import {
+  exportSele,
+  JSRectUpdata,
+  JSchangeType,
+  JScanvasMouseDown,
+  JScanvasMouseMove,
+  JScreateCheck,
+  JSSetTexture,
+  JSSetRemoveImage,
+} from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
-import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
+import {
+  isMoible,
+  calculateGradientCoordinate,
+  base64ToFile,
+} from "@/tool/util";
 import publish from "@/component/WorksPage/publish.vue";
 import liquefaction from "@/component/modules/liquefaction.vue";
 import { getMousePosition } from "@/tool/mdEvent";
 
 export default defineComponent({
-    components: {
-        scaleImage,
-        ExportNewCoolection,
-		publish,
-		liquefaction,
-    },
-    props: ["msg", "sketchCatecoryList",'setTask'],
-    setup(props,{emit}) {
-		const {t} = useI18n()
-        const store = useStore();
-		let driver__ = computed(()=>{
-			return store.state.Guide.guide
-		})
-		let isWindow = true
-        let showUpgradePlan = ref(false);
-        let canvas = ref({});
-        // let canvasDom = ref()
-        let canvasWH = ref({
-            width: 400,
-            height: 0,
-        });
-		let pencilbtnStyle = ref({
-			background:'',
-			width:0+'px',
-			height:0+'px',
-			display:'none',
-			left:0+'px',
-			top:0+'px',
-		})
-		let publish = ref()
-		// canvasWH.value.width = [window.innerWidth/2.4]
-		// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
-        let credits = computed(() => {
-            return store.state.UserHabit.credits.value;
-        });
-      
-        let allBoardData = computed(() => {
-            return store.state.UploadFilesModule.allBoardData;
-        });
-        let likeDesignCollectionList = computed(() => {
-            return store.state.HomeStoreModule.likeDesignCollectionList;
-        });
-        let isShowMark = ref(false);
-        // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
-		let position = {
-			//设置每个图形位置的初始值
-			x: 0,
-			y: 0,
-			height: 0,
-		};
-		let canvasScale = 1; //canvas放大缩小倍率
-		let sketchGrouping = 6; //sketch分组
-		let likeDesign = 4; //整体图分组
-		let disposeMoodboardShow = true;
-		let canvasState = ref()//存放canvas操作
-		let reverseCanvasState = ref([])//存放canvas操作
-		let normalCanvasState = ref([])//存放canvas操作
-		let isLoadCanvas = false//撤回或者反撤回false为撤回
-		let userlikeGroupId = 0
-		let imgWidth = {} //这是设置画布等宽
-		let submitCanvasContent = null
-		let contentKeyList = []
-		let init = (productData)=>{
-			userlikeGroupId = productData.userlikeGroupId
-			allBoardData.value[productData.key] = productData.imgList;
-			contentKeyList = [
-				"disposeMoodboard",
-				"moodboardFiles",
-				"printboardFiles",
-				"colorBoards",
-				"sketchboardFiles",
-				"likeDesignCollectionList",
-				productData.key,
-			];
-			const userAgent = navigator.userAgent.toLowerCase();
-			if (userAgent.indexOf('windows') !== -1) {
-				isWindow = true
-			}else if(userAgent.indexOf('macintosh') !== -1 || userAgent.indexOf('mac os') !== -1) {
-				isWindow = false
-			}
-			createCanvas()
-		}
-		let setCanvasData = async (oldExportCanvas)=>{
-			let oldKey = "";
-			let margin = 20; //每个图形边距
-			let maxHeight = 0
-			let sketchXy = {x:0,y:0}
-			
-			contentKeyList.forEach((item)=>{
-				if(item !== 'likeDesignCollectionList')imgWidth[item] = setImageWidth(item)
-			})
-			
-			// arr.forEach((item,index)=>{
-			if(oldExportCanvas){
-				canvasWH.value.height = oldExportCanvas.canvasHeight
-				canvas.setHeight(canvasWH.value.height);
-				canvas.loadFromJSON(oldExportCanvas, () => {});
-				isShowMark.value = false
-			}else{
-				canvasWH.value.height = 500
-				canvas.setHeight(canvasWH.value.height);
-				isShowMark.value = false
-				await nextTick(async ()=>{
-					for (const item of contentKeyList) {
-						for (const key in allBoardData.value) {
-							if (item == key) {
-								//循环渲染顺序
-								let sketchGroupingItem = [];
-								if (
-									item == "moodboardFiles" &&
-									!disposeMoodboardShow
-								) {
-									continue;
-								}
-								for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
-									await new Promise(async (resolve, reject) => {
-										if(!allItem){
-											resolve()
-										}
-										maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
-										if (key == "colorBoards") {
-											let rect = setGroup(allItem)
-											if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
-												position.x = 0;
-												position.y = maxHeight;
-											}
-											let group = setCanvasColor(position.y,position.x,rect)
-											oldKey = key;
-											position.x += rect.width + margin;
-											position.height = group.height + margin;
-											resolve();
-										} else {
-											let itemCanvasImg = allItem.imgUrl;
-											if (key == "likeDesignCollectionList") {
-												
-												itemCanvasImg =
-													allItem.designOutfitUrl;
-											}
-											fabric.Image.fromURL(itemCanvasImg,(img) => {
-												if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img); 
-												let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
-												if(key == "sketchboardFiles"){
-													if(allItemIndex == 0){
-														position.x = 0;
-														position.y = maxHeight;
-													}
-												}else{
-													if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
-														position.x = 0;
-														position.y = maxHeight;
-													}
-												}
-												setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
-												position.height = img.height * scaleWH + margin;
-												if (key == "sketchboardFiles") {
-													if (sketchGroupingItem.length <sketchGrouping+1) {
-														sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
-													}
-													if (sketchGroupingItem.length >sketchGrouping) {
-														let sketchXyIndex = {
-															maxIndex: 0,
-															maxNum: 0,
-															minNum: 999999,
-															minIndex: 0,
-														};
-														sketchGroupingItem.forEach(
-															(sketchItem,sketchIndex) => {
-																if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
-																	sketchXyIndex.minNum = sketchItem.y + sketchItem.height
-																	sketchXyIndex.minIndex = sketchIndex;
-																}
-																if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
-																	sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
-																	sketchXyIndex.maxIndex = sketchIndex;
-																}
-															}
-														);
-														sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
-														// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
-														if (allBoardData.value[key].length == allItemIndex + 1) {
-															maxHeight = sketchXyIndex.maxNum
-														} else {
-															position = sketchGroupingItem[sketchXyIndex.minIndex];
-														}
-													
-													}
-												}
-												if(key == "sketchboardFiles" && sketchGroupingItem.length >sketchGrouping){
-													}else{
-														position.x += img.width * scaleWH + margin;
-													}
-													img.lock_rotation = true;
-													oldKey = key;
-													resolve()
-												canvas.add(img);
-												
-											},{ crossOrigin: "Anonymous" });
-										}
-									});
-								}
-							}
-						}
-						if(position.y+position.height>canvasWH.value.height){
-							canvasWH.value.height =  Math.floor(position.y+position.height)
-							canvas.setHeight(canvasWH.value.height);
-						}
-					}
-				})
-				isShowMark.value = false
-			}
-			updateCanvasState('')//加载完成后记录一下
-		}
-        let createCanvas = (oldExportCanvas) => {
-            showUpgradePlan.value = true;
-			clearTimeout(submitCanvasContent)
-			setCanvasKeyDown()
-			// document.addEventListener("keydown", setCanvasKeyDown);
-			// document.addEventListener("keyup", clearCanvasKeyDown);
-			normalCanvasState.value = []
-			reverseCanvasState.value = []
-			allBoardData.value.likeDesignCollectionList =
-                    likeDesignCollectionList;
-            nextTick().then(async () => {
-                let canvasBox = document.querySelector(".Export .exportCanvasBox_center");
-				canvasWH.value.width = canvasBox.offsetWidth - 10
-				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
-				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
-				var canvasDom = document.createElement("canvas");
-				if(oldCanvasDom)oldCanvasDom.remove()
-				if(oldCanvasDom)loadingShow.value = false
-				if(oldCanvasDom1)oldCanvasDom1.remove()
-               
-                canvasBox.appendChild(canvasDom);
-                canvas = new fabric.Canvas(canvasDom, {
-                    backgroundColor: "rgba(255, 255, 255)",
-                    width: canvasWH.value.width,
-                    height: canvasWH.value.height,
-                    isDrawingMode: false, // 开启绘图模式
-					selectionFullyContained: true,
-					selectionKey:'ctrlKey',
-					includeDefaultValues: false,//尚未测试 精简导出JSON
-                });
-				canvasOnDrop()//开启鼠标到画布事件
-				if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
-					JSSetRemoveImage(deleteObject)
-				}else{
-					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObject
-				}
-				// setRemoveImage()//设置元素删除
-				canvas.on("object:modified", ()=>{
-					updateCanvasState()
-				});
-				canvas.preserveObjectStacking = true;
-				//鼠标移动
-				canvas.on("mouse:move", event =>setCanvasMove(event));
-				canvas.on("mouse:down", event=>setCanvasDown(event));
-				canvas.on("mouse:up", event=>setCanvasUp(event));
+  components: {
+    scaleImage,
+    ExportNewCoolection,
+    publish,
+    liquefaction,
+  },
+  props: ["msg", "sketchCatecoryList", "setTask"],
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const store = useStore();
+    let driver__ = computed(() => {
+      return store.state.Guide.guide;
+    });
+    let isWindow = true;
+    let showUpgradePlan = ref(false);
+    let canvas = ref({});
+    // let canvasDom = ref()
+    let canvasWH = ref({
+      width: 400,
+      height: 0,
+    });
+    let pencilbtnStyle = ref({
+      background: "",
+      width: 0 + "px",
+      height: 0 + "px",
+      display: "none",
+      left: 0 + "px",
+      top: 0 + "px",
+    });
+    let publish = ref();
+    // canvasWH.value.width = [window.innerWidth/2.4]
+    // canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
+    let credits = computed(() => {
+      return store.state.UserHabit.credits.value;
+    });
 
-				//双击
-				canvas.on("mouse:dblclick", event=>{
-					if(operation.value == 'fold'){
-						foldEnd('Enter')
-					}
-				});
-				// canvas.on('path:created', (event)=>{updateCanvasState()});
-				// canvas.on("selection:created", (event)=>{setZIndex(event)});
-				// canvas.on('object:removed', function() {
-				// });
-				// canvas.on("object:added", (obj)=>{
-				// 	obj.target.cornerSize = 10
-				// 	obj.target.transparentCorners = false
-				// });
-				initAligningGuidelines(canvas,true)
-				JSchangeType(canvas,'init')
-				pencilbtnStyle.value.background = '#fff'
-				fabric.Object.prototype.cornerSize = 10
-				fabric.Object.prototype.transparentCorners = false 
-				// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
-                
-               
-				setOperation('move')
-				submitCanvasContent = setInterval(()=>{
-					let data = setCanvasContent(true)
-					if(data.objects.length == 0){
-						clearTimeout(submitCanvasContent)
-						return
-					}
-					data.canvasHeight = canvasWH.value.height
-					localStorage.setItem('canvasContent',JSON.stringify(data))
-					localStorage.setItem('userlikeGroupId',userlikeGroupId)
-					localStorage.setItem('currentTime',new Date().getTime())
-				},3000)
-				if(driver__.value.driver){
-					driverObj__.moveNext()
-				}
-				nextTick(async ()=>{
-					let oldExportCanvas
-					let localCanvas = localStorage.getItem('canvasContent')
-					let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
-					let currentTime = localStorage.getItem('currentTime')
-					oldExportCanvas = await new Promise((resolve, reject) => {
-						if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
-							Modal.confirm({
-								title: useI18.t('exportModel.jsContent8'),
-								okText: 'Yes',
-								cancelText: 'No',
-								mask:false,
-								centered:true,
-								onOk() {
-									localCanvas = localCanvas?JSON.parse(localCanvas):null
-									resolve(localCanvas)
-								},
-								onCancel(){
-									resolve(null)
-								}
-							});
-						}else{
-							resolve(null)
-						}
-					})
-					if(!oldExportCanvas){
-						let data = {
-							userLikeGroupId:userlikeGroupId
-						}
-						oldExportCanvas = await new Promise((resolve, reject) => {
-							Https.axiosPost(Https.httpUrls.exportSearch, data)
-							.then((rv) => {
-								resolve(rv)
-							})
-							.catch((rv) => {
-								resolve(null)
-							});
-						})
-					}
-					setCanvasData(oldExportCanvas)
-				})
-            });
-			
-        };
-		let deleteObject = ()=> {
-				// var target = [transform.target];
-				if(!canvas.getActiveObjects()){
-					return
-				}
-				let target = canvas.getActiveObjects()
+    let allBoardData = computed(() => {
+      return store.state.UploadFilesModule.allBoardData;
+    });
+    let likeDesignCollectionList = computed(() => {
+      return store.state.HomeStoreModule.likeDesignCollectionList;
+    });
+    let isShowMark = ref(false);
+    // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
+    let position = {
+      //设置每个图形位置的初始值
+      x: 0,
+      y: 0,
+      height: 0,
+    };
+    let canvasScale = 1; //canvas放大缩小倍率
+    let sketchGrouping = 6; //sketch分组
+    let likeDesign = 4; //整体图分组
+    let disposeMoodboardShow = true;
+    let canvasState = ref(); //存放canvas操作
+    let reverseCanvasState = ref([]); //存放canvas操作
+    let normalCanvasState = ref([]); //存放canvas操作
+    let isLoadCanvas = false; //撤回或者反撤回false为撤回
+    let userlikeGroupId = 0;
+    let imgWidth = {}; //这是设置画布等宽
+    let submitCanvasContent = null;
+    let contentKeyList = [];
+    let init = (productData) => {
+      userlikeGroupId = productData.userlikeGroupId;
+      allBoardData.value[productData.key] = productData.imgList;
+      contentKeyList = [
+        "disposeMoodboard",
+        "moodboardFiles",
+        "printboardFiles",
+        "colorBoards",
+        "sketchboardFiles",
+        "likeDesignCollectionList",
+        productData.key,
+      ];
+      const userAgent = navigator.userAgent.toLowerCase();
+      if (userAgent.indexOf("windows") !== -1) {
+        isWindow = true;
+      } else if (
+        userAgent.indexOf("macintosh") !== -1 ||
+        userAgent.indexOf("mac os") !== -1
+      ) {
+        isWindow = false;
+      }
+      createCanvas();
+    };
+    let setCanvasData = async (oldExportCanvas) => {
+      let oldKey = "";
+      let margin = 20; //每个图形边距
+      let maxHeight = 0;
+      let sketchXy = { x: 0, y: 0 };
 
-				target.forEach((item)=>{
-					// var canvas = item.canvas;
-					// canvas.remove(item);
-					canvas.fxRemove(item, {
-						onComplete(){
-						canvas.discardActiveObject(); // 丢弃当前选中的对象
-						canvas.renderAll(); // 重新渲染 Canvas
-						}
-					})
-					canvas.FX_DURATION = 300
-				})
-				// canvas.requestRenderAll();
-				// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
-				// canvas.discardActiveObject(); // 丢弃当前选中的对象
-				// canvas.renderAll(); // 重新渲染 Canvas
-				updateCanvasState('remove')
-			}
-		
-		
-		let setImageWidth = (key,img)=>{
-			let imgWidth = canvasWH.value.width; //这是设置画布等宽
-			if (
-				disposeMoodboardShow &&
-				key == "disposeMoodboard" &&
-				allBoardData.value[key].length != 0 &&
-				allBoardData.value[key][0] != null
-			) {
-				//如果是mood 需要判断用户是否点击layout
-				disposeMoodboardShow = false;
+      contentKeyList.forEach((item) => {
+        if (item !== "likeDesignCollectionList")
+          imgWidth[item] = setImageWidth(item);
+      });
 
-				imgWidth = canvasWH.value.width / 2;
-			}
-			if(key == 'upImgFiles'){
-				imgWidth = canvasWH.value.width / 8;
-				// imgWidth = canvasWH.value.width / 4;
-			}
-			if (key == "printboardFiles") {
-				imgWidth = canvasWH.value.width / 14;
-				// imgWidth = canvasWH.value.width / 8;
-			}
-			if (key == "sketchboardFiles"||key == 'moodboardFiles'||key == 'FinalizeImage') {
-				imgWidth =
-					(canvasWH.value.width -
-						(sketchGrouping - 1) * 20) /
-					sketchGrouping;
-			}
-			if (key == "likeDesignCollectionList") {
-				if(img){
-					let imgObj = JSON.parse(JSON.stringify(img))
-					let height = imgObj.height
-					imgObj.height = canvasWH.value.width / 8 * 1.8
-					let heightScale = imgObj.height / height
-					imgWidth = imgObj.width * heightScale
-				}
-			}
-			return imgWidth
-		}
-		let setCanvasImage = (img,key,left,top,data)=>{
-			// data
-			let imgId = 0
-			let minioUrl = ''//表示收藏或者generate
-			let imgUrl = data.imgUrl
-			if (key == "likeDesignCollectionList") {
-				imgUrl = data.designOutfitUrl;
-				imgWidth[key] = setImageWidth(key,img); 
-			}
-			if(key == 'upImgFiles')imgWidth[key] = setImageWidth(key,img); 
-
-			// let url = imgUrl.split('?')[0]
-			// var match = url.match(/^(?:https?:\/\/[^\/]+)\/(.*)/);
-			const { pathname } = new URL(imgUrl);
-			const result = pathname.slice(1);
-			minioUrl = result
-			// let id = 
-			let proportion = img.height / img.width; //计算图形宽高比例
-			// let imgWidth = setImageWidth(key)
-			let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
-			img.set({
-				// width: imgWidth[key]/img.width,
-				// height: canvasWH.value.height/img.height,
-				left,
-				top,
-				imgId,
-				minioUrl,
-				scaleX:
-					imgWidth[key] / img.width,
-				scaleY:(img.width * proportion * scaleWH) / img.height,
-				// cornerSize: 10, // 选中时，角的大小为20
-				// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-				lockRotation: true,
-			});
-		}
-		let setExportCanvas = async ()=>{
-			await calculateHeight()
-			canvas.setDimensions({ height: canvasWH.value.height });
-			canvas.renderAll();
-			return canvas.toDataURL({
-				format: "png", // 导出格式为 PNG
-				quality: 1, // 图片质量为 1（最高质量）
-			});
-		}
-		let calculateHeight = ()=>{
-			return new Promise((resolve, reject) =>{
-				var objects = canvas.getObjects();
-				var maxHeight = 0;
-				Modal.confirm({
-					title: useI18.t('exportModel.jsContent9'),
-					okText: 'Yes',
-					cancelText: 'No',
-					mask:false,
-					centered:true,
-					onOk() {
-						objects.forEach(function(obj) {
-							var objBottom = obj.top + obj.height*obj.scaleY;
-							if (objBottom > maxHeight) {
-								maxHeight = objBottom;
-							}
-						});
-						canvasWH.value.height = Math.round(maxHeight)+30
-						
-						resolve(canvasWH.value.height)
-					},
-					onCancel(){
-						resolve(canvasWH.value.height)
-					}
-				});
-			})
-		}
-        //设置导出
-        let setExport = async () => {
-			initAligningGuidelines(canvas,false)
-            var imageDataURL = await setExportCanvas()
-            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") {
-					if(!(allBoardData.value[key] instanceof Array)) continue
-                    for (let item of allBoardData.value[key]) {
-                        if (
-                            key == "disposeMoodboard" &&
-                            allBoardData.value[key][0] == undefined
-                        ) {
-                            break;
-                        }
-
-                        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 + "." + data.imgUrl.split(".").pop().split("?").shift();
-                        }
-						if (key == "FinalizeImage") {
-                            data.imgUrl = item.url;
-                            data.name = "Finalize" + index + "." + data.imgUrl.split(".").pop().split("?").shift();
-                        }
-                        img.push(data);
-                        index++;
-                    }
-                    num++;
+      // arr.forEach((item,index)=>{
+      if (oldExportCanvas) {
+        canvasWH.value.height = oldExportCanvas.canvasHeight;
+        canvas.setHeight(canvasWH.value.height);
+        canvas.loadFromJSON(oldExportCanvas, () => {});
+        isShowMark.value = false;
+      } else {
+        canvasWH.value.height = 500;
+        canvas.setHeight(canvasWH.value.height);
+        isShowMark.value = false;
+        await nextTick(async () => {
+          for (const item of contentKeyList) {
+            for (const key in allBoardData.value) {
+              if (item == key) {
+                //循环渲染顺序
+                let sketchGroupingItem = [];
+                if (item == "moodboardFiles" && !disposeMoodboardShow) {
+                  continue;
                 }
-            }
-            let dataList = [];
-            likeDesignCollectionList.value.forEach((item) => {
-                dataList.push(item.designItemId);
-                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.withCredentials = false; 
-                xmlhttp.onload = function () {
-                    if (this.status == 200) {
-                        resolve(this.response);
-                    } else {
-                        reject(this.status);
+                for (const [allItemIndex, allItem] of allBoardData.value[
+                  key
+                ].entries()) {
+                  await new Promise(async (resolve, reject) => {
+                    if (!allItem) {
+                      resolve();
                     }
-                };
-                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);
+                    maxHeight =
+                      position.y + position.height > maxHeight
+                        ? position.y + position.height
+                        : maxHeight;
+                    if (key == "colorBoards") {
+                      let rect = setGroup(allItem);
+                      if (
+                        position.x + rect.width > canvasWH.value.width ||
+                        oldKey != key
+                      ) {
+                        position.x = 0;
+                        position.y = maxHeight;
+                      }
+                      let group = setCanvasColor(position.y, position.x, rect);
+                      oldKey = key;
+                      position.x += rect.width + margin;
+                      position.height = group.height + margin;
+                      resolve();
+                    } else {
+                      let itemCanvasImg = allItem.imgUrl;
+                      if (key == "likeDesignCollectionList") {
+                        itemCanvasImg = allItem.designOutfitUrl;
+                      }
+                      fabric.Image.fromURL(
+                        itemCanvasImg,
+                        (img) => {
+                          if (item == "likeDesignCollectionList")
+                            imgWidth[item] = setImageWidth(key, img);
+                          let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
+                          if (key == "sketchboardFiles") {
+                            if (allItemIndex == 0) {
+                              position.x = 0;
+                              position.y = maxHeight;
+                            }
+                          } else {
+                            if (
+                              position.x + img.width * scaleWH >
+                                canvasWH.value.width ||
+                              oldKey != key
+                            ) {
+                              position.x = 0;
+                              position.y = maxHeight;
+                            }
+                          }
+                          setCanvasImage(
+                            img,
+                            key,
+                            position.x,
+                            position.y,
+                            allItem
+                          ); //设置图片
+                          position.height = img.height * scaleWH + margin;
+                          if (key == "sketchboardFiles") {
+                            if (
+                              sketchGroupingItem.length <
+                              sketchGrouping + 1
+                            ) {
+                              sketchGroupingItem.push(
+                                JSON.parse(JSON.stringify(position))
+                              );
+                            }
+                            if (sketchGroupingItem.length > sketchGrouping) {
+                              let sketchXyIndex = {
+                                maxIndex: 0,
+                                maxNum: 0,
+                                minNum: 999999,
+                                minIndex: 0,
+                              };
+                              sketchGroupingItem.forEach(
+                                (sketchItem, sketchIndex) => {
+                                  if (
+                                    sketchItem.y + sketchItem.height <
+                                    sketchXyIndex.minNum
+                                  ) {
+                                    sketchXyIndex.minNum =
+                                      sketchItem.y + sketchItem.height;
+                                    sketchXyIndex.minIndex = sketchIndex;
+                                  }
+                                  if (
+                                    sketchItem.y + sketchItem.height >
+                                    sketchXyIndex.maxNum
+                                  ) {
+                                    sketchXyIndex.maxNum =
+                                      sketchItem.y + sketchItem.height;
+                                    sketchXyIndex.maxIndex = sketchIndex;
+                                  }
+                                }
+                              );
+                              sketchGroupingItem[sketchXyIndex.minIndex].y =
+                                sketchXyIndex.minNum;
+                              // sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
+                              if (
+                                allBoardData.value[key].length ==
+                                allItemIndex + 1
+                              ) {
+                                maxHeight = sketchXyIndex.maxNum;
+                              } else {
+                                position =
+                                  sketchGroupingItem[sketchXyIndex.minIndex];
+                              }
+                            }
+                          }
+                          if (
+                            key == "sketchboardFiles" &&
+                            sketchGroupingItem.length > sketchGrouping
+                          ) {
+                          } else {
+                            position.x += img.width * scaleWH + margin;
+                          }
+                          img.lock_rotation = true;
+                          oldKey = key;
+                          resolve();
+                          canvas.add(img);
+                        },
+                        { crossOrigin: "Anonymous" }
+                      );
+                    }
+                  });
+                }
+              }
             }
-			Promise.all(promises)
-                .then(() => {
-					function downloadBlob(blob, filename) {
-						const link = document.createElement('a');
-						const url = URL.createObjectURL(blob);
-						link.href = url;
-						link.download = filename;
-						document.body.appendChild(link);
-						link.click();
-						URL.revokeObjectURL(url);
-						document.body.removeChild(link);
-					}
-                    zip.generateAsync({ type: "blob" }).then((content) => {
-                        // 生成二进制流
-						downloadBlob(content,'DesignFiles')
-                        // FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
-                        isShowMark.value = false;
+            if (position.y + position.height > canvasWH.value.height) {
+              canvasWH.value.height = Math.floor(position.y + position.height);
+              canvas.setHeight(canvasWH.value.height);
+            }
+          }
+        });
+        isShowMark.value = false;
+      }
+      updateCanvasState(""); //加载完成后记录一下
+    };
+    let createCanvas = (oldExportCanvas) => {
+      showUpgradePlan.value = true;
+      clearTimeout(submitCanvasContent);
+      setCanvasKeyDown();
+      // document.addEventListener("keydown", setCanvasKeyDown);
+      // document.addEventListener("keyup", clearCanvasKeyDown);
+      normalCanvasState.value = [];
+      reverseCanvasState.value = [];
+      allBoardData.value.likeDesignCollectionList = likeDesignCollectionList;
+      nextTick().then(async () => {
+        let canvasBox = document.querySelector(
+          ".Export .exportCanvasBox_center"
+        );
+        canvasWH.value.width = canvasBox.offsetWidth - 10;
+        let oldCanvasDom = canvasBox.querySelector(".canvas-container");
+        let oldCanvasDom1 = canvasBox.querySelector("canvas");
+        var canvasDom = document.createElement("canvas");
+        if (oldCanvasDom) oldCanvasDom.remove();
+        if (oldCanvasDom) loadingShow.value = false;
+        if (oldCanvasDom1) oldCanvasDom1.remove();
 
-                    });
-					setSubmit()//导出的时候保存
-					initAligningGuidelines(canvas,true)
+        canvasBox.appendChild(canvasDom);
+        canvas = new fabric.Canvas(canvasDom, {
+          backgroundColor: "rgba(255, 255, 255)",
+          width: canvasWH.value.width,
+          height: canvasWH.value.height,
+          isDrawingMode: false, // 开启绘图模式
+          selectionFullyContained: true,
+          selectionKey: "ctrlKey",
+          includeDefaultValues: false, //尚未测试 精简导出JSON
+        });
+        canvasOnDrop(); //开启鼠标到画布事件
+        if (!fabric.Object.prototype.controls.deleteControl) {
+          //设置元素删除
+          JSSetRemoveImage(deleteObject);
+        } else {
+          fabric.Object.prototype.controls.deleteControl.mouseUpHandler =
+            deleteObject;
+        }
+        // setRemoveImage()//设置元素删除
+        canvas.on("object:modified", () => {
+          updateCanvasState();
+        });
+        canvas.preserveObjectStacking = true;
+        //鼠标移动
+        canvas.on("mouse:move", (event) => setCanvasMove(event));
+        canvas.on("mouse:down", (event) => setCanvasDown(event));
+        canvas.on("mouse:up", (event) => setCanvasUp(event));
 
+        //双击
+        canvas.on("mouse:dblclick", (event) => {
+          if (operation.value == "fold") {
+            foldEnd("Enter");
+          }
+        });
+        // canvas.on('path:created', (event)=>{updateCanvasState()});
+        // canvas.on("selection:created", (event)=>{setZIndex(event)});
+        // canvas.on('object:removed', function() {
+        // });
+        // canvas.on("object:added", (obj)=>{
+        // 	obj.target.cornerSize = 10
+        // 	obj.target.transparentCorners = false
+        // });
+        initAligningGuidelines(canvas, true);
+        JSchangeType(canvas, "init");
+        pencilbtnStyle.value.background = "#fff";
+        fabric.Object.prototype.cornerSize = 10;
+        fabric.Object.prototype.transparentCorners = false;
+        // setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
+
+        setOperation("move");
+        submitCanvasContent = setInterval(() => {
+          let data = setCanvasContent(true);
+          if (data.objects.length == 0) {
+            clearTimeout(submitCanvasContent);
+            return;
+          }
+          data.canvasHeight = canvasWH.value.height;
+          localStorage.setItem("canvasContent", JSON.stringify(data));
+          localStorage.setItem("userlikeGroupId", userlikeGroupId);
+          localStorage.setItem("currentTime", new Date().getTime());
+        }, 3000);
+        if (driver__.value.driver) {
+          driverObj__.moveNext();
+        }
+        nextTick(async () => {
+          let oldExportCanvas;
+          let localCanvas = localStorage.getItem("canvasContent");
+          let localUserlikeGroupId = localStorage.getItem("userlikeGroupId");
+          let currentTime = localStorage.getItem("currentTime");
+          oldExportCanvas = await new Promise((resolve, reject) => {
+            if (
+              localUserlikeGroupId == userlikeGroupId &&
+              new Date().getTime() - currentTime < 21600000
+            ) {
+              Modal.confirm({
+                title: useI18.t("exportModel.jsContent8"),
+                okText: "Yes",
+                cancelText: "No",
+                mask: false,
+                centered: true,
+                onOk() {
+                  localCanvas = localCanvas ? JSON.parse(localCanvas) : null;
+                  resolve(localCanvas);
+                },
+                onCancel() {
+                  resolve(null);
+                },
+              });
+            } else {
+              resolve(null);
+            }
+          });
+          if (!oldExportCanvas) {
+            let data = {
+              userLikeGroupId: userlikeGroupId,
+            };
+            oldExportCanvas = await new Promise((resolve, reject) => {
+              Https.axiosPost(Https.httpUrls.exportSearch, data)
+                .then((rv) => {
+                  resolve(rv);
                 })
-                .catch((res) => {
-                    // message.warning(t('HomeView.jsContent3'));
-                    isShowMark.value = false;
-					initAligningGuidelines(canvas,true)
+                .catch((rv) => {
+                  resolve(null);
                 });
+            });
+          }
+          setCanvasData(oldExportCanvas);
+        });
+      });
+    };
+    let deleteObject = () => {
+      // var target = [transform.target];
+      if (!canvas.getActiveObjects()) {
+        return;
+      }
+      let target = canvas.getActiveObjects();
+
+      target.forEach((item) => {
+        // var canvas = item.canvas;
+        // canvas.remove(item);
+        canvas.fxRemove(item, {
+          onComplete() {
+            canvas.discardActiveObject(); // 丢弃当前选中的对象
+            canvas.renderAll(); // 重新渲染 Canvas
+          },
+        });
+        canvas.FX_DURATION = 300;
+      });
+      // canvas.requestRenderAll();
+      // canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
+      // canvas.discardActiveObject(); // 丢弃当前选中的对象
+      // canvas.renderAll(); // 重新渲染 Canvas
+      updateCanvasState("remove");
+    };
+
+    let setImageWidth = (key, img) => {
+      let imgWidth = canvasWH.value.width; //这是设置画布等宽
+      if (
+        disposeMoodboardShow &&
+        key == "disposeMoodboard" &&
+        allBoardData.value[key].length != 0 &&
+        allBoardData.value[key][0] != null
+      ) {
+        //如果是mood 需要判断用户是否点击layout
+        disposeMoodboardShow = false;
+
+        imgWidth = canvasWH.value.width / 2;
+      }
+      if (key == "upImgFiles") {
+        imgWidth = canvasWH.value.width / 8;
+        // imgWidth = canvasWH.value.width / 4;
+      }
+      if (key == "printboardFiles") {
+        imgWidth = canvasWH.value.width / 14;
+        // imgWidth = canvasWH.value.width / 8;
+      }
+      if (
+        key == "sketchboardFiles" ||
+        key == "moodboardFiles" ||
+        key == "FinalizeImage"
+      ) {
+        imgWidth =
+          (canvasWH.value.width - (sketchGrouping - 1) * 20) / sketchGrouping;
+      }
+      if (key == "likeDesignCollectionList") {
+        if (img) {
+          let imgObj = JSON.parse(JSON.stringify(img));
+          let height = imgObj.height;
+          imgObj.height = (canvasWH.value.width / 8) * 1.8;
+          let heightScale = imgObj.height / height;
+          imgWidth = imgObj.width * heightScale;
+        }
+      }
+      return imgWidth;
+    };
+    let setCanvasImage = (img, key, left, top, data) => {
+      // data
+      let imgId = 0;
+      let minioUrl = ""; //表示收藏或者generate
+      let imgUrl = data.imgUrl;
+      if (key == "likeDesignCollectionList") {
+        imgUrl = data.designOutfitUrl;
+        imgWidth[key] = setImageWidth(key, img);
+      }
+      if (key == "upImgFiles") imgWidth[key] = setImageWidth(key, img);
+
+      // let url = imgUrl.split('?')[0]
+      // var match = url.match(/^(?:https?:\/\/[^\/]+)\/(.*)/);
+      const { pathname } = new URL(imgUrl);
+      const result = pathname.slice(1);
+      minioUrl = result;
+      // let id =
+      let proportion = img.height / img.width; //计算图形宽高比例
+      // let imgWidth = setImageWidth(key)
+      let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
+      img.set({
+        // width: imgWidth[key]/img.width,
+        // height: canvasWH.value.height/img.height,
+        left,
+        top,
+        imgId,
+        minioUrl,
+        scaleX: imgWidth[key] / img.width,
+        scaleY: (img.width * proportion * scaleWH) / img.height,
+        // cornerSize: 10, // 选中时，角的大小为20
+        // transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+        lockRotation: true,
+      });
+    };
+    let setExportCanvas = async () => {
+      await calculateHeight();
+      canvas.setDimensions({ height: canvasWH.value.height });
+      canvas.renderAll();
+      return canvas.toDataURL({
+        format: "png", // 导出格式为 PNG
+        quality: 1, // 图片质量为 1（最高质量）
+      });
+    };
+    let calculateHeight = () => {
+      return new Promise((resolve, reject) => {
+        var objects = canvas.getObjects();
+        var maxHeight = 0;
+        Modal.confirm({
+          title: useI18.t("exportModel.jsContent9"),
+          okText: "Yes",
+          cancelText: "No",
+          mask: false,
+          centered: true,
+          onOk() {
+            objects.forEach(function (obj) {
+              var objBottom = obj.top + obj.height * obj.scaleY;
+              if (objBottom > maxHeight) {
+                maxHeight = objBottom;
+              }
+            });
+            canvasWH.value.height = Math.round(maxHeight) + 30;
+
+            resolve(canvasWH.value.height);
+          },
+          onCancel() {
+            resolve(canvasWH.value.height);
+          },
+        });
+      });
+    };
+    //设置导出
+    let setExport = async () => {
+      initAligningGuidelines(canvas, false);
+      var imageDataURL = await setExportCanvas();
+      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") {
+          if (!(allBoardData.value[key] instanceof Array)) continue;
+          for (let item of allBoardData.value[key]) {
+            if (
+              key == "disposeMoodboard" &&
+              allBoardData.value[key][0] == undefined
+            ) {
+              break;
+            }
+
+            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 +
+                "." +
+                data.imgUrl.split(".").pop().split("?").shift();
+            }
+            if (key == "FinalizeImage") {
+              data.imgUrl = item.url;
+              data.name =
+                "Finalize" +
+                index +
+                "." +
+                data.imgUrl.split(".").pop().split("?").shift();
+            }
+            img.push(data);
+            index++;
+          }
+          num++;
+        }
+      }
+      let dataList = [];
+      likeDesignCollectionList.value.forEach((item) => {
+        dataList.push(item.designItemId);
+        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,
         };
-        //关闭画布
-		let useI18 = useI18n()
-        let cancelDsign = () => {
-			Modal.confirm({
-				title: useI18.t('exportModel.jsContent1'),
-				okText: 'Yes',
-				cancelText: 'No',
-				mask:false,
-				centered:true,
-				onOk() {
-					showUpgradePlan.value = false;
-					canvas.dispose();
-					position = {
-						//设置每个图形位置的初始值
-						x: 0,
-						y: 0,
-						height: 0,
-					};
-					canvasWH.value.height = 0
-					operation.value = 'move'
-					operation.value = 'fill'
-				},
-				// onCancel(){
-				// 	_this.isShowMark.value = false
-				// 	resolve(false)
-				// }
-			});
+        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.withCredentials = false;
+        xmlhttp.onload = function () {
+          if (this.status == 200) {
+            resolve(this.response);
+          } else {
+            reject(this.status);
+          }
         };
-        //设置画布宽高
-        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];
-            }else if(str == 'height'){
-				if(position.y+position.height>maxNum){
-					maxNum = Math.floor(position.y+position.height)
-				}
-			}
-            if (str == "width" && canvasWH.value.width >= maxNum) {
-                canvasWH.value.width = maxNum;
-            } else if (str == "height" && canvasWH.value.height >= maxNum) {
-                canvasWH.value.height = maxNum;
-            }else if(str == 'scale'){
-				scaleSR.value = scaleSR.value < 1 ? 1:scaleSR.value>4? 4:scaleSR.value
-			}
-            canvas.setHeight(canvasWH.value.height);
-            canvas.setWidth(canvasWH.value.width);
-        };
-
-		let closeNav = ref({
-			nav:false,
-			tool:false,
-			shortcut:false,
-		})
-		let setCloseNav = (key)=>{
-			closeNav.value[key] = !closeNav.value[key]
-			// for (const iterator in closeNav.value) {
-			// 	if(key != iterator){
-			// 		closeNav.value[iterator] = false
-			// 	}
-			// }
-		}
-		function multiselect() {//获取整体宽高
-			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
-			const sel = new fabric.ActiveSelection(canvas.getObjects(), {
-				canvas
-			})
-			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({
-			type:'',
-			data:'',
-		})
-		let onDragstart = (type,imgItem)=>{
-			currentType.value.type = type
-			currentType.value.data = imgItem
-		}
-		let present = {}
-		let setDragstart = (type,imgItem)=>{
-			currentType.value.type = type
-			present.upScaleChecked = false
-			present = {}
-			if(imgItem.upScaleChecked){
-			}else{
-				imgItem.upScaleChecked = true
-				present = imgItem
-			}
-			currentType.value.data = imgItem
-		}
-		let canvasOnDrop = ()=>{
-			canvas.on('drop', (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.type) {
-					case 'colorBoards':
-						let rect = setGroup(currentType.value.data)
-						setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
-					break
-					case 'moodboardFiles':
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-					default :
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-				}
-				// 创建完元素，把当前操作的元素类型设置回 null
-				currentType.value.type = null
-				currentType.value.data = null
-
-			})
-		}
-		let setGroup = (data)=>{
-			let rect
-			if(data.gradient){
-				let colorStops = []
-				data.gradient.gradientList.forEach(item=>{
-				    let obj = {
-						offset:item.left.split('%')[0]/100,
-						color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
-					}
-					colorStops.push(obj)
-				})
-				let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
-				let linear = new fabric.Gradient({
-					type: 'linear', // 线性渐变
-					// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
-					coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
-					colorStops: colorStops,
-				})
-				var color = new fabric.Rect({
-					top:0,
-					left:0,
-					width: 110,
-					height: 130,
-					textAlign: "left",
-					fill: linear // 设置渐变填充
-					// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
-				});
-				var text = new fabric.Text('',{
-					left: 0,
-					top: 0,
-					fontSize: 0,
-					fontFamily: "Arial",
-					textAlign: "left",
-					fill: "black",
-				});
-				let text1 = new fabric.Text('',{
-					left: 0,
-					top: 0,
-					width: 20,
-					fontSize: 0,
-					fontFamily: "Arial",
-					textAlign: "left",
-				});
-				rect = {text,text1,color,width:110}
-			}else{
-				var text = new fabric.Text(data.tcx,{
-					left: 0,
-					top: 60,
-					fontSize: 14,
-					fontFamily: "Arial",
-					textAlign: "left",
-					fill: "black",
-				});
-				let text1 = new fabric.Text(data.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(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
-				});
-				rect = {text,text1,color,width}
-			}
-			
-
-			return rect
-		}
-		let setCanvasColor = (top,left,rect)=>{
-			let group
-			group = new fabric.Group([rect.color,rect.text,rect.text1],{
-				left,
-				top,
-				width: rect.width,
-				fill: "rgb(255,255,255)",
-				stroke: "#212121",
-				strokeWidth: 1,
-			});
-			canvas.add(group);
-			return group
-		}
-		// 创建矩形
-		let createImage = async (top, left,key)=> {
-			let itemCanvasImg = currentType.value.data.imgUrl
-			let data = JSON.parse(JSON.stringify(currentType.value.data))
-			if(key == 'likeDesignCollectionList'){
-				itemCanvasImg = currentType.value.data.designOutfitUrl;
-			}
-			await new Promise((resolve,reject)=>{
-				fabric.Image.fromURL(itemCanvasImg,(img) => {
-					setCanvasImage(img,key,left,top,data)//设置图片
-					canvas.add(img);
-					resolve()
-				},{ crossOrigin: "Anonymous" });
-			})
-			updateCanvasState()
-		}
-		//设置画布监听修改添加事件，用来做撤回功能
-		let updateCanvasState = (str) =>{
-				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				if(str == 'loadingCompleted'){
-					// reverseCanvasState.value.push(canvasAsJson);
-				}
-			normalCanvasState.value.push(canvasAsJson);
-			if (isLoadCanvas) {
-				reverseCanvasState.value = []
-				isLoadCanvas = false;
-				canvasState.value = canvasAsJson
-			}
-		}
-		//撤回
-		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				let obj = reverseCanvasState.value.pop()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-				canvasState.value = obj 
-				normalCanvasState.value.push(obj);
-			}else if(str == '' && normalCanvasState.value.length > 1){
-				let obj = normalCanvasState.value.pop()
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
-				reverseCanvasState.value.push(obj);
-				isLoadCanvas = true;
-			}else{
-				return
-			}
-			canvas.loadFromJSON(canvasState.value, () => {});
-		}
-		
-		//在画布进行画画
-		let operation = ref('move')
-		let operationMode = ref('fill')
-		let textureValue = ref(0)//材质信息
-
-		let textureValueChange = (value)=>{
-			textureValue.value = value
-			setTexture()
-		}
-		//铅笔颜色 大小
-		let brushworkValue = ref('PencilBrush')
-		let brushworkChange = (value)=>{
-			brushworkValue.value = value
-			setPencil()
-		}
-
-		// let brushwork = ref('')
-		// 监听键盘的 keydown 和 keyup 事件
-		let keyDown = []
-		const keysList = [
-			{
-				name:useI18.t('exportModel.Painting'),
-				winDowKey:'B',
-				macKey:'B',
-			},{
-				name:useI18.t('exportModel.Eraser'),
-				winDowKey:'E',
-				macKey:'E',
-			},{
-				name:useI18.t('exportModel.Uncheck'),
-				winDowKey:'Ctrl + D',
-				macKey:'Command + D',
-			},{
-				name:useI18.t('exportModel.Revoke'),
-				winDowKey:'Ctrl + Z',
-				macKey:'Command + Z',
-			},{
-				name:useI18.t('exportModel.Retreat'),
-				winDowKey:'Ctrl + Shift + Z',
-				macKey:'Command + Ctrl + Z',
-			},{
-				name:useI18.t('exportModel.ReduceBrushSize'),
-				winDowKey:'[',
-				macKey:'[',
-			},{
-				name:useI18.t('exportModel.IncreaseBrushSize'),
-				winDowKey:']',
-				macKey:']',
-			},{
-				name:useI18.t('exportModel.DrinkingStraw'),
-				winDowKey:'I',
-				macKey:'I',
-			},{
-				name:useI18.t('exportModel.Copy'),
-				winDowKey:'Ctrl + C',
-				macKey:'Command + C',
-			},{
-				name:useI18.t('exportModel.Paste'),
-				winDowKey:'Ctrl + V',
-				macKey:'Command + V',
-			},{
-				name:useI18.t('exportModel.UploadOpenimage'),
-				winDowKey:'Ctrl + O',
-				macKey:'Command + O',
-			},
-		]
-		let canvasKeyDown = (event) => {
-			let keys = ['Enter','Delete','ControlLeft','ShiftLeft','BracketLeft','BracketRight','MetaLeft']
-			var activeObject = canvas.getActiveObject();
-			let state = (activeObject && activeObject.type == 'textbox'&&activeObject.isEditing)
-			if(keys.indexOf(event.code) > -1){
-				event.preventDefault(); 
-			}
-			if(keyDown.indexOf(event.code)>-1 || state){
-			}else{
-				keyDown.push(event.code)
-				// console.log(keyDown.indexOf('ControlLeft') > -1 , keyDown.indexOf('MetaLeft') > -1, event.code == 'KeyC')
-				if(event.code === 'Enter' && operation.value == 'fold'){
-					foldEnd('Enter')
-				}else if(event.key === 'Delete'){
-					deleteObject()
-				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ' && keyDown.indexOf('ShiftLeft') > -1){
-					historyState('reverse')
-				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ'){
-					historyState('')
-				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyC'){
-					copy()
-				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyV'){
-					paste()
-				}else if(keyDown.indexOf('BracketLeft') > -1){
-					let width = canvasPencilWidth.value[operation.value]
-					canvasPencilWidth.value[operation.value] = (width - 5) < 3?3:(width - 5)
-					setPencilWidth()
-				}else if(keyDown.indexOf('BracketRight') > -1){
-					let width = canvasPencilWidth.value[operation.value]
-					canvasPencilWidth.value[operation.value] = (width + 5) > 50?50:(width + 5)
-					setPencilWidth()
-				}else if(keyDown.indexOf('KeyI') > -1){
-					getColor()//吸色
-				}else if(keyDown.indexOf('KeyM') > -1){
-					setOperation('move')
-				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
-					canvas.discardActiveObject().renderAll();
-				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
-					let input = document.querySelector('.uploadImage input')
-					input.click()
-				}else if(keyDown.indexOf('KeyB') > -1){
-					// if(operation.value == 'pencil' || operation.value == 'texture'){
-					setOperation('pencil')
-					// }
-				}else if(keyDown.indexOf('KeyE') > -1){
-					// if(operation.value == 'pencil' || operation.value == 'texture'){
-					setOperation('eraser')
-					// }
-				}
-			}
-		}
-		let getColor = async ()=>{
-			try {
-				const dropper = new EyeDropper();
-				const result = await dropper.open();
-				let hex = result.sRGBHex.replace("#", "");
-				// 将十六进制颜色码拆分成红、绿、蓝三个部分
-				// const r = parseInt(hex.substring(0, 2), 16);
-				// const g = parseInt(hex.substring(2, 4), 16);
-				// const b = parseInt(hex.substring(4, 6), 16);
-				canvasPencilColor.value = result.sRGBHex;
-				setPencilColor()
-			} catch (e) {
-				message.info(this.t('ColorboardUpload.jsContent1'))
-			}
-		}
-		let canvasKeyUp = (event) =>{
-			let keys = ['Enter','Delete','ControlLeft','ShiftLeft','BracketLeft','BracketRight','MetaLeft']
-			if(keys.indexOf(event.code) > -1){
-				event.preventDefault(); 
-			}
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-			}
-		let setCanvasKeyDown = (event)=>{
-			// let e = event || window.event
-			// e.stopPropagation();
-			document.addEventListener('keydown',canvasKeyDown);
-			document.addEventListener('keyup', canvasKeyUp);
-		}
-		let clearCanvasKeyDown = (pointer)=>{
-			// var pointer = canvas.getPointer(pointer);
-			if(!pointer?.target){
-				document.removeEventListener('keydown',canvasKeyDown);
-				document.removeEventListener('keyup', canvasKeyUp);
-			}
-			// var x = pointer.x;
-			// var y = pointer.y;
-
-  // 检查是否鼠标离开了画布
-//   if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
-//     // 执行你的操作
-//   }
-			// if(!x || !y){
-			// 	document.removeEventListener('keydown',canvasKeyDown);
-			// 	document.removeEventListener('keyup', canvasKeyUp);
-			// }	
-		}
-		let canvasPencilColor = ref('#000000')//画笔颜色
-		// let canvasPencilWidth = ref(20)//画笔大小
-		let canvasPencilWidth = ref({
-
-		})
-		let fontFamily = ref({})
-		let textFontFamilyList = ref([])
-		let allSelectWidth = ref(-1)//多选或单选的宽度
-		let allSelect = ref([])//多选或单选的宽度
-		let setOperation = (str)=>{
-			operation.value = str
-			//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
-			canvas.discardActiveObject();//取消所有选中边框
-			if(createPatterningIs){
-				canvas.remove(currentPatterning)
-			}
-			removeSetText()
-			initAligningGuidelines(canvas,false)
-			canvas.remove(polyLineBtn)
-			if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'move'){
-				JSchangeType(canvas,'init')
-				initAligningGuidelines(canvas,true)
-				setMove()
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'texture'){
-				setTexture()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'eraser'){
-				setEraser()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'text'){
-				setMove()
-				setText()
-				JSchangeType(canvas,'init')
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'zoomIn' || str == 'zoomOut'){
-				pencilbtnStyle.value.display = `none`
-				canvas.forEachObject((obj) =>obj.selectable = false);
-			}else if(str){
-				pencilbtnStyle.value.display = `none`
-				canvas.forEachObject((obj) =>obj.selectable = false);
-				canvas.isDrawingMode = false
-			}
-			setPencilWidth()
-		}
-		let _setAllSelectTime = null
-		let setAllSelectWidth = ()=>{
-			clearTimeout(_setAllSelectTime)
-			allSelect.value.forEach((item)=>{
-				// item.width = allSelectWidth.value
-				item.scaleX = allSelectWidth.value/item.width
-				item.scaleY = item.scaleX
-				item.setCoords()
-			})
-			_setAllSelectTime = setTimeout(() => {
-				updateCanvasState('')//加载完成后记录一下
-			}, 1500);
-		}
-		let _clipboard  = null // 复制到的内容
-		let copy = () => {//复制
-			var activeObject = canvas.getActiveObject();
-			if(!activeObject){
-				return
-			}
-			activeObject.clone(function(cloned) {
-				_clipboard = cloned;
-			})
-		}
-		let paste = () => {//粘贴
-			if(!_clipboard){
-				return
-			}
-			_clipboard.clone(clonedObj => {
-				canvas.discardActiveObject() // 取消选择
-
-				// 设置新内容的坐标位置
-				clonedObj.set({
-						left: clonedObj.left + 10,
-						top: clonedObj.top + 10,
-						evented: true
-					})
-
-				if (clonedObj.type === 'activeSelection') {
-						// 活动选择需要一个对画布的引用
-						clonedObj.canvas = canvas;
-						clonedObj.forEachObject(function(obj) {
-							canvas.add(obj)
-						})
-
-						clonedObj.setCoords()
-					} else {
-						canvas.add(clonedObj)
-					}
-					_clipboard.top += 10
-					_clipboard.left += 10
-					canvas.setActiveObject(clonedObj)
-					canvas.requestRenderAll()
-			})
-			updateCanvasState()
-		}
-		let textureList = ref([])
-		for (let index = 0; index < 20; index++) {
-			textureList.value.push({value:index,url:`/image/texture/texture${index}.webp`})
-		}
-		let setTexture = async ()=>{
-			canvas.isDrawingMode = true//开启绘画模式
-			let img = await JSSetTexture(textureList.value[textureValue.value].url)
-			
-			let patternBrush = new fabric.PatternBrush(canvas) 
-			patternBrush.source = img 
-			patternBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20; // 设置画笔大小 
-			canvas.freeDrawingBrush = patternBrush 
-		}
-		let setOperationMode = (str) =>{
-			operationMode.value = str
-		}
-		let uploadImage = (event)=>{
-			let input = document.querySelector('.uploadImage input')
-			const file = event.target.files[0];
-			setOperation('move')
-			if (file) {
-				const reader = new FileReader();
-				reader.onload = (e) => {
-					let file = base64ToFile(e.target.result,'upload')
-					let formData = new FormData();
-					formData.append("file", file);
-					let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-					Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
-						rv.imgUrl = rv.minioUrl
-						fabric.Image.fromURL(rv.minioUrl,(img) => {
-							console.log(canvas.wrapperEl.parentNode.scrollTop);
-							setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,rv)
-							canvas.add(img);
-						},{ crossOrigin: "Anonymous" })
-					})
-					input.value = ''
-				};
-				reader.readAsDataURL(file);
-			}
-		}
-		let setLayerIndex = (str) =>{//设置优先级
-			var activeObject = canvas.getActiveObject();
-			switch (str) {
-				case 'Front':
-					canvas.bringToFront(activeObject)//顶层
-				break
-				case 'Back':
-					canvas.sendToBack(activeObject)//底层
-				break
-				case 'Forward':
-					canvas.bringForward(activeObject)
-				break
-				case 'Backwards':
-					canvas.sendBackwards(activeObject)
-				break
-			}
-
-		}
-		let hexToRgba=(hex, alpha)=> {
-			const r = parseInt(hex.slice(1, 3), 16);
-			const g = parseInt(hex.slice(3, 5), 16);
-			const b = parseInt(hex.slice(5, 7), 16);
-			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-		}
-		let brushList = ref([
-			{
-				value:'PencilBrush',
-				url:'/image/brush/PencilBrush.jpg'
-			},{
-				value:'Marking',
-				url:'/image/brush/PencilBrush-2.jpg'
-			},{
-				value:'InkBrush',
-				url:'/image/brush/InkBrush.jpg'
-			},{
-				value:'CrayonBrush',
-				url:'/image/brush/CrayonBrush.jpg'
-			},{
-				value:'RibbonBrush',
-				url:'/image/brush/RibbonBrush.jpg'
-			},{
-				value:'MarkerBrush',
-				url:'/image/brush/MarkerBrush.jpg'
-			},{
-				value:'WritingBrush',
-				url:'/image/brush/WritingBrush.jpg'
-			},{
-				value:'LongfurBrush',
-				url:'/image/brush/LongfurBrush.jpg'
-			},{
-				value:'SpraypaintBrush',
-				url:'/image/brush/SpraypaintBrush.jpg'
-			},
-		])
-		let setPencil =()=>{
-			let pencil
-			canvas.isDrawingMode = true//开启绘画模式
-			if(brushworkValue.value == 'PencilBrush'){
-				pencil = new fabric.PencilBrush(canvas,{}); //普通笔
-			}else if(brushworkValue.value == 'Marking'){
-				pencil = new fabric.PencilBrush(canvas,); //记号笔
-			}else if(brushworkValue.value == 'InkBrush'){
-				pencil = new fabric.InkBrush(canvas,{}); //油画笔
-			}else if(brushworkValue.value=='CrayonBrush'){
-				pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
-			}else if(brushworkValue.value == 'RibbonBrush'){
-				pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
-			}else if(brushworkValue.value == 'MarkerBrush'){
-				pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
-				// pencil = new fabric.PenBrush(canvas,{}); //书写笔
-			}else if(brushworkValue.value == 'WritingBrush'){
-				pencil = new fabric.WritingBrush(canvas,{}); //毛笔
-			}else if(brushworkValue.value == 'LongfurBrush'){
-				pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
-			}else if(brushworkValue.value == 'SpraypaintBrush'){
-				pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
-			}
-			
-            canvas.freeDrawingBrush = pencil
-			canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
-			
-			if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
-				canvas.freeDrawingBrush.width = 1;
-			}
-			if(brushworkValue.value == 'Marking'){
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
-			// }else if(brushworkValue.value == 'InkBrush'){
-			// 	canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
-			}else{
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
-			}
-
-			pencilbtnStyle.value.background = canvasPencilColor.value
-			canvas.freeDrawingBrush.isEraser = false
-
-		}
-		
-		let setMove = () =>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			pencilbtnStyle.value.background = '#fff'
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
-		}
-		let createText = {}
-		let setTextFun = (e)=>{
-			if(operation.value != 'text'){
-				return
-			}
-			var clickedObject = e.target;
-			if (clickedObject instanceof fabric.Textbox) {
-				createText = clickedObject
-			}else{
-				var pointer = canvas.getPointer(e.pointer);
-				var x = pointer.x;
-				var y = pointer.y;
-				createText = new fabric.Textbox('', {
-					left: x,
-					top: y,
-					width: 150,
-					fontSize: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
-					fontFamily:fontFamily.value,
-					fill:canvasPencilColor.value,
-
-				})
-				canvas.add(createText)
-				createText.enterEditing();
-				canvas.setActiveObject(createText).renderAll();
-				operation.value = ''
-				removeSetText()
-			}
-			
-		}
-		let setText = ()=>{
-				canvas.on('mouse:down',setTextFun)
-			// if(isMoible()){
-			// 	canvas.on('mouse:down',setTextFun)
-			// }else{
-			// 	canvas.on('mouse:dblclick',setTextFun)
-			// }
-		}
-		let removeSetText = ()=>{
-				canvas.off('mouse:down',setTextFun)
-			// if(isMoible()){
-			// 	canvas.off('mouse:down',setTextFun)
-			// }else{
-			// 	canvas.off('mouse:dblclick',setTextFun)
-			// }
-		}
-		// let setTextStyle = (x,y)=>{
-		// 	var group = new fabric.Group([rect.color, rect.text, rect.text1],{
-		// 		left,
-		// 		top,
-		// 		width: rect.width,
-		// 		fill: "rgb(255,255,255)",
-		// 		stroke: "#212121",
-		// 		strokeWidth: 1,
-		// 	});
-		// 	canvas.add(group);
-		// }
-		
-		
-		let setTimeOut = {
-			color:null,
-			width:null,
-			colorHistory:null,
-		}//给切换颜色设置防抖
-		let colorHistoryList = ref(['rgb(0, 0, 0)'])
-		let setColorHistory = (value)=>{
-			canvasPencilColor.value = value
-			pencilColor()
-		}
-		let pencilColor = ()=>{
-			if(createText.set){
-				setFontFamily()
-				return
-			}
-			console.log(canvasPencilColor.value);
-			// brushIndicator.fill = canvasPencilColor.value;
-			if(canvas.freeDrawingBrush.isEraser){
-			}else{
-				pencilbtnStyle.value.background = canvasPencilColor.value
-			}
-			if(brushworkValue.value == 'Marking'){
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
-			}else if(brushworkValue.value == 'InkBrush'){
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
-			}else{
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
-			}
-		}
-		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.color)
-			clearTimeout(setTimeOut.colorHistory)
-			setTimeOut.color = setTimeout(()=>{
-				pencilColor()
-			},200)
-			setTimeOut.colorHistory = setTimeout(()=>{
-				colorHistoryList.value.push(canvasPencilColor.value)
-			},1000)
-		}
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.width)
-			canvasPencilWidth.value[operation.value] = Number(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)
-			setTimeOut.width = setTimeout(()=>{
-				if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){
-					canvas.freeDrawingBrush.width = 1;
-				}else{
-					canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value];
-				}
-				pencilbtnStyle.value.height = canvasPencilWidth.value[operation.value]+'px'
-				pencilbtnStyle.value.width = canvasPencilWidth.value[operation.value]+'px'
-				// setPencil()
-			},300)
-		}
-		let downPoint = null;//鼠标按下位置
-		let upPoint = null;//鼠标抬起位置
-		let currentPatterning = null//临时图形
-		let polyLineBtn = null
-		let createPatterningIs = false
-		let clearPatterning = () =>{
-			if(createPatterningIs){
-				canvas.remove(currentPatterning)
-			}
-			currentPatterning = null
-			canvas.remove(polyLineBtn)
-			updateCanvasState()
-		}
-		//设置再画布上移动 
-		let setCanvasMove = (event)=>{
-
-			var pointer = canvas.getPointer(event.e);
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-				
-			}else{
-                if(createPatterningIs){
-                    JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
-                }
-            }
-			let canvasBox = document.querySelector(".Export .canvas-container");
-			const rect = canvasBox.getBoundingClientRect();
-			const parentRect = canvasBox.parentElement.getBoundingClientRect();
-			let parentX = rect.left - parentRect.left
-			let parentY = rect.top - parentRect.top
-			pencilbtnStyle.value.left = parentX + pointer.x+'px'
-			pencilbtnStyle.value.top =  parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
-			canvas.requestRenderAll()
-		}
-		let setCanvasZoom = (opt)=>{
-			console.log(123);
-			
-			let zoom = canvas.getZoom() // 获取画布当前缩放值
-			let num = -100
-			if(operation.value == 'zoomOut') num = 100
-
-			zoom *= 0.999 ** num
-			if (zoom > 20) zoom = 20
-			if (zoom < 0.01) zoom = 0.01
-			
-			// console.log(zoom);
-			canvas.zoomToPoint(
-				{ // 关键点
-				x: opt.e.offsetX,
-				y: opt.e.offsetY
-				},
-				zoom
-			)
-			opt.e.preventDefault()
-			opt.e.stopPropagation()
-		}
-		//设置再画布上按下
-		let setCanvasDown = (event)=>{
-			//设置移动端按下添加元素
-			if(operation.value == 'zoomIn' || operation.value == 'zoomOut'){
-				setCanvasZoom(event)
-				return
-			}
-			if(isMoible && present.upScaleChecked){
-				present.upScaleChecked = false
-				present = {}
-				let pointerVpt = canvas.restorePointerVpt(event.pointer)
-				switch (currentType.value.type) {
-					case 'colorBoards':
-						let rect = setGroup(currentType.value.data)
-						setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
-					break
-					case 'moodboardFiles':
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-					default :
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-				}
-				// 创建完元素，把当前操作的元素类型设置回 null
-				currentType.value.type = null
-				currentType.value.data = null
-			}
-			downPoint = event.absolutePointer
-			let arr = ['rect','line','circle','triangle','ellipse','fold']
-			if(arr.indexOf(operation.value) > -1){
-				JSchangeType(canvas,operation.value)
-				createPatterningIs = true
-				if(currentPatterning && operation.value == 'fold'){
-					canvas.skipTargetFind = false
-					currentPatterning.points.push({
-						x: downPoint.x,
-						y: downPoint.y
-					})
-					// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
-				}else{
-					currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,currentPatterning)
-					canvas.add(currentPatterning)
-					canvas.bringToFront(currentPatterning);//设置优先级最高
-					if(operation.value == 'fold'){
-						polyLineBtn = JScreateCheck(event)
-						polyLineBtn.on('mousedown',foldEnd)
-						canvas.add(polyLineBtn)
-					}
-				}
-			}else{
-				var clickedObject = event.target;
-				if (clickedObject instanceof fabric.Textbox && operation.value != 'text') {
-					textDataShow.value = true
-					createText = clickedObject
-					setTextData(clickedObject)
-				}else{
-					textDataShow.value = false
-					createText = {}
-				}
-				createPatterningIs = false
-			}
-		}
-		let foldEnd = (key)=>{
-			canvas.skipTargetFind = true
-			let points = currentPatterning.points
-			if(key == 'Enter'){
-			}else{
-				points.pop()
-			}
-			points.pop()
-			canvas.remove(currentPatterning)
-			let polyline = new fabric.Polyline(points, {
-				fill: operationMode.value == 'fill'? canvasPencilColor.value : 'transparent',
-				stroke: canvasPencilColor.value,
-				strokeWidth:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
-				selection:false,
-			})
-			canvas.add(polyline)
-			// currentPatterning.set({stroke: canvasPencilColor.value})
-			createPatterningIs = false
-			clearPatterning()//临时图形置为空并且添加撤回对象里面
-			setOperation('move')
-		}
-		//设置再画布上抬起
-		let setCanvasUp = (event)=>{
-			upPoint = event.absolutePointer
-			if(canvas.isDrawingMode){
-				setTimeout(() => {
-					// pencilbtnStyle.value.display = `none`
-					updateCanvasState()
-				}, 100);
-			}else{
-				// event.target && (event.target.bringToFront())//设置优先级
-			}
-			var selectedObjects = canvas.getActiveObjects();//获取多选选中的内容
-			if (selectedObjects.length >= 1) {
-				allSelect.value = selectedObjects
-				// allSelectWidth.value = 0
-				allSelectWidth.value = (selectedObjects[0].width * selectedObjects[0].scaleX).toFixed(0)
-			}else{
-				allSelectWidth.value = -1
-			}
-			if(createPatterningIs){
-				
-				switch (operation.value) {
-					case 'line':
-						currentPatterning.set({stroke: canvasPencilColor.value})
-					break
-					case 'fold':
-						// currentPatterning.set({stroke: canvasPencilColor.value})
-					break
-					default :
-						if(operationMode.value == 'fill'){
-							currentPatterning.set({fill: canvasPencilColor.value})
-						}else if (operationMode.value == 'border'){
-							currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20})
-						}
-						if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
-							canvas.remove(currentPatterning)
-						}
-					break
-				}
-				if(operation.value == 'fold'){
-					canvas.forEachObject((obj) =>obj.selectable = false);
-					canvas.bringToFront(polyLineBtn);//设置优先级最高
-				}else if(operation.value){
-					createPatterningIs = false
-					clearPatterning()//临时图形置为空并且添加撤回对象里面
-					canvas.renderAll();
-					setOperation('move')
-				}
-			}
-		}
-		let setHDExport = async ()=>{//获取选中内容的位置信息
-			// if(allBoardData.value.printboardFiles.length <= 0){
-			// 	message.info('Your print is empty')
-			// 	return
-			// }
-			if(allBoardData.value.printboardFiles.length<=0){
-				return
-			}
-			if(credits.value < 30){
-				message.info( useI18.t('exportModel.jsContent3'))
-				// return
-			}
-			showSRExport.value = true
-			let arr = []
-			if(allBoardData.value.printboardFiles){
-				allBoardData.value.printboardFiles.forEach((item)=>{
-					arr.push({
-						imgUrl:item.imgUrl,
-						checked:false,
-					})
-				})
-			}
-			allExportSR.value = arr
-			allChecked.value = false
-
-			//多选导出转高清暂时不用
-
-			// let {url,imageType} = await exportSele(canvas,'jpeg')
-			// if(!imageType){
-			// 	message.info('Please select the region of SR')
-			// 	return
-			// }
-			// let img = new Image
-			// img.src = url
-			// let imgStyle = {
-			// 	'width': '80%',
-			// 	'max-height': '30rem',
-			// 	'object-fit': 'contain',
-			// 	'position': 'relative',
-			// 	'left': '50%',
-			// 	'transform': 'translateX(-50%)',
-			// }
-			// let imgElement = createVNode('img',{src:url,style:imgStyle})
-			// img.onload = ()=>{
-			// 	Modal.confirm({
-			// 		title: 'SR needs 300 points, whether to continue？',
-			// 		icon: false,
-			// 		okText: 'Yes',
-			// 		cancelText: 'No',
-			// 		content: imgElement,
-			// 		mask:false,
-			// 		centered:true,
-			// 		onOk() {
-			// 			if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
-			// 				message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
-			// 				return
-			// 			}
-			// 			let data = {
-			// 				images: url,
-			// 				scale: scaleSR.value,
-			// 				uniqueId: "",
-			// 				imageType:imageType,
-			// 			}
-			// 			Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
-			// 				console.log(rv);
-			// 				store.dispatch('getCredits')
-			// 				emit('setTask')
-			// 			});
-			// 		},
-			// 		// onCancel(){
-			// 		// 	_this.isShowMark.value = false
-			// 		// 	resolve(false)
-			// 		// }
-			// 	});
-			// }
-		}
-		let allExportSR = ref([])
-		let scaleSR = ref(2);
-		
-		let setScaleSR = (value)=>{
-			scaleSR.value = value
-		}
-		let showSRExport = ref(false)
-		let cancelSRExport = ()=>{
-			allExportSR.value = []
-			showSRExport.value = false
-		}
-		let allChecked = ref(false)
-		let selectImg = (item)=>{
-			item.checked = !item.checked
-			let arr = allExportSR.value.filter((item)=>item.checked)
-			if(arr.length == allExportSR.value.length){
-				allChecked.value = true
-			}else{
-				allChecked.value = false
-			}
-		}
-		let selectAllImg = ()=>{
-			allChecked.value = !allChecked.value
-			allExportSR.value.forEach((item)=>{
-				item.checked = allChecked.value
-			})
-		}
-		let setExportSR = ()=>{
-			let arr = []
-			let data = []
-			// if(allExportSR.value.filter(item=> item.checked ).length <= 0){
-			// 	message.info('Your print is empty')
-			// 	return
-			// }
-			if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
-				message.info(useI18.t('exportModel.jsContent4'))
-				return
-			}
-			let allPromise = allExportSR.value.map(async (item,index)=>{
-				if(item.checked){
-					return await new Promise((resolve,reject)=>{
-						let obj = {}
-						obj = {
-							images:item.imgUrl,
-							scale: scaleSR.value,
-							uniqueId: "",
-						}
-						data.push(obj)
-						let img = new Image
-						img.onload = ()=>{
-							if(img.width*scaleSR.value>2048 || img.height*scaleSR.value>2048){
-								arr.push(index)
-							}
-							img.remove()
-							resolve(img)
-						}
-						img.src = item.imgUrl
-					})
-				}else{
-					return
-				}
-			})
-			Promise.all(allPromise)
-			.then(promiseArr => {
-				if(arr.length > 0){
-					arr.forEach((item,index)=>arr[index]+=1)
-					let str = arr.join(',')
-					message.info(useI18.t('exportModel.jsContent5',{str:str}))
-					return
-				}
-				let aa = promiseArr.filter(item=> item == undefined)
-				if(aa.length == promiseArr.length){
-					message.info(useI18.t('exportModel.jsContent6'))
-
-				}else{
-					Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
-						emit('setTask',rv)
-						cancelSRExport()
-					});
-				}
-				
-			})
-			.catch(error => {
-			});
-			
-		}
-		
-		let toSvg = ()=>{
-			// console.log(canvas.toSvg());
-		}
-		let setShare = async ()=>{
-			initAligningGuidelines(canvas,false)
-			let publishModal = publish.value
-			publishModal.publishMask = true
-			var imageDataURL = await setExportCanvas()
-			let data = {
-				"imgUrl":imageDataURL,
-				userlikeGroupId:userlikeGroupId,
-			}
-			publishModal.init(data)
-			document.removeEventListener('keydown',canvasKeyDown);
-			document.removeEventListener('keyup', canvasKeyUp);
-		}
-		const clearPublish = ()=>{
-			document.addEventListener('keydown',canvasKeyDown);
-			document.addEventListener('keyup', canvasKeyUp);
-		}
-		let setSubmit = ()=>{
-			let data = setCanvasContent(false)
-			data.canvasHeight = canvasWH.value.height
-			let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
-			let formData = new FormData();
-			formData.append("file", blob, "data.json");
-			formData.append('userLikeGroupId', userlikeGroupId);
-			let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-            Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
-				message.success(t('exportModel.jsContent7'))
-            })
-		}
-		let setCanvasContent = (isSaveImg)=>{
-			var json = canvas.toJSON(['imgId','minioUrl']);
-			// console.log(JSON.stringify(json));
-			if(!isSaveImg){
-				json.objects.forEach(item=>{
-					if(item.type == 'image'){
-						delete item.src
-					}
-				})
-			}
-			return json
-		}
-		let textDataShow = ref(false)
-		let setTextData = (obj)=>{
-			fontFamily.value = obj.fontFamily
-			canvasPencilWidth.value['text'] = obj.fontSize
-			canvasPencilColor.value = obj.fill
-		}
-		let setFontFamily = ()=>{
-			if(createText.set){
-				createText.set({
-					fontFamily:fontFamily.value,
-					fontSize:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
-					fill:canvasPencilColor.value,
-				})
-				canvas.renderAll();
-			}
-		}
-
-		//液化
-		//当前选择的液化对象
-		let liquefactionData = ref(null)
-		let liquefaction = ref(null)
-		let submitLiquefaction = (rv)=>{
-			const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
-			const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
-			liquefactionData.setSrc(rv, function() {
-				liquefactionData.scaleToWidth(originalWidth);
-				liquefactionData.scaleToHeight(originalHeight);
-				delete liquefactionData.minioUrl
-				canvas.renderAll();
-				updateCanvasState()
-			});
-		}
-		const clearLiquefaction = ()=>{
-			setCanvasKeyDown()
-		}
-		let setLiquefaction = ()=>{
-			const activeObjects = canvas.getActiveObjects(); // 获取选中的对象
-			if (activeObjects.length === 1 && activeObjects[0].type === 'image') {
-				liquefactionData = activeObjects[0]
-				liquefaction.value.init(activeObjects[0])
-				clearCanvasKeyDown()
-			} else {
-				message.info(useI18.t('exportModel.jsContent6'))
-				return null;
-			}
-		}
-        onMounted(() => {
-			let arr = [
-					{ value: 'Arial', name: 'select font' },
-					{ value: 'EN_slogan_art1', name: 'select font' },
-					{ value: 'EN_slogan_art2', name: 'select font' },
-					{ value: 'EN_slogan_art3', name: 'select font' },
-					{ value: 'EN_slogan_art4', name: 'select font' },
-					{ value: 'EN_slogan_art5', name: 'select font' },
-					{ value: 'EN_slogan_art6', name: 'select font' },
-					{ value: 'EN_slogan_art7', name: 'select font' },
-					{ value: '微软雅黑', name: '请选择字体' },
-					{ value: 'CN_slogan_art1', name: '请选择字体' },
-					{ value: 'CN_slogan_art2', name: '请选择字体' },
-					{ value: 'CN_slogan_art3', name: '请选择字体' },
-					{ value: 'CN_slogan_art4', name: '请选择字体' },
-					{ value: '华文行楷', name: '请选择字体' },
-					{ value: '隶书', name: '请选择字体' },
-				]
-			textFontFamilyList.value = arr
-			fontFamily.value = arr[0].value
-			
-		});
-		onBeforeUnmount(()=>{
-			clearCanvasKeyDown()
-		})
-        return {
-			toSvg,
-			t,
-			toSvg,
-			isWindow,//判断是window还是mac
-            showUpgradePlan,//当前弹窗是否打开
-            canvasWH,//画布初始宽高
-			pencilbtnStyle,//笔触按钮
-			publish,//发布作品广场
-			credits,//积分 用来判断HD导出积分是否够用
-            init,//首页点击导出后初始化
-            setExport,//导出所有内容
-            cancelDsign,//关闭画布
-            setMaxInput,//设置画布宽高
-            isShowMark,//加载遮罩
-            allBoardData,//选择画布所有内容
-			closeNav,//导航展开或者收起来状态
-			setCloseNav,//给图片导航或者工具收起来或者展开
-			multiselect,//获取整体高度
-			onDragstart,//拖拽函数
-			setDragstart,//的移动端拖拽改为按下
-			historyState,//执行撤回或者反撤回
-			operation,//设置当前鼠标状态绘画或者矩形或者移动
-			operationMode,//设置矩形是边框还是填充
-			setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
-			setOperationMode,//设置矩形是边框还是填充方法
-			uploadImage,//上传图帕
-			setLayerIndex,//设置选中元素的层级
-			brushList,//笔触列表
-			clearPublish,
-			textureList,//材质列表
-			canvasPencilColor,//input选择颜色
-			canvasPencilWidth,//input选择宽度
-			setAllSelectWidth,//多选设置宽度
-			allSelectWidth,//多选设置宽度的值
-			colorHistoryList,//历史颜色
-			setColorHistory,//设置历史颜色
-			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
-			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
-			setHDExport,//高清导出选择的图片
-			brushworkChange,//切换笔触的回调
-			keysList,
-			textureValueChange,//切换材质信息
-			brushworkValue,//当前笔触
-			textureValue,//当前材质
-			scaleSR,
-			setScaleSR,
-			//SR页面
-			showSRExport,
-			allExportSR,
-			cancelSRExport,//关闭高清导出
-			allChecked,//全选
-			selectAllImg,//控制全选
-			selectImg,//选中单个图片
-			setExportSR,//设置SR导出
-			setShare,
-			setSubmit,
-			textFontFamilyList,
-			fontFamily,
-			textDataShow,
-			setFontFamily,
-			//液化
-			liquefaction,
-			submitLiquefaction,
-			clearLiquefaction,
-			setLiquefaction,
-        };
-    },
-    data(prop) {
-        return {
-			isMoible:isMoible()
-		};
-    },
-	computed: {
-		setGradient(){
-			return (gradient)=>{
-				let gradientStr = ''
-				gradient.gradientList.sort((a, b) => {
-					let aArr = a.left.split('%')[0]
-					let bArr = b.left.split('%')[0]
-					return aArr - bArr;
-				});
-				gradient.gradientList.forEach((item,index)=>{
-					let str = ','
-					if(gradient.gradientList.length == index+1)str = ''
-					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
-
-				})
-				return `${gradientStr}`
-			}
-			
-		}
-	},
-    watch: {
-        'canvasWH.height':{
-        	handler(newVal,oldVal){
-				
-				let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
-				let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
-				if(!canvasBox || !scrollBox)return
-				canvasBox.scroll({
-					top: 0, // 纵向滚动距离
-					left: 0, // 横向滚动距离
-				});
-				scrollBox.style.marginTop = 0+'px'
-				let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
-				scrollBox.style.height = height +'px'
-				if(oldVal != 0)return
-				let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
-				let scale = (newVal - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
-				let mouseDownOperation = (event)=>{//按下
-					let position = {
-						y:event.screenY,
-						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
-					}
-						// let top = 
-					let scrollMousemove = (e)=>{
-						let height = scrollBox.style.height.split('px')[0]*1
-						let offsetTop = position.top+e.screenY - position.y
-						offsetTop = offsetTop <= 0? 0 : offsetTop
-						offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
-						scrollBox.style.marginTop = offsetTop+'px'
-						canvasBoxDom.scroll({
-							top: offsetTop*scale, // 纵向滚动距离
-							left: 0, // 横向滚动距离
-						});
-					}
-					let mouseMove = function(event){
-						let e = getMousePosition(event,false)
-						scrollMousemove(e)
-					}
-					let touchmove = function(event){
-						let e = getMousePosition(event,true)
-						scrollMousemove(e)
-					}
-					let mouseup = function(){
-						document.removeEventListener('mousemove',mouseMove)
-						document.removeEventListener('touchmove',touchmove)
-						document.removeEventListener('mouseup',mouseup) 
-						document.removeEventListener('touchend',mouseup) 
-						//移动端
-					}
-					document.addEventListener('mousemove', mouseMove);
-					document.addEventListener('touchmove', touchmove);
-					document.addEventListener('mouseup', mouseup);
-					document.addEventListener('touchend', mouseup);
-
-					// document.addEventListener('touchmove',scrollMousemove)
-					// scrollBox.addEventListener('touchend',mouseup)
-				}
-				canvasBoxDom.addEventListener('scroll', ()=> {
-					let height = canvasBox.offsetHeight / (this.canvasWH.height / canvasBox.offsetHeight )
-					let scale = (this.canvasWH.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
-					const scrollTop = canvasBoxDom.scrollTop;
-					scrollBox.style.marginTop = scrollTop/scale+'px'
-				});
-				let mousedown = function(event){
-					let e = getMousePosition(event,false)
-					mouseDownOperation(e)
-				}
-
-				let touchstart = function(event){
-					let e = getMousePosition(event,true)
-					mouseDownOperation(e)
-				}
-				scrollBox.addEventListener('mousedown',mousedown)
-				scrollBox.addEventListener('touchstart',touchstart)
-        	}
+        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(() => {
+          function downloadBlob(blob, filename) {
+            const link = document.createElement("a");
+            const url = URL.createObjectURL(blob);
+            link.href = url;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            URL.revokeObjectURL(url);
+            document.body.removeChild(link);
+          }
+          zip.generateAsync({ type: "blob" }).then((content) => {
+            // 生成二进制流
+            downloadBlob(content, "DesignFiles");
+            // FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
+            isShowMark.value = false;
+          });
+          setSubmit(); //导出的时候保存
+          initAligningGuidelines(canvas, true);
+        })
+        .catch((res) => {
+          // message.warning(t('HomeView.jsContent3'));
+          isShowMark.value = false;
+          initAligningGuidelines(canvas, true);
+        });
+    };
+    //关闭画布
+    let useI18 = useI18n();
+    let cancelDsign = () => {
+      Modal.confirm({
+        title: useI18.t("exportModel.jsContent1"),
+        okText: "Yes",
+        cancelText: "No",
+        mask: false,
+        centered: true,
+        onOk() {
+          showUpgradePlan.value = false;
+          canvas.dispose();
+          position = {
+            //设置每个图形位置的初始值
+            x: 0,
+            y: 0,
+            height: 0,
+          };
+          canvasWH.value.height = 0;
+          operation.value = "move";
+          operation.value = "fill";
         },
-    },
-    mounted() {
-		
-	},
+        // onCancel(){
+        // 	_this.isShowMark.value = false
+        // 	resolve(false)
+        // }
+      });
+    };
+    //设置画布宽高
+    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];
+      } else if (str == "height") {
+        if (position.y + position.height > maxNum) {
+          maxNum = Math.floor(position.y + position.height);
+        }
+      }
+      if (str == "width" && canvasWH.value.width >= maxNum) {
+        canvasWH.value.width = maxNum;
+      } else if (str == "height" && canvasWH.value.height >= maxNum) {
+        canvasWH.value.height = maxNum;
+      } else if (str == "scale") {
+        scaleSR.value =
+          scaleSR.value < 1 ? 1 : scaleSR.value > 4 ? 4 : scaleSR.value;
+      }
+      canvas.setHeight(canvasWH.value.height);
+      canvas.setWidth(canvasWH.value.width);
+    };
 
-    methods: {
-		
-	},
+    let closeNav = ref({
+      nav: false,
+      tool: false,
+      shortcut: false,
+    });
+    let setCloseNav = (key) => {
+      closeNav.value[key] = !closeNav.value[key];
+      // for (const iterator in closeNav.value) {
+      // 	if(key != iterator){
+      // 		closeNav.value[iterator] = false
+      // 	}
+      // }
+    };
+    function multiselect() {
+      //获取整体宽高
+      canvas.discardActiveObject(); // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
+      const sel = new fabric.ActiveSelection(canvas.getObjects(), {
+        canvas,
+      });
+      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({
+      type: "",
+      data: "",
+    });
+    let onDragstart = (type, imgItem) => {
+      currentType.value.type = type;
+      currentType.value.data = imgItem;
+    };
+    let present = {};
+    let setDragstart = (type, imgItem) => {
+      currentType.value.type = type;
+      present.upScaleChecked = false;
+      present = {};
+      if (imgItem.upScaleChecked) {
+      } else {
+        imgItem.upScaleChecked = true;
+        present = imgItem;
+      }
+      currentType.value.data = imgItem;
+    };
+    let canvasOnDrop = () => {
+      canvas.on("drop", (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.type) {
+          case "colorBoards":
+            let rect = setGroup(currentType.value.data);
+            setCanvasColor(pointerVpt.y, pointerVpt.x, rect);
+            break;
+          case "moodboardFiles":
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+          default:
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+        }
+        // 创建完元素，把当前操作的元素类型设置回 null
+        currentType.value.type = null;
+        currentType.value.data = null;
+      });
+    };
+    let setGroup = (data) => {
+      let rect;
+      if (data.gradient) {
+        let colorStops = [];
+        data.gradient.gradientList.forEach((item) => {
+          let obj = {
+            offset: item.left.split("%")[0] / 100,
+            color: `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`,
+          };
+          colorStops.push(obj);
+        });
+        let { x0, y0, x1, y1 } = calculateGradientCoordinate(
+          100,
+          120,
+          data.gradient.angle
+        );
+        let linear = new fabric.Gradient({
+          type: "linear", // 线性渐变
+          // coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
+          coords: { x1: x0, y1: y0, x2: x1, y2: y1 }, // 渐变方向
+          colorStops: colorStops,
+        });
+        var color = new fabric.Rect({
+          top: 0,
+          left: 0,
+          width: 110,
+          height: 130,
+          textAlign: "left",
+          fill: linear, // 设置渐变填充
+          // fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
+        });
+        var text = new fabric.Text("", {
+          left: 0,
+          top: 0,
+          fontSize: 0,
+          fontFamily: "Arial",
+          textAlign: "left",
+          fill: "black",
+        });
+        let text1 = new fabric.Text("", {
+          left: 0,
+          top: 0,
+          width: 20,
+          fontSize: 0,
+          fontFamily: "Arial",
+          textAlign: "left",
+        });
+        rect = { text, text1, color, width: 110 };
+      } else {
+        var text = new fabric.Text(data.tcx, {
+          left: 0,
+          top: 60,
+          fontSize: 14,
+          fontFamily: "Arial",
+          textAlign: "left",
+          fill: "black",
+        });
+        let text1 = new fabric.Text(data.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(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
+        });
+        rect = { text, text1, color, width };
+      }
+
+      return rect;
+    };
+    let setCanvasColor = (top, left, rect) => {
+      let group;
+      group = new fabric.Group([rect.color, rect.text, rect.text1], {
+        left,
+        top,
+        width: rect.width,
+        fill: "rgb(255,255,255)",
+        stroke: "#212121",
+        strokeWidth: 1,
+      });
+      canvas.add(group);
+      return group;
+    };
+    // 创建矩形
+    let createImage = async (top, left, key) => {
+      let itemCanvasImg = currentType.value.data.imgUrl;
+      let data = JSON.parse(JSON.stringify(currentType.value.data));
+      if (key == "likeDesignCollectionList") {
+        itemCanvasImg = currentType.value.data.designOutfitUrl;
+      }
+      await new Promise((resolve, reject) => {
+        fabric.Image.fromURL(
+          itemCanvasImg,
+          (img) => {
+            setCanvasImage(img, key, left, top, data); //设置图片
+            canvas.add(img);
+            resolve();
+          },
+          { crossOrigin: "Anonymous" }
+        );
+      });
+      updateCanvasState();
+    };
+    //设置画布监听修改添加事件，用来做撤回功能
+    let updateCanvasState = (str) => {
+      const canvasAsJson = JSON.stringify(canvas.toJSON());
+      if (str == "loadingCompleted") {
+        // reverseCanvasState.value.push(canvasAsJson);
+      }
+      normalCanvasState.value.push(canvasAsJson);
+      if (isLoadCanvas) {
+        reverseCanvasState.value = [];
+        isLoadCanvas = false;
+        canvasState.value = canvasAsJson;
+      }
+    };
+    //撤回
+    let historyState = (str) => {
+      if (str == "reverse" && reverseCanvasState.value.length > 0) {
+        //反撤回
+        let obj = reverseCanvasState.value.pop();
+        // canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+        canvasState.value = obj;
+        normalCanvasState.value.push(obj);
+      } else if (str == "" && normalCanvasState.value.length > 1) {
+        let obj = normalCanvasState.value.pop();
+        canvasState.value =
+          normalCanvasState.value[normalCanvasState.value.length - 1];
+        reverseCanvasState.value.push(obj);
+        isLoadCanvas = true;
+      } else {
+        return;
+      }
+      canvas.loadFromJSON(canvasState.value, () => {});
+    };
+
+    //在画布进行画画
+    let operation = ref("move");
+    let operationMode = ref("fill");
+    let textureValue = ref(0); //材质信息
+
+    let textureValueChange = (value) => {
+      textureValue.value = value;
+      setTexture();
+    };
+    //铅笔颜色 大小
+    let brushworkValue = ref("PencilBrush");
+    let brushworkChange = (value) => {
+      brushworkValue.value = value;
+      setPencil();
+    };
+
+    // let brushwork = ref('')
+    // 监听键盘的 keydown 和 keyup 事件
+    let keyDown = [];
+    const keysList = [
+      {
+        name: useI18.t("exportModel.Painting"),
+        winDowKey: "B",
+        macKey: "B",
+      },
+      {
+        name: useI18.t("exportModel.Eraser"),
+        winDowKey: "E",
+        macKey: "E",
+      },
+      {
+        name: useI18.t("exportModel.Uncheck"),
+        winDowKey: "Ctrl + D",
+        macKey: "Command + D",
+      },
+      {
+        name: useI18.t("exportModel.Revoke"),
+        winDowKey: "Ctrl + Z",
+        macKey: "Command + Z",
+      },
+      {
+        name: useI18.t("exportModel.Retreat"),
+        winDowKey: "Ctrl + Shift + Z",
+        macKey: "Command + Ctrl + Z",
+      },
+      {
+        name: useI18.t("exportModel.ReduceBrushSize"),
+        winDowKey: "[",
+        macKey: "[",
+      },
+      {
+        name: useI18.t("exportModel.IncreaseBrushSize"),
+        winDowKey: "]",
+        macKey: "]",
+      },
+      {
+        name: useI18.t("exportModel.DrinkingStraw"),
+        winDowKey: "I",
+        macKey: "I",
+      },
+      {
+        name: useI18.t("exportModel.Copy"),
+        winDowKey: "Ctrl + C",
+        macKey: "Command + C",
+      },
+      {
+        name: useI18.t("exportModel.Paste"),
+        winDowKey: "Ctrl + V",
+        macKey: "Command + V",
+      },
+      {
+        name: useI18.t("exportModel.UploadOpenimage"),
+        winDowKey: "Ctrl + O",
+        macKey: "Command + O",
+      },
+    ];
+    let canvasKeyDown = (event) => {
+      let keys = [
+        "Enter",
+        "Delete",
+        "ControlLeft",
+        "ShiftLeft",
+        "BracketLeft",
+        "BracketRight",
+        "MetaLeft",
+      ];
+      var activeObject = canvas.getActiveObject();
+      let state =
+        activeObject &&
+        activeObject.type == "textbox" &&
+        activeObject.isEditing;
+      if (keys.indexOf(event.code) > -1) {
+        event.preventDefault();
+      }
+      if (keyDown.indexOf(event.code) > -1 || state) {
+      } else {
+        keyDown.push(event.code);
+        // console.log(keyDown.indexOf('ControlLeft') > -1 , keyDown.indexOf('MetaLeft') > -1, event.code == 'KeyC')
+        if (event.code === "Enter" && operation.value == "fold") {
+          foldEnd("Enter");
+        } else if (event.key === "Delete") {
+          deleteObject();
+        } else if (
+          (keyDown.indexOf("ControlLeft") > -1 ||
+            keyDown.indexOf("MetaLeft") > -1) &&
+          event.code == "KeyZ" &&
+          keyDown.indexOf("ShiftLeft") > -1
+        ) {
+          historyState("reverse");
+        } else if (
+          (keyDown.indexOf("ControlLeft") > -1 ||
+            keyDown.indexOf("MetaLeft") > -1) &&
+          event.code == "KeyZ"
+        ) {
+          historyState("");
+        } else if (
+          (keyDown.indexOf("ControlLeft") > -1 ||
+            keyDown.indexOf("MetaLeft") > -1) &&
+          event.code == "KeyC"
+        ) {
+          copy();
+        } else if (
+          (keyDown.indexOf("ControlLeft") > -1 ||
+            keyDown.indexOf("MetaLeft") > -1) &&
+          event.code == "KeyV"
+        ) {
+          paste();
+        } else if (keyDown.indexOf("BracketLeft") > -1) {
+          let width = canvasPencilWidth.value[operation.value];
+          canvasPencilWidth.value[operation.value] =
+            width - 5 < 3 ? 3 : width - 5;
+          setPencilWidth();
+        } else if (keyDown.indexOf("BracketRight") > -1) {
+          let width = canvasPencilWidth.value[operation.value];
+          canvasPencilWidth.value[operation.value] =
+            width + 5 > 50 ? 50 : width + 5;
+          setPencilWidth();
+        } else if (keyDown.indexOf("KeyI") > -1) {
+          getColor(); //吸色
+        } else if (keyDown.indexOf("KeyM") > -1) {
+          setOperation("move");
+        } else if (
+          (keyDown.indexOf("ControlLeft") > -1 ||
+            keyDown.indexOf("MetaLeft") > -1) &&
+          event.code == "KeyD"
+        ) {
+          canvas.discardActiveObject().renderAll();
+        } else if (
+          (keyDown.indexOf("ControlLeft") > -1 ||
+            keyDown.indexOf("MetaLeft") > -1) &&
+          event.code == "KeyO"
+        ) {
+          let input = document.querySelector(".uploadImage input");
+          input.click();
+        } else if (keyDown.indexOf("KeyB") > -1) {
+          // if(operation.value == 'pencil' || operation.value == 'texture'){
+          setOperation("pencil");
+          // }
+        } else if (keyDown.indexOf("KeyE") > -1) {
+          // if(operation.value == 'pencil' || operation.value == 'texture'){
+          setOperation("eraser");
+          // }
+        }
+      }
+    };
+    let getColor = async () => {
+      try {
+        const dropper = new EyeDropper();
+        const result = await dropper.open();
+        let hex = result.sRGBHex.replace("#", "");
+        // 将十六进制颜色码拆分成红、绿、蓝三个部分
+        // const r = parseInt(hex.substring(0, 2), 16);
+        // const g = parseInt(hex.substring(2, 4), 16);
+        // const b = parseInt(hex.substring(4, 6), 16);
+        canvasPencilColor.value = result.sRGBHex;
+        setPencilColor();
+      } catch (e) {
+        message.info(this.t("ColorboardUpload.jsContent1"));
+      }
+    };
+    let canvasKeyUp = (event) => {
+      let keys = [
+        "Enter",
+        "Delete",
+        "ControlLeft",
+        "ShiftLeft",
+        "BracketLeft",
+        "BracketRight",
+        "MetaLeft",
+      ];
+      if (keys.indexOf(event.code) > -1) {
+        event.preventDefault();
+      }
+      keyDown = keyDown.filter(function (item) {
+        return event.code !== item;
+      });
+    };
+    let setCanvasKeyDown = (event) => {
+      // let e = event || window.event
+      // e.stopPropagation();
+      document.addEventListener("keydown", canvasKeyDown);
+      document.addEventListener("keyup", canvasKeyUp);
+    };
+    let clearCanvasKeyDown = (pointer) => {
+      // var pointer = canvas.getPointer(pointer);
+      if (!pointer?.target) {
+        document.removeEventListener("keydown", canvasKeyDown);
+        document.removeEventListener("keyup", canvasKeyUp);
+      }
+      // var x = pointer.x;
+      // var y = pointer.y;
+
+      // 检查是否鼠标离开了画布
+      //   if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
+      //     // 执行你的操作
+      //   }
+      // if(!x || !y){
+      // 	document.removeEventListener('keydown',canvasKeyDown);
+      // 	document.removeEventListener('keyup', canvasKeyUp);
+      // }
+    };
+    let canvasPencilColor = ref("#000000"); //画笔颜色
+    // let canvasPencilWidth = ref(20)//画笔大小
+    let canvasPencilWidth = ref({});
+    let fontFamily = ref({});
+    let textFontFamilyList = ref([]);
+    let allSelectWidth = ref(-1); //多选或单选的宽度
+    let allSelect = ref([]); //多选或单选的宽度
+    let setOperation = (str) => {
+      operation.value = str;
+      //折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
+      canvas.discardActiveObject(); //取消所有选中边框
+      if (createPatterningIs) {
+        canvas.remove(currentPatterning);
+      }
+      removeSetText();
+      initAligningGuidelines(canvas, false);
+      canvas.remove(polyLineBtn);
+      if (str == "pencil") {
+        setPencil();
+        pencilbtnStyle.value.display = `block`;
+      } else if (str == "move") {
+        JSchangeType(canvas, "init");
+        initAligningGuidelines(canvas, true);
+        setMove();
+        pencilbtnStyle.value.display = `none`;
+      } else if (str == "texture") {
+        setTexture();
+        pencilbtnStyle.value.display = `block`;
+      } else if (str == "eraser") {
+        setEraser();
+        pencilbtnStyle.value.display = `block`;
+      } else if (str == "text") {
+        setMove();
+        setText();
+        JSchangeType(canvas, "init");
+        pencilbtnStyle.value.display = `none`;
+      } else if (str == "zoomIn" || str == "zoomOut") {
+        pencilbtnStyle.value.display = `none`;
+        canvas.forEachObject((obj) => (obj.selectable = false));
+      } else if (str) {
+        pencilbtnStyle.value.display = `none`;
+        canvas.forEachObject((obj) => (obj.selectable = false));
+        canvas.isDrawingMode = false;
+      }
+      setPencilWidth();
+    };
+    let _setAllSelectTime = null;
+    let setAllSelectWidth = () => {
+      clearTimeout(_setAllSelectTime);
+      allSelect.value.forEach((item) => {
+        // item.width = allSelectWidth.value
+        item.scaleX = allSelectWidth.value / item.width;
+        item.scaleY = item.scaleX;
+        item.setCoords();
+      });
+      _setAllSelectTime = setTimeout(() => {
+        updateCanvasState(""); //加载完成后记录一下
+      }, 1500);
+    };
+    let _clipboard = null; // 复制到的内容
+    let copy = () => {
+      //复制
+      var activeObject = canvas.getActiveObject();
+      if (!activeObject) {
+        return;
+      }
+      activeObject.clone(function (cloned) {
+        _clipboard = cloned;
+      });
+    };
+    let paste = () => {
+      //粘贴
+      if (!_clipboard) {
+        return;
+      }
+      _clipboard.clone((clonedObj) => {
+        canvas.discardActiveObject(); // 取消选择
+
+        // 设置新内容的坐标位置
+        clonedObj.set({
+          left: clonedObj.left + 10,
+          top: clonedObj.top + 10,
+          evented: true,
+        });
+
+        if (clonedObj.type === "activeSelection") {
+          // 活动选择需要一个对画布的引用
+          clonedObj.canvas = canvas;
+          clonedObj.forEachObject(function (obj) {
+            canvas.add(obj);
+          });
+
+          clonedObj.setCoords();
+        } else {
+          canvas.add(clonedObj);
+        }
+        _clipboard.top += 10;
+        _clipboard.left += 10;
+        canvas.setActiveObject(clonedObj);
+        canvas.requestRenderAll();
+      });
+      updateCanvasState();
+    };
+    let textureList = ref([]);
+    for (let index = 0; index < 20; index++) {
+      textureList.value.push({
+        value: index,
+        url: `/image/texture/texture${index}.webp`,
+      });
+    }
+    let setTexture = async () => {
+      canvas.isDrawingMode = true; //开启绘画模式
+      let img = await JSSetTexture(textureList.value[textureValue.value].url);
+
+      let patternBrush = new fabric.PatternBrush(canvas);
+      patternBrush.source = img;
+      patternBrush.width = canvasPencilWidth.value[operation.value]
+        ? canvasPencilWidth.value[operation.value]
+        : 20; // 设置画笔大小
+      canvas.freeDrawingBrush = patternBrush;
+    };
+    let setOperationMode = (str) => {
+      operationMode.value = str;
+    };
+    let uploadImage = (event) => {
+      let input = document.querySelector(".uploadImage input");
+      const file = event.target.files[0];
+      setOperation("move");
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          let file = base64ToFile(e.target.result, "upload");
+          let formData = new FormData();
+          formData.append("file", file);
+          let config = {
+            headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
+          };
+          Https.axiosPost(
+            Https.httpUrls.canvasElementUpload,
+            formData,
+            config
+          ).then((rv) => {
+            rv.imgUrl = rv.minioUrl;
+            fabric.Image.fromURL(
+              rv.minioUrl,
+              (img) => {
+                console.log(canvas.wrapperEl.parentNode.scrollTop);
+                setCanvasImage(
+                  img,
+                  "upImgFiles",
+                  0,
+                  canvas.wrapperEl.parentNode.scrollTop,
+                  rv
+                );
+                canvas.add(img);
+              },
+              { crossOrigin: "Anonymous" }
+            );
+          });
+          input.value = "";
+        };
+        reader.readAsDataURL(file);
+      }
+    };
+    let setLayerIndex = (str) => {
+      //设置优先级
+      var activeObject = canvas.getActiveObject();
+      switch (str) {
+        case "Front":
+          canvas.bringToFront(activeObject); //顶层
+          break;
+        case "Back":
+          canvas.sendToBack(activeObject); //底层
+          break;
+        case "Forward":
+          canvas.bringForward(activeObject);
+          break;
+        case "Backwards":
+          canvas.sendBackwards(activeObject);
+          break;
+      }
+    };
+    let hexToRgba = (hex, alpha) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
+    let brushList = ref([
+      {
+        value: "PencilBrush",
+        url: "/image/brush/PencilBrush.jpg",
+      },
+      {
+        value: "Marking",
+        url: "/image/brush/PencilBrush-2.jpg",
+      },
+      {
+        value: "InkBrush",
+        url: "/image/brush/InkBrush.jpg",
+      },
+      {
+        value: "CrayonBrush",
+        url: "/image/brush/CrayonBrush.jpg",
+      },
+      {
+        value: "RibbonBrush",
+        url: "/image/brush/RibbonBrush.jpg",
+      },
+      {
+        value: "MarkerBrush",
+        url: "/image/brush/MarkerBrush.jpg",
+      },
+      {
+        value: "WritingBrush",
+        url: "/image/brush/WritingBrush.jpg",
+      },
+      {
+        value: "LongfurBrush",
+        url: "/image/brush/LongfurBrush.jpg",
+      },
+      {
+        value: "SpraypaintBrush",
+        url: "/image/brush/SpraypaintBrush.jpg",
+      },
+    ]);
+    let setPencil = () => {
+      let pencil;
+      canvas.isDrawingMode = true; //开启绘画模式
+      if (brushworkValue.value == "PencilBrush") {
+        pencil = new fabric.PencilBrush(canvas, {}); //普通笔
+      } else if (brushworkValue.value == "Marking") {
+        pencil = new fabric.PencilBrush(canvas); //记号笔
+      } else if (brushworkValue.value == "InkBrush") {
+        pencil = new fabric.InkBrush(canvas, {}); //油画笔
+      } else if (brushworkValue.value == "CrayonBrush") {
+        pencil = new fabric.CrayonBrush(canvas, {}); //蜡笔
+      } else if (brushworkValue.value == "RibbonBrush") {
+        pencil = new fabric.RibbonBrush(canvas, { width: 1 }); //色带
+      } else if (brushworkValue.value == "MarkerBrush") {
+        pencil = new fabric.MarkerBrush(canvas, {}); //书写笔
+        // pencil = new fabric.PenBrush(canvas,{}); //书写笔
+      } else if (brushworkValue.value == "WritingBrush") {
+        pencil = new fabric.WritingBrush(canvas, {}); //毛笔
+      } else if (brushworkValue.value == "LongfurBrush") {
+        pencil = new fabric.LongfurBrush(canvas, { width: 1 }); //色带
+      } else if (brushworkValue.value == "SpraypaintBrush") {
+        pencil = new fabric.SpraypaintBrush(canvas, {}); //长毛刷
+      }
+
+      canvas.freeDrawingBrush = pencil;
+      canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]
+        ? canvasPencilWidth.value[operation.value]
+        : 20;
+
+      if (
+        brushworkValue.value == "RibbonBrush" ||
+        brushworkValue.value == "LongfurBrush"
+      ) {
+        canvas.freeDrawingBrush.width = 1;
+      }
+      if (brushworkValue.value == "Marking") {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 0.5);
+        // }else if(brushworkValue.value == 'InkBrush'){
+        // 	canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
+      } else {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 1);
+      }
+
+      pencilbtnStyle.value.background = canvasPencilColor.value;
+      canvas.freeDrawingBrush.isEraser = false;
+    };
+
+    let setMove = () => {
+      canvas.isDrawingMode = false;
+      canvas.forEachObject((obj) => (obj.selectable = true));
+    };
+    let setEraser = () => {
+      canvas.isDrawingMode = true;
+      let eraser = new fabric.EraserBrush(canvas);
+      canvas.freeDrawingBrush = eraser;
+      pencilbtnStyle.value.background = "#fff";
+      canvas.requestRenderAll();
+      canvas.freeDrawingBrush.isEraser = true;
+      canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]
+        ? canvasPencilWidth.value[operation.value]
+        : 20;
+    };
+    let createText = {};
+    let setTextFun = (e) => {
+      if (operation.value != "text") {
+        return;
+      }
+      var clickedObject = e.target;
+      if (clickedObject instanceof fabric.Textbox) {
+        createText = clickedObject;
+      } else {
+        var pointer = canvas.getPointer(e.pointer);
+        var x = pointer.x;
+        var y = pointer.y;
+        createText = new fabric.Textbox("", {
+          left: x,
+          top: y,
+          width: 150,
+          fontSize: canvasPencilWidth.value[operation.value]
+            ? canvasPencilWidth.value[operation.value]
+            : 20,
+          fontFamily: fontFamily.value,
+          fill: canvasPencilColor.value,
+        });
+        canvas.add(createText);
+        createText.enterEditing();
+        canvas.setActiveObject(createText).renderAll();
+        operation.value = "";
+        removeSetText();
+      }
+    };
+    let setText = () => {
+      canvas.on("mouse:down", setTextFun);
+      // if(isMoible()){
+      // 	canvas.on('mouse:down',setTextFun)
+      // }else{
+      // 	canvas.on('mouse:dblclick',setTextFun)
+      // }
+    };
+    let removeSetText = () => {
+      canvas.off("mouse:down", setTextFun);
+      // if(isMoible()){
+      // 	canvas.off('mouse:down',setTextFun)
+      // }else{
+      // 	canvas.off('mouse:dblclick',setTextFun)
+      // }
+    };
+    // let setTextStyle = (x,y)=>{
+    // 	var group = new fabric.Group([rect.color, rect.text, rect.text1],{
+    // 		left,
+    // 		top,
+    // 		width: rect.width,
+    // 		fill: "rgb(255,255,255)",
+    // 		stroke: "#212121",
+    // 		strokeWidth: 1,
+    // 	});
+    // 	canvas.add(group);
+    // }
+
+    let setTimeOut = {
+      color: null,
+      width: null,
+      colorHistory: null,
+    }; //给切换颜色设置防抖
+    let colorHistoryList = ref(["rgb(0, 0, 0)"]);
+    let setColorHistory = (value) => {
+      canvasPencilColor.value = value;
+      pencilColor();
+    };
+    let pencilColor = () => {
+      if (createText.set) {
+        setFontFamily();
+        return;
+      }
+      console.log(canvasPencilColor.value);
+      // brushIndicator.fill = canvasPencilColor.value;
+      if (canvas.freeDrawingBrush.isEraser) {
+      } else {
+        pencilbtnStyle.value.background = canvasPencilColor.value;
+      }
+      if (brushworkValue.value == "Marking") {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 0.5);
+      } else if (brushworkValue.value == "InkBrush") {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 0.2);
+      } else {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 1);
+      }
+    };
+    let setPencilColor = () => {
+      //切换颜色给铅笔设置颜色
+      clearTimeout(setTimeOut.color);
+      clearTimeout(setTimeOut.colorHistory);
+      setTimeOut.color = setTimeout(() => {
+        pencilColor();
+      }, 200);
+      setTimeOut.colorHistory = setTimeout(() => {
+        colorHistoryList.value.push(canvasPencilColor.value);
+      }, 1000);
+    };
+    let setPencilWidth = () => {
+      //切换颜色给铅笔设置颜色
+      clearTimeout(setTimeOut.width);
+      canvasPencilWidth.value[operation.value] = Number(
+        canvasPencilWidth.value[operation.value]
+          ? canvasPencilWidth.value[operation.value]
+          : 20
+      );
+      setTimeOut.width = setTimeout(() => {
+        if (
+          brushworkValue.value == "LongfurBrush" ||
+          brushworkValue.value == "RibbonBrush"
+        ) {
+          canvas.freeDrawingBrush.width = 1;
+        } else {
+          canvas.freeDrawingBrush.width =
+            canvasPencilWidth.value[operation.value];
+        }
+        pencilbtnStyle.value.height =
+          canvasPencilWidth.value[operation.value] + "px";
+        pencilbtnStyle.value.width =
+          canvasPencilWidth.value[operation.value] + "px";
+        // setPencil()
+      }, 300);
+    };
+    let downPoint = null; //鼠标按下位置
+    let upPoint = null; //鼠标抬起位置
+    let currentPatterning = null; //临时图形
+    let polyLineBtn = null;
+    let createPatterningIs = false;
+    let clearPatterning = () => {
+      if (createPatterningIs) {
+        canvas.remove(currentPatterning);
+      }
+      currentPatterning = null;
+      canvas.remove(polyLineBtn);
+      updateCanvasState();
+    };
+    //设置再画布上移动
+    let setCanvasMove = (event) => {
+      var pointer = canvas.getPointer(event.e);
+      if (canvas.isDrawingMode) {
+        canvas.setCursor("none");
+      } else {
+        if (createPatterningIs) {
+          JScanvasMouseMove(
+            operation.value,
+            event,
+            currentPatterning,
+            downPoint,
+            keyDown
+          );
+        }
+      }
+      let canvasBox = document.querySelector(".Export .canvas-container");
+      const rect = canvasBox.getBoundingClientRect();
+      const parentRect = canvasBox.parentElement.getBoundingClientRect();
+      let parentX = rect.left - parentRect.left;
+      let parentY = rect.top - parentRect.top;
+      pencilbtnStyle.value.left = parentX + pointer.x + "px";
+      pencilbtnStyle.value.top =
+        parentY + canvasBox.parentElement.scrollTop + pointer.y + "px";
+      canvas.requestRenderAll();
+    };
+    let setCanvasZoom = (opt) => {
+      console.log(123);
+
+      let zoom = canvas.getZoom(); // 获取画布当前缩放值
+      let num = -100;
+      if (operation.value == "zoomOut") num = 100;
+
+      zoom *= 0.999 ** num;
+      if (zoom > 20) zoom = 20;
+      if (zoom < 0.01) zoom = 0.01;
+
+      // console.log(zoom);
+      canvas.zoomToPoint(
+        {
+          // 关键点
+          x: opt.e.offsetX,
+          y: opt.e.offsetY,
+        },
+        zoom
+      );
+      opt.e.preventDefault();
+      opt.e.stopPropagation();
+    };
+    //设置再画布上按下
+    let setCanvasDown = (event) => {
+      //设置移动端按下添加元素
+      if (operation.value == "zoomIn" || operation.value == "zoomOut") {
+        setCanvasZoom(event);
+        return;
+      }
+      if (isMoible && present.upScaleChecked) {
+        present.upScaleChecked = false;
+        present = {};
+        let pointerVpt = canvas.restorePointerVpt(event.pointer);
+        switch (currentType.value.type) {
+          case "colorBoards":
+            let rect = setGroup(currentType.value.data);
+            setCanvasColor(pointerVpt.y, pointerVpt.x, rect);
+            break;
+          case "moodboardFiles":
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+          default:
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+        }
+        // 创建完元素，把当前操作的元素类型设置回 null
+        currentType.value.type = null;
+        currentType.value.data = null;
+      }
+      downPoint = event.absolutePointer;
+      let arr = ["rect", "line", "circle", "triangle", "ellipse", "fold"];
+      if (arr.indexOf(operation.value) > -1) {
+        JSchangeType(canvas, operation.value);
+        createPatterningIs = true;
+        if (currentPatterning && operation.value == "fold") {
+          canvas.skipTargetFind = false;
+          currentPatterning.points.push({
+            x: downPoint.x,
+            y: downPoint.y,
+          });
+          // currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+        } else {
+          currentPatterning = JScanvasMouseDown(
+            operation.value,
+            event,
+            canvasPencilWidth.value[operation.value]
+              ? canvasPencilWidth.value[operation.value]
+              : 20,
+            currentPatterning
+          );
+          canvas.add(currentPatterning);
+          canvas.bringToFront(currentPatterning); //设置优先级最高
+          if (operation.value == "fold") {
+            polyLineBtn = JScreateCheck(event);
+            polyLineBtn.on("mousedown", foldEnd);
+            canvas.add(polyLineBtn);
+          }
+        }
+      } else {
+        var clickedObject = event.target;
+        if (
+          clickedObject instanceof fabric.Textbox &&
+          operation.value != "text"
+        ) {
+          textDataShow.value = true;
+          createText = clickedObject;
+          setTextData(clickedObject);
+        } else {
+          textDataShow.value = false;
+          createText = {};
+        }
+        createPatterningIs = false;
+      }
+    };
+    let foldEnd = (key) => {
+      canvas.skipTargetFind = true;
+      let points = currentPatterning.points;
+      if (key == "Enter") {
+      } else {
+        points.pop();
+      }
+      points.pop();
+      canvas.remove(currentPatterning);
+      let polyline = new fabric.Polyline(points, {
+        fill:
+          operationMode.value == "fill"
+            ? canvasPencilColor.value
+            : "transparent",
+        stroke: canvasPencilColor.value,
+        strokeWidth: canvasPencilWidth.value[operation.value]
+          ? canvasPencilWidth.value[operation.value]
+          : 20,
+        selection: false,
+      });
+      canvas.add(polyline);
+      // currentPatterning.set({stroke: canvasPencilColor.value})
+      createPatterningIs = false;
+      clearPatterning(); //临时图形置为空并且添加撤回对象里面
+      setOperation("move");
+    };
+    //设置再画布上抬起
+    let setCanvasUp = (event) => {
+      upPoint = event.absolutePointer;
+      if (canvas.isDrawingMode) {
+        setTimeout(() => {
+          // pencilbtnStyle.value.display = `none`
+          updateCanvasState();
+        }, 100);
+      } else {
+        // event.target && (event.target.bringToFront())//设置优先级
+      }
+      var selectedObjects = canvas.getActiveObjects(); //获取多选选中的内容
+      if (selectedObjects.length >= 1) {
+        allSelect.value = selectedObjects;
+        // allSelectWidth.value = 0
+        allSelectWidth.value = (
+          selectedObjects[0].width * selectedObjects[0].scaleX
+        ).toFixed(0);
+      } else {
+        allSelectWidth.value = -1;
+      }
+      if (createPatterningIs) {
+        switch (operation.value) {
+          case "line":
+            currentPatterning.set({ stroke: canvasPencilColor.value });
+            break;
+          case "fold":
+            // currentPatterning.set({stroke: canvasPencilColor.value})
+            break;
+          default:
+            if (operationMode.value == "fill") {
+              currentPatterning.set({ fill: canvasPencilColor.value });
+            } else if (operationMode.value == "border") {
+              currentPatterning.set({
+                fill: "transparent",
+                stroke: canvasPencilColor.value,
+                strokeWidth: canvasPencilWidth.value[operation.value]
+                  ? canvasPencilWidth.value[operation.value]
+                  : 20,
+              });
+            }
+            if (JSON.stringify(downPoint) == JSON.stringify(upPoint)) {
+              canvas.remove(currentPatterning);
+            }
+            break;
+        }
+        if (operation.value == "fold") {
+          canvas.forEachObject((obj) => (obj.selectable = false));
+          canvas.bringToFront(polyLineBtn); //设置优先级最高
+        } else if (operation.value) {
+          createPatterningIs = false;
+          clearPatterning(); //临时图形置为空并且添加撤回对象里面
+          canvas.renderAll();
+          setOperation("move");
+        }
+      }
+    };
+    let setHDExport = async () => {
+      //获取选中内容的位置信息
+      // if(allBoardData.value.printboardFiles.length <= 0){
+      // 	message.info('Your print is empty')
+      // 	return
+      // }
+      if (allBoardData.value.printboardFiles.length <= 0) {
+        return;
+      }
+      if (credits.value < 30) {
+        message.info(useI18.t("exportModel.jsContent3"));
+        // return
+      }
+      showSRExport.value = true;
+      let arr = [];
+      if (allBoardData.value.printboardFiles) {
+        allBoardData.value.printboardFiles.forEach((item) => {
+          arr.push({
+            imgUrl: item.imgUrl,
+            checked: false,
+          });
+        });
+      }
+      allExportSR.value = arr;
+      allChecked.value = false;
+
+      //多选导出转高清暂时不用
+
+      // let {url,imageType} = await exportSele(canvas,'jpeg')
+      // if(!imageType){
+      // 	message.info('Please select the region of SR')
+      // 	return
+      // }
+      // let img = new Image
+      // img.src = url
+      // let imgStyle = {
+      // 	'width': '80%',
+      // 	'max-height': '30rem',
+      // 	'object-fit': 'contain',
+      // 	'position': 'relative',
+      // 	'left': '50%',
+      // 	'transform': 'translateX(-50%)',
+      // }
+      // let imgElement = createVNode('img',{src:url,style:imgStyle})
+      // img.onload = ()=>{
+      // 	Modal.confirm({
+      // 		title: 'SR needs 300 points, whether to continue？',
+      // 		icon: false,
+      // 		okText: 'Yes',
+      // 		cancelText: 'No',
+      // 		content: imgElement,
+      // 		mask:false,
+      // 		centered:true,
+      // 		onOk() {
+      // 			if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
+      // 				message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
+      // 				return
+      // 			}
+      // 			let data = {
+      // 				images: url,
+      // 				scale: scaleSR.value,
+      // 				uniqueId: "",
+      // 				imageType:imageType,
+      // 			}
+      // 			Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+      // 				console.log(rv);
+      // 				store.dispatch('getCredits')
+      // 				emit('setTask')
+      // 			});
+      // 		},
+      // 		// onCancel(){
+      // 		// 	_this.isShowMark.value = false
+      // 		// 	resolve(false)
+      // 		// }
+      // 	});
+      // }
+    };
+    let allExportSR = ref([]);
+    let scaleSR = ref(2);
+
+    let setScaleSR = (value) => {
+      scaleSR.value = value;
+    };
+    let showSRExport = ref(false);
+    let cancelSRExport = () => {
+      allExportSR.value = [];
+      showSRExport.value = false;
+    };
+    let allChecked = ref(false);
+    let selectImg = (item) => {
+      item.checked = !item.checked;
+      let arr = allExportSR.value.filter((item) => item.checked);
+      if (arr.length == allExportSR.value.length) {
+        allChecked.value = true;
+      } else {
+        allChecked.value = false;
+      }
+    };
+    let selectAllImg = () => {
+      allChecked.value = !allChecked.value;
+      allExportSR.value.forEach((item) => {
+        item.checked = allChecked.value;
+      });
+    };
+    let setExportSR = () => {
+      let arr = [];
+      let data = [];
+      // if(allExportSR.value.filter(item=> item.checked ).length <= 0){
+      // 	message.info('Your print is empty')
+      // 	return
+      // }
+      if (
+        credits <
+        allExportSR.value.filter((item) => item.checked).length * 30
+      ) {
+        message.info(useI18.t("exportModel.jsContent4"));
+        return;
+      }
+      let allPromise = allExportSR.value.map(async (item, index) => {
+        if (item.checked) {
+          return await new Promise((resolve, reject) => {
+            let obj = {};
+            obj = {
+              images: item.imgUrl,
+              scale: scaleSR.value,
+              uniqueId: "",
+            };
+            data.push(obj);
+            let img = new Image();
+            img.onload = () => {
+              if (
+                img.width * scaleSR.value > 2048 ||
+                img.height * scaleSR.value > 2048
+              ) {
+                arr.push(index);
+              }
+              img.remove();
+              resolve(img);
+            };
+            img.src = item.imgUrl;
+          });
+        } else {
+          return;
+        }
+      });
+      Promise.all(allPromise)
+        .then((promiseArr) => {
+          if (arr.length > 0) {
+            arr.forEach((item, index) => (arr[index] += 1));
+            let str = arr.join(",");
+            message.info(useI18.t("exportModel.jsContent5", { str: str }));
+            return;
+          }
+          let aa = promiseArr.filter((item) => item == undefined);
+          if (aa.length == promiseArr.length) {
+            message.info(useI18.t("exportModel.jsContent6"));
+          } else {
+            Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+              emit("setTask", rv);
+              cancelSRExport();
+            });
+          }
+        })
+        .catch((error) => {});
+    };
+
+    let toSvg = () => {
+      // console.log(canvas.toSvg());
+    };
+    let setShare = async () => {
+      initAligningGuidelines(canvas, false);
+      let publishModal = publish.value;
+      publishModal.publishMask = true;
+      var imageDataURL = await setExportCanvas();
+      let data = {
+        imgUrl: imageDataURL,
+        userlikeGroupId: userlikeGroupId,
+      };
+      publishModal.init(data);
+      document.removeEventListener("keydown", canvasKeyDown);
+      document.removeEventListener("keyup", canvasKeyUp);
+    };
+    const clearPublish = () => {
+      document.addEventListener("keydown", canvasKeyDown);
+      document.addEventListener("keyup", canvasKeyUp);
+    };
+    let setSubmit = () => {
+      let data = setCanvasContent(false);
+      data.canvasHeight = canvasWH.value.height;
+      let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
+      let formData = new FormData();
+      formData.append("file", blob, "data.json");
+      formData.append("userLikeGroupId", userlikeGroupId);
+      let config = {
+        headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
+      };
+      Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
+        (rv) => {
+          message.success(t("exportModel.jsContent7"));
+        }
+      );
+    };
+    let setCanvasContent = (isSaveImg) => {
+      var json = canvas.toJSON(["imgId", "minioUrl"]);
+      // console.log(JSON.stringify(json));
+      if (!isSaveImg) {
+        json.objects.forEach((item) => {
+          if (item.type == "image") {
+            delete item.src;
+          }
+        });
+      }
+      return json;
+    };
+    let textDataShow = ref(false);
+    let setTextData = (obj) => {
+      fontFamily.value = obj.fontFamily;
+      canvasPencilWidth.value["text"] = obj.fontSize;
+      canvasPencilColor.value = obj.fill;
+    };
+    let setFontFamily = () => {
+      if (createText.set) {
+        createText.set({
+          fontFamily: fontFamily.value,
+          fontSize: canvasPencilWidth.value[operation.value]
+            ? canvasPencilWidth.value[operation.value]
+            : 20,
+          fill: canvasPencilColor.value,
+        });
+        canvas.renderAll();
+      }
+    };
+
+    //液化
+    //当前选择的液化对象
+    let liquefactionData = ref(null);
+    let liquefaction = ref(null);
+    let submitLiquefaction = (rv) => {
+      const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
+      const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
+      liquefactionData.setSrc(rv, function () {
+        liquefactionData.scaleToWidth(originalWidth);
+        liquefactionData.scaleToHeight(originalHeight);
+        delete liquefactionData.minioUrl;
+        canvas.renderAll();
+        updateCanvasState();
+      });
+    };
+    const clearLiquefaction = () => {
+      setCanvasKeyDown();
+    };
+    let setLiquefaction = () => {
+      const activeObjects = canvas.getActiveObjects(); // 获取选中的对象
+      if (activeObjects.length === 1 && activeObjects[0].type === "image") {
+        liquefactionData = activeObjects[0];
+        liquefaction.value.init(activeObjects[0]);
+        clearCanvasKeyDown();
+      } else {
+        message.info(useI18.t("exportModel.jsContent6"));
+        return null;
+      }
+    };
+    onMounted(() => {
+      let arr = [
+        { value: "Arial", name: "select font" },
+        { value: "EN_slogan_art1", name: "select font" },
+        { value: "EN_slogan_art2", name: "select font" },
+        { value: "EN_slogan_art3", name: "select font" },
+        { value: "EN_slogan_art4", name: "select font" },
+        { value: "EN_slogan_art5", name: "select font" },
+        { value: "EN_slogan_art6", name: "select font" },
+        { value: "EN_slogan_art7", name: "select font" },
+        { value: "微软雅黑", name: "请选择字体" },
+        { value: "CN_slogan_art1", name: "请选择字体" },
+        { value: "CN_slogan_art2", name: "请选择字体" },
+        { value: "CN_slogan_art3", name: "请选择字体" },
+        { value: "CN_slogan_art4", name: "请选择字体" },
+        { value: "华文行楷", name: "请选择字体" },
+        { value: "隶书", name: "请选择字体" },
+      ];
+      textFontFamilyList.value = arr;
+      fontFamily.value = arr[0].value;
+    });
+    onBeforeUnmount(() => {
+      clearCanvasKeyDown();
+    });
+    return {
+      toSvg,
+      t,
+      toSvg,
+      isWindow, //判断是window还是mac
+      showUpgradePlan, //当前弹窗是否打开
+      canvasWH, //画布初始宽高
+      pencilbtnStyle, //笔触按钮
+      publish, //发布作品广场
+      credits, //积分 用来判断HD导出积分是否够用
+      init, //首页点击导出后初始化
+      setExport, //导出所有内容
+      cancelDsign, //关闭画布
+      setMaxInput, //设置画布宽高
+      isShowMark, //加载遮罩
+      allBoardData, //选择画布所有内容
+      closeNav, //导航展开或者收起来状态
+      setCloseNav, //给图片导航或者工具收起来或者展开
+      multiselect, //获取整体高度
+      onDragstart, //拖拽函数
+      setDragstart, //的移动端拖拽改为按下
+      historyState, //执行撤回或者反撤回
+      operation, //设置当前鼠标状态绘画或者矩形或者移动
+      operationMode, //设置矩形是边框还是填充
+      setOperation, //设置当前鼠标状态绘画或者矩形或者移动方法
+      setOperationMode, //设置矩形是边框还是填充方法
+      uploadImage, //上传图帕
+      setLayerIndex, //设置选中元素的层级
+      brushList, //笔触列表
+      clearPublish,
+      textureList, //材质列表
+      canvasPencilColor, //input选择颜色
+      canvasPencilWidth, //input选择宽度
+      setAllSelectWidth, //多选设置宽度
+      allSelectWidth, //多选设置宽度的值
+      colorHistoryList, //历史颜色
+      setColorHistory, //设置历史颜色
+      setPencilColor, //切换颜色执行函数 给当前矩形或者笔触设置颜色
+      setPencilWidth, //切换宽度执行函数 给当前矩形或者笔触设置宽度
+      setHDExport, //高清导出选择的图片
+      brushworkChange, //切换笔触的回调
+      keysList,
+      textureValueChange, //切换材质信息
+      brushworkValue, //当前笔触
+      textureValue, //当前材质
+      scaleSR,
+      setScaleSR,
+      //SR页面
+      showSRExport,
+      allExportSR,
+      cancelSRExport, //关闭高清导出
+      allChecked, //全选
+      selectAllImg, //控制全选
+      selectImg, //选中单个图片
+      setExportSR, //设置SR导出
+      setShare,
+      setSubmit,
+      textFontFamilyList,
+      fontFamily,
+      textDataShow,
+      setFontFamily,
+      //液化
+      liquefaction,
+      submitLiquefaction,
+      clearLiquefaction,
+      setLiquefaction,
+    };
+  },
+  data(prop) {
+    return {
+      isMoible: isMoible(),
+    };
+  },
+  computed: {
+    setGradient() {
+      return (gradient) => {
+        let gradientStr = "";
+        gradient.gradientList.sort((a, b) => {
+          let aArr = a.left.split("%")[0];
+          let bArr = b.left.split("%")[0];
+          return aArr - bArr;
+        });
+        gradient.gradientList.forEach((item, index) => {
+          let str = ",";
+          if (gradient.gradientList.length == index + 1) str = "";
+          gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`;
+        });
+        return `${gradientStr}`;
+      };
+    },
+  },
+  watch: {
+    "canvasWH.height": {
+      handler(newVal, oldVal) {
+        let canvasBox = document.querySelector(
+          ".exportCanvasBox .exportCanvasBox_center"
+        );
+        let scrollBox = document.querySelector(".exportCanvasBox_scroll div");
+        if (!canvasBox || !scrollBox) return;
+        canvasBox.scroll({
+          top: 0, // 纵向滚动距离
+          left: 0, // 横向滚动距离
+        });
+        scrollBox.style.marginTop = 0 + "px";
+        let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight);
+        scrollBox.style.height = height + "px";
+        if (oldVal != 0) return;
+        let canvasBoxDom = document.querySelector(
+          ".exportCanvasBox .exportCanvasBox_center"
+        );
+        let scale =
+          (newVal - canvasBoxDom.offsetHeight) /
+          (canvasBoxDom.offsetHeight - height);
+        let mouseDownOperation = (event) => {
+          //按下
+          let position = {
+            y: event.screenY,
+            top: scrollBox.style.marginTop
+              ? scrollBox.style.marginTop.split("px")[0] * 1
+              : 0,
+          };
+          // let top =
+          let scrollMousemove = (e) => {
+            let height = scrollBox.style.height.split("px")[0] * 1;
+            let offsetTop = position.top + e.screenY - position.y;
+            offsetTop = offsetTop <= 0 ? 0 : offsetTop;
+            offsetTop =
+              height + offsetTop >= canvasBoxDom.offsetHeight
+                ? canvasBoxDom.offsetHeight - height
+                : offsetTop;
+            scrollBox.style.marginTop = offsetTop + "px";
+            canvasBoxDom.scroll({
+              top: offsetTop * scale, // 纵向滚动距离
+              left: 0, // 横向滚动距离
+            });
+          };
+          let mouseMove = function (event) {
+            let e = getMousePosition(event, false);
+            scrollMousemove(e);
+          };
+          let touchmove = function (event) {
+            let e = getMousePosition(event, true);
+            scrollMousemove(e);
+          };
+          let mouseup = function () {
+            document.removeEventListener("mousemove", mouseMove);
+            document.removeEventListener("touchmove", touchmove);
+            document.removeEventListener("mouseup", mouseup);
+            document.removeEventListener("touchend", mouseup);
+            //移动端
+          };
+          document.addEventListener("mousemove", mouseMove);
+          document.addEventListener("touchmove", touchmove);
+          document.addEventListener("mouseup", mouseup);
+          document.addEventListener("touchend", mouseup);
+
+          // document.addEventListener('touchmove',scrollMousemove)
+          // scrollBox.addEventListener('touchend',mouseup)
+        };
+        canvasBoxDom.addEventListener("scroll", () => {
+          let height =
+            canvasBox.offsetHeight /
+            (this.canvasWH.height / canvasBox.offsetHeight);
+          let scale =
+            (this.canvasWH.height - canvasBoxDom.offsetHeight) /
+            (canvasBoxDom.offsetHeight - height);
+          const scrollTop = canvasBoxDom.scrollTop;
+          scrollBox.style.marginTop = scrollTop / scale + "px";
+        });
+        let mousedown = function (event) {
+          let e = getMousePosition(event, false);
+          mouseDownOperation(e);
+        };
+
+        let touchstart = function (event) {
+          let e = getMousePosition(event, true);
+          mouseDownOperation(e);
+        };
+        scrollBox.addEventListener("mousedown", mousedown);
+        scrollBox.addEventListener("touchstart", touchstart);
+      },
+    },
+  },
+  mounted() {},
+
+  methods: {},
 });
 </script>
 <style lang="less" scoped>
-
 :deep(.Export) {
-    flex: 1;
-    // height: 30rem;
-    // overflow-x: hidden;
-	>.ant-modal-content {
-		.ant-modal-body{
-			display: flex;
-			flex-direction: column;
-			background: #f9fafb;
-			border-radius: 3rem;
-		}
-	}
-    .icon{
-		transition: all .3s;
-	}
-	.icon-rotate{
-		transform: rotate(-180deg);
-	}
-	
-    .exportCanvasBox {
-        flex: 1;
-        overflow-x: hidden;
-        display: flex;
-        margin-top: 2rem;
-        justify-content: space-between;
-		flex-direction: column;
-        .exportCanvasBox_title {
-            margin-bottom: .5rem;
-            font-size: 1.8rem;
-            // font-weight: 600;
-			// margin-top: 2rem;
-			padding-top: 2rem;
-			display: flex;
-			top: -1rem;
-			justify-content: space-between;
-			cursor: pointer;
-			position: sticky;
-			z-index: 2;
-			align-items: flex-start;
-			margin: 0 2rem;
-			
-        }
-		.exportCanvasBox_intro{
-			margin-bottom: 1rem;
-            font-size: 1.6rem;
-            font-weight: 600;
-			width: 100%;
-		}
-        .exportCanvasBox_right,
-        .exportCanvasBox_left {
-			width: 100%;
-			height: auto;
-			.exportCanvasBox_left_tool{
-				margin: 0;
-			}
-			.shortcutKeys_box{
-				position: relative;
-				.shortcutKeys_list{
-					display: none;
-					position: absolute;
-					z-index: 2;
-					width: 30rem;
-					max-height: 45rem;
-					background: #f7f8fa;
-					border-radius: 2rem;
-					right: 0;
-					overflow-y: auto;
-					padding: 2rem;
-					.shortcutKeys_list_item{
-						display: flex;
-						font-size: 1.8rem;
-						justify-content: space-between;
-						margin-bottom: 2rem;
-						>.key{
-							display: flex;
-						}
-					}	
-					.shortcutKeys_list_item:last-child{
-					    margin-bottom: 0;
-					}
-				}
-				&:hover{
-					.shortcutKeys_list{
-						display: block;
-					}
-				}
-			}
-			
-			.label_item,label {
-                display: flex;
-				align-items: center;
-				width: 23%;
-                div {
-                    width: auto;
-					margin-right: 2rem;
-					white-space: nowrap;
-                }
-                input,select {
-                    // width: 10em;
-					flex: 1;
-					overflow: hidden !important;
-					height: 4.5rem;
-                }
-				
-				.label_select{
-					img{
-						width: 100%;
-						max-height: 100%;
-						object-fit: contain;
-					}
-				}
-            }
-			.texture{
-				.label_select{
-					img{
-						max-height: none;
-					}
-				}
-			}
-			.exportCanvasBox_left_item{
-				width: 20rem;
-				.exportCanvasBox_title{
-					.exportCanvasBox_left_tool_item{
-						display: flex;
-					}
-				}
-				
-			}
-			.exportCanvasBox_left_item.closeNav{
-				// max-height: 1000rem;
-				// height: auto;
-				display: block;
-			}
-        }
-		.exportCanvasBox_left::-webkit-scrollbar,
-		.exportCanvasBox_right::-webkit-scrollbar{display: none;}
-        .exportCanvasBox_left {
-			padding-right: 1rem;
-			margin-right: 2rem;
-			// height: 7rem;
-			display: flex;
-			flex-wrap: wrap;
-			align-items: flex-start;
-			position: relative;
-			flex-direction: row;
-			>label{
-				width: 20%;
-			}
-			.exportCanvasBox_title {
-				// margin: 0 4rem;
-				position: relative;
-				.exportCanvasBox_left_tool_item{
-					display: flex;
-					flex-direction: column;
-					
-				}
-				.exportCanvasBox_left_tool_item_more{
-					flex-wrap: wrap;
-					flex-direction: row;
-					justify-content: flex-start;
-					padding: 1rem;
-				}
-			}
-            .exportCanvasBox_left_item{
-				overflow: hidden;
-				transition: all .3s;
-				// max-height: 0;
-				transform: translate3d(0, 0, 0);
-				position: absolute;
-			}
-			.exportCanvasBox_left_item,.exportCanvasBox_imgbor,.exportCanvasBox_operation_bor{
-				background: #fff;
-				height: auto;
-				max-height: 30rem;
-				border: 1px solid;
-				display: none;
-				top: 7rem;
-				position: absolute;
-			}
-			.exportCanvasBox_left_item.exportCanvasBox_left_tool{
-				top: 100%;
-				transform: translateY(-110%);
-				left: 100%;
-			}
-			
-            .exportCanvasBox_imgbor {
-				// height: auto;
-				width: 20rem;
-				overflow-y: auto;
-				padding: 1rem;
-				&.exportCanvasBox_imgbor::-webkit-scrollbar{display: none;}
-
-                .exportCanvasBox_allItem {
-                    display: flex;
-                    flex-wrap: wrap;
-					// justify-content: space-between;
-					justify-content: flex-start;
-                    .exportCanvasBox_item {
-                        text-align: center;
-						margin-right: 1rem;
-						.exportCanvasBox_img{
-							position: relative;
-							margin-bottom: 2rem;
-							img {
-								max-width: 7rem;
-								max-height: 14rem;
-								object-fit: contain;
-								
-							}
-							.exportCanvasBox_img_SR{
-								position: absolute;
-								bottom: 0;
-								height: 2rem;
-								background: rgba(0, 0, 0, 0.3);
-								color: #fff;
-								width: 100%;
-								text-align: center;
-								font-weight: 600;
-								cursor: pointer;
-							}
-						}
-                       
-                    }
-					.exportCanvasBox_item_colorBor{
-						width: 100%;
-						display: flex;
-						flex-wrap: wrap;
-						justify-content: space-between;
-					}
-					.exportCanvasBox_item_color{
-						width: 8rem;
-						margin-bottom: 2rem;
-						.exportCanvasBox_item_BGcolor{
-							height: 5rem;
-						}
-						div{
-							// -webkit-user-select:none; /* Safari */
-							// -moz-user-select:none; /* Firefox */
-							// -ms-user-select:none; /* IE10+/Edge */
-							// user-select:none; /* Standard syntax */
-						}
-					}
-					.exportCanvasBox_item_dispose{
-						img{
-							max-width: 100%;
-							max-height: 100%;
-						}
-					}
-					.active{
-						opacity: .5;
-						transform: scale(.9);
-					}
-                }
-            }
-			.exportCanvasBox_operation_bor_item{
-				flex: 1;
-				margin-left: 8rem;
-				display: flex;
-				.label_item{
-					margin-right: 2rem;
-					position: relative;
-					.labelHover_show{
-						position: absolute;
-						width: 100%;
-						height: 10rem;
-						top: 100%;
-						z-index: 2;
-						flex-wrap: wrap;
-						div{
-							width: 3rem;
-							height: 3rem;
-							margin-right: 1rem;
-							margin-bottom: 1rem;
-							cursor: pointer;
-						}
-					}
-				}
-				.label_item:hover{
-					.labelHover_show{
-						display: flex;
-					}
-				}
-			}
-			.exportCanvasBox_left_tool_item{
-				display: flex;
-				flex: 1;
-				flex-wrap: wrap;
-				justify-content: space-between;
-				align-items: center;
-
-				flex-direction: row;
-				flex-wrap: nowrap;
-				&.leftAlign{
-					justify-content: flex-start;
-				}
-				&.leftAlign{
-					justify-content: flex-start;
-				}
-				
-				i{
-					font-size: 2.5rem;
-					cursor: pointer;
-					width: 4rem;
-					height: 4rem;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					flex-shrink: 0;
-					&.active{
-						border: 1px solid;
-						border-radius: .4rem;
-					}
-				}
-				.icon-xiala{
-					transform: rotate(-90deg);
-					&.icon-rotate-tool{
-						transform: rotate(90deg);
-					}
-				}
-				.uploadImage{
-					width: 4rem;
-					height: 4rem;
-					input{
-						height: 0;
-						width: 0;
-						border: none;
-					}
-				}
-				
-			}
-        }
-		.exportCanvasBox_bottom{
-			width: 100%;
-			flex-shrink: 0;
-			background: #f9fafb;
-			z-index: 2;
-			padding-top: 2rem;
-			.exportCanvasBox_left_credits{
-				margin-right: auto
-			}
-			.exportCanvasBox_left_btn{
-				display: flex;
-				justify-content: flex-end;
-				flex-wrap: wrap;
-				align-items: flex-start;
-				.subitOkPreviewBtn{
-					position: initial;
-					transform: none;
-					margin-bottom: 0rem;
-					width: auto;
-					text-align: center;
-					&.active{
-						opacity: .7;
-						cursor: not-allowed;
-					}
-				}
-				.subitOkPreviewBtn:nth-child(2n){
-					margin: 0 1rem;
-				}
-			}
-		}
-		.exportCanvasBox_center_box{
-			display: flex;
-			overflow: hidden;
-		}
-        .exportCanvasBox_center {
-			flex: 1;
-            height: 100%;
-            overflow-y: auto;
-            overflow-x: hidden;
-			// overflow: hidden;
-			position: relative;
-			.editFrontBack_pencilbtn{
-				position: absolute;
-				z-index: 1;
-				border-radius: 50%;
-				border: 1px solid #000;
-				pointer-events: none;
-				transform: translate(-50%,-50%);
-			}
-			&.exportCanvasBox_center::-webkit-scrollbar {
-				/* 竖轴的宽度 */
-				display: none
-			}
-        }
-		.exportCanvasBox_scroll{
-			height: 100%;
-			width: 2rem;
-			background: #d6cfe3;
-			position: absolute;
-			right: 0;
-			top: 0;
-			border-radius: 1rem;
-			div{
-				background: #543087;
-				border-radius: 1rem;
-				width: 100%;
-				height: 30rem;
-			}
-		}
-        .export_new_collection_review {
-            position: initial;
-            margin: 10rem auto;
-            margin-bottom: 0;
-        }
+  flex: 1;
+  // height: 30rem;
+  // overflow-x: hidden;
+  > .ant-modal-content {
+    .ant-modal-body {
+      display: flex;
+      flex-direction: column;
+      background: #f9fafb;
+      border-radius: 3rem;
     }
+  }
+  .icon {
+    transition: all 0.3s;
+  }
+  .icon-rotate {
+    transform: rotate(-180deg);
+  }
+
+  .exportCanvasBox {
+    flex: 1;
+    overflow-x: hidden;
+    display: flex;
+    margin-top: 2rem;
+    justify-content: space-between;
+    flex-direction: column;
+    .exportCanvasBox_title {
+      margin-bottom: 0.5rem;
+      font-size: 1.8rem;
+      // font-weight: 600;
+      // margin-top: 2rem;
+      padding-top: 2rem;
+      display: flex;
+      top: -1rem;
+      justify-content: space-between;
+      cursor: pointer;
+      position: sticky;
+      z-index: 2;
+      align-items: flex-start;
+      margin: 0 2rem;
+    }
+    .exportCanvasBox_intro {
+      margin-bottom: 1rem;
+      font-size: 1.6rem;
+      font-weight: 600;
+      width: 100%;
+    }
+    .exportCanvasBox_right,
+    .exportCanvasBox_left {
+      width: 100%;
+      height: auto;
+      .exportCanvasBox_left_tool {
+        margin: 0;
+      }
+      .shortcutKeys_box {
+        position: relative;
+        .shortcutKeys_list {
+          display: none;
+          position: absolute;
+          z-index: 2;
+          width: 30rem;
+          max-height: 45rem;
+          background: #f7f8fa;
+          border-radius: 2rem;
+          right: 0;
+          overflow-y: auto;
+          padding: 2rem;
+          .shortcutKeys_list_item {
+            display: flex;
+            font-size: 1.8rem;
+            justify-content: space-between;
+            margin-bottom: 2rem;
+            > .key {
+              display: flex;
+            }
+          }
+          .shortcutKeys_list_item:last-child {
+            margin-bottom: 0;
+          }
+        }
+        &:hover {
+          .shortcutKeys_list {
+            display: block;
+          }
+        }
+      }
+
+      .label_item,
+      label {
+        display: flex;
+        align-items: center;
+        width: 23%;
+        div {
+          width: auto;
+          margin-right: 2rem;
+          white-space: nowrap;
+        }
+        input,
+        select {
+          // width: 10em;
+          flex: 1;
+          overflow: hidden !important;
+          height: 4.5rem;
+        }
+
+        .label_select {
+          img {
+            width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+          }
+        }
+      }
+      .texture {
+        .label_select {
+          img {
+            max-height: none;
+          }
+        }
+      }
+      .exportCanvasBox_left_item {
+        width: 20rem;
+        .exportCanvasBox_title {
+          .exportCanvasBox_left_tool_item {
+            display: flex;
+          }
+        }
+      }
+      .exportCanvasBox_left_item.closeNav {
+        // max-height: 1000rem;
+        // height: auto;
+        display: block;
+      }
+    }
+    .exportCanvasBox_left::-webkit-scrollbar,
+    .exportCanvasBox_right::-webkit-scrollbar {
+      display: none;
+    }
+    .exportCanvasBox_left {
+      padding-right: 1rem;
+      margin-right: 2rem;
+      // height: 7rem;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      position: relative;
+      flex-direction: row;
+      > label {
+        width: 20%;
+      }
+      .exportCanvasBox_title {
+        // margin: 0 4rem;
+        position: relative;
+        .exportCanvasBox_left_tool_item {
+          display: flex;
+          flex-direction: column;
+        }
+        .exportCanvasBox_left_tool_item_more {
+          flex-wrap: wrap;
+          flex-direction: row;
+          justify-content: flex-start;
+          padding: 1rem;
+        }
+      }
+      .exportCanvasBox_left_item {
+        overflow: hidden;
+        transition: all 0.3s;
+        // max-height: 0;
+        transform: translate3d(0, 0, 0);
+        position: absolute;
+      }
+      .exportCanvasBox_left_item,
+      .exportCanvasBox_imgbor,
+      .exportCanvasBox_operation_bor {
+        background: #fff;
+        height: auto;
+        max-height: 30rem;
+        border: 1px solid;
+        display: none;
+        top: 7rem;
+        position: absolute;
+      }
+      .exportCanvasBox_left_item.exportCanvasBox_left_tool {
+        top: 100%;
+        transform: translateY(-110%);
+        left: 100%;
+      }
+
+      .exportCanvasBox_imgbor {
+        // height: auto;
+        width: 20rem;
+        overflow-y: auto;
+        padding: 1rem;
+        &.exportCanvasBox_imgbor::-webkit-scrollbar {
+          display: none;
+        }
+
+        .exportCanvasBox_allItem {
+          display: flex;
+          flex-wrap: wrap;
+          // justify-content: space-between;
+          justify-content: flex-start;
+          .exportCanvasBox_item {
+            text-align: center;
+            margin-right: 1rem;
+            .exportCanvasBox_img {
+              position: relative;
+              margin-bottom: 2rem;
+              img {
+                max-width: 7rem;
+                max-height: 14rem;
+                object-fit: contain;
+              }
+              .exportCanvasBox_img_SR {
+                position: absolute;
+                bottom: 0;
+                height: 2rem;
+                background: rgba(0, 0, 0, 0.3);
+                color: #fff;
+                width: 100%;
+                text-align: center;
+                font-weight: 600;
+                cursor: pointer;
+              }
+            }
+          }
+          .exportCanvasBox_item_colorBor {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+          }
+          .exportCanvasBox_item_color {
+            width: 8rem;
+            margin-bottom: 2rem;
+            .exportCanvasBox_item_BGcolor {
+              height: 5rem;
+            }
+            div {
+              // -webkit-user-select:none; /* Safari */
+              // -moz-user-select:none; /* Firefox */
+              // -ms-user-select:none; /* IE10+/Edge */
+              // user-select:none; /* Standard syntax */
+            }
+          }
+          .exportCanvasBox_item_dispose {
+            img {
+              max-width: 100%;
+              max-height: 100%;
+            }
+          }
+          .active {
+            opacity: 0.5;
+            transform: scale(0.9);
+          }
+        }
+      }
+      .exportCanvasBox_operation_bor_item {
+        flex: 1;
+        margin-left: 8rem;
+        display: flex;
+        .label_item {
+          margin-right: 2rem;
+          position: relative;
+          .labelHover_show {
+            position: absolute;
+            width: 100%;
+            height: 10rem;
+            top: 100%;
+            z-index: 2;
+            flex-wrap: wrap;
+            div {
+              width: 3rem;
+              height: 3rem;
+              margin-right: 1rem;
+              margin-bottom: 1rem;
+              cursor: pointer;
+            }
+          }
+        }
+        .label_item:hover {
+          .labelHover_show {
+            display: flex;
+          }
+        }
+      }
+      .exportCanvasBox_left_tool_item {
+        display: flex;
+        flex: 1;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+
+        flex-direction: row;
+        flex-wrap: nowrap;
+        &.leftAlign {
+          justify-content: flex-start;
+        }
+        &.leftAlign {
+          justify-content: flex-start;
+        }
+
+        i {
+          font-size: 2.5rem;
+          cursor: pointer;
+          width: 4rem;
+          height: 4rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          &.active {
+            border: 1px solid;
+            border-radius: 0.4rem;
+          }
+        }
+        .icon-xiala {
+          transform: rotate(-90deg);
+          &.icon-rotate-tool {
+            transform: rotate(90deg);
+          }
+        }
+        .uploadImage {
+          width: 4rem;
+          height: 4rem;
+          input {
+            height: 0;
+            width: 0;
+            border: none;
+          }
+        }
+      }
+    }
+    .exportCanvasBox_bottom {
+      width: 100%;
+      flex-shrink: 0;
+      background: #f9fafb;
+      z-index: 2;
+      padding-top: 2rem;
+      .exportCanvasBox_left_credits {
+        margin-right: auto;
+      }
+      .exportCanvasBox_left_btn {
+        display: flex;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        .subitOkPreviewBtn {
+          position: initial;
+          transform: none;
+          margin-bottom: 0rem;
+          width: auto;
+          text-align: center;
+          &.active {
+            opacity: 0.7;
+            cursor: not-allowed;
+          }
+        }
+        .subitOkPreviewBtn:nth-child(2n) {
+          margin: 0 1rem;
+        }
+      }
+    }
+    .exportCanvasBox_center_box {
+      display: flex;
+      overflow: hidden;
+    }
+    .exportCanvasBox_center {
+      flex: 1;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      // overflow: hidden;
+      position: relative;
+      .editFrontBack_pencilbtn {
+        position: absolute;
+        z-index: 1;
+        border-radius: 50%;
+        border: 1px solid #000;
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+      }
+      &.exportCanvasBox_center::-webkit-scrollbar {
+        /* 竖轴的宽度 */
+        display: none;
+      }
+    }
+    .exportCanvasBox_scroll {
+      height: 100%;
+      width: 2rem;
+      background: #d6cfe3;
+      position: absolute;
+      right: 0;
+      top: 0;
+      border-radius: 1rem;
+      div {
+        background: #543087;
+        border-radius: 1rem;
+        width: 100%;
+        height: 30rem;
+      }
+    }
+    .export_new_collection_review {
+      position: initial;
+      margin: 10rem auto;
+      margin-bottom: 0;
+    }
+  }
 }
 </style>
 <style lang="less">
 .Export {
-    .ant-modal-content {
-        .ant-modal-body {
-            height: calc(65rem * 1.2);
-        }
+  .ant-modal-content {
+    .ant-modal-body {
+      height: calc(65rem * 1.2);
     }
-	
+  }
 }
-.label_select_item{
-	img{
-		width: 100%;
-		max-height: 100%;
-		object-fit: contain;
-	}
+.label_select_item {
+  img {
+    width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
 }
 </style>
 <style lang="less">
-.SRExport{
-	.ant-modal-body{
-		height: calc(35rem* 1.2);
-	}
-	.SRExport_img{
-		margin-bottom: 2rem;
-		flex: 1;
-		overflow-x: hidden;
-		display: flex;
-		flex-wrap: wrap;
-		min-height: 12rem;
-		.SRExport_img_item_box{
-			position: relative;
-			margin-right: 2rem;
-			margin-bottom: 2rem;
-			input{
-				position: absolute;
-				top: .5rem;
-				right: .5rem;
-				z-index: 2;
-				height: 2rem;
-				width: 2rem;
-			}
-		}
-		img{
-			width: 10rem;
-			max-height: 10rem;
-			object-fit: contain;
-			text-align: center;
-			cursor: pointer;
-			&.active{
-				transform: scale(.8);
-				opacity: .6;
-			}
-		}
-	}
-	.check_all_block{
-		display: flex;
-		align-items: center;
-		font-size: 1.6rem;
-		color: #64686D;
-		cursor: pointer;
-		justify-content: flex-end;
-		&.check_all{
-			color: #1A1A1A;
-			.check_block{
-				.check_block_body{
-					opacity: 1;
-				}
-			}
+.SRExport {
+  .ant-modal-body {
+    height: calc(35rem * 1.2);
+  }
+  .SRExport_img {
+    margin-bottom: 2rem;
+    flex: 1;
+    overflow-x: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 12rem;
+    .SRExport_img_item_box {
+      position: relative;
+      margin-right: 2rem;
+      margin-bottom: 2rem;
+      input {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 2;
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+    img {
+      width: 10rem;
+      max-height: 10rem;
+      object-fit: contain;
+      text-align: center;
+      cursor: pointer;
+      &.active {
+        transform: scale(0.8);
+        opacity: 0.6;
+      }
+    }
+  }
+  .check_all_block {
+    display: flex;
+    align-items: center;
+    font-size: 1.6rem;
+    color: #64686d;
+    cursor: pointer;
+    justify-content: flex-end;
+    &.check_all {
+      color: #1a1a1a;
+      .check_block {
+        .check_block_body {
+          opacity: 1;
+        }
+      }
+    }
 
-		}
+    .check_block {
+      width: 2.4rem;
+      height: 2.4rem;
+      background: #ebecf4;
+      border: 0.1rem solid #64686d;
+      padding: 0.3rem;
+      margin-right: 0.7rem;
+      .check_block_body {
+        width: 100%;
+        opacity: 0;
+        height: 100%;
+        background: #000;
+      }
+    }
+  }
+  .SRExport_operate {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .SRExport_operate_box {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1rem;
+      width: 100%;
+      > div {
+        width: 5rem;
+      }
+      .SRExport_operate_item_sclae {
+        width: 4rem;
+        height: 3rem;
+        border: 0.2rem solid rgba(0, 0, 0, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        cursor: pointer;
+        border-radius: 0.4rem;
+        font-weight: 600;
+        &.active {
+          border-color: rgba(152, 139, 247);
+          color: rgba(152, 139, 247);
+        }
+      }
+      .SRExport_operate_sclae {
+        max-width: 15rem;
+      }
 
-		.check_block{
-			width: 2.4rem;
-			height: 2.4rem;
-			background: #EBECF4;
-			border: 0.1rem solid #64686D;
-			padding: 0.3rem;
-			margin-right: 0.7rem;
-			.check_block_body{
-				width: 100%;
-				opacity: 0;
-				height: 100%;
-				background: #000;
-			}
-		}
-	}
-	.SRExport_operate{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		.SRExport_operate_box {
-			display: flex;
-			align-items: center;
-			margin-bottom: 1rem;
-			width: 100%;
-			>div {
-				width: 5rem;
-			}
-			.SRExport_operate_item_sclae{
-				width: 4rem;
-				height: 3rem;
-				border: .2rem solid rgba(0, 0, 0, 0.3);
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				margin-right: 1rem;
-				cursor: pointer;
-				border-radius: .4rem;
-				font-weight: 600;
-				&.active{
-					border-color: rgba(152, 139, 247);
-					color: rgba(152, 139, 247);
-				}
-			}
-			.SRExport_operate_sclae{
-				max-width: 15rem;
-				
-			}
-			
-			// input {
-			// 	// width: 10em;
-			// 	overflow: hidden;
-			// }
-			// label{
-			// 	display: flex;
-			// 	align-items: center;
-			// 	margin-right: 2rem;
-			// 	span{
-			// 		margin-right: 1rem;
-			// 	}
-			// }
-		}
-	}
-	.generalModelOperate_endBtn{
-		.generalModelOperate_btn_ok{
-			&.active{
-				opacity: .6;
-				cursor: no-drop;
-			}
-		}
-	}
-	
+      // input {
+      // 	// width: 10em;
+      // 	overflow: hidden;
+      // }
+      // label{
+      // 	display: flex;
+      // 	align-items: center;
+      // 	margin-right: 2rem;
+      // 	span{
+      // 		margin-right: 1rem;
+      // 	}
+      // }
+    }
+  }
+  .generalModelOperate_endBtn {
+    .generalModelOperate_btn_ok {
+      &.active {
+        opacity: 0.6;
+        cursor: no-drop;
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/home/design/index.vue b/src/component/home/design/index.vue
index de650a6e..b93d4a41 100644
--- a/src/component/home/design/index.vue
+++ b/src/component/home/design/index.vue
@@ -1,124 +1,201 @@
 <template>
-	<div class="designPage">
-		<div class="page_content">
-			
-			<div class="page_content_body">
-				<div class="designPage_body">
-					<div class="designPage_left" ref="hidden">
-						<div class="designPage_left_content" :class="{'active':(domHidden)}">
-							<!-- 有图状态 start-->
-							 
-							<div class="home_left_info">
-								<div class="left_info_content scroll_style">
-									<div class="left_info_content_body" ref="collection_canvas">
-										<div class="right_content_header">
-											<div class="content_header_left" style="padding-top: 2rem;">
-												<i class="fi fi-rs-comments"></i><span class="content_header_des">
-													{{ $t('HomeView.elementTitle') }}
-													</span>
-											</div>
-										</div>	
-										<NewCollectionReview id="collectionReview" @openCollection="openCollection"></NewCollectionReview>
-									</div>
-								</div>
-								<div v-show="isMannequinShow" class="left_info_hint">
-									<span class="icon iconfont icon-zhuyi"></span>
-									<span>{{ $t('HomeView.masnnequinHint') }}</span>
-								</div>
-							</div>
-							<!-- 有图状态 end-->
-						</div>
-						<div class="designPage_left_bottom" @click="setShowHide('domHidden')" >
-							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
-						</div>
-					</div>
-					<div class="designPage_right">
-						<div class="right_top">
-						<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
-							<div class="right_top_left">
-								<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
-								<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
-									{{ $t('HomeView.Design') }}
-								</div>
-								<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
+  <div class="designPage">
+    <div class="page_content">
+      <div class="page_content_body">
+        <div class="designPage_body">
+          <div class="designPage_left" ref="hidden">
+            <div class="designPage_left_content" :class="{ active: domHidden }">
+              <!-- 有图状态 start-->
+
+              <div class="home_left_info">
+                <div class="left_info_content scroll_style">
+                  <div class="left_info_content_body" ref="collection_canvas">
+                    <div class="right_content_header">
+                      <div
+                        class="content_header_left"
+                        style="padding-top: 2rem"
+                      >
+                        <i class="fi fi-rs-comments"></i
+                        ><span class="content_header_des">
+                          {{ $t("HomeView.elementTitle") }}
+                        </span>
+                      </div>
+                    </div>
+                    <NewCollectionReview
+                      id="collectionReview"
+                      @openCollection="openCollection"
+                    ></NewCollectionReview>
+                  </div>
+                </div>
+                <div v-show="isMannequinShow" class="left_info_hint">
+                  <span class="icon iconfont icon-zhuyi"></span>
+                  <span>{{ $t("HomeView.masnnequinHint") }}</span>
+                </div>
+              </div>
+              <!-- 有图状态 end-->
+            </div>
+            <div
+              class="designPage_left_bottom"
+              @click="setShowHide('domHidden')"
+            >
+              <span
+                class="icon iconfont icon-xiala"
+                :class="{ active: domHidden }"
+              ></span>
+            </div>
+          </div>
+          <div class="designPage_right">
+            <div class="right_top">
+              <!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
+              <div class="right_top_left">
+                <div
+                  class="gallery_btn white Guide_1_15"
+                  @click="designNewCollection()"
+                >
+                  <!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
+                  {{ $t("HomeView.Design") }}
+                </div>
+                <!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
 									@click="resDesignCollection()">
 									{{ $t('HomeView.Redesign') }}
 								</div> -->
-								<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
-									
-								</div>
-							</div>
-							<div class="right_top_right">
-								
-							</div>
-						</div>
-						<div class="right_content_block_box">
-							<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
-								<div class="right_content_body">
-									<div class="right_content_header">
-										<div class="content_header_left">
-											<i class="fi fi-rs-comments"></i><span class="content_header_des">
-												{{ $t('HomeView.SelectedDesign') }}
-												</span>
-										</div>
-										<div class="generalModel_state" v-show="domHidden || !recycleDomHidden">
-											<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
-												<span>Type :</span>
-												<a-select
-													v-model:value="resultType"
-													size="large"
-													style="width: 15rem"
-													placeholder="Please select"
-													:options="resultTypeList"
-													@change="changeResultType"
-												>
-												</a-select>
-											</div>
-											<div @click="setUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
-												<span>Unfold :</span>
-												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
-											</div>
-											<div class="generalModel_state_item smail" style="margin-right: 0;">
-												<span>Size :</span>
-												<a-select
-													v-model:value="widthValue.value"
-													size="large"
-													style="width: 15rem"
-													placeholder="Please select"
-													:options="widthList"
-													@change="setSystemDesigner(500)"
-												>
-												</a-select>
-											</div>
-										</div>
-									</div>
-									<div class="right_content_img_block scroll_style active">
-										<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
-											<!-- likeDesignCollectionList -->
-											<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
-												v-for="(design, index) in selectLikeDesign" :key="design.id || design.designItemId">
-												<div class="content_img_flex"
-												:class="[design.resultType]"
-												@mouseenter="startHover(getMousePosition($event,false),design)"
-												@mouseleave="endHover(getMousePosition($event,false),design)"
-												@mousedown.stop="designMousedown(getMousePosition($event,false),design,'like')" 
-												@touchstart.passive="designMousedown(getMousePosition($event,true),design,'like')"
-												@click="designDetail(
-														design,
-														index,
-														selectLikeDesign,
-														'like'
-													)">
-													<img class="content_img" 
-														v-if="design.resultType == 'PoseTransfer'" 
-														:src="design.firstFrameUrl" alt="" 
-														@mouseenter.stop="gifPlay($event,design)"
-														@mouseleave.stop="gifPause($event,design)" >
-													<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
-														:key="design.designOutfitUrl" designType="like" :index="index"/>
-													<a-spin v-show="design?.generateAwait" size="large"></a-spin>
+                <div
+                  class="silder button_margin_14"
+                  v-show="likeDesignCollectionList?.length > 0"
+                ></div>
+              </div>
+              <div class="right_top_right"></div>
+            </div>
+            <div class="right_content_block_box">
+              <div
+                class="right_content_block"
+                ref="rightContentBlockBox"
+                @mouseenter="mouseenter($event, 'like')"
+              >
+                <div class="right_content_body">
+                  <div class="right_content_header">
+                    <div class="content_header_left">
+                      <i class="fi fi-rs-comments"></i
+                      ><span class="content_header_des">
+                        {{ $t("HomeView.SelectedDesign") }}
+                      </span>
+                    </div>
+                    <div
+                      class="generalModel_state"
+                      v-show="domHidden || !recycleDomHidden"
+                    >
+                      <div
+                        v-show="isUnfold"
+                        class="generalModel_state_item smail"
+                        style="margin-right: 1rem"
+                      >
+                        <span>Type :</span>
+                        <a-select
+                          v-model:value="resultType"
+                          size="large"
+                          style="width: 15rem"
+                          placeholder="Please select"
+                          :options="resultTypeList"
+                          @change="changeResultType"
+                        >
+                        </a-select>
+                      </div>
+                      <div
+                        @click="setUnfold"
+                        class="generalModel_state_item smail"
+                        style="margin-right: 1rem"
+                      >
+                        <span>Unfold :</span>
+                        <a-switch
+                          v-model:checked="isUnfold"
+                          @change="setUnfold"
+                        />
+                      </div>
+                      <div
+                        class="generalModel_state_item smail"
+                        style="margin-right: 0"
+                      >
+                        <span>Size :</span>
+                        <a-select
+                          v-model:value="widthValue.value"
+                          size="large"
+                          style="width: 15rem"
+                          placeholder="Please select"
+                          :options="widthList"
+                          @change="setSystemDesigner(500)"
+                        >
+                        </a-select>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right_content_img_block scroll_style active">
+                    <div
+                      class="right_content_img_item"
+                      ref="likeItemDom"
+                      designType="like"
+                      :index="0"
+                    >
+                      <!-- likeDesignCollectionList -->
+                      <div
+                        class="content_img_block content_img_GetWidth active"
+                        :style="likeStyle"
+                        v-for="(design, index) in selectLikeDesign"
+                        :key="design.id || design.designItemId"
+                      >
+                        <div
+                          class="content_img_flex"
+                          :class="[design.resultType]"
+                          @mouseenter="
+                            startHover(getMousePosition($event, false), design)
+                          "
+                          @mouseleave="
+                            endHover(getMousePosition($event, false), design)
+                          "
+                          @mousedown.stop="
+                            designMousedown(
+                              getMousePosition($event, false),
+                              design,
+                              'like'
+                            )
+                          "
+                          @touchstart.passive="
+                            designMousedown(
+                              getMousePosition($event, true),
+                              design,
+                              'like'
+                            )
+                          "
+                          @click="
+                            designDetail(
+                              design,
+                              index,
+                              selectLikeDesign,
+                              'like'
+                            )
+                          "
+                        >
+                          <img
+                            class="content_img"
+                            v-if="design.resultType == 'PoseTransfer'"
+                            :src="design.firstFrameUrl"
+                            alt=""
+                            @mouseenter.stop="gifPlay($event, design)"
+                            @mouseleave.stop="gifPause($event, design)"
+                          />
+                          <img
+                            class="content_img"
+                            v-show="!design?.generateAwait"
+                            :src="design.designOutfitUrl || design.url"
+                            :key="design.designOutfitUrl"
+                            designType="like"
+                            :index="index"
+                          />
+                          <a-spin
+                            v-show="design?.generateAwait"
+                            size="large"
+                          ></a-spin>
 
-													<!-- <div class="content_img_block_child" @click.stop>
+                          <!-- <div class="content_img_block_child" @click.stop>
 														<div class="content_img_block content_img_GetWidth active childItem"
 															:style="likeStyle"
 															v-for="childItem,childIndex in design.childList"
@@ -144,2189 +221,2472 @@
 															</div>
 														</div>
 													</div> -->
-												</div>
-												<div class="btn" v-show="!design?.generateAwait">
-													<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
-													
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
-								<div class="right_content_body">
-									<div class="right_content_header">
-										<div class="content_header_left">
-											<i class="fi fi-rs-comments"></i><span class="content_header_des">
-												{{ $t('HomeView.GeneratedDesign') }}
-												</span>
-										</div>
-									</div>
-									<div class="right_content_img_block scroll_style Guide_1_17"  :class="[driver__.driver?'showEvents':'']">
-										<div class="right_content_img_item" ref="collItemDom" designType="disLike" :index="0">
-											<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
-												<a-spin size="large" class="content_img_flex"></a-spin>
-											</div>
-											<div class="content_img_block content_img_GetWidth" v-for="(
-													design, index
-												) in designCollectionList" :key="design?.designItemId" :style="collStyle">
-													<div class="content_img_flex" 
-													:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
-													@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId || design.id,'disLike')" 
-													@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId || design.id,'disLike')"
-														@click="
-														designDetail(
-															design,
-															index,
-															designCollectionList,
-															'disLike'
-														)">
-														<img class="content_img" 
-															v-if="design.resultType == 'PoseTransfer'" 
-															:src="design.firstFrameUrl" alt="" 
-															@mouseenter.stop="gifPlay($event,design)"
-															@mouseleave.stop="gifPause($event,design)" >
-														<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
-														<a-spin v-show="design?.generateAwait" size="large"></a-spin>
-													</div> 
-													<div class="btn">
-														<div class="icon iconfont icon-jushoucang icon_like" @click="likeDesignCollection(design,index,design.resultType)">
-														</div>
-														<i class="fi fi-rr-trash icon_delete" @click="setDeleteDesign(design,index)">
-														</i>
-													</div>
-											</div>
-											
-										</div>
-									</div>
-								</div>
-								
-							</div>
-							<div class="designPage_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
-								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div ref="designBtn"  class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == selectEditBtn?.designItemId||openEditBtnId == selectEditBtn?.id}">
-			<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
-				<div class="text">Delete</div>
-				<i class="fi fi-rr-trash icon_delete">
-				</i>
-			</div>
-			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
-				<div class="text">Transfer Pose</div>
-				<i class="fi fi fi-rr-play-alt"></i>
-			</div>
-			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
-				<div class="text">Relight</div>
-				<i class="fi fi fi-br-keyboard-brightness"></i>
-			</div>
-			<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
-				<div class="text">To Product Image</div>
-				<i class="fi fi fi-ss-box-open"></i>
-			</div>
-		</div>
-		<collectionModal ref="collectionModal"></collectionModal>
-		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
-		<!-- 导出缩略图的蒙层 start-->
-		<div class="mark_loading" v-show="isShowMark">
-			<a-spin size="large" />
-		</div>
-		<!-- 导出缩略图的蒙层 end-->
-		<!-- design collection的进度蒙层  start-->
-		<!-- design collection的进度蒙层  end-->
-		<affiche ref="affiche"></affiche>
-		<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
-		<editDesignType ref="editDesignType"
-			@addGenerateImg="addGenerateImg"
-			:productData="{
-				upload:upload,
-				RelightDirection:RelightDirection,
-				RelightDirectionList:RelightDirectionList,
-			}" 
-			@setGenerateAwait="setGenerateAwait"
-			:isProductimg="true"></editDesignType>
-	</div>
-
+                        </div>
+                        <div class="btn" v-show="!design?.generateAwait">
+                          <i
+                            @click.stop="openEditBtn(design, index, $event)"
+                            class="fi fi-br-menu-dots-vertical"
+                          ></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="right_content_block recycleBin"
+                @mouseenter="mouseenter($event, 'recycle')"
+                :class="{ recycleBinShow: recycleDomHidden }"
+              >
+                <div class="right_content_body">
+                  <div class="right_content_header">
+                    <div class="content_header_left">
+                      <i class="fi fi-rs-comments"></i
+                      ><span class="content_header_des">
+                        {{ $t("HomeView.GeneratedDesign") }}
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="right_content_img_block scroll_style Guide_1_17"
+                    :class="[driver__.driver ? 'showEvents' : '']"
+                  >
+                    <div
+                      class="right_content_img_item"
+                      ref="collItemDom"
+                      designType="disLike"
+                      :index="0"
+                    >
+                      <div
+                        class="content_img_block"
+                        v-show="showDesignMark"
+                        :style="collStyle"
+                      >
+                        <a-spin size="large" class="content_img_flex"></a-spin>
+                      </div>
+                      <div
+                        class="content_img_block content_img_GetWidth"
+                        v-for="(design, index) in designCollectionList"
+                        :key="design?.designItemId"
+                        :style="collStyle"
+                      >
+                        <div
+                          class="content_img_flex"
+                          :class="[
+                            driver__.driver && driver__.index == 32
+                              ? 'hideEvents'
+                              : '',
+                          ]"
+                          @mousedown.stop="
+                            designMousedown(
+                              getMousePosition($event, false),
+                              design.designItemId || design.id,
+                              'disLike'
+                            )
+                          "
+                          @touchstart.passive="
+                            designMousedown(
+                              getMousePosition($event, true),
+                              design.designItemId || design.id,
+                              'disLike'
+                            )
+                          "
+                          @click="
+                            designDetail(
+                              design,
+                              index,
+                              designCollectionList,
+                              'disLike'
+                            )
+                          "
+                        >
+                          <img
+                            class="content_img"
+                            v-if="design.resultType == 'PoseTransfer'"
+                            :src="design.firstFrameUrl"
+                            alt=""
+                            @mouseenter.stop="gifPlay($event, design)"
+                            @mouseleave.stop="gifPause($event, design)"
+                          />
+                          <img
+                            class="content_img"
+                            v-show="!design?.generateAwait"
+                            :src="design.designOutfitUrl || design.url"
+                            designType="disLike"
+                            :index="index"
+                          />
+                          <a-spin
+                            v-show="design?.generateAwait"
+                            size="large"
+                          ></a-spin>
+                        </div>
+                        <div class="btn">
+                          <div
+                            class="icon iconfont icon-jushoucang icon_like"
+                            @click="
+                              likeDesignCollection(
+                                design,
+                                index,
+                                design.resultType
+                              )
+                            "
+                          ></div>
+                          <i
+                            class="fi fi-rr-trash icon_delete"
+                            @click="setDeleteDesign(design, index)"
+                          >
+                          </i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="designPage_left_bottom"
+                :class="{ active: recycleDomHidden }"
+                @click="setShowHide('recycleDomHidden')"
+                v-show="designCollectionId"
+              >
+                <span
+                  class="icon iconfont icon-xiala"
+                  :class="{ active: recycleDomHidden }"
+                ></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      ref="designBtn"
+      class="btnOpen"
+      @click.stop="() => (openEditBtnId = -1)"
+      :class="{
+        active:
+          openEditBtnId == selectEditBtn?.designItemId ||
+          openEditBtnId == selectEditBtn?.id,
+      }"
+    >
+      <div
+        class="item"
+        @click="
+          dislikeDesignCollection(
+            selectEditBtn,
+            selectEditBtn?.resultType,
+            selectEditBtnIndex
+          )
+        "
+      >
+        <div class="text">Delete</div>
+        <i class="fi fi-rr-trash icon_delete"> </i>
+      </div>
+      <div
+        class="item"
+        v-show="selectEditBtn?.resultType == 'ToProductImage'"
+        @click="
+          setEditDesignType(
+            selectLikeDesign,
+            selectEditBtnIndex,
+            'PoseTransfer',
+            'add',
+            'like'
+          )
+        "
+      >
+        <div class="text">Transfer Pose</div>
+        <i class="fi fi fi-rr-play-alt"></i>
+      </div>
+      <div
+        class="item"
+        v-show="selectEditBtn?.resultType == 'ToProductImage'"
+        @click="
+          setEditDesignType(
+            selectLikeDesign,
+            selectEditBtnIndex,
+            'Relight',
+            'add',
+            'like'
+          )
+        "
+      >
+        <div class="text">Relight</div>
+        <i class="fi fi fi-br-keyboard-brightness"></i>
+      </div>
+      <div
+        class="item"
+        v-show="selectEditBtn?.resultType == 'Design'"
+        @click="
+          setEditDesignType(
+            selectLikeDesign,
+            selectEditBtnIndex,
+            'ToProductImage',
+            'add',
+            'like'
+          )
+        "
+      >
+        <div class="text">To Product Image</div>
+        <i class="fi fi fi-ss-box-open"></i>
+      </div>
+    </div>
+    <collectionModal ref="collectionModal"></collectionModal>
+    <!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
+    <!-- 导出缩略图的蒙层 start-->
+    <div class="mark_loading" v-show="isShowMark">
+      <a-spin size="large" />
+    </div>
+    <!-- 导出缩略图的蒙层 end-->
+    <!-- design collection的进度蒙层  start-->
+    <!-- design collection的进度蒙层  end-->
+    <affiche ref="affiche"></affiche>
+    <DesignDetailcopy
+      v-if="detailDestroy"
+      ref="designDetail"
+      @destroy="setDetailDestroy"
+      @finishRedesign="finishRedesign"
+    ></DesignDetailcopy>
+    <editDesignType
+      ref="editDesignType"
+      @addGenerateImg="addGenerateImg"
+      :productData="{
+        upload: upload,
+        RelightDirection: RelightDirection,
+        RelightDirectionList: RelightDirectionList,
+      }"
+      @setGenerateAwait="setGenerateAwait"
+      :isProductimg="true"
+    ></editDesignType>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  toRefs,
+  inject,
+  provide,
+  nextTick,
+  reactive,
+  onBeforeUnmount,
+  toRef,
+  watch,
+} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import generalCanvas from "@/component/modules/generalCanvas.vue";
 import affiche from "@/component/HomePage/affiche.vue";
 import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
 import html2canvas from "html2canvas";
-import { message,Modal } from "ant-design-vue";
+import { message, Modal } from "ant-design-vue";
 import { useStore } from "vuex";
 import { Https } from "@/tool/https";
-import { openGuide,driverObj__ } from "@/tool/guide";
-import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
-import editDesignType from './editDesignType/index.vue'
+import { openGuide, driverObj__ } from "@/tool/guide";
+import {
+  LoadingOutlined,
+  ExclamationCircleOutlined,
+} from "@ant-design/icons-vue";
+import editDesignType from "./editDesignType/index.vue";
 // import JSZip, { forEach } from "jszip";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import i18n from "@/lang";
 import { useI18n } from "vue-i18n";
 import { getMousePosition } from "@/tool/mdEvent";
 import { removeClass } from "element-plus/es/utils";
-import collectionModal from './collection.vue'
-const FileSaver = require("file-saver");
+import collectionModal from "./collection.vue";
+import FileSaver from "file-saver";
 
 export default defineComponent({
-	name: "homePage",
-	components: {
-		collectionModal,
-		// HeaderComponent,
-		NewCollectionReview,
-		affiche,
-		generalCanvas,
-		DesignDetailcopy,
-		editDesignType,
-	},
-	emits:['setTask'],
-	 activated() {
+  name: "homePage",
+  components: {
+    collectionModal,
+    // HeaderComponent,
+    NewCollectionReview,
+    affiche,
+    generalCanvas,
+    DesignDetailcopy,
+    editDesignType,
   },
-  deactivated() {
+  emits: ["setTask"],
+  activated() {},
+  deactivated() {},
+  props: ["isState"],
+  setup(props, { emit }) {
+    const store = useStore();
+    const editDesignType = reactive({
+      upload: { id: store.state.Workspace.probjects.id },
+      RelightDirectionList: [
+        {
+          value: "Right Light",
+          label: useI18n().t("ProductImg.RightLight"),
+        },
+        {
+          value: "Left Light",
+          label: useI18n().t("ProductImg.LeftLight"),
+        },
+        {
+          value: "Top Light",
+          label: useI18n().t("ProductImg.TopLight"),
+        },
+        {
+          value: "Bottom Light",
+          label: useI18n().t("ProductImg.BottomLight"),
+        },
+      ],
+      RelightDirection: "Right Light",
+    });
+    let likeDesignCollectionList: any = computed(() => {
+      return store.state.HomeStoreModule.likeDesignCollectionList;
+    });
+    let deleteDesignCollectionList: any = computed(() => {
+      return store.state.HomeStoreModule.deleteDesignCollectionList;
+    });
+    let designCollectionList: any = computed(() => {
+      return store.state.HomeStoreModule.designCollectionList;
+    });
+    let userDetail = computed(() => {
+      return store.state.UserHabit.userDetail;
+    });
+    let bindEmail = computed(() => {
+      return store.state.UserHabit.bindEmail;
+    });
+    let userGroupId: any = computed(() => {
+      return store.state.HomeStoreModule.userGroupId;
+    }); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
+    let setPortfolio = (data: any) => {
+      portfolio.value = data;
+    };
+    provide("setPortfolio", setPortfolio);
+    let designCollectionId: any = computed(() => {
+      return store.state.HomeStoreModule.designCollectionId;
+    });
+    let designId: any = computed(() => {
+      return store.state.HomeStoreModule.designId;
+    });
+    let contentImgMax = {
+      width: "",
+      height: "",
+    };
+    let contentImg = {
+      width: "",
+      height: "",
+    };
+    let exportNav = ref([
+      {
+        name: useI18n().t("HomeView.moodboard"),
+        change: true,
+        noChange: true,
+        value: "moodboardFiles",
+      },
+      {
+        name: useI18n().t("HomeView.printboard"),
+        change: true,
+        noChange: false,
+        value: "printboardFiles",
+      },
+      {
+        name: useI18n().t("HomeView.colorboard"),
+        change: true,
+        noChange: false,
+        value: "colorBoards",
+      },
+      {
+        name: useI18n().t("HomeView.sketchboard"),
+        change: true,
+        noChange: false,
+        value: "sketchboardFiles",
+      },
+      {
+        name: useI18n().t("HomeView.mannequins"),
+        change: true,
+        noChange: true,
+        value: "",
+      },
+    ]);
+    const dataDom = reactive({
+      collectionModal: null as any,
+      editDesignType: null as any,
+      designBtn: null as any,
+    });
+    const designData = reactive({
+      openEditBtnId: -1,
+      selectEditBtn: null as any,
+      selectEditBtnIndex: -1,
+      likeLoading: false, //喜欢防抖
+      widthList: [
+        {
+          label: "Medium",
+          value: 170,
+        },
+        {
+          label: "Large",
+          value: 250,
+        },
+        {
+          label: "Extra-large",
+          value: 400,
+        },
+      ],
+      selectDesign: null as any, //当前选择的design
+      isUnfold: false,
+      selectLikeDesign: [] as any,
+
+      //类型
+      resultTypeList: [
+        {
+          label: "All",
+          value: "All",
+        },
+        {
+          label: "Design",
+          value: "Design",
+        },
+        {
+          label: "Product",
+          value: "Product",
+        },
+        // ,{
+        // 	label:'To Product Image',
+        // 	value:'ToProductImage',
+        // },{
+        // 	label:'Relight',
+        // 	value:'Relight',
+        // },
+        {
+          label: "Pose Transfer",
+          value: "PoseTransfer",
+        },
+      ],
+      resultType: "All",
+      oldSelectLikeDesign: null as any,
+    });
+    watch(
+      () => likeDesignCollectionList.value.length,
+      (val) => {
+        if (val > 0) uploadLikeDom();
+      }
+    );
+    provide("exportNav", exportNav);
+    let isShowOperate = ref(false);
+    let { t } = useI18n();
+    let driver__: any = computed(() => {
+      return store.state.Guide.guide;
+    });
+    let likeDesignItemIdList = ref([]);
+    let workspacePosition: any = computed(() => {
+      return store.state.Workspace.probjects.positionList;
+    });
+    let allBoardData: any = computed(() => {
+      return store.state.UploadFilesModule.allBoardData;
+    });
+    let isMannequinShow = ref(false);
+    let chooseIsDesign: any = computed(() => {
+      return store.state.UploadFilesModule.chooseIsDesign;
+    });
+    let portfolio: any = ref({});
+    provide("portfolio", portfolio);
+    let showDesignMark = ref(false);
+    let sessionStorageCollValue = JSON.parse(
+      sessionStorage.getItem("collValue") as any
+    );
+
+    const collItemSize = reactive({
+      widthValue: {
+        label: "Medium",
+        value: 170,
+      },
+      collValue: 6,
+      padding: 60,
+      likeStyle: {
+        width: "240px",
+        height: "370px",
+        position: "absolute",
+      },
+      collStyle: {
+        width: "0",
+        height: "0",
+        position: "absolute",
+      },
+      itemStyle: {
+        width: 0,
+        height: 0,
+      },
+      scale: [1, 1.54],
+      collTime: null as any,
+      isMove: false,
+    });
+    const posiitonData = ref({
+      likeElList: [] as any,
+      likeSelectIndex: 0,
+      generateElList: [] as any,
+      generateSelectIndex: 0,
+    });
+    let likeItemDom = ref();
+    let collItemDom = ref();
+    let domHidden = ref(
+      JSON.parse(sessionStorage.getItem("domHidden") as any) || false
+    );
+    let recycleDomHidden = ref(false);
+    if (designCollectionList.value.length > 0) {
+      recycleDomHidden.value =
+        JSON.parse(sessionStorage.getItem("recycleDomHidden") as any) || false;
+    }
+    let getDesignTime = null as any;
+    const setSystemDesigner = (time: any) => {
+      clearTimeout(collItemSize.collTime);
+      collItemSize.collTime = setTimeout(() => {
+        nextTick(() => {
+          let parentWidth = likeItemDom.value.parentElement.offsetWidth;
+          collItemSize.widthValue.value =
+            collItemSize.widthValue.value == -1
+              ? 100
+              : collItemSize.widthValue.value;
+          collItemSize.widthValue.value =
+            collItemSize.widthValue.value > parentWidth
+              ? parentWidth
+              : collItemSize.widthValue.value;
+          collItemSize.collValue = Math.floor(
+            parentWidth / collItemSize.widthValue.value
+          );
+          collItemSize.padding = Math.floor(
+            parentWidth - collItemSize.collValue * collItemSize.widthValue.value
+          );
+          let value = collItemSize.collValue;
+
+          collItemSize.itemStyle.width =
+            (parentWidth - collItemSize.padding - value * 10) / value;
+          collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54;
+
+          collItemSize.collStyle.width =
+            ((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[0] +
+            "px";
+          collItemSize.collStyle.height =
+            ((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[1] +
+            "px";
+
+          collItemSize.likeStyle.width = collItemSize.itemStyle.width + "px";
+          collItemSize.likeStyle.height = collItemSize.itemStyle.height + "px";
+          let elArr = likeItemDom.value.children;
+          posiitonData.value.likeElList = [];
+          for (let i = 0; i < elArr.length; i++) {
+            posiitonData.value.likeElList.push({
+              el: elArr[i],
+              sort: designData.selectLikeDesign[i].sort - 1,
+              // sort: likeDesignCollectionList.value[i].sort - 1,
+              index: i,
+              userLikeSortId:
+                designData.selectLikeDesign[i].userLikeSortId ||
+                designData.selectLikeDesign[i].id,
+              // userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
+            });
+          }
+          moveItem("like");
+        });
+      }, time);
+    };
+    const setDesignItemStyle = () => {
+      posiitonData.value.generateElList = [];
+      let elArr = collItemDom.value.querySelectorAll(".content_img_GetWidth");
+      designCollectionList.value.forEach((item: any, index: any) => {
+        posiitonData.value.generateElList.unshift({
+          el: elArr[index],
+          sort: designCollectionList.value.length - index - 1,
+          index: designCollectionList.value.length - index - 1,
+          userLikeSortId: item.designItemId || item.id,
+        });
+      });
+    };
+
+    const setDeleteDesign = (value: any, index: any) => {
+      store.commit("setDeleteDesignCollectionList", index);
+      let collItem = posiitonData.value.generateElList.filter(
+        (item: any) => item.userLikeSortId == value.designItemId
+      )[0];
+      posiitonData.value.generateElList =
+        posiitonData.value.generateElList.filter(
+          (item: any) => item.userLikeSortId != value.designItemId
+        );
+
+      posiitonData.value.generateElList.forEach((item: any) => {
+        if (item.sort > collItem.sort) {
+          item.sort -= 1;
+        }
+      });
+      moveItem("");
+    };
+    const cancelDeleteDesign = (index: any) => {
+      store.commit("cancelDeleteDesignCollectionList", index);
+    };
+    const designMousedown = (e: any, design: any, str: string) => {
+      if (design.resultType != "Design" || designData.isUnfold) return;
+      if (str != "like" && showDesignMark.value) return;
+      let Id = design.userLikeSortId || design.id;
+      let arr =
+        str == "like"
+          ? posiitonData.value.likeElList
+          : posiitonData.value.generateElList;
+      let item: any = arr.filter((item: any) => item.userLikeSortId == Id)[0];
+      item.el.style.zIndex = 2;
+      item.el.style.transition = "all 0s";
+      let startX = e.clientX,
+        startY = e.clientY,
+        left = item.el.offsetLeft,
+        top = item.el.offsetTop;
+      collItemSize.isMove = false;
+      let moveFun = (e: any) => {
+        collItemSize.isMove = true;
+        let X = e.clientX - startX + left;
+        let Y = e.clientY - startY + top;
+        item.el.style.left = `${X}px`;
+        item.el.style.top = `${Y}px`;
+        reRange(item, X, Y, str);
+      };
+      let mouseUpFun = () => {
+        document.removeEventListener("mousemove", mouseMove);
+        document.removeEventListener("touchmove", touchmove);
+
+        document.removeEventListener("mouseup", mouseUpFun);
+        document.removeEventListener("touchend", mouseUpFun);
+        item.el.style.zIndex = 1;
+        item.el.style.transition = "top,left .5s";
+        moveItem(str);
+        if (str == "like") sortDesignCollection();
+      };
+      let mouseMove = function (event: any) {
+        let e = getMousePosition(event, false);
+        moveFun(e);
+      };
+      let touchmove = function (event: any) {
+        let e = getMousePosition(event, true);
+        moveFun(e);
+      };
+
+      document.addEventListener("mousemove", mouseMove);
+      document.addEventListener("touchmove", touchmove);
+
+      document.addEventListener("mouseup", mouseUpFun);
+      document.addEventListener("touchend", mouseUpFun);
+    };
+    //排序  从大到小
+    const sortDesignCollection = () => {
+      let arrData: any = [];
+      if (!likeDesignCollectionList.value) return;
+      likeDesignCollectionList.value.forEach((likeItem: any) => {
+        let item = posiitonData.value.likeElList.filter(
+          (item: any) =>
+            item.userLikeSortId == likeItem.userLikeSortId ||
+            item.userLikeSortId == likeItem.id
+        )[0];
+        likeItem.sort = item.sort + 1;
+        let obj = {
+          id: likeItem.userLikeSortId || likeItem.id,
+          sort: item.sort + 1,
+          userLikeGroupId: likeItem.userLikeGroupId,
+          userLikeId: likeItem.id,
+        };
+        arrData.push(obj);
+      });
+      let data = {
+        userLikeGroupId: userGroupId.value,
+        userLikeSortList: arrData,
+      };
+      Https.axiosPost(Https.httpUrls.designSort, data).then((rv: any) => {});
+    };
+    const mouseenter = (e: any, str: string) => {};
+    const reRange = (item: any, x: number, y: number, str: string) => {
+      let elList =
+        str == "like"
+          ? posiitonData.value.likeElList
+          : posiitonData.value.generateElList;
+      let index =
+        str == "like"
+          ? posiitonData.value.likeSelectIndex
+          : posiitonData.value.generateSelectIndex;
+      let value = collItemSize.collValue;
+      let width, height, num;
+      if (str == "like") {
+        num = value;
+        width = collItemSize.itemStyle.width;
+        height = collItemSize.itemStyle.height;
+      } else {
+        num = 3;
+        width =
+          ((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[0];
+        height =
+          ((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[1];
+      }
+      let padding = str == "like" ? collItemSize.padding / 2 : 0;
+      let moveIndex =
+        Math.round((x - padding) / (width + 10)) +
+        Math.round(y / (height + 10)) * num;
+      moveIndex = elList.length - 1 - moveIndex;
+      moveIndex = moveIndex < 0 ? 0 : moveIndex;
+      moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
+      if (moveIndex != index) {
+        if (str == "like") {
+          posiitonData.value.likeSelectIndex = moveIndex;
+        } else {
+          posiitonData.value.generateSelectIndex = moveIndex;
+        }
+        let currentSort = item.sort;
+        for (let i = 0; i < elList.length; i++) {
+          if (currentSort < moveIndex) {
+            if (elList[i].sort > currentSort && elList[i].sort <= moveIndex) {
+              elList[i].sort -= 1;
+            }
+          } else if (currentSort > moveIndex) {
+            if (elList[i].sort < currentSort && elList[i].sort >= moveIndex) {
+              elList[i].sort += 1;
+            }
+          }
+        }
+        elList[item.index].sort = moveIndex;
+        moveItem(str);
+      }
+    };
+    const setLikeDislLike = (str: string, value: any) => {
+      designData.selectLikeDesign = [];
+      posiitonData.value.likeSelectIndex = 0;
+      nextTick(() => {
+        if (str == "like") {
+          let elArr = likeItemDom.value.children;
+          posiitonData.value.likeElList.push({
+            el: elArr[0],
+            sort: value.sort - 1,
+            index: value.sort - 1,
+            userLikeSortId: value.userLikeSortId,
+          });
+          let collItem = posiitonData.value.generateElList.filter(
+            (item: any) =>
+              item.userLikeSortId == value.designItemId ||
+              item.userLikeSortId == value.id
+          )[0];
+          if (collItem) {
+            posiitonData.value.generateElList =
+              posiitonData.value.generateElList.filter(
+                (item: any) => item.userLikeSortId != value.designItemId
+              );
+            posiitonData.value.generateElList.forEach((item: any) => {
+              if (item.sort > collItem.sort) {
+                item.sort -= 1;
+              }
+            });
+          }
+        } else if (str == "disLike") {
+          let elArr = collItemDom.value.querySelectorAll(
+            ".content_img_GetWidth"
+          );
+          posiitonData.value.likeElList = posiitonData.value.likeElList.filter(
+            (item: any) => item.sort + 1 != value.sort
+          );
+          posiitonData.value.likeElList.forEach((item: any) => {
+            if (item.sort > value.sort - 1) {
+              item.sort -= 1;
+            }
+          });
+          posiitonData.value.generateElList.push({
+            el: elArr[elArr.length - 1],
+            sort: posiitonData.value.generateElList.length,
+            index: posiitonData.value.generateElList.length,
+            userLikeSortId: value.designItemId || value.id,
+          });
+        }
+        setDesignItemStyle();
+        setSystemDesigner(100);
+        // moveItem('disLike');
+      });
+    };
+    //排列
+    const moveItem = (str: any) => {
+      let elLikeList = posiitonData.value.likeElList;
+      let generateElList = posiitonData.value.generateElList;
+      let value = collItemSize.collValue;
+      let width: any, height: any;
+      width =
+        ((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[0];
+      height =
+        ((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[1];
+
+      // let num = str == 'like'?value:3
+      nextTick(() => {
+        for (let i = 0; i < elLikeList.length; i++) {
+          elLikeList[i].el.style.left =
+            ((elLikeList.length - 1 - elLikeList[i].sort) % value) *
+              (collItemSize.itemStyle.width + 10) +
+            collItemSize.padding / 2 +
+            "px";
+          elLikeList[i].el.style.top =
+            parseInt(
+              String((elLikeList.length - 1 - elLikeList[i].sort) / value)
+            ) *
+              (collItemSize.itemStyle.height + 10) +
+            "px";
+        }
+        for (let i = 0; i < generateElList.length; i++) {
+          generateElList[i].el.style.left =
+            ((generateElList.length - 1 - generateElList[i].sort) % 3) *
+              (width + 10) +
+            "px";
+          generateElList[i].el.style.top =
+            parseInt(
+              String((generateElList.length - 1 - generateElList[i].sort) / 3)
+            ) *
+              (height + 10) +
+            "px";
+        }
+      });
+    };
+    const openCollection = (str: string) => {
+      dataDom.collectionModal.init(str);
+    };
+    const openEditBtn = (design: any, index: number, event: any) => {
+      if (designData.selectLikeDesign[index].resultType != "Design") {
+        designData.selectDesign = designData.selectLikeDesign.filter(
+          (item: any) =>
+            item.resultType == "Design" &&
+            item.userLikeSortId == designData.selectLikeDesign[index].parentId
+        )[0];
+      } else {
+        designData.selectDesign = designData.selectLikeDesign[index];
+      }
+      designData.openEditBtnId = design.designItemId || design.id;
+      designData.selectEditBtn = design;
+      designData.selectEditBtnIndex = index;
+      let width = event.target.offsetWidth;
+      let height = event.target.offsetHeight;
+      let parentRect = dataDom.designBtn.parentElement.getBoundingClientRect();
+
+      let x = event.clientX - parentRect.x - event.offsetX + width;
+      let y = event.clientY - parentRect.y - event.offsetY + height;
+      dataDom.designBtn.style.left = x + "px";
+      dataDom.designBtn.style.top = y + "px";
+
+      let removeEditBtnId = () => {
+        designData.openEditBtnId = -1;
+        document.removeEventListener("click", removeEditBtnId);
+      };
+      document.addEventListener("click", removeEditBtnId);
+    };
+    let setEditDesignType = (
+      arr: any,
+      index: any,
+      type: any,
+      status: any,
+      listType: string
+    ) => {
+      arr = JSON.parse(JSON.stringify(arr));
+      let item = arr[index];
+      if (status == "add") {
+        item.sourceUrl = item.designOutfitUrl || item.url;
+      } else {
+      }
+      arr[index].resultType = type;
+      // dataDom.editDesignType.isProductimg = isLike
+      dataDom.editDesignType.isProductimg = true;
+      dataDom.editDesignType.init(arr, index, null, status, listType);
+      dataDom.editDesignType.isLike = false;
+      dataDom.editDesignType.productimgRelightDirection =
+        editDesignType.RelightDirection;
+      dataDom.editDesignType.isComparison = true;
+    };
+    const addGenerateImg = (data: any) => {
+      if (!data.id) return;
+      let obj = {
+        id: data.id,
+        designItemId: data.id,
+        // designItemId:data.elementId,
+        designOutfitId: "",
+        designOutfitUrl: data.designOutfitUrl,
+        sourceUrl: data.sourceUrl,
+        resultType: data.resultType,
+        elementId: data.elementId,
+        elementType: data.elementType,
+        userGroupId: data.userGroupId || data.id,
+        firstFrameUrl: data.firstFrameUrl,
+        gifUrl: data.gifUrl,
+        userLikeSortId: data.userLikeSortId,
+      };
+      let list = [];
+      if (data.listType == "disLike") {
+        list = designCollectionList.value;
+      } else {
+        list = likeDesignCollectionList.value;
+      }
+      if (list[data.isIndex]?.generateAwait)
+        list[data.isIndex].generateAwait = false;
+      if (data.status == "add") {
+        if (data.listType == "like") {
+          likeDesignCollection(obj, -1, data.resultType);
+        } else {
+          list.unshift(obj);
+        }
+      } else if (data.status == "cove") {
+        // collectionLikeUpdate
+        // Https
+        if (data.listType == "like") {
+          let value = {
+            oldRelationId: data.oldId,
+            relationId: data.id,
+            relationType: data.resultType,
+          };
+          Https.axiosPost(Https.httpUrls.collectionLikeUpdate, value).then(
+            (rv: any) => {
+              if (rv) {
+              }
+            }
+          );
+        }
+        list[data.isIndex].designOutfitUrl = obj.designOutfitUrl;
+        list[data.isIndex].resultType = obj.resultType;
+        list[data.isIndex].id = obj.id;
+        list[data.isIndex].designItemId = obj.designItemId;
+        list[data.isIndex].sourceUrl = obj.sourceUrl;
+      }
+      // nextTick().then(()=>{
+      // 	// setDesignItemStyle()
+      // 	// setSystemDesigner(100)
+      // 	uploadLikeDom()
+      // })
+    };
+    const setNoDesignLike = (
+      design: any,
+      index: any,
+      type: any,
+      str: string
+    ) => {
+      let url;
+      let data = {
+        toProductImageResultId: [design.designItemId || design.id],
+        projectId: store.state.Workspace.probjects.id,
+        collectionSortParentId:
+          designData?.selectDesign?.userLikeSortId || design.parentId,
+      } as any;
+      let params = {} as any;
+      if (type == "ToProductImage" || type == "Relight") {
+        if (str == "like") {
+          url = Https.httpUrls.productImageLike;
+        } else {
+          url = Https.httpUrls.productImageUnLike;
+        }
+      } else if (type == "PoseTransfer") {
+        url = Https.httpUrls.poselikeOrDisike;
+        if (str == "like") {
+          params = {
+            likeOrDislike: "like",
+            transformedId: design.id,
+            projectId: store.state.Workspace.probjects.id,
+            collectionSortParentId:
+              designData?.selectDesign?.userLikeSortId || design.parentId,
+          };
+        } else {
+          params = {
+            likeOrDislike: "dislike",
+            transformedId: design.id,
+            projectId: store.state.Workspace.probjects.id,
+            collectionSortParentId:
+              designData?.selectDesign?.userLikeSortId || design.parentId,
+          };
+        }
+      } else {
+        if (str == "like") {
+          url = Https.httpUrls.productImageLike;
+        } else {
+          url = Https.httpUrls.productImageUnLike;
+        }
+      }
+      designData.likeLoading = true;
+      Https.axiosPost(url, data, { params: params.likeOrDislike ? params : "" })
+        .then((rv) => {
+          if (str == "like") {
+            likeDesignCollectionList.value.forEach((item: any) => {
+              if (
+                item.resultType == "Design" &&
+                item.userLikeSortId == designData.selectDesign.userLikeSortId
+              ) {
+                item.childList.push(design);
+              }
+            });
+          } else {
+            likeDesignCollectionList.value.forEach((item: any) => {
+              if (
+                item.resultType == "Design" &&
+                item.userLikeSortId == designData.selectDesign.userLikeSortId
+              ) {
+                item.childList = item.childList.filter((item: any) => {
+                  return item.id != design.id;
+                });
+              }
+            });
+          }
+          nextTick().then(() => {
+            uploadLikeDom();
+          });
+
+          //一下代码是生成的design时候也可以toproduct
+          // if(str == 'like'){
+          // 	let value:any = {
+          // 		...design,
+          // 		sort:likeDesignCollectionList.value.length + 1,
+          // 		userLikeGroupId:design.id,
+          // 	}
+          // 	design.groupDetailId = rv.groupDetailId;
+          // 	store.commit(
+          // 		"addLikeDesignCollectionList",
+          // 		value
+          // 	);
+          // 	setLikeDislLike('like',value)
+          // 	if(index != -1)store.commit("deleteDesignCollectionList", index);
+          // }else{
+          // 	if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
+          // 	store.commit("addDesignCollectionList", [design]);
+          // 	likeDesignCollectionList.value.forEach((item:any)=>{
+          // 		if(item.sort > design.sort){
+          // 			item.sort-=1
+          // 		}
+          // 	})
+          // }
+          designData.likeLoading = false;
+        })
+        .catch((res) => {
+          designData.likeLoading = false;
+        });
+    };
+    let likeDesignCollection = (design: any, index: any, type: any) => {
+      if (designData.likeLoading) {
+        return;
+      }
+      if (type != "Design") {
+        setNoDesignLike(design, index, type, "like");
+        return;
+      }
+      let data = {
+        designItemId: design.designItemId,
+        userGroupId: store.state.HomeStoreModule.userGroupId,
+        projectId: store.state.Workspace.probjects.id,
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        designPythonOutfitId: design.designOutfitId
+          ? design.designOutfitId
+          : design.designPythonOutfitId,
+      };
+
+      designData.likeLoading = true;
+      Https.axiosPost(Https.httpUrls.designLike, data)
+        .then((rv: any) => {
+          if (rv) {
+            let value: any = {
+              ...design,
+              id: rv.userLikeId,
+              groupDetailId: rv.userLikeId,
+              userLikeSortId: rv.userLikeSortId,
+              userLikeGroupId: rv.userGroupId,
+              sort: rv.sort,
+            };
+            store.commit("setUserGroupId", rv.userGroupId);
+            design.groupDetailId = rv.groupDetailId;
+            store.commit("addLikeDesignCollectionList", value);
+            setLikeDislLike("like", value);
+            if (index != -1) store.commit("deleteDesignCollectionList", index);
+          }
+          designData.likeLoading = false;
+        })
+        .catch((rv) => {
+          designData.likeLoading = false;
+        });
+    };
+    const upDataLikeListType = () => {};
+    const setGenerateAwait = (data: any) => {
+      let list = [];
+      if (data.listType == "disLike") {
+        list = designCollectionList.value;
+      } else {
+        list = likeDesignCollectionList.value;
+      }
+      list[data.index].generateAwait = true;
+    };
+    const gifPlay = (e: any, item: any) => {
+      e.target.src = item.gif || item.gifUrl; //使用gif图片
+    };
+    const gifPause = (e: any, item: any) => {
+      e.target.src = item.firstFrame || item.firstFrameUrl; //静态图片
+    };
+    const startHover = (e: any, item: any) => {};
+    const endHover = (e: any, item: any) => {};
+    const setUnfold = () => {
+      designData.isUnfold = !designData.isUnfold;
+      if (!designData.isUnfold) {
+        designData.selectLikeDesign = designData.oldSelectLikeDesign || [];
+      }
+      uploadLikeDom();
+    };
+    const uploadLikeDom = () => {
+      if (designData.isUnfold) {
+        // const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
+        designData.selectLikeDesign = [];
+        likeDesignCollectionList.value.sort((a: any, b: any) => {
+          return a.sort - b.sort;
+        });
+        let childLength = 0;
+        likeDesignCollectionList.value.forEach((likeItem: any, index: any) => {
+          let item = JSON.parse(JSON.stringify(likeItem));
+          item.oldSort = item.sort;
+          if (item?.childList?.length > 0) {
+            item.childList.forEach((childItem: any, childIndex: number) => {
+              childItem.sort = childIndex + item.sort + childLength;
+              designData.selectLikeDesign.push(childItem);
+            });
+            childLength = item.childList.length + childLength;
+          }
+          item.sort = childLength + item.sort;
+          designData.selectLikeDesign.push(item);
+        });
+        designData.oldSelectLikeDesign = [];
+        designData.resultType = "All";
+      } else {
+        if (designData.selectLikeDesign.length == 0) {
+          designData.selectLikeDesign = likeDesignCollectionList.value;
+          return;
+        }
+        const parents = designData.selectLikeDesign.filter(
+          (item: any) => item.resultType === "Design"
+        );
+        parents.map((parent: any) => {
+          parent.sort = parent.oldSort || parent.sort;
+          return {
+            ...parent,
+            childList: designData.selectLikeDesign.filter(
+              (item: any) =>
+                item.parentId === parent.userLikeSortId &&
+                item.resultType !== "Design"
+            ),
+          };
+        });
+        designData.selectLikeDesign = parents;
+      }
+      nextTick(() => {
+        setSystemDesigner(0);
+      });
+    };
+    const changeResultType = () => {
+      if (designData.resultType != "All") {
+        if (designData.oldSelectLikeDesign.length == 0)
+          designData.oldSelectLikeDesign = designData.selectLikeDesign;
+        if (designData.resultType == "Product") {
+          designData.selectLikeDesign = designData.oldSelectLikeDesign.filter(
+            (item: any) =>
+              item.resultType === "ToProductImage" ||
+              item.resultType === "Relight"
+          );
+        } else {
+          designData.selectLikeDesign = designData.oldSelectLikeDesign.filter(
+            (item: any) => item.resultType === designData.resultType
+          );
+        }
+        designData.selectLikeDesign.forEach((item: any, index: number) => {
+          item.sort = index + 1;
+        });
+      } else {
+        designData.selectLikeDesign = designData.oldSelectLikeDesign;
+        designData.selectLikeDesign.forEach((item: any, index: number) => {
+          item.sort = index + 1;
+        });
+      }
+      nextTick(() => {
+        setSystemDesigner(0);
+      });
+    };
+    return {
+      store,
+      ...toRefs(editDesignType),
+      likeDesignCollectionList,
+      deleteDesignCollectionList,
+      designCollectionList,
+      userGroupId,
+      userDetail,
+      bindEmail,
+      setPortfolio,
+      designCollectionId,
+      designId,
+      contentImgMax,
+      contentImg,
+      exportNav,
+      isShowOperate,
+      t,
+      driver__,
+      likeDesignItemIdList,
+      workspacePosition,
+      allBoardData,
+      isMannequinShow,
+      chooseIsDesign,
+      portfolio,
+      setSystemDesigner,
+      setDesignItemStyle,
+      showDesignMark,
+      ...toRefs(collItemSize),
+      ...toRefs(designData),
+      ...toRefs(dataDom),
+      likeItemDom,
+      collItemDom,
+      domHidden,
+      recycleDomHidden,
+      getDesignTime,
+
+      setDeleteDesign,
+      cancelDeleteDesign,
+      designMousedown,
+      sortDesignCollection,
+      getMousePosition,
+      mouseenter,
+      setLikeDislLike,
+      posiitonData,
+      moveItem,
+      openCollection,
+      setEditDesignType,
+      openEditBtn,
+      addGenerateImg,
+      setNoDesignLike,
+      upDataLikeListType,
+      setGenerateAwait,
+      gifPlay,
+      gifPause,
+      startHover,
+      endHover,
+      setUnfold,
+      changeResultType,
+    };
+  },
+  data() {
+    return {
+      isFinishLoading: false,
+      isShowMark: false, //导出的loading蒙层
+      indicator: h(LoadingOutlined, {
+        style: {
+          fontSize: "4.8rem",
+          marginTop: "3rem",
+          color: "#341e57",
+        },
+        spin: true,
+      }),
+      designProgress: 0,
+      startDesignType: "design", //设计类型 design 和 resdesign
+      disLikeLoading: false, //不喜欢防抖
+      dragIdx: 0,
+      designRandom: "",
+      detailDestroy: false, //销毁detail
+      designFailure: {
+        num: 0,
+        currentNum: 0,
+      }, //获取20次都为空的话就停止获取
+      observerData: {
+        time: false as any,
+        observer: null as any,
+      },
+    };
+  },
+  watch: {
+    workspacePosition: {
+      handler(newVal: any, oldVal: any) {
+        this.isMannequin();
+      },
+    },
+    allBoardData: {
+      handler(newVal: any, oldVal: any) {
+        this.isMannequin();
+      },
+    },
   },
-  props:['isState'],
-	setup(props,{emit}) {
-		const store = useStore();
-		const editDesignType = reactive({
-			upload:{id:store.state.Workspace.probjects.id},
-			RelightDirectionList:[
-				{
-					value:'Right Light',
-					label:useI18n().t('ProductImg.RightLight')
-				},{
-					value:'Left Light',
-					label:useI18n().t('ProductImg.LeftLight')
-				},{
-					value:'Top Light',
-					label:useI18n().t('ProductImg.TopLight')
-				},{
-					value:'Bottom Light',
-					label:useI18n().t('ProductImg.BottomLight')
-				}
-			],
-			RelightDirection:'Right Light'
-		})
-		let likeDesignCollectionList: any = computed(() => {
-			return store.state.HomeStoreModule.likeDesignCollectionList;
-		});
-		let deleteDesignCollectionList: any = computed(() => {
-			return store.state.HomeStoreModule.deleteDesignCollectionList;
-		});
-		let designCollectionList: any = computed(() => {
-			return store.state.HomeStoreModule.designCollectionList;
-		});
-		let userDetail= computed(()=>{
-			return store.state.UserHabit.userDetail
-		})
-		let bindEmail= computed(()=>{
-			return store.state.UserHabit.bindEmail
-		})
-		let userGroupId: any = computed(() => {
-			return store.state.HomeStoreModule.userGroupId;
-		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
-		let setPortfolio = (data:any)=>{
-			portfolio.value = data
-		}
-		provide('setPortfolio',setPortfolio)
-		let designCollectionId: any = computed(() => {
-			return store.state.HomeStoreModule.designCollectionId;
-		});
-		let designId: any = computed(() => {
-			return store.state.HomeStoreModule.designId;
-		});
-		let contentImgMax = {
-			width:'',
-			height:'',
-		}
-		let contentImg = {
-			width:'',
-			height:'',
-		}
-		let exportNav = ref([
-			{
-				name:useI18n().t('HomeView.moodboard'),
-				change:true,
-				noChange:true,
-				value:'moodboardFiles',
-			},{
-				name:useI18n().t('HomeView.printboard'),
-				change:true,
-				noChange:false,
-				value:'printboardFiles',
-			},{
-				name:useI18n().t('HomeView.colorboard'),
-				change:true,
-				noChange:false,
-				value:'colorBoards',
-			},{
-				name:useI18n().t('HomeView.sketchboard'),
-				change:true,
-				noChange:false,
-				value:'sketchboardFiles',
-			},{
-				name:useI18n().t('HomeView.mannequins'),
-				change:true,
-				noChange:true,
-				value:'',
-			},
-		])
-		const dataDom = reactive({
-			collectionModal:null as any,
-			editDesignType:null as any,
-			designBtn:null as any,
-		})
-		const designData = reactive({
-			openEditBtnId:-1,
-			selectEditBtn:null as any,
-			selectEditBtnIndex:-1,
-			likeLoading: false, //喜欢防抖
-			widthList:[
-				{
-					label:'Medium',
-					value:170,
-				},{
-					label:'Large',
-					value:250,
-				},{
-					label:'Extra-large',
-					value:400,
-				}
-			],
-			selectDesign:null as any,//当前选择的design
-			isUnfold:false,
-			selectLikeDesign:[] as any,
 
-			//类型
-			resultTypeList:[
-				{
-					label:'All',
-					value:'All',
-				},{
-					label:'Design',
-					value:'Design',
-				},{
-					label:'Product',
-					value:'Product',
-				},
-				// ,{
-				// 	label:'To Product Image',
-				// 	value:'ToProductImage',
-				// },{
-				// 	label:'Relight',
-				// 	value:'Relight',
-				// },
-				{
-					label:'Pose Transfer',
-					value:'PoseTransfer',
-				},
-			],
-			resultType:'All',
-			oldSelectLikeDesign:null as any
-		})
-		watch(()=>likeDesignCollectionList.value.length,(val)=>{
-			if(val>0)uploadLikeDom()
-		})
-		provide('exportNav',exportNav)
-		let isShowOperate = ref(false)
-		let {t} = useI18n()
-		let driver__:any = computed(()=>{
-			return store.state.Guide.guide
-		})
-		let likeDesignItemIdList = ref([])
-		let workspacePosition:any = computed(()=>{
-			return store.state.Workspace.probjects.positionList
-		})
-		let allBoardData:any = computed(()=>{
-			return store.state.UploadFilesModule.allBoardData})
-		let isMannequinShow = ref(false)
-		let chooseIsDesign:any = computed(()=>{
-			return store.state.UploadFilesModule.chooseIsDesign})
-		let portfolio:any = ref({})
-		provide('portfolio',portfolio)
-		let showDesignMark = ref(false)
-		let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
-		
-		const collItemSize = reactive({
-			widthValue:{
-					label:'Medium',
-					value:170,
-				},
-			collValue:6,
-			padding:60,
-			likeStyle:{
-				width:'240px',
-				height:'370px',
-				position:'absolute',
-			},
-			collStyle:{
-				width:'0',
-				height:'0',
-				position:'absolute',
-			},
-			itemStyle:{
-				width:0,
-				height:0,
-			},
-			scale:[1,1.54],
-			collTime:null as any,
-			isMove:false,
-		})
-		const posiitonData = ref({
-			likeElList:[] as any,
-			likeSelectIndex:0,
-			generateElList:[] as any,
-			generateSelectIndex:0,
-		})
-		let likeItemDom = ref()
-		let collItemDom = ref()
-		let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
-		let recycleDomHidden = ref(false);
-		if(designCollectionList.value.length>0){
-			recycleDomHidden.value = JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false
-		}
-		let getDesignTime = null as any;
-		const setSystemDesigner = (time:any)=>{
-			clearTimeout(collItemSize.collTime)
-			collItemSize.collTime = setTimeout(()=>{
-			nextTick(()=>{
-				let parentWidth = likeItemDom.value.parentElement.offsetWidth
-				collItemSize.widthValue.value = collItemSize.widthValue.value == -1?100:collItemSize.widthValue.value
-				collItemSize.widthValue.value = collItemSize.widthValue.value > parentWidth?parentWidth:collItemSize.widthValue.value
-				collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
-				collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue.value))
-				let value = collItemSize.collValue
+  beforeUnmount() {
+    clearTimeout(this.getDesignTime);
+    sessionStorage.setItem("domHidden", JSON.stringify(this.domHidden));
+    sessionStorage.setItem(
+      "recycleDomHidden",
+      JSON.stringify(this.recycleDomHidden)
+    );
+    sessionStorage.setItem("collValue", JSON.stringify(this.collValue));
+    if (this.$props.isState) this.sortDesignCollection();
+    // window.removeEventListener('resize', this.setItemPosition)
+    this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
+  },
+  async mounted() {
+    window.addEventListener("beforeunload", (event) => {
+      this.store.commit("clearAllCollection");
+    });
+    // window.addEventListener('resize', this.setItemPosition)
 
-				collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
-				collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
-				
-				collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
-				collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
+    this.$refs.rightContentBlockBox;
+    this.observerData.observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        clearTimeout(this.observerData.time);
+        this.observerData.time = setTimeout(() => {
+          this.setSystemDesigner(0);
+          this.setDesignItemStyle();
+        }, 100);
+        // const { width } = entry.contentRect;
+      }
+    });
+    this.observerData.observer.observe(this.$refs.rightContentBlockBox);
+    if (this.designCollectionList?.length > 0) {
+      nextTick(() => {
+        this.setDesignItemStyle();
+        this.setShowHide("recycleDomHidden");
+      });
+    }
+  },
+  directives: {
+    mousewheel: {
+      mounted(el) {
+        let bodyDom: any = document.getElementsByClassName(
+          "right_content_block"
+        )[0];
+        let dom: any = document.getElementsByClassName("right_content_body");
+        let mouseover = () => {
+          bodyDom.classList.add("active");
+        };
+        let mouseleave = () => {
+          bodyDom.classList.remove("active");
+        };
+        dom.forEach((item: any) => {
+          item.addEventListener("mouseover", mouseover);
+          item.addEventListener("mouseleave", mouseleave);
+        });
 
-				collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
-				collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
-				let elArr = likeItemDom.value.children
-				posiitonData.value.likeElList = []
-				for(let i = 0;i < elArr.length;i++){
-					posiitonData.value.likeElList.push({
-						el: elArr[i], 
-						sort: designData.selectLikeDesign[i].sort - 1, 
-						// sort: likeDesignCollectionList.value[i].sort - 1, 
-						index: i,
-						userLikeSortId:designData.selectLikeDesign[i].userLikeSortId || designData.selectLikeDesign[i].id
-						// userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
-					});
-				}
-				moveItem('like')
-			})
-			},time)
-		}
-		const setDesignItemStyle = ()=>{
-			posiitonData.value.generateElList = []
-			let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
-			designCollectionList.value.forEach((item:any,index:any)=>{
-				posiitonData.value.generateElList.unshift({
-					el: elArr[index], 
-					sort: designCollectionList.value.length - index - 1, 
-					index: designCollectionList.value.length - index - 1,
-					userLikeSortId:item.designItemId || item.id
-				});
-			})
-		}
+        el.addEventListener(
+          "wheel",
+          (e: WheelEvent) => {
+            let num = 0;
+            if (e.deltaY > 0) {
+              num = 25;
+            } else {
+              num = -25;
+            }
+            el.scrollBy(num, 0);
+          },
+          { passive: true }
+        );
+      },
+    },
+  },
+  methods: {
+    // addTeam (team:any) {
+    // this.likeDesignCollectionList.push(team)
+    // },
+    openSetData() {
+      this.setItemPosition();
+    },
+    setItemPosition() {
+      this.setSystemDesigner(0);
+      this.setDesignItemStyle();
+    },
+    affiche(text: any) {
+      nextTick(() => {
+        let affiche: any = this.$refs.affiche;
+        affiche.init(text);
+      });
+    },
 
-		const setDeleteDesign = (value:any,index:any)=>{
-			store.commit("setDeleteDesignCollectionList",index);
-			let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
-			posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
-			
-			posiitonData.value.generateElList.forEach((item:any)=>{
-				if(item.sort > collItem.sort){
-					item.sort-=1
-				}
-			})
-			moveItem('')
-		}
-		const cancelDeleteDesign = (index:any)=>{
-			store.commit("cancelDeleteDesignCollectionList",index);
-		}
-		const designMousedown = (e:any,design:any,str:string)=>{
-			if(design.resultType != 'Design' || designData.isUnfold)return
-			if(str != 'like' && showDesignMark.value) return
-			let Id = design.userLikeSortId || design.id
-			let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
-			let item:any  = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
-			item.el.style.zIndex = 2;
-			item.el.style.transition = 'all 0s';
-			let startX = e.clientX,
-			startY = e.clientY,
-			left = item.el.offsetLeft,
-			top = item.el.offsetTop;
-			collItemSize.isMove = false
-			let moveFun = (e:any) => {
-				collItemSize.isMove = true
-				let X = e.clientX - startX + left;
-				let Y = e.clientY - startY + top;
-				item.el.style.left = `${X}px`;
-				item.el.style.top = `${Y}px`;
-				reRange(item, X, Y,str);
-			};
-			let mouseUpFun = ()=>{
-				document.removeEventListener('mousemove',mouseMove)
-				document.removeEventListener('touchmove',touchmove)
+    //判断模特和当前start的sketch是否匹配
+    isMannequin() {
+      this.isMannequinShow = false;
+      let num = 0;
+      this.allBoardData?.sketchboardFiles?.forEach((sketchItem: any) => {
+        this.workspacePosition.forEach((positionItem: any) => {
+          if (positionItem.value == sketchItem.categoryValue) {
+            num++;
+          }
+        });
+      });
+      if (
+        this.allBoardData?.sketchboardFiles?.length &&
+        this.allBoardData?.sketchboardFiles?.length > 0
+      ) {
+        if (num != this.allBoardData?.sketchboardFiles?.length) {
+          this.isMannequinShow = true;
+        }
+      } else {
+        this.isMannequinShow = false;
+      }
+    },
+    //设计新的collection
+    designNewCollection() {
+      clearTimeout(this.getDesignTime);
+      let data = this.getDesignData("");
+      if (this.driver__.driver) {
+        nextTick().then(() => {
+          driverObj__.moveNext();
+        });
+      }
+      this.isShowMark = true;
+      // this.store.commit("setLikeDesignCollectionList", []);
+      Https.axiosPost(Https.httpUrls.designCollection, data)
 
-				document.removeEventListener('mouseup',mouseUpFun) 
-				document.removeEventListener('touchend',mouseUpFun) 
-				item.el.style.zIndex = 1;
-				item.el.style.transition = 'top,left .5s';
-				moveItem(str);
-				if(str == 'like')sortDesignCollection()
-			}
-			let mouseMove = function(event:any){
-				let e = getMousePosition(event,false)
-				moveFun(e)
-			}
-			let touchmove = function(event:any){
-				let e = getMousePosition(event,true)
-				moveFun(e)
-			}
+        .then((rv: any) => {
+          if (rv) {
+            let value = {
+              objectSignList: data.requestIdList.join(),
+              requestId: rv,
+            };
+            this.posiitonData.generateElList.forEach((item: any) => {
+              item.sort -= 1;
+            });
+            this.moveItem("disLike");
 
-			document.addEventListener('mousemove',mouseMove)
-			document.addEventListener('touchmove',touchmove)
+            this.getDesignResult(value, "newDesign");
+            this.startDesignType = "design";
+            // this.posiitonData.likeSelectIndex = 0
+            // this.posiitonData.likeElList = []
+          }
+          this.isShowMark = false;
+        })
+        .catch((res) => {
+          this.isShowMark = false;
+        });
+    },
+    getDesignResult(data: any, str: any) {
+      this.showDesignMark = true;
+      this.recycleDomHidden = true;
+      this.setSystemDesigner(0);
+      Https.axiosGet(Https.httpUrls.getDesignResult, { params: data })
+        .then(async (rv) => {
+          if (rv.designCollectionItems) {
+            let arr: any = [];
+            if (this.designCollectionList.length == 0) {
+              arr.push(...rv.designCollectionItems);
+            } else {
+              arr = rv.designCollectionItems.filter(
+                (itemA: any) =>
+                  !this.designCollectionList.some(
+                    (itemB: any) => itemA.objectSign === itemB.objectSign
+                  )
+              );
+            }
+            for (let index = 0; index < arr.length; index++) {
+              const item = arr[index];
+              await new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  this.designCollectionList.unshift(item);
+                  nextTick().then(() => {
+                    let dom: any = this.$refs.collItemDom;
+                    let elArr: any = dom.querySelectorAll(
+                      ".content_img_GetWidth"
+                    );
+                    this.posiitonData.generateElList.push({
+                      el: elArr[0],
+                      sort: elArr.length - 2,
+                      index: elArr.length - 1,
+                      userLikeSortId: item.designItemId,
+                    });
+                    this.moveItem("disLike");
+                  });
+                  resolve("");
+                }, 200);
+              });
+            }
+          }
+          if (rv.unfinishedList.length == 0) {
+            this.showDesignMark = false;
+            if (str == "newDesign") {
+              if (rv.designCollectionItems) {
+                // this.store.commit("deleteUserGroupId");
+                this.store.commit("setDesignCollectionId", rv.collectionId);
+                this.store.commit("setDesignId", rv.designId);
+              }
+            } else {
+              // this.designProgress = 0,
+              this.store.commit("setDesignId", rv.designId);
+            }
+            nextTick().then(() => {
+              driverObj__.moveNext();
+              this.posiitonData.generateElList.forEach((item: any) => {
+                item.sort += 1;
+              });
+              this.moveItem("disLike");
+            });
+          } else {
+            data.objectSignList = rv.unfinishedList.join();
+            this.getDesignTime = setTimeout(() => {
+              if (this.designFailure.currentNum == rv.unfinishedList.length) {
+                this.designFailure.num++;
+                if (this.designFailure.num >= 10) data.objectSignList = "";
+              } else {
+                this.designFailure.num = 0;
+              }
+              this.getDesignResult(data, str);
+            }, 1000);
+          }
+        })
+        .catch(() => (this.showDesignMark = false));
+    },
+    //重新设计collection
+    resDesignCollection() {
+      if (this.driver__.driver) {
+        nextTick().then(() => {
+          driverObj__.moveNext();
+        });
+      }
+      clearTimeout(this.getDesignTime);
+      this.isShowMark = true;
+      let data = this.getDesignData(this.designCollectionId);
+      Https.axiosPost(Https.httpUrls.reDesignCollection, data)
+        .then((rv: any) => {
+          if (rv) {
+            let value = {
+              objectSignList: data.requestIdList.join(),
+              requestId: rv,
+            };
+            this.posiitonData.generateElList.forEach((item: any) => {
+              item.sort -= 1;
+            });
+            this.moveItem("disLike");
+            this.getDesignResult(value, "resDesign");
+            this.startDesignType = "resDesign";
+            this.isShowMark = false;
+          }
+        })
+        .catch((res) => {
+          this.isShowMark = false;
+        });
+    },
 
-			document.addEventListener('mouseup',mouseUpFun) 
-			document.addEventListener('touchend',mouseUpFun) 
-		}
-		//排序  从大到小
-		const sortDesignCollection = ()=> {
-			let arrData:any = []
-			if(!likeDesignCollectionList.value)return
-			likeDesignCollectionList.value.forEach((likeItem:any)=>{
-			    let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId || item.userLikeSortId == likeItem.id)[0]
-				likeItem.sort = item.sort + 1
-				let obj = {
-					id:likeItem.userLikeSortId || likeItem.id,
-					"sort": item.sort + 1,
-					"userLikeGroupId": likeItem.userLikeGroupId,
-					"userLikeId": likeItem.id
-				}
-				arrData.push(obj)
-			})
-			let data = {
-				"userLikeGroupId": userGroupId.value,
-				"userLikeSortList": arrData
-			}
-			Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
-			})
-		}
-		const mouseenter = (e:any,str:string)=>{
-		}
-		const reRange = (item:any, x:number, y:number,str:string)=>{
-			let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
-			let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
-			let value = collItemSize.collValue
-			let width,height,num
-			if(str == 'like'){
-				num = value 
-				width = collItemSize.itemStyle.width
-				height = collItemSize.itemStyle.height
-			}else{
-				num = 3
-				width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
-				height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
-			}
-			let padding = str == 'like'?collItemSize.padding/2:0
-			let moveIndex = Math.round((x-padding) / (width + 10)) + Math.round(y / (height + 10)) * num;
-			moveIndex = elList.length - 1 - moveIndex
-			moveIndex = moveIndex < 0 ? 0 : moveIndex;
-			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
-			if(moveIndex != index){
-				if(str == 'like'){
-					posiitonData.value.likeSelectIndex = moveIndex;
-				}else{
-					posiitonData.value.generateSelectIndex = moveIndex;
-				}
-				let currentSort = item.sort;
-				for(let i = 0;i < elList.length;i++){
-					if(currentSort < moveIndex){
-						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
-							elList[i].sort -= 1;
-						};
-					}else if(currentSort > moveIndex){
-						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
-							elList[i].sort += 1;
-						};
-					}
-				};
-				elList[item.index].sort = moveIndex;
-				moveItem(str);
-			}
-		}
-		const setLikeDislLike = (str:string,value:any)=>{
-			designData.selectLikeDesign = []
-			posiitonData.value.likeSelectIndex = 0
-			nextTick(()=>{
-				if(str == 'like'){
-					let elArr = likeItemDom.value.children
-					posiitonData.value.likeElList.push({
-						el: elArr[0], 
-						sort: value.sort - 1, 
-						index: value.sort - 1,
-						userLikeSortId:value.userLikeSortId
-					});
-					let collItem = posiitonData.value.generateElList.filter((item:any)=>(item.userLikeSortId == value.designItemId || item.userLikeSortId == value.id))[0]
-					if(collItem){
-						posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
-						posiitonData.value.generateElList.forEach((item:any)=>{
-							if(item.sort > collItem.sort){
-								item.sort-=1
-							}
-						})
-					}
-				}else if(str == 'disLike'){
-					let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
-					posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
-					posiitonData.value.likeElList.forEach((item:any)=>{
-						if(item.sort > value.sort - 1){
-							item.sort-=1
-						}
-					})
-					posiitonData.value.generateElList.push({
-						el: elArr[elArr.length-1], 
-						sort: posiitonData.value.generateElList.length, 
-						index: posiitonData.value.generateElList.length,
-						userLikeSortId:value.designItemId||value.id
-					});
-				}
-				setDesignItemStyle()
-				setSystemDesigner(100)
-				// moveItem('disLike');
-			})
-		}
-		//排列
-		const moveItem = (str:any)=>{
-			let elLikeList = posiitonData.value.likeElList
-			let generateElList = posiitonData.value.generateElList
-			let value = collItemSize.collValue
-			let width:any,height:any
-			width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
-			height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
-			  
-			// let num = str == 'like'?value:3
-			nextTick(()=>{
-				for(let i = 0;i < elLikeList.length;i++){
-					elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
-					elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
-				}
-				for(let i = 0;i < generateElList.length;i++){
-					generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
-					generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
-				}
-			})
-			
-		}
-		const openCollection = (str:string)=>{
-			dataDom.collectionModal.init(str)
-		}
-		const openEditBtn = (design:any,index:number,event:any)=>{
-			if(designData.selectLikeDesign[index].resultType != 'Design'){
-				designData.selectDesign = designData.selectLikeDesign.filter((item:any)=>(item.resultType == 'Design' && item.userLikeSortId == designData.selectLikeDesign[index].parentId))[0]
-			}else{
-				designData.selectDesign = designData.selectLikeDesign[index]
-			}
-			designData.openEditBtnId = design.designItemId||design.id
-			designData.selectEditBtn = design
-			designData.selectEditBtnIndex = index
-			let width = event.target.offsetWidth
-			let height = event.target.offsetHeight
-			let parentRect = dataDom.designBtn.parentElement.getBoundingClientRect()
-			
-			let x = event.clientX - parentRect.x - event.offsetX + width
-			let y = event.clientY - parentRect.y - event.offsetY + height
-			dataDom.designBtn.style.left = x+'px'
-			dataDom.designBtn.style.top = y+'px'
-			
-			let removeEditBtnId = ()=>{
-				designData.openEditBtnId = -1
-				document.removeEventListener('click',removeEditBtnId)
-			}
-			document.addEventListener('click',removeEditBtnId)
+    getDesignData(designCollectionId: any) {
+      let {
+        moodboardFiles,
+        printboardFiles,
+        disposeMoodboard,
+        // generatePrintFiles,
+        colorBoards,
+        sketchboardFiles,
+        marketingSketchFiles,
+        moodboardPosition,
+      } = this.store.state.UploadFilesModule.allBoardData;
+      console.log(
+        JSON.parse(
+          JSON.stringify(this.store.state.UploadFilesModule.allBoardData)
+        )
+      );
+      this.randomNum();
+      let modelList = [] as any;
+      let workspace: any = this.store.state.Workspace.probjects;
+      workspace.model.forEach((item: any) => {
+        let obj = {
+          id: item.id,
+          type: item.type,
+          collectionElementId: item.collectionElementId,
+        };
+        modelList.push(obj);
+      });
+      let data: any = {
+        colorBoards: this.getColorBoard(colorBoards),
+        // marketingSketchs: this.getBoardId(marketingSketchFiles),
+        moodBoards: this.getBoardId(moodboardFiles),
+        printBoards: this.getPrintId(printboardFiles),
+        sketchBoards: this.getSkecthBoard(sketchboardFiles),
+        moodboardPosition: moodboardPosition
+          ? JSON.stringify(moodboardPosition)
+          : null,
+        switchCategory:
+          workspace.type == "seriesDesign" ? "" : workspace.position.value,
+        singleOverall: workspace.type == "seriesDesign" ? "overall" : "single",
+        systemScale: workspace.systemDesignerPercentage
+          ? workspace.systemDesignerPercentage * 0.01
+          : 0.3,
+        templateId: "",
+        // templateId: workspace.model.id,
+        mannequins: modelList,
+        modelType: "",
+        modelSex: workspace?.sex,
+        moodTemplateId: disposeMoodboard?.[0]
+          ? String(disposeMoodboard[0].id)
+          : null,
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        processId: this.designRandom,
+        projectId: workspace.id,
+      };
+      // data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
+      this.setSystemDesigner(0);
+      this.designFailure = {
+        num: 0,
+        currentNum: 0,
+      };
+      if (designCollectionId) {
+        data.collectionId = designCollectionId;
+      }
 
-		}
-		let setEditDesignType = (arr:any,index:any,type:any,status:any,listType:string)=>{
-			arr = JSON.parse(JSON.stringify(arr))
-			let item = arr[index]
-			if(status == 'add'){
-				item.sourceUrl = item.designOutfitUrl || item.url
-			}else{
-				
-			}
-			arr[index].resultType = type
-			// dataDom.editDesignType.isProductimg = isLike
-			dataDom.editDesignType.isProductimg = true
-			dataDom.editDesignType.init(arr,index,null,status,listType)
-			dataDom.editDesignType.isLike = false
-			dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
-			dataDom.editDesignType.isComparison = true
-		}
-		const addGenerateImg = (data:any)=>{
-			if(!data.id)return
-			let obj = {
-				id:data.id,
-				designItemId:data.id,
-				// designItemId:data.elementId,
-				designOutfitId:'',
-				designOutfitUrl:data.designOutfitUrl,
-				sourceUrl:data.sourceUrl,
-				resultType:data.resultType,
-				elementId:data.elementId,
-				elementType:data.elementType,
-				userGroupId:data.userGroupId || data.id,
-				firstFrameUrl:data.firstFrameUrl,
-				gifUrl:data.gifUrl,
-				userLikeSortId:data.userLikeSortId,	
-			}
-			let list = []
-			if(data.listType == 'disLike'){
-				list = designCollectionList.value
-			}else{
-				list = likeDesignCollectionList.value
-			}
-			if(list[data.isIndex]?.generateAwait)list[data.isIndex].generateAwait = false;
-			if(data.status == 'add'){
-				if(data.listType == 'like'){
-					likeDesignCollection(obj,-1,data.resultType)
-				}else{
-					list.unshift(obj)
-				}
-			}else if(data.status == 'cove'){
-				// collectionLikeUpdate
-				// Https
-				if(data.listType == 'like'){
-					let value = {
-						"oldRelationId": data.oldId,
-						"relationId": data.id,
-						"relationType": data.resultType,
-					}
-					Https.axiosPost(Https.httpUrls.collectionLikeUpdate,value).then((rv:any)=>{
-						if(rv){
-						}
-					})
-				}
-				list[data.isIndex].designOutfitUrl = obj.designOutfitUrl
-				list[data.isIndex].resultType = obj.resultType
-				list[data.isIndex].id = obj.id
-				list[data.isIndex].designItemId = obj.designItemId
-				list[data.isIndex].sourceUrl = obj.sourceUrl
-			}
-			// nextTick().then(()=>{
-			// 	// setDesignItemStyle()
-			// 	// setSystemDesigner(100)
-			// 	uploadLikeDom()
-			// })
-		}
-		const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
-			let url
-			let data = {
-				toProductImageResultId:[(design.designItemId || design.id)],
-				projectId: store.state.Workspace.probjects.id,
-				collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
-			} as any
-			let params = {} as any
-			if(type == 'ToProductImage' || type == 'Relight'){
-				if(str == 'like'){
-					url = Https.httpUrls.productImageLike
-				}else{
-					url = Https.httpUrls.productImageUnLike
-				}
-			}else if(type == 'PoseTransfer'){
-				url = Https.httpUrls.poselikeOrDisike
-				if(str == 'like'){
-					params = {
-						likeOrDislike:'like',
-						transformedId:design.id,
-						projectId:store.state.Workspace.probjects.id,
-						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
-					}
-				}else{
-					params = {
-						likeOrDislike:'dislike',
-						transformedId:design.id,
-						projectId:store.state.Workspace.probjects.id,
-						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
-					}
-				}
-			}else{
-				if(str == 'like'){
-					url = Https.httpUrls.productImageLike
-				}else{
-					url = Https.httpUrls.productImageUnLike
-				}
-			}
-			designData.likeLoading = true;
-			Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
-				(rv) => {
-					if(str == 'like'){
-						likeDesignCollectionList.value.forEach((item:any)=>{
-							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
-								item.childList.push(design)
-							}
-						})
-					}else{
-						likeDesignCollectionList.value.forEach((item:any)=>{
-							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
-								item.childList = item.childList.filter((item:any)=>{
-									return item.id != design.id
-								})
-							}
-						})
-					}
-					nextTick().then(()=>{
-						uploadLikeDom()
-					})
-					
+      let arr = [];
+      for (let index = 0; index < 8; index++) {
+        let floor = Math.floor(Math.random() * 90000000) + 10000000;
+        arr.push(floor);
+      }
+      data.requestIdList = arr;
+      return data;
+    },
+    randomNum() {
+      this.designRandom = String(
+        Math.floor(Math.random() * 9000000000000000) + 1000000000000000
+      );
+    },
+    getBoardId(boardData: any) {
+      boardData = boardData || [];
+      let dataList = boardData.map((v: any) => {
+        let data: any = {
+          id: v.resData.id,
+          designType: v.resData.designType,
+        };
+        return data;
+      });
+      return dataList;
+    },
 
-					//一下代码是生成的design时候也可以toproduct
-					// if(str == 'like'){
-					// 	let value:any = {
-					// 		...design,
-					// 		sort:likeDesignCollectionList.value.length + 1,
-					// 		userLikeGroupId:design.id,
-					// 	}
-					// 	design.groupDetailId = rv.groupDetailId;
-					// 	store.commit(
-					// 		"addLikeDesignCollectionList",
-					// 		value
-					// 	);
-					// 	setLikeDislLike('like',value)
-					// 	if(index != -1)store.commit("deleteDesignCollectionList", index);
-					// }else{
-					// 	if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
-					// 	store.commit("addDesignCollectionList", [design]);
-					// 	likeDesignCollectionList.value.forEach((item:any)=>{
-					// 		if(item.sort > design.sort){
-					// 			item.sort-=1
-					// 		}
-					// 	})
-					// }
-					designData.likeLoading = false;
-				}
-			).catch(res=>{
-				designData.likeLoading = false;
-			});
-		}
-		let likeDesignCollection = (design:any,index:any,type:any) => {
-			if (designData.likeLoading) {
-				return;
-			}
-			if(type != 'Design'){
-				setNoDesignLike(design,index,type,'like')
-				return
-			}
-			let data = {
-				designItemId: design.designItemId,
-				userGroupId: store.state.HomeStoreModule.userGroupId,
-				projectId: store.state.Workspace.probjects.id,
-				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
-			};
-			
-			
-			designData.likeLoading = true;
-			Https.axiosPost(Https.httpUrls.designLike, data)
-				.then((rv: any) => {
-					if (rv) {
-						let value:any = {
-							...design,
-							id:rv.userLikeId,
-							groupDetailId:rv.userLikeId,
-							userLikeSortId:rv.userLikeSortId,
-							userLikeGroupId:rv.userGroupId,
-							sort:rv.sort,
-						}
-						store.commit("setUserGroupId", rv.userGroupId);
-						design.groupDetailId = rv.groupDetailId;
-						store.commit(
-							"addLikeDesignCollectionList",
-							value
-						);
-						setLikeDislLike('like',value)
-						if(index != -1)store.commit("deleteDesignCollectionList", index);
-					}
-					designData.likeLoading = false;
-				})
-				.catch((rv) => {
-					designData.likeLoading = false;
-				});
-		}
-		const upDataLikeListType = ()=>{
+    getPrintId(boardData: any) {
+      boardData = boardData || [];
+      let dataList = boardData.map((v: any) => {
+        let data: any = {
+          id: v.resData.id,
+          designType: v.resData.designType,
+          level2Type: v.categoryValue,
+          isPin: v.pin ? 1 : 0,
+        };
+        return data;
+      });
+      return dataList;
+    },
 
-		}
-		const setGenerateAwait = (data:any)=>{
-			let list = []
-			if(data.listType == 'disLike'){
-				list = designCollectionList.value
-			}else{
-				list = likeDesignCollectionList.value
-			}
-			list[data.index].generateAwait = true;
+    getSkecthBoard(boardData: any) {
+      boardData = boardData || [];
+      let sketchBoards = boardData.map((v: any) => {
+        let data = {
+          designType: v.resData.designType,
+          isPin: v.pin ? 1 : 0,
+          level2Type: v.categoryValue,
+          sketchBoardId: v.resData.id,
+        };
+        return data;
+      });
+      return sketchBoards;
+    },
 
-		}
-		const gifPlay = (e:any,item:any)=>{
-			e.target.src = item.gif || item.gifUrl//使用gif图片
-		}
-		const gifPause = (e:any,item:any)=>{
-			e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
-		}
-		const startHover = (e:any,item:any)=>{
-		}
-		const endHover = (e:any,item:any)=>{
+    getColorBoard(boardData: any) {
+      boardData = boardData || [];
+      let colorBoards = boardData.map((v: any) => {
+        let data = {
+          id: v.id,
+          name: v.name,
+          tcx: v.tcx,
+          gradient: v.gradient,
+          rgbValue: "",
+        };
+        data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
+        return data;
+      });
+      return colorBoards;
+    },
+    deleteDesignCollection(list: any, index: any) {
+      list.splice(index, 1);
+    },
 
-		}
-		const setUnfold = ()=>{
-			designData.isUnfold = !designData.isUnfold
-			if(!designData.isUnfold){
-				designData.selectLikeDesign = designData.oldSelectLikeDesign || []
-			}
-			uploadLikeDom()
-		}
-		const uploadLikeDom = ()=>{
-			if(designData.isUnfold){
-				// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
-				designData.selectLikeDesign = []
-				likeDesignCollectionList.value.sort((a:any,b:any)=>{return a.sort - b.sort})
-				let childLength = 0
-				likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
-					let item = JSON.parse(JSON.stringify(likeItem))
-					item.oldSort = item.sort
-					if(item?.childList?.length > 0){
-						item.childList.forEach((childItem:any,childIndex:number)=>{
-							childItem.sort = childIndex + item.sort + childLength
-							designData.selectLikeDesign.push(childItem)
-						})
-						childLength = item.childList.length + childLength
-					}
-					item.sort = childLength + item.sort
-					designData.selectLikeDesign.push(item)
-				})
-				designData.oldSelectLikeDesign = []
-				designData.resultType = 'All'
-			}else{
-				if(designData.selectLikeDesign.length == 0){
-					designData.selectLikeDesign = likeDesignCollectionList.value
-					return
-				}
-				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
-				parents.map((parent:any) => {
-					parent.sort = parent.oldSort||parent.sort
-					return {
-					...parent,
-					childList: designData.selectLikeDesign.filter((item:any) => 
-						item.parentId === parent.userLikeSortId && item.resultType !== 'Design'
-					)
-					};
-				});
-				designData.selectLikeDesign = parents
-			}
-			nextTick(()=>{
-				setSystemDesigner(0)
-			})
-		}
-		const changeResultType = ()=>{
-			if(designData.resultType != 'All'){
-				if(designData.oldSelectLikeDesign.length == 0)designData.oldSelectLikeDesign = designData.selectLikeDesign
-				if(designData.resultType == 'Product'){
-					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => (item.resultType === 'ToProductImage' || item.resultType === 'Relight'));
-				}else{
-					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => item.resultType === designData.resultType);
-				}
-				designData.selectLikeDesign.forEach((item:any,index:number) => {
-					item.sort = index + 1
-				})
-			}else{
-				designData.selectLikeDesign = designData.oldSelectLikeDesign
-				designData.selectLikeDesign.forEach((item:any,index:number) => {
-					item.sort = index + 1
-				})
-			}
-			nextTick(()=>{
-				setSystemDesigner(0)
-			})
-		}
-		return {
-			store,
-			...toRefs(editDesignType),
-			likeDesignCollectionList,
-			deleteDesignCollectionList,
-			designCollectionList,
-			userGroupId,
-			userDetail,
-			bindEmail,
-			setPortfolio,
-			designCollectionId,
-			designId,
-			contentImgMax,
-			contentImg,
-			exportNav,
-			isShowOperate,
-			t,
-			driver__,
-			likeDesignItemIdList,
-			workspacePosition,
-			allBoardData,
-			isMannequinShow,
-			chooseIsDesign,
-			portfolio,
-			setSystemDesigner,
-			setDesignItemStyle,
-			showDesignMark,
-			...toRefs(collItemSize),
-			...toRefs(designData),
-			...toRefs(dataDom),
-			likeItemDom,
-			collItemDom,
-			domHidden,
-			recycleDomHidden,
-			getDesignTime,
+    likeDesignCollection(design: any, index: any, type: any) {
+      if (this.likeLoading) {
+        return;
+      }
+      if (type != "Design") {
+        this.setNoDesignLike(design, index, type, "like");
+        return;
+      }
+      let data = {
+        designItemId: design.designItemId,
+        userGroupId: this.store.state.HomeStoreModule.userGroupId,
+        projectId: this.store.state.Workspace.probjects.id,
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        designPythonOutfitId: design.designOutfitId
+          ? design.designOutfitId
+          : design.designPythonOutfitId,
+      };
 
-			setDeleteDesign,
-			cancelDeleteDesign,
-			designMousedown,
-			sortDesignCollection,
-			getMousePosition,
-			mouseenter,
-			setLikeDislLike,
-			posiitonData,
-			moveItem,
-			openCollection,
-			setEditDesignType,
-			openEditBtn,
-			addGenerateImg,
-			setNoDesignLike,
-			upDataLikeListType,
-			setGenerateAwait,
-			gifPlay,
-			gifPause,
-			startHover,
-			endHover,
-			setUnfold,
-			changeResultType,
-		};
-	},
-	data() {
-		return {
-			isFinishLoading: false,
-			isShowMark: false, //导出的loading蒙层
-			indicator: h(LoadingOutlined, {
-				style: {
-					fontSize: "4.8rem",
-					marginTop: "3rem",
-					color:"#341e57",
-				},
-				spin: true,
-			}),
-			designProgress: 0,
-			startDesignType: "design", //设计类型 design 和 resdesign
-			disLikeLoading: false, //不喜欢防抖
-			dragIdx:0,
-			designRandom:'',
-			detailDestroy:false,//销毁detail
-			designFailure:{
-				num:0,
-				currentNum:0,
-			},//获取20次都为空的话就停止获取
-			observerData:{
-				time:false as any,
-				observer:null as any,
-			},
-		};
-	},
-	watch: {
-		workspacePosition:{
-			handler(newVal:any,oldVal:any){
-				this.isMannequin()
-			},
-		},
-		allBoardData:{
-			handler(newVal:any,oldVal:any){
-				this.isMannequin()
-			},
-		},
-	},
-	
-	beforeUnmount(){
-		clearTimeout(this.getDesignTime);
-		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
-		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
-		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
-		if(this.$props.isState)this.sortDesignCollection()
-		// window.removeEventListener('resize', this.setItemPosition)
-		this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
-	},
-	async mounted() {
-		window.addEventListener('beforeunload', (event)=>{
-			this.store.commit("clearAllCollection");
-		});
-		// window.addEventListener('resize', this.setItemPosition)
-		
-		this.$refs.rightContentBlockBox
-		this.observerData.observer = new ResizeObserver(entries => {
-			for (let entry of entries) {
-				clearTimeout(this.observerData.time)
-				this.observerData.time = setTimeout(()=>{
-					this.setSystemDesigner(0)
-					this.setDesignItemStyle()
-				},100)
-				// const { width } = entry.contentRect;
-			}
-		});
-		this.observerData.observer.observe(this.$refs.rightContentBlockBox);
-		if(this.designCollectionList?.length > 0){
-			nextTick(()=>{
-				this.setDesignItemStyle()
-				this.setShowHide('recycleDomHidden')
-			})
-		}
-	},
-	directives:{
-		mousewheel:{
-			mounted (el) {
-				let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
-				let dom:any = document.getElementsByClassName('right_content_body')
-				let mouseover = ()=>{
-					bodyDom.classList.add('active')
-				}
-				let mouseleave = ()=>{
-					bodyDom.classList.remove('active')
-				}
-				dom.forEach((item:any) => {
-					item.addEventListener('mouseover',mouseover)
-					item.addEventListener('mouseleave',mouseleave)
-				});
-				
-			
-				el.addEventListener('wheel',(e:WheelEvent)=>{
-					let num = 0
-					if(e.deltaY > 0){
-						num = 25
-					}else{
-						num = -25
-					}
-					el.scrollBy(num, 0);
-				},{ passive: true })
-			}
-		}
-	},
-	methods: {
-		// addTeam (team:any) {
-		// this.likeDesignCollectionList.push(team)
-		// },
-		openSetData(){
-			this.setItemPosition()	
-		},
-		setItemPosition(){
-			this.setSystemDesigner(0)
-			this.setDesignItemStyle()
-		},
-		affiche(text:any){
-			nextTick(()=>{
-			    let affiche:any = this.$refs.affiche
-				affiche.init(text)
-			})
-		},
-		
-		//判断模特和当前start的sketch是否匹配
-		isMannequin(){
-			this.isMannequinShow = false
-			let num = 0
-			this.allBoardData?.sketchboardFiles?.forEach((sketchItem:any) => {
-				
-				this.workspacePosition.forEach((positionItem:any) => {
+      this.likeLoading = true;
+      Https.axiosPost(Https.httpUrls.designLike, data)
+        .then((rv: any) => {
+          if (rv) {
+            let value: any = {
+              ...design,
+              id: rv.userLikeId,
+              groupDetailId: rv.userLikeId,
+              userLikeSortId: rv.userLikeSortId,
+              userLikeGroupId: rv.userGroupId,
+              sort: rv.sort,
+            };
+            this.store.commit("setUserGroupId", rv.userGroupId);
+            design.groupDetailId = rv.groupDetailId;
+            this.store.commit("addLikeDesignCollectionList", value);
+            this.setLikeDislLike("like", value);
+            if (index != -1)
+              this.store.commit("deleteDesignCollectionList", index);
+            if (this.startDesignType === "resDesign") {
+              this.getHistoryChoose(this.userGroupId, "like");
+            }
+          }
+          this.likeLoading = false;
+        })
+        .catch((rv) => {
+          this.likeLoading = false;
+        });
+    },
 
-					if(positionItem.value == sketchItem.categoryValue){
-						num ++ 
-					}
-				});
-				
-			});
-			if(this.allBoardData?.sketchboardFiles?.length && this.allBoardData?.sketchboardFiles?.length>0){
-				if(num != this.allBoardData?.sketchboardFiles?.length){
-					this.isMannequinShow = true
-				}
-			}else{
-				this.isMannequinShow = false
-			}
-		},
-		//设计新的collection
-		designNewCollection() {
-			clearTimeout(this.getDesignTime);
-			let data = this.getDesignData("");
-			if(this.driver__.driver){
-				nextTick().then(()=>{
-					driverObj__.moveNext();
-				})
-			}
-			this.isShowMark = true
-			// this.store.commit("setLikeDesignCollectionList", []);
-			Https.axiosPost(Https.httpUrls.designCollection, data)
-			
-				.then((rv: any) => {
-					if (rv) {
-						let value = {
-							objectSignList:data.requestIdList.join(),
-							requestId:rv
-						}
-						this.posiitonData.generateElList.forEach((item:any) => {
-							item.sort -= 1
-						})
-						this.moveItem('disLike')
+    //不喜欢设计
+    dislikeDesignCollection(design: any, type: string, index: any) {
+      let data = {
+        designId: design.designId || this.designId,
+        designPythonOutfitId: design.designOutfitId,
+        groupDetailId: design.groupDetailId || design.id,
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      };
+      if (type != "Design") {
+        this.setNoDesignLike(design, index, type, "disLike");
+        return;
+      }
+      if (this.disLikeLoading) {
+        return;
+      }
+      this.disLikeLoading = true;
+      Https.axiosPost(Https.httpUrls.designDislike, data)
+        .then((rv: any) => {
+          if (rv) {
+            // this.store.commit("addDesignCollectionList", [design]);
+            this.likeDesignCollectionList.forEach((item: any) => {
+              if (item.sort > design.sort) {
+                item.sort -= 1;
+              }
+            });
+            this.store.commit("deleteLikeDesignCollectionList", index);
+            this.setLikeDislLike("disLike", design);
+          }
+          this.disLikeLoading = false;
+        })
+        .catch((rv) => {
+          this.disLikeLoading = false;
+        });
+    },
 
-						this.getDesignResult(value,'newDesign')
-						this.startDesignType = "design";
-						// this.posiitonData.likeSelectIndex = 0
-						// this.posiitonData.likeElList = []
-					}
-					this.isShowMark = false;
-				})
-				.catch((res) => {
-					this.isShowMark = false;
-				})
-		},
-		getDesignResult(data:any,str:any){
-			this.showDesignMark = true
-			this.recycleDomHidden = true
-			this.setSystemDesigner(0)
-			Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
-			.then(async (rv)=>{
-				if(rv.designCollectionItems){
-					let arr:any = []
-					if(this.designCollectionList.length == 0){
-						arr.push(...rv.designCollectionItems)
-					}else{
-						arr = rv.designCollectionItems.filter((itemA:any) => 
-							!this.designCollectionList.some((itemB:any) => itemA.objectSign === itemB.objectSign)
-						);
-					}
-					for (let index = 0; index < arr.length; index++) {
-						const item = arr[index];
-						await new Promise((resolve, reject) => {
-							setTimeout(() => {
-								this.designCollectionList.unshift(item)
-								nextTick().then(()=>{
-									let dom:any = this.$refs.collItemDom
-								    let elArr:any = dom.querySelectorAll(".content_img_GetWidth");
-									this.posiitonData.generateElList.push({
-										el: elArr[0], 
-										sort: elArr.length - 2, 
-										index: elArr.length - 1,
-										userLikeSortId:item.designItemId
-									});
-									this.moveItem('disLike')
-								})
-								resolve('')
-							}, 200);
-						})
-					}
-				}
-				if(rv.unfinishedList.length == 0){
-					this.showDesignMark = false
-					if(str == 'newDesign'){
-						if(rv.designCollectionItems){
-							// this.store.commit("deleteUserGroupId");
-							this.store.commit(
-								"setDesignCollectionId",
-								rv.collectionId
-							);
-							this.store.commit("setDesignId", rv.designId);
-						}
-					}else{
-						// this.designProgress = 0,
-						this.store.commit("setDesignId", rv.designId);
-					}
-					nextTick().then(()=>{
-						driverObj__.moveNext();
-						this.posiitonData.generateElList.forEach((item:any) => {
-							item.sort += 1
-						});
-						this.moveItem('disLike')
+    //获取选择的组
+    getHistoryChoose(userGroupId: any, type: any) {
+      this.isShowMark = true;
+      let url = Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
+      Https.axiosGet(url)
+        .then((rv: any) => {
+          this.setPortfolio(rv.portfolioDTO);
+          this.store.commit("setUserGroupId", rv.userGroupId);
+          this.dealHistoryChooseData(rv, type);
+          this.isShowMark = false;
+        })
+        .catch((rv) => {
+          this.isShowMark = false;
+        });
+    },
+    getWorks(userGroupId: any, type: any) {
+      let data: any = {
+        accountId: 0,
+        collectionId: 0,
+        coverId: 0,
+        createDate: "",
+        id: userGroupId,
+        isDeleted: 0,
+        portfolioDes: "",
+        portfolioName: "",
+        portfolioType: "",
+        status: 0,
+        updateDate: "",
+        userLikeGroupId: "",
+      };
+      this.isShowMark = true;
+      Https.axiosPost(Https.httpUrls.setPorfolioChoose, data)
+        .then((rv: any) => {
+          this.setPortfolio(rv.portfolioDTO);
+          this.store.commit("setUserGroupId", rv.userGroupId);
+          this.dealHistoryChooseData(rv, type);
+          this.isShowMark = false;
+        })
+        .catch((res) => {
+          this.isShowMark = false;
+        });
+    },
+    //处理选择组的数据
+    dealHistoryChooseData(data: any, type: any) {
+      let collectionData = {
+        disposeMoodboard: data.collection.moodTemplateId
+          ? [
+              {
+                id: data.collection.moodTemplateId,
+                imgUrl: data.collection.moodTemplateUrl,
+                resData: {
+                  name: data.collection.moodTemplateName,
+                },
+              },
+            ]
+          : [],
+        moodboardPosition: data.collection.moodboardPosition
+          ? JSON.parse(data.collection.moodboardPosition)
+          : {},
+        moodboardFiles: this.dealViewChooseData(
+          data.collection.moodBoards,
+          "Moodboard"
+        ),
+        printboardFiles: this.dealViewChooseData(
+          data.collection.printBoards,
+          "Printboard"
+        ),
+        generatePrintFiles: [],
+        colorBoards: this.dealViewChooseColor(data.collection.colorBoards),
+        sketchboardFiles: this.dealViewChooseData(
+          data.collection.sketchBoards,
+          "Sketchboard"
+        ),
+        marketingSketchFiles: this.dealViewChooseData(
+          data.collection.marketingSketchs,
+          ""
+        ),
+      };
+      this.store.commit("setAllBoardDataChoose", collectionData);
+      // this.store.commit('clearShowSketchboard')
+      this.store.commit("setShowSketchboard", data.collection.sketchBoards);
+      this.store.commit("setDesignCollectionId", data.collection.collectionId);
+      if (type === "normal") {
+        let likeDesignCollectionList = data.userLikeDetails.map((v: any) => {
+          let data = {
+            ...v,
+            groupDetailId: v.id,
+            designItemUrl: v.designOutfitUrl,
+            designItemId: v.designItemId,
+          };
+          return data;
+        });
+        this.store.commit(
+          "setLikeDesignCollectionList",
+          likeDesignCollectionList
+        );
+      }
+      this.setSystemDesigner(100);
+    },
 
-					})
-				}else{
-					data.objectSignList = rv.unfinishedList.join()
-					this.getDesignTime = setTimeout(()=>{
-						if(this.designFailure.currentNum == rv.unfinishedList.length){
-							this.designFailure.num++
-							if(this.designFailure.num >= 10)data.objectSignList=''
-						}else{
-							this.designFailure.num = 0
-						}
-						this.getDesignResult(data,str)
-					},1000)
-				}
-			}).catch(()=>this.showDesignMark = false)
-		},
-		//重新设计collection
-		resDesignCollection() {
-			if(this.driver__.driver){
-				nextTick().then(()=>{
-					driverObj__.moveNext();
-				})
-			}
-			clearTimeout(this.getDesignTime);
-			this.isShowMark = true
-			let data = this.getDesignData(this.designCollectionId);
-			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
-				.then((rv: any) => {
-					if (rv) {
-						let value = {
-							objectSignList:data.requestIdList.join(),
-							requestId:rv
-						}
-						this.posiitonData.generateElList.forEach((item:any) => {
-							item.sort -= 1
-						})
-						this.moveItem('disLike')
-						this.getDesignResult(value,'resDesign')
-						this.startDesignType = "resDesign";
-						this.isShowMark = false
-					}
-				})
-				.catch((res) => {
-					this.isShowMark = false;
-				});
+    //统一处理选择组的渲染数据
+    dealViewChooseData(data: any, str: string) {
+      if (!data) {
+        return [];
+      }
+      let filesList = data.map((v: any) => {
+        let newData: any = {
+          imgUrl: v.url ? v.url : v.designOutfitUrl,
+          id: v.id,
+          status: "done",
+          resData: v,
+          type_: {
+            type1: "material",
+            type2: v.level1Type,
+          },
+        };
+        if (v.level1Type === "Sketchboard") {
+          newData.pin = v.isPin;
+          newData.categoryValue = v.level2Type;
+          newData.level2Type = v.level2Type;
+        }
+        if (v.level1Type === "Printboard") {
+          newData.pin = v.isPin;
+          newData.level2Type = v.level2Type;
+          newData.categoryValue = v.level2Type;
+        }
+        return newData;
+      });
+      return filesList;
+    },
 
-		},
- 
-		getDesignData(designCollectionId: any) {
-			let {
-				moodboardFiles,
-				printboardFiles,
-				disposeMoodboard,
-				// generatePrintFiles,
-				colorBoards,
-				sketchboardFiles,
-				marketingSketchFiles,
-				moodboardPosition,
-			} = this.store.state.UploadFilesModule.allBoardData;
-			console.log(JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData)))
-			this.randomNum()
-			let modelList = [] as any;
-			let workspace:any = this.store.state.Workspace.probjects
-			workspace.model.forEach((item:any)=>{
-				let obj = {
-					id:item.id,
-					type:item.type,
-					collectionElementId:item.collectionElementId
-				}
-				modelList.push(obj)
-			})
-			let data: any = {
-				colorBoards: this.getColorBoard(colorBoards),
-				// marketingSketchs: this.getBoardId(marketingSketchFiles),
-				moodBoards: this.getBoardId(moodboardFiles),
-				printBoards: this.getPrintId(printboardFiles),
-				sketchBoards: this.getSkecthBoard(sketchboardFiles),
-				moodboardPosition: moodboardPosition?JSON.stringify(moodboardPosition):null,
-				switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
-				singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
-				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
-				templateId: '',
-				// templateId: workspace.model.id,
-				mannequins: modelList,
-				modelType:'',
-				modelSex:workspace?.sex,
-				moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
-				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-				processId:this.designRandom,
-				projectId:workspace.id
-			};
-			// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
-			this.setSystemDesigner(0)
-			this.designFailure = {
-				num:0,
-				currentNum:0,
-			}
-			if(designCollectionId) {
-				data.collectionId = designCollectionId;
-			}
-		
-			let arr = []
-			for (let index = 0; index < 8; index++) {
-				let floor = Math.floor(Math.random() * 90000000) + 10000000
-				arr.push(floor)
-			}
-			data.requestIdList = arr
-			return data;
-		},
-		randomNum(){
-			this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
-		},
-		getBoardId(boardData: any) {
-			boardData = boardData || []
-			let dataList = boardData.map((v: any) => {
-				let data: any = {
-					id: v.resData.id,
-					designType: v.resData.designType,
-				};
-				return data;
-			});
-			return dataList;
-		},
+    //统一处理选择组的渲染数据
+    dealViewChooseColor(data: any) {
+      let colorList = data.map((v: any) => {
+        let rgbValue = v.rgbValue.split(" ");
+        let newData: any = {
+          id: v.id,
+          name: v.name,
+          tcx: v.tcx || "",
+          rgbValue: {
+            r: rgbValue[0],
+            g: rgbValue[1],
+            b: rgbValue[2],
+            a: 1,
+          },
+        };
+        if (v.gradient) {
+          newData.gradient = v.gradient;
+        } else {
+          delete newData.gradient;
+        }
+        return newData;
+      });
+      return colorList;
+    },
 
-		getPrintId(boardData: any) {
-			boardData = boardData || []
-			let dataList = boardData.map((v: any) => {
-				let data: any = {
-					id: v.resData.id,
-					designType: v.resData.designType,
-					level2Type: v.categoryValue,
-					isPin: v.pin ? 1 : 0,
-				};
-				return data;
-			});
-			return dataList;
-		},
+    //销毁图片详情
+    setDetailDestroy() {
+      // let designDetail: any = this.$refs.designDetail;
+      // designDetail.destroy();
+      this.detailDestroy = false;
+    },
+    //打开图片详情
+    designDetail(
+      design: any,
+      index: number,
+      collectionList: any,
+      type: string
+    ) {
+      // if()
+      if (this.isMove) return;
+      if (design.resultType != "Design") {
+        this.setEditDesignType(
+          collectionList,
+          index,
+          design.resultType,
+          "edit",
+          type
+        );
+        return;
+      }
+      design.designOutfitId = design.designPythonOutfitId
+        ? design.designPythonOutfitId
+        : design.designOutfitId;
+      let data = {
+        design: design,
+        index: index,
+        collectionList: collectionList,
+        type: type,
+      };
+      this.detailDestroy = true;
+      nextTick(() => {
+        let designDetail: any = this.$refs.designDetail;
+        designDetail.showDesignDetailModal(data);
+      });
+    },
 
-		getSkecthBoard(boardData: any) {
-			boardData = boardData || []
-			let sketchBoards = boardData.map((v: any) => {
-				let data = {
-					designType: v.resData.designType,
-					isPin: v.pin ? 1 : 0,
-					level2Type: v.categoryValue,
-					sketchBoardId: v.resData.id,
-				};
-				return data;
-			});
-			return sketchBoards;
-		},
-
-		getColorBoard(boardData: any) {
-			boardData = boardData || []
-			let colorBoards = boardData.map((v: any) => {
-				let data = {
-					id: v.id,
-					name: v.name,
-					tcx: v.tcx,
-					gradient:v.gradient,
-					rgbValue: "",
-				};
-				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
-				return data;
-			});
-			return colorBoards;
-		},
-		deleteDesignCollection(list:any,index:any){
-			list.splice(index,1)
-		},
-		
-		likeDesignCollection(design: any, index: any,type:any) {
-			if (this.likeLoading) {
-				return;
-			}
-			if(type != 'Design'){
-				this.setNoDesignLike(design,index,type,'like')
-				return
-			}
-			let data = {
-				designItemId: design.designItemId,
-				userGroupId: this.store.state.HomeStoreModule.userGroupId,
-				projectId: this.store.state.Workspace.probjects.id,
-				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
-			};
-			
-			
-			this.likeLoading = true;
-			Https.axiosPost(Https.httpUrls.designLike, data)
-				.then((rv: any) => {
-					if (rv) {
-						let value:any = {
-							...design,
-							id:rv.userLikeId,
-							groupDetailId:rv.userLikeId,
-							userLikeSortId:rv.userLikeSortId,
-							userLikeGroupId:rv.userGroupId,
-							sort:rv.sort,
-						}
-						this.store.commit("setUserGroupId", rv.userGroupId);
-						design.groupDetailId = rv.groupDetailId;
-						this.store.commit(
-							"addLikeDesignCollectionList",
-							value
-						);
-						this.setLikeDislLike('like',value)
-						if(index != -1)this.store.commit("deleteDesignCollectionList", index);
-						if (this.startDesignType === "resDesign") {
-							this.getHistoryChoose(this.userGroupId, "like");
-						}
-					}
-					this.likeLoading = false;
-				})
-				.catch((rv) => {
-					this.likeLoading = false;
-				});
-		},
-
-		//不喜欢设计
-		dislikeDesignCollection(design:any,type:string, index: any) {
-			let data = {
-				designId: design.designId || this.designId,
-				designPythonOutfitId:design.designOutfitId,
-				groupDetailId: design.groupDetailId || design.id,
-				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-			};
-			if(type != 'Design'){
-				this.setNoDesignLike(design,index,type,'disLike')
-				return
-			}
-			if (this.disLikeLoading) {
-				return;
-			}
-			this.disLikeLoading = true;
-			Https.axiosPost(Https.httpUrls.designDislike, data)
-				.then((rv: any) => {
-					if (rv) {
-						// this.store.commit("addDesignCollectionList", [design]);
-						this.likeDesignCollectionList.forEach((item:any)=>{
-							if(item.sort > design.sort){
-								item.sort-=1
-							}
-						})
-						this.store.commit(
-							"deleteLikeDesignCollectionList",
-							index
-						);
-						this.setLikeDislLike('disLike',design)
-					}
-					this.disLikeLoading = false;
-				})
-				.catch((rv) => {
-					this.disLikeLoading = false;
-				});
-		},
-
-
-		//获取选择的组
-		getHistoryChoose(userGroupId: any, type: any) {
-			
-			this.isShowMark = true;
-			let url =
-				Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
-			Https.axiosGet(url)
-				.then((rv: any) => {
-					this.setPortfolio(rv.portfolioDTO)
-					this.store.commit("setUserGroupId", rv.userGroupId);
-					this.dealHistoryChooseData(rv, type);
-					this.isShowMark = false;
-				})
-				.catch((rv) => {
-					this.isShowMark = false;
-				});
-		},
-		getWorks(userGroupId: any, type: any) {
-			let data:any = {
-				"accountId": 0,
-				"collectionId": 0,
-				"coverId": 0,
-				"createDate": "",
-				"id": userGroupId,
-				"isDeleted": 0,
-				"portfolioDes": "",
-				"portfolioName": "",
-				"portfolioType": "",
-				"status": 0,
-				"updateDate": "",
-				"userLikeGroupId":'' 
-			}
-			this.isShowMark = true;
-			Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
-					(rv: any) => {
-						this.setPortfolio(rv.portfolioDTO)
-						this.store.commit("setUserGroupId", rv.userGroupId);
-						this.dealHistoryChooseData(rv, type);
-						this.isShowMark = false;
-					}
-				).catch((res)=>{
-					this.isShowMark = false;
-				});
-		},
-		//处理选择组的数据
-		dealHistoryChooseData(data: any, type: any) {
-			let collectionData = {
-				disposeMoodboard: data.collection.moodTemplateId?[{
-					id:data.collection.moodTemplateId,
-					imgUrl:data.collection.moodTemplateUrl,
-					resData:{
-						name:data.collection.moodTemplateName,
-					}
-				}]:[],
-				moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
-				moodboardFiles: this.dealViewChooseData(
-					data.collection.moodBoards,"Moodboard"
-				),
-				printboardFiles: this.dealViewChooseData(
-					data.collection.printBoards,"Printboard"
-				),
-				generatePrintFiles: [],
-				colorBoards: this.dealViewChooseColor(
-					data.collection.colorBoards
-				),
-				sketchboardFiles: this.dealViewChooseData(
-					data.collection.sketchBoards,"Sketchboard"
-				),
-				marketingSketchFiles: this.dealViewChooseData(
-					data.collection.marketingSketchs,""
-				),
-				
-			};
-			this.store.commit("setAllBoardDataChoose", collectionData);
-			// this.store.commit('clearShowSketchboard')
-			this.store.commit("setShowSketchboard", data.collection.sketchBoards);
-			this.store.commit(
-				"setDesignCollectionId",
-				data.collection.collectionId
-			);
-			if (type === "normal") {
-
-				let likeDesignCollectionList = data.userLikeDetails.map(
-					(v: any) => {
-						let data = {
-							...v,
-							groupDetailId: v.id,
-							designItemUrl: v.designOutfitUrl,
-							designItemId: v.designItemId,
-						};
-						return data;
-					}
-				);
-				this.store.commit(
-					"setLikeDesignCollectionList",
-					likeDesignCollectionList
-				);
-			}
-			this.setSystemDesigner(100)
-		},
-
-		//统一处理选择组的渲染数据
-		dealViewChooseData(data: any,str:string) {
-			if (!data) {
-				return [];
-			}
-			let filesList = data.map((v: any) => {
-				let newData: any = {
-					imgUrl: v.url?v.url:v.designOutfitUrl,
-					id: v.id,
-					status: "done",
-					resData: v,
-					type_:{
-						type1:'material',
-						type2:v.level1Type
-					}
-				};
-				if (v.level1Type === "Sketchboard") {
-					newData.pin = v.isPin;
-					newData.categoryValue = v.level2Type;
-					newData.level2Type = v.level2Type;
-				}
-				if (v.level1Type === "Printboard") {
-					newData.pin = v.isPin;
-					newData.level2Type = v.level2Type;
-					newData.categoryValue = v.level2Type;
-				}
-				return newData;
-			});
-			return filesList;
-		},
-
-		//统一处理选择组的渲染数据
-		dealViewChooseColor(data: any) {
-			let colorList = data.map((v: any) => {
-				let rgbValue = v.rgbValue.split(" ");
-				let newData: any = {
-					id: v.id,
-					name: v.name,
-					tcx: v.tcx || "",
-					rgbValue: {
-						r: rgbValue[0],
-						g: rgbValue[1],
-						b: rgbValue[2],
-						a: 1,
-					},
-				};
-				if(v.gradient){
-					newData.gradient = v.gradient;
-				}else{
-					delete newData.gradient;
-				}
-				return newData;
-			});
-			return colorList;
-		},
-	
-		//销毁图片详情
-		setDetailDestroy() {
-		    // let designDetail: any = this.$refs.designDetail;
-			// designDetail.destroy();
-			this.detailDestroy = false
-		},
-		//打开图片详情
-		designDetail(
-			design: any,
-			index: number,
-			collectionList: any,
-			type: string
-		) {
-			// if()
-			if(this.isMove)return
-			if(design.resultType != "Design"){
-				this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
-				return
-			}
-			design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
-			let data = {
-				design: design,
-				index: index,
-				collectionList: collectionList,
-				type: type,
-			};
-			this.detailDestroy = true
-			nextTick(()=>{
-				let designDetail: any = this.$refs.designDetail;
-				designDetail.showDesignDetailModal(data);
-			})
-		},
-
-		//完成单个图片设计
-		finishRedesign(event: any) {
-			let { design, index, type } = event;
-			if (type === "disLike") {
-				this.store.commit("setSingleDesignCollectionList", {
-					index: index,
-					design: design,
-				});
-			} else {
-				this.store.commit("setSingleLikeDesignCollectionList", {
-					index: index,
-					design: design,
-				});
-			}
-			this.setDetailDestroy()
-		},
-		setTask(data:any){
-			this.$emit('setTask',data)
-			// this.exportModel()
-		},
-		setShowHide(str:string){
-			if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
-			if(str == 'domHidden')this.domHidden = !this.domHidden
-			// this.setSystemDesigner(0)
-		}
-	},
+    //完成单个图片设计
+    finishRedesign(event: any) {
+      let { design, index, type } = event;
+      if (type === "disLike") {
+        this.store.commit("setSingleDesignCollectionList", {
+          index: index,
+          design: design,
+        });
+      } else {
+        this.store.commit("setSingleLikeDesignCollectionList", {
+          index: index,
+          design: design,
+        });
+      }
+      this.setDetailDestroy();
+    },
+    setTask(data: any) {
+      this.$emit("setTask", data);
+      // this.exportModel()
+    },
+    setShowHide(str: string) {
+      if (str == "recycleDomHidden")
+        this.recycleDomHidden = !this.recycleDomHidden;
+      if (str == "domHidden") this.domHidden = !this.domHidden;
+      // this.setSystemDesigner(0)
+    },
+  },
 });
 </script>
 <style lang="less" scoped>
 .designPage {
-	width: 100%;
-	height: 100%;
-	// padding-right:5rem;
-	overflow: initial !important;
-	position: relative;
-	.page_content {
-		position: relative;
-		
-		
-		.designPage_left_bottom{
-			position: absolute;
-			width: 4rem;
-			height: 7rem;
-			background: #fff;
-			border: 2px solid;
-			border-right: none;
-			border-radius: 2rem 0 0 2rem;
-			top: 50%;
-			transform: translate(-100%,-50%);
-			left: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 2;
-			cursor: pointer;
-			>span{
-				transition: all .3s;
-				transform: rotate(90deg);
-				&.active{
-					transform: rotate(270deg);
-				}
-			}
-			
-		}
-		.page_content_body {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			// padding-bottom: 4rem;
-			box-sizing: border-box;
-			z-index:1;
-			.right_content_header {
-				display: flex;
-				justify-content: space-between;
-				height: 6.5rem;
-				align-items: center;
-				padding: 0 3.2rem 0 1.9rem;
-				background: rgba(255, 255, 255, 0.2);
-				position: relative;
-				.right_content_export{
-					display: flex;
-					align-items: center; 
-					position: relative;
-					.icon-xiala{
-						cursor: pointer;
-						transition: .3s all;
-						margin-left: 1rem;
-					}
-					.icon_rotate{
-						-moz-transform: rotate(180deg);
-						-webkit-transform: rotate(180deg);
-						transform: rotate(180deg);
-						animation-direction: 0.5s;
-					}
-					.export_nav{
-						display: flex;
-						flex-direction: column;
-						position: absolute;
-						top: 5.5rem;
-						width: 100%;
-						background: #fff;
-						padding: 1rem;
-						border: 2px solid;
-						z-index: 2;
-						label{
-							margin: 0;
-						}
-					}
-				}
-				.content_header_left {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
+  width: 100%;
+  height: 100%;
+  // padding-right:5rem;
+  overflow: initial !important;
+  position: relative;
+  .page_content {
+    position: relative;
 
-					.icon-dangqianweizhi {
-						font-size: 1.6rem;
-						color: #000;
-					}
+    .designPage_left_bottom {
+      position: absolute;
+      width: 4rem;
+      height: 7rem;
+      background: #fff;
+      border: 2px solid;
+      border-right: none;
+      border-radius: 2rem 0 0 2rem;
+      top: 50%;
+      transform: translate(-100%, -50%);
+      left: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+      cursor: pointer;
+      > span {
+        transition: all 0.3s;
+        transform: rotate(90deg);
+        &.active {
+          transform: rotate(270deg);
+        }
+      }
+    }
+    .page_content_body {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      // padding-bottom: 4rem;
+      box-sizing: border-box;
+      z-index: 1;
+      .right_content_header {
+        display: flex;
+        justify-content: space-between;
+        height: 6.5rem;
+        align-items: center;
+        padding: 0 3.2rem 0 1.9rem;
+        background: rgba(255, 255, 255, 0.2);
+        position: relative;
+        .right_content_export {
+          display: flex;
+          align-items: center;
+          position: relative;
+          .icon-xiala {
+            cursor: pointer;
+            transition: 0.3s all;
+            margin-left: 1rem;
+          }
+          .icon_rotate {
+            -moz-transform: rotate(180deg);
+            -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+            animation-direction: 0.5s;
+          }
+          .export_nav {
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            top: 5.5rem;
+            width: 100%;
+            background: #fff;
+            padding: 1rem;
+            border: 2px solid;
+            z-index: 2;
+            label {
+              margin: 0;
+            }
+          }
+        }
+        .content_header_left {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-					.content_header_des {
-						font-size: 1.6rem;
-						color: #000000;
-						margin-left: 1rem;
-						font-weight: 900;
-					}
-				}
-			}
-			
-			.designPage_body {
-				width: 100%;
-				height: 100%;
-				display: flex;
-				// padding-left: 0.7rem;
-				box-sizing: border-box;
-				// overflow: hidden;
+          .icon-dangqianweizhi {
+            font-size: 1.6rem;
+            color: #000;
+          }
 
-				.designPage_left {
-					// width: 44.4rem;
-					height: 100%;
-					background: rgba(255, 255, 255, 0.2);
-					position: relative;
-					// overflow: hidden;
-					
-					
-					.designPage_left_content {
-						height: 100%;
-						width: 50rem;
-						// width: 55rem;
-						overflow: hidden;
-						// transition: all .3s;
-						padding-right: 1.2rem;
-						&.active{
-							padding-right: 0;
-							width: 0;
-						}
-						.home_left_info {
-							height: 100%;
-							display: flex;
-							background: #f6f6fa;
-							border-radius: 2rem;
-							flex-direction: column;
-							.left_info_content {
-								width: 100%;
-								height: calc(100% - 6.9rem);
-								overflow-y: auto;
-								&.left_info_content::-webkit-scrollbar {
-									display: none;
-								}
+          .content_header_des {
+            font-size: 1.6rem;
+            color: #000000;
+            margin-left: 1rem;
+            font-weight: 900;
+          }
+        }
+      }
 
-								.left_info_content_body {
-									width: 100%;
-								}
-							}
-							.left_info_hint{
-								display: flex;
-								span{
-									font-size: 1.3rem;
-									display: inline-block;
-								}
-							}
-						}
-					}
-				}
+      .designPage_body {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        // padding-left: 0.7rem;
+        box-sizing: border-box;
+        // overflow: hidden;
 
-				.designPage_right {
-					// width: calc(100% - 44.4rem);
-					flex: 1;
-					height: 100%;
-					width: 100%;
-					// overflow: hidden;
-					display: flex;
-					flex-direction: column;
-					justify-content: space-between;
-					position: relative;
-					.designPage_left_bottom{
-						border-radius: 0 2rem 2rem 0rem;
-						left: 2rem;
-						top: 50%;
-						left: auto;
-						right: 0;
-						transform: translate(100%, -50%);
-						// top: calc(50% - 10.4rem / 2);
-						border: 2px solid;
-						border-left: none;
-						background: #000;
-						color: #fff;
-						flex-direction: column;
-						&.active{
-							right: 53rem;
-							transform: translate(0, -50%);
-						}
-					}
-					.right_top {
-						padding: 1rem 3.2rem 2rem 1.2rem;
-						display: flex;
-						justify-content: space-between;
-						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
-						background: rgba(255, 255, 255, 0.4);
-						transition: all .3s;
-						&.active{
-							overflow: hidden;
-							padding-top: 0;
-							padding-bottom: 0;
-							height: 0;
-						}
-						.right_top_left {
-							display: flex;
-							align-items: center;
-							width: 100%;
-							.button_margin_14 {
-								margin-left: 1.4rem;
-							}
-							.silder{
-								display: flex;
-								align-items: center;
-								.text{
-									font-weight: 600;
-									font-size: 1.8rem;
-								}
-								.system_silder{
-									margin: 0 3rem;
-									width: 12rem;
-								}
-							}
-						}
-					}
-					.right_content_block_box{
-						flex: 1;
-						display: flex;
-						overflow: hidden;
-					}
-					.right_content_block {
-						flex: 1;
-						display: flex;
-						width: 0;
-						flex-direction: column;
-						&.recycleBin{
-							flex: none;
-							margin-left: 0;
-							width: 0;
-							overflow: hidden;
-							&.recycleBinShow{
-								width: auto;
-								margin-left: 2rem;
-							}
-							.right_content_body {
-								width: 55rem;
-								// width: 55rem;
-								.right_content_img_block{
-									
-									.content_img_block{
-										width: 16rem;
-										height: 23rem;
-										position: relative;
-										
-									}
-								}
-							}
-						}
-						&.right_content_block::-webkit-scrollbar{display: none;}
-						&.active{
-							overflow: hidden;
-						}
-						
-						.right_content_body {
-							// padding: 0 1.8rem 0 1.2rem;
-							// height: calc(50% - 4.5rem);
-							flex: 1;
-							overflow: auto;
-							background: #f6f6fa;
-							border-radius: 2rem;
-							display: flex;
-							flex-direction: column;
-							.right_content_img_block {
-								// overflow-y: auto;
-								height: 100%;
-								flex: 1;
-								display: flex;
-								width: auto;
-								// overflow: hidden;
-								align-items: center;
-								// padding-bottom: 1rem;
-								overflow-x: auto;
-								justify-content: center;
-								&.active::-webkit-scrollbar {
-									display: none;
-								}
-								// &.active::-webkit-scrollbar-button:single-button{
-								// 	display: none;
-								// }
-								// &.active::-webkit-scrollbar {
-								// 	/* 竖轴的宽度 */
-								// 	width: 1rem;
-								// 	/* 横轴的高度 */
-								// 	height: 1rem;
-								// 	transition: all .3s;
-								// }
-								// /* 进度 */
-								// &.active::-webkit-scrollbar-thumb {
-								// 	border-radius: 1rem;
-								// 	background: rgba(238, 238, 244, 0);
-								// }
-								// /* 轨道 */
-								// &.active::-webkit-scrollbar-track {
-								// 	border-radius: 1rem;
-								// 	background: rgba(238, 238, 244, 0);
-								// }
-								// &.active:hover {
-								// 	// overflow-x: scroll;
-								// 	&.active::-webkit-scrollbar-thumb {
-								// 		background: #543087;
-								// 	}
-								// 	/* 轨道 */
-								// 	&.active::-webkit-scrollbar-track {
-								// 		background: rgba(84, 48, 135,.2);
-								// 	}
-								// }
-								>div{
-									display: flex;
-									flex-wrap: wrap;
-									// padding: 0 2.8rem 0 0.9rem;
-									width: 100%;
-									height: 100%;
-									// align-content: flex-start;
-									overflow-x: hidden;
-									position: relative;
-									&::-webkit-scrollbar {
-										display: none;
-									}
-								}
-								.content_img_block {
-									// width: 24rem;
-									// height: 37rem;
-									width: calc(33.33% - 30px);
-									height: calc((33.33% - 30px) * 1.54);
-									box-sizing: border-box;
-									margin: 5px;
-									// min-height: 271px;
-									// max-height: 80%;
+        .designPage_left {
+          // width: 44.4rem;
+          height: 100%;
+          background: rgba(255, 255, 255, 0.2);
+          position: relative;
+          // overflow: hidden;
 
-									display: inline-block;
-									position: relative;
-									vertical-align: top;
-									flex-shrink: 0;
-									display: flex;
-									align-items: center;
-									justify-content: center;
-									position: absolute;
-									transition: top,left .5s;
-									// transition: top,left .3s;
-									&:hover .btn{
-										display: flex;
-									}
-									.content_img_flex {
-										display: flex;
-										justify-content: center;
-										align-items: center;
-										width: 100%;
-										height: 100%;
-										border-radius: 2rem;
-										border: 2px solid #E0E0E0;
-										overflow: hidden;
-										background: #fff;
-										.content_img_block_child{
-											position: absolute;
-											border-radius: 2rem;
-											border: 2px solid #00000070;
-											background: #fff;
-											display: flex;
-											left: -43%;
-											transform: translateX(69%);
-											top: 0rem;
-											> .childItem{
-												> .content_img_flex{
-													border: 2px solid #00000070;
-												}
-												position: relative !important;
-												>img{
+          .designPage_left_content {
+            height: 100%;
+            width: 50rem;
+            // width: 55rem;
+            overflow: hidden;
+            // transition: all .3s;
+            padding-right: 1.2rem;
+            &.active {
+              padding-right: 0;
+              width: 0;
+            }
+            .home_left_info {
+              height: 100%;
+              display: flex;
+              background: #f6f6fa;
+              border-radius: 2rem;
+              flex-direction: column;
+              .left_info_content {
+                width: 100%;
+                height: calc(100% - 6.9rem);
+                overflow-y: auto;
+                &.left_info_content::-webkit-scrollbar {
+                  display: none;
+                }
 
-												}
-											}
-										}
-									}
-									&.active{
-										.icon_like,.icon_delete{
-											display: block;
-										}
-										.content_img_flex {
-											&.Design{
-												border: 2px solid #000;
-											}
-											&.PoseTransfer{
-												border: 2px solid #f0d9d0;
-											}
-											&.ToProductImage{
-												border: 2px solid #ccece5;
-											}
-											&.Relight{
-												border: 2px solid #ccece5;
-											}
-										}
-									}
-									.content_img {
-										height: 100%;
-										// object-fit: contain;
-										object-fit: cover;
-									}
-									
-									.btn{
-										top: 1rem;
-										right: 1rem;
-										display: flex;
-										position: absolute;
-										flex-direction: column;
-										align-items: center;
-										> i{
-											cursor: pointer;
-											width: 3rem;
-											height: 3rem;
-											display: flex;
-											align-items: center;
-											justify-content: center;
-										}
-										
-										.icon_like,.icon_delete {
-											font-size: 1.4rem;
-											cursor: pointer;
-										}
-									}
-									
-									.icon_delete{
-										top: 5rem;
-									}
-									.icon-jushoucang {
-										color: #000;
-									}
-									.icon-jushoucanggift {
-										// color: rgba(52, 53, 121, 1);
-										color: #000;
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-		
-		.page_content_bg {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-		}
-	}
+                .left_info_content_body {
+                  width: 100%;
+                }
+              }
+              .left_info_hint {
+                display: flex;
+                span {
+                  font-size: 1.3rem;
+                  display: inline-block;
+                }
+              }
+            }
+          }
+        }
 
-	.progress_mark {
-		background: #ffffff;
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		left: 0;
-		top: 0;
-		z-index: 9999;
-		display: flex;
-		justify-content: center;
-		align-items: center;
+        .designPage_right {
+          // width: calc(100% - 44.4rem);
+          flex: 1;
+          height: 100%;
+          width: 100%;
+          // overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          position: relative;
+          .designPage_left_bottom {
+            border-radius: 0 2rem 2rem 0rem;
+            left: 2rem;
+            top: 50%;
+            left: auto;
+            right: 0;
+            transform: translate(100%, -50%);
+            // top: calc(50% - 10.4rem / 2);
+            border: 2px solid;
+            border-left: none;
+            background: #000;
+            color: #fff;
+            flex-direction: column;
+            &.active {
+              right: 53rem;
+              transform: translate(0, -50%);
+            }
+          }
+          .right_top {
+            padding: 1rem 3.2rem 2rem 1.2rem;
+            display: flex;
+            justify-content: space-between;
+            box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
+            background: rgba(255, 255, 255, 0.4);
+            transition: all 0.3s;
+            &.active {
+              overflow: hidden;
+              padding-top: 0;
+              padding-bottom: 0;
+              height: 0;
+            }
+            .right_top_left {
+              display: flex;
+              align-items: center;
+              width: 100%;
+              .button_margin_14 {
+                margin-left: 1.4rem;
+              }
+              .silder {
+                display: flex;
+                align-items: center;
+                .text {
+                  font-weight: 600;
+                  font-size: 1.8rem;
+                }
+                .system_silder {
+                  margin: 0 3rem;
+                  width: 12rem;
+                }
+              }
+            }
+          }
+          .right_content_block_box {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+          }
+          .right_content_block {
+            flex: 1;
+            display: flex;
+            width: 0;
+            flex-direction: column;
+            &.recycleBin {
+              flex: none;
+              margin-left: 0;
+              width: 0;
+              overflow: hidden;
+              &.recycleBinShow {
+                width: auto;
+                margin-left: 2rem;
+              }
+              .right_content_body {
+                width: 55rem;
+                // width: 55rem;
+                .right_content_img_block {
+                  .content_img_block {
+                    width: 16rem;
+                    height: 23rem;
+                    position: relative;
+                  }
+                }
+              }
+            }
+            &.right_content_block::-webkit-scrollbar {
+              display: none;
+            }
+            &.active {
+              overflow: hidden;
+            }
 
-		.mark_content {
-			text-align: center;
-		}
-	}
-	.btnOpen{
-		position: absolute;
-		width: max-content;
-		left: 30px;
-		top: 30px;
-		transform: translateX(-100%);
-		background: #e4e4e7;
-		padding: 12px;
-		border-radius: 12px;
-		display: none;
-		z-index: 999;
-		&.active{
-			display: block;
-		}
-		> .item{
-			display: flex;
-			align-items: center;
-			margin-bottom: 8px;
-			padding: 8px;
-			border-radius: 8px;
-			cursor: pointer;
-			&:last-child{
-				margin: 0;
-			}
-			> .text{
-				font-size: 12px;
-				margin-right: 10px;
-			}
-			&:hover{
-				background: #efeff1;
-			}
-		}
-	}
+            .right_content_body {
+              // padding: 0 1.8rem 0 1.2rem;
+              // height: calc(50% - 4.5rem);
+              flex: 1;
+              overflow: auto;
+              background: #f6f6fa;
+              border-radius: 2rem;
+              display: flex;
+              flex-direction: column;
+              .right_content_img_block {
+                // overflow-y: auto;
+                height: 100%;
+                flex: 1;
+                display: flex;
+                width: auto;
+                // overflow: hidden;
+                align-items: center;
+                // padding-bottom: 1rem;
+                overflow-x: auto;
+                justify-content: center;
+                &.active::-webkit-scrollbar {
+                  display: none;
+                }
+                // &.active::-webkit-scrollbar-button:single-button{
+                // 	display: none;
+                // }
+                // &.active::-webkit-scrollbar {
+                // 	/* 竖轴的宽度 */
+                // 	width: 1rem;
+                // 	/* 横轴的高度 */
+                // 	height: 1rem;
+                // 	transition: all .3s;
+                // }
+                // /* 进度 */
+                // &.active::-webkit-scrollbar-thumb {
+                // 	border-radius: 1rem;
+                // 	background: rgba(238, 238, 244, 0);
+                // }
+                // /* 轨道 */
+                // &.active::-webkit-scrollbar-track {
+                // 	border-radius: 1rem;
+                // 	background: rgba(238, 238, 244, 0);
+                // }
+                // &.active:hover {
+                // 	// overflow-x: scroll;
+                // 	&.active::-webkit-scrollbar-thumb {
+                // 		background: #543087;
+                // 	}
+                // 	/* 轨道 */
+                // 	&.active::-webkit-scrollbar-track {
+                // 		background: rgba(84, 48, 135,.2);
+                // 	}
+                // }
+                > div {
+                  display: flex;
+                  flex-wrap: wrap;
+                  // padding: 0 2.8rem 0 0.9rem;
+                  width: 100%;
+                  height: 100%;
+                  // align-content: flex-start;
+                  overflow-x: hidden;
+                  position: relative;
+                  &::-webkit-scrollbar {
+                    display: none;
+                  }
+                }
+                .content_img_block {
+                  // width: 24rem;
+                  // height: 37rem;
+                  width: calc(33.33% - 30px);
+                  height: calc((33.33% - 30px) * 1.54);
+                  box-sizing: border-box;
+                  margin: 5px;
+                  // min-height: 271px;
+                  // max-height: 80%;
+
+                  display: inline-block;
+                  position: relative;
+                  vertical-align: top;
+                  flex-shrink: 0;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  position: absolute;
+                  transition: top, left 0.5s;
+                  // transition: top,left .3s;
+                  &:hover .btn {
+                    display: flex;
+                  }
+                  .content_img_flex {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 2rem;
+                    border: 2px solid #e0e0e0;
+                    overflow: hidden;
+                    background: #fff;
+                    .content_img_block_child {
+                      position: absolute;
+                      border-radius: 2rem;
+                      border: 2px solid #00000070;
+                      background: #fff;
+                      display: flex;
+                      left: -43%;
+                      transform: translateX(69%);
+                      top: 0rem;
+                      > .childItem {
+                        > .content_img_flex {
+                          border: 2px solid #00000070;
+                        }
+                        position: relative !important;
+                        > img {
+                        }
+                      }
+                    }
+                  }
+                  &.active {
+                    .icon_like,
+                    .icon_delete {
+                      display: block;
+                    }
+                    .content_img_flex {
+                      &.Design {
+                        border: 2px solid #000;
+                      }
+                      &.PoseTransfer {
+                        border: 2px solid #f0d9d0;
+                      }
+                      &.ToProductImage {
+                        border: 2px solid #ccece5;
+                      }
+                      &.Relight {
+                        border: 2px solid #ccece5;
+                      }
+                    }
+                  }
+                  .content_img {
+                    height: 100%;
+                    // object-fit: contain;
+                    object-fit: cover;
+                  }
+
+                  .btn {
+                    top: 1rem;
+                    right: 1rem;
+                    display: flex;
+                    position: absolute;
+                    flex-direction: column;
+                    align-items: center;
+                    > i {
+                      cursor: pointer;
+                      width: 3rem;
+                      height: 3rem;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+
+                    .icon_like,
+                    .icon_delete {
+                      font-size: 1.4rem;
+                      cursor: pointer;
+                    }
+                  }
+
+                  .icon_delete {
+                    top: 5rem;
+                  }
+                  .icon-jushoucang {
+                    color: #000;
+                  }
+                  .icon-jushoucanggift {
+                    // color: rgba(52, 53, 121, 1);
+                    color: #000;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .page_content_bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .progress_mark {
+    background: #ffffff;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .mark_content {
+      text-align: center;
+    }
+  }
+  .btnOpen {
+    position: absolute;
+    width: max-content;
+    left: 30px;
+    top: 30px;
+    transform: translateX(-100%);
+    background: #e4e4e7;
+    padding: 12px;
+    border-radius: 12px;
+    display: none;
+    z-index: 999;
+    &.active {
+      display: block;
+    }
+    > .item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      padding: 8px;
+      border-radius: 8px;
+      cursor: pointer;
+      &:last-child {
+        margin: 0;
+      }
+      > .text {
+        font-size: 12px;
+        margin-right: 10px;
+      }
+      &:hover {
+        background: #efeff1;
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/modules/generalCanvas.vue b/src/component/modules/generalCanvas.vue
index 5dae8dc2..bb502435 100644
--- a/src/component/modules/generalCanvas.vue
+++ b/src/component/modules/generalCanvas.vue
@@ -1,1566 +1,1794 @@
 <template>
-	<div class="generalCanvas">
-		<div class="generalCanvas_left">
-			<div class="label_item">
-				<div>{{ $t('exportModel.Height') }}:</div>
-				<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
-			</div>
-			<div class="generalCanvas_operation_bor_item generalCanvas_left_tool_item_column">
-				<div class="label_item" v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
-					<div >{{ $t('exportModel.Color') }}</div>
-					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-					<div class="labelHover_show exportCanvasBox_imgbor">
-						<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
-					</div>
-				</div>
-				<div class="label_item" v-show="operation != 'move'">
-					<div >{{ $t('exportModel.Size') }}:</div>
-					<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
-				</div>
-				<div class="label_item" v-show="operation == 'pencil'">
-					<div >{{ $t('exportModel.Brushwork') }}:</div>
-					<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
-						style="flex: 1"
-						@change="brushworkChange"
-						>
-						<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
-							<img :src="item.url" alt="">
-						</a-select-option>
-					</a-select>
-				</div>
-				<div class="label_item texture" v-show="operation == 'texture'">
-					<div >{{ $t('exportModel.Texture') }}:</div>
-					<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
-						style="flex: 1"
-						@change="textureValueChange"
-						>
-						<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
-							<img :src="item.url" alt="">
-						</a-select-option>
-					</a-select>
-				</div>
-				<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
-					<div >{{ $t('exportModel.FillBack') }}:</div>
-					<div class="generalCanvas_left_tool_item leftAlign">
-						<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
-						<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
-					</div>
-				</div>
-				<div class="label_item" v-show="operation === 'move'">
-					<div >{{ $t('exportModel.Layer') }}:</div>
-					<div class="generalCanvas_left_tool_item top">
-						<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
-						<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
-						<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
-						<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
-					</div>
-				</div>
-				<div class="label_item" v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
-					<div>Font Family</div>
-					<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
-						style="flex: 1"
-						@change="setFontFamily"
-						>
-						<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
-							{{item.name}}
-						</a-select-option>
-					</a-select>
-				</div>
-			
-			</div>
-		</div>
-		<div class="generalCanvas_center_box generalCanvas_left">
-			<div class="generalCanvas_left_tool generalCanvas_title">
-				<div class="generalCanvas_left_tool_item">
-					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
-					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}"></i>
-					<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
-					<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
-					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
-					<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
+  <div class="generalCanvas">
+    <div class="generalCanvas_left">
+      <div class="label_item">
+        <div>{{ $t("exportModel.Height") }}:</div>
+        <input
+          type="number"
+          @input="setMaxInput('height', 30000)"
+          v-model="canvasWH.height"
+        />
+      </div>
+      <div
+        class="generalCanvas_operation_bor_item generalCanvas_left_tool_item_column"
+      >
+        <div
+          class="label_item"
+          v-show="
+            operation != 'move' &&
+            operation != 'eraser' &&
+            operation != 'texture'
+          "
+        >
+          <div>{{ $t("exportModel.Color") }}</div>
+          <input
+            type="color"
+            @input="setPencilColor"
+            v-model="canvasPencilColor"
+          />
+          <div class="labelHover_show exportCanvasBox_imgbor">
+            <div
+              v-for="item in colorHistoryList"
+              :style="{ background: item }"
+              @click="setColorHistory(item)"
+            ></div>
+          </div>
+        </div>
+        <div class="label_item" v-show="operation != 'move'">
+          <div>{{ $t("exportModel.Size") }}:</div>
+          <input
+            @change="setFontFamily"
+            type="range"
+            @input="setPencilWidth"
+            min="3"
+            max="50"
+            v-model="canvasPencilWidth[operation]"
+          />
+        </div>
+        <div class="label_item" v-show="operation == 'pencil'">
+          <div>{{ $t("exportModel.Brushwork") }}:</div>
+          <a-select
+            ref="select"
+            class="label_select"
+            size="small"
+            v-model:value="brushworkValue"
+            style="flex: 1"
+            @change="brushworkChange"
+          >
+            <a-select-option
+              class="label_select_item"
+              v-for="item in brushList"
+              :value="item.value"
+            >
+              <img :src="item.url" alt="" />
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="label_item texture" v-show="operation == 'texture'">
+          <div>{{ $t("exportModel.Texture") }}:</div>
+          <a-select
+            ref="select"
+            class="label_select"
+            size="small"
+            v-model:value="textureValue"
+            style="flex: 1"
+            @change="textureValueChange"
+          >
+            <a-select-option
+              class="label_select_item"
+              v-for="item in textureList"
+              :value="item.value"
+            >
+              <img :src="item.url" alt="" />
+            </a-select-option>
+          </a-select>
+        </div>
+        <div
+          class="label_item"
+          v-show="
+            operation != 'pencil' &&
+            operation != 'eraser' &&
+            operation != 'move' &&
+            operation != 'text' &&
+            operation != 'texture' &&
+            operation != ''
+          "
+        >
+          <div>{{ $t("exportModel.FillBack") }}:</div>
+          <div class="generalCanvas_left_tool_item leftAlign">
+            <i
+              class="icon iconfont icon-tuceng1"
+              @click="setOperationMode('fill')"
+              :class="{ active: operationMode == 'fill' }"
+            ></i>
+            <i
+              class="icon iconfont icon-tuceng"
+              @click="setOperationMode('border')"
+              :class="{ active: operationMode == 'border' }"
+            ></i>
+          </div>
+        </div>
+        <div class="label_item" v-show="operation === 'move'">
+          <div>{{ $t("exportModel.Layer") }}:</div>
+          <div class="generalCanvas_left_tool_item top">
+            <i
+              class="icon iconfont icon-shangyiceng"
+              @click="setLayerIndex('Front')"
+            ></i>
+            <i
+              class="icon iconfont icon-shangyiceng2"
+              @click="setLayerIndex('Forward')"
+            ></i>
+            <i
+              class="icon iconfont icon-xiayiceng"
+              @click="setLayerIndex('Backwards')"
+            ></i>
+            <i
+              class="icon iconfont icon-shangyiceng1"
+              @click="setLayerIndex('Back')"
+            ></i>
+          </div>
+        </div>
+        <div
+          class="label_item"
+          v-show="
+            (operation == '' || operation == 'text' || textDataShow) &&
+            operation != 'move'
+          "
+        >
+          <div>Font Family</div>
+          <a-select
+            ref="select"
+            class="label_select"
+            size="small"
+            v-model:value="fontFamily"
+            style="flex: 1"
+            @change="setFontFamily"
+          >
+            <a-select-option
+              class="label_select_item"
+              v-for="item in textFontFamilyList"
+              :style="{ 'font-family': item.value }"
+              :value="item.value"
+            >
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </div>
+      </div>
+    </div>
+    <div class="generalCanvas_center_box generalCanvas_left">
+      <div class="generalCanvas_left_tool generalCanvas_title">
+        <div class="generalCanvas_left_tool_item">
+          <i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+          <i
+            class="icon iconfont icon-fanchehui"
+            @click="historyState('reverse')"
+          ></i>
+          <i
+            class="icon iconfont icon-bianji"
+            @click="setOperation('pencil')"
+            :class="{ active: operation == 'pencil' }"
+          ></i>
+          <i
+            class="icon iconfont icon-caizhi"
+            @click="setOperation('texture')"
+            :class="{ active: operation == 'texture' }"
+          ></i>
+          <i
+            class="icon iconfont icon-move"
+            @click="setOperation('move')"
+            :class="{ active: operation == 'move' }"
+          ></i>
+          <i
+            class="icon iconfont icon-xiangpi_huaban1"
+            @click="setOperation('eraser')"
+            :class="{ active: operation == 'eraser' }"
+          ></i>
+          <!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
 
-					<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
-						<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
-						<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
-						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
-						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
-						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
-						<div class="label_item uploadImage">
-							<i class="icon iconfont icon-shangchuantupian" ></i>
-							<input type="file" @change="uploadImage">
-						</div>
-						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
-				</div>
-			</div>
-			<div class="generalCanvas_center">
-				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
-			</div>
-		</div>
-		<div class="mark_loading" v-show="isShowMark">
-			<a-spin size="large" />
-		</div>
-	</div>
+          <i
+            class="icon iconfont icon-xian"
+            @click="setOperation('fold')"
+            :class="{ active: operation == 'fold' }"
+          ></i>
+          <i
+            class="icon iconfont icon-checkbox-full"
+            @click="setOperation('rect')"
+            :class="{ active: operation == 'rect' }"
+          ></i>
+          <!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
+          <!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
+          <i
+            class="icon iconfont icon-sanjiaoxing"
+            @click="setOperation('triangle')"
+            :class="{ active: operation == 'triangle' }"
+          ></i>
+          <i
+            class="icon iconfont icon-tx-fill-tuoyuanxing"
+            @click="setOperation('ellipse')"
+            :class="{ active: operation == 'ellipse' }"
+          ></i>
+          <div class="label_item uploadImage">
+            <i class="icon iconfont icon-shangchuantupian"></i>
+            <input type="file" @change="uploadImage" />
+          </div>
+          <i
+            class="icon iconfont"
+            @click="setOperation('text')"
+            :class="{ active: operation == 'text' }"
+            >T</i
+          >
+        </div>
+      </div>
+      <div class="generalCanvas_center">
+        <div
+          class="editFrontBack_pencilbtn"
+          v-show="!isShowMark"
+          :style="pencilbtnStyle"
+        ></div>
+      </div>
+    </div>
+    <div class="mark_loading" v-show="isShowMark">
+      <a-spin size="large" />
+    </div>
+  </div>
 </template>
 <script>
-import {defineComponent, computed, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
+import {
+  defineComponent,
+  computed,
+  h,
+  ref,
+  nextTick,
+  onBeforeUnmount,
+  reactive,
+  onMounted,
 } from "vue";
 import { Https } from "@/tool/https";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import { useStore } from "vuex";
 import JSZip, { forEach } from "jszip";
 // import fabric from 'fabric';
 import { message, Modal } from "ant-design-vue";
-import domTurnImg from '@/tool/domTurnImg'
-import { openGuide,driverObj__ } from "@/tool/guide";
-const FileSaver = require("file-saver");
-import { JSSetPencil,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetGroup } from "@/tool/canvasDrawing";
+import domTurnImg from "@/tool/domTurnImg";
+import { openGuide, driverObj__ } from "@/tool/guide";
+import FileSaver from "file-saver";
+import {
+  JSSetPencil,
+  JSRectUpdata,
+  JSchangeType,
+  JScanvasMouseDown,
+  JScanvasMouseMove,
+  JScreateCheck,
+  JSSetTexture,
+  JSSetGroup,
+} from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
-import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
+import {
+  isMoible,
+  calculateGradientCoordinate,
+  base64ToFile,
+} from "@/tool/util";
 import publish from "@/component/WorksPage/publish.vue";
 import canvasGeneral from "@/tool/canvasGeneral";
 
 export default defineComponent({
-    components: {
-        scaleImage,
-        ExportNewCoolection,
-		publish,
-    },
-    props: ["msg", "sketchCatecoryList"],
-    setup(props,{emit}) {
-		const {t} = useI18n()
-        const store = useStore();
-		let driver__ = computed(()=>{
-			return store.state.Guide.guide
-		})
+  components: {
+    scaleImage,
+    ExportNewCoolection,
+    publish,
+  },
+  props: ["msg", "sketchCatecoryList"],
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const store = useStore();
+    let driver__ = computed(() => {
+      return store.state.Guide.guide;
+    });
 
-        let canvas = reactive({});
-        // let canvasDom = ref()
-        let canvasWH = ref({
-            width: 400,
-            height: 100,
-        });
-		let pencilbtnStyle = ref({
-			background:'',
-			width:0+'px',
-			height:0+'px',
-			display:'none',
-			left:0+'px',
-			top:0+'px',
-		})
-		let publish = ref()
-		// canvasWH.value.width = [window.innerWidth/2.4]
-		// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
-        let credits = computed(() => {
-            return store.state.UserHabit.credits.value;
-        });
-      
-        let allBoardData = computed(() => {
-            return store.state.UploadFilesModule.allBoardData;
-        });
-        let isShowMark = ref(false);
-        // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
-		let position = {
-			//设置每个图形位置的初始值
-			x: 0,
-			y: 0,
-			height: 0,
-		};
-		let sketchGrouping = 3; //sketch分组
-		let disposeMoodboardShow = true;
-		let canvasState = ref()//存放canvas操作
-		let reverseCanvasState = ref([])//存放canvas操作
-		let normalCanvasState = ref([])//存放canvas操作
-		let isLoadCanvas = false//撤回或者反撤回false为撤回
-		let userlikeGroupId = 0
-		let imgWidth = {} //这是设置画布等宽
-		let submitCanvasContent = null
-        let init = (productData) => {
-			canvasWH.value.height = 100
-            nextTick().then(async () => {
-                let canvasBox = document.querySelector(".generalCanvas .generalCanvas_center");
-				canvas = canvasGeneral.canvasInit(canvasBox,{})
+    let canvas = reactive({});
+    // let canvasDom = ref()
+    let canvasWH = ref({
+      width: 400,
+      height: 100,
+    });
+    let pencilbtnStyle = ref({
+      background: "",
+      width: 0 + "px",
+      height: 0 + "px",
+      display: "none",
+      left: 0 + "px",
+      top: 0 + "px",
+    });
+    let publish = ref();
+    // canvasWH.value.width = [window.innerWidth/2.4]
+    // canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
+    let credits = computed(() => {
+      return store.state.UserHabit.credits.value;
+    });
 
-				document.addEventListener("keydown", setCanvasKeyDown);
-				document.addEventListener("keyup", clearCanvasKeyDown);
-             
-				canvasOnDrop()//开启鼠标到画布事件
-				canvas.on("object:modified", ()=>{
-					updateCanvasState()
-				});
-				canvas.preserveObjectStacking = true;
-				canvas.on("mouse:move", event =>setCanvasMove(event));
-				canvas.on("mouse:down", event=>setCanvasDown(event));
-				canvas.on("mouse:up", event=>setCanvasUp(event));
+    let allBoardData = computed(() => {
+      return store.state.UploadFilesModule.allBoardData;
+    });
+    let isShowMark = ref(false);
+    // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
+    let position = {
+      //设置每个图形位置的初始值
+      x: 0,
+      y: 0,
+      height: 0,
+    };
+    let sketchGrouping = 3; //sketch分组
+    let disposeMoodboardShow = true;
+    let canvasState = ref(); //存放canvas操作
+    let reverseCanvasState = ref([]); //存放canvas操作
+    let normalCanvasState = ref([]); //存放canvas操作
+    let isLoadCanvas = false; //撤回或者反撤回false为撤回
+    let userlikeGroupId = 0;
+    let imgWidth = {}; //这是设置画布等宽
+    let submitCanvasContent = null;
+    let init = (productData) => {
+      canvasWH.value.height = 100;
+      nextTick().then(async () => {
+        let canvasBox = document.querySelector(
+          ".generalCanvas .generalCanvas_center"
+        );
+        canvas = canvasGeneral.canvasInit(canvasBox, {});
 
-				//双击
-				canvas.on("mouse:dblclick", event=>{
-					if(operation.value == 'fold'){
-						foldEnd('Enter')
-					}
-				});
-			
-				pencilbtnStyle.value.background = '#fff'
-				fabric.Object.prototype.cornerSize = 10
-				fabric.Object.prototype.transparentCorners = false 
-				isShowMark.value = true
-			
-				isShowMark.value = false
-				updateCanvasState('')//加载完成后记录一下
-				setOperation('move')
-				submitCanvasContent = setInterval(()=>{
-					let data = setCanvasContent(true)
-					if(data.objects.length == 0){
-						clearTimeout(submitCanvasContent)
-						return
-					}
-					data.canvasHeight = canvasWH.value.height
-					localStorage.setItem('canvasContent',JSON.stringify(data))
-					localStorage.setItem('userlikeGroupId',userlikeGroupId)
-				},3000)
-				if(driver__.value.driver){
-					driverObj__.moveNext()
-				}
-				
-            });
-			
+        document.addEventListener("keydown", setCanvasKeyDown);
+        document.addEventListener("keyup", clearCanvasKeyDown);
+
+        canvasOnDrop(); //开启鼠标到画布事件
+        canvas.on("object:modified", () => {
+          updateCanvasState();
+        });
+        canvas.preserveObjectStacking = true;
+        canvas.on("mouse:move", (event) => setCanvasMove(event));
+        canvas.on("mouse:down", (event) => setCanvasDown(event));
+        canvas.on("mouse:up", (event) => setCanvasUp(event));
+
+        //双击
+        canvas.on("mouse:dblclick", (event) => {
+          if (operation.value == "fold") {
+            foldEnd("Enter");
+          }
+        });
+
+        pencilbtnStyle.value.background = "#fff";
+        fabric.Object.prototype.cornerSize = 10;
+        fabric.Object.prototype.transparentCorners = false;
+        isShowMark.value = true;
+
+        isShowMark.value = false;
+        updateCanvasState(""); //加载完成后记录一下
+        setOperation("move");
+        submitCanvasContent = setInterval(() => {
+          let data = setCanvasContent(true);
+          if (data.objects.length == 0) {
+            clearTimeout(submitCanvasContent);
+            return;
+          }
+          data.canvasHeight = canvasWH.value.height;
+          localStorage.setItem("canvasContent", JSON.stringify(data));
+          localStorage.setItem("userlikeGroupId", userlikeGroupId);
+        }, 3000);
+        if (driver__.value.driver) {
+          driverObj__.moveNext();
+        }
+      });
+    };
+    let deleteObject = () => {
+      if (!canvas.getActiveObjects()) {
+        return;
+      }
+      let target = canvas.getActiveObjects();
+
+      target.forEach((item) => {
+        // var canvas = item.canvas;
+        // canvas.remove(item);
+        canvas.fxRemove(item, {
+          onComplete() {
+            canvas.discardActiveObject(); // 丢弃当前选中的对象
+            canvas.renderAll(); // 重新渲染 Canvas
+          },
+        });
+        canvas.FX_DURATION = 300;
+      });
+      updateCanvasState("remove");
+    };
+    let setImageWidth = (key, img) => {
+      let imgWidth = canvasWH.value.width; //这是设置画布等宽
+      if (
+        disposeMoodboardShow &&
+        key == "disposeMoodboard" &&
+        allBoardData.value?.[key]?.length != 0 &&
+        allBoardData.value?.[key]?.[0] != null
+      ) {
+        //如果是mood 需要判断用户是否点击layout
+        disposeMoodboardShow = false;
+      }
+      if (key == "upImgFiles") {
+        imgWidth = canvasWH.value.width / 4;
+      }
+      if (key == "printboardFiles") {
+        imgWidth = canvasWH.value.width / 8;
+      }
+      if (key == "sketchboardFiles" || key == "moodboardFiles") {
+        imgWidth =
+          (canvasWH.value.width - (sketchGrouping - 1) * 20) / sketchGrouping;
+      }
+      if (key == "likeDesignCollectionList") {
+        if (img) {
+          let imgObj = JSON.parse(JSON.stringify(img));
+          let height = imgObj.height;
+          imgObj.height = (canvasWH.value.width / 4) * 1.8;
+          let heightScale = imgObj.height / height;
+          imgWidth = imgObj.width * heightScale;
+        }
+        // imgWidth =
+
+        // 	(canvasWH.value.width -
+        // 		(likeDesign - 1) * 20) /
+        // 	likeDesign;
+      }
+      return imgWidth;
+    };
+    let setCanvasImage = (img, key, left, top, data) => {
+      // data
+      let imgId = 0;
+      let minioUrl = ""; //表示收藏或者generate
+      let imgUrl = data.imgUrl;
+      if (key == "likeDesignCollectionList") {
+        imgUrl = data.designOutfitUrl;
+        imgWidth[key] = setImageWidth(key, img);
+      }
+
+      // let url = imgUrl.split('?')[0]
+      // var match = url.match(/^(?:https?:\/\/[^\/]+)\/(.*)/);
+      // minioUrl = match[1]
+      const { pathname } = new URL(imgUrl);
+      const result = pathname.slice(1);
+      minioUrl = result;
+      // let id =
+      let proportion = img.height / img.width; //计算图形宽高比例
+      let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
+      img.set({
+        // width: imgWidth[key]/img.width,
+        // height: canvasWH.value.height/img.height,
+        left,
+        top,
+        imgId,
+        minioUrl,
+        scaleX: imgWidth[key] / img.width,
+        scaleY: (img.width * proportion * scaleWH) / img.height,
+        // cornerSize: 10, // 选中时，角的大小为20
+        // transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+        lockRotation: true,
+      });
+    };
+    //关闭画布
+    //设置画布宽高
+    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];
+      } else if (str == "height") {
+        if (position.y + position.height > maxNum) {
+          maxNum = Math.floor(position.y + position.height);
+        }
+      }
+      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({
+      nav: false,
+      tool: false,
+      move: false,
+    });
+    let setCloseNav = (key) => {
+      closeNav.value[key] = !closeNav.value[key];
+      // for (const iterator in closeNav.value) {
+      // 	if(key != iterator){
+      // 		closeNav.value[iterator] = false
+      // 	}
+      // }
+    };
+    let currentType = ref({
+      type: "",
+      data: "",
+    });
+    let onDragstart = (type, imgItem) => {
+      currentType.value.type = type;
+      currentType.value.data = imgItem;
+    };
+    let present = {};
+    let setDragstart = (type, imgItem) => {
+      currentType.value.type = type;
+      present.upScaleChecked = false;
+      present = {};
+      if (imgItem.upScaleChecked) {
+      } else {
+        imgItem.upScaleChecked = true;
+        present = imgItem;
+      }
+      currentType.value.data = imgItem;
+    };
+    let canvasOnDrop = () => {
+      canvas.on("drop", (opt) => {
+        let offset = {
+          left: canvas.getSelectionElement().getBoundingClientRect().left,
+          top: canvas.getSelectionElement().getBoundingClientRect().top,
         };
-		let deleteObject = ()=> {
-				if(!canvas.getActiveObjects()){
-					return
-				}
-				let target = canvas.getActiveObjects()
+        let point = {
+          x: opt.e.x - offset.left,
+          y: opt.e.y - offset.top,
+        };
+        let pointerVpt = canvas.restorePointerVpt(point);
+        switch (currentType.value.type) {
+          case "colorBoards":
+            let rect = setGroup(currentType.value.data);
+            setCanvasColor(pointerVpt.y, pointerVpt.x, rect);
+            break;
+          case "moodboardFiles":
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+          default:
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+        }
+        // 创建完元素，把当前操作的元素类型设置回 null
+        currentType.value.type = null;
+        currentType.value.data = null;
+      });
+    };
+    let setGroup = (data) => {
+      return JSSetGroup(data);
+    };
+    let setCanvasColor = (top, left, rect) => {
+      let group;
+      group = new fabric.Group([rect.color, rect.text, rect.text1], {
+        left,
+        top,
+        width: rect.width,
+        fill: "rgb(255,255,255)",
+        stroke: "#212121",
+        strokeWidth: 1,
+      });
+      canvas.add(group);
+      return group;
+    };
+    // 创建矩形
+    let createImage = async (top, left, key) => {
+      let itemCanvasImg = currentType.value.data.imgUrl;
+      let data = JSON.parse(JSON.stringify(currentType.value.data));
+      if (key == "likeDesignCollectionList") {
+        itemCanvasImg = currentType.value.data.designOutfitUrl;
+      }
+      await new Promise((resolve, reject) => {
+        fabric.Image.fromURL(
+          itemCanvasImg,
+          (img) => {
+            setCanvasImage(img, key, left, top, data); //设置图片
+            canvas.add(img);
+            resolve();
+          },
+          { crossOrigin: "Anonymous" }
+        );
+      });
+      updateCanvasState();
+    };
+    //设置画布监听修改添加事件，用来做撤回功能
+    let updateCanvasState = (str) => {
+      const canvasAsJson = JSON.stringify(canvas.toJSON());
+      if (str == "loadingCompleted") {
+        // reverseCanvasState.value.push(canvasAsJson);
+      }
+      normalCanvasState.value.push(canvasAsJson);
+      if (isLoadCanvas) {
+        reverseCanvasState.value = [];
+        isLoadCanvas = false;
+        canvasState.value = canvasAsJson;
+      }
+    };
+    //撤回
+    let historyState = (str) => {
+      if (str == "reverse" && reverseCanvasState.value.length > 0) {
+        //反撤回
+        let obj = reverseCanvasState.value.pop();
+        // canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+        canvasState.value = obj;
+        normalCanvasState.value.push(obj);
+      } else if (str == "" && normalCanvasState.value.length > 1) {
+        let obj = normalCanvasState.value.pop();
+        canvasState.value =
+          normalCanvasState.value[normalCanvasState.value.length - 1];
+        reverseCanvasState.value.push(obj);
+        isLoadCanvas = true;
+      } else {
+        return;
+      }
+      canvas.loadFromJSON(canvasState.value, () => {});
+    };
 
-				target.forEach((item)=>{
-					// var canvas = item.canvas;
-					// canvas.remove(item);
-					canvas.fxRemove(item, {
-						onComplete(){
-						canvas.discardActiveObject(); // 丢弃当前选中的对象
-						canvas.renderAll(); // 重新渲染 Canvas
-						}
-					})
-					canvas.FX_DURATION = 300
-				})
-				updateCanvasState('remove')
-			}
-		let setImageWidth = (key,img)=>{
-			let imgWidth = canvasWH.value.width; //这是设置画布等宽
-			if (
-				disposeMoodboardShow &&
-				key == "disposeMoodboard" &&
-				allBoardData.value?.[key]?.length != 0 &&
-				allBoardData.value?.[key]?.[0] != null
-			) {
-				//如果是mood 需要判断用户是否点击layout
-				disposeMoodboardShow = false;
-			}
-			if(key == 'upImgFiles'){
-				imgWidth = canvasWH.value.width / 4;
-			}
-			if (key == "printboardFiles") {
-				imgWidth = canvasWH.value.width / 8;
-			}
-			if (key == "sketchboardFiles"||key == 'moodboardFiles') {
-				imgWidth =
-					(canvasWH.value.width -
-						(sketchGrouping - 1) * 20) /
-					sketchGrouping;
-			}
-			if (key == "likeDesignCollectionList") {
-				if(img){
-					let imgObj = JSON.parse(JSON.stringify(img))
-					let height = imgObj.height
-					imgObj.height = canvasWH.value.width / 4 * 1.8
-					let heightScale = imgObj.height / height
-					imgWidth = imgObj.width * heightScale
-				}
-				// imgWidth =
+    //在画布进行画画
+    let operation = ref("move");
+    let operationMode = ref("fill");
+    let textureValue = ref(0); //材质信息
 
-				// 	(canvasWH.value.width -
-				// 		(likeDesign - 1) * 20) /
-				// 	likeDesign;
-			}
-			return imgWidth
-		}
-		let setCanvasImage = (img,key,left,top,data)=>{
-			// data
-			let imgId = 0
-			let minioUrl = ''//表示收藏或者generate
-			let imgUrl = data.imgUrl
-			if (key == "likeDesignCollectionList") {
-				imgUrl = data.designOutfitUrl;
-				imgWidth[key] = setImageWidth(key,img); 
-			}
- 
-			// let url = imgUrl.split('?')[0]
-			// var match = url.match(/^(?:https?:\/\/[^\/]+)\/(.*)/);
-			// minioUrl = match[1]
-			const { pathname } = new URL(imgUrl);
-			const result = pathname.slice(1);
-			minioUrl = result
-			// let id = 
-			let proportion = img.height / img.width; //计算图形宽高比例
-			let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
-			img.set({
-				// width: imgWidth[key]/img.width,
-				// height: canvasWH.value.height/img.height,
-				left,
-				top,
-				imgId,
-				minioUrl,
-				scaleX:
-					imgWidth[key] / img.width,
-				scaleY:(img.width * proportion * scaleWH) / img.height,
-				// cornerSize: 10, // 选中时，角的大小为20
-				// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-				lockRotation: true,
-			});
-		}
-        //关闭画布
-        //设置画布宽高
-        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];
-            }else if(str == 'height'){
-				if(position.y+position.height>maxNum){
-					maxNum = Math.floor(position.y+position.height)
-				}
-			}
-            if (str == "width" && canvasWH.value.width >= maxNum) {
-                canvasWH.value.width = maxNum;
-            } else if (str == "height" && canvasWH.value.height >= maxNum) {
-                canvasWH.value.height = maxNum;
+    let textureValueChange = (value) => {
+      textureValue.value = value;
+      setTexture();
+    };
+    //铅笔颜色 大小
+    let brushworkValue = ref("PencilBrush");
+    let brushworkChange = (value) => {
+      brushworkValue.value = value;
+      setPencil();
+    };
+
+    // let brushwork = ref('')
+    // 监听键盘的 keydown 和 keyup 事件
+    let keyDown = [];
+    let canvasKeyDown = (event) => {
+      if (keyDown.indexOf(event.key) > -1) {
+      } else {
+        keyDown.push(event.code);
+        if (event.key === "Enter" && operation.value == "fold") {
+          foldEnd("Enter");
+        } else if (event.key === "Delete") {
+          deleteObject();
+        } else if (
+          keyDown.indexOf("ControlLeft") > -1 &&
+          keyDown.indexOf("KeyZ") > -1 &&
+          keyDown.indexOf("ShiftLeft") > -1
+        ) {
+          historyState("reverse");
+        } else if (
+          keyDown.indexOf("ControlLeft") > -1 &&
+          keyDown.indexOf("KeyZ") > -1
+        ) {
+          historyState("");
+        } else if (
+          keyDown.indexOf("ControlLeft") > -1 &&
+          keyDown.indexOf("KeyC") > -1
+        ) {
+          copy();
+        } else if (
+          keyDown.indexOf("ControlLeft") > -1 &&
+          keyDown.indexOf("KeyV") > -1
+        ) {
+          paste();
+        }
+      }
+    };
+    let canvasKeyUp = (event) => {
+      keyDown = keyDown.filter(function (item) {
+        return event.code !== item;
+      });
+    };
+    let setCanvasKeyDown = (event) => {
+      document.addEventListener("keydown", canvasKeyDown);
+      document.addEventListener("keyup", canvasKeyUp);
+    };
+    let clearCanvasKeyDown = (pointer) => {
+      if (!pointer?.target) {
+        document.removeEventListener("keydown", canvasKeyDown);
+        document.removeEventListener("keyup", canvasKeyUp);
+      }
+    };
+    let canvasPencilColor = ref("#000000"); //画笔颜色
+    let canvasPencilWidth = ref({});
+    let fontFamily = ref({});
+    let textFontFamilyList = ref([]);
+    let allSelectWidth = ref(-1); //多选或单选的宽度
+    let allSelect = ref([]); //多选或单选的宽度
+    let setOperation = (str) => {
+      operation.value = str;
+      canvas.discardActiveObject(); //取消所有选中边框
+      if (createPatterningIs) {
+        canvas.remove(currentPatterning);
+      }
+      removeSetText();
+      initAligningGuidelines(canvas, false);
+      canvas.remove(polyLineBtn);
+      if (str == "pencil") {
+        setPencil();
+        pencilbtnStyle.value.display = `block`;
+      } else if (str == "move") {
+        JSchangeType(canvas, "init");
+        initAligningGuidelines(canvas, true);
+        setMove();
+        pencilbtnStyle.value.display = `none`;
+      } else if (str == "texture") {
+        setTexture();
+        pencilbtnStyle.value.display = `block`;
+      } else if (str == "eraser") {
+        setEraser();
+        pencilbtnStyle.value.display = `block`;
+      } else if (str == "text") {
+        setMove();
+        setText();
+        JSchangeType(canvas, "init");
+        pencilbtnStyle.value.display = `none`;
+      } else if (str) {
+        pencilbtnStyle.value.display = `none`;
+        canvas.forEachObject((obj) => (obj.selectable = false));
+        canvas.isDrawingMode = false;
+      }
+      setPencilWidth();
+    };
+    let _setAllSelectTime = null;
+    let setAllSelectWidth = () => {
+      clearTimeout(_setAllSelectTime);
+      allSelect.value.forEach((item) => {
+        // item.width = allSelectWidth.value
+        item.scaleX = allSelectWidth.value / item.width;
+        item.scaleY = item.scaleX;
+        item.setCoords();
+      });
+      _setAllSelectTime = setTimeout(() => {
+        updateCanvasState(""); //加载完成后记录一下
+      }, 1500);
+    };
+    let _clipboard = null; // 复制到的内容
+    let copy = () => {
+      //复制
+      var activeObject = canvas.getActiveObject();
+      if (!activeObject) {
+        return;
+      }
+      activeObject.clone(function (cloned) {
+        _clipboard = cloned;
+      });
+    };
+    let paste = () => {
+      //粘贴
+      if (!_clipboard) {
+        return;
+      }
+      _clipboard.clone((clonedObj) => {
+        canvas.discardActiveObject(); // 取消选择
+
+        // 设置新内容的坐标位置
+        clonedObj.set({
+          left: clonedObj.left + 10,
+          top: clonedObj.top + 10,
+          evented: true,
+        });
+
+        if (clonedObj.type === "activeSelection") {
+          // 活动选择需要一个对画布的引用
+          clonedObj.canvas = canvas;
+          clonedObj.forEachObject(function (obj) {
+            canvas.add(obj);
+          });
+
+          clonedObj.setCoords();
+        } else {
+          canvas.add(clonedObj);
+        }
+        _clipboard.top += 10;
+        _clipboard.left += 10;
+        canvas.setActiveObject(clonedObj);
+        canvas.requestRenderAll();
+      });
+      updateCanvasState();
+    };
+    let textureList = ref([]);
+    for (let index = 0; index < 20; index++) {
+      textureList.value.push({
+        value: index,
+        url: `/image/texture/texture${index}.webp`,
+      });
+    }
+    let setTexture = async () => {
+      canvas.isDrawingMode = true; //开启绘画模式
+      let img = await JSSetTexture(textureList.value[textureValue.value].url);
+
+      let patternBrush = new fabric.PatternBrush(canvas);
+      patternBrush.source = img;
+      patternBrush.width = canvasPencilWidth.value[operation.value]
+        ? canvasPencilWidth.value[operation.value]
+        : 20; // 设置画笔大小
+      canvas.freeDrawingBrush = patternBrush;
+    };
+    let setOperationMode = (str) => {
+      operationMode.value = str;
+    };
+    let uploadImage = (event) => {
+      let input = document.querySelector(".uploadImage input");
+      const file = event.target.files[0];
+      setOperation("move");
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          let file = base64ToFile(e.target.result, "upload");
+          let formData = new FormData();
+          formData.append("file", file);
+          let config = {
+            headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
+          };
+          Https.axiosPost(
+            Https.httpUrls.canvasElementUpload,
+            formData,
+            config
+          ).then((rv) => {
+            rv.imgUrl = rv.minioUrl;
+            fabric.Image.fromURL(
+              rv.minioUrl,
+              (img) => {
+                setCanvasImage(
+                  img,
+                  "upImgFiles",
+                  0,
+                  canvas.wrapperEl.parentNode.scrollTop,
+                  rv
+                );
+                canvas.add(img);
+              },
+              { crossOrigin: "Anonymous" }
+            );
+          });
+          input.value = "";
+        };
+        reader.readAsDataURL(file);
+      }
+    };
+    let setLayerIndex = (str) => {
+      //设置优先级
+      var activeObject = canvas.getActiveObject();
+      switch (str) {
+        case "Front":
+          canvas.bringToFront(activeObject); //顶层
+          break;
+        case "Back":
+          canvas.sendToBack(activeObject); //底层
+          break;
+        case "Forward":
+          canvas.bringForward(activeObject);
+          break;
+        case "Backwards":
+          canvas.sendBackwards(activeObject);
+          break;
+      }
+    };
+    let hexToRgba = (hex, alpha) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
+    let brushList = ref(canvasGeneral.pencilList.brushList);
+    let setPencil = () => {
+      let pencil = JSSetPencil(brushworkValue.value, canvas);
+      canvas.isDrawingMode = true; //开启绘画模式
+      canvas.freeDrawingBrush = pencil;
+      canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]
+        ? canvasPencilWidth.value[operation.value]
+        : 20;
+
+      if (
+        brushworkValue.value == "RibbonBrush" ||
+        brushworkValue.value == "LongfurBrush"
+      ) {
+        canvas.freeDrawingBrush.width = 1;
+      }
+      if (brushworkValue.value == "Marking") {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 0.5);
+        // }else if(brushworkValue.value == 'InkBrush'){
+        // 	canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
+      } else {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 1);
+      }
+
+      pencilbtnStyle.value.background = canvasPencilColor.value;
+      canvas.freeDrawingBrush.isEraser = false;
+    };
+
+    let setMove = () => {
+      canvas.isDrawingMode = false;
+      canvas.forEachObject((obj) => (obj.selectable = true));
+    };
+    let setEraser = () => {
+      canvas.isDrawingMode = true;
+      let eraser = new fabric.EraserBrush(canvas);
+      canvas.freeDrawingBrush = eraser;
+      pencilbtnStyle.value.background = "#fff";
+      canvas.requestRenderAll();
+      canvas.freeDrawingBrush.isEraser = true;
+      canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]
+        ? canvasPencilWidth.value[operation.value]
+        : 20;
+    };
+    let createText = {};
+    let setTextFun = (e) => {
+      if (operation.value != "text") {
+        return;
+      }
+      var clickedObject = e.target;
+      if (clickedObject instanceof fabric.Textbox) {
+        createText = clickedObject;
+      } else {
+        var pointer = canvas.getPointer(e.pointer);
+        var x = pointer.x;
+        var y = pointer.y;
+        createText = new fabric.Textbox("", {
+          left: x,
+          top: y,
+          width: 150,
+          fontSize: canvasPencilWidth.value[operation.value]
+            ? canvasPencilWidth.value[operation.value]
+            : 20,
+          fontFamily: fontFamily.value,
+          fill: canvasPencilColor.value,
+        });
+        canvas.add(createText);
+        createText.enterEditing();
+        canvas.setActiveObject(createText).renderAll();
+        operation.value = "";
+        removeSetText();
+      }
+    };
+    let setText = () => {
+      canvas.on("mouse:down", setTextFun);
+      // if(isMoible()){
+      // 	canvas.on('mouse:down',setTextFun)
+      // }else{
+      // 	canvas.on('mouse:dblclick',setTextFun)
+      // }
+    };
+    let removeSetText = () => {
+      canvas.off("mouse:down", setTextFun);
+      // if(isMoible()){
+      // 	canvas.off('mouse:down',setTextFun)
+      // }else{
+      // 	canvas.off('mouse:dblclick',setTextFun)
+      // }
+    };
+
+    let setTimeOut = {
+      color: null,
+      width: null,
+      colorHistory: null,
+    }; //给切换颜色设置防抖
+    let colorHistoryList = ref(["rgb(0, 0, 0)"]);
+    let setColorHistory = (value) => {
+      canvasPencilColor.value = value;
+      pencilColor();
+    };
+    let pencilColor = () => {
+      if (createText.set) {
+        setFontFamily();
+        return;
+      }
+      // brushIndicator.fill = canvasPencilColor.value;
+      if (canvas.freeDrawingBrush.isEraser) {
+      } else {
+        pencilbtnStyle.value.background = canvasPencilColor.value;
+      }
+      if (brushworkValue.value == "Marking") {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 0.5);
+      } else if (brushworkValue.value == "InkBrush") {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 0.2);
+      } else {
+        canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value, 1);
+      }
+    };
+    let setPencilColor = () => {
+      //切换颜色给铅笔设置颜色
+      clearTimeout(setTimeOut.color);
+      clearTimeout(setTimeOut.colorHistory);
+      setTimeOut.color = setTimeout(() => {
+        pencilColor();
+      }, 200);
+      setTimeOut.colorHistory = setTimeout(() => {
+        colorHistoryList.value.push(canvasPencilColor.value);
+      }, 1000);
+    };
+    let setPencilWidth = () => {
+      //切换颜色给铅笔设置颜色
+      clearTimeout(setTimeOut.width);
+      canvasPencilWidth.value[operation.value] = Number(
+        canvasPencilWidth.value[operation.value]
+          ? canvasPencilWidth.value[operation.value]
+          : 20
+      );
+      setTimeOut.width = setTimeout(() => {
+        if (
+          brushworkValue.value == "LongfurBrush" ||
+          brushworkValue.value == "RibbonBrush"
+        ) {
+          canvas.freeDrawingBrush.width = 1;
+        } else {
+          canvas.freeDrawingBrush.width =
+            canvasPencilWidth.value[operation.value];
+        }
+        pencilbtnStyle.value.height =
+          canvasPencilWidth.value[operation.value] + "px";
+        pencilbtnStyle.value.width =
+          canvasPencilWidth.value[operation.value] + "px";
+        // setPencil()
+      }, 300);
+    };
+    let downPoint = null; //鼠标按下位置
+    let upPoint = null; //鼠标抬起位置
+    let currentPatterning = null; //临时图形
+    let polyLineBtn = null;
+    let createPatterningIs = false;
+    let clearPatterning = () => {
+      if (createPatterningIs) {
+        canvas.remove(currentPatterning);
+      }
+      currentPatterning = null;
+      canvas.remove(polyLineBtn);
+      updateCanvasState();
+    };
+    //设置再画布上移动
+    let setCanvasMove = (event) => {
+      var pointer = canvas.getPointer(event.e);
+      if (canvas.isDrawingMode) {
+        canvas.setCursor("none");
+      } else {
+        if (createPatterningIs) {
+          JScanvasMouseMove(
+            operation.value,
+            event,
+            currentPatterning,
+            downPoint,
+            keyDown
+          );
+        }
+      }
+      let canvasBox = document.querySelector(
+        ".generalCanvas .canvas-container"
+      );
+      const rect = canvasBox.getBoundingClientRect();
+      const parentRect = canvasBox.parentElement.getBoundingClientRect();
+      let parentX = rect.left - parentRect.left;
+      let parentY = rect.top - parentRect.top;
+      pencilbtnStyle.value.left = parentX + pointer.x + "px";
+      pencilbtnStyle.value.top =
+        parentY + canvasBox.parentElement.scrollTop + pointer.y + "px";
+      canvas.requestRenderAll();
+    };
+    //设置再画布上按下
+    let setCanvasDown = (event) => {
+      //设置移动端按下添加元素
+
+      if (isMoible && present.upScaleChecked) {
+        present.upScaleChecked = false;
+        present = {};
+        let pointerVpt = canvas.restorePointerVpt(event.pointer);
+        switch (currentType.value.type) {
+          case "colorBoards":
+            let rect = setGroup(currentType.value.data);
+            setCanvasColor(pointerVpt.y, pointerVpt.x, rect);
+            break;
+          case "moodboardFiles":
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+          default:
+            createImage(pointerVpt.y, pointerVpt.x, currentType.value.type);
+            break;
+        }
+        // 创建完元素，把当前操作的元素类型设置回 null
+        currentType.value.type = null;
+        currentType.value.data = null;
+      }
+      downPoint = event.absolutePointer;
+      let arr = ["rect", "line", "circle", "triangle", "ellipse", "fold"];
+      if (arr.indexOf(operation.value) > -1) {
+        JSchangeType(canvas, operation.value);
+        createPatterningIs = true;
+        if (currentPatterning && operation.value == "fold") {
+          canvas.skipTargetFind = false;
+          currentPatterning.points.push({
+            x: downPoint.x,
+            y: downPoint.y,
+          });
+          // currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+        } else {
+          currentPatterning = JScanvasMouseDown(
+            operation.value,
+            event,
+            canvasPencilWidth.value[operation.value]
+              ? canvasPencilWidth.value[operation.value]
+              : 20,
+            currentPatterning
+          );
+          canvas.add(currentPatterning);
+          canvas.bringToFront(currentPatterning); //设置优先级最高
+          if (operation.value == "fold") {
+            polyLineBtn = JScreateCheck(event);
+            polyLineBtn.on("mousedown", foldEnd);
+            canvas.add(polyLineBtn);
+          }
+        }
+      } else {
+        var clickedObject = event.target;
+        if (
+          clickedObject instanceof fabric.Textbox &&
+          operation.value != "text"
+        ) {
+          textDataShow.value = true;
+          createText = clickedObject;
+          setTextData(clickedObject);
+        } else {
+          textDataShow.value = false;
+          createText = {};
+        }
+        createPatterningIs = false;
+      }
+    };
+    let foldEnd = (key) => {
+      canvas.skipTargetFind = true;
+      let points = currentPatterning.points;
+      if (key == "Enter") {
+      } else {
+        points.pop();
+      }
+      points.pop();
+      canvas.remove(currentPatterning);
+      let polyline = new fabric.Polyline(points, {
+        fill:
+          operationMode.value == "fill"
+            ? canvasPencilColor.value
+            : "transparent",
+        stroke: canvasPencilColor.value,
+        strokeWidth: canvasPencilWidth.value[operation.value]
+          ? canvasPencilWidth.value[operation.value]
+          : 20,
+        selection: false,
+      });
+      canvas.add(polyline);
+      // currentPatterning.set({stroke: canvasPencilColor.value})
+      createPatterningIs = false;
+      clearPatterning(); //临时图形置为空并且添加撤回对象里面
+      setOperation("move");
+    };
+    //设置再画布上抬起
+    let setCanvasUp = (event) => {
+      upPoint = event.absolutePointer;
+      if (canvas.isDrawingMode) {
+        setTimeout(() => {
+          // pencilbtnStyle.value.display = `none`
+          updateCanvasState();
+        }, 100);
+      } else {
+        // event.target && (event.target.bringToFront())//设置优先级
+      }
+      var selectedObjects = canvas.getActiveObjects(); //获取多选选中的内容
+      if (selectedObjects.length >= 1) {
+        allSelect.value = selectedObjects;
+        // allSelectWidth.value = 0
+        allSelectWidth.value = (
+          selectedObjects[0].width * selectedObjects[0].scaleX
+        ).toFixed(0);
+      } else {
+        allSelectWidth.value = -1;
+      }
+      if (createPatterningIs) {
+        switch (operation.value) {
+          case "line":
+            currentPatterning.set({ stroke: canvasPencilColor.value });
+            break;
+          case "fold":
+            // currentPatterning.set({stroke: canvasPencilColor.value})
+            break;
+          default:
+            if (operationMode.value == "fill") {
+              currentPatterning.set({ fill: canvasPencilColor.value });
+            } else if (operationMode.value == "border") {
+              currentPatterning.set({
+                fill: "transparent",
+                stroke: canvasPencilColor.value,
+                strokeWidth: canvasPencilWidth.value[operation.value]
+                  ? canvasPencilWidth.value[operation.value]
+                  : 20,
+              });
             }
-            canvas.setHeight(canvasWH.value.height);
-            canvas.setWidth(canvasWH.value.width);
-        };
-
-		let closeNav = ref({
-			nav:false,
-			tool:false,
-			move:false,
-		})
-		let setCloseNav = (key)=>{
-			closeNav.value[key] = !closeNav.value[key]
-			// for (const iterator in closeNav.value) {
-			// 	if(key != iterator){
-			// 		closeNav.value[iterator] = false
-			// 	}
-			// }
-		}
-		let currentType = ref({
-			type:'',
-			data:'',
-		})
-		let onDragstart = (type,imgItem)=>{
-			currentType.value.type = type
-			currentType.value.data = imgItem
-		}
-		let present = {}
-		let setDragstart = (type,imgItem)=>{
-			currentType.value.type = type
-			present.upScaleChecked = false
-			present = {}
-			if(imgItem.upScaleChecked){
-			}else{
-				imgItem.upScaleChecked = true
-				present = imgItem
-			}
-			currentType.value.data = imgItem
-		}
-		let canvasOnDrop = ()=>{
-			canvas.on('drop', (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.type) {
-					case 'colorBoards':
-						let rect = setGroup(currentType.value.data)
-						setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
-					break
-					case 'moodboardFiles':
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-					default :
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-				}
-				// 创建完元素，把当前操作的元素类型设置回 null
-				currentType.value.type = null
-				currentType.value.data = null
-
-			})
-		}
-		let setGroup = (data)=>{
-			
-			
-
-			return JSSetGroup(data)
-		}
-		let setCanvasColor = (top,left,rect)=>{
-			let group
-			group = new fabric.Group([rect.color,rect.text,rect.text1],{
-				left,
-				top,
-				width: rect.width,
-				fill: "rgb(255,255,255)",
-				stroke: "#212121",
-				strokeWidth: 1,
-			});
-			canvas.add(group);
-			return group
-		}
-		// 创建矩形
-		let createImage = async (top, left,key)=> {
-			let itemCanvasImg = currentType.value.data.imgUrl
-			let data = JSON.parse(JSON.stringify(currentType.value.data))
-			if(key == 'likeDesignCollectionList'){
-				itemCanvasImg = currentType.value.data.designOutfitUrl;
-			}
-			await new Promise((resolve,reject)=>{
-				fabric.Image.fromURL(itemCanvasImg,(img) => {
-					setCanvasImage(img,key,left,top,data)//设置图片
-					canvas.add(img);
-					resolve()
-				},{ crossOrigin: "Anonymous" });
-			})
-			updateCanvasState()
-		}
-		//设置画布监听修改添加事件，用来做撤回功能
-		let updateCanvasState = (str) =>{
-				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				if(str == 'loadingCompleted'){
-					// reverseCanvasState.value.push(canvasAsJson);
-				}
-			normalCanvasState.value.push(canvasAsJson);
-			if (isLoadCanvas) {
-				reverseCanvasState.value = []
-				isLoadCanvas = false;
-				canvasState.value = canvasAsJson
-			}
-		}
-		//撤回
-		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				let obj = reverseCanvasState.value.pop()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-				canvasState.value = obj 
-				normalCanvasState.value.push(obj);
-			}else if(str == '' && normalCanvasState.value.length > 1){
-				let obj = normalCanvasState.value.pop()
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
-				reverseCanvasState.value.push(obj);
-				isLoadCanvas = true;
-			}else{
-				return
-			}
-			canvas.loadFromJSON(canvasState.value, () => {});
-		}
-		
-		//在画布进行画画
-		let operation = ref('move')
-		let operationMode = ref('fill')
-		let textureValue = ref(0)//材质信息
-
-		let textureValueChange = (value)=>{
-			textureValue.value = value
-			setTexture()
-		}
-		//铅笔颜色 大小
-		let brushworkValue = ref('PencilBrush')
-		let brushworkChange = (value)=>{
-			brushworkValue.value = value
-			setPencil()
-		}
-
-		// let brushwork = ref('')
-		// 监听键盘的 keydown 和 keyup 事件
-		let keyDown = []
-		let canvasKeyDown = (event) => {
-			if(keyDown.indexOf(event.key)>-1){
-			}else{
-				keyDown.push(event.code)
-				if(event.key === 'Enter' && operation.value == 'fold'){
-					foldEnd('Enter')
-				}else if(event.key === 'Delete'){
-					deleteObject()
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
-					historyState('reverse')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
-					historyState('')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyC') > -1){
-					copy()
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyV') > -1){
-					paste()
-				}
-			}
-		}
-		let canvasKeyUp = (event) =>{
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-			}
-		let setCanvasKeyDown = (event)=>{
-			document.addEventListener('keydown',canvasKeyDown);
-			document.addEventListener('keyup', canvasKeyUp);
-		}
-		let clearCanvasKeyDown = (pointer)=>{
-			if(!pointer?.target){
-				document.removeEventListener('keydown',canvasKeyDown);
-				document.removeEventListener('keyup', canvasKeyUp);
-			}
-		}
-		let canvasPencilColor = ref('#000000')//画笔颜色
-		let canvasPencilWidth = ref({
-		})
-		let fontFamily = ref({})
-		let textFontFamilyList = ref([])
-		let allSelectWidth = ref(-1)//多选或单选的宽度
-		let allSelect = ref([])//多选或单选的宽度
-		let setOperation = (str)=>{
-			operation.value = str
-			canvas.discardActiveObject();//取消所有选中边框
-			if(createPatterningIs){
-				canvas.remove(currentPatterning)
-			}
-			removeSetText()
-			initAligningGuidelines(canvas,false)
-			canvas.remove(polyLineBtn)
-			if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'move'){
-				JSchangeType(canvas,'init')
-				initAligningGuidelines(canvas,true)
-				setMove()
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'texture'){
-				setTexture()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'eraser'){
-				setEraser()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'text'){
-				setMove()
-				setText()
-				JSchangeType(canvas,'init')
-				pencilbtnStyle.value.display = `none`
-			}else if(str){
-				pencilbtnStyle.value.display = `none`
-				canvas.forEachObject((obj) =>obj.selectable = false);
-				canvas.isDrawingMode = false
-			}
-			setPencilWidth()
-		}
-		let _setAllSelectTime = null
-		let setAllSelectWidth = ()=>{
-			clearTimeout(_setAllSelectTime)
-			allSelect.value.forEach((item)=>{
-				// item.width = allSelectWidth.value
-				item.scaleX = allSelectWidth.value/item.width
-				item.scaleY = item.scaleX
-				item.setCoords()
-			})
-			_setAllSelectTime = setTimeout(() => {
-				updateCanvasState('')//加载完成后记录一下
-			}, 1500);
-		}
-		let _clipboard  = null // 复制到的内容
-		let copy = () => {//复制
-			var activeObject = canvas.getActiveObject();
-			if(!activeObject){
-				return
-			}
-			activeObject.clone(function(cloned) {
-				_clipboard = cloned;
-			})
-		}
-		let paste = () => {//粘贴
-			if(!_clipboard){
-				return
-			}
-			_clipboard.clone(clonedObj => {
-				canvas.discardActiveObject() // 取消选择
-
-				// 设置新内容的坐标位置
-				clonedObj.set({
-						left: clonedObj.left + 10,
-						top: clonedObj.top + 10,
-						evented: true
-					})
-
-				if (clonedObj.type === 'activeSelection') {
-						// 活动选择需要一个对画布的引用
-						clonedObj.canvas = canvas;
-						clonedObj.forEachObject(function(obj) {
-							canvas.add(obj)
-						})
-
-						clonedObj.setCoords()
-					} else {
-						canvas.add(clonedObj)
-					}
-					_clipboard.top += 10
-					_clipboard.left += 10
-					canvas.setActiveObject(clonedObj)
-					canvas.requestRenderAll()
-			})
-			updateCanvasState()
-		}
-		let textureList = ref([])
-		for (let index = 0; index < 20; index++) {
-			textureList.value.push({value:index,url:`/image/texture/texture${index}.webp`})
-		}
-		let setTexture = async ()=>{
-			canvas.isDrawingMode = true//开启绘画模式
-			let img = await JSSetTexture(textureList.value[textureValue.value].url)
-			
-			let patternBrush = new fabric.PatternBrush(canvas) 
-			patternBrush.source = img 
-			patternBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20; // 设置画笔大小 
-			canvas.freeDrawingBrush = patternBrush 
-		}
-		let setOperationMode = (str) =>{
-			operationMode.value = str
-		}
-		let uploadImage = (event)=>{
-			let input = document.querySelector('.uploadImage input')
-			const file = event.target.files[0];
-			setOperation('move')
-			if (file) {
-				const reader = new FileReader();
-				reader.onload = (e) => {
-					let file = base64ToFile(e.target.result,'upload')
-					let formData = new FormData();
-					formData.append("file", file);
-					let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-					Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
-						rv.imgUrl = rv.minioUrl
-						fabric.Image.fromURL(rv.minioUrl,(img) => {
-							setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,rv)
-							canvas.add(img);
-						},{ crossOrigin: "Anonymous" })
-					})
-					input.value = ''
-				};
-				reader.readAsDataURL(file);
-			}
-		}
-		let setLayerIndex = (str) =>{//设置优先级
-			var activeObject = canvas.getActiveObject();
-			switch (str) {
-				case 'Front':
-					canvas.bringToFront(activeObject)//顶层
-				break
-				case 'Back':
-					canvas.sendToBack(activeObject)//底层
-				break
-				case 'Forward':
-					canvas.bringForward(activeObject)
-				break
-				case 'Backwards':
-					canvas.sendBackwards(activeObject)
-				break
-			}
-		}
-		let hexToRgba=(hex, alpha)=> {
-			const r = parseInt(hex.slice(1, 3), 16);
-			const g = parseInt(hex.slice(3, 5), 16);
-			const b = parseInt(hex.slice(5, 7), 16);
-			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-		}
-		let brushList = ref(canvasGeneral.pencilList.brushList)
-		let setPencil =()=>{
-			let pencil = JSSetPencil(brushworkValue.value,canvas)
-			canvas.isDrawingMode = true//开启绘画模式
-            canvas.freeDrawingBrush = pencil
-			canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
-			
-			if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
-				canvas.freeDrawingBrush.width = 1;
-			}
-			if(brushworkValue.value == 'Marking'){
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
-			// }else if(brushworkValue.value == 'InkBrush'){
-			// 	canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
-			}else{
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
-			}
-
-			pencilbtnStyle.value.background = canvasPencilColor.value
-			canvas.freeDrawingBrush.isEraser = false
-
-		}
-		
-		let setMove = () =>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			pencilbtnStyle.value.background = '#fff'
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
-		}
-		let createText = {}
-		let setTextFun = (e)=>{
-			if(operation.value != 'text'){
-				return
-			}
-			var clickedObject = e.target;
-			if (clickedObject instanceof fabric.Textbox) {
-				createText = clickedObject
-			}else{
-				var pointer = canvas.getPointer(e.pointer);
-				var x = pointer.x;
-				var y = pointer.y;
-				createText = new fabric.Textbox('', {
-					left: x,
-					top: y,
-					width: 150,
-					fontSize: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
-					fontFamily:fontFamily.value,
-					fill:canvasPencilColor.value,
-
-				})
-				canvas.add(createText)
-				createText.enterEditing();
-				canvas.setActiveObject(createText).renderAll();
-				operation.value = ''
-				removeSetText()
-			}
-			
-		}
-		let setText = ()=>{
-				canvas.on('mouse:down',setTextFun)
-			// if(isMoible()){
-			// 	canvas.on('mouse:down',setTextFun)
-			// }else{
-			// 	canvas.on('mouse:dblclick',setTextFun)
-			// }
-		}
-		let removeSetText = ()=>{
-				canvas.off('mouse:down',setTextFun)
-			// if(isMoible()){
-			// 	canvas.off('mouse:down',setTextFun)
-			// }else{
-			// 	canvas.off('mouse:dblclick',setTextFun)
-			// }
-		}
-		
-		let setTimeOut = {
-			color:null,
-			width:null,
-			colorHistory:null,
-		}//给切换颜色设置防抖
-		let colorHistoryList = ref(['rgb(0, 0, 0)'])
-		let setColorHistory = (value)=>{
-			canvasPencilColor.value = value
-			pencilColor()
-		}
-		let pencilColor = ()=>{
-			if(createText.set){
-				setFontFamily()
-				return
-			}
-			// brushIndicator.fill = canvasPencilColor.value;
-			if(canvas.freeDrawingBrush.isEraser){
-			}else{
-				pencilbtnStyle.value.background = canvasPencilColor.value
-			}
-			if(brushworkValue.value == 'Marking'){
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
-			}else if(brushworkValue.value == 'InkBrush'){
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
-			}else{
-				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
-			}
-		}
-		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.color)
-			clearTimeout(setTimeOut.colorHistory)
-			setTimeOut.color = setTimeout(()=>{
-				pencilColor()
-			},200)
-			setTimeOut.colorHistory = setTimeout(()=>{
-				colorHistoryList.value.push(canvasPencilColor.value)
-			},1000)
-		}
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.width)
-			canvasPencilWidth.value[operation.value] = Number(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)
-			setTimeOut.width = setTimeout(()=>{
-				if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){
-					canvas.freeDrawingBrush.width = 1;
-				}else{
-					canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value];
-				}
-				pencilbtnStyle.value.height = canvasPencilWidth.value[operation.value]+'px'
-				pencilbtnStyle.value.width = canvasPencilWidth.value[operation.value]+'px'
-				// setPencil()
-			},300)
-		}
-		let downPoint = null;//鼠标按下位置
-		let upPoint = null;//鼠标抬起位置
-		let currentPatterning = null//临时图形
-		let polyLineBtn = null
-		let createPatterningIs = false
-		let clearPatterning = () =>{
-			if(createPatterningIs){
-				canvas.remove(currentPatterning)
-			}
-			currentPatterning = null
-			canvas.remove(polyLineBtn)
-			updateCanvasState()
-		}
-		//设置再画布上移动 
-		let setCanvasMove = (event)=>{
-
-			var pointer = canvas.getPointer(event.e);
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-				
-			}else{
-                if(createPatterningIs){
-                    JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
-                }
-            }
-			let canvasBox = document.querySelector(".generalCanvas .canvas-container");
-			const rect = canvasBox.getBoundingClientRect();
-			const parentRect = canvasBox.parentElement.getBoundingClientRect();
-			let parentX = rect.left - parentRect.left
-			let parentY = rect.top - parentRect.top
-			pencilbtnStyle.value.left = parentX + pointer.x+'px'
-			pencilbtnStyle.value.top =  parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
-			canvas.requestRenderAll()
-		}
-		//设置再画布上按下
-		let setCanvasDown = (event)=>{
-			//设置移动端按下添加元素
-			
-			if(isMoible && present.upScaleChecked){
-				present.upScaleChecked = false
-				present = {}
-				let pointerVpt = canvas.restorePointerVpt(event.pointer)
-				switch (currentType.value.type) {
-					case 'colorBoards':
-						let rect = setGroup(currentType.value.data)
-						setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
-					break
-					case 'moodboardFiles':
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-					default :
-					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
-					break
-				}
-				// 创建完元素，把当前操作的元素类型设置回 null
-				currentType.value.type = null
-				currentType.value.data = null
-			}
-			downPoint = event.absolutePointer
-			let arr = ['rect','line','circle','triangle','ellipse','fold']
-			if(arr.indexOf(operation.value) > -1){
-				JSchangeType(canvas,operation.value)
-				createPatterningIs = true
-				if(currentPatterning && operation.value == 'fold'){
-					canvas.skipTargetFind = false
-					currentPatterning.points.push({
-						x: downPoint.x,
-						y: downPoint.y
-					})
-					// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
-				}else{
-					currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,currentPatterning)
-					canvas.add(currentPatterning)
-					canvas.bringToFront(currentPatterning);//设置优先级最高
-					if(operation.value == 'fold'){
-						polyLineBtn = JScreateCheck(event)
-						polyLineBtn.on('mousedown',foldEnd)
-						canvas.add(polyLineBtn)
-					}
-				}
-			}else{
-				var clickedObject = event.target;
-				if (clickedObject instanceof fabric.Textbox && operation.value != 'text') {
-					textDataShow.value = true
-					createText = clickedObject
-					setTextData(clickedObject)
-				}else{
-					textDataShow.value = false
-					createText = {}
-				}
-				createPatterningIs = false
-			}
-		}
-		let foldEnd = (key)=>{
-			canvas.skipTargetFind = true
-			let points = currentPatterning.points
-			if(key == 'Enter'){
-			}else{
-				points.pop()
-			}
-			points.pop()
-			canvas.remove(currentPatterning)
-			let polyline = new fabric.Polyline(points, {
-				fill: operationMode.value == 'fill'? canvasPencilColor.value : 'transparent',
-				stroke: canvasPencilColor.value,
-				strokeWidth:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
-				selection:false,
-			})
-			canvas.add(polyline)
-			// currentPatterning.set({stroke: canvasPencilColor.value})
-			createPatterningIs = false
-			clearPatterning()//临时图形置为空并且添加撤回对象里面
-			setOperation('move')
-		}
-		//设置再画布上抬起
-		let setCanvasUp = (event)=>{
-			upPoint = event.absolutePointer
-			if(canvas.isDrawingMode){
-				setTimeout(() => {
-					// pencilbtnStyle.value.display = `none`
-					updateCanvasState()
-				}, 100);
-			}else{
-				// event.target && (event.target.bringToFront())//设置优先级
-			}
-			var selectedObjects = canvas.getActiveObjects();//获取多选选中的内容
-			if (selectedObjects.length >= 1) {
-				allSelect.value = selectedObjects
-				// allSelectWidth.value = 0
-				allSelectWidth.value = (selectedObjects[0].width * selectedObjects[0].scaleX).toFixed(0)
-			}else{
-				allSelectWidth.value = -1
-			}
-			if(createPatterningIs){
-				
-				switch (operation.value) {
-					case 'line':
-						currentPatterning.set({stroke: canvasPencilColor.value})
-					break
-					case 'fold':
-						// currentPatterning.set({stroke: canvasPencilColor.value})
-					break
-					default :
-						if(operationMode.value == 'fill'){
-							currentPatterning.set({fill: canvasPencilColor.value})
-						}else if (operationMode.value == 'border'){
-							currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20})
-						}
-						if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
-							canvas.remove(currentPatterning)
-						}
-					break
-				}
-				if(operation.value == 'fold'){
-					canvas.forEachObject((obj) =>obj.selectable = false);
-					canvas.bringToFront(polyLineBtn);//设置优先级最高
-				}else if(operation.value){
-					createPatterningIs = false
-					clearPatterning()//临时图形置为空并且添加撤回对象里面
-					canvas.renderAll();
-					setOperation('move')
-				}
-			}
-		}
-		let toSvg = ()=>{
-			// console.log(canvas.toSvg());
-		}
-		let setCanvasContent = (isSaveImg)=>{
-			var json = canvas.toJSON(['imgId','minioUrl']);
-			// console.log(JSON.stringify(json));
-			if(!isSaveImg){
-				json.objects.forEach(item=>{
-					if(item.type == 'image'){
-						delete item.src
-					}
-				})
-			}
-			return json
-		}
-		let textDataShow = ref(false)
-		let setTextData = (obj)=>{
-			fontFamily.value = obj.fontFamily
-			canvasPencilWidth.value['text'] = obj.fontSize
-			canvasPencilColor.value = obj.fill
-		}
-		let setFontFamily = ()=>{
-			if(createText.set){
-				createText.set({
-					fontFamily:fontFamily.value,
-					fontSize:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
-					fill:canvasPencilColor.value,
-				})
-				canvas.renderAll();
-			}
-		}
-        onMounted(() => {
-			let arr = canvasGeneral.pencilList.textFontFamilyList
-			textFontFamilyList.value = arr
-			fontFamily.value = arr[0].value
-			init()
-		});
-		onBeforeUnmount(()=>{
-			canvasGeneral.canvasClear()
-		})
-        return {
-			toSvg,
-			t,
-			toSvg,
-            canvasWH,//画布初始宽高
-			pencilbtnStyle,//笔触按钮
-			publish,//发布作品广场
-			credits,//积分 用来判断HD导出积分是否够用
-            init,//首页点击导出后初始化
-            setMaxInput,//设置画布宽高
-            isShowMark,//加载遮罩
-            allBoardData,//选择画布所有内容
-			closeNav,//导航展开或者收起来状态
-			setCloseNav,//给图片导航或者工具收起来或者展开
-			onDragstart,//拖拽函数
-			setDragstart,//的移动端拖拽改为按下
-			historyState,//执行撤回或者反撤回
-			operation,//设置当前鼠标状态绘画或者矩形或者移动
-			operationMode,//设置矩形是边框还是填充
-			setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
-			setOperationMode,//设置矩形是边框还是填充方法
-			uploadImage,//上传图帕
-			setLayerIndex,//设置选中元素的层级
-			brushList,//笔触列表
-			textureList,//材质列表
-			canvasPencilColor,//input选择颜色
-			canvasPencilWidth,//input选择宽度
-			setAllSelectWidth,//多选设置宽度
-			allSelectWidth,//多选设置宽度的值
-			colorHistoryList,//历史颜色
-			setColorHistory,//设置历史颜色
-			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
-			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
-			brushworkChange,//切换笔触的回调
-			textureValueChange,//切换材质信息
-			brushworkValue,//当前笔触
-			textureValue,//当前材质
-			textFontFamilyList,
-			fontFamily,
-			textDataShow,
-			setFontFamily,
-        };
+            if (JSON.stringify(downPoint) == JSON.stringify(upPoint)) {
+              canvas.remove(currentPatterning);
+            }
+            break;
+        }
+        if (operation.value == "fold") {
+          canvas.forEachObject((obj) => (obj.selectable = false));
+          canvas.bringToFront(polyLineBtn); //设置优先级最高
+        } else if (operation.value) {
+          createPatterningIs = false;
+          clearPatterning(); //临时图形置为空并且添加撤回对象里面
+          canvas.renderAll();
+          setOperation("move");
+        }
+      }
+    };
+    let toSvg = () => {
+      // console.log(canvas.toSvg());
+    };
+    let setCanvasContent = (isSaveImg) => {
+      var json = canvas.toJSON(["imgId", "minioUrl"]);
+      // console.log(JSON.stringify(json));
+      if (!isSaveImg) {
+        json.objects.forEach((item) => {
+          if (item.type == "image") {
+            delete item.src;
+          }
+        });
+      }
+      return json;
+    };
+    let textDataShow = ref(false);
+    let setTextData = (obj) => {
+      fontFamily.value = obj.fontFamily;
+      canvasPencilWidth.value["text"] = obj.fontSize;
+      canvasPencilColor.value = obj.fill;
+    };
+    let setFontFamily = () => {
+      if (createText.set) {
+        createText.set({
+          fontFamily: fontFamily.value,
+          fontSize: canvasPencilWidth.value[operation.value]
+            ? canvasPencilWidth.value[operation.value]
+            : 20,
+          fill: canvasPencilColor.value,
+        });
+        canvas.renderAll();
+      }
+    };
+    onMounted(() => {
+      let arr = canvasGeneral.pencilList.textFontFamilyList;
+      textFontFamilyList.value = arr;
+      fontFamily.value = arr[0].value;
+      init();
+    });
+    onBeforeUnmount(() => {
+      canvasGeneral.canvasClear();
+    });
+    return {
+      toSvg,
+      t,
+      toSvg,
+      canvasWH, //画布初始宽高
+      pencilbtnStyle, //笔触按钮
+      publish, //发布作品广场
+      credits, //积分 用来判断HD导出积分是否够用
+      init, //首页点击导出后初始化
+      setMaxInput, //设置画布宽高
+      isShowMark, //加载遮罩
+      allBoardData, //选择画布所有内容
+      closeNav, //导航展开或者收起来状态
+      setCloseNav, //给图片导航或者工具收起来或者展开
+      onDragstart, //拖拽函数
+      setDragstart, //的移动端拖拽改为按下
+      historyState, //执行撤回或者反撤回
+      operation, //设置当前鼠标状态绘画或者矩形或者移动
+      operationMode, //设置矩形是边框还是填充
+      setOperation, //设置当前鼠标状态绘画或者矩形或者移动方法
+      setOperationMode, //设置矩形是边框还是填充方法
+      uploadImage, //上传图帕
+      setLayerIndex, //设置选中元素的层级
+      brushList, //笔触列表
+      textureList, //材质列表
+      canvasPencilColor, //input选择颜色
+      canvasPencilWidth, //input选择宽度
+      setAllSelectWidth, //多选设置宽度
+      allSelectWidth, //多选设置宽度的值
+      colorHistoryList, //历史颜色
+      setColorHistory, //设置历史颜色
+      setPencilColor, //切换颜色执行函数 给当前矩形或者笔触设置颜色
+      setPencilWidth, //切换宽度执行函数 给当前矩形或者笔触设置宽度
+      brushworkChange, //切换笔触的回调
+      textureValueChange, //切换材质信息
+      brushworkValue, //当前笔触
+      textureValue, //当前材质
+      textFontFamilyList,
+      fontFamily,
+      textDataShow,
+      setFontFamily,
+    };
+  },
+  data(prop) {
+    return {
+      isMoible: isMoible(),
+    };
+  },
+  computed: {
+    setGradient() {
+      return (gradient) => {
+        let gradientStr = "";
+        gradient.gradientList.sort((a, b) => {
+          let aArr = a.left.split("%")[0];
+          let bArr = b.left.split("%")[0];
+          return aArr - bArr;
+        });
+        gradient.gradientList.forEach((item, index) => {
+          let str = ",";
+          if (gradient.gradientList.length == index + 1) str = "";
+          gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`;
+        });
+        return `${gradientStr}`;
+      };
     },
-    data(prop) {
-        return {
-			isMoible:isMoible()
-		};
-    },
-	computed: {
-		setGradient(){
-			return (gradient)=>{
-				let gradientStr = ''
-				gradient.gradientList.sort((a, b) => {
-					let aArr = a.left.split('%')[0]
-					let bArr = b.left.split('%')[0]
-					return aArr - bArr;
-				});
-				gradient.gradientList.forEach((item,index)=>{
-					let str = ','
-					if(gradient.gradientList.length == index+1)str = ''
-					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+  },
+  watch: {},
+  mounted() {},
 
-				})
-				return `${gradientStr}`
-			}
-			
-		}
-	},
-    watch: {
-      
-    },
-    mounted() {},
-
-    methods: {
-		
-	},
+  methods: {},
 });
 </script>
 <style lang="less" scoped>
-
 .generalCanvas {
-	flex: 1;
-	overflow-x: hidden;
-	display: flex;
-	margin-top: 2rem;
-	justify-content: space-between;
-	flex-direction: column;
-	flex: 1;
-// height: 30rem;
-// overflow-x: hidden;
-    .icon{
-		transition: all .3s;
-	}
-	.icon-rotate{
-		transform: rotate(-180deg);
-	}
-        .generalCanvas_title {
-            margin-bottom: .5rem;
-            font-size: 1.8rem;
-            // font-weight: 600;
-			// margin-top: 2rem;
-			padding-top: 2rem;
-			display: flex;
-			top: -1rem;
-			justify-content: space-between;
-			cursor: pointer;
-			position: sticky;
-			background: #f9fafb;
-			z-index: 2;
-			align-items: flex-start;
-			margin: 0 2rem;
-			
-        }
-		.generalCanvas_intro{
-			margin-bottom: 1rem;
-            font-size: 1.6rem;
-            font-weight: 600;
-			width: 100%;
-		}
-        .generalCanvas_right,
-        .generalCanvas_left {
-			width: 100%;
-			height: auto;
-			.generalCanvas_left_tool{
-				margin: 0;
-			}
-			label {
-                display: flex;
-				align-items: center;
-				width: 23%;
-                div {
-                    width: auto;
-					margin-right: 2rem;
-					white-space: nowrap;
-                }
-                input,select {
-                    // width: 10em;
-					flex: 1;
-					overflow: hidden;
-					height: 4.5rem;
-					width: 10rem;
-                }
-				
-				.label_select{
-					img{
-						width: 100%;
-						max-height: 100%;
-						object-fit: contain;
-					}
-				}
-            }
-			.texture{
-				.label_select{
-					img{
-						max-height: none;
-					}
-				}
-			}
-			.generalCanvas_left_item.closeNav{
-				// max-height: 1000rem;
-				// height: auto;
-				display: block;
-			}
-        }
-		.generalCanvas_left::-webkit-scrollbar,
-		.generalCanvas_right::-webkit-scrollbar{display: none;}
-        .generalCanvas_left {
-			padding-right: 1rem;
-			margin-right: 2rem;
-			// height: 7rem;
-			display: flex;
-			flex-wrap: wrap;
-			align-items: flex-start;
-			position: relative;
-			flex-direction: row;
-			>.label_item{
-				width: 20%;
-			}
-			.generalCanvas_title {
-				// margin: 0 4rem;
-				position: relative;
-				.generalCanvas_left_tool_item{
-					display: flex;
-					flex-direction: column;
-					
-				}
-			}
-            .generalCanvas_left_item{
-				overflow: hidden;
-				transition: all .3s;
-				// max-height: 0;
-				transform: translate3d(0, 0, 0);
-				position: absolute;
-			}
-			.generalCanvas_left_item,.generalCanvas_imgbor,.generalCanvas_operation_bor{
-				background: #fff;
-				height: auto;
-				max-height: 30rem;
-				border: 1px solid;
-				display: none;
-				top: 7rem;
-				position: absolute;
-			}
-			
-            .generalCanvas_imgbor {
-				// height: auto;
-				width: 20rem;
-				overflow-y: auto;
-				padding: 1rem;
-				&.generalCanvas_imgbor::-webkit-scrollbar{display: none;}
-
-                .generalCanvas_allItem {
-                    display: flex;
-                    flex-wrap: wrap;
-					justify-content: space-between;
-                    .generalCanvas_item {
-                        text-align: center;
-						.generalCanvas_img{
-							position: relative;
-							margin-bottom: 2rem;
-							img {
-								max-width: 7rem;
-								max-height: 7rem;
-								object-fit: contain;
-								
-							}
-							.generalCanvas_img_SR{
-								position: absolute;
-								bottom: 0;
-								height: 2rem;
-								background: rgba(0, 0, 0, 0.3);
-								color: #fff;
-								width: 100%;
-								text-align: center;
-								font-weight: 600;
-								cursor: pointer;
-							}
-						}
-                       
-                    }
-					.generalCanvas_item_colorBor{
-						width: 100%;
-						display: flex;
-						flex-wrap: wrap;
-						justify-content: space-between;
-					}
-					.generalCanvas_item_color{
-						width: 8rem;
-						margin-bottom: 2rem;
-						.generalCanvas_item_BGcolor{
-							height: 5rem;
-						}
-						div{
-							// -webkit-user-select:none; /* Safari */
-							// -moz-user-select:none; /* Firefox */
-							// -ms-user-select:none; /* IE10+/Edge */
-							// user-select:none; /* Standard syntax */
-						}
-					}
-					.generalCanvas_item_dispose{
-						img{
-							max-width: 100%;
-							max-height: 100%;
-						}
-					}
-					.active{
-						opacity: .5;
-						transform: scale(.9);
-					}
-                }
-            }
-			.generalCanvas_operation_bor_item{
-				flex: 1;
-				margin-left: 8rem;
-				display: flex;
-				.label_item{
-					margin-right: 2rem;
-					position: relative;
-					.labelHover_show{
-						position: absolute;
-						width: 100%;
-						height: 10rem;
-						top: 100%;
-						z-index: 2;
-						flex-wrap: wrap;
-						div{
-							width: 3rem;
-							height: 3rem;
-							margin-right: 1rem;
-							margin-bottom: 1rem;
-							cursor: pointer;
-						}
-					}
-				}
-				.label_item:hover{
-					.labelHover_show{
-						display: flex;
-					}
-				}
-			}
-			.generalCanvas_left_tool_item{
-				display: flex;
-				flex: 1;
-				flex-wrap: wrap;
-				justify-content: space-between;
-				align-items: center;
-
-				flex-direction: row;
-				flex-wrap: nowrap;
-				&.leftAlign{
-					justify-content: flex-start;
-				}
-				&.leftAlign{
-					justify-content: flex-start;
-				}
-				
-				i{
-					font-size: 2.5rem;
-					cursor: pointer;
-					width: 4rem;
-					height: 4rem;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					flex-shrink: 0;
-					&.active{
-						border: 1px solid;
-						border-radius: .4rem;
-					}
-				}
-				.uploadImage{
-					width: 4rem;
-					height: 4rem;
-					input{
-						height: 0;
-						width: 0;
-						border: none;
-					}
-				}
-				
-			}
-        }
-		
-		.generalCanvas_center_box{
-			display: flex;
-			overflow: hidden;
-		}
-        .generalCanvas_center {
-			width: 100%;
-			flex: 1;
-            height: 100%;
-            overflow-y: auto;
-            overflow-x: hidden;
-			position: relative;
-			.editFrontBack_pencilbtn{
-				position: absolute;
-				z-index: 1;
-				border-radius: 50%;
-				border: 1px solid #000;
-				pointer-events: none;
-				transform: translate(-50%,-50%);
-			}
-			&.generalCanvas_center::-webkit-scrollbar-button:single-button{
-			}
-			&.generalCanvas_center::-webkit-scrollbar {
-				/* 竖轴的宽度 */
-				width: 2rem;
-				/* 横轴的高度 */
-				height: 1rem;
-				transition: all .3s;
-			}
-			/* 进度 */
-			&.generalCanvas_center::-webkit-scrollbar-thumb {
-				border-radius: 1rem;
-				background: #543087;
-			}
-			/* 轨道 */
-			&.generalCanvas_center::-webkit-scrollbar-track {
-				border-radius: 1rem;
-				background: rgba(84, 48, 135,.2);
-					// background: rgba(238, 238, 244, 0);
-			}
-        }
-		.generalCanvas_scroll{
-			height: 100%;
-			width: 2rem;
-			background: #d6cfe3;
-			border-radius: 1rem;
-			div{
-				background: #543087;
-				border-radius: 1rem;
-				width: 100%;
-				height: 30rem;
-			}
-		}
-        .generalCanvas_new_collection_review {
-            position: initial;
-            margin: 10rem auto;
-            margin-bottom: 0;
-        }
+  flex: 1;
+  overflow-x: hidden;
+  display: flex;
+  margin-top: 2rem;
+  justify-content: space-between;
+  flex-direction: column;
+  flex: 1;
+  // height: 30rem;
+  // overflow-x: hidden;
+  .icon {
+    transition: all 0.3s;
+  }
+  .icon-rotate {
+    transform: rotate(-180deg);
+  }
+  .generalCanvas_title {
+    margin-bottom: 0.5rem;
+    font-size: 1.8rem;
+    // font-weight: 600;
+    // margin-top: 2rem;
+    padding-top: 2rem;
+    display: flex;
+    top: -1rem;
+    justify-content: space-between;
+    cursor: pointer;
+    position: sticky;
+    background: #f9fafb;
+    z-index: 2;
+    align-items: flex-start;
+    margin: 0 2rem;
+  }
+  .generalCanvas_intro {
+    margin-bottom: 1rem;
+    font-size: 1.6rem;
+    font-weight: 600;
+    width: 100%;
+  }
+  .generalCanvas_right,
+  .generalCanvas_left {
+    width: 100%;
+    height: auto;
+    .generalCanvas_left_tool {
+      margin: 0;
     }
+    label {
+      display: flex;
+      align-items: center;
+      width: 23%;
+      div {
+        width: auto;
+        margin-right: 2rem;
+        white-space: nowrap;
+      }
+      input,
+      select {
+        // width: 10em;
+        flex: 1;
+        overflow: hidden;
+        height: 4.5rem;
+        width: 10rem;
+      }
+
+      .label_select {
+        img {
+          width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+    .texture {
+      .label_select {
+        img {
+          max-height: none;
+        }
+      }
+    }
+    .generalCanvas_left_item.closeNav {
+      // max-height: 1000rem;
+      // height: auto;
+      display: block;
+    }
+  }
+  .generalCanvas_left::-webkit-scrollbar,
+  .generalCanvas_right::-webkit-scrollbar {
+    display: none;
+  }
+  .generalCanvas_left {
+    padding-right: 1rem;
+    margin-right: 2rem;
+    // height: 7rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    position: relative;
+    flex-direction: row;
+    > .label_item {
+      width: 20%;
+    }
+    .generalCanvas_title {
+      // margin: 0 4rem;
+      position: relative;
+      .generalCanvas_left_tool_item {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .generalCanvas_left_item {
+      overflow: hidden;
+      transition: all 0.3s;
+      // max-height: 0;
+      transform: translate3d(0, 0, 0);
+      position: absolute;
+    }
+    .generalCanvas_left_item,
+    .generalCanvas_imgbor,
+    .generalCanvas_operation_bor {
+      background: #fff;
+      height: auto;
+      max-height: 30rem;
+      border: 1px solid;
+      display: none;
+      top: 7rem;
+      position: absolute;
+    }
+
+    .generalCanvas_imgbor {
+      // height: auto;
+      width: 20rem;
+      overflow-y: auto;
+      padding: 1rem;
+      &.generalCanvas_imgbor::-webkit-scrollbar {
+        display: none;
+      }
+
+      .generalCanvas_allItem {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .generalCanvas_item {
+          text-align: center;
+          .generalCanvas_img {
+            position: relative;
+            margin-bottom: 2rem;
+            img {
+              max-width: 7rem;
+              max-height: 7rem;
+              object-fit: contain;
+            }
+            .generalCanvas_img_SR {
+              position: absolute;
+              bottom: 0;
+              height: 2rem;
+              background: rgba(0, 0, 0, 0.3);
+              color: #fff;
+              width: 100%;
+              text-align: center;
+              font-weight: 600;
+              cursor: pointer;
+            }
+          }
+        }
+        .generalCanvas_item_colorBor {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+        }
+        .generalCanvas_item_color {
+          width: 8rem;
+          margin-bottom: 2rem;
+          .generalCanvas_item_BGcolor {
+            height: 5rem;
+          }
+          div {
+            // -webkit-user-select:none; /* Safari */
+            // -moz-user-select:none; /* Firefox */
+            // -ms-user-select:none; /* IE10+/Edge */
+            // user-select:none; /* Standard syntax */
+          }
+        }
+        .generalCanvas_item_dispose {
+          img {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+        .active {
+          opacity: 0.5;
+          transform: scale(0.9);
+        }
+      }
+    }
+    .generalCanvas_operation_bor_item {
+      flex: 1;
+      margin-left: 8rem;
+      display: flex;
+      .label_item {
+        margin-right: 2rem;
+        position: relative;
+        .labelHover_show {
+          position: absolute;
+          width: 100%;
+          height: 10rem;
+          top: 100%;
+          z-index: 2;
+          flex-wrap: wrap;
+          div {
+            width: 3rem;
+            height: 3rem;
+            margin-right: 1rem;
+            margin-bottom: 1rem;
+            cursor: pointer;
+          }
+        }
+      }
+      .label_item:hover {
+        .labelHover_show {
+          display: flex;
+        }
+      }
+    }
+    .generalCanvas_left_tool_item {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+
+      flex-direction: row;
+      flex-wrap: nowrap;
+      &.leftAlign {
+        justify-content: flex-start;
+      }
+      &.leftAlign {
+        justify-content: flex-start;
+      }
+
+      i {
+        font-size: 2.5rem;
+        cursor: pointer;
+        width: 4rem;
+        height: 4rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        &.active {
+          border: 1px solid;
+          border-radius: 0.4rem;
+        }
+      }
+      .uploadImage {
+        width: 4rem;
+        height: 4rem;
+        input {
+          height: 0;
+          width: 0;
+          border: none;
+        }
+      }
+    }
+  }
+
+  .generalCanvas_center_box {
+    display: flex;
+    overflow: hidden;
+  }
+  .generalCanvas_center {
+    width: 100%;
+    flex: 1;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    .editFrontBack_pencilbtn {
+      position: absolute;
+      z-index: 1;
+      border-radius: 50%;
+      border: 1px solid #000;
+      pointer-events: none;
+      transform: translate(-50%, -50%);
+    }
+    &.generalCanvas_center::-webkit-scrollbar-button:single-button {
+    }
+    &.generalCanvas_center::-webkit-scrollbar {
+      /* 竖轴的宽度 */
+      width: 2rem;
+      /* 横轴的高度 */
+      height: 1rem;
+      transition: all 0.3s;
+    }
+    /* 进度 */
+    &.generalCanvas_center::-webkit-scrollbar-thumb {
+      border-radius: 1rem;
+      background: #543087;
+    }
+    /* 轨道 */
+    &.generalCanvas_center::-webkit-scrollbar-track {
+      border-radius: 1rem;
+      background: rgba(84, 48, 135, 0.2);
+      // background: rgba(238, 238, 244, 0);
+    }
+  }
+  .generalCanvas_scroll {
+    height: 100%;
+    width: 2rem;
+    background: #d6cfe3;
+    border-radius: 1rem;
+    div {
+      background: #543087;
+      border-radius: 1rem;
+      width: 100%;
+      height: 30rem;
+    }
+  }
+  .generalCanvas_new_collection_review {
+    position: initial;
+    margin: 10rem auto;
+    margin-bottom: 0;
+  }
+}
 </style>
 <style lang="less">
 .generalCanvas {
-    .ant-modal-content {
-        .ant-modal-body {
-            height: calc(65rem * 1.2);
-        }
+  .ant-modal-content {
+    .ant-modal-body {
+      height: calc(65rem * 1.2);
     }
-	
+  }
 }
-.label_select_item{
-	img{
-		width: 100%;
-		max-height: 100%;
-		object-fit: contain;
-	}
+.label_select_item {
+  img {
+    width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
 }
 </style>
 <style lang="less">
-.SRExport{
-	.ant-modal-body{
-		height: calc(35rem* 1.2);
-	}
-	.SRExport_img{
-		margin-bottom: 2rem;
-		flex: 1;
-		overflow-x: hidden;
-		display: flex;
-		flex-wrap: wrap;
-		min-height: 12rem;
-		.SRExport_img_item_box{
-			position: relative;
-			margin-right: 2rem;
-			margin-bottom: 2rem;
-			input{
-				position: absolute;
-				top: .5rem;
-				right: .5rem;
-				z-index: 2;
-				height: 2rem;
-				width: 2rem;
-			}
-		}
-		img{
-			width: 10rem;
-			max-height: 10rem;
-			object-fit: contain;
-			text-align: center;
-			cursor: pointer;
-			&.active{
-				transform: scale(.8);
-				opacity: .6;
-			}
-		}
-	}
-	.check_all_block{
-		display: flex;
-		align-items: center;
-		font-size: 1.6rem;
-		color: #64686D;
-		cursor: pointer;
-		justify-content: flex-end;
-		&.check_all{
-			color: #1A1A1A;
-			.check_block{
-				.check_block_body{
-					opacity: 1;
-				}
-			}
+.SRExport {
+  .ant-modal-body {
+    height: calc(35rem * 1.2);
+  }
+  .SRExport_img {
+    margin-bottom: 2rem;
+    flex: 1;
+    overflow-x: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 12rem;
+    .SRExport_img_item_box {
+      position: relative;
+      margin-right: 2rem;
+      margin-bottom: 2rem;
+      input {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 2;
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+    img {
+      width: 10rem;
+      max-height: 10rem;
+      object-fit: contain;
+      text-align: center;
+      cursor: pointer;
+      &.active {
+        transform: scale(0.8);
+        opacity: 0.6;
+      }
+    }
+  }
+  .check_all_block {
+    display: flex;
+    align-items: center;
+    font-size: 1.6rem;
+    color: #64686d;
+    cursor: pointer;
+    justify-content: flex-end;
+    &.check_all {
+      color: #1a1a1a;
+      .check_block {
+        .check_block_body {
+          opacity: 1;
+        }
+      }
+    }
 
-		}
+    .check_block {
+      width: 2.4rem;
+      height: 2.4rem;
+      background: #ebecf4;
+      border: 0.1rem solid #64686d;
+      padding: 0.3rem;
+      margin-right: 0.7rem;
+      .check_block_body {
+        width: 100%;
+        opacity: 0;
+        height: 100%;
+        background: #000;
+      }
+    }
+  }
+  .SRExport_operate {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .SRExport_operate_box {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1rem;
+      width: 100%;
+      > div {
+        width: 5rem;
+      }
+      .SRExport_operate_item_sclae {
+        width: 4rem;
+        height: 3rem;
+        border: 0.2rem solid rgba(0, 0, 0, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        cursor: pointer;
+        border-radius: 0.4rem;
+        font-weight: 600;
+        &.active {
+          border-color: rgba(152, 139, 247);
+          color: rgba(152, 139, 247);
+        }
+      }
+      .SRExport_operate_sclae {
+        max-width: 15rem;
+      }
 
-		.check_block{
-			width: 2.4rem;
-			height: 2.4rem;
-			background: #EBECF4;
-			border: 0.1rem solid #64686D;
-			padding: 0.3rem;
-			margin-right: 0.7rem;
-			.check_block_body{
-				width: 100%;
-				opacity: 0;
-				height: 100%;
-				background: #000;
-			}
-		}
-	}
-	.SRExport_operate{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		.SRExport_operate_box {
-			display: flex;
-			align-items: center;
-			margin-bottom: 1rem;
-			width: 100%;
-			>div {
-				width: 5rem;
-			}
-			.SRExport_operate_item_sclae{
-				width: 4rem;
-				height: 3rem;
-				border: .2rem solid rgba(0, 0, 0, 0.3);
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				margin-right: 1rem;
-				cursor: pointer;
-				border-radius: .4rem;
-				font-weight: 600;
-				&.active{
-					border-color: rgba(152, 139, 247);
-					color: rgba(152, 139, 247);
-				}
-			}
-			.SRExport_operate_sclae{
-				max-width: 15rem;
-				
-			}
-			
-			// input {
-			// 	// width: 10em;
-			// 	overflow: hidden;
-			// }
-			// label{
-			// 	display: flex;
-			// 	align-items: center;
-			// 	margin-right: 2rem;
-			// 	span{
-			// 		margin-right: 1rem;
-			// 	}
-			// }
-		}
-	}
-	.generalModelOperate_endBtn{
-		.generalModelOperate_btn_ok{
-			&.active{
-				opacity: .6;
-				cursor: no-drop;
-			}
-		}
-	}
-	
+      // input {
+      // 	// width: 10em;
+      // 	overflow: hidden;
+      // }
+      // label{
+      // 	display: flex;
+      // 	align-items: center;
+      // 	margin-right: 2rem;
+      // 	span{
+      // 		margin-right: 1rem;
+      // 	}
+      // }
+    }
+  }
+  .generalModelOperate_endBtn {
+    .generalModelOperate_btn_ok {
+      &.active {
+        opacity: 0.6;
+        cursor: no-drop;
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index ca24fd4f..3bc5061d 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -1,11 +1,25 @@
 <template>
-	<div class="homeView">
-		<!-- <homeIndex @setTask="()=>$emit('setTask')"></homeIndex> -->
-	</div>
+  <div class="homeView">
+    <!-- <homeIndex @setTask="()=>$emit('setTask')"></homeIndex> -->
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount, toRef, watch} from "vue";
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  reactive,
+  toRefs,
+  inject,
+  provide,
+  nextTick,
+  createVNode,
+  onBeforeUnmount,
+  toRef,
+  watch,
+} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
@@ -17,43 +31,44 @@ import DesignDetail from "@/component/Detail/DesignDetail.vue";
 import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
 // import homeIndex from "@/component/HomePage/index/index.vue";
 import html2canvas from "html2canvas";
-import { message,Modal } from "ant-design-vue";
+import { message, Modal } from "ant-design-vue";
 import { useStore } from "vuex";
 import { Https } from "@/tool/https";
-import { openGuide,driverObj__ } from "@/tool/guide";
-import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
+import { openGuide, driverObj__ } from "@/tool/guide";
+import {
+  LoadingOutlined,
+  ExclamationCircleOutlined,
+} from "@ant-design/icons-vue";
 // import JSZip, { forEach } from "jszip";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import i18n from "@/lang";
 import { useI18n } from "vue-i18n";
 import { getMousePosition } from "@/tool/mdEvent";
 import { removeClass } from "element-plus/es/utils";
-const FileSaver = require("file-saver");
+import FileSaver from "file-saver";
 
 export default defineComponent({
-	name: "homePage",
-	components: {
-		// homeIndex,
-		NewCollectionReview,
-		DesignDetail,
-		ExportNewCoolection,
-		affiche,
-		productImg,
-		generalCanvas,
-		DesignDetailcopy
-	},
-	emits:['setTask'],
-	setup(props,{emit}) {
-		return {
-		
-		};
-	},
+  name: "homePage",
+  components: {
+    // homeIndex,
+    NewCollectionReview,
+    DesignDetail,
+    ExportNewCoolection,
+    affiche,
+    productImg,
+    generalCanvas,
+    DesignDetailcopy,
+  },
+  emits: ["setTask"],
+  setup(props, { emit }) {
+    return {};
+  },
 });
 </script>
 <style lang="less" scoped>
-	.homeView{
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
-</style>
\ No newline at end of file
+.homeView {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 15e22561..a13ee5c8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -97,7 +97,6 @@ export default defineConfig(({ mode }) => {
       assetsDir: "assets",
       // 分包策略
       rollupOptions: {
-        input: path.resolve(__dirname, "public/index.html"),
         output: {
           manualChunks: {
             vendor: ["vue", "vue-router", "vuex"],