feat: change nodes to circular #918 (#1279)

### What problem does this PR solve?
feat: change nodes to circular #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/node/index.less

@@ -1,5 +1,4 @@
 .ragNode {
-  // height: 50px;
   position: relative;
   box-shadow:
     -6px 0 12px 0 rgba(179, 177, 177, 0.08),
@@ -9,6 +8,16 @@
   padding: 5px;
   border-radius: 5px;
   background: white;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  display: flex;
+  // align-items: center;
+  // justify-self: center;
+  justify-content: center;
+  .nodeName {
+    font-size: 8px;
+  }
   label {
     display: block;
     color: #777;
@@ -17,6 +26,17 @@
   .description {
     font-size: 10px;
   }
+  .bottomBox {
+    position: absolute;
+    bottom: -24px;
+    background: white;
+    padding: 2px 5px;
+    border-radius: 5px;
+    box-shadow:
+      -6px 0 12px 0 rgba(179, 177, 177, 0.08),
+      -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      -6px 0 16px 6px rgba(0, 0, 0, 0.05);
+  }
 }
 .selectedNode {
   border: 1px solid rgb(59, 118, 244);

web/src/pages/flow/canvas/node/index.tsx

@@ -3,7 +3,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 
 import OperateDropdown from '@/components/operate-dropdown';
 import { CopyOutlined } from '@ant-design/icons';
-import { Flex, MenuProps, Space, Typography } from 'antd';
+import { Flex, MenuProps, Space } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Operator, operatorMap } from '../../constant';
@@ -12,8 +12,6 @@ import OperatorIcon from '../../operator-icon';
 import useGraphStore from '../../store';
 import styles from './index.less';
 
-const { Text } = Typography;
-
 export function RagNode({
   id,
   data,
@@ -73,21 +71,22 @@ export function RagNode({
         {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
       </Handle>
       <Handle type="source" position={Position.Bottom} id="a" isConnectable />
-      <Flex gap={10} justify={'space-between'}>
+      <Flex vertical align="center" justify="center">
         <Space size={6}>
           <OperatorIcon
             name={data.label as Operator}
-            fontSize={12}
+            fontSize={16}
           ></OperatorIcon>
-          <span>{id}</span>
-        </Space>
+          {/* {data.label} */}
           <OperateDropdown
             iconFontSize={14}
             deleteItem={deleteNode}
             items={items}
           ></OperateDropdown>
+        </Space>
+        {/* <div className={styles.nodeName}>{id}</div> */}
       </Flex>
-      <div>
+      {/* <div>
         <Text
           ellipsis={{ tooltip: description }}
           style={{ width: 130 }}
@@ -95,7 +94,10 @@ export function RagNode({
         >
           {description}
         </Text>
-      </div>
+      </div> */}
+      <section className={styles.bottomBox}>
+        <div className={styles.nodeName}>{id}</div>
+      </section>
     </section>
   );
 }