From 524ac7ecb2b23dd7a27a836a3d276ce1f8a61827 Mon Sep 17 00:00:00 2001
From: bighuixiang <472705331@qq.com>
Date: Thu, 19 Jun 2025 10:52:03 +0800
Subject: [PATCH] Implement code changes to enhance functionality and improve
 performance

---
 src/component/home/design/index.vue | 4856 ++++++++++++++-------------
 1 file changed, 2608 insertions(+), 2248 deletions(-)

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>