feat(web): 完成循环节点的基本配置

service-web/client/src/components/flow/node/AmisNode.tsx

@@ -1,8 +1,8 @@
 import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons'
-import {type Edge, Handle, type Node, type NodeProps, NodeToolbar, Position} from '@xyflow/react'
-import type {Schema} from 'amis'
-import {Button, Card, Drawer, Space, Tooltip} from 'antd'
-import {type JSX, useCallback, useState} from 'react'
+import {type Edge, Handle, type Node, type NodeProps, NodeResizeControl, NodeToolbar, Position} from '@xyflow/react'
+import {type ClassName, classnames, type Schema} from 'amis'
+import {Button, Drawer, Space, Tooltip} from 'antd'
+import {type CSSProperties, type JSX, useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
 import {generateAllIncomerOutputVariablesFormOptions} from '../Helper.tsx'
@@ -95,20 +95,16 @@ export function outputsFormColumns(editable: boolean = false, required: boolean
 }
 
 type AmisNodeProps = {
+  className: ClassName,
+  style?: CSSProperties,
   nodeProps: NodeProps
   extraNodeDescription?: JSX.Element
   handler: JSX.Element
   columnSchema?: () => Schema[]
+  resize?: { minWidth: number, minHeight: number }
 }
 
 const AmisNodeContainerDiv = styled.div`
-    .ant-card {
-        .ant-card-actions {
-            & > li {
-                margin: 0;
-            }
-        }
-    }
 `
 
 export const StartNodeHandler = () => {
@@ -128,11 +124,18 @@ export const NormalNodeHandler = () => {
   )
 }
 
+export const nodeClassName = (name: string) => {
+  return `flow-node flow-node-${name}`
+}
+
 const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
+  className,
+  style,
   nodeProps,
   extraNodeDescription,
   handler,
   columnSchema,
+  resize,
 }) => {
   const {removeNode} = useFlowStore()
   const {getDataById, setDataById, removeDataById} = useDataStore()
@@ -236,7 +239,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
     removeDataById(id)
   }, [])
   return (
-    <AmisNodeContainerDiv className="w-64">
+    <AmisNodeContainerDiv className={classnames(className, 'w-64')} style={style}>
       <Drawer
         title="节点编辑"
         open={editDrawerOpen}
@@ -278,17 +281,27 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
           </Tooltip>
         </Space>
       </NodeToolbar>
-      <Card
-        className="node-card"
-        title={nodeName}
-        extra={<span className="text-gray-300 text-xs">{id}</span>}
-        size="small"
-      >
-        <div className="card-description p-2 text-secondary text-sm">
-          {nodeDescription}
-          {extraNodeDescription}
+      <div className="node-card h-full flex flex-col bg-white rounded-md border border-gray-100 border-solid">
+        <div
+          className="node-card-header items-center flex justify-between p-2 border-t-0 border-l-0 border-r-0 border-b border-gray-100 border-solid">
+          <span className="font-bold">{nodeName}</span>
+          <span className="text-gray-300 text-sm">{id}</span>
         </div>
-      </Card>
+        <div className="node-card-description flex flex-col flex-1 p-2 text-secondary text-sm">
+          <div className="node-card-description-node">
+            {nodeDescription}
+          </div>
+          <div className="node-card-description-extra flex-1 mt-1">
+            {extraNodeDescription}
+          </div>
+        </div>
+      </div>
+      {resize ? <>
+        <NodeResizeControl
+          minWidth={resize.minWidth}
+          minHeight={resize.minHeight}
+        />
+      </> : undefined}
       {handler}
     </AmisNodeContainerDiv>
   )