fix

src/component/Canvas/CanvasEditor/components/HeaderMenu.vue

@@ -395,7 +395,7 @@ onMounted(() => {
   align-items: center;
   border-bottom: 1px solid #e0e0e0;
   user-select: none;
-  height: 52px;
+  height: 5.2rem;
   overflow: hidden;
   width: 100%;
   .canvas-header-wrapper {
@@ -406,9 +406,9 @@ onMounted(() => {
 }
 
 .canvas-title {
-  font-size: 16px;
+  font-size: 1.6rem;
   font-weight: 500;
-  margin-right: 30px;
+  margin-right: 3rem;
   display: flex;
   align-items: center;
   color: #333;
@@ -422,11 +422,11 @@ onMounted(() => {
 .canvas-settings {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: .8rem;
   color: #213547;
   .btn {
-    width: 32px;
+    width: 3.2rem;
-    height: 32px;
+    height: 3.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -448,40 +448,40 @@ onMounted(() => {
 }
 
 .gap-20 {
-  gap: 20px;
+  gap: 2rem;
 }
 
 .setting-group {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: .5rem;
   position: relative;
 }
 
 .setting-label {
-  font-size: 14px;
+  font-size: 1.4rem;
   color: #333;
 }
 
 .setting-input {
-  width: 80px;
+  width: 8rem;
 }
 
 .setting-input :deep(.ant-input-number-input) {
-  padding: 4px 8px;
+  padding: .4rem .8rem;
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 .setting-select {
-  padding: 4px 8px;
+  padding: .4rem .8rem;
   border: 1px solid #ddd;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 .font-select {
-  width: 150px;
+  width: 15rem;
-  padding: 4px 8px;
+  padding: .4rem .8rem;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 14px;
@@ -494,8 +494,8 @@ onMounted(() => {
 }
 
 .color-picker {
-  width: 30px;
+  width: 3rem;
-  height: 30px;
+  height: 3rem;
   border: none;
   padding: 0;
   background: none;
@@ -503,20 +503,20 @@ onMounted(() => {
 }
 
 .color-dropdown {
-  font-size: 10px;
+  font-size: 1rem;
-  margin-left: 5px;
+  margin-left: .5rem;
   color: #666;
 }
 
 .size-slider {
-  width: 100px;
+  width: 10rem;
   cursor: pointer;
 }
 
 .size-value {
-  font-size: 12px;
+  font-size: 1.2rem;
   color: #666;
-  min-width: 30px;
+  min-width: 3rem;
 }
 
 .brush-selector {
@@ -524,21 +524,21 @@ onMounted(() => {
 }
 
 .brush-preview {
-  width: 20px;
+  width: 2rem;
-  height: 2px;
+  height: .2rem;
   background-color: #000;
   border-radius: 1px;
 }
 
 .brush-dropdown,
 .export-model-dropdown {
-  font-size: 10px;
+  font-size: 1rem;
-  margin-left: 5px;
+  margin-left: .5rem;
   color: #666;
 }
 
 .export-model-select {
-  font-size: 14px;
+  font-size: 1.4rem;
   color: #333;
   cursor: pointer;
 }
@@ -553,8 +553,8 @@ onMounted(() => {
   top: calc(100% + 5px);
   left: 0;
   z-index: 1000;
-  width: 600px;
+  width: 60rem;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 1rem rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   overflow: hidden;
 }

src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.css

@@ -0,0 +1,660 @@
+.text-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.layers-panel-inner {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  z-index: 6;
+  overflow-y: auto;
+  height: 100%;
+  max-height: 85vh;
+  -webkit-overflow-scrolling: touch;
+}
+.layers-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+.layers-header h3 {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: 500;
+  color: #333;
+}
+.layer-actions-group {
+  display: flex;
+  gap: 0.8rem;
+}
+.layer-actions-group .normal-actions,
+.layer-actions-group .multi-select-actions {
+  display: flex;
+  gap: 0.8rem;
+}
+.action-btn {
+  width: 3.2rem;
+  height: 3.2rem;
+  background: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.action-btn:hover {
+  background-color: #f0f0f0;
+  border-color: #40a9ff;
+  color: #40a9ff;
+}
+.action-btn:active {
+  background-color: #e6f7ff;
+  border-color: #1890ff;
+  color: #1890ff;
+}
+.action-btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+  color: #bfbfbf;
+  border-color: #e6e6e6;
+}
+.action-btn[disabled]:hover {
+  background-color: #f5f5f5;
+  color: #bfbfbf;
+  border-color: #e6e6e6;
+}
+.group-btn {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+  color: #1890ff;
+}
+.group-btn:hover {
+  background-color: #bae7ff;
+  border-color: #69c0ff;
+}
+.group-btn.disabled {
+  background-color: #f0f5ff;
+  border-color: #d9ecff;
+  color: #bfbfbf;
+}
+.ungroup-btn {
+  background-color: #fff2e8;
+  border-color: #ffbb96;
+  color: #fa8c16;
+}
+.ungroup-btn:hover {
+  background-color: #ffd8bf;
+  border-color: #ff9c6e;
+  color: #fa8c16;
+}
+.ungroup-btn.disabled {
+  background-color: #f0f5ff;
+  border-color: #d9ecff;
+  color: #bfbfbf;
+}
+.delete-selected-btn {
+  background-color: #fff2f0;
+  border-color: #ffccc7;
+  color: #ff4d4f;
+}
+.delete-selected-btn:hover {
+  background-color: #ffebe6;
+  border-color: #ff7875;
+  color: #ff4d4f;
+}
+.clear-selection-btn {
+  background-color: #f6f6f6;
+  border-color: #d9d9d9;
+  color: #595959;
+}
+.clear-selection-btn:hover {
+  background-color: #e6e6e6;
+  border-color: #bfbfbf;
+  color: #595959;
+}
+.multi-select-info {
+  padding: 1rem 0.6rem;
+  background-color: rgba(238, 238, 238, 0.4);
+  border-bottom: 1px solid #91d5ff;
+  color: #333;
+  font-size: 1.3rem;
+  line-height: 1.4;
+}
+.multi-select-info small {
+  display: block;
+  margin-top: 0.4rem;
+  color: #666;
+  font-size: 1.1rem;
+}
+.layers-list {
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+}
+.layer-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  border-left: 0;
+  border-right: 0;
+  border: none;
+  border-bottom: 1px solid #f5f2f2;
+  padding-left: 3rem;
+  padding-right: 1rem;
+  color: #333;
+}
+.layer-item.group-layer {
+  background-color: rgba(240, 248, 255, 0.3);
+  border-color: #e6f7ff;
+}
+.layer-item:hover {
+  background-color: #f0f0f0;
+  border-color: #e0e0e0;
+}
+.layer-item.active {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+}
+.layer-item.selected {
+  background-color: #bae7ff;
+  border-color: #91d5ff;
+}
+.layer-item.editing {
+  background-color: #fff7e6;
+  border-color: #ffd666;
+}
+.layer-item.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.layer-item.disabled:hover {
+  background-color: transparent;
+}
+.layer-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.6rem;
+}
+.layer-review {
+  width: 3.2rem;
+  height: 3.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex: none;
+  background: repeating-conic-gradient(#f5f5f5 0% 25%, #ffffff 0% 50%) 50% / 1rem 1rem;
+  border: 1px solid #e0e0e0;
+}
+.layer-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.layer-type-icon {
+  font-size: 1.4rem;
+}
+.visibility-btn {
+  width: 2.2rem;
+  height: 2.2rem;
+  cursor: pointer;
+  flex: none;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.visibility-btn.hidden {
+  color: #999;
+}
+.layer-name-container {
+  flex: 1;
+  margin: 0 0.6rem;
+  overflow: hidden;
+}
+.layer-name-container .layer-name-wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.layer-name {
+  color: #333;
+  font-size: 1.4rem;
+  text-align: left;
+  display: block;
+  width: 100%;
+}
+.layer-name-input {
+  width: 100%;
+  padding: 0.2rem 0.4rem;
+  border: 1px solid #1890ff;
+  border-radius: 0.3rem;
+  font-size: 1.4rem;
+  color: #333;
+  background-color: #fff;
+  outline: none;
+  box-sizing: border-box;
+}
+.layer-name-input:focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.layer-status {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.status-icon {
+  font-size: 1.2rem;
+}
+.status-icon.locked {
+  color: #1890ff;
+}
+.status-icon.group {
+  color: #fa8c16;
+}
+.status-icon.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+.layer-actions {
+  display: flex;
+  gap: 0.6rem;
+}
+.delete-btn {
+  font-size: 1.6rem;
+  cursor: pointer;
+  width: 2.2rem;
+  height: 2.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.delete-btn:hover {
+  color: #ff4d4f;
+}
+.delete-btn.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+.layer-drag-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2rem;
+  height: 100%;
+  cursor: move;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  margin-right: 0.4rem;
+  background: #eee;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+}
+.layer-drag-handle:hover {
+  color: #333;
+}
+.layer-checkbox {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 0;
+  cursor: pointer;
+  flex: none;
+  display: flex;
+  align-items: center;
+}
+.child-layer {
+  padding: 0.8rem 2rem 0.8rem 3.2rem;
+  background-color: rgba(240, 240, 240, 0.3);
+  border-left: 2px solid #e0e0e0;
+}
+.child-layer:hover {
+  background-color: rgba(224, 224, 224, 0.5);
+}
+.child-layer.active {
+  background-color: rgba(230, 247, 255, 0.5);
+  border-left: 2px solid #1890ff;
+}
+.child-layer.editing {
+  background-color: rgba(255, 247, 230, 0.5);
+  border-left: 2px solid #ffd666;
+}
+.child-layer .layer-actions {
+  position: static;
+  display: flex;
+  gap: 0.4rem;
+}
+.child-layer .layer-actions button {
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  border-radius: 2px;
+  transition: all 0.2s;
+}
+.child-layer .layer-actions button:hover {
+  background-color: #f0f0f0;
+  color: #333;
+}
+.layer-indent {
+  width: 2rem;
+  flex: none;
+}
+.layer-info {
+  flex: 1;
+  margin: 0 0.8rem;
+}
+.layer-info .layer-name {
+  font-size: 1.3rem;
+  color: #333;
+  margin-bottom: 0.2rem;
+}
+.layer-info .layer-status {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.layer-info .layer-type {
+  font-size: 11px;
+  color: #999;
+}
+.child-drag-handle {
+  width: 1.6rem;
+  height: 1.6rem;
+  cursor: move;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  margin-right: 0.4rem;
+}
+.child-drag-handle:hover {
+  color: #333;
+}
+.fixed-layers {
+  border-top: 1px solid #e0e0e0;
+  background-color: rgba(238, 238, 238, 0.4);
+}
+.fixed-layers .layer-drag-handle {
+  cursor: default;
+}
+.fixed-layer {
+  background-color: #fafafa;
+}
+.fixed-layer-indicator {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1890ff;
+  margin-right: 0.4rem;
+}
+.background-indicator,
+.fixed-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.4rem;
+}
+.background-icon,
+.fixed-icon {
+  font-size: 1.4rem;
+  color: #999;
+}
+.sortable-layers {
+  width: 100%;
+}
+.ghost {
+  opacity: 0.5;
+  background-color: #f0f0f0;
+  border: 2px dashed #1890ff;
+}
+.chosen {
+  background-color: #e6f7ff;
+  border: 1px solid #1890ff;
+}
+.drag {
+  opacity: 0.8;
+  transform: rotate(5deg);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+.child-layers .ghost {
+  opacity: 0.4;
+  background-color: #fff7e6;
+  border: 1px dashed #faad14;
+}
+.child-layers .chosen {
+  background-color: #fff7e6;
+  border: 1px solid #faad14;
+}
+.child-layers .drag {
+  opacity: 0.7;
+  transform: rotate(3deg);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+@media (max-width: 768px) {
+  .layers-panel-inner {
+    max-height: 70vh;
+  }
+  .layer-item {
+    padding: 1.2rem;
+    padding-left: 3.5rem;
+  }
+  .layer-header {
+    min-height: 4rem;
+  }
+  .layer-drag-handle,
+  .visibility-btn {
+    width: 2.4rem;
+  }
+  .layer-review {
+    width: 3.6rem;
+    height: 3.6rem;
+  }
+  .action-btn {
+    width: 3.6rem;
+    height: 3.6rem;
+  }
+  .multi-select-info small {
+    font-size: 1.1rem;
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .layer-item {
+    padding: 10px;
+    padding-left: 30px;
+  }
+  .layer-drag-handle:hover,
+  .visibility-btn:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+  }
+}
+@media (hover: none) and (pointer: coarse) {
+  .layer-item {
+    padding-left: 30px;
+  }
+  .layer-item:hover {
+    background-color: transparent;
+  }
+  .layer-item:active {
+    background-color: #f0f0f0;
+  }
+  .action-btn:hover {
+    background-color: transparent;
+    border-color: #d9d9d9;
+    color: #666;
+  }
+  .action-btn:active {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #1890ff;
+  }
+}
+.group-expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s ease;
+  margin-right: 4px;
+  color: #333;
+}
+.group-expand-icon .svg-icon {
+  transition: transform 0.2s ease;
+}
+.group-layer .layer-type-icon {
+  font-size: 14px;
+}
+.child-layers {
+  position: relative;
+}
+.child-layers::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: #e0e0e0;
+}
+.layer-indent {
+  width: 16px;
+  position: relative;
+}
+.layer-indent::after {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  width: 8px;
+  height: 1px;
+  background-color: #e0e0e0;
+}
+.child-layers-expand-enter-active,
+.child-layers-expand-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.child-layers-expand-enter-from {
+  height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.child-layers-expand-leave-to {
+  height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.group-expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s ease;
+  margin-right: 4px;
+}
+.group-expand-icon:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  transform: scale(1.1);
+}
+.group-expand-icon:active {
+  transform: scale(0.95);
+}
+.group-expand-icon .svg-icon {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.child-layers {
+  position: relative;
+  background: linear-gradient(135deg, rgba(240, 248, 255, 0.1) 0%, rgba(240, 248, 255, 0.05) 100%);
+}
+.child-layers::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: linear-gradient(to bottom, #e0e0e0 0%, rgba(224, 224, 224, 0.3) 100%);
+}
+.child-layers .layer-item {
+  animation: slideInRight 0.2s ease-out;
+  animation-fill-mode: both;
+}
+.child-layers .layer-item:nth-child(1) {
+  animation-delay: 0.05s;
+}
+.child-layers .layer-item:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.child-layers .layer-item:nth-child(3) {
+  animation-delay: 0.15s;
+}
+.child-layers .layer-item:nth-child(4) {
+  animation-delay: 0.2s;
+}
+.child-layers .layer-item:nth-child(5) {
+  animation-delay: 0.25s;
+}
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@media (hover: none) and (pointer: coarse) {
+  .child-layers-expand-enter-active,
+  .child-layers-expand-leave-active {
+    transition: all 0.25s ease;
+  }
+  .group-expand-icon:hover {
+    transform: none;
+    background-color: transparent;
+  }
+  .group-expand-icon:active {
+    transform: scale(0.9);
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .child-layers .layer-item {
+    animation-duration: 0.15s;
+  }
+}

src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less

@@ -22,12 +22,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: 1.5rem;
   border-bottom: 1px solid #e0e0e0;
 
   h3 {
     margin: 0;
-    font-size: 16px;
+    font-size: 1.6rem;
     font-weight: 500;
     color: #333;
   }
@@ -35,21 +35,21 @@
 
 .layer-actions-group {
   display: flex;
-  gap: 8px;
+  gap: .8rem;
   .normal-actions,
   .multi-select-actions {
     display: flex;
-    gap: 8px;
+    gap: .8rem;
   }
 }
 
 // 操作按钮样式
 .action-btn {
-  width: 32px;
+  width: 3.2rem;
-  height: 32px;
+  height: 3.2rem;
   background: none;
   border: 1px solid #d9d9d9;
-  border-radius: 4px;
+  border-radius: .4rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -146,19 +146,19 @@
 
 // 多选信息提示
 .multi-select-info {
-  padding: 10px 6px;
+  padding: 1rem .6rem;
   // background-color: #e6f7ff;
   background-color: rgba(238, 238, 238,0.4);
   border-bottom: 1px solid #91d5ff;
   color: #333;
-  font-size: 13px;
+  font-size: 1.3rem;
   line-height: 1.4;
 
   small {
     display: block;
-    margin-top: 4px;
+    margin-top: .4rem;
     color: #666;
-    font-size: 11px;
+    font-size: 1.1rem;
   }
 }
 
@@ -175,7 +175,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 10px 0;
+  padding: 1rem 0;
   cursor: pointer;
   transition: all 0.2s ease;
   border: 1px solid transparent;
@@ -183,8 +183,8 @@
   border-right: 0;
   border: none;
   border-bottom: 1px solid #f5f2f2;
-  padding-left: 30px;
+  padding-left: 3rem;
-  padding-right: 10px;  
+  padding-right: 1rem;  
   color: #333;
 
   &.group-layer {
@@ -232,20 +232,20 @@
   display: flex;
   align-items: center;
   width: 100%;
-  gap: 6px;
+  gap: .6rem;
 }
 
 // 图层预览
 .layer-review {
-  width: 32px;
+  width: 3.2rem;
-  height: 32px;
+  height: 3.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   flex: none;
   background: repeating-conic-gradient(#f5f5f5 0% 25%, #ffffff 0% 50%) 50% /
-    10px 10px;
+    1rem 1rem;
   border: 1px solid #e0e0e0;
 }
 
@@ -256,13 +256,13 @@
 }
 
 .layer-type-icon {
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 // 可见性按钮
 .visibility-btn {
-  width: 22px;
+  width: 2.2rem;
-  height: 22px;
+  height: 2.2rem;
   cursor: pointer;
   flex: none;
   color: #333;
@@ -278,7 +278,7 @@
 // 图层名称
 .layer-name-container {
   flex: 1;
-  margin: 0 6px;
+  margin: 0 .6rem;
   overflow: hidden;
   // max-width: 204px;
   .layer-name-wrapper{
@@ -291,7 +291,7 @@
 
 .layer-name {
   color: #333;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: left;
   display: block;
   width: 100%;
@@ -299,10 +299,10 @@
 
 .layer-name-input {
   width: 100%;
-  padding: 2px 4px;
+  padding: .2rem .4rem;
   border: 1px solid #1890ff;
-  border-radius: 3px;
+  border-radius: .3rem;
-  font-size: 14px;
+  font-size: 1.4rem;
   color: #333;
   background-color: #fff;
   outline: none;
@@ -318,13 +318,13 @@
 .layer-status {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: .4rem;
 
  
 }
 
 .status-icon {
-  font-size: 12px;
+  font-size: 1.2rem;
 
   &.locked {
     color: #1890ff;
@@ -343,14 +343,14 @@
 // 图层操作
 .layer-actions {
   display: flex;
-  gap: 6px;
+  gap: .6rem;
 }
 
 .delete-btn {
-  font-size: 16px;
+  font-size: 1.6rem;
   cursor: pointer;
-  width: 22px;
+  width: 2.2rem;
-  height: 22px;
+  height: 2.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -371,7 +371,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 20px;
+  width: 2rem;
   height: 100%;
   cursor: move;
   flex: none;
@@ -379,7 +379,7 @@
   align-items: center;
   justify-content: center;
   color: #999;
-  margin-right: 4px;
+  margin-right: .4rem;
   background: #eee;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
   &:hover {
@@ -389,8 +389,8 @@
 
 // 复选框
 .layer-checkbox {
-  width: 18px;
+  width: 1.8rem;
-  height: 18px;
+  height: 1.8rem;
   margin-right: 0;
   cursor: pointer;
   flex: none;
@@ -410,7 +410,7 @@
 }
 
 .child-layer {
-  padding: 8px 20px 8px 32px;
+  padding: .8rem 2rem .8rem 3.2rem;
   background-color: rgba(240, 240, 240, 0.3);
   border-left: 2px solid #e0e0e0;
 
@@ -431,11 +431,11 @@
   .layer-actions {
     position: static;
     display: flex;
-    gap: 4px;
+    gap: .4rem;
 
     button {
-      width: 20px;
+      width: 2rem;
-      height: 20px;
+      height: 2rem;
       border: none;
       background: none;
       cursor: pointer;
@@ -455,24 +455,24 @@
 }
 
 .layer-indent {
-  width: 20px;
+  width: 2rem;
   flex: none;
 }
 
 .layer-info {
   flex: 1;
-  margin: 0 8px;
+  margin: 0 .8rem;
 
   .layer-name {
-    font-size: 13px;
+    font-size: 1.3rem;
     color: #333;
-    margin-bottom: 2px;
+    margin-bottom: .2rem;
   }
 
   .layer-status {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: .4rem;
   }
 
   .layer-type {
@@ -482,15 +482,15 @@
 }
 
 .child-drag-handle {
-  width: 16px;
+  width: 1.6rem;
-  height: 16px;
+  height: 1.6rem;
   cursor: move;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #999;
-  margin-right: 4px;
+  margin-right: .4rem;
 
   &:hover {
     color: #333;
@@ -518,13 +518,13 @@
 }
 
 .fixed-layer-indicator {
-  width: 20px;
+  width: 2rem;
-  height: 20px;
+  height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1890ff;
-  margin-right: 4px;
+  margin-right: .4rem;
 }
 
 .background-indicator,
@@ -532,12 +532,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: 4px;
+  margin-left: .4rem;
 }
 
 .background-icon,
 .fixed-icon {
-  font-size: 14px;
+  font-size: 1.4rem;
   color: #999;
 }
 
@@ -590,34 +590,34 @@
   }
 
   .layer-item {
-    padding: 12px;
+    padding: 1.2rem;
-    padding-left: 35px;
+    padding-left: 3.5rem;
   }
 
   .layer-header {
-    min-height: 40px;
+    min-height: 4rem;
   }
 
   .layer-drag-handle,
   .visibility-btn {
-    width: 24px;
+    width: 2.4rem;
   }
 
   .layer-review {
-    width: 36px;
+    width: 3.6rem;
-    height: 36px;
+    height: 3.6rem;
   }
 
   .action-btn {
-    width: 36px;
+    width: 3.6rem;
-    height: 36px;
+    height: 3.6rem;
   }
 
   .multi-select-info {
     // padding: 12px;
 
     small {
-      font-size: 11px;
+      font-size: 1.1rem;
     }
   }
 //   .layer-name-container {

src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue

@@ -346,12 +346,12 @@ const handleToolClick = (tool) => {
 .tools-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 1.0rem;
-  padding: 15px 10px;
+  padding: 1.5rem 1.0rem;
-  border-right: 1px solid #e0e0e0;
+  border-right: .1rem solid #e0e0e0;
   background-color: #ffffff;
   user-select: none;
-  min-width: 58px;
+  min-width: 5.8rem;
   height: 100%;
 }
 
@@ -360,12 +360,12 @@ const handleToolClick = (tool) => {
 }
 
 .mode-indicator {
-  margin-bottom: 10px;
+  margin-bottom: 1.0rem;
-  padding: 8px;
+  padding: .8rem;
   border-radius: 4px;
   background-color: #ffcccc;
   color: #a33;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: center;
 }
 
@@ -374,7 +374,7 @@ const handleToolClick = (tool) => {
 }
 
 .mode-hint {
-  font-size: 12px;
+  font-size: 1.2rem;
-  margin-top: 4px;
+  margin-top: .4rem;
 }
 </style>

src/component/Canvas/CanvasEditor/index.vue

@@ -980,7 +980,7 @@ defineExpose({
     <div class="main-content">
       <!-- :minimapEnabled="minimapEnabled" -->
       <!-- 工具栏组件 -->
-      <div style="min-width: 58px">
+      <div style="min-width: 5.8rem">
         <ToolsSidebar
           v-if="canvasManagerLoaded"
           :activeTool="activeTool"
@@ -1132,13 +1132,13 @@ defineExpose({
   right: 0;
   top: 0;
   bottom: 0;
-  z-index: 77;
+  z-index: 100;
   & > .header-menu {
-    height: 52px;
+    height: 5.2rem;
     overflow: hidden;
     display: flex;
     align-items: center;
-    padding: 0 20px;
+    padding: 0 2rem;
     border-bottom: 1px solid #e0e0e0;
     background-color: #ffffff;
   }
@@ -1204,12 +1204,12 @@ defineExpose({
 
 .zoom-info {
   position: absolute;
-  bottom: 10px;
+  bottom: 1rem;
-  right: 10px;
+  right: 1rem;
   background: rgba(255, 255, 255, 0.7);
-  padding: 5px 10px;
+  padding: .5rem 1rem;
-  border-radius: 4px;
+  border-radius: .4rem;
-  font-size: 14px;
+  font-size: 1.4rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   color: #666;
   display: flex;
@@ -1217,42 +1217,42 @@ defineExpose({
 
 .zoom-hint {
   position: absolute;
-  top: 10px;
+  top: 1rem;
-  left: 10px;
+  left: 1rem;
   background: rgba(255, 255, 255, 0.8);
-  padding: 5px 10px;
+  padding: .5rem 1rem;
-  border-radius: 4px;
+  border-radius: .4rem;
-  font-size: 12px;
+  font-size: 1.2rem;
   color: #666;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .reset-zoom {
-  margin-left: 10px;
+  margin-left: 1rem;
   cursor: pointer;
-  padding: 2px 5px;
+  padding: .2rem .5rem;
-  font-size: 12px;
+  font-size: 1.2rem;
   border: 1px solid #ddd;
   background: #f8f8f8;
-  border-radius: 3px;
+  border-radius: .3rem;
 }
 
 .footer-actions {
   display: flex;
   justify-content: center;
-  gap: 10px;
+  gap: 1rem;
-  padding: 15px;
+  padding: 1.5rem;
   border-top: 1px solid #e0e0e0;
 }
 
 .share-btn,
 .export-btn {
-  padding: 8px 20px;
+  padding: .8rem 2rem;
   border: none;
-  border-radius: 20px;
+  border-radius: 2rem;
   background-color: #000;
   color: #fff;
-  font-size: 14px;
+  font-size: 1.4rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -1264,7 +1264,7 @@ defineExpose({
 }
 
 button {
-  font-size: 13px;
+  font-size: 1.3rem;
   transition: all 0.2s;
 }
 
@@ -1273,10 +1273,10 @@ button:hover {
 }
 
 .help-btn {
-  margin-left: 10px;
+  margin-left: 1rem;
   cursor: pointer;
-  width: 24px;
+  width: 2.4rem;
-  height: 24px;
+  height: 2.4rem;
   border-radius: 50%;
   background-color: #f0f0f0;
   border: 1px solid #ddd;
@@ -1306,54 +1306,54 @@ button:hover {
 .modal-content {
   position: relative;
   width: 80%;
-  max-width: 600px;
+  max-width: 60rem;
   max-height: 90vh;
   overflow-y: auto;
   background-color: #fff;
-  border-radius: 8px;
+  border-radius: .8rem;
-  padding: 20px;
+  padding: 2rem;
 }
 
 .close-modal {
   position: absolute;
-  top: 10px;
+  top: 1rem;
-  right: 10px;
+  right: 1rem;
-  width: 30px;
+  width: 3rem;
-  height: 30px;
+  height: 3rem;
   border-radius: 50%;
   border: none;
   background-color: #f0f0f0;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  font-size: 2rem;
   cursor: pointer;
 }
 
 /* 网格控制面板样式 */
 .grid-controls {
   position: absolute;
-  bottom: 115px;
+  bottom: 11.5rem;
-  right: 10px;
+  right: 1rem;
   background: rgba(255, 255, 255, 0.9);
-  padding: 10px;
+  padding: 1rem;
-  border-radius: 4px;
+  border-radius: .4rem;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: .8rem;
   z-index: 5;
 }
 
 .layers-panel {
   position: absolute;
-  right: 20px;
+  right: 2rem;
-  top: 10px;
+  top: 1rem;
   transition: width 0.3s ease;
   background: #fff;
-  width: 350px;
+  width: 35rem;
   max-height: 85vh;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  box-shadow: 0 .4rem 2rem rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
   backdrop-filter: blur(2px); /* 添加模糊效果 */
   -webkit-backdrop-filter: blur(2px);
   background-color: rgba(255, 255, 255, 0.95); /* 改为白色背景 */
@@ -1363,13 +1363,13 @@ button:hover {
   &::before {
     content: "";
     position: absolute;
-    top: -9px;
+    top: -.9rem;
-    right: 6px;
+    right: .6rem;
     width: 0;
     height: 0;
-    border-left: 10px solid transparent;
+    border-left: 1rem solid transparent;
-    border-right: 10px solid transparent;
+    border-right: 1rem solid transparent;
-    border-bottom: 10px solid rgba(255, 255, 255, 0.95); /* 与面板背景色一致 */
+    border-bottom: 1rem solid rgba(255, 255, 255, 0.95); /* 与面板背景色一致 */
     filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.05));
     z-index: 1;
   }
@@ -1377,40 +1377,40 @@ button:hover {
 /* 添加触控设备的样式调整 */
 @media (pointer: coarse) {
   .tool-btn {
-    width: 44px;
+    width: 4.4rem;
-    height: 44px;
+    height: 4.4rem;
-    font-size: 18px;
+    font-size: 1.8rem;
   }
 
   .layers-panel {
-    width: 280px;
+    width: 28rem;
   }
 
   .layer-item,
   .element-item {
-    padding: 12px 8px;
+    padding: 1.2rem .8rem;
   }
 
   .element-action-btn,
   .element-delete-btn {
-    width: 24px;
+    width: 2.4rem;
-    height: 24px;
+    height: 2.4rem;
   }
 
   .help-btn {
-    width: 32px;
+    width: 3.2rem;
-    height: 32px;
+    height: 3.2rem;
   }
 
   .modal-content {
     width: 90%;
-    padding: 16px;
+    padding: 1.6rem;
   }
 
   .close-modal {
-    width: 40px;
+    width: 4rem;
-    height: 40px;
+    height: 4rem;
-    font-size: 24px;
+    font-size: 2.4rem;
   }
 }
 
@@ -1422,6 +1422,6 @@ button:hover {
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
-  transform: translateY(10px);
+  transform: translateY(1rem);
 }
 </style>

src/component/Canvas/ExistsImageList/ToolButton.vue

@@ -70,8 +70,8 @@ const handleClick = () => {
 <style scoped>
 .tool-btn {
   position: relative;
-  width: 36px;
+  width: 3.5rem;
-  height: 36px;
+  height: 3.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -79,7 +79,7 @@ const handleClick = () => {
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1.6rem;
   color: #333;
   transition: all 0.2s ease;
 }
@@ -110,11 +110,11 @@ const handleClick = () => {
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
-  padding: 4px 8px;
+  padding: .4rem .8rem;
-  border-radius: 4px;
+  border-radius: .4rem;
-  margin-left: 8px;
+  margin-left: .8rem;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: 1.2rem;
   z-index: 10;
 }
 
@@ -123,8 +123,8 @@ const handleClick = () => {
   position: absolute;
   top: 50%;
   right: 100%;
-  margin-top: -5px;
+  margin-top: -.5rem;
-  border-width: 5px;
+  border-width: .5rem;
   border-style: solid;
   border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
 }

src/component/Canvas/SvgIcon/index.vue

@@ -3,7 +3,7 @@
     <svg
       :class="svgClass"
       v-bind="$attrs"
-      :style="{ color: color, fontSize: size + 'px' }"
+      :style="{ color: color, fontSize: size/10 + 'rem' }"
     >
       <use :href="iconName"></use>
     </svg>

src/component/Canvas/canvasExample.vue

@@ -356,8 +356,8 @@ body {
 
 .custom-tool-btn {
   position: relative;
-  width: 36px;
+  width: 3.5rem;
-  height: 36px;
+height: 3.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -365,7 +365,7 @@ body {
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1.6rem;
   color: #333;
   transition: all 0.2s ease;
 }
@@ -386,11 +386,11 @@ body {
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
-  padding: 4px 8px;
+  padding: .4rem .8rem;
-  border-radius: 4px;
+  border-radius: .4rem;
-  margin-left: 8px;
+  margin-left: .8rem;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: 1.2rem;
   z-index: 10;
 }
 
@@ -399,8 +399,8 @@ body {
   position: absolute;
   top: 50%;
   right: 100%;
-  margin-top: -5px;
+  margin-top: -.5rem;
-  border-width: 5px;
+  border-width: .5rem;
   border-style: solid;
   border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
 }

src/component/DetailCopy/canvas/index.vue

@@ -320,8 +320,8 @@ export default defineComponent({
 			:deep(i){
 				font-size: 2.5rem;
 				cursor: pointer;
-				width: 3rem;
+				width: 3.5rem;
-				height: 3rem;
+				height: 3.5rem;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -380,8 +380,8 @@ export default defineComponent({
 	
 .custom-tool-btn {
   position: relative;
-  width: 36px;
+  width: 3.6rem;
-  height: 36px;
+  height: 3.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -389,7 +389,7 @@ export default defineComponent({
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1.6rem;
   color: #333;
   transition: all 0.2s ease;
   &.active{
@@ -418,11 +418,11 @@ export default defineComponent({
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
-  padding: 4px 8px;
+  padding: .4rem .8rem;
-  border-radius: 4px;
+  border-radius: .4rem;
-  margin-left: 8px;
+  margin-left: .8rem;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: 1.2rem;
   z-index: 10;
 }
 
@@ -431,8 +431,8 @@ export default defineComponent({
   position: absolute;
   top: 50%;
   right: 100%;
-  margin-top: -5px;
+  margin-top: -.5rem;
-  border-width: 5px;
+  border-width: .5rem;
   border-style: solid;
   border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
 }

src/component/DetailCopy/detailLeft/element.vue

@@ -81,6 +81,7 @@ export default defineComponent({
 			if(detailData.currentDetailType != 'print' && detailData.currentDetailType != 'element'){
 				store.commit('DesignDetailCopy/setNewDetail',value)
 			}else{
+				store.commit('DesignDetailCopy/setCurrentPrintElement',null)
 				store.commit('DesignDetailCopy/setCurrentPrintElement',data)
 			}
 		}

src/component/DetailCopy/detailLeft/print.vue

@@ -80,6 +80,7 @@ export default defineComponent({
 			if(detailData.currentDetailType != 'print' && detailData.currentDetailType != 'element'){
 				store.commit('DesignDetailCopy/setNewDetail',value)
 			}else{
+				store.commit('DesignDetailCopy/setCurrentPrintElement',null)
 				store.commit('DesignDetailCopy/setCurrentPrintElement',data)
 			}
 		}

src/component/HomePage/Generate.vue

@@ -138,7 +138,7 @@
 							<div v-for="item in speedList" 
 								v-show="(type_.type2 == 'Moodboard' && item?.value != 'flux') || 
 								(type_.type2 == 'Sketchboard' && item?.value != 'flux') || 
-								(type_.type2 == 'Printboard' && item?.value != 'flux')" 
+								(type_.type2 == 'Printboard' && item?.value != 'wx')" 
 								:key="item.value" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 						</div>
 						<div class="content"  v-show="speedState && scene?.value == 'extract'">
@@ -335,9 +335,13 @@ export default defineComponent({
 			}else if(newVal.value == 'Logo' || newVal.value == 'Slogan'){
 				speed.speedData.value = ''
 				speed.speedData.label = ''
+			}else{
+				if(newVal.value == "Pattern"){
+					speed.speedData = speed.speedList[1]
 				}else{
 					speed.speedData = speed.speedList[0]
 				}
+			}
 			speed.speedState = false
 		})
 		const setSpeed = (item:any)=>{

src/component/home/design/editDesignType/index.vue

@@ -685,7 +685,7 @@ setup(props:any,{emit}) {
 		}
 		let emitData = {
 			status:productimg.openType,
-			generateCourse:[{
+			addList:[{
 				...productimg.generateCourse,
 			}]
 		}

src/component/home/design/index.vue

@@ -544,7 +544,6 @@ export default defineComponent({
 				},
 			],
 			resultType:'All',
-			oldSelectLikeDesign:null as any,
 			likeDesignTools:false,
 		})
 		watch(()=>likeDesignCollectionList.value.length,(val)=>{
@@ -1074,20 +1073,20 @@ export default defineComponent({
 			clearInterval(prductimgTime.PoseTransfer)
 			clearInterval(prductimgTime.Relight)
 			let list = likeDesignCollectionList.value
-			data.generateCourse.forEach((generateCourseItem:any)=>{
+			//添加元素
+			if(data.addList){
+				data.addList.forEach((generateCourseItem:any)=>{
 					let oldData = generateCourseItem.oldData
 					if(oldData?.resultType == "Design"){
 						let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId && item.resultType == "Design"))
 						if(!list[index]?.childList)list[index].childList = []
-					if(data.status == 'add'){
 						generateCourseItem.sort = list[index]?.childList.length + 1
+						if(data.status == 'add'){
 							upDataSort(generateCourseItem,index)
 							list[index]?.childList.push(generateCourseItem)
 						}
 					}else{
 						let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
-					console.log(index)
-					console.log(list[index])
 						if(index != -1){
 							if(!list[index]?.childList){
 								list[index].childList = []
@@ -1102,6 +1101,32 @@ export default defineComponent({
 						}
 					}
 				})
+			}
+			if(data.deleteList){
+				data.deleteList.forEach((generateCourseItem:any)=>{
+					let oldData = generateCourseItem.oldData
+					if(oldData?.resultType == "Design"){
+					}else{
+						let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
+						console.log(index)
+						if(index != -1){
+							if(!list[index]?.childList){
+								list[index].childList = []
+							}
+							let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem.id))
+							console.log(list[index].childList,list[index].childList[childIndex])
+							list[index].childList.forEach((childItem)=>{
+								if(childItem.sort > list[index].childList[childIndex].sort){
+									childItem.sort -= 1
+								}
+							})
+							list[index].childList.splice(childIndex,1)
+						}
+					}
+				})
+			}
+			
+
 			await nextTick().then(()=>{
 				designData.isUnfold = true
 				uploadLikeDom()
@@ -1210,33 +1235,35 @@ export default defineComponent({
 		}
 		const setUnfold = ()=>{
 			if(!designData.isUnfold){
-				designData.selectLikeDesign = designData.oldSelectLikeDesign || []
+				designData.selectLikeDesign = []
 			}
 			uploadLikeDom()
 		}
-		const uploadLikeDom = ()=>{
+		const getSelectList = ()=>{
-			if(designData.isUnfold){
+			let list = [] as any
-				// 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.sort((a:any,b:any)=>{return a.sort - b.sort})
 			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.oldSort = childItem.sort
-							console.log(childItem.sort,childLength,index)
 						childItem.sort = childItem.sort + childLength + index
 						// childItem.sort = childIndex + item.sort + childLength
-							designData.selectLikeDesign.push(childItem)
+						list.push(childItem)
 					})
 					childLength = item.childList.length + childLength
 				}
 				item.sort = childLength + item.sort
-					designData.selectLikeDesign.push(item)
+				list.push(item)
 			})
-				designData.oldSelectLikeDesign = []
+			return list
+		}
+		const uploadLikeDom = ()=>{
+			if(designData.isUnfold){
+				// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
+				designData.selectLikeDesign = getSelectList()
 				designData.resultType = 'All'
 			}else{
 				if(designData.selectLikeDesign.length == 0){
@@ -1272,17 +1299,16 @@ export default defineComponent({
 				// setUnfold()
 			}
 			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'));
+					designData.selectLikeDesign = getSelectList().filter((item:any) => (item.resultType === 'ToProductImage' || item.resultType === 'Relight'));
 				}else{
-					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => item.resultType === designData.resultType);
+					designData.selectLikeDesign = getSelectList().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 = getSelectList()
 				designData.selectLikeDesign.forEach((item:any,index:number) => {
 					item.sort = index + 1
 				})

src/component/home/design/tools.vue

@@ -35,6 +35,7 @@
 					@setLike="designLike"
 					class="toProduct" 
 					:source="source"
+					@unLike="unLike"
 					:isState="openType =='toProduct'" 
 					v-if="openType == 'toProduct'"
 				></toProductRelight>
@@ -44,6 +45,7 @@
 					@setLike="designLike"
 					class="relight" 
 					:source="source"
+					@unLike="unLike"
 					:isState="openType =='relight'"	
 					v-if="openType == 'relight'"
 				></toProductRelight>
@@ -114,6 +116,7 @@ export default defineComponent({
 			likeDesignList:[],
 			canvasSelectList:[] as any,
 			canvasDetailData:null as any,
+			unLikeList:[],
 		})
 		const dataDom = reactive({
 			toProduct:null as any,
@@ -179,7 +182,9 @@ export default defineComponent({
 				dataDom[value].openSetData(fileList)
 			})
 		}
-		
+		const unLike = (item)=>{
+			data.unLikeList.push(item)
+		}
 		let cleardata = async ()=>{
 			let list = []
 			if(data.openType == 'toProduct'){
@@ -195,11 +200,13 @@ export default defineComponent({
 			});
 			let emitData = {
 				status:'add',
-				generateCourse:generateCourse,
+				addList:generateCourse,
+				deleteList:data.unLikeList,
 			}
 			emit('editToolsSuccess',emitData)
 			data.openType = ''
 			data.designTools = false
+			data.unLikeList = []
 			store.commit('toolsClear')
 		}
 		const designLike = ()=>{
@@ -401,6 +408,7 @@ export default defineComponent({
 			changeCanvas,
 			share,
 			clearPublish,
+			unLike,
 		}
 	},
 	provide() {
@@ -445,11 +453,16 @@ export default defineComponent({
 			height: 100%;
 			> .collectionBox{
 				height: 100%;
-				
+				display: flex;
 				> .canvasBox{
 					height: 100%;
-					flex:1;
+					width: 100%;
+					// flex:1;
+					// width: 99rem;
+					// height: 80rem;
 					display: flex;
+					overflow: hidden;
+					position: relative;
 					&.editCanvas{
 						padding-top: 5rem;
 						display: flex;

src/component/home/tools/deReconstruction/canvas/index.vue

@@ -201,8 +201,8 @@ export default defineComponent({
 	}
 	.custom-tool-btn {
 		position: relative;
-		width: 36px;
+		width: 3.6rem;
-		height: 36px;
+		height: 3.6rem;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -210,7 +210,7 @@ export default defineComponent({
 		border: none;
 		border-radius: 4px;
 		cursor: pointer;
-		font-size: 16px;
+		font-size: 1.6rem;
 		color: #333;
 		transition: all 0.2s ease;
 		i{
@@ -241,11 +241,11 @@ export default defineComponent({
 	transform: translateY(-50%);
 	background-color: rgba(0, 0, 0, 0.7);
 	color: white;
-		padding: 4px 8px;
+	padding: .4rem .8rem;
-		border-radius: 4px;
+	border-radius: .4rem;
-		margin-left: 8px;
+	margin-left: .8rem;
 	white-space: nowrap;
-		font-size: 12px;
+	font-size: 1.2rem;
 	z-index: 10;
 	}
 
@@ -254,8 +254,8 @@ export default defineComponent({
 	position: absolute;
 	top: 50%;
 	right: 100%;
-		margin-top: -5px;
+	margin-top: -.5rem;
-		border-width: 5px;
+	border-width: .5rem;
 	border-style: solid;
 	border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
 	}

src/component/home/tools/poseTransfer/index.vue

@@ -147,7 +147,7 @@ export default defineComponent({
 			default:'',
 		},
 	},
-	emits:[],
+	emit:['unLike'],
 	setup(props,{emit}) {
 		const {t} = useI18n()
 		const store = useStore();
@@ -474,6 +474,9 @@ export default defineComponent({
 					projectId:store.state.Workspace.probjects.id,
 					collectionSortParentId:props.isDesignPage?item.parentId:'',
 				}
+				if(props.isDesignPage){
+					emit('unLike',item)
+				}
 			}
 			Https.axiosPost(Https.httpUrls.poselikeOrDisike, {},{params:value}).then(
 				(rv) => {

src/component/home/tools/toProduct/index.vue

@@ -237,6 +237,7 @@ export default defineComponent({
 			default:false,
 		},
 	},
+	emit:['unLike'],
     setup(props,{emit}) {
 		const store = useStore();
 		let userDetail:any= computed(()=>{
@@ -476,7 +477,6 @@ export default defineComponent({
 			})
 		}
 		let likeFile = (item:any,str:any,index:any) =>{
-			console.log(item)
 			let url
 			let data = {
 				toProductImageResultId:[item.id],
@@ -487,6 +487,9 @@ export default defineComponent({
 				url = Https.httpUrls.productImageLike
 			}else{
 				url = Https.httpUrls.productImageUnLike
+				if(props.isDesignPage){
+					emit('unLike',item)
+				}
 			}
 			Https.axiosPost(url, data).then(
 				(rv) => {

src/store/Detail/designDetailCopy.ts

@@ -126,8 +126,7 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 			}
 		},
 		setCurrentPrintElement(state,data){//临时存放印花和元素点击用来监听在衣服上添加元素
-			if(!data)return		
+			state.currentPrintElement = data?.resData || data
-			state.currentPrintElement = data.resData || data
 		},
 		setCurrentDetailType(state,data){
 			if(state.selectDetail && state.selectDetail.id){

src/tool/https.js

@@ -101,6 +101,7 @@ axios.interceptors.response.use((res) =>{
     }
 }, function(error) {
     if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
+		return
 		clonAllCookie()
 		if(!isLoginTime){
 			isLoginTime = true

src/tool/mdEvent.js

@@ -1,6 +1,6 @@
 const getMousePosition = (e,bor,dom) => {
 	e.stopPropagation()
-	// if(e?.preventDefault)e.preventDefault();
+	if(e?.preventDefault)e.preventDefault();
 	if(bor){
 		const touch = e.changedTouches[0];
 		event = {

src/views/HomeView/library.vue

@@ -437,7 +437,7 @@
 														<div v-for="item in speedList" :class="{active:item.value == speedData.value}" 
 															v-show="(selectCode == 'Moodboard' && item?.value != 'flux') || 
 															(selectCode == 'Sketchboard' && item?.value != 'flux') || 
-															(selectCode == 'Printboard' && item?.value != 'flux')" 
+															(selectCode == 'Printboard' && item?.value != 'wx')" 
 															:key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 													</div>
 													<div class="content" v-else v-show="speedState">
@@ -868,10 +868,10 @@ export default defineComponent({
 		const saveBase64Img = (rv)=>{
 			let item = imgList.value[pageData.editIndex]
 			if(uploadGenerate.value !='Upload'){
-				item = generateList.value[selectCode.value]
+				item = generateList.value[selectCode.value][pageData.editIndex]
 				item.designType = 'Generate'
 				item.level1Type = selectCode.value
-				return
+				item.level2Type = item.category
 			}
 			let data = {
 				"base64": rv,
@@ -891,6 +891,7 @@ export default defineComponent({
 					// rv.categoryValue = props.item?.categoryValue
 					// props.list[props.index] = rv
 					item.url = rv.url
+					item.imgUrl = rv.url
 				}
 			).catch(res=>{
 			});
@@ -992,11 +993,17 @@ export default defineComponent({
 				if(newVal.value == 'extract'){
 					this.speedData = this.extractList[0]
 				}else if(newVal.value == 'Logo' || newVal.value == 'Slogan'){
-					this.speedData.value = ''
+					this.speedData = {
-					this.speedData.label = ''
+						value:'',
+						label:''
+					}
+				}else{
+					if(newVal.value == "Pattern"){
+						this.speedData = this.speedList[1]
 					}else{
 						this.speedData = this.speedList[0]
 					}
+				}
 				this.speedState = false
 			}
 		},