@arkxos/arkos-system 0.1.0

package/src/error/404.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <div class="big">
+      <div class="inner">
+        <p>找不到相关的页面！</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.big {
+  width: 100%;
+  min-height: 400px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.inner p {
+  font-size: 25px;
+}
+</style>

package/src/flow/chart.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="view-canvas" ref="container"></div>
+</template>
+
+<script setup>
+import { ref, onActivated, nextTick } from 'vue';
+import BpmnViewer from 'bpmn-js/lib/Viewer';
+import ModelingModule from 'bpmn-js/lib/features/modeling';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+
+/* 左边工具栏以及编辑节点的样式 */
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+const props = defineProps({
+  xml: String,
+  highlightList: {
+    type: Array,
+    default: () => []
+  },
+  handledList: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const viewer = ref(null);
+const container = ref();
+
+const init = async() => {
+  if (!viewer.value) {
+    viewer.value = new BpmnViewer({
+      container: container.value,
+      additionalModules: [
+        ModelingModule,
+        MoveCanvasModule
+      ]
+    });
+  }
+
+  viewer.value.clear();
+  await viewer.value.importXML(props.xml);
+  const canvas = viewer.value.get('canvas');
+
+  props.highlightList.forEach(item => {
+    canvas.addMarker(item, 'highlight');
+  });
+
+  props.handledList.forEach(item => {
+    try {
+      canvas.addMarker(item, 'handled');
+      canvas.addMarker(item + '_label', 'handled');
+    } catch (e) {
+      // do it
+    }
+  });
+
+  canvas.zoom('fit-viewport', 'auto');
+};
+
+onActivated(() => {
+  nextTick(() => {
+    init();
+  });
+});
+</script>
+
+<style scoped>
+.view-canvas {
+  height: 100%;
+}
+.view-canvas :deep(.bjs-powered-by) {
+  display: none;
+}
+.view-canvas :deep(.djs-element) .djs-visual :not(text) {
+  stroke-opacity: 0.3!important;
+}
+.view-canvas :deep(.djs-element).djs-connection .djs-visual defs marker path {
+  fill-opacity: 0.4!important;
+}
+.view-canvas :deep(.djs-element).djs-shape .djs-visual path {
+  fill-opacity: 0.4!important;
+}
+.view-canvas :deep(.djs-element) .djs-visual text tspan {
+  fill-opacity: 0.5!important;
+}
+.view-canvas :deep(.djs-element).djs-connection[class*=handled] .djs-visual defs marker path {
+  fill-opacity: 1!important;
+}
+.view-canvas :deep(.djs-element).djs-shape[class*=handled] .djs-visual path {
+  fill-opacity: 1!important;
+}
+.view-canvas :deep(.djs-group) g[class*=handled] .djs-visual :not(text) {
+  stroke-opacity: 1!important;
+}
+.view-canvas :deep(.djs-group) g[class*=handled] .djs-visual text tspan {
+  fill-opacity: 1!important;
+}
+@keyframes fade {
+  from {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+
+@-webkit-keyframes fade {
+  from {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+.view-canvas {
+  min-height: 100px;
+}
+.view-canvas :deep(.highlight) {
+  animation: fade 1000ms infinite;
+  -webkit-animation: fade 1000ms infinite;
+}
+</style>