Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

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

@@ -277,16 +277,6 @@
 			clipData.left = x;
 			clipData.img_width = elInfo.width;
 			clipData.img_height = elInfo.height;
-
-			if (!el.value) return;
-			const elh = el.value.offsetHeight;
-			const elsh = el.value.scrollHeight;
-			const elst = el.value.scrollTop;
-			if (y < elst) {
-				el.value.scrollTop = y;
-			} else if (y + clipInfo.height > elst + elh) {
-				el.value.scrollTop = y + clipInfo.height - elh;
-			}
 		};
 		const mouseup = () => {
 			window.removeEventListener("mousemove", mousemove);

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

@@ -21,6 +21,7 @@ const props = defineProps({
     type: Boolean,
     default: true, // 是否显示图层面板
   },
+  isBackgroundChangeable: Boolean,
 });
 
 const emit = defineEmits([
@@ -312,7 +313,7 @@ onMounted(() => {
             "
           />
         </div>
-        <div class="setting-group">
+        <div class="setting-group" v-if="isBackgroundChangeable">
           <span class="setting-label">{{ $t("Canvas.color") }}</span>
           <div class="color-picker-wrapper">
             <input

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

@@ -279,9 +279,7 @@
 				layerManager: props.layerManager,
 				canvas: props.canvas,
 				toolManager: props.toolManager,
-			}).then(res=>{
+			})
-				console.log("========",res);
-			});
 		});
 	};
 

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

@@ -620,12 +620,19 @@ export default {
       // 监听显示文本编辑面板事件
       document.addEventListener("showTextEditor", showEditor);
       document.addEventListener("hideTextEditor", close);
-
+      if(props.canvas) {
+        // props.canvas.on("text:editing:entered", showEditor);
+        props.canvas.on("text:editing:exited", close);
+      }
     });
 
     onUnmounted(() => {
       document.removeEventListener("showTextEditor", showEditor);
       document.removeEventListener("hideTextEditor", close);
+      if(props.canvas) {
+        // props.canvas.off("text:editing:entered", showEditor);
+        props.canvas.off("text:editing:exited", close);
+      }
     });
 
     // 返回所有需要在模板中使用的数据和方法

src/component/Canvas/CanvasEditor/index.vue

@@ -101,7 +101,10 @@ const props = defineProps({
     type: Boolean,
     default: false, // 是否允许擦除背景图层
   },
-
+  isBackgroundChangeable: {
+    type: Boolean,
+    default: true, // 是否允许修改背景图层
+  },
   showFixedLayer: {
     type: Boolean,
     default: false, // 是否显示固定图层
@@ -305,6 +308,7 @@ onMounted(async () => {
     commandManager,
     layerManager,
     toolManager,
+	isRedGreenMode,
 	pasteText: (text) => {
     //   console.log("粘贴的文本:", text);
 	  handleAddText(text);
@@ -530,15 +534,15 @@ onBeforeUnmount(() => {
   //   return; // 开发环境下不卸载组件
   // }
   console.log("onBeforeUnmount  组件卸载，清理资源...");
-  // canvasManager?.dispose?.();
+  canvasManager?.dispose?.();
-  // commandManager?.dispose?.();
+  commandManager?.dispose?.();
-  // layerManager?.dispose?.();
+  layerManager?.dispose?.();
-  // keyboardManager?.dispose?.();
+  keyboardManager?.dispose?.();
-  // toolManager?.dispose?.();
+  toolManager?.dispose?.();
-  // liquifyManager?.dispose?.();
+  liquifyManager?.dispose?.();
-  // selectionManager?.dispose?.();
+  selectionManager?.dispose?.();
-  // redGreenModeManager?.dispose?.();
+  redGreenModeManager?.dispose?.();
-  // minimapManager?.dispose?.();
+//   minimapManager?.dispose?.();
   canvasManager = null;
   commandManager = null;
   layerManager = null;
@@ -919,6 +923,7 @@ provide("cropImage", cropImage); // 提供给子组件使用
 const isDragOver = ref(false);
 const canvasDragover = (e) => {
   e.preventDefault();
+  if (isRedGreenMode.value) return;
   const types = e.dataTransfer.types;
   isDragOver.value = types.includes("Files");
 };
@@ -926,12 +931,14 @@ const canvasDragover = (e) => {
 // 处理画布容器的拖离事件
 const canvasDragleave = (e) => {
   e.preventDefault();
+  if (isRedGreenMode.value) return;
   isDragOver.value = false;
 };
 
 // 处理画布容器的拖放事件
 const canvasDragdrop = (e) => {
   e.preventDefault();
+  if (isRedGreenMode.value) return;
   isDragOver.value = false;
   const files = e.dataTransfer.files;
   for (const file of files) {
@@ -1149,6 +1156,7 @@ defineExpose({
         :brushSize="brushSize"
         :enabledRedGreenMode="enabledRedGreenMode"
         :showLayersPanel="showLayersPanel"
+        :isBackgroundChangeable="isBackgroundChangeable"
         @update:canvasWidth="canvasWidth = $event"
         @update:canvasHeight="canvasHeight = $event"
         @update:canvasColor="canvasColor = $event"
@@ -1209,13 +1217,6 @@ defineExpose({
           :activeTool="activeTool"
         />
 
-        <!-- 文本编辑面板 -->
-        <TextEditorPanel
-          v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager && canvasManager.canvas"
-          :commandManager="commandManager"
-        />
-
         <!-- 液化编辑面板 -->
         <LiquifyPanel
           v-if="canvasManagerLoaded && !enabledRedGreenMode"
@@ -1248,6 +1249,13 @@ defineExpose({
           :activeTool="activeTool"
         />
 
+        <!-- 文本编辑面板 -->
+        <TextEditorPanel
+          v-if="canvasManagerLoaded && !enabledRedGreenMode"
+          :canvas="canvasManager && canvasManager.canvas"
+          :commandManager="commandManager"
+        />
+
         <div class="zoom-info">
           {{ t("Canvas.Scale") }}: {{ currentZoom }}%
           <button class="reset-zoom" @click="resetZoom">

src/component/Canvas/CanvasEditor/managers/LayerManager.js

@@ -2303,9 +2303,9 @@ export class LayerManager {
    */
   dispose() {
     // 清空画布
-    if (this.canvas) {
+    // if (this.canvas) {
-      this.canvas.clear();
+    //   this.canvas.clear();
-    }
+    // }
 
     // 清空图层数据
     if (this.layers && this.layers.value) {

src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js

@@ -65,7 +65,7 @@ export class BrushManager {
       description: "基础铅笔工具，适合精细线条绘制",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/pencil.jpg',
+	imgUrl:'/image/brush/pencil.jpg',
     });
 
     // 注册材质笔刷
@@ -74,7 +74,7 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/texture.jpg',
+	imgUrl:'/image/brush/texture.jpg',
     });
 
     // 注册集成的笔刷类型
@@ -83,63 +83,63 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/crayon.jpg',
+	imgUrl:'/image/brush/crayon.jpg',
     });
     brushRegistry.register("fur", FurBrush, {
       name: this.t("Canvas.Fur"),	
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/fur.jpg',
+	imgUrl:'/image/brush/fur.jpg',
     });
     brushRegistry.register("ink", InkBrush, {
       name: this.t("Canvas.Ink"),
       description: "墨水笔刷，适合书写和绘图",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/ink.jpg',
+	imgUrl:'/image/brush/ink.jpg',
     });
     brushRegistry.register("", LongfurBrush, {
       name: this.t("Canvas.Longfur"),
       description: "长毛发笔刷，适合绘制动物毛皮、草或头发",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/longFur.jpg',
+	imgUrl:'/image/brush/longFur.jpg',
     });
     brushRegistry.register("writing", WritingBrush, {
       name: this.t("Canvas.Writing"),
       description: "书法笔刷，模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/writing.jpg',
+	imgUrl:'/image/brush/writing.jpg',
     });
     brushRegistry.register("marker", MarkerBrush, {
       name: this.t("Canvas.Marker"),
       description: "马克笔笔刷，适合粗线条和填充",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/marker.jpg',
+	imgUrl:'/image/brush/marker.jpg',
     });
     brushRegistry.register("pen", CustomPenBrush, {
       name: this.t("Canvas.Pen"),
       description: "自定义钢笔笔刷，适合书写和绘图",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/pen.jpg',
+	imgUrl:'/image/brush/pen.jpg',
     });
     brushRegistry.register("ribbon", RibbonBrush, {
       name: this.t("Canvas.Ribbon"),
       description: "丝带笔刷，适合创建流动的丝带效果",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/ribbon.jpg',
+	imgUrl:'/image/brush/ribbon.jpg',
     });
     brushRegistry.register("shaded", ShadedBrush, {
       name: this.t("Canvas.Shaded"),
       description: "阴影笔刷，适合创建渐变和阴影效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/shaded.jpg',
+	imgUrl:'/image/brush/shaded.jpg',
     });
 
     brushRegistry.register("spray", SprayBrush, {
@@ -147,7 +147,7 @@ export class BrushManager {
       description: "模拟喷枪效果，创建散点效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/spray.jpg',
+	imgUrl:'/image/brush/spray.jpg',
     });
 
     // brushRegistry.register("sketchy", SketchyBrush);

src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js

@@ -12,6 +12,7 @@ export class KeyboardManager {
    * @param {Object} options.layerManager 图层管理器实例
    * @param {Function} options.pasteText 粘贴文本回调函数
    * @param {Function} options.pasteImage 粘贴图片回调函数
+   * @param {Ref<Boolean>} options.isRedGreenMode 是否为红绿模式
    * @param {HTMLElement} options.container 容器元素，用于添加事件监听
    */
   constructor(options = {}) {
@@ -21,6 +22,7 @@ export class KeyboardManager {
     this.container = options.container || document;
 	this.pasteText = options.pasteText || (() => {});
 	this.pasteImage = options.pasteImage || (() => {});
+	this.isRedGreenMode = options.isRedGreenMode;
 
     // 检测平台类型
     this.platform = this.detectPlatform();
@@ -207,6 +209,7 @@ export class KeyboardManager {
    */
   handlePaste(event) {
     event.preventDefault(); // 阻止默认粘贴行为
+    if(this.isRedGreenMode.value) return;
 	const text = event.clipboardData?.getData("text/plain") || "";
 	if(/^aida_copy_canvas_layer/.test(text)) return;
 	const items = event.clipboardData?.items || [];
@@ -429,30 +432,35 @@ export class KeyboardManager {
       case "copy":
         // 复制逻辑
         console.log("复制当前选中图层");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.copyLayer(this.layerManager.activeLayerId.value);
         break;
 
       case "paste":
         // 粘贴逻辑
         console.log("粘贴");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.pasteLayer();
         break;
 
       case "cut":
         // 剪切逻辑
         console.log("剪切");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.cutLayer(this.layerManager.activeLayerId.value);
         break;
 
       case "delete":
         // 删除逻辑
         console.log("删除");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.removeLayer(this.layerManager.activeLayerId.value);
         break;
 
       case "selectAll":
         // 全选逻辑
         console.log("全选");
+		if(this.isRedGreenMode.value) return;
         // 这里需要实现全选逻辑 TODO:  是否在选择模式下才可以全选？
         if (this.layerManager) {
           this.layerManager.selectAll();
@@ -728,18 +736,7 @@ export class KeyboardManager {
    */
   dispose() {
     // 移除事件监听
-    this.container.removeEventListener("keydown", this._handleKeyDown);
+    this.removeEvents();
-    this.container.removeEventListener("keyup", this._handleKeyUp);
-    this.container.removeEventListener("paste", this._handlePaste);
-
-    // 如果有触摸事件，也移除它们
-    if (this.isTouchDevice) {
-      this.container.removeEventListener("touchstart", this._handleTouchStart);
-      this.container.removeEventListener("touchmove", this._handleTouchMove);
-      this.container.removeEventListener("touchend", this._handleTouchEnd);
-      this.container.removeEventListener("touchcancel", this._handleTouchEnd);
-    }
-
     // 清除引用
     this.toolManager = null;
     this.commandManager = null;

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

@@ -0,0 +1,82 @@
+<template>
+  <div ref="modalContainer"></div>
+  <a-modal
+    class="prompt-modal generalModel"
+    v-model:visible="showModal"
+    :footer="null"
+    :get-container="() => $refs.modalContainer"
+    width="78%"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    wrapClassName="#app"
+    :keyboard="false"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="handleClose()">
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="title-container">
+      <div class="title">{{ $t('ProductImg.PromptAssit') }}</div>
+      <div class="sub-title">{{ $t('ProductImg.AssitSubTitle') }}</div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef } from 'vue'
+
+import { downloadIamge } from '@/tool/util'
+import { useI18n } from 'vue-i18n'
+const { t, locale } = useI18n()
+
+const modalContainer = useTemplateRef('modalContainer')
+const showModal = defineModel<boolean>('showModal', { required: true })
+
+const handleClose = () => {
+  showModal.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.prompt-modal {
+  .title-container {
+    .title {
+      font-size: 3.5rem;
+      color: #181818;
+    }
+    .sub-title {
+      font-size: 2rem;
+      font-weight: 400;
+      color: #000;
+    }
+  }
+}
+</style>

src/component/modules/generalMiniCanvas.vue

@@ -5,6 +5,7 @@
 				@canvasInit="canvasInit"
 				@changeCanvas="changeCanvas"
 				is-general
+				:isBackgroundChangeable="false"
 				ref="editCanvas"></editCanvas>
 		</div>
 		<div class="btn">

src/lang/cn.ts

@@ -285,7 +285,7 @@ export default {
     AssitSubTitle: '您可以复制并使用以下提示词：',
     CopySuccess: '已复制到剪贴板',
     CopyFiled: '复制失败',
-    noPrompt:'请输入提示词'
+    noPrompt: '请输入提示词'
   },
   poseTransfer: {
     SelectDesign: '产品图',
@@ -308,7 +308,11 @@ export default {
     UploadWithModel:
       '创建模特穿着该服装的真实感摄影棚照片。若原有模特存在则保留，否则生成合适模特。采用站立姿势面向镜头。精确保留服装细节——图案、颜色、质地及装饰元素。', // 上传线稿,带模特
     UploadWithoutModel:
-      '专业产品摄影：服装以自然形态展示，无模特。采用影棚灯光。保留精确细节——图案、色彩、质感、装饰元素。' // 上传线稿,不带模特
+      '专业产品摄影：服装以自然形态展示，无模特。采用影棚灯光。保留精确细节——图案、色彩、质感、装饰元素。', // 上传线稿,不带模特
+    VideoType: '视频类型',
+    FirstFrame: '首帧',
+    FirstAndLastFrames: '首帧和尾帧',
+    FirstFrameAndSkeleton: '首帧和骨架'
   },
   LibraryPage: {
     library: '收藏',

src/lang/en.ts

@@ -295,7 +295,7 @@ export default {
     AssitSubTitle: 'You can copy following prompt and try:',
     CopySuccess: 'Copied to clipboard',
     CopyFiled: 'Failed to copy',
-    noPrompt:'Please enter prompt'
+    noPrompt: 'Please enter prompt'
   },
   poseTransfer: {
     SelectDesign: 'Product image',
@@ -318,7 +318,11 @@ export default {
     UploadWithModel:
       'Create realistic studio photo with model wearing this garment. Keep original model if present, or generate appropriate model. Standing pose, facing camera. Preserve exact garment details - patterns, colors, textures, embellishments.', // 上传线稿,带模特
     UploadWithoutModel:
-      'Professional product photo: garment displayed with natural shape, no model. Studio lighting. Preserve exact details - patterns, colors, textures, embellishments.' // 上传线稿,不带模特
+      'Professional product photo: garment displayed with natural shape, no model. Studio lighting. Preserve exact details - patterns, colors, textures, embellishments.', // 上传线稿,不带模特
+    VideoType: 'Video Type',
+    FirstFrame: 'First frame',
+    FirstAndLastFrames: 'First and last frames',
+    FirstFrameAndSkeleton: 'First frame and skeleton',
   },
   LibraryPage: {
     library: 'Library',

src/store/homeStore/homeStore.ts

@@ -41,6 +41,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 			likedList:[],
 		},
 		uploadElement:[],
+		lastFrameList:[],
 		poseTransfer:{
 			list:[],
 			likedList:[],
@@ -70,6 +71,19 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
     mutations:{
 		setshowSketchList(state,data){
             state.showSketchList = data
+        },
+		setPoseTransferLastFrameList(state,data){
+			console.log('设置尾帧store-------------')
+			// 支持两种方式：set 替换整个列表；add/删除与 uploadElement 一致
+			if(data.str === 'set'){
+				state.poseTransfer.lastFrameList = data.list || []
+				return
+			}
+			if(data.str === 'add'){
+				state.poseTransfer.lastFrameList.unshift(...(data.list || []))
+			}else{
+				state.poseTransfer.lastFrameList.splice(data.index,1)
+			}
         },
         setDesignCollectionList(state,data){
             state.designCollectionList = data