perf: 完善黑夜模式的表现效果，工作流编排幕布和节点在黑夜模式正常表现

easyflow-ui-admin/packages/tinyflow-ui/src/Tinyflow.ts

@@ -1,6 +1,6 @@
-import {type useSvelteFlow} from '@xyflow/svelte';
+import type {useSvelteFlow} from '@xyflow/svelte';
 import {componentName} from './consts';
-import type {TinyflowData, TinyflowOptions} from './types';
+import type {TinyflowData, TinyflowOptions, TinyflowTheme} from './types';
 
 type FlowInstance = ReturnType<typeof useSvelteFlow>;
 
@@ -8,6 +8,10 @@ export class Tinyflow {
     private options!: TinyflowOptions;
     private rootEl!: Element;
     private svelteFlowInstance!: FlowInstance;
+    private tinyflowEl!: HTMLElement & {
+        options: TinyflowOptions;
+        onInit: (svelteFlowInstance: FlowInstance) => void;
+    };
 
     constructor(options: TinyflowOptions) {
         if (typeof options.element !== 'string' && !(options.element instanceof Element)) {
@@ -38,20 +42,13 @@ export class Tinyflow {
         tinyflowEl.style.display = 'block';
         tinyflowEl.style.width = '100%';
         tinyflowEl.style.height = '100%';
-        tinyflowEl.classList.add('tf-theme-light');
+        this._applyThemeClass(tinyflowEl, this.options.theme);
 
         tinyflowEl.options = this.options;
         tinyflowEl.onInit = (svelteFlowInstance: FlowInstance) => {
             this.svelteFlowInstance = svelteFlowInstance;
         };
-
-        this.rootEl.appendChild(tinyflowEl);
-    }
-
-    private _setOptions(options: TinyflowOptions) {
-        this.options = {
-            ...options
-        };
+        return tinyflowEl;
     }
 
     getOptions() {
@@ -62,25 +59,20 @@ export class Tinyflow {
         return this.svelteFlowInstance.toObject();
     }
 
+    setTheme(theme: TinyflowTheme) {
+        this.options.theme = theme;
+        if (this.tinyflowEl) {
+            this._applyThemeClass(this.tinyflowEl, theme);
+        }
+    }
+
     setData(data: TinyflowData) {
         this.options.data = data;
 
-        const tinyflowEl = document.createElement(componentName) as HTMLElement & {
-            options: TinyflowOptions;
-            onInit: (svelteFlowInstance: FlowInstance) => void;
-        };
-        tinyflowEl.style.display = 'block';
-        tinyflowEl.style.width = '100%';
-        tinyflowEl.style.height = '100%';
-        tinyflowEl.classList.add('tf-theme-light');
-
-        tinyflowEl.options = this.options;
-        tinyflowEl.onInit = (svelteFlowInstance: FlowInstance) => {
-            this.svelteFlowInstance = svelteFlowInstance;
-        };
+        this.tinyflowEl = this._createTinyflowElement();
 
         this.destroy();
-        this.rootEl.appendChild(tinyflowEl);
+        this.rootEl.appendChild(this.tinyflowEl);
     }
 
     destroy() {