fix：将用户自定义className放到节点最顶层

Author: 昔梦

docs/xflow/demo/nodeWidget/index.less

@@ -1,4 +1,5 @@
 .node-llm-style {
-  background-color:  rgba(97, 113, 243,0.3);
-  border:1px solid rgba(97, 113, 243, 0.5)
+  .custom-node-container{
+    background-color:  rgba(97, 113, 243,0.3);
+  }
 }

packages/x-flow/src/components/CustomNode/index.tsx

@@ -59,6 +59,8 @@ export default memo((props: any) => {
   const isEnd = type === 'End';
   const isSwitchNode = type === 'Switch' || type === 'Parallel' || isNote; // 判断是否为条件节点/并行节点/注释节点
   const connectable = readOnly ? false : isConnectable;
+  const nodeSetting = settingMap[type] || {};
+  const nodeClassName = nodeSetting?.className || '';
 
   // 增加节点并进行联系
   const handleAddNode = (data: any, sourceHandle?: string) => {
@@ -253,6 +255,7 @@ export default memo((props: any) => {
         ['xflow-node-container-tb']: layout === 'TB',
         ['xflow-node-container-note']: isNote,
         [`xflow-node-container-status-${status}`]: isTruthy(status),
+        [nodeClassName]: !!nodeClassName
       })}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

packages/x-flow/src/nodes/node-common/index.tsx

@@ -12,11 +12,10 @@ export default memo((props: any) => {
   const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
   const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
   const SVGWidget = widgets[nodeSetting?.iconSvg]; // 自定义面板配置组件
-  const nodeClassName = nodeSetting?.className || '';
 
   return (
     <NodeContainer
-      className={`custom-node-code ${nodeClassName}`}
+      className={`custom-node-code`}
       title={data?.title || nodeSetting.title}
       icon={{
         type: nodeSetting?.icon?.type,

packages/x-flow/src/nodes/node-end/index.tsx

@@ -11,11 +11,10 @@ export default memo((props: any) => {
   const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
   const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
   const SVGWidget = widgets[nodeSetting?.iconSvg]; // 自定义面板配置组件
-  const nodeClassName = nodeSetting?.className || '';
 
   return (
     <NodeContainer
-      className={`custom-node-code ${nodeClassName}`}
+      className={`custom-node-code`}
       title={data?.title || nodeSetting?.title || '结束'}
       icon={{
         type: nodeSetting?.icon?.type || 'icon-end',

packages/x-flow/src/nodes/node-parallel/index.tsx

@@ -28,13 +28,11 @@ export default memo((props: any) => {
   const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
   const isSwitchBottom = position === Position.Bottom;
   const SVGWidget = widgets[nodeSetting?.iconSvg]; // 自定义面板配置组件
-  const nodeClassName = nodeSetting?.className || '';
 
   return (
     <NodeContainer
       className={classNames('custom-node-code', {
-        'switch-node-code-bottom': isSwitchBottom,
-        [nodeClassName]: !!nodeClassName,
+        'switch-node-code-bottom': isSwitchBottom
       })}
       title={data?.title || nodeSetting?.title || 'parallel'}
       icon={{

packages/x-flow/src/nodes/node-start/index.tsx

@@ -15,11 +15,10 @@ export default memo((props: any) => {
     false;
   const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
   const SVGWidget = widgets[nodeSetting?.iconSvg]; // 自定义面板配置组件
-  const nodeClassName = nodeSetting?.className || '';
 
   return (
     <NodeContainer
-      className={`custom-node-code ${nodeClassName}`}
+      className={`custom-node-code`}
       title={data?.title || nodeSetting?.title || '开始'}
       icon={{
         type: nodeSetting?.icon?.type || 'icon-start',

packages/x-flow/src/nodes/node-switch/index.tsx

@@ -29,14 +29,11 @@ export default memo((props: any) => {
   const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
   const isSwitchBottom = position === Position.Bottom;
   const SVGWidget = widgets[nodeSetting?.iconSvg]; // 自定义面板配置组件
-  const nodeClassName = nodeSetting?.className || '';
-
 
   return (
     <NodeContainer
       className={classNames('custom-node-code', {
-        'switch-node-code-bottom': isSwitchBottom,
-        [nodeClassName]: !!nodeClassName,
+        'switch-node-code-bottom': isSwitchBottom
       })}
       title={data?.title || nodeSetting?.title || 'Switch'}
       icon={{