UPDATE: VERSION-20260313
This commit is contained in:
@@ -3,18 +3,19 @@
|
||||
<a-card
|
||||
:class="[
|
||||
'ks-designer-node',
|
||||
`ks-designer-${element?.category ?? 'model'}-node`
|
||||
`ks-designer-${element?.category ?? 'model'}-node`,
|
||||
`ks-designer-group-${element?.group ?? 'general'}`
|
||||
]"
|
||||
hoverable
|
||||
>
|
||||
<template #title>
|
||||
<a-space>
|
||||
<span class="ks-designer-node-icon"></span>
|
||||
<span class="ks-designer-node-title">{{ element?.name ?? '-' }}</span>
|
||||
<!-- <span class="ks-designer-node-icon"></span>-->
|
||||
<span class="ks-designer-node-title">{{ element?.name ?? '-' }} {{element?.category}}</span>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<div class="port port-in">
|
||||
<div class="port port-in" magnet="active">
|
||||
<div class="triangle-left" data-port="in-0" magnet="passive"></div>
|
||||
</div>
|
||||
<div class="w-full ks-designer-node-text">
|
||||
@@ -30,7 +31,7 @@
|
||||
{{ substring(element?.description ?? (element?.name ?? '-'), 40) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="port port-out">
|
||||
<div class="port port-out" magnet="active">
|
||||
<div class="triangle-right" data-port="out-0" magnet="active"></div>
|
||||
</div>
|
||||
</a-card>
|
||||
@@ -190,7 +191,7 @@ export default defineComponent({
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
padding: 10px 30px !important;
|
||||
border-top: 1px solid rgba(108, 99, 255, 0.5);
|
||||
//border-top: 1px solid rgba(108, 99, 255, 0.5);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -234,39 +235,42 @@ export default defineComponent({
|
||||
.triangle-left {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-right: 10px solid #3c82f6;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-top: 4px solid transparent;
|
||||
border-right: 5px solid #5da1df;
|
||||
border-bottom: 4px solid transparent;
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 2px;
|
||||
top: 0.5px;
|
||||
magnet: passive;
|
||||
}
|
||||
|
||||
/* 右三角形 */
|
||||
.triangle-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 10px solid #3c82f6;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-top: 4px solid transparent;
|
||||
border-left: 5px solid #5da1df;
|
||||
border-bottom: 4px solid transparent;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 2px;
|
||||
top: 0.5px;
|
||||
magnet: passive;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 左侧入桩样式
|
||||
.port-in {
|
||||
background-color: #6C63FF;
|
||||
//background-color: #3c82f6;
|
||||
margin-right: 8px;
|
||||
//border: 1px solid #093866;
|
||||
magnet: passive;
|
||||
box-shadow: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
display: block;
|
||||
background: url('@/assets/icons/point.svg') center / 100% 100%;
|
||||
//background: url('@/assets/icons/point.svg') center / 100% 100%;
|
||||
border: 2px solid #5da1df;
|
||||
|
||||
position: absolute;
|
||||
//top: 7px;
|
||||
@@ -279,10 +283,12 @@ export default defineComponent({
|
||||
margin-right: 5px;
|
||||
magnet: active;
|
||||
box-shadow: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
display: block;
|
||||
background: url('@/assets/icons/point.svg') center / 100% 100%;
|
||||
//background: url('@/assets/icons/point.svg') center / 100% 100%;
|
||||
border: 2px solid #5da1df;
|
||||
background:#5da1df;
|
||||
|
||||
position: absolute;
|
||||
//right: 8px;
|
||||
@@ -302,9 +308,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&.ks-designer-root-node{
|
||||
.ant-card-head {
|
||||
background: url('@/assets/icons/card-head-gray.png') center / 100% 100%;
|
||||
}
|
||||
.ks-designer-node-icon {
|
||||
background: url('@/assets/icons/icon-root.svg') center / 100% 100%;
|
||||
}
|
||||
@@ -320,32 +323,66 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&.ks-designer-sequence-node{
|
||||
.ant-card-head {
|
||||
background: url('@/assets/icons/card-head-green.png') center / 100% 100%;
|
||||
}
|
||||
.ks-designer-node-icon {
|
||||
background: url('@/assets/icons/icon-sequence.svg') center / 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.ks-designer-parallel-node{
|
||||
.ant-card-head {
|
||||
background: url('@/assets/icons/card-head-blue.png') center / 100% 100%;
|
||||
}
|
||||
.ks-designer-node-icon {
|
||||
background: url('@/assets/icons/icon-parallel.svg') center / 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.ks-designer-precondition-node{
|
||||
.ant-card-head {
|
||||
background: url('@/assets/icons/card-head-dark.png') center / 100% 100%;
|
||||
}
|
||||
.ks-designer-node-icon {
|
||||
background: url('@/assets/icons/icon-branch.svg') center / 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.ks-designer-group-control,
|
||||
&.ks-designer-group-condition {
|
||||
.ant-card-head{
|
||||
display:none;
|
||||
}
|
||||
.ant-card-body {
|
||||
height: calc(100%);
|
||||
border-radius: 8px;
|
||||
background: url('@/assets/icons/card-head-gray.png') center / 100% 100%;
|
||||
}
|
||||
|
||||
&.ks-designer-root-node{
|
||||
.ant-card-body {
|
||||
background: url('@/assets/icons/card-head-dark.png') center / 100% 100%;
|
||||
}
|
||||
}
|
||||
&.ks-designer-sequence-node{
|
||||
.ant-card-body {
|
||||
background: url('@/assets/icons/card-head-green.png') center / 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.ks-designer-parallel-node{
|
||||
.ant-card-body {
|
||||
background: url('@/assets/icons/card-head-blue.png') center / 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.ks-designer-precondition-node{
|
||||
.ant-card-body {
|
||||
background: url('@/assets/icons/card-head-dark.png') center / 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.port-in,
|
||||
.port-out {
|
||||
top: 40%;
|
||||
}
|
||||
.ks-designer-node-text{
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
//&.ks-designer-precondition-node{
|
||||
// border:0;
|
||||
// box-shadown:none;
|
||||
|
||||
Reference in New Issue
Block a user