style: 整体UI样式优化

Author: DymoneLewis

examples/feature-examples/src/pages/graph/index.tsx

@@ -289,7 +289,19 @@ export default function BasicNode() {
       ;(window as any).lf = lf
     }
   }, [])
-
+  const handleRandomEdgeOffset = () => {
+    if (lfRef.current) {
+      const { edges } = lfRef.current.getGraphData() as GraphData
+      forEach(edges, (edge) => {
+        if (edge.type !== 'polyline') return
+        const offset = Math.random() * 100
+        console.log('handleRandomEdgeOffset offset', offset)
+        lfRef.current?.setProperties(edge.id, {
+          offset,
+        })
+      })
+    }
+  }
   const setArrow = (arrowName: string) => {
     const lf = lfRef.current
     if (lf) {
@@ -302,7 +314,19 @@ export default function BasicNode() {
       })
     }
   }
-
+  const handleRandomEdgeRadius = () => {
+    if (lfRef.current) {
+      const { edges } = lfRef.current.getGraphData() as GraphData
+      forEach(edges, (edge) => {
+        if (edge.type !== 'polyline') return
+        const radius = Math.random() * 100
+        console.log('handleRandomEdgeRadius radius', radius)
+        lfRef.current?.setProperties(edge.id, {
+          radius,
+        })
+      })
+    }
+  }
   const focusOn = () => {
     lfRef?.current?.focusOn({
       id: 'custom-node-1',
@@ -576,6 +600,20 @@ export default function BasicNode() {
         >
           开启边动画
         </Button>
+        <Button
+          key="randomEdgeOffset"
+          type="primary"
+          onClick={handleRandomEdgeOffset}
+        >
+          随机修改折线边offset
+        </Button>
+        <Button
+          key="randomEdgeRadius"
+          type="primary"
+          onClick={handleRandomEdgeRadius}
+        >
+          随机修改折线边radius
+        </Button>
         <Button
           key="closeEdgeAnimation"
           type="primary"

examples/feature-examples/src/pages/grid/index.tsx

@@ -202,7 +202,7 @@ export default function SelectionSelectExample() {
           </Form.Item>
           <Form.Item label="网格颜色">
             <ColorPicker
-              value={'#ababab'}
+              value={'#D7DEEB'}
               onChange={(color) => {
                 lfRef.current?.graphModel.updateGridOptions({
                   config: { color: color.toHexString() },