From d9c57dfb611738e73304e978342957510ec7b898 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 26 May 2025 17:26:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E9=A2=84=E8=A7=88dot?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83+=E5=A4=9C=E9=97=B4=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/flow-preview/index.vue         | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/flow-preview/index.vue b/apps/web-antd/src/views/workflow/components/flow-preview/index.vue
index a69151a3..308f0d1c 100644
--- a/apps/web-antd/src/views/workflow/components/flow-preview/index.vue
+++ b/apps/web-antd/src/views/workflow/components/flow-preview/index.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { ZoomParamType } from '@logicflow/core';
 
-import { onMounted, shallowRef, useTemplateRef } from 'vue';
+import { onMounted, shallowRef, useTemplateRef, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
 
 import {
   MinusCircleOutlined,
@@ -41,9 +43,19 @@ onMounted(async () => {
     const data = json2LogicFlowJson(props.data);
     lf.value = new LogicFlow({
       container: container.value,
-      grid: false,
       isSilentMode: true,
       textEdit: false,
+      grid: {
+        size: 20,
+        type: 'dot',
+        config: {
+          color: '#ccc',
+          thickness: 1,
+        },
+      },
+      background: {
+        backgroundColor: '#fff',
+      },
     });
 
     lf.value.register(Start);
@@ -57,6 +69,16 @@ onMounted(async () => {
     lf.value.translateCenter();
   }
 });
+
+const { isDark } = usePreferences();
+watch(isDark, (v) => {
+  if (!lf.value) {
+    return;
+  }
+  lf.value.graphModel.background = {
+    background: v ? '#333' : '#fff',
+  };
+});
 </script>
 
 <template>