@@ -15,7 +15,6 @@
< / a-space >
< / template >
<!-- 节点内容区域 -- >
< div class = "w-full" >
< a-tooltip >
< template # title >
@@ -127,23 +126,34 @@ export default defineComponent({
< style lang = "less" >
. ks - designer - node {
background : linear - gradient ( 150 deg , # 093866 1 % , # 1 f69b3 55 % ) ;
border : 0 ;
background : linear - gradient ( 150 deg , rgba ( 108 , 99 , 255 ) 1 % , rgba ( 108 , 99 , 2 55) 100 % ) ;
border - radius : 8 px ;
width : 100 % ;
height : 100 % ;
cursor : pointer ;
position : relative ;
background : # 1 e2533 ;
border : 1 px solid # 4 a7aff ;
& : hover {
border : 1 px solid # 4 a7aff ;
box - shadow : 0 0 10 px rgba ( 74 , 122 , 255 , 0.3 ) ;
}
. ant - card - head {
border : 0 ;
height : 38 px ;
min - height : 38 px ;
border - radius : 0 ;
color : # ddd ;
color : # fff ;
font - size : 12 px ;
font - weight : normal ;
padding : 0 20 px ;
background : linear - gradient ( to bottom , # 3 a4c70 , # 2 d3a56 ) ;
border - top - left - radius : 8 px ;
border - top - right - radius : 8 px ;
background : linear - gradient ( to bottom , rgba ( 108 , 99 , 255 , 0.15 ) , rgba ( 108 , 99 , 255 , 0.05 ) ) ;
//background: linear-gradient(to bottom, rgb(234 234 234 / 20%), rgb(191 191 191 / 58%));
}
. ks - designer - node - icon {
@@ -158,115 +168,118 @@ export default defineComponent({
. ks - designer - node - title {
font - size : 13 px ;
color : # fff ;
}
. ant - card - body {
color : # fff ;
color : # f5f5f5 ;
height : calc ( 100 % - 38 px ) ;
border - radius : 0 ;
font - size : 12 px ;
padding : 8 px 15 px ;
border - top : 1 px solid # 195693 ;
border - top : 1 px solid rgba ( 108 , 99 , 255 , 0.5 ) ;
overflow : hidden ;
text - overflow : ellipsis ;
white - space : nowrap ;
box - shadow : 0 0 10 px rgba ( 74 , 122 , 255 , 0.3 ) ;
}
& . ks - designer - model - node ,
& . ks - designer - task - node {
background : linear - gradient ( 150 deg , # 20421 b 1 % , # 4 a6646 55 % ) ;
. ant - card - body {
border - top : 1 px solid # 466741 ;
}
. ks - designer - node - icon {
background : url ( '@/assets/icons/m-02.png' ) center / 100 % 100 % ;
}
}
& . ks - designer - input - node {
background : linear - gradient ( 150 deg , # 083058 1 % , # 1 e5d9b 55 % ) ;
. ant - card - body {
border - top : 1 px solid # 105 ca7 ;
}
. ks - designer - node - icon {
background : url ( '@/assets/icons/icon-model-input.png' ) center / 100 % 100 % ;
}
}
& . ks - designer - action - node {
background : linear - gradient ( 150 deg , # 343207 1 % , # 485010 55 % ) ;
. ant - card - body {
border - top : 1 px solid # 59550 e ;
}
. ks - designer - node - icon {
background : url ( '@/assets/icons/bg-fk-point.png' ) center / 100 % 100 % ;
}
}
& . ks - designer - precondition - node ,
& . ks - designer - component - node {
background : linear - gradient ( 150 deg , # 06226 b 1 % , # 1 a43a7 55 % ) ;
. ant - card - body {
border - top : 1 px solid # 26448 c ;
}
}
& . ks - designer - select - node ,
& . ks - designer - control - node {
background : linear - gradient ( 150 deg , # 1 d4f32 1 % , # 326 a5d 55 % ) ;
. ant - card - body {
border - top : 1 px solid # 326 a5d ;
}
. ks - designer - node - icon {
background : url ( '@/assets/icons/bg-model-builder-card-title.png' ) center / 100 % 100 % ;
}
}
// model/task 节点:浅紫渐变
//&.ks-designer-model-node,
//&.ks-designer-task-node {
// background: linear-gradient(150deg, rgba(92,84,247,0.9) 1%, rgba(115,108,250,0.7) 55%);
//
// .ant-card-body {
// border-top: 1px solid rgba(92,84,247,0.5);
// }
//
// .ks-designer-node-icon {
// background: url('@/assets/icons/m-02.png') center / 100% 100%;
// }
//}
//
//// input 节点:深紫渐变
//&.ks-designer-input-node {
// background: linear-gradient(150deg, rgba(82,73,245,0.9) 1%, rgba(105,98,249,0.7) 55%);
//
// .ant-card-body {
// border-top: 1px solid rgba(82,73,245,0.5);
// }
//
// .ks-designer-node-icon {
// background: url('@/assets/icons/icon-model-input.png') center / 100% 100%;
// }
//}
//
//// action 节点: 亮紫渐变( 对应之前的action-node)
//&.ks-designer-action-node {
// background: linear-gradient(150deg, rgba(108,99,255,0.9) 1%, rgba(140,133,255,0.7) 55%);
//
// .ant-card-body {
// border-top: 1px solid rgba(108,99,255,0.5);
// }
//
// .ks-designer-node-icon {
// background: url('@/assets/icons/bg-fk-point.png') center / 100% 100%;
// }
//}
//
//// precondition/component 节点:蓝紫渐变
//&.ks-designer-precondition-node,
//&.ks-designer-component-node {
// background: linear-gradient(150deg, rgba(72,64,243,0.9) 1%, rgba(95,88,248,0.7) 55%);
//
// .ant-card-body {
// border-top: 1px solid rgba(72,64,243,0.5);
// }
//}
//
//// select/control 节点:浅蓝紫渐变
//&.ks-designer-select-node,
//&.ks-designer-control-node {
// background: linear-gradient(150deg, rgba(90,82,246,0.9) 1%, rgba(118,111,251,0.7) 55%);
//
// .ant-card-body {
// border-top: 1px solid rgba(90,82,246,0.5);
// }
//
// .ks-designer-node-icon {
// background: url('@/assets/icons/bg-model-builder-card-title.png') center / 100% 100%;
// }
//}
// 连接桩容器样式
. ks - designer - node - content {
width : 100 % ;
display : flex ;
flex - direction : column ;
gap : 4 px ; // 每个child行之间的间距
gap : 4 px ;
}
// 每个child行( 包含左右桩+文本)
. ks - designer - node - row {
width : 100 % ;
display : flex ;
align - items : center ;
position : relative ;
min - height : 24 px ; // 固定行高,保证桩对齐
min - height : 24 px ;
}
// 连接桩基础样式
. port {
width : 12 px ;
height : 12 px ;
border - radius : 50 % ;
cursor : crosshair ;
flex - shrink : 0 ;
box - shadow : 0 0 0 2 px rgb ( 74 114 214 / 80 % ) ;
z - index : 10 ; // 确保桩在最上层
// X6 标记为可连线的磁体
box - shadow : 0 0 0 2 px rgb ( 108 , 99 , 255 , 0.8 ) ;
z - index : 10 ;
magnet : true ;
}
// 左侧入桩样式
. port - in {
background - color : # 093866 ; // 青色:入桩
margin - right : 8 px ; // 与文本的间距
background - color : # 6 C63FF ;
margin - right : 8 px ;
//border: 1px solid #093866;
// X6 只能作为连线目标(入)
magnet : passive ;
box - shadow : none ;
width : 15 px ;
@@ -279,11 +292,9 @@ export default defineComponent({
top : 12 px ;
}
// 右侧出桩样式
. port - out {
margin - left : 8 px ; // 与文本的间距
margin - left : 8 px ;
margin - right : 5 px ;
// X6 只能作为连线源(出)
magnet : active ;
box - shadow : none ;
width : 15 px ;
@@ -298,7 +309,7 @@ export default defineComponent({
// 节点文本样式
. ks - designer - node - name {
flex : 1 ; // 占满中间空间
flex : 1 ;
line - height : 24 px ;
overflow : hidden ;
text - overflow : ellipsis ;