UPDATE: VERSION-20260313

This commit is contained in:
libertyspy
2026-03-13 17:05:08 +08:00
parent a2f2cbb185
commit 7b578f5d63
7 changed files with 96 additions and 54 deletions

View File

@@ -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;