From 04f1347ddd0c2f88f6e888efb03370ec5951af1d Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: 星期五, 05 四月 2024 14:09:50 +0800
Subject: [PATCH] update: bpmn设计器夜间模式适配

---
 src/components/BpmnDesign/index.vue |  106 ++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 366f642..cd8f70c 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -1,6 +1,14 @@
 <template>
-  <div class="containers">
-    <div v-loading="loading" class="app-containers">
+  <div class="containers-bpmn">
+    <!-- dark妯″紡涓� 杩炴帴绾跨殑绠ご鏍峰紡 -->
+    <svg width="0" height="0" style="position: absolute">
+      <defs>
+        <marker id="markerArrow-dark-mode" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
+          <path d="M 1 5 L 11 10 L 1 15 Z" class="arrow-dark" />
+        </marker>
+      </defs>
+    </svg>
+    <div v-loading="loading" class="app-containers-bpmn">
       <el-container class="h-full">
         <el-container style="align-items: stretch">
           <el-header>
@@ -174,7 +182,7 @@
  */
 const fitViewport = () => {
   zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom('fit-viewport');
-  const bbox = document.querySelector<SVGGElement>('.app-containers .viewport').getBBox();
+  const bbox = document.querySelector<SVGGElement>('.app-containers-bpmn .viewport').getBBox();
   const currentViewBox = bpmnModeler.value.get<Canvas>('canvas').viewbox();
   const elementMid = {
     x: bbox.x + bbox.width / 2 - 65,
@@ -320,23 +328,95 @@
 });
 </script>
 
-<style lang="scss" scoped>
-$bg-image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+';
+<style lang="scss">
+/** 澶滈棿妯″紡 绾挎潯鐨勯鑹� */
+$stroke-color-dark: white;
+$bpmn-font-size: 12px;
+/** 鏃ラ棿妯″紡 瀛椾綋棰滆壊 */
+$bpmn-font-color-dark: white;
+/** 澶滈棿妯″紡 瀛椾綋棰滆壊 */
+$bpmn-font-color-light: #222;
 
-/** 浠庡乏渚ф嫋鍔ㄦ椂鐨勮儗鏅浘 */
-:deep(svg.new-parent) {
-  background: url($bg-image) !important;
+/* 鑳屾櫙缃戞牸 */
+@mixin djs-container {
+  background-image: linear-gradient(90deg, hsl(0deg 0% 78.4% / 15%) 10%, transparent 0), linear-gradient(hsl(0deg 0% 78.4% / 15%) 10%, transparent 0) !important;
+  background-size: 10px 10px !important;
 }
 
-.containers {
+html[class='light'] {
+  /** 浠庡乏渚ф嫋鍔ㄦ椂鐨勮儗鏅浘 */
+  svg.new-parent {
+    @include djs-container;
+  }
+
+  /** 鍙屽嚮缂栬緫鍏冪礌鏃舵牱寮忎繚鎸佷竴鑷� */
+  div.djs-direct-editing-parent {
+    border-radius: 10px;
+    background-color: transparent !important;
+    color: $bpmn-font-color-light;
+  }
+
+  g.djs-visual {
+    .djs-label {
+      fill: $bpmn-font-color-light !important;
+      font-size: $bpmn-font-size !important;
+    }
+  }
+}
+
+html[class='dark'] {
+  /** dark妯″紡涓� 杩炴帴绾跨殑绠ご鏍峰紡 */
+  .arrow-dark {
+    stroke-width: 1px;
+    stroke-linecap: round;
+    stroke: $stroke-color-dark;
+    fill: $stroke-color-dark;
+    stroke-linejoin: round;
+  }
+
+  /** 浠庡乏渚ф嫋鍔ㄦ椂鐨勮儗鏅浘 */
+  svg.new-parent {
+    background-color: black !important;
+    @include djs-container;
+  }
+
+  /** 鍙屽嚮缂栬緫鍏冪礌鏃舵牱寮忎繚鎸佷竴鑷� */
+  div.djs-direct-editing-parent {
+    border-radius: 10px;
+    background-color: transparent !important;
+    color: $bpmn-font-color-dark;
+  }
+
+  /** 鍏冪礌鐩稿叧璁剧疆 */
+  g.djs-visual {
+    /** 鍏冪礌杈规 闇�瑕佸幓闄ゆ枃瀛�(.djs-label) */
+    & > *:first-child:not(.djs-label) {
+      stroke: $stroke-color-dark !important;
+    }
+
+    /** 瀛椾綋棰滆壊 */
+    .djs-label {
+      fill: $bpmn-font-color-dark !important;
+      font-size: $bpmn-font-size !important;
+    }
+
+    /* 杩炴帴绾挎牱寮� */
+    path[data-corner-radius] {
+      stroke: $stroke-color-dark !important;
+      marker-end: url('#markerArrow-dark-mode') !important;
+    }
+  }
+}
+
+.containers-bpmn {
   height: 100%;
-  .app-containers {
+  .app-containers-bpmn {
     width: 100%;
     height: 100%;
     .canvas {
       width: 100%;
       height: 100%;
-      background: url($bg-image);
+      @include djs-container;
     }
     .el-header {
       height: 35px;
@@ -379,7 +459,7 @@
   max-height: calc(80vh - 32px);
   overflow-x: hidden;
   overflow-y: auto;
-  :deep(.hljs) {
+  .hljs {
     word-break: break-word;
     white-space: pre-wrap;
     padding: 0.5em;
@@ -399,7 +479,7 @@
   max-height: 100%;
   width: 25%;
   height: calc(100vh - 80px);
-  :deep(.el-collapse) {
+  .el-collapse {
     height: calc(100vh - 162px);
     overflow: auto;
   }

--
Gitblit v1.9.3