画布
This commit is contained in:
@@ -88,11 +88,11 @@
|
||||
<style lang="less" scoped>
|
||||
.add-print {
|
||||
> .settings {
|
||||
margin: 0 1.1rem;
|
||||
margin: 0 11px;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -100,8 +100,8 @@
|
||||
justify-content: center;
|
||||
}
|
||||
> .label {
|
||||
width: 5.5rem;
|
||||
font-size: 1rem;
|
||||
width: 55px;
|
||||
font-size: 10px;
|
||||
}
|
||||
&:not(.offset) > div {
|
||||
flex: 1;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
:style="{ background: v }"
|
||||
></div>
|
||||
<div class="add" @click="addColor">
|
||||
<svg-icon name="add" size="12rem" color="#fff" />
|
||||
<svg-icon name="add" size="12" size-unit="px" color="#fff" />
|
||||
<input type="color" ref="colorInput" @change="changeColor" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,17 +37,17 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.color-palette {
|
||||
min-height: 14rem;
|
||||
min-height: 140px;
|
||||
> .color-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
gap: 5px;
|
||||
> div {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
> .add {
|
||||
border: 0.1rem solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
> input {
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<svg-icon :name="currentComponent?.type" color="#fff" />
|
||||
<svg-icon :name="currentComponent?.type" color="#fff" size="16" size-unit="px" />
|
||||
<span>{{ currentComponent?.title }}</span>
|
||||
<div class="add" @click="emit('add')"><svg-icon name="add" size="14" /></div>
|
||||
<div class="add" @click="emit('add')">
|
||||
<svg-icon name="add" size="14" size-unit="px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<component :is="currentComponent?.component" ref="componentRef" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button @click="onGenerateClick">
|
||||
<svg-icon name="xingxing" size="16" />
|
||||
<svg-icon name="xingxing" size="16" size-unit="px" />
|
||||
<span>Generate</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -97,79 +99,83 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
width: 25rem;
|
||||
width: 250px;
|
||||
height: auto;
|
||||
--border-radius: 1.6rem;
|
||||
--border-radius: 16px;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #fff;
|
||||
box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> .header {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
height: 5rem;
|
||||
height: 50px;
|
||||
background: #ff7a51;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1.6rem;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
> .c-svg {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-right: 0.6rem;
|
||||
margin-right: 6px;
|
||||
}
|
||||
> span {
|
||||
font-family: Semibold;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
> .add {
|
||||
position: absolute;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border: 0.2rem solid #fff;
|
||||
bottom: -1.6rem;
|
||||
right: -1.6rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid #fff;
|
||||
bottom: -16px;
|
||||
right: -16px;
|
||||
background-color: #ed8936;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 2.5rem;
|
||||
box-shadow: 0 0.8rem 2rem 0 #71809633;
|
||||
font-size: 25px;
|
||||
box-shadow: 0 8px 20px 0 #71809633;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .body {
|
||||
padding: 1.6rem 1.3rem;
|
||||
padding: 16px 13px;
|
||||
&:deep(> *) {
|
||||
width: 100%;
|
||||
> * {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .label {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12px;
|
||||
font-family: Medium;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .footer {
|
||||
margin-bottom: 1.6rem;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0 1.3rem;
|
||||
padding: 0 13px;
|
||||
> button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 11rem;
|
||||
height: 2.8rem;
|
||||
border-radius: 0.5rem;
|
||||
width: 110px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
background-color: #fffcf4;
|
||||
border: 1px solid #ffcf90;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12px;
|
||||
font-family: SemiBold;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
@@ -178,7 +184,7 @@
|
||||
> .c-svg {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-right: 0.4rem;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
:class="{ active: data.styles.includes(v.value) }"
|
||||
@click="onClickStyle(v.value)"
|
||||
>
|
||||
<span class="icon"><svg-icon name="add" color="#0D0D0D" size="8" /></span>
|
||||
<span class="icon">
|
||||
<svg-icon name="add" color="#0D0D0D" size="8" size-unit="px" />
|
||||
</span>
|
||||
<span class="label">{{ v.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,19 +64,19 @@
|
||||
> .style-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.829rem 0.55rem;
|
||||
gap: 8.29px 5.5px;
|
||||
> .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.7rem;
|
||||
padding: 5px 7px;
|
||||
font-family: Medium;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.829rem;
|
||||
border: 0.05rem solid #e4e4e7;
|
||||
border-radius: 20px;
|
||||
font-size: 8.29px;
|
||||
border: 1px solid #e4e4e7;
|
||||
color: #000;
|
||||
> .icon {
|
||||
margin-right: 0.4rem;
|
||||
margin-right: 4px;
|
||||
}
|
||||
&.active {
|
||||
border-color: #0095ff;
|
||||
|
||||
@@ -58,15 +58,15 @@
|
||||
> .shortcut-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem 0.4rem;
|
||||
gap: 10px 4px;
|
||||
> .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.3rem;
|
||||
padding: 5px 3px;
|
||||
font-family: Medium;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 1rem;
|
||||
border: 0.05rem solid #e4e4e7;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
border: 1px solid #e4e4e7;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,24 +48,24 @@
|
||||
.to-video {
|
||||
> .frames {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: 5px;
|
||||
}
|
||||
> .select,
|
||||
> div.label {
|
||||
display: flex;
|
||||
gap: 1.3rem;
|
||||
gap: 13px;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
> .select {
|
||||
&:deep(.el-select) {
|
||||
--el-select-input-font-size: 1.2rem;
|
||||
--el-select-input-font-size: 12px;
|
||||
.el-select__wrapper {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12px;
|
||||
min-height: 0;
|
||||
height: 2.8rem;
|
||||
padding: 0 0.8rem;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.el-select__selected-item,
|
||||
.el-select__input-wrapper,
|
||||
@@ -73,7 +73,7 @@
|
||||
line-height: normal;
|
||||
}
|
||||
.el-select__input {
|
||||
height: 2.4rem;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -81,10 +81,10 @@
|
||||
.el-popper{
|
||||
.el-select-dropdown{
|
||||
li{
|
||||
padding-left: 0.8rem;
|
||||
height: 3rem;
|
||||
line-height: 3rem;;
|
||||
font-size: 1.2rem;
|
||||
padding-left: 8px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="my-input">
|
||||
<span class="decorate"></span>
|
||||
<span v-show="icon" class="icon">
|
||||
<svg-icon :name="icon" :size="iconSize" />
|
||||
<svg-icon :name="icon" :size="iconSize" size-unit="px" />
|
||||
</span>
|
||||
<span v-show="before" class="before">{{ before }}</span>
|
||||
<input v-bind="attrs" :value="modelValue" @input="onInput" />
|
||||
@@ -34,33 +34,33 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(230, 230, 231, 1);
|
||||
border-radius: 0.17rem;
|
||||
height: 1.7rem;
|
||||
padding: 0 0.4rem 0 0.2rem;
|
||||
border-radius: 1.7px;
|
||||
height: 17px;
|
||||
padding: 0 4px 0 2px;
|
||||
> .decorate {
|
||||
width: 0.2rem;
|
||||
width: 2px;
|
||||
background-color: rgba(230, 230, 231, 1);
|
||||
border-radius: 0.3rem;
|
||||
border-radius: 3px;
|
||||
height: 85%;
|
||||
margin-right: 0.4rem;
|
||||
margin-right: 4px;
|
||||
}
|
||||
> .iconfont {
|
||||
font-size: 1rem;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
margin-right: 0.2rem;
|
||||
margin-right: 2px;
|
||||
}
|
||||
> .before {
|
||||
font-size: 1rem;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
margin-right: 0.2rem;
|
||||
margin-right: 2px;
|
||||
}
|
||||
> .after {
|
||||
font-size: 1rem;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
margin-left: 0.1rem;
|
||||
margin-left: 1px;
|
||||
}
|
||||
> input {
|
||||
font-size: 1rem;
|
||||
font-size: 12px;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@change="onChange"
|
||||
></textarea>
|
||||
<div class="bths">
|
||||
<button><svg-icon name="mobang" size="10" /></button>
|
||||
<button><svg-icon name="mobang" size="10" size-unit="px" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -35,44 +35,44 @@
|
||||
<style lang="less" scoped>
|
||||
.my-textarea {
|
||||
width: 100%;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #e4e4e7;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem 0.5rem;
|
||||
height: 115px;
|
||||
border: 1px solid #e4e4e7;
|
||||
border-radius: 10px;
|
||||
padding: 10px 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> textarea {
|
||||
padding: 0 0.5rem;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: Medium;
|
||||
font-size: 1rem;
|
||||
font-size: 10px;
|
||||
color: #333;
|
||||
&::placeholder {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
> .bths {
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
padding: 5px 5px 0;
|
||||
> button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #e4e4e7;
|
||||
&:active {
|
||||
|
||||
@@ -134,47 +134,47 @@
|
||||
justify-content: center;
|
||||
> * {
|
||||
flex: 1;
|
||||
margin-right: 1rem;
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .dish {
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #eaeaea;
|
||||
border-radius: 0.34rem;
|
||||
width: 115px;
|
||||
height: 115px;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 3.4px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: #f6f6f6;
|
||||
margin-top: 2rem;
|
||||
margin-top: 20px;
|
||||
> * {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
> img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
bottom: 0.35rem;
|
||||
right: 0.35rem;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: 3.5px;
|
||||
right: 3.5px;
|
||||
}
|
||||
> .ball {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.85rem;
|
||||
height: 0.85rem;
|
||||
border: 0.1rem solid #fff;
|
||||
width: 8.5px;
|
||||
height: 8.5px;
|
||||
border: 1px solid #fff;
|
||||
background-color: #333;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0.068rem 0.17px 0px rgba(0, 0, 0, 0.26);
|
||||
box-shadow: 0px 0.68px 0.17px 0px rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
> .tip {
|
||||
font-size: 0.85rem;
|
||||
font-size: 8.5px;
|
||||
color: #000;
|
||||
line-height: 2.4rem;
|
||||
line-height: 24px;
|
||||
&.x {
|
||||
top: 50%;
|
||||
right: 0%;
|
||||
@@ -198,15 +198,15 @@
|
||||
transform: translate(-50%, -50%);
|
||||
&.x {
|
||||
width: 100%;
|
||||
border-top-width: 0.1rem;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
&.y {
|
||||
height: 100%;
|
||||
border-left-width: 0.1rem;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
&.z {
|
||||
width: 50%;
|
||||
border-top-width: 0.1rem;
|
||||
border-top-width: 1px;
|
||||
border-color: #454754;
|
||||
transform: translate(0%, -50%) rotateZ(var(--rotateZ));
|
||||
transform-origin: left center;
|
||||
|
||||
@@ -33,33 +33,33 @@
|
||||
<style lang="less" scoped>
|
||||
.pixel-ratio-selection {
|
||||
width: 100%;
|
||||
height: 3.4rem;
|
||||
border-radius: 0.6rem;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.7rem;
|
||||
padding: 0 17px;
|
||||
> div {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12px;
|
||||
color: #7c7c7c;
|
||||
height: 2.1rem;
|
||||
height: 21px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.active {
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
border-radius: 0.1rem;
|
||||
border: 0.1rem solid #7c7c7c;
|
||||
width: calc(var(--w) / max(var(--w), var(--h)) * 1rem);
|
||||
height: calc(var(--h) / max(var(--w), var(--h)) * 1rem);
|
||||
margin-right: 0.4rem;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #7c7c7c;
|
||||
width: calc(var(--w) / max(var(--w), var(--h)) * 10px);
|
||||
height: calc(var(--h) / max(var(--w), var(--h)) * 10px);
|
||||
margin-right: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
--input-thumb-size: 0.8rem;
|
||||
--input-thumb-size: 8px;
|
||||
--backcolor1: var(--slider-thumb-color1, #4285f4);
|
||||
--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
|
||||
&:hover {
|
||||
@@ -102,8 +102,8 @@
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 0.339rem;
|
||||
border-radius: 0.3rem;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
@@ -121,7 +121,7 @@
|
||||
background: var(--backcolor1); /* 蓝色滑块 */
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
@@ -129,20 +129,20 @@
|
||||
}
|
||||
> .tip {
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
font-size: 10px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
color: #666;
|
||||
top: calc(var(--input-thumb-size) / -2 - 0.35rem);
|
||||
top: calc(var(--input-thumb-size) / -2 - 3.5px);
|
||||
left: calc(
|
||||
(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
|
||||
);
|
||||
transform: translate(-50%, -100%);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 0.4rem;
|
||||
font-size: 1rem;
|
||||
padding: 3px 5px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
@@ -154,17 +154,17 @@
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.5rem solid transparent;
|
||||
border-right: 0.5rem solid transparent;
|
||||
border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .input {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
margin-left: 10px;
|
||||
> input {
|
||||
border-radius: 0.3rem;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
<div class="preview" v-if="url">
|
||||
<img :src="url" @error="onChange(null)" />
|
||||
<div class="close" @click="onChange(null)">
|
||||
<svg-icon name="close-border" size="16" />
|
||||
<svg-icon name="close-border" size="16" size-unit="px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" v-else>
|
||||
<div class="icon"><svg-icon name="upload" size="17" /></div>
|
||||
<p class="txt">{{ tip }}</p>
|
||||
<div class="icon"><svg-icon name="upload" size="17" size-unit="px" /></div>
|
||||
<div class="txt">{{ tip }}</div>
|
||||
<button @click="onSelectFile">Select File</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,30 +45,29 @@
|
||||
<style lang="less" scoped>
|
||||
.upload-file {
|
||||
width: 100%;
|
||||
height: 9.9rem;
|
||||
border-radius: 1rem;
|
||||
height: 99px;
|
||||
border-radius: 10px;
|
||||
background-color: #f0f0f0;
|
||||
// padding: 0 1.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .control {
|
||||
text-align: center;
|
||||
> .txt {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 8px;
|
||||
color: #7c7c7c;
|
||||
}
|
||||
> button {
|
||||
box-shadow: 0px 0.75px 0px 0px #00000005;
|
||||
min-width: 3.9rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 0.23rem;
|
||||
min-width: 39px;
|
||||
height: 13px;
|
||||
border-radius: 2.3px;
|
||||
background-color: #fff;
|
||||
font-size: 0.6rem;
|
||||
font-size: 6px;
|
||||
color: #000;
|
||||
border: 0.05rem solid #d9d9d9;
|
||||
border: 1px solid #d9d9d9;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
@@ -76,8 +75,8 @@
|
||||
}
|
||||
}
|
||||
> .preview {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
> img {
|
||||
height: 100%;
|
||||
@@ -86,8 +85,8 @@
|
||||
}
|
||||
> .close {
|
||||
position: absolute;
|
||||
top: 0.01rem;
|
||||
right: 0.01rem;
|
||||
top: 0.1px;
|
||||
right: 0.1px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,100 +1,151 @@
|
||||
<template>
|
||||
<fullscreen-dialog v-model="dialogVisible">
|
||||
<div class="flow-canvas">
|
||||
<div
|
||||
class="canvas-main"
|
||||
ref="canvasMain"
|
||||
@mousedown="onMouseDown"
|
||||
@wheel="onMouseWheel"
|
||||
<VueFlow
|
||||
ref="vueFlow"
|
||||
:nodes="nodes"
|
||||
:edges="edges"
|
||||
:nodes-draggable="true"
|
||||
@nodes-initialized="layoutGraph('LR')"
|
||||
@node-drag-stop="handleNodeDragStop"
|
||||
>
|
||||
<div
|
||||
class="canvas-content"
|
||||
:style="{
|
||||
top: `${data.y}px`,
|
||||
left: `${data.x}px`,
|
||||
transform: `scale(${data.scale})`
|
||||
}"
|
||||
>
|
||||
<card type="to-real-style" />
|
||||
<card type="scene-composition" />
|
||||
<card type="color-palette" />
|
||||
<card type="to-video" />
|
||||
<card type="to-3d-model" />
|
||||
<card type="to-cad" />
|
||||
<card type="add-print" />
|
||||
<card type="edit-material" />
|
||||
</div>
|
||||
</div>
|
||||
<template #node-InputNode="nodeProps">
|
||||
<inputNode v-bind="nodeProps">
|
||||
<template v-slot:content>
|
||||
<component
|
||||
:is="nodeProps.data.component"
|
||||
:type="nodeProps.data.type_"
|
||||
/>
|
||||
</template>
|
||||
</inputNode>
|
||||
</template>
|
||||
<template #node-SecondaryNode="nodeProps">
|
||||
<secondaryNode v-bind="nodeProps">
|
||||
<template v-slot:content>
|
||||
<component
|
||||
:is="nodeProps.data.component"
|
||||
:type="nodeProps.data.type_"
|
||||
/>
|
||||
</template>
|
||||
</secondaryNode>
|
||||
</template>
|
||||
</VueFlow>
|
||||
</div>
|
||||
</fullscreen-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import { useLayout } from '@/utils/treeDiagram'
|
||||
import secondaryNode from '../components/node/secondaryNode.vue'
|
||||
import inputNode from '../components/node/InputNode.vue'
|
||||
import FullscreenDialog from '../components/fullscreen-dialog.vue'
|
||||
import MyInfo from '@/components/MyInfo.vue'
|
||||
import card from './components/cards/index.vue'
|
||||
import { computed, ref, markRaw, onMounted, reactive } from 'vue'
|
||||
import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
|
||||
import { useGlobalStore } from '@/stores'
|
||||
const globalStore = useGlobalStore()
|
||||
const dialogVisible = ref(true)
|
||||
window.dialogVisible = dialogVisible
|
||||
const data = reactive({
|
||||
x: 100,
|
||||
y: 200,
|
||||
scale: 1
|
||||
})
|
||||
const canvasMain = ref<HTMLDivElement>()
|
||||
const onMouseDown = (e: MouseEvent) => {
|
||||
if (e.button !== 1) return
|
||||
const ox = data.x
|
||||
const oy = data.y
|
||||
const X = e.clientX
|
||||
const Y = e.clientY
|
||||
const onMouseMove = (e: MouseEvent) => {
|
||||
const dx = e.clientX - X
|
||||
const dy = e.clientY - Y
|
||||
data.x = ox + dx
|
||||
data.y = oy + dy
|
||||
}
|
||||
const onMouseUp = (e: MouseEvent) => {
|
||||
document.removeEventListener('mousemove', onMouseMove)
|
||||
document.removeEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
document.addEventListener('mousemove', onMouseMove)
|
||||
document.addEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
const onMouseWheel = (e: WheelEvent) => {
|
||||
var delta = e.deltaY
|
||||
var scale = data.scale - delta / 1000
|
||||
if (scale < 0.2) scale = 0.2
|
||||
if (scale > 10) scale = 10
|
||||
data.scale = scale
|
||||
}
|
||||
onMounted(() => {
|
||||
globalStore.setHomeLeftNavCollapse(true)
|
||||
})
|
||||
</script>
|
||||
const dialogVisible = ref(false)
|
||||
const position = { x: 0, y: 0 }
|
||||
|
||||
const nodes = ref<any[]>([
|
||||
{
|
||||
id: '1',
|
||||
type: 'InputNode',
|
||||
class: 'custom-node start',
|
||||
position: { x: 0, y: 0 },
|
||||
data: { component: card, type_: 'to-real-style' }
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'SecondaryNode',
|
||||
class: 'custom-node',
|
||||
position: { x: 0, y: 0 },
|
||||
data: { component: card, type_: 'scene-composition' }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'SecondaryNode',
|
||||
class: 'custom-node',
|
||||
position: { x: 0, y: 0 },
|
||||
data: { component: card, type_: 'to-3d-model' }
|
||||
}
|
||||
])
|
||||
const edges = computed(() => {
|
||||
const arr = []
|
||||
nodes.value.forEach((node, index) => {
|
||||
if (index < nodes.value.length - 1) {
|
||||
const id = node.id
|
||||
const target = nodes.value[index + 1].id
|
||||
arr.push({
|
||||
id: `el-${id}-${target}`,
|
||||
source: id,
|
||||
target: target,
|
||||
type: 'smoothstep'
|
||||
})
|
||||
}
|
||||
})
|
||||
return arr
|
||||
})
|
||||
const vueFlow = ref<any>()
|
||||
onMounted(() => {
|
||||
window.vueFlow = vueFlow
|
||||
window.nodes = nodes
|
||||
window.test = () => {
|
||||
return vueFlow.value
|
||||
}
|
||||
window.addaaaaa = () => {
|
||||
const lastNode = vueFlow.value.getNode(nodes.value[nodes.value.length - 1].id)
|
||||
const width = lastNode.dimensions.width
|
||||
const x = lastNode.position.x
|
||||
const y = lastNode.position.y
|
||||
nodes.value.push({
|
||||
id: '4',
|
||||
type: 'SecondaryNode',
|
||||
class: 'custom-node',
|
||||
data: { id: '主 1', component: card, type_: 'to-3d-model' },
|
||||
position: {
|
||||
x: width + x + 50,
|
||||
y: y
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
const handleNodeDragStop = (e: any) => {
|
||||
const { node } = e
|
||||
const { id, position } = node
|
||||
nodes.value.forEach((item) => {
|
||||
if (item.id === id) {
|
||||
item.position.x = position.x
|
||||
item.position.y = position.y
|
||||
}
|
||||
})
|
||||
}
|
||||
const { fitView } = useVueFlow()
|
||||
const { layout } = useLayout()
|
||||
const index = ref(0)
|
||||
async function layoutGraph(direction) {
|
||||
if (index.value > 0) return
|
||||
index.value++
|
||||
setTimeout(() => {
|
||||
nodes.value = layout(nodes.value, edges.value, direction)
|
||||
console.log(nodes.value)
|
||||
nextTick(() => {
|
||||
fitView()
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '@vue-flow/core/dist/style.css';
|
||||
@import '@vue-flow/core/dist/theme-default.css';
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.flow-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fcf8f1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
> .canvas-main {
|
||||
> .vue-flow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .canvas-content {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 5rem;
|
||||
transform-origin: top left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: #FFFCF4;
|
||||
transition: opacity var(--transition-time);
|
||||
opacity: 0;
|
||||
&.show {
|
||||
|
||||
27
src/components/Canvas/components/node/InputNode.vue
Normal file
27
src/components/Canvas/components/node/InputNode.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
const props = defineProps<{
|
||||
data: {
|
||||
type: Object
|
||||
default: () => {
|
||||
id: ''
|
||||
}
|
||||
}
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="node start">
|
||||
<Handle type="source" style="top: 40px" id="Right" :position="Position.Right" />
|
||||
<div class="item">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.node {
|
||||
cursor: initial;
|
||||
}
|
||||
</style>
|
||||
31
src/components/Canvas/components/node/secondaryNode.vue
Normal file
31
src/components/Canvas/components/node/secondaryNode.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
const props = defineProps<{
|
||||
data: {
|
||||
type: Object
|
||||
default: () => {
|
||||
id: ''
|
||||
}
|
||||
}
|
||||
}>()
|
||||
</script>
|
||||
<!-- source输入，target输出 -->
|
||||
<template>
|
||||
<div class="node">
|
||||
<Handle type="target" style="top: 40px" id="Left" :position="Position.Left" />
|
||||
<Handle type="source" style="top: 40px" id="Right" :position="Position.Right" />
|
||||
<!-- <Handle type="source" id="Right" :position="Position.Right" />
|
||||
<Handle type="target" id="Left" :position="Position.Left" /> -->
|
||||
<!-- <div>{{ props.data.id }}</div> -->
|
||||
<div class="item">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.node {
|
||||
cursor: initial;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
<svg
|
||||
:class="svgClass"
|
||||
v-bind="$attrs"
|
||||
:style="{ color: color, fontSize: size/10 + 'rem' }"
|
||||
:style="{ color: color, fontSize: sizeUnit === 'rem' ? size/10 + 'rem' : size + sizeUnit }"
|
||||
>
|
||||
<use :href="iconName"></use>
|
||||
</svg>
|
||||
@@ -25,6 +25,10 @@ const props = defineProps({
|
||||
type: [Number, String],
|
||||
default: 16,
|
||||
},
|
||||
sizeUnit: {
|
||||
type: String,
|
||||
default: 'rem',
|
||||
}
|
||||
});
|
||||
const iconName = computed(() => `#icon-${props.name}`);
|
||||
const svgClass = computed(() => {
|
||||
|
||||
Reference in New Issue
Block a user