From 841416f2d0fdd45f01bcb63f2756277242a07353 Mon Sep 17 00:00:00 2001 From: zhangyh Date: Wed, 12 Nov 2025 10:12:43 +0800 Subject: [PATCH 01/10] =?UTF-8?q?style:=20=E4=B8=8A=E4=BC=A0trigger?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/home/tools/toProduct/index.vue | 118 ++++++++++--------- 1 file changed, 65 insertions(+), 53 deletions(-) diff --git a/src/component/home/tools/toProduct/index.vue b/src/component/home/tools/toProduct/index.vue index 8de3187d..5fb58c33 100644 --- a/src/component/home/tools/toProduct/index.vue +++ b/src/component/home/tools/toProduct/index.vue @@ -384,10 +384,10 @@ export default defineComponent({ type: Boolean, default: false }, - isState:{ - type:Boolean, - default:false, - }, + isState: { + type: Boolean, + default: false + } }, emit: ['unLike'], setup(props, { emit }) { @@ -406,8 +406,7 @@ export default defineComponent({ const createProbject: any = inject('createProbject', () => {}) let productImgData: any = reactive({ isShowMark: false, - fileList:{ - }, + fileList: {}, searchName: { ToProductImage: '', Relight: '' @@ -416,37 +415,37 @@ export default defineComponent({ isProductimg: false, //开始生成 selectProductimgList: [], generateList: { - ToProductImage:computed(()=>{ - if(!route.query?.id && route.query.tools == 'toProduct'){ - return [] - }else{ - return store.state.HomeStoreModule.toProductImageList.list - } - }), - Relight:computed(()=>{ - if(!route.query?.id && route.query.tools == 'relight'){ - return [] - }else{ - return store.state.HomeStoreModule.relightList.list - } - }), + ToProductImage: computed(() => { + if (!route.query?.id && route.query.tools == 'toProduct') { + return [] + } else { + return store.state.HomeStoreModule.toProductImageList.list + } + }), + Relight: computed(() => { + if (!route.query?.id && route.query.tools == 'relight') { + return [] + } else { + return store.state.HomeStoreModule.relightList.list + } + }) }, selectObject: computed(() => store.state.Workspace.probjects), //选择的项目 likeList: { - ToProductImage:computed(()=>{ - if(!route.query?.id && route.query.tools == 'toProduct'){ - return [] - }else{ - return store.state.HomeStoreModule.toProductImageList.likedList - } - }), - Relight:computed(()=>{ - if(!route.query?.id && route.query.tools == 'relight'){ - return [] - }else{ - return store.state.HomeStoreModule.relightList.likedList - } - }), + ToProductImage: computed(() => { + if (!route.query?.id && route.query.tools == 'toProduct') { + return [] + } else { + return store.state.HomeStoreModule.toProductImageList.likedList + } + }), + Relight: computed(() => { + if (!route.query?.id && route.query.tools == 'relight') { + return [] + } else { + return store.state.HomeStoreModule.relightList.likedList + } + }) } as any, similarity: 30, brightenValue: 1, @@ -520,19 +519,23 @@ export default defineComponent({ return store.state.UploadFilesModule.modularData }) let userlikeGroupId = 0 - watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{ - setFileList() - }) - const setFileList = () => { - if(props.isDesignPage)return - if(!route.query?.id && route.query.tools){ - productImgData.fileList[props.productimgMenu.value] = [] - }else{ - productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement - if(productImgData.fileList[props.productimgMenu.value][0]){ - productImgData.fileList[props.productimgMenu.value][0].isChecked = true - } - } + watch( + () => store.state.HomeStoreModule.uploadElement.length, + (newVal, oldVal) => { + setFileList() + } + ) + const setFileList = () => { + if (props.isDesignPage) return + if (!route.query?.id && route.query.tools) { + productImgData.fileList[props.productimgMenu.value] = [] + } else { + productImgData.fileList[props.productimgMenu.value] = + store.state.HomeStoreModule.uploadElement + if (productImgData.fileList[props.productimgMenu.value][0]) { + productImgData.fileList[props.productimgMenu.value][0].isChecked = true + } + } } const openSetData = (designList: any) => { // cleardata() @@ -545,7 +548,7 @@ export default defineComponent({ productImgData.fileList[props.productimgMenu.value] = designList return } - setFileList() + setFileList() userlikeGroupId = selectDesignList.value.userlikeGroupId // getLikeProductImage(selectDesignList.value.userlikeGroupId) productImgDom.generalDragLeft.setItemPosition() @@ -1260,15 +1263,14 @@ export default defineComponent({ // &.active > .item { - // margin-right: 1rem; - // width: calc(100% / 2 - 0.5rem); - width: 9.6rem; + margin-right: 1rem; + width: calc(100% / 2 - 0.5rem); cursor: pointer; overflow: hidden; display: flex; justify-content: center; flex-shrink: 0; - height: 13.4rem; + height: 25rem; position: relative; // &.active{ // border: 2px solid; @@ -1539,6 +1541,16 @@ export default defineComponent({ } +.upload_file_item { + :deep(.ant-upload-picture-card-wrapper) { + .ant-upload-list-picture-card { + .ant-upload-select-picture-card { + width: 9.6rem; + height: 13.4rem; + } + } + } +} .prompt-container { margin-top: 4rem; margin-bottom: 3rem; @@ -1556,7 +1568,7 @@ export default defineComponent({ } } } - .input_box_btnBox{ + .input_box_btnBox { padding-bottom: 4rem; } .asistant-btn { From e0d1be0cfa9b24d4a004475db5c1da9fdbbcd598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Wed, 12 Nov 2025 10:26:43 +0800 Subject: [PATCH 02/10] =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E4=B8=8B=E5=88=A0=E9=99=A4=E9=80=89=E4=B8=AD=E5=9B=BE=E5=B1=82?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=BF=80=E6=B4=BB=E7=AC=AC=E4=B8=80=E4=B8=AA?= =?UTF-8?q?=E5=9B=BE=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Canvas/CanvasEditor/commands/LayerCommands.js | 3 +++ src/component/Canvas/CanvasEditor/managers/LayerManager.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js index 67cb05e4..cec13748 100644 --- a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js @@ -608,6 +608,9 @@ export class RemoveLayerCommand extends Command { ); if (newActiveLayer) { this.activeLayerId.value = newActiveLayer.id; + if(this.canvas.toolId === OperationType.SELECT){ + this.layerManager.selectLayerObjects(newActiveLayer.id); + } } else { this.activeLayerId.value = null; } diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index c885c2ac..74095eda 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -1195,7 +1195,7 @@ export class LayerManager { } /** - * 选择图层下的所有对象 + * 选择图层下的所有画布对象 * @param {string} layerId 图层ID * @returns {fabric.ActiveSelection|null} 返回活动选择组或null */ From ec61db9029ec57e1adcdb74745baf25f762dc771 Mon Sep 17 00:00:00 2001 From: zhangyh Date: Wed, 12 Nov 2025 13:24:30 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9prompt=E9=A1=BA?= =?UTF-8?q?=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/home/tools/toProduct/Prompt.vue | 6 +++--- src/component/home/tools/toProduct/index.vue | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/component/home/tools/toProduct/Prompt.vue b/src/component/home/tools/toProduct/Prompt.vue index 15e20576..d4595adf 100644 --- a/src/component/home/tools/toProduct/Prompt.vue +++ b/src/component/home/tools/toProduct/Prompt.vue @@ -83,7 +83,7 @@ + + diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue index 8aee5d88..24a4f9a5 100644 --- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue +++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue @@ -68,6 +68,12 @@ {{ t("Canvas.flipVertical") }}

+
+ +

+ {{ t("Canvas.cropAndAdd") }} +

+
@@ -82,6 +88,7 @@ import { useI18n } from "vue-i18n"; import { ToolCommand } from "../commands/ToolCommands"; import { OperationType } from "../utils/layerHelper"; + import { loadImageUrlToLayer } from "../utils/imageHelper"; import { TransformCommand } from "../commands/StateCommands"; const props = defineProps({ canvas: { @@ -262,6 +269,21 @@ finalState.flipY = !finalState.flipY; transformObject(obj, initialState, finalState); }; + // 裁剪图片 + const cropImage = inject("cropImage"); + const clickCropImage = async (obj) => { + const base64 = await props.layerManager.getLayerToBase64(obj.layerId); + if(base64) cropImage(base64).then((res) => { + loadImageUrlToLayer({ + imageUrl: res, + layerManager: props.layerManager, + canvas: props.canvas, + toolManager: props.toolManager, + }).then(res=>{ + console.log("========",res); + }); + }); + }; const updateActiveObjects = (arrs, keys) => { arrs.forEach((v) => { diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 33ccd3f1..31c01762 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -23,6 +23,7 @@ import { BrushStore } from "./store/BrushStore"; import cuowuImg from "@/assets/images/homePage/cuowu.svg"; import { Https } from "@/tool/https"; import SelectImages from "@/component/common/SelectImages.vue"; +import CropImage from "./components/CropImage.vue"; import { UrlToFile } from "@/tool/util"; // import { MinimapManager } from "./managers/minimap/MinimapManager"; @@ -907,6 +908,12 @@ const changeCanvas = async (command) => { } }; +const cropImageRef = ref(null); +const cropImage = (url) => { + return cropImageRef.value.open(url) +}; +provide("cropImage", cropImage); // 提供给子组件使用 + // 提供外部ref实例方法 defineExpose({ layers, // 图层数据 @@ -1249,6 +1256,9 @@ defineExpose({ /> + + +