画布
This commit is contained in:
@@ -88,11 +88,11 @@
|
|||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.add-print {
|
.add-print {
|
||||||
> .settings {
|
> .settings {
|
||||||
margin: 0 1.1rem;
|
margin: 0 11px;
|
||||||
> div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10px;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@@ -100,8 +100,8 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
> .label {
|
> .label {
|
||||||
width: 5.5rem;
|
width: 55px;
|
||||||
font-size: 1rem;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
&:not(.offset) > div {
|
&:not(.offset) > div {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
:style="{ background: v }"
|
:style="{ background: v }"
|
||||||
></div>
|
></div>
|
||||||
<div class="add" @click="addColor">
|
<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" />
|
<input type="color" ref="colorInput" @change="changeColor" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -37,17 +37,17 @@
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.color-palette {
|
.color-palette {
|
||||||
min-height: 14rem;
|
min-height: 140px;
|
||||||
> .color-list {
|
> .color-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.5rem;
|
gap: 5px;
|
||||||
> div {
|
> div {
|
||||||
width: 3.5rem;
|
width: 35px;
|
||||||
height: 3.5rem;
|
height: 35px;
|
||||||
}
|
}
|
||||||
> .add {
|
> .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);
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
position: relative;
|
position: relative;
|
||||||
> input {
|
> input {
|
||||||
|
|||||||
@@ -1,16 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="header">
|
<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>
|
<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>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<component :is="currentComponent?.component" ref="componentRef" />
|
<component :is="currentComponent?.component" ref="componentRef" />
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<button @click="onGenerateClick">
|
<button @click="onGenerateClick">
|
||||||
<svg-icon name="xingxing" size="16" />
|
<svg-icon name="xingxing" size="16" size-unit="px" />
|
||||||
<span>Generate</span>
|
<span>Generate</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,79 +99,83 @@
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.card {
|
.card {
|
||||||
width: 25rem;
|
width: 250px;
|
||||||
height: auto;
|
height: auto;
|
||||||
--border-radius: 1.6rem;
|
--border-radius: 16px;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
> .header {
|
> .header {
|
||||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||||
height: 5rem;
|
height: 50px;
|
||||||
background: #ff7a51;
|
background: #ff7a51;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 1.6rem;
|
padding-left: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
> .c-svg {
|
> .c-svg {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-right: 0.6rem;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
> span {
|
> span {
|
||||||
font-family: Semibold;
|
font-family: Semibold;
|
||||||
font-size: 1.6rem;
|
font-size: 16px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
> .add {
|
> .add {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 3.2rem;
|
width: 32px;
|
||||||
height: 3.2rem;
|
height: 32px;
|
||||||
border: 0.2rem solid #fff;
|
border: 2px solid #fff;
|
||||||
bottom: -1.6rem;
|
bottom: -16px;
|
||||||
right: -1.6rem;
|
right: -16px;
|
||||||
background-color: #ed8936;
|
background-color: #ed8936;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 2.5rem;
|
font-size: 25px;
|
||||||
box-shadow: 0 0.8rem 2rem 0 #71809633;
|
box-shadow: 0 8px 20px 0 #71809633;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .body {
|
> .body {
|
||||||
padding: 1.6rem 1.3rem;
|
padding: 16px 13px;
|
||||||
&:deep(> *) {
|
&:deep(> *) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
> * {
|
> * {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10px;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .label {
|
> .label {
|
||||||
font-size: 1.2rem;
|
font-size: 12px;
|
||||||
font-family: Medium;
|
font-family: Medium;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .footer {
|
> .footer {
|
||||||
margin-bottom: 1.6rem;
|
margin-bottom: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
padding: 0 1.3rem;
|
padding: 0 13px;
|
||||||
> button {
|
> button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 11rem;
|
width: 110px;
|
||||||
height: 2.8rem;
|
height: 28px;
|
||||||
border-radius: 0.5rem;
|
border-radius: 5px;
|
||||||
background-color: #fffcf4;
|
background-color: #fffcf4;
|
||||||
border: 1px solid #ffcf90;
|
border: 1px solid #ffcf90;
|
||||||
font-size: 1.2rem;
|
font-size: 12px;
|
||||||
font-family: SemiBold;
|
font-family: SemiBold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:active {
|
&:active {
|
||||||
@@ -178,7 +184,7 @@
|
|||||||
> .c-svg {
|
> .c-svg {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-right: 0.4rem;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,7 +12,9 @@
|
|||||||
:class="{ active: data.styles.includes(v.value) }"
|
:class="{ active: data.styles.includes(v.value) }"
|
||||||
@click="onClickStyle(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>
|
<span class="label">{{ v.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -62,19 +64,19 @@
|
|||||||
> .style-list {
|
> .style-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.829rem 0.55rem;
|
gap: 8.29px 5.5px;
|
||||||
> .item {
|
> .item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0.5rem 0.7rem;
|
padding: 5px 7px;
|
||||||
font-family: Medium;
|
font-family: Medium;
|
||||||
border-radius: 2rem;
|
border-radius: 20px;
|
||||||
font-size: 0.829rem;
|
font-size: 8.29px;
|
||||||
border: 0.05rem solid #e4e4e7;
|
border: 1px solid #e4e4e7;
|
||||||
color: #000;
|
color: #000;
|
||||||
> .icon {
|
> .icon {
|
||||||
margin-right: 0.4rem;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
&.active {
|
&.active {
|
||||||
border-color: #0095ff;
|
border-color: #0095ff;
|
||||||
|
|||||||
@@ -58,15 +58,15 @@
|
|||||||
> .shortcut-list {
|
> .shortcut-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 1rem 0.4rem;
|
gap: 10px 4px;
|
||||||
> .item {
|
> .item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.5rem 0.3rem;
|
padding: 5px 3px;
|
||||||
font-family: Medium;
|
font-family: Medium;
|
||||||
border-radius: 0.3rem;
|
border-radius: 3px;
|
||||||
font-size: 1rem;
|
font-size: 10px;
|
||||||
border: 0.05rem solid #e4e4e7;
|
border: 1px solid #e4e4e7;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -48,24 +48,24 @@
|
|||||||
.to-video {
|
.to-video {
|
||||||
> .frames {
|
> .frames {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
> .select,
|
> .select,
|
||||||
> div.label {
|
> div.label {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.3rem;
|
gap: 13px;
|
||||||
> * {
|
> * {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .select {
|
> .select {
|
||||||
&:deep(.el-select) {
|
&:deep(.el-select) {
|
||||||
--el-select-input-font-size: 1.2rem;
|
--el-select-input-font-size: 12px;
|
||||||
.el-select__wrapper {
|
.el-select__wrapper {
|
||||||
font-size: 1.2rem;
|
font-size: 12px;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
height: 2.8rem;
|
height: 28px;
|
||||||
padding: 0 0.8rem;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
.el-select__selected-item,
|
.el-select__selected-item,
|
||||||
.el-select__input-wrapper,
|
.el-select__input-wrapper,
|
||||||
@@ -73,7 +73,7 @@
|
|||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
.el-select__input {
|
.el-select__input {
|
||||||
height: 2.4rem;
|
height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -81,10 +81,10 @@
|
|||||||
.el-popper{
|
.el-popper{
|
||||||
.el-select-dropdown{
|
.el-select-dropdown{
|
||||||
li{
|
li{
|
||||||
padding-left: 0.8rem;
|
padding-left: 8px;
|
||||||
height: 3rem;
|
height: 30px;
|
||||||
line-height: 3rem;;
|
line-height: 30px;
|
||||||
font-size: 1.2rem;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="my-input">
|
<div class="my-input">
|
||||||
<span class="decorate"></span>
|
<span class="decorate"></span>
|
||||||
<span v-show="icon" class="icon">
|
<span v-show="icon" class="icon">
|
||||||
<svg-icon :name="icon" :size="iconSize" />
|
<svg-icon :name="icon" :size="iconSize" size-unit="px" />
|
||||||
</span>
|
</span>
|
||||||
<span v-show="before" class="before">{{ before }}</span>
|
<span v-show="before" class="before">{{ before }}</span>
|
||||||
<input v-bind="attrs" :value="modelValue" @input="onInput" />
|
<input v-bind="attrs" :value="modelValue" @input="onInput" />
|
||||||
@@ -34,33 +34,33 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid rgba(230, 230, 231, 1);
|
border: 1px solid rgba(230, 230, 231, 1);
|
||||||
border-radius: 0.17rem;
|
border-radius: 1.7px;
|
||||||
height: 1.7rem;
|
height: 17px;
|
||||||
padding: 0 0.4rem 0 0.2rem;
|
padding: 0 4px 0 2px;
|
||||||
> .decorate {
|
> .decorate {
|
||||||
width: 0.2rem;
|
width: 2px;
|
||||||
background-color: rgba(230, 230, 231, 1);
|
background-color: rgba(230, 230, 231, 1);
|
||||||
border-radius: 0.3rem;
|
border-radius: 3px;
|
||||||
height: 85%;
|
height: 85%;
|
||||||
margin-right: 0.4rem;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
> .iconfont {
|
> .iconfont {
|
||||||
font-size: 1rem;
|
font-size: 12px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-right: 0.2rem;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
> .before {
|
> .before {
|
||||||
font-size: 1rem;
|
font-size: 12px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-right: 0.2rem;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
> .after {
|
> .after {
|
||||||
font-size: 1rem;
|
font-size: 12px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-left: 0.1rem;
|
margin-left: 1px;
|
||||||
}
|
}
|
||||||
> input {
|
> input {
|
||||||
font-size: 1rem;
|
font-size: 12px;
|
||||||
width: 0;
|
width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
@change="onChange"
|
@change="onChange"
|
||||||
></textarea>
|
></textarea>
|
||||||
<div class="bths">
|
<div class="bths">
|
||||||
<button><svg-icon name="mobang" size="10" /></button>
|
<button><svg-icon name="mobang" size="10" size-unit="px" /></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -35,44 +35,44 @@
|
|||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.my-textarea {
|
.my-textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 11.5rem;
|
height: 115px;
|
||||||
border: 0.1rem solid #e4e4e7;
|
border: 1px solid #e4e4e7;
|
||||||
border-radius: 1rem;
|
border-radius: 10px;
|
||||||
padding: 1rem 0.5rem;
|
padding: 10px 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
> textarea {
|
> textarea {
|
||||||
padding: 0 0.5rem;
|
padding: 0 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
resize: none;
|
resize: none;
|
||||||
font-family: Medium;
|
font-family: Medium;
|
||||||
font-size: 1rem;
|
font-size: 10px;
|
||||||
color: #333;
|
color: #333;
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #c9c9c9;
|
color: #c9c9c9;
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 0.4rem;
|
width: 4px;
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
border-radius: 0.4rem;
|
border-radius: 4px;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
border-radius: 0.4rem;
|
border-radius: 4px;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .bths {
|
> .bths {
|
||||||
padding: 0.5rem 0.5rem 0;
|
padding: 5px 5px 0;
|
||||||
> button {
|
> button {
|
||||||
width: 2rem;
|
width: 20px;
|
||||||
height: 2rem;
|
height: 20px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 0.4rem;
|
border-radius: 4px;
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
border: 1px solid #e4e4e7;
|
border: 1px solid #e4e4e7;
|
||||||
&:active {
|
&:active {
|
||||||
|
|||||||
@@ -134,47 +134,47 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
> * {
|
> * {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-right: 1rem;
|
margin-right: 10px;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .dish {
|
> .dish {
|
||||||
width: 11.5rem;
|
width: 115px;
|
||||||
height: 11.5rem;
|
height: 115px;
|
||||||
border: 0.1rem solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
border-radius: 0.34rem;
|
border-radius: 3.4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
margin-top: 2rem;
|
margin-top: 20px;
|
||||||
> * {
|
> * {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
> img {
|
> img {
|
||||||
width: 1.2rem;
|
width: 12px;
|
||||||
height: 1.2rem;
|
height: 12px;
|
||||||
bottom: 0.35rem;
|
bottom: 3.5px;
|
||||||
right: 0.35rem;
|
right: 3.5px;
|
||||||
}
|
}
|
||||||
> .ball {
|
> .ball {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 0.85rem;
|
width: 8.5px;
|
||||||
height: 0.85rem;
|
height: 8.5px;
|
||||||
border: 0.1rem solid #fff;
|
border: 1px solid #fff;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
border-radius: 50%;
|
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 {
|
> .tip {
|
||||||
font-size: 0.85rem;
|
font-size: 8.5px;
|
||||||
color: #000;
|
color: #000;
|
||||||
line-height: 2.4rem;
|
line-height: 24px;
|
||||||
&.x {
|
&.x {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 0%;
|
right: 0%;
|
||||||
@@ -198,15 +198,15 @@
|
|||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
&.x {
|
&.x {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top-width: 0.1rem;
|
border-top-width: 1px;
|
||||||
}
|
}
|
||||||
&.y {
|
&.y {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-left-width: 0.1rem;
|
border-left-width: 1px;
|
||||||
}
|
}
|
||||||
&.z {
|
&.z {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
border-top-width: 0.1rem;
|
border-top-width: 1px;
|
||||||
border-color: #454754;
|
border-color: #454754;
|
||||||
transform: translate(0%, -50%) rotateZ(var(--rotateZ));
|
transform: translate(0%, -50%) rotateZ(var(--rotateZ));
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
|
|||||||
@@ -33,33 +33,33 @@
|
|||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.pixel-ratio-selection {
|
.pixel-ratio-selection {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.4rem;
|
height: 34px;
|
||||||
border-radius: 0.6rem;
|
border-radius: 6px;
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0 1.7rem;
|
padding: 0 17px;
|
||||||
> div {
|
> div {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12px;
|
||||||
color: #7c7c7c;
|
color: #7c7c7c;
|
||||||
height: 2.1rem;
|
height: 21px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
&.active {
|
&.active {
|
||||||
border-radius: 0.4rem;
|
border-radius: 4px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
border-radius: 0.1rem;
|
border-radius: 1px;
|
||||||
border: 0.1rem solid #7c7c7c;
|
border: 1px solid #7c7c7c;
|
||||||
width: calc(var(--w) / max(var(--w), var(--h)) * 1rem);
|
width: calc(var(--w) / max(var(--w), var(--h)) * 10px);
|
||||||
height: calc(var(--h) / max(var(--w), var(--h)) * 1rem);
|
height: calc(var(--h) / max(var(--w), var(--h)) * 10px);
|
||||||
margin-right: 0.4rem;
|
margin-right: 4px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -86,7 +86,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
--input-thumb-size: 0.8rem;
|
--input-thumb-size: 8px;
|
||||||
--backcolor1: var(--slider-thumb-color1, #4285f4);
|
--backcolor1: var(--slider-thumb-color1, #4285f4);
|
||||||
--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
|
--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -102,8 +102,8 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
height: 0.339rem;
|
height: 3px;
|
||||||
border-radius: 0.3rem;
|
border-radius: 3px;
|
||||||
outline: none;
|
outline: none;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
@@ -121,7 +121,7 @@
|
|||||||
background: var(--backcolor1); /* 蓝色滑块 */
|
background: var(--backcolor1); /* 蓝色滑块 */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
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 {
|
&::-webkit-slider-thumb:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
@@ -129,20 +129,20 @@
|
|||||||
}
|
}
|
||||||
> .tip {
|
> .tip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 1rem;
|
font-size: 10px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
color: #666;
|
color: #666;
|
||||||
top: calc(var(--input-thumb-size) / -2 - 0.35rem);
|
top: calc(var(--input-thumb-size) / -2 - 3.5px);
|
||||||
left: calc(
|
left: calc(
|
||||||
(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
|
(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
|
||||||
);
|
);
|
||||||
transform: translate(-50%, -100%);
|
transform: translate(-50%, -100%);
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.3rem 0.5rem;
|
padding: 3px 5px;
|
||||||
border-radius: 0.4rem;
|
border-radius: 4px;
|
||||||
font-size: 1rem;
|
font-size: 10px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
display: none;
|
display: none;
|
||||||
@@ -154,17 +154,17 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-left: 0.5rem solid transparent;
|
border-left: 5px solid transparent;
|
||||||
border-right: 0.5rem solid transparent;
|
border-right: 5px solid transparent;
|
||||||
border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
|
border-top: 5px solid rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .input {
|
> .input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 1rem;
|
margin-left: 10px;
|
||||||
> input {
|
> input {
|
||||||
border-radius: 0.3rem;
|
border-radius: 3px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,12 +3,12 @@
|
|||||||
<div class="preview" v-if="url">
|
<div class="preview" v-if="url">
|
||||||
<img :src="url" @error="onChange(null)" />
|
<img :src="url" @error="onChange(null)" />
|
||||||
<div class="close" @click="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>
|
</div>
|
||||||
<div class="control" v-else>
|
<div class="control" v-else>
|
||||||
<div class="icon"><svg-icon name="upload" size="17" /></div>
|
<div class="icon"><svg-icon name="upload" size="17" size-unit="px" /></div>
|
||||||
<p class="txt">{{ tip }}</p>
|
<div class="txt">{{ tip }}</div>
|
||||||
<button @click="onSelectFile">Select File</button>
|
<button @click="onSelectFile">Select File</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,30 +45,29 @@
|
|||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.upload-file {
|
.upload-file {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 9.9rem;
|
height: 99px;
|
||||||
border-radius: 1rem;
|
border-radius: 10px;
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
// padding: 0 1.7rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
> .control {
|
> .control {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
> .txt {
|
> .txt {
|
||||||
margin-top: 0.6rem;
|
margin-top: 6px;
|
||||||
margin-bottom: 0.8rem;
|
margin-bottom: 8px;
|
||||||
font-size: 0.8rem;
|
font-size: 8px;
|
||||||
color: #7c7c7c;
|
color: #7c7c7c;
|
||||||
}
|
}
|
||||||
> button {
|
> button {
|
||||||
box-shadow: 0px 0.75px 0px 0px #00000005;
|
box-shadow: 0px 0.75px 0px 0px #00000005;
|
||||||
min-width: 3.9rem;
|
min-width: 39px;
|
||||||
height: 1.3rem;
|
height: 13px;
|
||||||
border-radius: 0.23rem;
|
border-radius: 2.3px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
font-size: 0.6rem;
|
font-size: 6px;
|
||||||
color: #000;
|
color: #000;
|
||||||
border: 0.05rem solid #d9d9d9;
|
border: 1px solid #d9d9d9;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
@@ -76,8 +75,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .preview {
|
> .preview {
|
||||||
width: 8rem;
|
width: 80px;
|
||||||
height: 8rem;
|
height: 80px;
|
||||||
position: relative;
|
position: relative;
|
||||||
> img {
|
> img {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -86,8 +85,8 @@
|
|||||||
}
|
}
|
||||||
> .close {
|
> .close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.01rem;
|
top: 0.1px;
|
||||||
right: 0.01rem;
|
right: 0.1px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@@ -1,100 +1,151 @@
|
|||||||
<template>
|
<template>
|
||||||
<fullscreen-dialog v-model="dialogVisible">
|
<fullscreen-dialog v-model="dialogVisible">
|
||||||
<div class="flow-canvas">
|
<div class="flow-canvas">
|
||||||
<div
|
<VueFlow
|
||||||
class="canvas-main"
|
ref="vueFlow"
|
||||||
ref="canvasMain"
|
:nodes="nodes"
|
||||||
@mousedown="onMouseDown"
|
:edges="edges"
|
||||||
@wheel="onMouseWheel"
|
:nodes-draggable="true"
|
||||||
|
@nodes-initialized="layoutGraph('LR')"
|
||||||
|
@node-drag-stop="handleNodeDragStop"
|
||||||
>
|
>
|
||||||
<div
|
<template #node-InputNode="nodeProps">
|
||||||
class="canvas-content"
|
<inputNode v-bind="nodeProps">
|
||||||
:style="{
|
<template v-slot:content>
|
||||||
top: `${data.y}px`,
|
<component
|
||||||
left: `${data.x}px`,
|
:is="nodeProps.data.component"
|
||||||
transform: `scale(${data.scale})`
|
:type="nodeProps.data.type_"
|
||||||
}"
|
/>
|
||||||
>
|
</template>
|
||||||
<card type="to-real-style" />
|
</inputNode>
|
||||||
<card type="scene-composition" />
|
</template>
|
||||||
<card type="color-palette" />
|
<template #node-SecondaryNode="nodeProps">
|
||||||
<card type="to-video" />
|
<secondaryNode v-bind="nodeProps">
|
||||||
<card type="to-3d-model" />
|
<template v-slot:content>
|
||||||
<card type="to-cad" />
|
<component
|
||||||
<card type="add-print" />
|
:is="nodeProps.data.component"
|
||||||
<card type="edit-material" />
|
:type="nodeProps.data.type_"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</template>
|
||||||
|
</secondaryNode>
|
||||||
|
</template>
|
||||||
|
</VueFlow>
|
||||||
</div>
|
</div>
|
||||||
</fullscreen-dialog>
|
</fullscreen-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 FullscreenDialog from '../components/fullscreen-dialog.vue'
|
||||||
import MyInfo from '@/components/MyInfo.vue'
|
|
||||||
import card from './components/cards/index.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'
|
import { useGlobalStore } from '@/stores'
|
||||||
const globalStore = useGlobalStore()
|
const globalStore = useGlobalStore()
|
||||||
const dialogVisible = ref(true)
|
const dialogVisible = ref(false)
|
||||||
window.dialogVisible = dialogVisible
|
const position = { x: 0, y: 0 }
|
||||||
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 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>
|
<style lang="less" scoped>
|
||||||
.flow-canvas {
|
.flow-canvas {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #fcf8f1;
|
> .vue-flow {
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
> .canvas-main {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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>
|
</style>
|
||||||
|
|||||||
@@ -55,7 +55,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: #FFFCF4;
|
||||||
transition: opacity var(--transition-time);
|
transition: opacity var(--transition-time);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
&.show {
|
&.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>
|
||||||
@@ -1,21 +1,20 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Handle, Position } from '@vue-flow/core'
|
import { Handle, Position } from '@vue-flow/core'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object
|
||||||
default: () => ({
|
default: () => {
|
||||||
id: '',
|
id: ''
|
||||||
})
|
}
|
||||||
},
|
}
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<!-- source输入，target输出 -->
|
<!-- source输入，target输出 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="node">
|
<div class="node">
|
||||||
<Handle type="target" style="top: 40px;" id="Left" :position="Position.Left" />
|
<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" style="top: 40px" id="Right" :position="Position.Right" />
|
||||||
<!-- <Handle type="source" id="Right" :position="Position.Right" />
|
<!-- <Handle type="source" id="Right" :position="Position.Right" />
|
||||||
<Handle type="target" id="Left" :position="Position.Left" /> -->
|
<Handle type="target" id="Left" :position="Position.Left" /> -->
|
||||||
<!-- <div>{{ props.data.id }}</div> -->
|
<!-- <div>{{ props.data.id }}</div> -->
|
||||||
@@ -26,8 +25,7 @@ const props = defineProps<{
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.node{
|
.node {
|
||||||
.item{
|
cursor: initial;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
<svg
|
<svg
|
||||||
:class="svgClass"
|
:class="svgClass"
|
||||||
v-bind="$attrs"
|
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>
|
<use :href="iconName"></use>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -25,6 +25,10 @@ const props = defineProps({
|
|||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 16,
|
default: 16,
|
||||||
},
|
},
|
||||||
|
sizeUnit: {
|
||||||
|
type: String,
|
||||||
|
default: 'rem',
|
||||||
|
}
|
||||||
});
|
});
|
||||||
const iconName = computed(() => `#icon-${props.name}`);
|
const iconName = computed(() => `#icon-${props.name}`);
|
||||||
const svgClass = computed(() => {
|
const svgClass = computed(() => {
|
||||||
|
|||||||
11
src/main.ts
11
src/main.ts
@@ -9,7 +9,6 @@ import SvgIcon from "@/components/SvgIcon/index.vue";
|
|||||||
import "virtual:svg-icons-register";
|
import "virtual:svg-icons-register";
|
||||||
|
|
||||||
import i18n from "./lang/index";
|
import i18n from "./lang/index";
|
||||||
|
|
||||||
import flexible from "./utils/flexible.js";
|
import flexible from "./utils/flexible.js";
|
||||||
|
|
||||||
import "./router/router-config" // 路由守卫，做动态路由的地方
|
import "./router/router-config" // 路由守卫，做动态路由的地方
|
||||||
@@ -18,11 +17,11 @@ import 'element-plus/dist/index.css'
|
|||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
.use(ElementPlus)
|
.use(ElementPlus)
|
||||||
.use(store)
|
.use(store)
|
||||||
.component("SvgIcon", SvgIcon)
|
.component("SvgIcon", SvgIcon)
|
||||||
.use(i18n)
|
.use(i18n)
|
||||||
.mount('#app')
|
.mount('#app')
|
||||||
|
|
||||||
|
|
||||||
flexible();
|
flexible();
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export function useLayout() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
dagre.layout(dagreGraph)
|
dagre.layout(dagreGraph)
|
||||||
|
|
||||||
// set nodes with updated positions
|
// set nodes with updated positions
|
||||||
return nodes.map((node) => {
|
return nodes.map((node) => {
|
||||||
const nodeWithPosition = dagreGraph.node(node.id)
|
const nodeWithPosition = dagreGraph.node(node.id)
|
||||||
@@ -75,7 +75,6 @@ export function useLayout() {
|
|||||||
targetPosition = Position.Top
|
targetPosition = Position.Top
|
||||||
sourcePosition = Position.Bottom
|
sourcePosition = Position.Bottom
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...node,
|
...node,
|
||||||
targetPosition,
|
targetPosition,
|
||||||
|
|||||||
@@ -1,116 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 添加印花 -->
|
|
||||||
<div class="add-print">
|
|
||||||
<p class="label">Print</p>
|
|
||||||
<upload-file v-model="data.file" />
|
|
||||||
<p class="label">Settings</p>
|
|
||||||
<div class="settings">
|
|
||||||
<div>
|
|
||||||
<p class="label">Angle</p>
|
|
||||||
<my-input
|
|
||||||
v-model="data.setting.angle"
|
|
||||||
type="number"
|
|
||||||
after="°"
|
|
||||||
:min="-180"
|
|
||||||
:max="180"
|
|
||||||
icon="angle"
|
|
||||||
icon-size="8"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Scale</span>
|
|
||||||
<slider
|
|
||||||
:min="1"
|
|
||||||
:max="1000"
|
|
||||||
:tipFormatter="(v) => `${v}%`"
|
|
||||||
v-model="data.setting.scale"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Gap X</span>
|
|
||||||
<slider
|
|
||||||
:min="0"
|
|
||||||
:max="1000"
|
|
||||||
:tipFormatter="(v) => `${v}px`"
|
|
||||||
v-model="data.setting.gap.x"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Gap Y</span>
|
|
||||||
<slider
|
|
||||||
:min="0"
|
|
||||||
:max="1000"
|
|
||||||
:tipFormatter="(v) => `${v}px`"
|
|
||||||
v-model="data.setting.gap.y"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Offset</span>
|
|
||||||
<offset-tool v-model="data.setting.offset" :show-dish="false" />
|
|
||||||
</div>
|
|
||||||
<div class="offset">
|
|
||||||
<offset-tool v-model="data.setting.offset" :show-input="false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="label">Prompt</p>
|
|
||||||
<my-textarea v-model="data.prompt" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, onMounted } from 'vue'
|
|
||||||
import myTextarea from '../tools/my-textarea.vue'
|
|
||||||
import uploadFile from '../tools/upload-file.vue'
|
|
||||||
import myInput from '../tools/my-input.vue'
|
|
||||||
import offsetTool from '../tools/offset-tool.vue'
|
|
||||||
import slider from '../tools/slider.vue'
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
prompt: '',
|
|
||||||
setting: {
|
|
||||||
angle: 0,
|
|
||||||
scale: 100,
|
|
||||||
gap: {
|
|
||||||
x: 0,
|
|
||||||
y: 0
|
|
||||||
},
|
|
||||||
offset: {
|
|
||||||
x: 50,
|
|
||||||
y: 50
|
|
||||||
}
|
|
||||||
},
|
|
||||||
file: null
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.add-print {
|
|
||||||
> .settings {
|
|
||||||
margin: 0 1.1rem;
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
&.offset {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
> .label {
|
|
||||||
width: 5.5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
&:not(.offset) > div {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
> .slider {
|
|
||||||
--slider-thumb-color1: #000;
|
|
||||||
--slider-thumb-color2: #eee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 颜色调色板 -->
|
|
||||||
<div class="color-palette">
|
|
||||||
<p class="label">Choose Color</p>
|
|
||||||
<div class="color-list">
|
|
||||||
<div
|
|
||||||
class="color-item"
|
|
||||||
v-for="(v, i) in data.colors"
|
|
||||||
:key="i"
|
|
||||||
:style="{ background: v }"
|
|
||||||
></div>
|
|
||||||
<div class="add" @click="addColor">
|
|
||||||
<svg-icon name="add" size="12rem" color="#fff" />
|
|
||||||
<input type="color" ref="colorInput" @change="changeColor" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, onMounted, ref } from 'vue'
|
|
||||||
const data = reactive({
|
|
||||||
colors: ['#FF4747', '#F96060', '#FFB1B1', '#FA7B7B', '#FF9090']
|
|
||||||
})
|
|
||||||
const colorInput = ref<HTMLInputElement>()
|
|
||||||
// 添加颜色
|
|
||||||
const addColor = () => {
|
|
||||||
colorInput.value?.click()
|
|
||||||
}
|
|
||||||
const changeColor = (e: Event) => {
|
|
||||||
const target = e.target as HTMLInputElement
|
|
||||||
data.colors.push(target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.color-palette {
|
|
||||||
min-height: 14rem;
|
|
||||||
> .color-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
> div {
|
|
||||||
width: 3.5rem;
|
|
||||||
height: 3.5rem;
|
|
||||||
}
|
|
||||||
> .add {
|
|
||||||
border: 0.1rem solid rgba(0, 0, 0, 0.1);
|
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
|
||||||
position: relative;
|
|
||||||
> input {
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 编辑素材 -->
|
|
||||||
<div class="edit-material">
|
|
||||||
<p class="label">Material</p>
|
|
||||||
<upload-file v-model="data.file" />
|
|
||||||
<p class="label">Prompt</p>
|
|
||||||
<my-textarea v-model="data.prompt" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, onMounted } from 'vue'
|
|
||||||
import myTextarea from '../tools/my-textarea.vue'
|
|
||||||
import uploadFile from '../tools/upload-file.vue'
|
|
||||||
const data = reactive({
|
|
||||||
prompt: '',
|
|
||||||
file: null
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.edit-material {
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,186 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="header">
|
|
||||||
<svg-icon :name="currentComponent?.type" color="#fff" />
|
|
||||||
<span>{{ currentComponent?.title }}</span>
|
|
||||||
<div class="add" @click="emit('add')"><svg-icon name="add" size="14" /></div>
|
|
||||||
</div>
|
|
||||||
<div class="body">
|
|
||||||
<component :is="currentComponent?.component" ref="componentRef" />
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<button @click="onGenerateClick">
|
|
||||||
<svg-icon name="xingxing" size="16" />
|
|
||||||
<span>Generate</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref, markRaw, onMounted } from 'vue'
|
|
||||||
import ToRealStyle from './to-real-style.vue'
|
|
||||||
import SceneComposition from './scene-composition.vue'
|
|
||||||
import ColorPalette from './color-palette.vue'
|
|
||||||
import ToVideo from './to-video.vue'
|
|
||||||
import To3DModel from './to-3d-model.vue'
|
|
||||||
import AddPrint from './add-print.vue'
|
|
||||||
import ToCAD from './to-cad.vue'
|
|
||||||
import EditMaterial from './edit-material.vue'
|
|
||||||
const components = [
|
|
||||||
{
|
|
||||||
type: 'to-real-style',
|
|
||||||
title: 'To Real Style',
|
|
||||||
component: ToRealStyle
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'scene-composition',
|
|
||||||
title: 'Scene Composition',
|
|
||||||
component: SceneComposition
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'color-palette',
|
|
||||||
title: 'Color Palette',
|
|
||||||
component: ColorPalette
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'to-video',
|
|
||||||
title: 'To Video',
|
|
||||||
component: ToVideo
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'to-3d-model',
|
|
||||||
title: 'To 3D Model',
|
|
||||||
component: To3DModel
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'to-cad',
|
|
||||||
title: 'To CAD',
|
|
||||||
component: ToCAD
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'add-print',
|
|
||||||
title: 'Add Print',
|
|
||||||
component: AddPrint
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'edit-material',
|
|
||||||
title: 'Edit Material',
|
|
||||||
component: EditMaterial
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const emit = defineEmits(['add', 'generate'])
|
|
||||||
const props = defineProps({
|
|
||||||
type: {
|
|
||||||
type: String as () =>
|
|
||||||
| 'to-real-style'
|
|
||||||
| 'scene-composition'
|
|
||||||
| 'color-palette'
|
|
||||||
| 'to-video'
|
|
||||||
| 'to-3d-model'
|
|
||||||
| 'to-cad'
|
|
||||||
| 'add-print'
|
|
||||||
| 'edit-material',
|
|
||||||
default: 'to-real-style'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const currentComponent = computed(() => {
|
|
||||||
return components.find((item) => item.type === props.type)
|
|
||||||
})
|
|
||||||
const componentRef = ref(null)
|
|
||||||
const onGenerateClick = () => {
|
|
||||||
const data = { ...componentRef.value.data }
|
|
||||||
console.log(data)
|
|
||||||
emit('generate')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.card {
|
|
||||||
width: 25rem;
|
|
||||||
height: auto;
|
|
||||||
--border-radius: 1.6rem;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
background-color: #fff;
|
|
||||||
> .header {
|
|
||||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
||||||
height: 5rem;
|
|
||||||
background: #ff7a51;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 1.6rem;
|
|
||||||
position: relative;
|
|
||||||
> .c-svg {
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 0.6rem;
|
|
||||||
}
|
|
||||||
> span {
|
|
||||||
font-family: Semibold;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
> .add {
|
|
||||||
position: absolute;
|
|
||||||
width: 3.2rem;
|
|
||||||
height: 3.2rem;
|
|
||||||
border: 0.2rem solid #fff;
|
|
||||||
bottom: -1.6rem;
|
|
||||||
right: -1.6rem;
|
|
||||||
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;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .body {
|
|
||||||
padding: 1.6rem 1.3rem;
|
|
||||||
&:deep(> *) {
|
|
||||||
width: 100%;
|
|
||||||
> * {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .label {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-family: Medium;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .footer {
|
|
||||||
margin-bottom: 1.6rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
padding: 0 1.3rem;
|
|
||||||
> button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 11rem;
|
|
||||||
height: 2.8rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background-color: #fffcf4;
|
|
||||||
border: 1px solid #ffcf90;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-family: SemiBold;
|
|
||||||
cursor: pointer;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
> .c-svg {
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 0.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 场景构图 -->
|
|
||||||
<div class="scene-composition">
|
|
||||||
<p class="label">Prompt</p>
|
|
||||||
<my-textarea v-model="data.prompt" />
|
|
||||||
<p class="label">Choose Style</p>
|
|
||||||
<div class="style-list">
|
|
||||||
<div
|
|
||||||
class="item"
|
|
||||||
v-for="v in styleList"
|
|
||||||
:key="v.value"
|
|
||||||
: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="label">{{ v.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref, reactive, onMounted } from 'vue'
|
|
||||||
import myTextarea from '../tools/my-textarea.vue'
|
|
||||||
const styleList = ref([
|
|
||||||
{ label: 'Colorful', value: 'Colorful' },
|
|
||||||
{ label: 'Minimalist', value: 'Minimalist' },
|
|
||||||
{ label: 'Modernist', value: 'Modernist' },
|
|
||||||
{ label: 'Bauhaus', value: 'Bauhaus' },
|
|
||||||
{ label: 'Mintage', value: 'Mintage' },
|
|
||||||
{ label: 'Industrial', value: 'Industrial' },
|
|
||||||
{ label: 'Futuristic', value: 'Futuristic' },
|
|
||||||
{ label: 'Elegant', value: 'Elegant' },
|
|
||||||
{ label: 'Organic', value: 'Organic' },
|
|
||||||
{ label: 'Calm', value: 'Calm' },
|
|
||||||
{ label: 'Abstract', value: 'Abstract' },
|
|
||||||
{ label: 'Kitsch-core', value: 'Kitsch-core' },
|
|
||||||
{ label: 'Sophisticated', value: 'Sophisticated' },
|
|
||||||
{ label: 'Maximalism', value: 'Maximalism' },
|
|
||||||
{ label: 'Clean', value: 'Clean' },
|
|
||||||
{ label: 'Bright Colors', value: 'Bright Colors' },
|
|
||||||
{ label: 'Luxurious', value: 'Luxurious' },
|
|
||||||
{ label: 'Bold Colors', value: 'Bold Colors' },
|
|
||||||
{ label: 'Brutalism', value: 'Brutalism' }
|
|
||||||
])
|
|
||||||
const data = reactive({
|
|
||||||
prompt: '',
|
|
||||||
styles: ['Colorful', 'Modernist']
|
|
||||||
})
|
|
||||||
const onClickStyle = (value: string) => {
|
|
||||||
if (data.styles.includes(value)) {
|
|
||||||
data.styles = data.styles.filter((v) => v !== value)
|
|
||||||
} else {
|
|
||||||
data.styles.push(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.scene-composition {
|
|
||||||
> .style-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.829rem 0.55rem;
|
|
||||||
> .item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0.5rem 0.7rem;
|
|
||||||
font-family: Medium;
|
|
||||||
border-radius: 2rem;
|
|
||||||
font-size: 0.829rem;
|
|
||||||
border: 0.05rem solid #e4e4e7;
|
|
||||||
color: #000;
|
|
||||||
> .icon {
|
|
||||||
margin-right: 0.4rem;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
border-color: #0095ff;
|
|
||||||
background-color: rgba(0, 149, 255, 0.05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 转3D模型 -->
|
|
||||||
<div class="to-3d-model">
|
|
||||||
<p class="label">Image</p>
|
|
||||||
<upload-file v-model="data.file" />
|
|
||||||
<p class="label">Prompt</p>
|
|
||||||
<my-textarea v-model="data.prompt" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, onMounted } from 'vue'
|
|
||||||
import myTextarea from '../tools/my-textarea.vue'
|
|
||||||
import uploadFile from '../tools/upload-file.vue'
|
|
||||||
const data = reactive({
|
|
||||||
prompt: '',
|
|
||||||
file: null
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.to-3d-model {
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 转CAD -->
|
|
||||||
<div class="to-cad">
|
|
||||||
<p class="label">3D Model</p>
|
|
||||||
<upload-file v-model="data.file" />
|
|
||||||
<p class="label">Prompt</p>
|
|
||||||
<my-textarea v-model="data.prompt" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, onMounted } from 'vue'
|
|
||||||
import myTextarea from '../tools/my-textarea.vue'
|
|
||||||
import uploadFile from '../tools/upload-file.vue'
|
|
||||||
const data = reactive({
|
|
||||||
prompt: '',
|
|
||||||
file: null
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.to-cad {
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 转换为真实图 -->
|
|
||||||
<div class="to-real-style">
|
|
||||||
<p class="label">Prompt</p>
|
|
||||||
<my-textarea v-model="data.prompt" />
|
|
||||||
<div class="shortcut-list">
|
|
||||||
<div
|
|
||||||
class="item"
|
|
||||||
v-for="v in shortcutList"
|
|
||||||
:key="v.value"
|
|
||||||
@click="data.prompt = v.value"
|
|
||||||
>
|
|
||||||
{{ v.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="label">Size</p>
|
|
||||||
<pixel-ratio-selection v-model="data.pixelRatio" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref, reactive, onMounted } from 'vue'
|
|
||||||
import myTextarea from '../tools/my-textarea.vue'
|
|
||||||
import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
|
|
||||||
const shortcutList = ref([
|
|
||||||
{
|
|
||||||
label: 'Change the...',
|
|
||||||
value: 'Change the...'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Bright Colors...',
|
|
||||||
value: 'Bright Colors...'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Make the...',
|
|
||||||
value: 'Make the...'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Imagine...',
|
|
||||||
value: 'Imagine...'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Wood Materials with...',
|
|
||||||
value: 'Wood Materials with...'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const data = reactive({
|
|
||||||
prompt: '',
|
|
||||||
pixelRatio: '1:1',
|
|
||||||
file: null
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.to-real-style {
|
|
||||||
> .shortcut-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem 0.4rem;
|
|
||||||
> .item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5rem 0.3rem;
|
|
||||||
font-family: Medium;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: 0.05rem solid #e4e4e7;
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 转视频 -->
|
|
||||||
<div class="to-video">
|
|
||||||
<p class="label">Frames</p>
|
|
||||||
<div class="frames">
|
|
||||||
<upload-file v-model="data.first_file" tip="First Frame" />
|
|
||||||
<upload-file v-model="data.last_file" tip="Last Frame" />
|
|
||||||
</div>
|
|
||||||
<p class="label">Size</p>
|
|
||||||
<pixel-ratio-selection v-model="data.pixelRatio" />
|
|
||||||
<div class="label">
|
|
||||||
<span>Aspect Ratio</span>
|
|
||||||
<span>Time</span>
|
|
||||||
</div>
|
|
||||||
<div class="select">
|
|
||||||
<el-select v-model="data.aspectRatio">
|
|
||||||
<el-option v-for="v in aspectRatioList" :key="v" :label="v" :value="v" />
|
|
||||||
</el-select>
|
|
||||||
<el-select v-model="data.time">
|
|
||||||
<el-option v-for="v in timeList" :key="v" :label="v" :value="v" />
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<p class="label">Prompt</p>
|
|
||||||
<my-textarea v-model="data.prompt" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, ref } from 'vue'
|
|
||||||
import myTextarea from '../tools/my-textarea.vue'
|
|
||||||
import uploadFile from '../tools/upload-file.vue'
|
|
||||||
import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
|
|
||||||
const aspectRatioList = ref(['720p', '1080p', '1440p', '2160p', '1k', '2k'])
|
|
||||||
const timeList = ref(['5s', '10s', '15s', '20s', '30s', '60s'])
|
|
||||||
const data = reactive({
|
|
||||||
first_file: null,
|
|
||||||
last_file: null,
|
|
||||||
pixelRatio: '1:1',
|
|
||||||
aspectRatio: '720p',
|
|
||||||
time: '5s',
|
|
||||||
prompt: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.to-video {
|
|
||||||
> .frames {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
> .select,
|
|
||||||
> div.label {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.3rem;
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .select {
|
|
||||||
&:deep(.el-select) {
|
|
||||||
--el-select-input-font-size: 1.2rem;
|
|
||||||
.el-select__wrapper {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
min-height: 0;
|
|
||||||
height: 2.8rem;
|
|
||||||
padding: 0 0.8rem;
|
|
||||||
}
|
|
||||||
.el-select__selected-item,
|
|
||||||
.el-select__input-wrapper,
|
|
||||||
.el-select__placeholder {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.el-select__input {
|
|
||||||
height: 2.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-popper{
|
|
||||||
.el-select-dropdown{
|
|
||||||
li{
|
|
||||||
padding-left: 0.8rem;
|
|
||||||
height: 3rem;
|
|
||||||
line-height: 3rem;;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="my-input">
|
|
||||||
<span class="decorate"></span>
|
|
||||||
<span v-show="icon" class="icon">
|
|
||||||
<svg-icon :name="icon" :size="iconSize" />
|
|
||||||
</span>
|
|
||||||
<span v-show="before" class="before">{{ before }}</span>
|
|
||||||
<input v-bind="attrs" :value="modelValue" @input="onInput" />
|
|
||||||
<span v-show="after" class="after">{{ after }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, useAttrs, watch } from 'vue'
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: [String, Number] },
|
|
||||||
icon: { default: '', type: String },
|
|
||||||
iconSize: { default: '10', type: [Number, String] },
|
|
||||||
before: { default: '', type: String },
|
|
||||||
after: { default: '', type: String }
|
|
||||||
})
|
|
||||||
const attrs = useAttrs()
|
|
||||||
const emit = defineEmits(['update:modelValue', 'input'])
|
|
||||||
const onInput = (e) => {
|
|
||||||
var value = e.target.value
|
|
||||||
if (attrs.type === 'number') value = Number(value)
|
|
||||||
emit('update:modelValue', value)
|
|
||||||
emit('input', value)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.my-input {
|
|
||||||
display: flex;
|
|
||||||
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;
|
|
||||||
> .decorate {
|
|
||||||
width: 0.2rem;
|
|
||||||
background-color: rgba(230, 230, 231, 1);
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
height: 85%;
|
|
||||||
margin-right: 0.4rem;
|
|
||||||
}
|
|
||||||
> .iconfont {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #000;
|
|
||||||
margin-right: 0.2rem;
|
|
||||||
}
|
|
||||||
> .before {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #000;
|
|
||||||
margin-right: 0.2rem;
|
|
||||||
}
|
|
||||||
> .after {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #000;
|
|
||||||
margin-left: 0.1rem;
|
|
||||||
}
|
|
||||||
> input {
|
|
||||||
font-size: 1rem;
|
|
||||||
width: 0;
|
|
||||||
flex: 1;
|
|
||||||
text-align: right;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 0;
|
|
||||||
-moz-appearance: textfield; /* Firefox */
|
|
||||||
&::-webkit-outer-spin-button,
|
|
||||||
&::-webkit-inner-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="my-textarea">
|
|
||||||
<textarea
|
|
||||||
:placeholder="placeholder"
|
|
||||||
:value="modelValue"
|
|
||||||
@input="onInput"
|
|
||||||
@change="onChange"
|
|
||||||
></textarea>
|
|
||||||
<div class="bths">
|
|
||||||
<button><svg-icon name="mobang" size="10" /></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref, markRaw, onMounted } from 'vue'
|
|
||||||
const emit = defineEmits(['update:modelValue', 'input', 'change'])
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: String },
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: 'Enter the scene you want to describe...'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const onInput = (e) => {
|
|
||||||
const value = e.target.value
|
|
||||||
emit('update:modelValue', value)
|
|
||||||
emit('input', value)
|
|
||||||
}
|
|
||||||
const onChange = (e) => {
|
|
||||||
emit('change', e.target.value)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.my-textarea {
|
|
||||||
width: 100%;
|
|
||||||
height: 11.5rem;
|
|
||||||
border: 0.1rem solid #e4e4e7;
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: 1rem 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> textarea {
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
resize: none;
|
|
||||||
font-family: Medium;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #333;
|
|
||||||
&::placeholder {
|
|
||||||
color: #c9c9c9;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 0.4rem;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .bths {
|
|
||||||
padding: 0.5rem 0.5rem 0;
|
|
||||||
> button {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border: 1px solid #e4e4e7;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,217 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="offset-tool">
|
|
||||||
<div class="input" v-show="showInput">
|
|
||||||
<my-input v-model="left" type="number" before="X" after="%" :min="-100" :max="100" />
|
|
||||||
<my-input v-model="top" type="number" before="Y" after="%" :min="-100" :max="100" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="dish"
|
|
||||||
@mousedown="mousedown"
|
|
||||||
@touchstart="mousedown"
|
|
||||||
ref="dishRef"
|
|
||||||
v-show="showDish"
|
|
||||||
>
|
|
||||||
<img src="/src/assets/images/icon/xyz.png" />
|
|
||||||
<span class="ball" :style="ballStyle"></span>
|
|
||||||
<span class="tip x">X: {{ left }}%</span>
|
|
||||||
<span class="tip y">Y: {{ top }}%</span>
|
|
||||||
<span class="line x"></span>
|
|
||||||
<span class="line y"></span>
|
|
||||||
<span class="line z" :style="lineZStyle"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, watch, computed } from 'vue'
|
|
||||||
import MyInput from './my-input.vue'
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: Object as () => { x: number; y: number } },
|
|
||||||
showInput: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
showDish: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['update:modelValue', 'change', 'input'])
|
|
||||||
// 工具的实际坐标 -100 ~ 100
|
|
||||||
const top = ref(Math.round(props.modelValue.y))
|
|
||||||
const left = ref(Math.round(props.modelValue.x))
|
|
||||||
|
|
||||||
// 原点的坐标 0 ~ 100
|
|
||||||
const ballStyle = computed(() => ({
|
|
||||||
top: 50 + top.value / 2 + '%',
|
|
||||||
left: 50 + left.value / 2 + '%'
|
|
||||||
}))
|
|
||||||
watch(
|
|
||||||
() => props.modelValue.x,
|
|
||||||
(v) => (left.value = v)
|
|
||||||
)
|
|
||||||
watch(
|
|
||||||
() => props.modelValue.y,
|
|
||||||
(v) => (top.value = v)
|
|
||||||
)
|
|
||||||
const dishRef = ref<HTMLDivElement>()
|
|
||||||
const mousedown = (e: MouseEvent | TouchEvent) => {
|
|
||||||
if (!dishRef.value) return
|
|
||||||
const mousemove = (e: MouseEvent | TouchEvent) => {
|
|
||||||
if (!dishRef.value) return
|
|
||||||
const rect = dishRef.value.getBoundingClientRect()
|
|
||||||
const X = e.clientX || (e as TouchEvent).touches[0].clientX
|
|
||||||
const Y = e.clientY || (e as TouchEvent).touches[0].clientY
|
|
||||||
var x = ((X - rect.left) / rect.width) * 100
|
|
||||||
var y = ((Y - rect.top) / rect.height) * 100
|
|
||||||
if (x < 0) x = 0
|
|
||||||
if (x > 100) x = 100
|
|
||||||
if (y < 0) y = 0
|
|
||||||
if (y > 100) y = 100
|
|
||||||
left.value = Math.round((x - 50) * 2)
|
|
||||||
top.value = Math.round((y - 50) * 2)
|
|
||||||
onInput()
|
|
||||||
}
|
|
||||||
mousemove(e)
|
|
||||||
const mouseup = () => {
|
|
||||||
onChange()
|
|
||||||
document.removeEventListener('mousemove', mousemove)
|
|
||||||
document.removeEventListener('touchmove', mousemove)
|
|
||||||
document.removeEventListener('mouseup', mouseup)
|
|
||||||
document.removeEventListener('touchend', mouseup)
|
|
||||||
}
|
|
||||||
document.addEventListener('mousemove', mousemove)
|
|
||||||
document.addEventListener('touchmove', mousemove)
|
|
||||||
document.addEventListener('mouseup', mouseup)
|
|
||||||
document.addEventListener('touchend', mouseup)
|
|
||||||
}
|
|
||||||
const onInput = () => {
|
|
||||||
const value = {
|
|
||||||
x: left.value,
|
|
||||||
y: top.value
|
|
||||||
}
|
|
||||||
emit('update:modelValue', value)
|
|
||||||
emit('input', value)
|
|
||||||
}
|
|
||||||
var changeTime: any = null
|
|
||||||
const onChange = () => {
|
|
||||||
clearTimeout(changeTime)
|
|
||||||
changeTime = setTimeout(() => {
|
|
||||||
const value = {
|
|
||||||
x: left.value,
|
|
||||||
y: top.value
|
|
||||||
}
|
|
||||||
emit('update:modelValue', value)
|
|
||||||
emit('change', value)
|
|
||||||
}, 500)
|
|
||||||
}
|
|
||||||
const lineZStyle = computed(() => ({
|
|
||||||
'--rotateZ': calculateAngle(0, 0, left.value, top.value) + 'deg',
|
|
||||||
width: calculateDistance(0, 0, left.value, top.value) / 2 + '%'
|
|
||||||
}))
|
|
||||||
// 计算角度
|
|
||||||
function calculateAngle(x1: number, y1: number, x2: number, y2: number) {
|
|
||||||
const deltaX = x2 - x1
|
|
||||||
const deltaY = y1 - y2
|
|
||||||
let angle = Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90
|
|
||||||
return angle
|
|
||||||
}
|
|
||||||
// 计算距离
|
|
||||||
function calculateDistance(x1: number, y1: number, x2: number, y2: number) {
|
|
||||||
const deltaX = x2 - x1
|
|
||||||
const deltaY = y2 - y1
|
|
||||||
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
|
|
||||||
return distance
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.offset-tool {
|
|
||||||
position: relative;
|
|
||||||
> .input {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 1rem;
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .dish {
|
|
||||||
width: 11.5rem;
|
|
||||||
height: 11.5rem;
|
|
||||||
border: 0.1rem solid #eaeaea;
|
|
||||||
border-radius: 0.34rem;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
margin-top: 2rem;
|
|
||||||
> * {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
> img {
|
|
||||||
width: 1.2rem;
|
|
||||||
height: 1.2rem;
|
|
||||||
bottom: 0.35rem;
|
|
||||||
right: 0.35rem;
|
|
||||||
}
|
|
||||||
> .ball {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 0.85rem;
|
|
||||||
height: 0.85rem;
|
|
||||||
border: 0.1rem solid #fff;
|
|
||||||
background-color: #333;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0px 0.068rem 0.17px 0px rgba(0, 0, 0, 0.26);
|
|
||||||
}
|
|
||||||
> .tip {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #000;
|
|
||||||
line-height: 2.4rem;
|
|
||||||
&.x {
|
|
||||||
top: 50%;
|
|
||||||
right: 0%;
|
|
||||||
transform: translate(100%, -50%);
|
|
||||||
padding-left: 6px;
|
|
||||||
}
|
|
||||||
&.y {
|
|
||||||
top: 0%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .line {
|
|
||||||
border-color: #d9d9d9;
|
|
||||||
border-style: dashed;
|
|
||||||
border-width: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
&.x {
|
|
||||||
width: 100%;
|
|
||||||
border-top-width: 0.1rem;
|
|
||||||
}
|
|
||||||
&.y {
|
|
||||||
height: 100%;
|
|
||||||
border-left-width: 0.1rem;
|
|
||||||
}
|
|
||||||
&.z {
|
|
||||||
width: 50%;
|
|
||||||
border-top-width: 0.1rem;
|
|
||||||
border-color: #454754;
|
|
||||||
transform: translate(0%, -50%) rotateZ(var(--rotateZ));
|
|
||||||
transform-origin: left center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="pixel-ratio-selection">
|
|
||||||
<div
|
|
||||||
v-for="v in list"
|
|
||||||
:key="v"
|
|
||||||
:class="{ active: v === modelValue }"
|
|
||||||
@click="onChange(v)"
|
|
||||||
:style="{ '--w': v.split(':')[0], '--h': v.split(':')[1] }"
|
|
||||||
>
|
|
||||||
{{ v }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, defineExpose } from 'vue'
|
|
||||||
const emit = defineEmits(['update:modelValue', 'change'])
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: String },
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ['1:1', '4:3', '3:4', '16:9']
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const data = reactive({})
|
|
||||||
const onChange = (v) => {
|
|
||||||
emit('update:modelValue', v)
|
|
||||||
emit('change', v)
|
|
||||||
}
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.pixel-ratio-selection {
|
|
||||||
width: 100%;
|
|
||||||
height: 3.4rem;
|
|
||||||
border-radius: 0.6rem;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 1.7rem;
|
|
||||||
> div {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #7c7c7c;
|
|
||||||
height: 2.1rem;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
&.active {
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
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;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,172 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="slider" :disabled="disabled">
|
|
||||||
<div
|
|
||||||
class="input-range"
|
|
||||||
:style="{
|
|
||||||
'--progress': (value - props.min) / (props.max - props.min)
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<span class="tip">{{ props.tipFormatter(value) }}</span>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
v-model="value"
|
|
||||||
v-bind="$attrs"
|
|
||||||
@input="onInput"
|
|
||||||
@change="onChange"
|
|
||||||
:disabled="disabled"
|
|
||||||
:min="props.min"
|
|
||||||
:max="props.max"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="input" v-show="isInput">
|
|
||||||
<my-input
|
|
||||||
type="number"
|
|
||||||
v-model="value"
|
|
||||||
v-bind="$attrs"
|
|
||||||
@input="onInput"
|
|
||||||
@change="onChange"
|
|
||||||
:disabled="disabled"
|
|
||||||
:min="props.min"
|
|
||||||
:max="props.max"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, defineProps, defineEmits, watch } from 'vue'
|
|
||||||
import MyInput from './my-input.vue'
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: Number },
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
min: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
max: {
|
|
||||||
type: Number,
|
|
||||||
default: 100
|
|
||||||
},
|
|
||||||
tipFormatter: {
|
|
||||||
type: Function,
|
|
||||||
default: (v) => v
|
|
||||||
},
|
|
||||||
isInput: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['update:modelValue', 'change', 'input'])
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(v) => {
|
|
||||||
value.value = v
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const value = ref(props.modelValue)
|
|
||||||
const onInput = () => {
|
|
||||||
if (props.disabled) return
|
|
||||||
const v = Number(value.value)
|
|
||||||
emit('update:modelValue', v)
|
|
||||||
emit('input', v)
|
|
||||||
}
|
|
||||||
const onChange = () => {
|
|
||||||
if (props.disabled) return
|
|
||||||
const v = Number(value.value)
|
|
||||||
emit('update:modelValue', v)
|
|
||||||
emit('change', v)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.slider {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
--input-thumb-size: 0.8rem;
|
|
||||||
--backcolor1: var(--slider-thumb-color1, #4285f4);
|
|
||||||
--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
|
|
||||||
&:hover {
|
|
||||||
> .input-range > .tip {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .input-range {
|
|
||||||
position: relative;
|
|
||||||
flex: 2;
|
|
||||||
display: flex;
|
|
||||||
> input {
|
|
||||||
width: 100%;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
height: 0.339rem;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
outline: none;
|
|
||||||
background: linear-gradient(
|
|
||||||
to right,
|
|
||||||
var(--backcolor1) 0%,
|
|
||||||
var(--backcolor1) calc(var(--progress) * 100%),
|
|
||||||
var(--backcolor2) calc(var(--progress) * 100%),
|
|
||||||
var(--backcolor2) 100%
|
|
||||||
);
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: var(--input-thumb-size);
|
|
||||||
height: var(--input-thumb-size);
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--backcolor1); /* 蓝色滑块 */
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
&::-webkit-slider-thumb:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .tip {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 1rem;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
color: #666;
|
|
||||||
top: calc(var(--input-thumb-size) / -2 - 0.35rem);
|
|
||||||
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;
|
|
||||||
white-space: nowrap;
|
|
||||||
pointer-events: none;
|
|
||||||
display: none;
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 97%;
|
|
||||||
left: 50%;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .input {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 1rem;
|
|
||||||
> input {
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="upload-file">
|
|
||||||
<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" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control" v-else>
|
|
||||||
<div class="icon"><svg-icon name="upload" size="17" /></div>
|
|
||||||
<p class="txt">{{ tip }}</p>
|
|
||||||
<button @click="onSelectFile">Select File</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, computed } from 'vue'
|
|
||||||
const emit = defineEmits(['update:modelValue', 'change'])
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: [File, null] },
|
|
||||||
tip: { type: String, default: 'Upload your files' }
|
|
||||||
})
|
|
||||||
const data = reactive({
|
|
||||||
file: null
|
|
||||||
})
|
|
||||||
const url = computed(() => (props.modelValue ? URL.createObjectURL(props.modelValue) : ''))
|
|
||||||
const onChange = (v) => {
|
|
||||||
emit('update:modelValue', v)
|
|
||||||
emit('change', v)
|
|
||||||
}
|
|
||||||
const onSelectFile = () => {
|
|
||||||
const input = document.createElement('input')
|
|
||||||
input.type = 'file'
|
|
||||||
input.accept = 'image/png, image/jpeg, image/jpg'
|
|
||||||
input.addEventListener('change', (e) => {
|
|
||||||
const file = e.target.files[0]
|
|
||||||
if (file) onChange(file)
|
|
||||||
})
|
|
||||||
input.click()
|
|
||||||
}
|
|
||||||
defineExpose({ data })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.upload-file {
|
|
||||||
width: 100%;
|
|
||||||
height: 9.9rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
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;
|
|
||||||
color: #7c7c7c;
|
|
||||||
}
|
|
||||||
> button {
|
|
||||||
box-shadow: 0px 0.75px 0px 0px #00000005;
|
|
||||||
min-width: 3.9rem;
|
|
||||||
height: 1.3rem;
|
|
||||||
border-radius: 0.23rem;
|
|
||||||
background-color: #fff;
|
|
||||||
font-size: 0.6rem;
|
|
||||||
color: #000;
|
|
||||||
border: 0.05rem solid #d9d9d9;
|
|
||||||
cursor: pointer;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .preview {
|
|
||||||
width: 8rem;
|
|
||||||
height: 8rem;
|
|
||||||
position: relative;
|
|
||||||
> img {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
> .close {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.01rem;
|
|
||||||
right: 0.01rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,143 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="canvas">
|
|
||||||
<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
|
|
||||||
<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> -->
|
|
||||||
|
|
||||||
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="" :nodes-draggable="true">
|
|
||||||
<template #node-InputNode="nodeProps">
|
|
||||||
<inputNode v-bind="nodeProps" >
|
|
||||||
<template v-slot:content>{{ nodeProps.type }}
|
|
||||||
<card type="to-real-style" />
|
|
||||||
</template>
|
|
||||||
</inputNode>
|
|
||||||
</template>
|
|
||||||
<template #node-SecondaryNode="nodeProps">
|
|
||||||
<secondaryNode v-bind="nodeProps" >
|
|
||||||
<template v-slot:content>
|
|
||||||
<card type="scene-composition" />
|
|
||||||
</template>
|
|
||||||
</secondaryNode>
|
|
||||||
</template>
|
|
||||||
</VueFlow>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import card from './components/cards/index.vue'
|
|
||||||
import { useLayout } from '@/utils/treeDiagram'
|
|
||||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
|
||||||
import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
|
|
||||||
import { useGlobalStore } from '@/stores'
|
|
||||||
import secondaryNode from './components/node/secondaryNode.vue'
|
|
||||||
import inputNode from './components/node/InputNode.vue'
|
|
||||||
const globalStore = useGlobalStore()
|
|
||||||
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
|
|
||||||
}
|
|
||||||
const position = { x: 0, y: 0 }
|
|
||||||
|
|
||||||
const nodes = ref<Node[]>([
|
|
||||||
{ id: '1', type: 'InputNode', label: 'Node 1', class: 'custom-node start', position },
|
|
||||||
{ id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
|
|
||||||
])
|
|
||||||
const edges = ref<Edge[]>([
|
|
||||||
{ id: 'e1-3', source: '1', target: '2', type: 'smoothstep', },
|
|
||||||
])
|
|
||||||
const { fitView } = useVueFlow()
|
|
||||||
const { layout } = useLayout()
|
|
||||||
async function layoutGraph(direction) {
|
|
||||||
setTimeout(() => {
|
|
||||||
nodes.value = layout(nodes.value, edges.value, direction)
|
|
||||||
console.log(nodes.value)
|
|
||||||
nextTick(() => {
|
|
||||||
fitView()
|
|
||||||
})
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
globalStore.setHomeLeftNavCollapse(true)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
@import "@vue-flow/core/dist/style.css";
|
|
||||||
@import "@vue-flow/core/dist/theme-default.css";
|
|
||||||
</style>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.canvas {
|
|
||||||
// overflow-y: auto;
|
|
||||||
// display: flex;
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
// align-content: flex-start;
|
|
||||||
// align-items: flex-start;
|
|
||||||
// padding: 2rem;
|
|
||||||
// gap: 2rem;
|
|
||||||
background-color: #fcf8f1;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
> .canvas-main {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .vue-flow{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -167,8 +167,6 @@ defineExpose({push})
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import "@vue-flow/core/dist/style.css";
|
|
||||||
@import "@vue-flow/core/dist/theme-default.css";
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.view2{
|
.view2{
|
||||||
|
|||||||
Reference in New Issue
Block a user