feat: 实现debug按钮功能

@@ -20,6 +20,8 @@ export function useSaveAndRedo() {
 
 
   const route = useRoute();
   const route = useRoute();
 
 
+  const debugMarker = ref(false);
+
   const getRuleChainId = computed(() => (route.params as Record<'id', string>).id);
   const getRuleChainId = computed(() => (route.params as Record<'id', string>).id);
 
 
   const { mergeData, deconstructionData } = useBasicDataTransform();
   const { mergeData, deconstructionData } = useBasicDataTransform();
@@ -175,12 +177,21 @@ export function useSaveAndRedo() {
     return elements;
     return elements;
   }
   }
 
 
+  const handleRemoveDebug = (flowActionType: VueFlowStore) => {
+    for (const item of unref(flowActionType.getNodes)) {
+      (item.data as NodeData)!.data!.debugMode = false;
+    }
+    triggerChange();
+  };
+
   return {
   return {
     loading,
     loading,
+    debugMarker,
     changeMarker,
     changeMarker,
     triggerChange,
     triggerChange,
     handleApplyChange,
     handleApplyChange,
     handleRedoChange,
     handleRedoChange,
+    handleRemoveDebug,
     getCurrentPageMetaData,
     getCurrentPageMetaData,
   };
   };
 }
 }

@@ -22,6 +22,7 @@
   import { Icon } from '/@/components/Icon';
   import { Icon } from '/@/components/Icon';
   import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer';
   import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer';
   import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer';
   import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer';
+  import { NodeData } from './types/node';
 
 
   const getId = Number(Math.random().toString().substring(2)).toString(16);
   const getId = Number(Math.random().toString().substring(2)).toString(16);
 
 
@@ -46,6 +47,7 @@
     triggerChange,
     triggerChange,
     handleApplyChange,
     handleApplyChange,
     handleRedoChange,
     handleRedoChange,
+    handleRemoveDebug,
   } = useSaveAndRedo();
   } = useSaveAndRedo();
 
 
   const { flowActionType } = useRuleFlow({
   const { flowActionType } = useRuleFlow({
@@ -72,6 +74,10 @@
 
 
   const getDeleteDisplayState = computed(() => unref(flowActionType.getSelectedElements).length);
   const getDeleteDisplayState = computed(() => unref(flowActionType.getSelectedElements).length);
 
 
+  const getDebugMarker = computed(() =>
+    flowActionType.getNodes.value.some((item) => (item.data as NodeData).data?.debugMode)
+  );
+
   const handleDeleteSelectionElements = () => {
   const handleDeleteSelectionElements = () => {
     flowActionType.removeEdges(unref(flowActionType.getSelectedEdges));
     flowActionType.removeEdges(unref(flowActionType.getSelectedEdges));
     flowActionType.removeNodes(unref(flowActionType.getSelectedNodes));
     flowActionType.removeNodes(unref(flowActionType.getSelectedNodes));
@@ -127,7 +133,9 @@
               <Icon class="!text-3xl !text-light-50" icon="mdi:delete" />
               <Icon class="!text-3xl !text-light-50" icon="mdi:delete" />
             </button>
             </button>
             <button
             <button
+              :class="getDebugMarker ? '!bg-orange-600 !opacity-100' : 'opacity-50'"
               class="button-box-shadow w-14 h-14 flex justify-center items-center bg-gray-400 rounded-full opacity-50"
               class="button-box-shadow w-14 h-14 flex justify-center items-center bg-gray-400 rounded-full opacity-50"
+              @click="handleRemoveDebug(flowActionType)"
             >
             >
               <Icon class="!text-3xl !text-light-50" icon="carbon:debug" />
               <Icon class="!text-3xl !text-light-50" icon="carbon:debug" />
             </button>
             </button>