---初始化后台管理web页面项目

src/assets/style/bpmn-js/bpmn-font/css/bpmn-codes.css

@@ -0,0 +1,321 @@
+.bpmn-icon-screw-wrench:before {
+  content: '\e800';
+} /* '' */
+.bpmn-icon-trash:before {
+  content: '\e801';
+} /* '' */
+.bpmn-icon-conditional-flow:before {
+  content: '\e802';
+} /* '' */
+.bpmn-icon-default-flow:before {
+  content: '\e803';
+} /* '' */
+.bpmn-icon-gateway-parallel:before {
+  content: '\e804';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before {
+  content: '\e805';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before {
+  content: '\e806';
+} /* '' */
+.bpmn-icon-start-event-compensation:before {
+  content: '\e807';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before {
+  content: '\e808';
+} /* '' */
+.bpmn-icon-loop-marker:before {
+  content: '\e809';
+} /* '' */
+.bpmn-icon-parallel-mi-marker:before {
+  content: '\e80a';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before {
+  content: '\e80b';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before {
+  content: '\e80c';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before {
+  content: '\e80d';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before {
+  content: '\e80e';
+} /* '' */
+.bpmn-icon-gateway-xor:before {
+  content: '\e80f';
+} /* '' */
+.bpmn-icon-connection:before {
+  content: '\e810';
+} /* '' */
+.bpmn-icon-end-event-cancel:before {
+  content: '\e811';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before {
+  content: '\e812';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before {
+  content: '\e813';
+} /* '' */
+.bpmn-icon-start-event-condition:before {
+  content: '\e814';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before {
+  content: '\e815';
+} /* '' */
+.bpmn-icon-sequential-mi-marker:before {
+  content: '\e816';
+} /* '' */
+.bpmn-icon-user-task:before {
+  content: '\e817';
+} /* '' */
+.bpmn-icon-business-rule:before {
+  content: '\e818';
+} /* '' */
+.bpmn-icon-sub-process-marker:before {
+  content: '\e819';
+} /* '' */
+.bpmn-icon-start-event-parallel-multiple:before {
+  content: '\e81a';
+} /* '' */
+.bpmn-icon-start-event-error:before {
+  content: '\e81b';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before {
+  content: '\e81c';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-error:before {
+  content: '\e81d';
+} /* '' */
+.bpmn-icon-end-event-compensation:before {
+  content: '\e81e';
+} /* '' */
+.bpmn-icon-subprocess-collapsed:before {
+  content: '\e81f';
+} /* '' */
+.bpmn-icon-subprocess-expanded:before {
+  content: '\e820';
+} /* '' */
+.bpmn-icon-task:before {
+  content: '\e821';
+} /* '' */
+.bpmn-icon-end-event-error:before {
+  content: '\e822';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before {
+  content: '\e823';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before {
+  content: '\e824';
+} /* '' */
+.bpmn-icon-start-event-escalation:before {
+  content: '\e825';
+} /* '' */
+.bpmn-icon-start-event-signal:before {
+  content: '\e826';
+} /* '' */
+.bpmn-icon-business-rule-task:before {
+  content: '\e827';
+} /* '' */
+.bpmn-icon-manual:before {
+  content: '\e828';
+} /* '' */
+.bpmn-icon-receive:before {
+  content: '\e829';
+} /* '' */
+.bpmn-icon-call-activity:before {
+  content: '\e82a';
+} /* '' */
+.bpmn-icon-start-event-timer:before {
+  content: '\e82b';
+} /* '' */
+.bpmn-icon-start-event-message:before {
+  content: '\e82c';
+} /* '' */
+.bpmn-icon-intermediate-event-none:before {
+  content: '\e82d';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-link:before {
+  content: '\e82e';
+} /* '' */
+.bpmn-icon-end-event-escalation:before {
+  content: '\e82f';
+} /* '' */
+.bpmn-icon-text-annotation:before {
+  content: '\e830';
+} /* '' */
+.bpmn-icon-bpmn-io:before {
+  content: '\e831';
+} /* '' */
+.bpmn-icon-gateway-complex:before {
+  content: '\e832';
+} /* '' */
+.bpmn-icon-gateway-eventbased:before {
+  content: '\e833';
+} /* '' */
+.bpmn-icon-gateway-none:before {
+  content: '\e834';
+} /* '' */
+.bpmn-icon-gateway-or:before {
+  content: '\e835';
+} /* '' */
+.bpmn-icon-end-event-terminate:before {
+  content: '\e836';
+} /* '' */
+.bpmn-icon-end-event-signal:before {
+  content: '\e837';
+} /* '' */
+.bpmn-icon-end-event-none:before {
+  content: '\e838';
+} /* '' */
+.bpmn-icon-end-event-multiple:before {
+  content: '\e839';
+} /* '' */
+.bpmn-icon-end-event-message:before {
+  content: '\e83a';
+} /* '' */
+.bpmn-icon-end-event-link:before {
+  content: '\e83b';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-message:before {
+  content: '\e83c';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before {
+  content: '\e83d';
+} /* '' */
+.bpmn-icon-start-event-multiple:before {
+  content: '\e83e';
+} /* '' */
+.bpmn-icon-script:before {
+  content: '\e83f';
+} /* '' */
+.bpmn-icon-manual-task:before {
+  content: '\e840';
+} /* '' */
+.bpmn-icon-send:before {
+  content: '\e841';
+} /* '' */
+.bpmn-icon-service:before {
+  content: '\e842';
+} /* '' */
+.bpmn-icon-receive-task:before {
+  content: '\e843';
+} /* '' */
+.bpmn-icon-user:before {
+  content: '\e844';
+} /* '' */
+.bpmn-icon-start-event-none:before {
+  content: '\e845';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before {
+  content: '\e846';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before {
+  content: '\e847';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before {
+  content: '\e848';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-link:before {
+  content: '\e849';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before {
+  content: '\e84a';
+} /* '' */
+.bpmn-icon-data-object:before {
+  content: '\e84b';
+} /* '' */
+.bpmn-icon-script-task:before {
+  content: '\e84c';
+} /* '' */
+.bpmn-icon-send-task:before {
+  content: '\e84d';
+} /* '' */
+.bpmn-icon-data-store:before {
+  content: '\e84e';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before {
+  content: '\e84f';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-message:before {
+  content: '\e850';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before {
+  content: '\e851';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before {
+  content: '\e852';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before {
+  content: '\e853';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before {
+  content: '\e854';
+} /* '' */
+.bpmn-icon-ad-hoc-marker:before {
+  content: '\e855';
+} /* '' */
+.bpmn-icon-service-task:before {
+  content: '\e856';
+} /* '' */
+.bpmn-icon-task-none:before {
+  content: '\e857';
+} /* '' */
+.bpmn-icon-compensation-marker:before {
+  content: '\e858';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before {
+  content: '\e859';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before {
+  content: '\e85a';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before {
+  content: '\e85b';
+} /* '' */
+.bpmn-icon-participant:before {
+  content: '\e85c';
+} /* '' */
+.bpmn-icon-event-subprocess-expanded:before {
+  content: '\e85d';
+} /* '' */
+.bpmn-icon-lane-insert-below:before {
+  content: '\e85e';
+} /* '' */
+.bpmn-icon-space-tool:before {
+  content: '\e85f';
+} /* '' */
+.bpmn-icon-connection-multi:before {
+  content: '\e860';
+} /* '' */
+.bpmn-icon-lane:before {
+  content: '\e861';
+} /* '' */
+.bpmn-icon-lasso-tool:before {
+  content: '\e862';
+} /* '' */
+.bpmn-icon-lane-insert-above:before {
+  content: '\e863';
+} /* '' */
+.bpmn-icon-lane-divide-three:before {
+  content: '\e864';
+} /* '' */
+.bpmn-icon-lane-divide-two:before {
+  content: '\e865';
+} /* '' */
+.bpmn-icon-data-input:before {
+  content: '\e866';
+} /* '' */
+.bpmn-icon-data-output:before {
+  content: '\e867';
+} /* '' */
+.bpmn-icon-hand-tool:before {
+  content: '\e868';
+} /* '' */
+.bpmn-icon-group:before {
+  content: '\e869';
+} /* '' */
+.bpmn-icon-transaction:before {
+  content: '\e8c4';
+} /* '' */

src/assets/style/bpmn-js/bpmn-font/css/bpmn.css

@@ -0,0 +1,379 @@
+@font-face {
+  font-family: 'bpmn';
+  src: url('../font/bpmn.eot?26374340');
+  src: url('../font/bpmn.eot?26374340#iefix') format('embedded-opentype'),
+    url('../font/bpmn.woff2?26374340') format('woff2'),
+    url('../font/bpmn.woff?26374340') format('woff'),
+    url('../font/bpmn.ttf?26374340') format('truetype'),
+    url('../font/bpmn.svg?26374340#bpmn') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'bpmn';
+    src: url('../font/bpmn.svg?26374340#bpmn') format('svg');
+  }
+}
+*/
+
+[class^='bpmn-icon-']:before,
+[class*=' bpmn-icon-']:before {
+  font-family: 'bpmn';
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  /* margin-right: .2em; */
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  /* margin-left: .2em; */
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.bpmn-icon-screw-wrench:before {
+  content: '\e800';
+} /* '' */
+.bpmn-icon-trash:before {
+  content: '\e801';
+} /* '' */
+.bpmn-icon-conditional-flow:before {
+  content: '\e802';
+} /* '' */
+.bpmn-icon-default-flow:before {
+  content: '\e803';
+} /* '' */
+.bpmn-icon-gateway-parallel:before {
+  content: '\e804';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before {
+  content: '\e805';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before {
+  content: '\e806';
+} /* '' */
+.bpmn-icon-start-event-compensation:before {
+  content: '\e807';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before {
+  content: '\e808';
+} /* '' */
+.bpmn-icon-loop-marker:before {
+  content: '\e809';
+} /* '' */
+.bpmn-icon-parallel-mi-marker:before {
+  content: '\e80a';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before {
+  content: '\e80b';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before {
+  content: '\e80c';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before {
+  content: '\e80d';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before {
+  content: '\e80e';
+} /* '' */
+.bpmn-icon-gateway-xor:before {
+  content: '\e80f';
+} /* '' */
+.bpmn-icon-connection:before {
+  content: '\e810';
+} /* '' */
+.bpmn-icon-end-event-cancel:before {
+  content: '\e811';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before {
+  content: '\e812';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before {
+  content: '\e813';
+} /* '' */
+.bpmn-icon-start-event-condition:before {
+  content: '\e814';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before {
+  content: '\e815';
+} /* '' */
+.bpmn-icon-sequential-mi-marker:before {
+  content: '\e816';
+} /* '' */
+.bpmn-icon-user-task:before {
+  content: '\e817';
+} /* '' */
+.bpmn-icon-business-rule:before {
+  content: '\e818';
+} /* '' */
+.bpmn-icon-sub-process-marker:before {
+  content: '\e819';
+} /* '' */
+.bpmn-icon-start-event-parallel-multiple:before {
+  content: '\e81a';
+} /* '' */
+.bpmn-icon-start-event-error:before {
+  content: '\e81b';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before {
+  content: '\e81c';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-error:before {
+  content: '\e81d';
+} /* '' */
+.bpmn-icon-end-event-compensation:before {
+  content: '\e81e';
+} /* '' */
+.bpmn-icon-subprocess-collapsed:before {
+  content: '\e81f';
+} /* '' */
+.bpmn-icon-subprocess-expanded:before {
+  content: '\e820';
+} /* '' */
+.bpmn-icon-task:before {
+  content: '\e821';
+} /* '' */
+.bpmn-icon-end-event-error:before {
+  content: '\e822';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before {
+  content: '\e823';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before {
+  content: '\e824';
+} /* '' */
+.bpmn-icon-start-event-escalation:before {
+  content: '\e825';
+} /* '' */
+.bpmn-icon-start-event-signal:before {
+  content: '\e826';
+} /* '' */
+.bpmn-icon-business-rule-task:before {
+  content: '\e827';
+} /* '' */
+.bpmn-icon-manual:before {
+  content: '\e828';
+} /* '' */
+.bpmn-icon-receive:before {
+  content: '\e829';
+} /* '' */
+.bpmn-icon-call-activity:before {
+  content: '\e82a';
+} /* '' */
+.bpmn-icon-start-event-timer:before {
+  content: '\e82b';
+} /* '' */
+.bpmn-icon-start-event-message:before {
+  content: '\e82c';
+} /* '' */
+.bpmn-icon-intermediate-event-none:before {
+  content: '\e82d';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-link:before {
+  content: '\e82e';
+} /* '' */
+.bpmn-icon-end-event-escalation:before {
+  content: '\e82f';
+} /* '' */
+.bpmn-icon-text-annotation:before {
+  content: '\e830';
+} /* '' */
+.bpmn-icon-bpmn-io:before {
+  content: '\e831';
+} /* '' */
+.bpmn-icon-gateway-complex:before {
+  content: '\e832';
+} /* '' */
+.bpmn-icon-gateway-eventbased:before {
+  content: '\e833';
+} /* '' */
+.bpmn-icon-gateway-none:before {
+  content: '\e834';
+} /* '' */
+.bpmn-icon-gateway-or:before {
+  content: '\e835';
+} /* '' */
+.bpmn-icon-end-event-terminate:before {
+  content: '\e836';
+} /* '' */
+.bpmn-icon-end-event-signal:before {
+  content: '\e837';
+} /* '' */
+.bpmn-icon-end-event-none:before {
+  content: '\e838';
+} /* '' */
+.bpmn-icon-end-event-multiple:before {
+  content: '\e839';
+} /* '' */
+.bpmn-icon-end-event-message:before {
+  content: '\e83a';
+} /* '' */
+.bpmn-icon-end-event-link:before {
+  content: '\e83b';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-message:before {
+  content: '\e83c';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before {
+  content: '\e83d';
+} /* '' */
+.bpmn-icon-start-event-multiple:before {
+  content: '\e83e';
+} /* '' */
+.bpmn-icon-script:before {
+  content: '\e83f';
+} /* '' */
+.bpmn-icon-manual-task:before {
+  content: '\e840';
+} /* '' */
+.bpmn-icon-send:before {
+  content: '\e841';
+} /* '' */
+.bpmn-icon-service:before {
+  content: '\e842';
+} /* '' */
+.bpmn-icon-receive-task:before {
+  content: '\e843';
+} /* '' */
+.bpmn-icon-user:before {
+  content: '\e844';
+} /* '' */
+.bpmn-icon-start-event-none:before {
+  content: '\e845';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before {
+  content: '\e846';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before {
+  content: '\e847';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before {
+  content: '\e848';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-link:before {
+  content: '\e849';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before {
+  content: '\e84a';
+} /* '' */
+.bpmn-icon-data-object:before {
+  content: '\e84b';
+} /* '' */
+.bpmn-icon-script-task:before {
+  content: '\e84c';
+} /* '' */
+.bpmn-icon-send-task:before {
+  content: '\e84d';
+} /* '' */
+.bpmn-icon-data-store:before {
+  content: '\e84e';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before {
+  content: '\e84f';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-message:before {
+  content: '\e850';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before {
+  content: '\e851';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before {
+  content: '\e852';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before {
+  content: '\e853';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before {
+  content: '\e854';
+} /* '' */
+.bpmn-icon-ad-hoc-marker:before {
+  content: '\e855';
+} /* '' */
+.bpmn-icon-service-task:before {
+  content: '\e856';
+} /* '' */
+.bpmn-icon-task-none:before {
+  content: '\e857';
+} /* '' */
+.bpmn-icon-compensation-marker:before {
+  content: '\e858';
+} /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before {
+  content: '\e859';
+} /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before {
+  content: '\e85a';
+} /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before {
+  content: '\e85b';
+} /* '' */
+.bpmn-icon-participant:before {
+  content: '\e85c';
+} /* '' */
+.bpmn-icon-event-subprocess-expanded:before {
+  content: '\e85d';
+} /* '' */
+.bpmn-icon-lane-insert-below:before {
+  content: '\e85e';
+} /* '' */
+.bpmn-icon-space-tool:before {
+  content: '\e85f';
+} /* '' */
+.bpmn-icon-connection-multi:before {
+  content: '\e860';
+} /* '' */
+.bpmn-icon-lane:before {
+  content: '\e861';
+} /* '' */
+.bpmn-icon-lasso-tool:before {
+  content: '\e862';
+} /* '' */
+.bpmn-icon-lane-insert-above:before {
+  content: '\e863';
+} /* '' */
+.bpmn-icon-lane-divide-three:before {
+  content: '\e864';
+} /* '' */
+.bpmn-icon-lane-divide-two:before {
+  content: '\e865';
+} /* '' */
+.bpmn-icon-data-input:before {
+  content: '\e866';
+} /* '' */
+.bpmn-icon-data-output:before {
+  content: '\e867';
+} /* '' */
+.bpmn-icon-hand-tool:before {
+  content: '\e868';
+} /* '' */
+.bpmn-icon-group:before {
+  content: '\e869';
+} /* '' */
+.bpmn-icon-transaction:before {
+  content: '\e8c4';
+} /* '' */

src/assets/style/bpmn-js/diagram-js.css

@@ -0,0 +1,813 @@
+/**
+ * color definitions
+ */
+.djs-container {
+  --blue-base-65: #4d90ff;
+  --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3);
+  --blue-darken-48: #005df7;
+  --blue-darken-55: #1a70ff;
+  --blue-lighten-82: #a2c5ff;
+
+  --red-base-62: #ff3d3d;
+  --red-base-62-lighten-90: rgb(255, 235, 235);
+
+  --silver-darken-94: #efefef;
+
+  --color-000000: #000000;
+  --color-000000-opacity-05: rgba(0, 0, 0, 0.05);
+  --color-000000-opacity-10: rgba(0, 0, 0, 0.1);
+  --color-333333: #333333;
+  --color-666666: #666666;
+  --color-aaaaaa: #aaaaaa;
+  --color-cccccc: #cccccc;
+  --color-cdcdcd: #cdcdcd;
+  --color-dddddd: #dddddd;
+  --color-f6f6f6: #f6f6f6;
+  --color-fafafa: #fafafa;
+  --color-fefefe: #fefefe;
+  --color-ffffff: #ffffff;
+
+  --bendpoint-fill-color: var(--blue-base-65-opacity-30);
+  --bendpoint-stroke-color: var(--blue-base-65);
+
+  --context-pad-entry-background-color: var(--color-fefefe);
+  --context-pad-entry-hover-background-color: var(--silver-darken-94);
+
+  --element-dragger-color: var(--blue-base-65);
+  --element-hover-outline-fill-color: var(--blue-darken-48);
+  --element-selected-outline-stroke-color: var(--blue-base-65);
+
+  --lasso-fill-color: var(--color-000000-opacity-05);
+  --lasso-stroke-color: var(--color-000000);
+
+  --palette-entry-color: var(--color-333333);
+  --palette-entry-hover-color: var(--blue-darken-48);
+  --palette-entry-selected-color: var(--blue-base-65);
+  --palette-separator-color: var(--color-aaaaaa);
+  --palette-toggle-hover-background-color: var(--color-666666);
+  --palette-background-color: var(--color-fafafa);
+  --palette-border-color: var(--color-cccccc);
+
+  --popup-body-background-color: var(--color-fefefe);
+  --popup-header-entry-selected-color: var(--blue-base-65);
+  --popup-header-entry-selected-background-color: var(--color-000000-opacity-10);
+  --popup-header-separator-color: var(--color-dddddd);
+  --popup-background-color: var(--color-fafafa);
+  --popup-border-color: var(--color-cccccc);
+
+  --resizer-fill-color: var(--blue-base-65-opacity-30);
+  --resizer-stroke-color: var(--blue-base-65);
+
+  --search-container-background-color: var(--color-fafafa);
+  --search-container-border-color: var(--blue-darken-55);
+  --search-container-box-shadow-color: var(--blue-lighten-82);
+  --search-container-box-shadow-inset-color: var(--color-cdcdcd);
+  --search-input-border-color: var(--color-cccccc);
+  --search-result-border-color: var(--color-aaaaaa);
+  --search-result-highlight-color: var(--color-000000);
+  --search-result-selected-color: var(--blue-base-65-opacity-30);
+
+  --shape-attach-allowed-stroke-color: var(--blue-base-65);
+  --shape-connect-allowed-fill-color: var(--color-f6f6f6);
+  --shape-drop-allowed-fill-color: var(--color-f6f6f6);
+  --shape-drop-not-allowed-fill-color: var(--red-base-62-lighten-90);
+  --shape-resize-preview-stroke-color: var(--blue-base-65);
+
+  --snap-line-stroke-color: var(--blue-base-65-opacity-30);
+
+  --space-tool-crosshair-stroke-color: var(--color-000000);
+
+  --tooltip-error-background-color: var(--red-base-62-lighten-90);
+  --tooltip-error-border-color: var(--red-base-62);
+  --tooltip-error-color: var(--red-base-62);
+}
+
+/**
+ * outline styles
+ */
+
+.djs-outline {
+  fill: none;
+  visibility: hidden;
+}
+
+.djs-element.hover .djs-outline,
+.djs-element.selected .djs-outline {
+  visibility: visible;
+  shape-rendering: geometricPrecision;
+  stroke-dasharray: 3, 3;
+}
+
+.djs-element.selected .djs-outline {
+  stroke: var(--element-selected-outline-stroke-color);
+  stroke-width: 1px;
+}
+
+.djs-element.hover .djs-outline {
+  stroke: var(--element-hover-outline-fill-color);
+  stroke-width: 1px;
+}
+
+.djs-shape.connect-ok .djs-visual > :nth-child(1) {
+  fill: var(--shape-connect-allowed-fill-color) !important;
+}
+
+.djs-shape.connect-not-ok .djs-visual > :nth-child(1),
+.djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
+  fill: var(--shape-drop-not-allowed-fill-color) !important;
+}
+
+.djs-shape.new-parent .djs-visual > :nth-child(1) {
+  fill: var(--shape-drop-allowed-fill-color) !important;
+}
+
+svg.drop-not-ok {
+  background: var(--shape-drop-not-allowed-fill-color) !important;
+}
+
+svg.new-parent {
+  background: var(--shape-drop-allowed-fill-color) !important;
+}
+
+.djs-connection.connect-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-ok .djs-visual > :nth-child(1) {
+  stroke: var(--shape-drop-allowed-fill-color) !important;
+}
+
+.djs-connection.connect-not-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke: var(--shape-drop-not-allowed-fill-color) !important;
+}
+
+.drop-not-ok,
+.connect-not-ok {
+  cursor: not-allowed;
+}
+
+.djs-element.attach-ok .djs-visual > :nth-child(1) {
+  stroke-width: 5px !important;
+  stroke: var(--shape-attach-allowed-stroke-color) !important;
+}
+
+.djs-frame.connect-not-ok .djs-visual > :nth-child(1),
+.djs-frame.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke-width: 3px !important;
+  stroke: var(--shape-drop-not-allowed-fill-color) !important;
+  fill: none !important;
+}
+
+/**
+* Selection box style
+*
+*/
+.djs-lasso-overlay {
+  fill: var(--lasso-fill-color);
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: var(--lasso-stroke-color);
+
+  shape-rendering: geometricPrecision;
+  pointer-events: none;
+}
+
+/**
+ * Resize styles
+ */
+.djs-resize-overlay {
+  fill: none;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: var(--shape-resize-preview-stroke-color);
+
+  pointer-events: none;
+}
+
+.djs-resizer-hit {
+  fill: none;
+  pointer-events: all;
+}
+
+.djs-resizer-visual {
+  fill: var(--resizer-fill-color);
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+  stroke: var(--resizer-stroke-color);
+  shape-rendering: geometricprecision;
+}
+
+.djs-resizer:hover .djs-resizer-visual {
+  stroke: var(--resizer-stroke-color);
+  stroke-opacity: 1;
+}
+
+.djs-cursor-resize-ns,
+.djs-resizer-n,
+.djs-resizer-s {
+  cursor: ns-resize;
+}
+
+.djs-cursor-resize-ew,
+.djs-resizer-e,
+.djs-resizer-w {
+  cursor: ew-resize;
+}
+
+.djs-cursor-resize-nwse,
+.djs-resizer-nw,
+.djs-resizer-se {
+  cursor: nwse-resize;
+}
+
+.djs-cursor-resize-nesw,
+.djs-resizer-ne,
+.djs-resizer-sw {
+  cursor: nesw-resize;
+}
+
+.djs-shape.djs-resizing > .djs-outline {
+  visibility: hidden !important;
+}
+
+.djs-shape.djs-resizing > .djs-resizer {
+  visibility: hidden;
+}
+
+.djs-dragger > .djs-resizer {
+  visibility: hidden;
+}
+
+/**
+ * drag styles
+ */
+.djs-dragger * {
+  fill: none !important;
+  stroke: var(--element-dragger-color) !important;
+}
+
+.djs-dragger tspan,
+.djs-dragger text {
+  fill: var(--element-dragger-color) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger circle,
+marker.djs-dragger path,
+marker.djs-dragger polygon,
+marker.djs-dragger polyline,
+marker.djs-dragger rect {
+  fill: var(--element-dragger-color) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger text,
+marker.djs-dragger tspan {
+  fill: none !important;
+  stroke: var(--element-dragger-color) !important;
+}
+
+.djs-dragging {
+  opacity: 0.3;
+}
+
+.djs-dragging,
+.djs-dragging > * {
+  pointer-events: none !important;
+}
+
+.djs-dragging .djs-context-pad,
+.djs-dragging .djs-outline {
+  display: none !important;
+}
+
+/**
+ * no pointer events for visual
+ */
+.djs-visual,
+.djs-outline {
+  pointer-events: none;
+}
+
+.djs-element.attach-ok .djs-hit {
+  stroke-width: 60px !important;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-element > .djs-hit-all {
+  pointer-events: all;
+}
+
+.djs-element > .djs-hit-stroke,
+.djs-element > .djs-hit-click-stroke {
+  pointer-events: stroke;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-drag-active .djs-element > .djs-hit-click-stroke {
+  pointer-events: all;
+}
+
+/**
+ * shape / connection basic styles
+ */
+.djs-connection .djs-visual {
+  stroke-width: 2px;
+  fill: none;
+}
+
+.djs-cursor-grab {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+
+.djs-cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+.djs-cursor-crosshair {
+  cursor: crosshair;
+}
+
+.djs-cursor-move {
+  cursor: move;
+}
+
+.djs-cursor-resize-ns {
+  cursor: ns-resize;
+}
+
+.djs-cursor-resize-ew {
+  cursor: ew-resize;
+}
+
+/**
+ * snapping
+ */
+.djs-snap-line {
+  stroke: var(--snap-line-stroke-color);
+  stroke-linecap: round;
+  stroke-width: 2px;
+  pointer-events: none;
+}
+
+/**
+ * snapping
+ */
+.djs-crosshair {
+  stroke: var(--space-tool-crosshair-stroke-color);
+  stroke-linecap: round;
+  stroke-width: 1px;
+  pointer-events: none;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 5, 5;
+}
+
+/**
+ * palette
+ */
+
+.djs-palette {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+
+  box-sizing: border-box;
+  width: 48px;
+}
+
+.djs-palette .separator {
+  margin: 0 5px;
+  padding-top: 5px;
+
+  border: none;
+  border-bottom: solid 1px var(--palette-separator-color);
+
+  clear: both;
+}
+
+.djs-palette .entry:before {
+  vertical-align: text-bottom;
+}
+
+.djs-palette .djs-palette-toggle {
+  cursor: pointer;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  color: var(--palette-entry-color);
+  font-size: 30px;
+
+  text-align: center;
+}
+
+.djs-palette .entry {
+  float: left;
+}
+
+.djs-palette .entry img {
+  max-width: 100%;
+}
+
+.djs-palette .djs-palette-entries:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.djs-palette .djs-palette-toggle:hover {
+  background: var(--palette-toggle-hover-background-color);
+}
+
+.djs-palette .entry:hover {
+  color: var(--palette-entry-hover-color);
+}
+
+.djs-palette .highlighted-entry {
+  color: var(--palette-entry-selected-color) !important;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  width: 46px;
+  height: 46px;
+  line-height: 46px;
+  cursor: default;
+}
+
+/**
+ * Palette open / two-column layout is controlled via
+ * classes on the palette. Events to hook into palette
+ * changed life-cycle are available in addition.
+ */
+.djs-palette.two-column.open {
+  width: 94px;
+}
+
+.djs-palette:not(.open) .djs-palette-entries {
+  display: none;
+}
+
+.djs-palette:not(.open) {
+  overflow: hidden;
+}
+
+.djs-palette.open .djs-palette-toggle {
+  display: none;
+}
+
+/**
+ * context-pad
+ */
+.djs-overlay-context-pad {
+  width: 72px;
+}
+
+.djs-context-pad {
+  position: absolute;
+  display: none;
+  pointer-events: none;
+}
+
+.djs-context-pad .entry {
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  display: inline-block;
+  font-size: 22px;
+  margin: 0 2px 2px 0;
+
+  border-radius: 3px;
+
+  cursor: default;
+
+  background-color: var(--context-pad-entry-background-color);
+  box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color);
+  pointer-events: all;
+}
+
+.djs-context-pad .entry:before {
+  vertical-align: top;
+}
+
+.djs-context-pad .entry:hover {
+  background: var(--context-pad-entry-hover-background-color);
+}
+
+.djs-context-pad.open {
+  display: block;
+}
+
+/**
+ * popup styles
+ */
+.djs-popup .entry {
+  line-height: 20px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* larger font for prefixed icons */
+.djs-popup .entry:before {
+  vertical-align: middle;
+  font-size: 20px;
+}
+
+.djs-popup .entry > span {
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.djs-popup .entry:hover,
+.djs-popup .entry.active:hover {
+  background: var(--popup-header-entry-selected-background-color);
+}
+
+.djs-popup .entry.disabled {
+  background: inherit;
+}
+
+.djs-popup .djs-popup-header .entry {
+  display: inline-block;
+  padding: 2px 3px 2px 3px;
+
+  border: solid 1px transparent;
+  border-radius: 3px;
+}
+
+.djs-popup .djs-popup-header .entry.active {
+  color: var(--popup-header-entry-selected-color);
+  border: solid 1px var(--popup-header-entry-selected-color);
+  background-color: var(--popup-header-entry-selected-background-color);
+}
+
+.djs-popup-body .entry {
+  padding: 4px 10px 4px 5px;
+}
+
+.djs-popup-body .entry > span {
+  margin-left: 5px;
+}
+
+.djs-popup-body {
+  background-color: var(--popup-body-background-color);
+}
+
+.djs-popup-header {
+  border-bottom: 1px solid var(--popup-header-separator-color);
+}
+
+.djs-popup-header .entry {
+  margin: 1px;
+  margin-left: 3px;
+}
+
+.djs-popup-header .entry:last-child {
+  margin-right: 3px;
+}
+
+/**
+ * popup / palette styles
+ */
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color);
+  border-radius: 2px;
+}
+
+.djs-popup {
+  background: var(--popup-background-color);
+  border: solid 1px var(--popup-border-color);
+  border-radius: 2px;
+}
+
+/**
+ * touch
+ */
+
+.djs-shape,
+.djs-connection {
+  touch-action: none;
+}
+
+.djs-segment-dragger,
+.djs-bendpoint {
+  display: none;
+}
+
+/**
+ * bendpoints
+ */
+.djs-segment-dragger .djs-visual {
+  display: none;
+
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
+  stroke-width: 1px;
+  stroke-opacity: 1;
+}
+
+.djs-segment-dragger:hover .djs-visual {
+  display: block;
+}
+
+.djs-bendpoint .djs-visual {
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+}
+
+.djs-segment-dragger:hover,
+.djs-bendpoints.hover .djs-segment-dragger,
+.djs-bendpoints.selected .djs-segment-dragger,
+.djs-bendpoint:hover,
+.djs-bendpoints.hover .djs-bendpoint,
+.djs-bendpoints.selected .djs-bendpoint {
+  display: block;
+}
+
+.djs-drag-active .djs-bendpoints * {
+  display: none;
+}
+
+.djs-bendpoints:not(.hover) .floating {
+  display: none;
+}
+
+.djs-segment-dragger:hover .djs-visual,
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint:hover .djs-visual,
+.djs-bendpoint.floating .djs-visual {
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
+  stroke-opacity: 1;
+}
+
+.djs-bendpoint.floating .djs-hit {
+  pointer-events: none;
+}
+
+.djs-segment-dragger .djs-hit,
+.djs-bendpoint .djs-hit {
+  fill: none;
+  pointer-events: all;
+}
+
+.djs-segment-dragger.horizontal .djs-hit {
+  cursor: ns-resize;
+}
+
+.djs-segment-dragger.vertical .djs-hit {
+  cursor: ew-resize;
+}
+
+.djs-segment-dragger.djs-dragging .djs-hit {
+  pointer-events: none;
+}
+
+.djs-updating,
+.djs-updating > * {
+  pointer-events: none !important;
+}
+
+.djs-updating .djs-context-pad,
+.djs-updating .djs-outline,
+.djs-updating .djs-bendpoint,
+.connect-ok .djs-bendpoint,
+.connect-not-ok .djs-bendpoint,
+.drop-ok .djs-bendpoint,
+.drop-not-ok .djs-bendpoint {
+  display: none !important;
+}
+
+.djs-segment-dragger.djs-dragging,
+.djs-bendpoint.djs-dragging {
+  display: block;
+  opacity: 1;
+}
+
+/**
+ * tooltips
+ */
+.djs-tooltip-error {
+  width: 160px;
+  padding: 6px;
+
+  background: var(--tooltip-error-background-color);
+  border: solid 1px var(--tooltip-error-border-color);
+  border-radius: 2px;
+  color: var(--tooltip-error-color);
+  font-size: 12px;
+  line-height: 16px;
+
+  opacity: 0.75;
+}
+
+.djs-tooltip-error:hover {
+  opacity: 1;
+}
+
+/**
+ * search pad
+ */
+.djs-search-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  width: 25%;
+  min-width: 300px;
+  max-width: 400px;
+  z-index: 10;
+
+  font-size: 1.05em;
+  opacity: 0.9;
+  background: var(--search-container-background-color);
+  border: solid 1px var(--search-container-border-color);
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--search-container-box-shadow-color),
+    0 0 0 1px var(--search-container-box-shadow-inset-color) inset;
+}
+
+.djs-search-container:not(.open) {
+  display: none;
+}
+
+.djs-search-input input {
+  font-size: 1.05em;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--search-input-border-color);
+}
+
+.djs-search-input input:focus {
+  outline: none;
+  border-color: var(--search-input-border-color);
+}
+
+.djs-search-results {
+  position: relative;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.djs-search-results:hover {
+  cursor: pointer;
+}
+
+.djs-search-result {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border-bottom: solid 1px var(--search-result-border-color);
+  border-radius: 1px;
+}
+
+.djs-search-highlight {
+  color: var(--search-result-highlight-color);
+}
+
+.djs-search-result-primary {
+  margin: 0 0 10px;
+}
+
+.djs-search-result-secondary {
+  font-family: monospace;
+  margin: 0;
+}
+
+.djs-search-result:hover {
+  background: var(--search-result-selected-color);
+}
+
+.djs-search-result-selected {
+  background: var(--search-result-selected-color);
+}
+
+.djs-search-result-selected:hover {
+  background: var(--search-result-selected-color);
+}
+
+.djs-search-overlay {
+  background: var(--search-result-selected-color);
+}
+
+/**
+ * hidden styles
+ */
+.djs-element-hidden,
+.djs-element-hidden .djs-hit,
+.djs-element-hidden .djs-outline,
+.djs-label-hidden .djs-label {
+  display: none !important;
+}

src/assets/style/designer/index.css

@@ -0,0 +1,458 @@
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 1em;
+  background-color: rgba(50,50,50,0.3);
+}
+::-webkit-scrollbar-track {
+  border-radius: 1em;
+  background-color: rgba(50,50,50,0.1);
+}
+.fc-style .ant-radio-wrapper {
+  margin: 8px 8px 0 8px;
+}
+.fc-style .ant-checkbox-wrapper {
+  margin: 8px 8px 0 8px;
+}
+.fc-style .ant-time-picker {
+  min-width: 200px;
+}
+.fc-style .ant-form-item-control-wrapper {
+  flex: 1;
+}
+.fc-style .el-main {
+  padding: 0;
+}
+.fc-style .el-dialog__header {
+  border-bottom: 1px solid #f0f0f0;
+}
+.fc-style .el-dialog__body {
+  padding: 15px 20px;
+}
+.fc-style .el-dialog__footer {
+  border-top: 1px solid #f2f6fc;
+  padding: 10px 15px;
+}
+.fc-style .el-radio-group {
+  margin-top: 10px;
+  vertical-align: super;
+}
+.fc-style .el-radio {
+  margin-bottom: 10px;
+}
+.fc-style .el-rate {
+  margin-top: 6px;
+}
+
+.fc-style {
+  height: 100%;
+}
+.fc-style *,
+.fc-style :after,
+.fc-style :before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.fc-style .fc-container {
+  background: #fff;
+  height: 100%;
+}
+.fc-style .fc-container .ant-layout,
+.fc-style .fc-container .el-container {
+  height: 100% !important;
+}
+.fc-style .fc-container>.ant-layout,
+.fc-style .fc-container .el-container {
+  background: #fff;
+}
+.fc-style .fc-container .fc-main {
+  position: relative;
+}
+.fc-style .fc-container .fc-main>.ant-layout,
+.fc-style .fc-container .fc-main .el-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.fc-style .center-container {
+  border-left: 1px solid #e0e0e0;
+  border-right: 1px solid #e0e0e0;
+}
+.fc-style .center-container .btn-bar {
+  height: 45px !important;
+  line-height: 45px;
+  font-size: 18px;
+  border-bottom: 2px solid #e4e7ed;
+  text-align: right;
+  background-color: #fff;
+  padding: 0 10px;
+}
+.fc-style .center-container .btn-bar .svg-icon {
+  font-size: 16px;
+  margin-right: 5px;
+}
+.fc-style .center-container .ant-layout-content,
+.fc-style .center-container .el-main {
+  height: calc(100% - 45px);
+  padding: 0;
+  position: relative;
+  background: #fafafa;
+}
+.fc-style .components {
+  padding: 8px 0;
+  width: 100%;
+  height: 100%;
+}
+.fc-style .components .widget-cate {
+  padding: 8px 12px;
+  font-size: 13px;
+}
+.fc-style .components ul {
+  position: relative;
+  overflow: hidden;
+  padding: 0 10px 10px;
+  margin: 0;
+}
+.fc-style .components .form-edit-widget-label {
+  font-size: 12px;
+  display: block;
+  width: 48%;
+  /* line-height: 26px; */
+  line-height: 40px;
+  position: relative;
+  float: left;
+  left: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 1%;
+  border: 1px solid #f4f6fc;
+}
+.fc-style .components .form-edit-widget-label:hover {
+  border: 1px dashed #409eff;
+}
+.fc-style .components .form-edit-widget-label:hover>a {
+  color: #409eff;
+}
+.fc-style .components .form-edit-widget-label>a {
+  color: #333;
+  /* display: block; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: move;
+  background: #f4f6fc;
+  border: 1px solid #f3f9ff;
+}
+/* .fc-style .components .form-edit-widget-label>a .svg-icon {
+  margin-right: 6px;
+  margin-left: 8px;
+  font-size: 14px;
+  display: inline-block;
+  vertical-align: middle;
+} */
+.fc-style .components .form-edit-widget-label>a span {
+  /* display: inline-block;
+  vertical-align: middle; */
+  margin-left: 10px;
+}
+.fc-style .widget-form-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 300px;
+  bottom: 0;
+  width: 100%;
+}
+.fc-style .widget-form-container .widget-form-list {
+  background: #fff;
+  border: 1px dashed #999;
+  min-height: calc(100vh - 65px);
+  margin: 10px;
+}
+.fc-style .widget-form-container .widget-form-list .widget-item-container {
+  position: relative;
+}
+.fc-style .widget-form-container .widget-form-list .widget-item-container .widget-view-action {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  height: 28px;
+  line-height: 28px;
+  background: #409eff;
+  z-index: 10;
+}
+.fc-style .widget-form-container .widget-form-list .widget-item-container .widget-view-action .svg-icon {
+  font-size: 14px;
+  color: #fff;
+  margin: 0 5px;
+  cursor: pointer;
+}
+.fc-style .widget-form-container .widget-form-list .widget-item-container .widget-view-drag {
+  position: absolute;
+  height: 28px;
+  left: 0;
+  top: -2px;
+  line-height: 28px;
+  background: #409eff;
+  z-index: 10;
+}
+.fc-style .widget-form-container .widget-form-list .widget-item-container .widget-view-drag .svg-icon {
+  font-size: 14px;
+  color: #fff;
+  margin: 0 5px;
+  cursor: move;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col-list {
+  min-height: 100px;
+  border: 1px dashed #ccc;
+  background: #fff;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view {
+  padding-bottom: 18px;
+  position: relative;
+  border: 1px dashed rgba(170,170,170,0.7);
+  background-color: rgba(236,245,255,0.3);
+  margin: 2px;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view .widget-view-description {
+  height: 15px;
+  line-height: 15px;
+  font-size: 13px;
+  margin-top: 6px;
+  color: #909399;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view:after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: block;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view:hover {
+  background: #ecf5ff;
+  outline: 1px solid #409eff;
+  outline-offset: 0;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view:hover.active {
+  outline: 2px solid #409eff;
+  border: 1px solid #409eff;
+  outline-offset: 0;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view:hover .widget-view-drag {
+  display: block;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view.active {
+  outline: 2px solid #409eff;
+  border: 1px solid #409eff;
+}
+.fc-style .widget-form-container .widget-form-list .widget-view.ghost {
+  background: #f56c6c;
+  border: 2px solid #f56c6c;
+  outline-width: 0;
+  height: 3px;
+  box-sizing: border-box;
+  font-size: 0;
+  content: '';
+  overflow: hidden;
+  padding: 0;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col {
+  padding: 5px;
+  background-color: rgba(253,246,236,0.3);
+}
+.fc-style .widget-form-container .widget-form-list .widget-col.active {
+  outline: 2px solid #e6a23c;
+  border: 1px solid #e6a23c;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col:hover {
+  background: #fdf6ec;
+  outline: 1px solid #e6a23c;
+  outline-offset: 0px;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col:hover.active {
+  outline: 2px solid #e6a23c;
+  border: 1px solid #e6a23c;
+  outline-offset: 0;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col.ghost {
+  background: #f56c6c;
+  border: 2px solid #f56c6c;
+  outline-width: 0;
+  height: 3px;
+  box-sizing: border-box;
+  font-size: 0;
+  content: '';
+  overflow: hidden;
+  padding: 0;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col .widget-view-action.widget-col-action {
+  position: absolute;
+  height: 28px;
+  right: -2px;
+  bottom: -2px;
+  line-height: 28px;
+  background: #e6a23c;
+  z-index: 10;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col .widget-view-action.widget-col-action .svg-icon {
+  font-size: 14px;
+  color: #fff;
+  margin: 0 5px;
+  cursor: move;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col .widget-view-drag.widget-col-drag {
+  position: absolute;
+  height: 28px;
+  left: -2px;
+  top: -2px;
+  line-height: 28px;
+  background: #e6a23c;
+  z-index: 10;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col .widget-view-drag.widget-col-drag .svg-icon {
+  font-size: 14px;
+  color: #fff;
+  margin: 0 5px;
+  cursor: move;
+}
+.fc-style .widget-form-container .widget-form-list .widget-col::after {
+  display: none;
+}
+.fc-style .widget-form-container .widget-form-list .ghost {
+  background: #f56c6c;
+  border: 2px solid #f56c6c;
+  outline-width: 0;
+  height: 3px;
+  box-sizing: border-box;
+  font-size: 0;
+  content: '';
+  overflow: hidden;
+  padding: 0;
+}
+.fc-style .widget-form-container .ghost {
+  background: #f56c6c;
+  border: 2px solid #f56c6c;
+  position: relative;
+}
+.fc-style .widget-form-container .ghost::after {
+  background: #f56c6c;
+}
+.fc-style .widget-form-container li.ghost {
+  height: 5px;
+  list-style: none;
+  font-size: 0;
+  overflow: hidden;
+}
+.fc-style .widget-config-container {
+  position: relative;
+}
+.fc-style .widget-config-container .ant-layout-header,
+.fc-style .widget-config-container .el-header {
+  border-bottom: 2px solid #e4e7ed;
+  padding: 0 5px;
+  height: 45px !important;
+  line-height: 45px !important;
+  background-color: #fff;
+}
+.fc-style .widget-config-container .config-tab {
+  height: 41px;
+  line-height: 41px;
+  display: inline-block;
+  width: 145px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  position: relative;
+  cursor: pointer;
+}
+.fc-style .widget-config-container .config-tab.active {
+  border-bottom: 2px solid #409eff;
+}
+.fc-style .widget-config-container .config-content {
+  padding: 10px;
+  background: #fff;
+  overflow: auto;
+}
+.fc-style .widget-config-container .config-content .ant-form-item-label,
+.fc-style .widget-config-container .config-content .el-form-item__label {
+  font-weight: 500;
+}
+.fc-style .widget-config-container .config-content .el-form-item__label {
+  padding: 0;
+}
+.fc-style .widget-config-container .config-content .ant-form-item,
+.fc-style .widget-config-container .config-content .el-form-item,
+.fc-style .widget-config-container .config-content h4 {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e1e1e1;
+}
+.fc-style .widget-config-container .config-content .label {
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0 5px;
+}
+.fc-style .widget-config-container .config-content .label:first-child {
+  margin-left: 0;
+}
+.fc-style .widget-config-container .config-content .drag-item {
+  font-size: 16px;
+  margin: 0 5px;
+  cursor: move;
+}
+.fc-style .widget-config-container .ghost {
+  background: #fff;
+  border: 1px dashed #409eff;
+}
+.fc-style .widget-config-container .ghost::after {
+  background: #fff;
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.fc-style .widget-config-container ul {
+  margin: 0;
+  padding: 0;
+}
+.fc-style .widget-config-container li.ghost {
+  list-style: none;
+  font-size: 0;
+  display: block;
+  position: relative;
+}
+.fc-style .form-empty {
+  position: absolute;
+  text-align: center;
+  width: 300px;
+  font-size: 20px;
+  top: 200px;
+  left: 50%;
+  margin-left: -150px;
+  color: #ccc;
+}
+.fc-style .widget-empty {
+  background-position: 50%;
+}
+
+
+
+.ant-layout-sider{
+  z-index: 99;
+}
+.center-container
+{
+  height:calc(100% - 76px)!important;
+  overflow: hidden;
+}
+.fc-style{height:100%;}
+.ant-layout{height:100%!important;}