zouju/auto-solution
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
libertyspy
2026-03-13 10:15:14 +08:00
parent f2f8892276
commit 3a086e9405
16 changed files with 156 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
modeler/src/views/decision/builder/graph.ts
View File

@@ -52,7 +52,15 @@ export const createGraphConnectingAttributes = (): Partial<Connecting> => {
const edge: Edge = this.createEdge({
shape: 'edge',
...lineOptions, // 应用动画配置
attrs: lineOptions.attrs,
attrs: {
...lineOptions.attrs,
// 在创建边时覆盖箭头配置，确保移除箭头
line: {
...lineOptions.attrs?.line,
targetMarker: null,
sourceMarker: null,
}
},
animation: lineOptions.animation,
markup: lineOptions.markup,
});

212
modeler/src/views/decision/builder/node.vue
View File

@@ -9,25 +9,30 @@
>
<template #title>
<a-space>
<span class="ks-designer-node-icon"></span>
<span class="ks-designer-node-title">{{ element?.name ?? '-' }}</span>
</a-space>
</template>
<div class="port port-in" data-port="in-0" magnet="passive"></div>
<div class="w-full">
<div class="port port-in" data-port="in-0" magnet="passive">
<div class="triangle-left"></div>
</div>
<div class="w-full ks-designer-node-text">
<a-tooltip v-if="(element?.description ?? (element?.name ?? '-')).length >= 38">
<template #title>
{{ element?.description ?? element?.name }}
</template>
<p>
<p class="ks-designer-node-label">
{{ substring(element?.description ?? (element?.name ?? '-'), 40) }}
</p>
</a-tooltip>
<p v-else>
<p v-else class="ks-designer-node-label">
{{ substring(element?.description ?? (element?.name ?? '-'), 40) }}
</p>
</div>
<div class="port port-out" data-port="out-0" magnet="active"></div>
<div class="port port-out" data-port="out-0" magnet="active">
<div class="triangle-right"></div>
</div>
</a-card>
<template #overlay>
@@ -147,18 +152,18 @@ export default defineComponent({
.ant-card-head {
border: 0;
height: 25px;
height: 28px;
min-height: 25px;
border-radius: 0;
color: #fff;
font-size: 12px;
font-weight: normal;
padding: 0 20px;
background: linear-gradient(to bottom, #3a4c70, #2d3a56);
//background: linear-gradient(to bottom, #3a4c70, #2d3a56);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: linear-gradient(to bottom, rgba(108, 99, 255, 0.15), rgba(108, 99, 255, 0.05));
background: url('@/assets/icons/bg-node-head.png') center / 100% 100%;
//background: url('@/assets/icons/bg-node-head.png') center / 100% 100%;
//background: linear-gradient(to bottom, rgb(234 234 234 / 20%), rgb(191 191 191 / 58%));
}
@@ -168,14 +173,15 @@ export default defineComponent({
display: block;
position: absolute;
left: 8px;
top: 13px;
background: url('@/assets/icons/model-4.svg') center / 100% 100%;
top: 6px;
background: url('@/assets/icons/icon-node.svg') center / 100% 100%;
}
.ks-designer-node-title {
font-size: 13px;
font-size: 12px;
color: #fff;
color: #312e2e;
margin-top: -7px;
display: block;
}
.ant-card-body {
@@ -197,69 +203,6 @@ export default defineComponent({
box-shadow: 0 0 10px rgba(74, 122, 255, 0.3);
}
// 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 {
@@ -286,6 +229,31 @@ export default defineComponent({
box-shadow: 0 0 0 2px rgb(108, 99, 255, 0.8);
z-index: 10;
magnet: true;
position: relative;
.triangle-left {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid #3c82f6;
border-bottom: 6px solid transparent;
position: absolute;
left: -8px;
top: 2px;
}
/* 右三角形 */
.triangle-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid #3c82f6;
border-bottom: 6px solid transparent;
position: absolute;
right: -8px;
top: 2px;
}
}
// 左侧入桩样式
@@ -302,7 +270,7 @@ export default defineComponent({
position: absolute;
//top: 7px;
left: -8px;
left: 10px;
top: 50%;
}
@@ -320,7 +288,7 @@ export default defineComponent({
//right: 8px;
//top: 7px;
top: 50%;
right: -12px;
right: 6px;
}
@@ -332,5 +300,95 @@ export default defineComponent({
text-overflow: ellipsis;
//white-space: nowrap;
}
&.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%;
}
}
&.ks-designer-action-node{
.ant-card-head {
background: url('@/assets/icons/card-head-red.png') center / 100% 100%;
}
.ks-designer-node-icon {
background: url('@/assets/icons/icon-action.svg') center / 100% 100%;
}
}
&.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-precondition-node{
// border:0;
// box-shadown:none;
// &:hover{
// border:0;
// box-shadown:none;
// }
// background: url('@/assets/icons/lx.svg') center / 100% 100%;
// //transform: rotate(45deg);
// .ant-card-body {
// border: 0;
// box-shadow: none;
// height: 95px;
// line-height: 80px;
// font-size: 10px;
// padding: 0 !important;
// }
// .ant-card-head {
// display: none;
// }
//
// .ks-designer-node-label {
// width: 40px; /* 保留原有宽度 */
// text-align: center; /* 保留文字居中 */
// /* 核心修改：取消固定行高，重置换行相关属性 */
// word-wrap: break-word;/* 强制换行（兼容老旧浏览器） */
// word-break: break-all;/* 截断长单词/字符，确保在40px内换行 */
// white-space: normal; /* 恢复默认换行规则（避免文字不换行） */
// /* 可选：添加行间距，提升多行可读性 */
// line-height: 1.4; /* 多行时的行间距，可根据需求调整 */
// padding: 10px 0; /* 上下内边距，替代原有line-height:98px的垂直居中效果 */
// margin: 31% auto;
// }
//
// .port-in {
// left: 12px;
// top: 42px;
// }
//
// .port-out {
// right: 6px;
// top: 42px;
// }
//}
}
</style>

4
modeler/src/views/decision/builder/utils.ts
View File

@@ -18,6 +18,10 @@ export const createGraphTaskElement = (element: GraphTaskElement, width: number
if (!realHeight) {
realHeight = 120;
}
// if(element.category === 'precondition') {
// width = 100;
// realHeight = 100;
// }
return {
shape: 'task',
id: element.key,