Merge remote-tracking branch 'origin/dev_vite' into StableVersion

src/component/Administrator/affiliate/affiliateAudit/affiliateAudit.vue

@@ -69,7 +69,7 @@
 						<div class="operate_item" @click="editAffiliate(record)">Edit</div>
 					</div>
 					<div v-else-if="column?.openType" @click="openDetail(record,column?.openType)">
-						{{ text }} HDK
+						{{ text }} HKD
 					</div>
 				</template>
 			</a-table>
@@ -109,20 +109,26 @@ export default defineComponent({
                     key: "username",
                 },
                 {
-                    title: 'Create Time',
-                    align: "center",
-                    width: 200,
-                    dataIndex: "createTime",
-                    key: "createTime",
-					sorter: true,
-                },{
                     title: 'State',
                     align: "center",
                     ellipsis: true,
                     width: 100,
                     dataIndex: "status",
                     key: "status",
-					  
+                },{
+                    title: 'Commission Percent',
+                    align: "center",
+                    ellipsis: true,
+                    width: 100,
+                    dataIndex: "commissionPercent",
+                    key: "commissionPercent",
+					customRender: (record: any) => {
+						if(record.text){
+							return record.text+'%'
+						}else{
+							return '-'
+						}
+                    },
                 },{
                     title: 'Total income',
                     align: "center",
@@ -154,6 +160,13 @@ export default defineComponent({
                     width: 250,
                     dataIndex: "link",
                     key: "link",
+                },{
+                    title: 'Create Time',
+                    align: "center",
+                    width: 200,
+                    dataIndex: "createTime",
+                    key: "createTime",
+					sorter: true,
                 },{
                     title: 'Updata Time',
                     align: "center",

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

@@ -10,7 +10,7 @@
   z-index: 6;
   overflow-y: auto;
   height: 100%;
-  max-height: 85vh;
+  max-height: 70vh;
   -webkit-overflow-scrolling: touch;
 }
 .layers-header {

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

@@ -12,8 +12,8 @@
   user-select: none;
   z-index: 6;
   overflow-y: auto;
-  height: 100%;
+  width: 100%;
-  max-height: 85vh;
+  // max-height: 70vh;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -586,7 +586,7 @@
 // 响应式设计
 @media (max-width: 768px) {
   .layers-panel-inner {
-    max-height: 70vh;
+    // max-height: 70vh;
   }
 
   .layer-item {

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

@@ -0,0 +1,656 @@
+.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;
+  width: 100%;
+  -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) {
+  .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/index.vue

@@ -20,11 +20,10 @@ import { SelectionManager } from "./managers/selection/SelectionManager";
 import { RedGreenModeManager } from "./managers/RedGreenModeManager";
 import texturePresetManager from "./managers/brushes/TexturePresetManager";
 import { BrushStore } from "./store/BrushStore";
-import cuowuImg from '@/assets/images/homePage/cuowu.svg'
+import cuowuImg from "@/assets/images/homePage/cuowu.svg";
 import { Https } from "@/tool/https";
-import SelectImages from '@/component/common/SelectImages.vue'
+import SelectImages from "@/component/common/SelectImages.vue";
-import { UrlToFile } from '@/tool/util'
+import { UrlToFile } from "@/tool/util";
-
 
 // import { MinimapManager } from "./managers/minimap/MinimapManager";
 
@@ -105,14 +104,16 @@ const props = defineProps({
     type: Boolean,
     default: false, // 是否显示固定图层
   },
-  isGeneral: { // 从generalMiniCanvas来的
+  isGeneral: {
+    // 从generalMiniCanvas来的
     type: Boolean,
-    default:false
+    default: false,
   },
-  isEdit: { // 从design点击喜欢过的图片,再点击顶部的编辑图标
+  isEdit: {
+    // 从design点击喜欢过的图片,再点击顶部的编辑图标
     type: Boolean,
-    default: false
+    default: false,
-  }
+  },
 });
 
 // 引用和状态
@@ -418,8 +419,7 @@ onMounted(async () => {
 
   // 添加删除按钮
   // if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer)
-	addRemoveBtn(removeLayer)
+  addRemoveBtn(removeLayer);
-
 
   // 触发组件初始化事件
   nextTick(() => {
@@ -468,13 +468,13 @@ onMounted(async () => {
   // 使用window的resize事件代替ResizeObserver
   // 只有当窗口大小变化时才更新画布尺寸
   //   window.addEventListener("resize", handleWindowResize);
-	if(props.config.initZoom) {
+  if (props.config.initZoom) {
     const width = canvasManager.width;
     const height = canvasManager.height;
     const cwidth = props.config.width;
     const cheight = props.config.height;
-		let zoom = Math.min(1,width/cwidth,height/cheight);
+    let zoom = Math.min(1, width / cwidth, height / cheight);
-		if(zoom < 1) zoom -= 0.05;
+    if (zoom < 1) zoom -= 0.05;
     setZoom(zoom); // 设置画布缩放
   }
 });
@@ -518,7 +518,7 @@ onBeforeUnmount(() => {
   liquifyManager = null;
   selectionManager = null;
   redGreenModeManager = null;
-//   fabric.Object.prototype.controls.deleteControl = undefined;
+  //   fabric.Object.prototype.controls.deleteControl = undefined;
 
   // 移除window resize事件监听
   //   window.removeEventListener("resize", handleWindowResize);
@@ -541,18 +541,17 @@ function handleWindowResize() {
 function resetZoom() {
   canvasManager.resetZoom();
 }
-
 function setZoom(zoom) {
-	setTimeout(()=>{
+  setTimeout(() => {
     if (!canvasManager) return;
-  const newZoom = Math.max(zoom, 0.1); // 减少10%，最小0.1倍
+    const newZoom = Math.max(zoom, 0.1);
     // 使用画布中心作为缩放点
     const centerPoint = {
       x: canvasManager.canvas.width / 2,
       y: canvasManager.canvas.height / 2,
     };
     canvasManager.animateZoom(centerPoint, newZoom);
-	})
+  });
 }
 
 function zoomIn() {
@@ -645,35 +644,36 @@ function moveLayerDown(layerId) {
   layerManager.moveLayer(layerId, "down");
 }
 
-function addRemoveBtn(fun){//添加删除按钮
+function addRemoveBtn(fun) {
-	const deleteIcon = cuowuImg
+  //添加删除按钮
+  const deleteIcon = cuowuImg;
   // 创建删除图片元素
-	let deleteImg = document.createElement('img')
+  let deleteImg = document.createElement("img");
-	deleteImg.src = deleteIcon
+  deleteImg.src = deleteIcon;
   function renderIcon(icon) {
     return function (ctx, left, top, styleOverride, fabricObject) {
       var size = this.cornerSize;
       ctx.save();
       ctx.translate(left, top);
       ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
-			ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
+      ctx.drawImage(icon, -size / 3, -size / 3, size / 1.5, size / 1.5);
       ctx.restore();
-		}
+    };
   }
   fabric.Object.prototype.controls.deleteControl = new fabric.Control({
     x: 0.5,
     y: -0.5,
     offsetY: -16,
     offsetX: 16,
-		cursorStyle: 'pointer',
+    cursorStyle: "pointer",
-		mouseUpHandler:deleteFun,
+    mouseUpHandler: deleteFun,
     render: renderIcon(deleteImg),
-		cornerSize: 24
+    cornerSize: 24,
-	})
+  });
 }
 
-function deleteFun(){
+function deleteFun() {
-	removeLayer(layerManager.activeLayerId.value)
+  removeLayer(layerManager.activeLayerId.value);
 }
 
 function removeLayer(layerId) {
@@ -748,14 +748,14 @@ function handleImageUpload(event) {
 
 const selectImages = ref(null);
 const handleImageSelect = (data) => {
-  UrlToFile(data.url,data.name).then((file)=>{
+  UrlToFile(data.url, data.name).then((file) => {
-    handleImageUpload({ target: { files: [file] } })
+    handleImageUpload({ target: { files: [file] } });
-  })
+  });
-}
+};
 function triggerLibrary() {
   // console.log('CanvasEditor', '打开收藏')
   if (props.isGeneral || props.isEdit) {
-    selectImages.value.init()
+    selectImages.value.init();
   } else {
     emit("trigger-library");
   }
@@ -858,14 +858,14 @@ const changeCanvas = async (command) => {
     ...command, // 传递完整的命令数据
   };
   emit("changeCanvas", commandData);
-  if(command.canUndo || command.canRedo){
+  if (command.canUndo || command.canRedo) {
-	setTimeout(async ()=>{
+    setTimeout(async () => {
       const imageData = await canvasManager.exportImage({
         restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
-			isCropByBg:true,
+        isCropByBg: true,
       });
       emit("trigger-red-green-mouseup", imageData);
-	},100)
+    }, 100);
   }
 };
 
@@ -1108,7 +1108,10 @@ defineExpose({
           </template>
           <!-- 扩展插槽 -->
           <template #customToolsBottom="{ toolButtonProps }">
-            <slot name="customToolsBottom" :tool-button-props="toolButtonProps" />
+            <slot
+              name="customToolsBottom"
+              :tool-button-props="toolButtonProps"
+            />
           </template>
         </ToolsSidebar>
       </div>
@@ -1131,14 +1134,14 @@ defineExpose({
         <!-- 文本编辑面板 -->
         <TextEditorPanel
           v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager?.canvas"
+          :canvas="canvasManager && canvasManager.canvas"
           :commandManager="commandManager"
         />
 
         <!-- 液化编辑面板 -->
         <LiquifyPanel
           v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager?.canvas"
+          :canvas="canvasManager && canvasManager.canvas"
           :commandManager="commandManager"
           :liquifyManager="liquifyManager"
           :layerManager="layerManager"
@@ -1148,7 +1151,7 @@ defineExpose({
         <!-- 选区面板 -->
         <SelectionPanel
           v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager?.canvas"
+          :canvas="canvasManager && canvasManager.canvas"
           :commandManager="commandManager"
           :selectionManager="selectionManager"
           :layerManager="layerManager"
@@ -1246,7 +1249,8 @@ defineExpose({
   flex-direction: column;
   /* height: 100vh; */
   background-color: #ffffff;
-  font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
   position: absolute;
   left: 0;
   right: 0;
@@ -1472,7 +1476,9 @@ button:hover {
   transition: width 0.3s ease;
   background: #fff;
   width: 35rem;
-  max-height: 85vh;
+  max-height: 90%;
+  display: flex;
+  overflow: hidden;
   box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
   backdrop-filter: blur(2px); /* 添加模糊效果 */
   -webkit-backdrop-filter: blur(2px);

src/component/home/design/index.vue

@@ -169,11 +169,11 @@
 													)">
 													<img class="content_img" 
 														v-if="design?.resultType == 'PoseTransfer' && design?.firstFrameUrl" 
-														:src="design?.firstFrameUrl" alt="" 
+														v-lazy="design?.firstFrameUrl" alt="" 
 														@mouseenter.stop="gifPlay($event,design)"
 														@mouseleave.stop="gifPause($event,design)" >
 													<!-- <div :style="{'background-image': `url(${design?.designOutfitUrl||design?.url})`}" class="content_img" v-if="design?.designOutfitUrl||design?.url" :key="design?.designOutfitUrl" designType="like" :index="index"></div> -->
-													<img class="content_img" v-else-if="design?.designOutfitUrl||design?.url" :src="design?.designOutfitUrl||design?.url"
+													<img class="content_img" v-else-if="design?.designOutfitUrl||design?.url" v-lazy="design?.designOutfitUrl||design?.url"
 														:key="design?.status" designType="like" :index="index"/>
 													<a-spin v-show="!design?.designOutfitUrl && !design?.url && !design?.firstFrameUrl" size="large"></a-spin>
 
@@ -250,10 +250,10 @@
 														)">
 														<img class="content_img" 
 															v-if="design.resultType == 'PoseTransfer'" 
-															:src="design.firstFrameUrl" alt="" 
+															v-lazy="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"/>
+														<img class="content_img" v-show="!design?.generateAwait" v-lazy="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
 														<a-spin v-show="design?.generateAwait" size="large"></a-spin>
 													</div> 
 													<div class="btn">
@@ -1098,9 +1098,12 @@ export default defineComponent({
 						generateCourseItem.oldSort = generateCourseItem.sort
 						generateCourseItem.sort = list[index]?.childList.length + 1
 						if(data.status == 'add'){
+							if(list[index]?.childList.filter((item:any)=>(item.id == generateCourseItem?.id)).length == 0){
 								if(str == 'noBatch')upDataSort(generateCourseItem,index,str)
+								// list[index]?.childList.push(generateCourseItem)
 								list[index]?.childList.push(generateCourseItem)
 							}
+						}
 					}else{
 						let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
 						if(index != -1){
@@ -1108,8 +1111,10 @@ export default defineComponent({
 								list[index].childList = []
 							}
 							if(data.status == 'add'){
+								if(list[index]?.childList.filter((item:any)=>(item.id == generateCourseItem?.id)).length == 0){
 									if(str == 'noBatch')upDataSort(generateCourseItem,index,str)
 									list[index]?.childList.push(generateCourseItem)
+								}
 							}else{
 								upDataSuccess(generateCourseItem)
 								// let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem?.oldId || generateCourseItem?.id))

src/component/home/design/tools.vue

@@ -257,7 +257,7 @@ export default defineComponent({
 				{value:'disposeMoodboard',name:'Entirety Moodboard',nameCn:'整体情绪版'},
 				{value:'moodboardFiles',name:'Moodboard',nameCn:'情绪版'},
 				{value:'printboardFiles',name:'Printboard',nameCn:'印花板'},
-				{value:'sketchboardFiles',name:'Sketchboard',nameCn:'整体情绪版'},
+				{value:'sketchboardFiles',name:'Sketchboard',nameCn:'线稿版'},
 			]
 			allCollectionStr.forEach((itemStr:any)=>{
 				let list = [] as any