This commit is contained in:
X1627315083
2025-09-12 14:58:07 +08:00
parent f760478594
commit 1df3458ac5
20 changed files with 85 additions and 57 deletions

View File

@@ -328,6 +328,9 @@ const handleToolClick = (tool) => {
style="width: 0; height: 0; opacity: 0"
/>
<slot name="customToolsTop" :tool-button-props="{ activeTool, canUndo, canRedo }" />
<ToolButton
v-for="tool in toolsList"
:key="tool.id"
@@ -339,7 +342,7 @@ const handleToolClick = (tool) => {
/>
<!-- 自定义工具栏按钮插槽 -->
<slot name="customTools" :tool-button-props="{ activeTool, canUndo, canRedo }" />
<slot name="customToolsBottom" :tool-button-props="{ activeTool, canUndo, canRedo }" />
</div>
</template>

View File

@@ -1043,9 +1043,12 @@ defineExpose({
@zoom-out="zoomOut"
@undo-redo-status-changed="changeCanvas"
>
<template #customToolsTop="{ toolTopProps }">
<slot name="customToolsTop" :tool-button-props="toolTopProps" />
</template>
<!-- 扩展插槽 -->
<template #customTools="{ toolButtonProps }">
<slot name="customTools" :tool-button-props="toolButtonProps" />
<template #customToolsBottom="{ toolButtonProps }">
<slot name="customToolsBottom" :tool-button-props="toolButtonProps" />
</template>
</ToolsSidebar>
</div>

View File

@@ -218,7 +218,7 @@ const isShowLeft = ref(true);
</template>
<!-- 使用插槽添加自定义工具栏按钮 -->
<template #customTools="{ toolButtonProps }">
<template #customToolsBottom="{ toolButtonProps }">
<!-- 分隔线 -->
<div class="tool-separator"></div>

View File

@@ -16,11 +16,12 @@
imageMode:'contains',
}"
ref="editCanvas">
<template #customTools="{ toolButtonProps }">
<template #customToolsBottom="{ toolButtonProps }">
<!-- 也可以直接使用普通的按钮 -->
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('redGreenExample')">
<i class="fi fi-sr-layers"></i>
<div class="tool-tooltip">Edit the front and back sections</div>
<div class="tool-tooltip">{{ $t('Canvas.editFrontBack') }}</div>
</div>
</template>
</editCanvas>
@@ -42,6 +43,13 @@
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>
@@ -117,6 +125,7 @@ export default defineComponent({
},{immediate: true})
provide('isShowMark',detailData.isShowMark)
provide('canvasType',detailData.canvasType)
const editFront = (str:any)=>{//编辑前后片
let canvasJSON = '' as any

View File

@@ -122,10 +122,11 @@ export default defineComponent({
padding: 1rem;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
display: flex;
flex-wrap: wrap;
overflow: hidden;

View File

@@ -100,11 +100,12 @@ export default defineComponent({
padding: 1rem 0;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
position: relative;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
> img{
width: 100%;
height: 100%;

View File

@@ -105,9 +105,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
@@ -119,16 +119,6 @@ export default defineComponent({
}
}
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
align-items: center;
justify-content: center;
}
}
}

View File

@@ -349,9 +349,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
cursor: pointer;
@@ -364,7 +364,7 @@ export default defineComponent({
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
overflow: hidden;
> img{
width: 100%;

View File

@@ -1,6 +1,6 @@
<template>
<div class="selectList">
<div class="selectList_header">
<div class="selectList_header" :class="{'element': type == 'element'}">
<div class="switch_type_list" v-if="type != 'element'">
<div
@click.stop="openCurrent()"
@@ -161,10 +161,16 @@ export default defineComponent({
height: auto;
display: flex;
flex-direction: column;
border-radius: 1.5rem;
border: 1px solid #000;
padding: 1rem;
> .selectList_header{
margin-bottom: 2.5rem;
display: flex;
align-items: center;
&.element{
margin-bottom: 0rem;
}
> .switch_type_list{
display: flex;
> .switch_type_item:last-child{

View File

@@ -199,9 +199,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
@@ -215,11 +215,11 @@ export default defineComponent({
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: calc((50% - 1rem));
aspect-ratio: 1/1;
align-items: center;
justify-content: center;
}

View File

@@ -262,9 +262,10 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: 100%;
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
margin: 1rem;
@@ -279,11 +280,11 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: calc((50% - 1rem));
aspect-ratio: 1/1;
align-items: center;
justify-content: center;
.upload{

View File

@@ -145,9 +145,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
@@ -174,11 +174,11 @@ export default defineComponent({
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: calc((50% - 1rem));
aspect-ratio: 1/1;
align-items: center;
justify-content: center;
.upload{

View File

@@ -120,11 +120,11 @@ export default defineComponent({
height: 23.5rem;
padding: 1rem;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
display: flex;
flex-wrap: wrap;
overflow: hidden;

View File

@@ -126,11 +126,12 @@ export default defineComponent({
padding: 1rem 0;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
position: relative;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
> img{
width: 100%;
height: 100%;

View File

@@ -9,7 +9,7 @@
imageMode:'contains',
}"
>
<template #customTools="{ toolButtonProps }">
<template #customToolsBottom="{ toolButtonProps }">
<div class="custom-tool-btn" :class="{active:isHiddenModel}" @click="setHiddenmodel()">
<i class="fi fi-rr-eye"></i>
<div class="tool-tooltip">Hidden model</div>