aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

画布新增icon

Browse Source
This commit is contained in:
X1627315083
2025-09-15 13:33:42 +08:00
parent e5924fb5e9
commit 4e7126f783
11 changed files with 146 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
View File

@@ -357,6 +357,8 @@ const handleToolClick = (tool) => {
user-select: none;
min-width: 5.8rem;
height: 100%;
/* overflow-y: auto; */
/* overflow-x: hidden; */
}
.red-green-mode {

19
src/component/Detail/DesignDetail.vue
View File

@@ -59,7 +59,7 @@
:key="positionKey"
@canvasReload="canvasReload"
@detailEdit="detailEdit"
@addSketch="()=>isEditPattern.value=false"
@addSketch="()=>isEditPattern.value = ''"
@revocation="revocation"
@oppositeRevocation="oppositeRevocation"
></model>
@@ -87,7 +87,7 @@
</div>
</div>
<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
<canvasBox ref="canvasBox" :key="canvasKey"></canvasBox>
<canvasBox ref="canvasBox" :key="canvasKey || isEditPattern.value" :isEditPattern="isEditPattern.value"></canvasBox>
</div>
<!-- 画布 -->
<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -144,7 +144,7 @@ export default defineComponent({
oppositeRevocationShow:-1,
revocationShow:-1,
isEditPattern:{
value:false,
value:'' as any,
},// 是否编辑图案
canvasKey:0,
singleOveral:{
@@ -421,11 +421,18 @@ export default defineComponent({
store.dispatch('DesignDetail/setSubmit',data)
}
const detailEdit = async (str:any)=>{
if(str == 'edit'){
if(detailData.isEditPattern.value){
if(str){
if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
await detailDom.canvasBox.saveCanvas()
detailData.isEditPattern.value = ''
}else{
if(detailData.isEditPattern.value){
detailDom.canvasBox.editFront(str)
}
detailData.isEditPattern.value = str
}
detailData.isEditPattern.value = !detailData.isEditPattern.value
}else{
detailData.isEditPattern.value = ''
}
}
const canvasReload = async ()=>{

32
src/component/Detail/canvas/index.vue
View File

@@ -23,6 +23,10 @@
<i class="fi fi-sr-layers"></i>
<div class="tool-tooltip">{{ $t('Canvas.editFrontBack') }}</div>
</div>
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" style="margin-top: auto;" @click="editFront('redGreenExample')">
<SvgIcon name="CHelp" size="30" />
<div class="tool-tooltip">{{ $t('Canvas.help') }}</div>
</div>
</template>
</editCanvas>
<!-- <canvasContent ref="canvasContent"></canvasContent> -->
@@ -36,6 +40,7 @@
</editFrontBack> -->
<editCanvas v-if="canvasLoad" :config="canvasConfig"
:enabledRedGreenMode="true"
@canvasInit="canvasInit"
:clothingImageUrl="selectDetail.undividedLayer || selectDetail.path"
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@trigger-red-green-mouseup="frontBackChange"
@@ -43,19 +48,6 @@
imageMode:'contains',
}"
ref="editCanvasBackFront">
<template #customToolsTop="{ toolTopProps }">
<!-- 也可以直接使用普通的按钮 -->
<div class="custom-tool-btn" @click="()=>currentView = 'canvasEditor'">
<i class="fi fi-ss-arrow-small-left" style="font-size: 3.5rem;"></i>
<div class="tool-tooltip">{{ $t('Canvas.back') }}</div>
</div>
</template>
<template #customTools="{ toolButtonProps }">
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('canvasEditor')">
<i class="fi fi-sr-layers"></i>
<div class="tool-tooltip">Edit the front and back sections</div>
</div>
</template>
</editCanvas>
</div>
</div>
@@ -87,6 +79,10 @@ export default defineComponent({
editCanvas
},
props:{
isEditPattern:{
type:String,
default:''
}
},
setup(props,{emit}) {
const store = useStore();
@@ -114,7 +110,7 @@ export default defineComponent({
canvasLoad:false,
canvasConfig:{
} as any,
currentView:'',
currentView:props.isEditPattern,
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
canvasInstance:null as any,
canvasJSON:'',
@@ -202,7 +198,7 @@ export default defineComponent({
let front = detailData.frontBack.front[detailData.imgDomIndex]
let back = detailData.frontBack.back[detailData.imgDomIndex]
if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
if(!front?.oldMaskUrl)front.oldMaskUrl = front.imageUrl
if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
@@ -267,9 +263,11 @@ export default defineComponent({
onBeforeUnmount(()=>{
let front = detailData.frontBack.front[detailData.imgDomIndex]
let back = detailData.frontBack.back[detailData.imgDomIndex]
if(front?.oldImageUrl)front.imageUrl = front.oldImageUrl
if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
console.log(front)
if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
sessionStorage.removeItem('frontBackEdit');
@@ -279,9 +277,7 @@ export default defineComponent({
})
onMounted(()=>{
nextTick(async ()=>{
detailData.currentView = 'canvasEditor'
setTimeout(()=>{
})
// detailData.currentView = 'canvasEditor'
if(detailData.selectDetail.canvasId){
detailData.isShowMark = true
await new Promise((resolve, reject) => {

58
src/component/Detail/model/index.vue
View File

@@ -4,7 +4,7 @@
<div class="back" v-show="isEditPattern.value">
<i class="fi fi-br-angle-left" @click="setBack"></i>
</div>
<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem" :isEditPattern="isEditPattern.value"></modelNav>
<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem"></modelNav>
</div>
<div class="modelindex_right">
<div class="detail_btn">
@@ -14,7 +14,12 @@
<i v-show="true" class="icon iconfont icon-chehui" @click="revocation"></i>
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value,'pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('edit')"></i>
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value == 'canvasEditor','pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('canvasEditor')"></i>
<i @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}">
<SvgIcon name="editFrontBack" size="30" />
</i>
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
@@ -65,29 +70,29 @@ export default defineComponent({
}
const showDesignImgDetail = (str:any)=>{
new Promise((resolve, reject) => {
// if(
// getDetailListData.isEditPattern.value&&
// detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
// ){
// Modal.confirm({
// title: t('collectionModal.jsContent2'),
// icon: createVNode(ExclamationCircleOutlined),
// okText: 'Yes',
// cancelText: 'No',
// mask:false,
// centered:true,
// onOk() {
// resolve(true)
// emit('detailEdit',str)
// },
// onCancel(){
// resolve(false)
// }
// });
// }else{
if(
getDetailListData.isEditPattern.value&&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve(true)
emit('detailEdit',str)
},
onCancel(){
resolve(false)
}
});
}else{
resolve(true)
emit('detailEdit',str)
// }
}
})
}
const deleteItem = ()=>{
@@ -117,7 +122,7 @@ export default defineComponent({
},1000)
}
const setBack = ()=>{
emit('detailEdit','edit')
emit('detailEdit')
}
onMounted(()=>{
window.addEventListener('resize', handleResize);
@@ -196,6 +201,11 @@ export default defineComponent({
@media (min-width: 1024px) {
font-size: 2.4rem;
}
> img{
width: 80%;
color: #fff;
height: 80%;
}
}
> i:hover{
background: #000000;

8
src/component/Detail/model/modelNav.vue
View File

@@ -32,10 +32,6 @@ export default defineComponent({
},
emits:['canvasReload','addSketch','deleteItem'],
props:{
isEditPattern:{
type:Boolean,
default:false,
},
},
setup(props,{emit}) {
const store = useStore();
@@ -95,7 +91,9 @@ export default defineComponent({
// });
// }else{
resolve(true)
emit('canvasReload')
if(detailData.selectDetail.id !== item.id){
emit('canvasReload')
}
// }
}).then((rv)=>{
if(rv)store.commit('DesignDetail/setDesignColthes',item.id)