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

2025-11-14 10:07:25 +08:00
parent 79f0ecb2b4 80472a9cec
commit 23c547c4cc
14 changed files with 1438 additions and 1093 deletions
--- a/src/component/Canvas/CanvasEditor/components/CropImage.vue
+++ b/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);
--- a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
+++ b/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
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
+++ b/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);
-			});
+			})
 		});
 	};

--- a/src/component/Canvas/CanvasEditor/components/TextEditorPanel.vue
+++ b/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);
+      }
    });

    // 返回所有需要在模板中使用的数据和方法
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/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?.();
-  // commandManager?.dispose?.();
-  // layerManager?.dispose?.();
-  // keyboardManager?.dispose?.();
-  // toolManager?.dispose?.();
-  // liquifyManager?.dispose?.();
-  // selectionManager?.dispose?.();
-  // redGreenModeManager?.dispose?.();
-  // minimapManager?.dispose?.();
+  canvasManager?.dispose?.();
+  commandManager?.dispose?.();
+  layerManager?.dispose?.();
+  keyboardManager?.dispose?.();
+  toolManager?.dispose?.();
+  liquifyManager?.dispose?.();
+  selectionManager?.dispose?.();
+  redGreenModeManager?.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">
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -2303,9 +2303,9 @@ export class LayerManager {
   */
  dispose() {
    // 清空画布
-    if (this.canvas) {
-      this.canvas.clear();
-    }
+    // if (this.canvas) {
+    //   this.canvas.clear();
+    // }

    // 清空图层数据
    if (this.layers && this.layers.value) {
--- a/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
+++ b/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);
--- a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
+++ b/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.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.removeEvents();
    // 清除引用
    this.toolManager = null;
    this.commandManager = null;
--- a/src/component/home/tools/poseTransfer/Tips.vue
+++ b/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>
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -5,6 +5,7 @@
 				@canvasInit="canvasInit"
 				@changeCanvas="changeCanvas"
 				is-general
+				:isBackgroundChangeable="false"
 				ref="editCanvas"></editCanvas>
 		</div>
 		<div class="btn">
--- a/src/lang/cn.ts
+++ b/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: '收藏',
@@ -1225,9 +1229,9 @@ export default {
    basic: '基础',
    flipHorizontal: '水平翻转',
    flipVertical: '垂直翻转',
-	cropAndAdd: '裁剪并添加',
-	cropImage: '裁剪图片',
-	group: '组合',
+    cropAndAdd: '裁剪并添加',
+    cropImage: '裁剪图片',
+    group: '组合',
    //长毛笔
    FurSettings: '长毛笔设置',
    FurLength: '毛发长度',
--- a/src/lang/en.ts
+++ b/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',
@@ -1260,9 +1264,9 @@ export default {
    basic: 'Basic',
    flipHorizontal: 'Horizontal Flip',
    flipVertical: 'Vertical Flip',
-	cropAndAdd: 'Crop and Add',
-	cropImage: 'Crop Image',
-	group: 'Group',
+    cropAndAdd: 'Crop and Add',
+    cropImage: 'Crop Image',
+    group: 'Group',
    //长毛笔
    FurSettings: 'FurSettings',
    FurLength: 'Fur Length',
--- a/src/store/homeStore/homeStore.ts
+++ b/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