flowcloudai-ui 0.1.3 → 0.1.4

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ComponentType, MouseEvent, CSSProperties } from 'react';
+import React__default, { ReactNode, ComponentType, FC, MouseEvent, CSSProperties } from 'react';
 
 type Theme = 'light' | 'dark' | 'system';
 interface ThemeContextType {
@@ -676,7 +676,17 @@ interface RelationProps {
     enableNodeDrag?: boolean;
     onNodeContextMenu?: (nodeId: string, nodeData: RelationNodeData) => void;
     theme?: 'dark' | 'light';
+    edgeStyles?: {
+        defaultColor?: string;
+        hoverColor?: string;
+        selectedColor?: string;
+    };
+    nodeStyles?: {
+        borderRadius?: string;
+        minWidth?: string;
+    };
+    showHandles?: boolean;
 }
-declare const Relation: React.FC<RelationProps>;
+declare const Relation: FC<RelationProps>;
 
 export { type AlertMode, type AlertProps, AlertProvider, type AlertProviderProps, type AlertType, Avatar, type AvatarProps, type AvatarShape, Button, ButtonGroup, ButtonToolbar, Card, type CardProps, type CategoryTreeNode, Chat, type ChatProps, CheckButton, type ContextMenuAction, type ContextMenuDivider, type ContextMenuItem, ContextMenuProvider, type ContextMenuProviderProps, type Conversation, DeleteDialog, type DeleteMode, type DropPosition, type FlatCategory, type FlatToTreeResult, Input, ListGroup, ListGroupItem, type ListGroupItemProps, type ListGroupProps, MarkdownEditor, type MarkdownEditorProps, type Message, type MessageRole, OrphanDialog, type OrphanResolution, type OrphanResolutionMap, Relation, type RelationEdgeData, type RelationNodeData, type RelationProps, RollingBox, Select, SideBar, type SideBarItem, type SideBarProps, Slider, SmartMessage, type SmartMessageProps, TabBar, type TabBarProps, type TabItem, TagItem, type TagItemProps, type TagSchema, type TagValue, type Theme, ThemeProvider, Tree, type TreeProps, VirtualList, findNodeInfo, flatToTree, isDescendantOf, lazyLoad, useAlert, useContextMenu, useTheme };

package/dist/index.js

@@ -2040,7 +2040,7 @@ function useAdaptiveTabLayout(navRef, options) {
   const maxTabWidthRatioRef = useRef7(maxTabWidthRatio);
   maxTabWidthRatioRef.current = maxTabWidthRatio;
   const [layout, setLayout] = useState13({ scrollMode: false, tabWidth: void 0 });
-  const calculateTimeoutRef = useRef7(null);
+  const rafRef = useRef7(null);
   const lastLayoutRef = useRef7({ scrollMode: false, tabWidth: void 0 });
   const addBtnWidthRef = useRef7(0);
   const lastAddableRef = useRef7(void 0);
@@ -2073,8 +2073,8 @@ function useAdaptiveTabLayout(navRef, options) {
     const tabGap = navWrap ? parseFloat(getComputedStyle(navWrap).gap) : 0;
     const totalGapWidth = (currentItemsLength - 1) * tabGap;
     const idealW = (navW - totalGapWidth) / currentItemsLength;
-    const threshold = window.innerWidth * currentMinWidthRatio;
-    const maxAllowedWidth = window.innerWidth * currentMaxTabWidthRatio;
+    const threshold = screen.width * currentMinWidthRatio;
+    const maxAllowedWidth = screen.width * currentMaxTabWidthRatio;
     const minAllowedWidth = 42;
     const prev = lastLayoutRef.current;
     const hysteresisFactor = 1.1;
@@ -2096,20 +2096,26 @@ function useAdaptiveTabLayout(navRef, options) {
       setLayout(newLayout);
     }
   }, [navRef]);
-  const calculateDebounced = useCallback8(() => {
-    if (calculateTimeoutRef.current) clearTimeout(calculateTimeoutRef.current);
-    calculateTimeoutRef.current = setTimeout(calculate, 50);
-  }, [calculate]);
-  const calculateDebouncedRef = useRef7(calculateDebounced);
-  calculateDebouncedRef.current = calculateDebounced;
+  const calculateRef = useRef7(calculate);
+  calculateRef.current = calculate;
   useEffect8(() => {
-    const rafId = requestAnimationFrame(calculate);
-    const handleResize = () => calculateDebouncedRef.current();
-    window.addEventListener("resize", handleResize);
+    const navOuter = navRef.current?.parentElement;
+    if (!navOuter) return;
+    const ro = new ResizeObserver(() => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        calculateRef.current();
+      });
+    });
+    ro.observe(navOuter);
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      calculateRef.current();
+    });
     return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", handleResize);
-      if (calculateTimeoutRef.current) clearTimeout(calculateTimeoutRef.current);
+      ro.disconnect();
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
     };
   }, []);
   useEffect8(() => {
@@ -2956,7 +2962,7 @@ var Chat = ({
 };
 
 // src/components/Relation/Relation.tsx
-import { useCallback as useCallback12, useEffect as useEffect13 } from "react";
+import React13, { useCallback as useCallback12, useEffect as useEffect13, memo as memo5 } from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -2970,7 +2976,7 @@ import {
   ReactFlowProvider
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var getIconEmoji = (iconType) => {
   const map = {
     war: "\u2694\uFE0F",
@@ -2992,16 +2998,77 @@ var getStatusColor = (status) => {
   };
   return map[status || "active"];
 };
-var CustomNode = ({ data, theme = "light" }) => {
-  const isDark = theme === "dark";
+var ConnectionHandles = ({ isDark, showHandles }) => {
+  const handleStyle = {
+    background: isDark ? "#ff8e8e" : "#ff6b6b",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    border: `1px solid ${isDark ? "#1e293b" : "#ffffff"}`,
+    transition: "all 0.2s ease"
+  };
+  const hiddenHandleStyle = {
+    opacity: 0,
+    width: "0px",
+    height: "0px",
+    pointerEvents: "none"
+  };
+  const actualStyle = showHandles ? handleStyle : hiddenHandleStyle;
+  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "top-left", style: { ...actualStyle, left: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "top-left-source", style: { ...actualStyle, left: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "top-center", style: { ...actualStyle, left: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "top-center-source", style: { ...actualStyle, left: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "top-right", style: { ...actualStyle, left: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "top-right-source", style: { ...actualStyle, left: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "right-top", style: { ...actualStyle, top: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "right-top-source", style: { ...actualStyle, top: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "right-center", style: { ...actualStyle, top: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "right-center-source", style: { ...actualStyle, top: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "right-bottom", style: { ...actualStyle, top: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "right-bottom-source", style: { ...actualStyle, top: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "bottom-left", style: { ...actualStyle, left: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "bottom-left-source", style: { ...actualStyle, left: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "bottom-center", style: { ...actualStyle, left: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "bottom-center-source", style: { ...actualStyle, left: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "bottom-right", style: { ...actualStyle, left: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "bottom-right-source", style: { ...actualStyle, left: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "left-top", style: { ...actualStyle, top: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "left-top-source", style: { ...actualStyle, top: "25%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "left-center", style: { ...actualStyle, top: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "left-center-source", style: { ...actualStyle, top: "50%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "left-bottom", style: { ...actualStyle, top: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "left-bottom-source", style: { ...actualStyle, top: "75%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "corner-top-left", style: { ...actualStyle, left: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "corner-top-left-source", style: { ...actualStyle, left: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "corner-top-right", style: { ...actualStyle, left: "90%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "corner-top-right-source", style: { ...actualStyle, left: "90%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "corner-bottom-left", style: { ...actualStyle, left: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "corner-bottom-left-source", style: { ...actualStyle, left: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "corner-bottom-right", style: { ...actualStyle, left: "90%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "corner-bottom-right-source", style: { ...actualStyle, left: "90%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "corner-left-top", style: { ...actualStyle, top: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "corner-left-top-source", style: { ...actualStyle, top: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "corner-left-bottom", style: { ...actualStyle, top: "90%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "corner-left-bottom-source", style: { ...actualStyle, top: "90%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "corner-right-top", style: { ...actualStyle, top: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "corner-right-top-source", style: { ...actualStyle, top: "10%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "corner-right-bottom", style: { ...actualStyle, top: "90%" } }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "corner-right-bottom-source", style: { ...actualStyle, top: "90%" } })
+  ] });
+};
+var CustomNode = memo5(({ data, theme: propTheme }) => {
+  const isDark = (data.theme || propTheme) === "dark";
+  const showHandles = data.showHandles !== void 0 ? data.showHandles : false;
   const nodeStyle = {
     background: isDark ? "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)" : "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)",
-    border: `2px solid ${isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)"}`,
+    border: `2px solid ${isDark ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.08)"}`,
     borderRadius: "14px",
-    boxShadow: isDark ? "0 8px 20px rgba(0, 0, 0, 0.25)" : "0 4px 12px rgba(0, 0, 0, 0.08)",
+    boxShadow: isDark ? "0 8px 20px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)" : "0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05)",
     minWidth: "240px",
     cursor: "pointer",
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative"
   };
   const iconStyle = {
     width: "52px",
@@ -3010,8 +3077,9 @@ var CustomNode = ({ data, theme = "light" }) => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    background: isDark ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)",
-    transition: "all 0.3s ease"
+    background: isDark ? "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)" : "linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%)",
+    transition: "all 0.3s ease",
+    boxShadow: isDark ? "inset 0 1px 1px rgba(255, 255, 255, 0.1)" : "inset 0 1px 1px rgba(0, 0, 0, 0.02)"
   };
   const titleStyle = {
     fontWeight: 700,
@@ -3020,7 +3088,8 @@ var CustomNode = ({ data, theme = "light" }) => {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: isDark ? "#ffffff" : "#1e293b"
+    color: isDark ? "#ffffff" : "#1e293b",
+    letterSpacing: isDark ? "0.3px" : "normal"
   };
   const subtitleStyle = {
     fontSize: "11px",
@@ -3036,11 +3105,18 @@ var CustomNode = ({ data, theme = "light" }) => {
     textOverflow: "ellipsis",
     color: isDark ? "rgba(255, 255, 255, 0.45)" : "#94a3b8"
   };
-  return /* @__PURE__ */ jsxs18("div", { style: nodeStyle, children: [
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, isConnectable: true }),
+  return /* @__PURE__ */ jsxs18("div", { style: nodeStyle, className: "relation-node", children: [
+    /* @__PURE__ */ jsx24(ConnectionHandles, { isDark, showHandles }),
     /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "14px", padding: "14px 18px" }, children: [
       /* @__PURE__ */ jsxs18("div", { style: { position: "relative", flexShrink: 0 }, children: [
-        /* @__PURE__ */ jsx24("div", { style: iconStyle, children: data.imageUrl ? /* @__PURE__ */ jsx24("img", { src: data.imageUrl, alt: data.title, style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "12px" } }) : /* @__PURE__ */ jsx24("span", { style: { fontSize: "28px" }, children: getIconEmoji(data.iconType) }) }),
+        /* @__PURE__ */ jsx24("div", { style: iconStyle, children: data.imageUrl ? /* @__PURE__ */ jsx24(
+          "img",
+          {
+            src: data.imageUrl,
+            alt: data.title,
+            style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "12px" }
+          }
+        ) : /* @__PURE__ */ jsx24("span", { style: { fontSize: "28px", filter: isDark ? "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" : "none" }, children: getIconEmoji(data.iconType) }) }),
         data.status && /* @__PURE__ */ jsx24("div", { style: {
           position: "absolute",
           bottom: "-2px",
@@ -3049,7 +3125,9 @@ var CustomNode = ({ data, theme = "light" }) => {
           height: "12px",
           borderRadius: "50%",
           border: `2px solid ${isDark ? "#1e293b" : "#ffffff"}`,
-          backgroundColor: getStatusColor(data.status)
+          backgroundColor: getStatusColor(data.status),
+          animation: data.status === "warning" ? "pulse 2s infinite" : "none",
+          boxShadow: isDark ? "0 0 0 1px rgba(0,0,0,0.2)" : "none"
         } })
       ] }),
       /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -3057,13 +3135,21 @@ var CustomNode = ({ data, theme = "light" }) => {
         /* @__PURE__ */ jsx24("div", { style: subtitleStyle, children: data.subtitle }),
         data.description && /* @__PURE__ */ jsx24("div", { style: descriptionStyle, children: data.description })
       ] })
-    ] }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, isConnectable: true })
+    ] })
   ] });
-};
+});
+CustomNode.displayName = "CustomNode";
 var nodeTypes = {
   custom: CustomNode
 };
+var getEdgeStyle = (theme, isHovered, isSelected) => {
+  const baseColor = theme === "dark" ? "#7c8ba0" : "#a0aec0";
+  const hoverColor = "#ff8e8e";
+  const selectedColor = "#ff6b6b";
+  if (isSelected) return { stroke: selectedColor, strokeWidth: 2.5 };
+  if (isHovered) return { stroke: hoverColor, strokeWidth: 2.5 };
+  return { stroke: baseColor, strokeWidth: 1.8 };
+};
 var RelationContent = ({
   nodes: propNodes,
   edges: propEdges,
@@ -3087,9 +3173,12 @@ var RelationContent = ({
   enableEdgeCreation = true,
   enableNodeDrag = true,
   onNodeContextMenu,
-  theme: propTheme = "light"
+  theme: propTheme = "light",
+  edgeStyles = {},
+  nodeStyles = {},
+  showHandles = false
 }) => {
-  const [nodes, , onNodesChange] = useNodesState(propNodes || []);
+  const [nodes, setNodes, onNodesChange] = useNodesState(propNodes || []);
   const [edges, setEdges, onEdgesChange] = useEdgesState(propEdges || []);
   const { fitView: fitViewFn } = useReactFlow();
   const theme = propTheme;
@@ -3097,18 +3186,31 @@ var RelationContent = ({
   const bgColor = isDark ? "#0f172a" : "#f5f7fa";
   useEffect13(() => {
     if (fitView && fitViewFn && (propNodes?.length || 0) > 0) {
-      setTimeout(() => {
-        fitViewFn({ duration: 300, ...fitViewOptions }).catch((error) => {
+      const timer = setTimeout(() => {
+        fitViewFn({ duration: 300, padding: 0.2, ...fitViewOptions }).catch((error) => {
           console.warn("Fit view failed:", error);
         });
       }, 100);
+      return () => clearTimeout(timer);
     }
   }, [fitView, fitViewFn, fitViewOptions, propNodes]);
+  useEffect13(() => {
+    if (propNodes) {
+      setNodes(propNodes);
+    }
+  }, [propNodes, setNodes]);
+  useEffect13(() => {
+    if (propEdges) {
+      setEdges(propEdges);
+    }
+  }, [propEdges, setEdges]);
   const handleNodesChange = useCallback12(
     (changes) => {
       onNodesChange(changes);
       if (onNodesChangeProp) {
-        onNodesChangeProp(nodes);
+        setTimeout(() => {
+          onNodesChangeProp(nodes);
+        }, 0);
       }
     },
     [onNodesChange, onNodesChangeProp, nodes]
@@ -3117,7 +3219,9 @@ var RelationContent = ({
     (changes) => {
       onEdgesChange(changes);
       if (onEdgesChangeProp) {
-        onEdgesChangeProp(edges);
+        setTimeout(() => {
+          onEdgesChangeProp(edges);
+        }, 0);
       }
     },
     [onEdgesChange, onEdgesChangeProp, edges]
@@ -3126,18 +3230,25 @@ var RelationContent = ({
     (params) => {
       const newEdge = {
         ...params,
-        id: `edge-${Date.now()}-${Math.random()}`,
-        type: "smoothstep",
-        style: { stroke: "#ff6b6b", strokeWidth: 2 },
-        markerEnd: { type: MarkerType.ArrowClosed, color: "#ff6b6b" },
-        label: "\u65B0\u8FDE\u63A5"
+        id: `edge-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
+        type: "straight",
+        style: { stroke: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"), strokeWidth: 1.8 },
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          color: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"),
+          width: 12,
+          height: 12
+        },
+        label: "",
+        labelStyle: { fill: isDark ? "#fff" : "#333", fontSize: 11, fontWeight: 400 },
+        labelBgStyle: { fill: "transparent", fillOpacity: 0 }
       };
       setEdges((eds) => addEdge(newEdge, eds));
       if (onConnectProp) {
         onConnectProp(params);
       }
     },
-    [setEdges, onConnectProp]
+    [setEdges, onConnectProp, edgeStyles.defaultColor, isDark]
   );
   const handleNodeClick = useCallback12(
     (_event, node) => {
@@ -3172,18 +3283,107 @@ var RelationContent = ({
     },
     [onEdgeClick]
   );
-  const nodesWithTheme = nodes.map((node) => ({
-    ...node,
-    data: { ...node.data, theme }
-  }));
+  const nodesWithTheme = React13.useMemo(() => {
+    return nodes.map((node) => ({
+      ...node,
+      data: {
+        ...node.data,
+        theme,
+        showHandles
+      },
+      className: `relation-node ${node.className || ""}`
+    }));
+  }, [nodes, theme, showHandles]);
+  const edgesWithStyle = React13.useMemo(() => {
+    return edges.map((edge) => ({
+      ...edge,
+      type: edge.type || "straight",
+      style: {
+        ...edge.style,
+        ...getEdgeStyle(theme)
+      },
+      labelStyle: {
+        fill: isDark ? "#fff" : "#333",
+        fontSize: 11,
+        fontWeight: 400,
+        ...edge.labelStyle
+      },
+      labelBgStyle: {
+        fill: "transparent",
+        fillOpacity: 0,
+        ...edge.labelBgStyle
+      },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"),
+        width: 12,
+        height: 12,
+        ...edge.markerEnd
+      }
+    }));
+  }, [edges, theme, isDark, edgeStyles.defaultColor]);
   const globalStyle = `
-    .react-flow__background,
-    .react-flow__pane,
-    .react-flow__renderer,
-    .react-flow__viewport {
-      background-color: ${bgColor} !important;
-    }
-  `;
+        .relation-container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        .react-flow__background,
+        .react-flow__pane,
+        .react-flow__renderer,
+        .react-flow__viewport {
+            background-color: ${bgColor} !important;
+        }
+        .relation-node {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+        }
+        .relation-node:hover {
+            transform: translateY(-4px) scale(1.02);
+            box-shadow: ${isDark ? "0 12px 28px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2)" : "0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.05)"};
+        }
+        .react-flow__edge-path {
+            transition: stroke-width 0.2s ease, stroke 0.2s ease;
+        }
+        .react-flow__edge:hover .react-flow__edge-path {
+            stroke-width: 2.5px;
+            stroke: ${edgeStyles.hoverColor || (isDark ? "#ffa5a5" : "#ff8e8e")};
+        }
+        /* \u8FDE\u63A5\u70B9\u60AC\u505C\u6548\u679C */
+        .react-flow__handle {
+            transition: all 0.2s ease;
+        }
+        .react-flow__handle:hover {
+            transform: scale(1.3);
+            background-color: ${isDark ? "#ffa5a5" : "#ff8e8e"} !important;
+        }
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            50% {
+                opacity: 0.7;
+                transform: scale(1.2);
+            }
+        }
+        /* \u7B80\u7EA6\u6EDA\u52A8\u6761 */
+        .relation-container ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        .relation-container ::-webkit-scrollbar-track {
+            background: ${isDark ? "#1e293b" : "#e2e8f0"};
+            border-radius: 3px;
+        }
+        .relation-container ::-webkit-scrollbar-thumb {
+            background: ${isDark ? "#475569" : "#cbd5e1"};
+            border-radius: 3px;
+        }
+        .relation-container ::-webkit-scrollbar-thumb:hover {
+            background: ${isDark ? "#ff8e8e" : "#ff6b6b"};
+        }
+    `;
   return /* @__PURE__ */ jsxs18(
     "div",
     {
@@ -3192,9 +3392,8 @@ var RelationContent = ({
         width,
         height,
         ...style,
-        position: "relative",
-        overflow: "hidden",
-        backgroundColor: bgColor
+        backgroundColor: bgColor,
+        borderRadius: nodeStyles.borderRadius || "12px"
       },
       children: [
         /* @__PURE__ */ jsx24("style", { children: globalStyle }),
@@ -3202,7 +3401,7 @@ var RelationContent = ({
           ReactFlow,
           {
             nodes: nodesWithTheme,
-            edges,
+            edges: edgesWithStyle,
             onNodesChange: handleNodesChange,
             onEdgesChange: handleEdgesChange,
             onConnect: enableEdgeCreation ? onConnect : void 0,
@@ -3220,15 +3419,24 @@ var RelationContent = ({
             snapGrid,
             nodesDraggable: enableNodeDrag,
             nodesConnectable: enableEdgeCreation,
-            connectionLineType: ConnectionLineType.SmoothStep,
-            connectionLineStyle: { stroke: "#ff6b6b", strokeWidth: 2 },
+            connectionLineType: ConnectionLineType.Straight,
+            connectionLineStyle: {
+              stroke: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"),
+              strokeWidth: 1.8
+            },
             attributionPosition: "bottom-right",
             zoomOnScroll: true,
             zoomOnPinch: true,
             zoomOnDoubleClick: false,
             panOnScroll: false,
             panOnDrag: true,
-            proOptions: { hideAttribution: true }
+            proOptions: { hideAttribution: true },
+            elevateEdgesOnSelect: true,
+            defaultEdgeOptions: {
+              type: "straight",
+              style: { stroke: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"), strokeWidth: 1.8 },
+              markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12 }
+            }
           }
         )
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowcloudai-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "author": "flowcloudai",
   "module": "dist/index.js",