XW-AIOT/aiot-platform-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: bpmnProcessDesigner 迁移（纯复制）

Browse Source
This commit is contained in:
puhui999
2025-09-05 15:38:09 +08:00
parent 0bf1635090
commit 82fdcb5da5
68 changed files with 14547 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
apps/web-antd/src/components/bpmnProcessDesigner/package/theme/element-variables.scss Normal file
View File

@@ -0,0 +1,81 @@
/* 改变主题色变量 */
$--color-primary: #1890ff;
$--color-danger: #ff4d4f;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@use '~element-ui/packages/theme-chalk/src/index';
.el-table td,
.el-table th {
color: #333;
}
.el-drawer__header {
box-sizing: border-box;
padding: 16px 16px 8px;
margin: 0;
font-size: 18px;
line-height: 24px;
color: #303133;
border-bottom: 1px solid #e8e8e8;
}
div[class^='el-drawer']:focus,
span:focus {
outline: none;
}
.el-drawer__body {
box-sizing: border-box;
width: 100%;
padding: 16px;
overflow-y: auto;
}
.el-dialog {
margin-top: 50vh !important;
overflow: hidden;
transform: translateY(-50%);
}
.el-dialog__wrapper {
max-height: 100vh;
overflow: hidden;
}
.el-dialog__header {
box-sizing: border-box;
padding: 16px 16px 8px;
border-bottom: 1px solid #e8e8e8;
}
.el-dialog__body {
box-sizing: border-box;
max-height: 80vh;
padding: 16px;
overflow-y: auto;
}
.el-dialog__footer {
box-sizing: border-box;
padding: 16px;
border-top: 1px solid #e8e8e8;
}
.el-dialog__close {
font-weight: 600;
}
.el-select {
width: 100%;
}
.el-divider:not(.el-divider--horizontal) {
margin: 0 8px;
}
.el-divider.el-divider--horizontal {
margin: 16px 0;
}

120
apps/web-antd/src/components/bpmnProcessDesigner/package/theme/index.scss Normal file
View File

@@ -0,0 +1,120 @@
@use './process-designer';
@use './process-panel';
$success-color: #4eb819;
$primary-color: #409eff;
$danger-color: #f56c6c;
$cancel-color: #909399;
.process-viewer {
position: relative;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
repeat !important;
border: 1px solid #efefef;
.success-arrow {
fill: $success-color;
stroke: $success-color;
}
.success-conditional {
fill: white;
stroke: $success-color;
}
.success.djs-connection {
.djs-visual path {
stroke: $success-color !important;
//marker-end: url(#sequenceflow-end-white-success)!important;
}
}
.success.djs-connection.condition-expression {
.djs-visual path {
//marker-start: url(#conditional-flow-marker-white-success)!important;
}
}
.success.djs-shape {
.djs-visual rect {
fill: $success-color !important;
fill-opacity: 0.15 !important;
stroke: $success-color !important;
}
.djs-visual polygon {
stroke: $success-color !important;
}
.djs-visual path:nth-child(2) {
fill: $success-color !important;
stroke: $success-color !important;
}
.djs-visual circle {
fill: $success-color !important;
fill-opacity: 0.15 !important;
stroke: $success-color !important;
}
}
.primary.djs-shape {
.djs-visual rect {
fill: $primary-color !important;
fill-opacity: 0.15 !important;
stroke: $primary-color !important;
}
.djs-visual polygon {
stroke: $primary-color !important;
}
.djs-visual circle {
fill: $primary-color !important;
fill-opacity: 0.15 !important;
stroke: $primary-color !important;
}
}
.danger.djs-shape {
.djs-visual rect {
fill: $danger-color !important;
fill-opacity: 0.15 !important;
stroke: $danger-color !important;
}
.djs-visual polygon {
stroke: $danger-color !important;
}
.djs-visual circle {
fill: $danger-color !important;
fill-opacity: 0.15 !important;
stroke: $danger-color !important;
}
}
.cancel.djs-shape {
.djs-visual rect {
fill: $cancel-color !important;
fill-opacity: 0.15 !important;
stroke: $cancel-color !important;
}
.djs-visual polygon {
stroke: $cancel-color !important;
}
.djs-visual circle {
fill: $cancel-color !important;
fill-opacity: 0.15 !important;
stroke: $cancel-color !important;
}
}
}
.process-viewer .djs-tooltip-container,
.process-viewer .djs-overlay-container,
.process-viewer .djs-palette {
display: none;
}

184
apps/web-antd/src/components/bpmnProcessDesigner/package/theme/process-designer.scss Normal file
View File

@@ -0,0 +1,184 @@
@use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
// 边框被 token-simulation 样式覆盖了
.djs-palette {
background: var(--palette-background-color);
border: solid 1px var(--palette-border-color) !important;
border-radius: 2px;
}
.my-process-designer {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.my-process-designer__header {
width: 100%;
min-height: 36px;
.el-button {
text-align: center;
}
.el-button-group {
margin: 4px;
}
.el-tooltip__popper {
.el-button {
width: 100%;
padding-right: 8px;
padding-left: 8px;
text-align: left;
}
.el-button:hover {
color: #fff;
background: rgb(64 158 255 / 80%);
}
}
.align {
position: relative;
i {
&::after {
position: absolute;
content: '|';
// transform: rotate(90deg) translate(200%, 60%);
transform: rotate(180deg) translate(271%, -10%);
}
}
}
.align.align-left i {
transform: rotate(90deg);
}
.align.align-right i {
transform: rotate(-90deg);
}
.align.align-top i {
transform: rotate(180deg);
}
.align.align-bottom i {
transform: rotate(0deg);
}
.align.align-center i {
transform: rotate(0deg);
&::after {
// transform: rotate(90deg) translate(0, 60%);
transform: rotate(0deg) translate(-0%, -5%);
}
}
.align.align-middle i {
transform: rotate(-90deg);
&::after {
// transform: rotate(90deg) translate(0, 60%);
transform: rotate(0deg) translate(0, -10%);
}
}
}
.my-process-designer__container {
display: inline-flex;
flex: 1;
width: 100%;
.my-process-designer__canvas {
position: relative;
flex: 1;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
repeat !important;
div.toggle-mode {
display: none;
}
}
.my-process-designer__property-panel {
z-index: 10;
height: 100%;
overflow: scroll;
overflow-y: auto;
* {
box-sizing: border-box;
}
}
// svg {
// width: 100%;
// height: 100%;
// min-height: 100%;
// overflow: hidden;
// }
}
}
//侧边栏配置
// .djs-palette .two-column .open {
.open {
// .djs-palette.open {
.djs-palette-entries {
div[class^='bpmn-icon-']::before,
div[class*='bpmn-icon-']::before {
line-height: unset;
}
div.entry {
position: relative;
}
div.entry:hover {
&::after {
position: absolute;
top: 0;
right: -10px;
bottom: 0;
z-index: 100;
box-sizing: border-box;
display: inline-block;
width: max-content;
padding: 0 16px;
overflow: hidden;
font-size: 0.5em;
font-variant: normal;
vertical-align: text-bottom;
text-transform: none;
text-decoration: inherit;
content: attr(title);
background: #fafafa;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 0 6px #eee;
transform: translateX(100%);
}
}
}
}
pre {
height: 100%;
max-height: calc(80vh - 32px);
margin: 0;
overflow: hidden;
overflow-y: auto;
}
.hljs {
word-break: break-word;
white-space: pre-wrap;
}
.hljs * {
font-family: Consolas, Monaco, monospace;
}

127
apps/web-antd/src/components/bpmnProcessDesigner/package/theme/process-panel.scss Normal file
View File

@@ -0,0 +1,127 @@
.process-panel__container {
box-sizing: border-box;
max-height: 100%;
padding: 0 8px;
overflow-y: scroll;
border-left: 1px solid #eee;
box-shadow: 0 0 8px #ccc;
}
.panel-tab__title {
padding: 0 8px;
font-size: 1.1em;
font-weight: 600;
line-height: 1.2em;
i {
margin-right: 8px;
font-size: 1.2em;
}
}
.panel-tab__content {
box-sizing: border-box;
width: 100%;
padding: 8px 16px;
border-top: 1px solid #eee;
.panel-tab__content--title {
display: flex;
justify-content: space-between;
padding-bottom: 8px;
span {
flex: 1;
text-align: left;
}
}
}
.element-property {
display: flex;
align-items: flex-start;
width: 100%;
margin: 8px 0;
.element-property__label {
box-sizing: border-box;
display: block;
width: 90px;
padding-right: 12px;
overflow: hidden;
font-size: 14px;
line-height: 32px;
text-align: right;
}
.element-property__value {
flex: 1;
line-height: 32px;
}
.el-form-item {
width: 100%;
padding-bottom: 18px;
margin-bottom: 0;
}
}
.list-property {
flex-direction: column;
.element-listener-item {
display: inline-grid;
grid-template-columns: 16px auto 32px 32px;
grid-column-gap: 8px;
width: 100%;
}
.element-listener-item + .element-listener-item {
margin-top: 8px;
}
}
.listener-filed__title {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 0;
span {
width: 200px;
font-size: 14px;
text-align: left;
}
i {
margin-right: 8px;
}
}
.element-drawer__button {
display: inline-flex;
justify-content: space-around;
width: 100%;
margin-top: 8px;
}
.element-drawer__button > .el-button {
width: 100%;
}
.el-collapse-item__content {
padding-bottom: 0;
}
.el-input.is-disabled .el-input__inner {
color: #999;
}
.el-form-item.el-form-item--mini {
margin-bottom: 0;
& + .el-form-item {
margin-top: 16px;
}
}