flowcloudai-ui 0.1.3 → 0.1.5

package/dist/index.css

@@ -1846,6 +1846,8 @@
   --tab-active-color: var(--fc-color-primary);
   --tab-active-bg: var(--fc-color-bg);
   --tab-active-indicator: var(--fc-color-primary);
+  --tab-min-width: 8rem;
+  --tab-max-width: 18rem;
   --tab-bar-radius-tl: var(--fc-radius-md);
   --tab-bar-radius-tr: var(--fc-radius-md);
   --tab-bar-radius-br: 0px;
@@ -1892,27 +1894,18 @@
   display: flex;
   align-items: stretch;
 }
-.fc-tab-bar__nav-outer--scroll {
-  overflow: hidden;
-}
-.fc-tab-bar__nav {
-  flex: 1;
-  min-width: 0;
+.fc-tab-bar__nav-wrap {
   display: flex;
   align-items: stretch;
-  position: relative;
-  z-index: 0;
 }
-.fc-tab-bar__nav--scroll {
-  overflow: hidden;
-  flex-shrink: 0;
+.fc-tab-bar__nav-wrap--scroll {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
-.fc-tab-bar__nav-wrap {
-  display: flex;
-  gap: 0;
-  align-items: stretch;
-  max-width: 100%;
-  box-sizing: border-box;
+.fc-tab-bar__nav-wrap--scroll::-webkit-scrollbar {
+  display: none;
 }
 .fc-tab-bar__tab {
   position: relative;
@@ -1929,11 +1922,13 @@
   border: none;
   user-select: none;
   border-radius: var(--tab-item-radius-tl) var(--tab-item-radius-tr) var(--tab-item-radius-br) var(--tab-item-radius-bl);
+  flex: 1 1 var(--tab-max-width);
+  min-width: var(--tab-min-width);
+  max-width: var(--tab-max-width);
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.fc-tab-bar__nav--scroll .fc-tab-bar__tab {
-  justify-content: space-between;
-}
-.fc-tab-bar__tab:hover:not(.fc-tab-bar__tab--disabled):not(.fc-tab-bar__tab--dragging) {
+.fc-tab-bar__tab:hover:not(.fc-tab-bar__tab--disabled):not(.fc-tab-bar__tab--dragging):not(.fc-tab-bar__tab--active) {
   color: var(--tab-hover-color);
   background-color: var(--tab-hover-bg);
 }
@@ -1946,6 +1941,13 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
+.fc-tab-bar__tab-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .fc-tab-bar--attached {
   border-bottom: 2px solid var(--fc-color-border);
 }
@@ -2022,31 +2024,10 @@
 .fc-tab-bar__add-btn {
   -webkit-app-region: no-drag;
 }
-.fc-tab-bar--shrink .fc-tab-bar__tab {
-  overflow: hidden;
-  min-width: 0;
-}
-.fc-tab-bar--shrink .fc-tab-bar__tab[data-compact=true] {
-  padding-left: var(--fc-space-xs, 6px);
-  padding-right: var(--fc-space-xs, 6px);
-}
-.fc-tab-bar--shrink .fc-tab-bar__tab-label {
-  flex: 1;
-  min-width: 0;
+.fc-tab-bar__drag-handle {
+  flex: 0 0 0px;
   overflow: hidden;
-  white-space: nowrap;
-  -webkit-mask-image:
-    linear-gradient(
-      to right,
-      black 0%,
-      black calc(100% - 20px),
-      transparent 100%);
-  mask-image:
-    linear-gradient(
-      to right,
-      black 0%,
-      black calc(100% - 20px),
-      transparent 100%);
+  -webkit-app-region: drag;
 }
 .fc-tab-bar__tab--draggable {
   cursor: default;
@@ -2076,6 +2057,7 @@
   align-items: center;
   justify-content: center;
   width: 32px;
+  flex-shrink: 0;
   margin: 0 var(--fc-space-sm, 8px);
   font-size: 20px;
   font-weight: bold;
@@ -2092,24 +2074,9 @@
 .fc-tab-bar--floating .fc-tab-bar__add-btn {
   border-radius: var(--fc-radius-full, 9999px);
 }
-[data-theme=dark] .fc-tab-bar--attached {
-  border-bottom-color: var(--fc-color-border);
-}
-[data-theme=dark] .fc-tab-bar__tab--active {
-  background-color: var(--tab-active-bg);
-}
-[data-theme=dark] .fc-tab-bar__tab:hover:not(.fc-tab-bar__tab--disabled) {
-  background-color: var(--tab-hover-bg);
-}
 [data-theme=dark] .fc-tab-bar--floating .fc-tab-bar__tab--active {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
 }
-[data-theme=dark] .fc-tab-bar__add-btn:hover {
-  background-color: var(--fc-color-bg-tertiary);
-}
-[data-theme=dark] .fc-tab-bar__tab-close:hover {
-  background-color: var(--fc-color-border-light);
-}
 @media (max-width: 768px) {
   .fc-tab-bar__tab {
     padding: var(--fc-space-xs, 6px) var(--fc-space-md, 12px);

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 {
@@ -423,87 +423,41 @@ interface CardProps {
 declare const Card: ({ image, imageSlot, imageHeight, title, description, actions, extraInfo, variant, hoverable, disabled, className, style, onClick, }: CardProps) => react_jsx_runtime.JSX.Element;
 
 interface TabItem {
-    /** 唯一标识 */
     key: string;
-    /** 标签显示内容 */
     label: React__default.ReactNode;
-    /** 是否禁用 */
     disabled?: boolean;
-    /** 是否可关闭（覆盖全局 closable） */
     closable?: boolean;
 }
 interface TabBarProps {
-    /** Tab 列表（受控） */
     items: TabItem[];
-    /** 当前激活的 Tab key（受控） */
     activeKey: string;
-    /**
-     * 布局变体
-     * - attached: 贴合模式 — 标签底部紧贴导航栏下边缘，底部线条作为激活指示器
-     * - floating: 悬浮模式 — 标签垂直居中悬浮，胶囊形态，背景填充作为激活指示器
-     * @default 'attached'
-     */
     variant?: 'attached' | 'floating';
-    /** TabBar 容器圆角 */
     radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    /** 单个 Tab 项的圆角（仅在 floating 模式下或需要四周圆角时使用） */
     tabRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    /** 是否显示关闭按钮 */
     closable?: boolean;
-    /** 是否显示添加按钮 */
     addable?: boolean;
-    /** 是否启用拖拽排序 */
     draggable?: boolean;
-    /**
-     * Tab 最小宽度比例（相对 window.innerWidth）。
-     * 当均分后每个 Tab 宽度 < window.innerWidth * minWidthRatio 时，切换为横向滚动模式。
-     * @default 0.07
-     */
-    minWidthRatio?: number;
-    /**
-     * Tab 最大宽度比例（相对 window.innerWidth）。
-     * 在固定模式下，单个 Tab 的宽度不会超过此值，防止子项很少时占满过多空间。
-     * @default 0.15
-     */
-    maxTabWidthRatio?: number;
+    minTabWidth?: number;
+    maxTabWidth?: number;
     onChange: (activeKey: string) => void;
     onClose?: (key: string) => void;
     onAdd?: () => void;
     onReorder?: (reorderedItems: TabItem[]) => void;
-    /** 每个 Tab 的自定义 className */
     tabClassName?: string;
-    /** 激活态 Tab 的额外 className */
     activeTabClassName?: string;
-    /** 每个 Tab 的自定义 inline style */
     tabStyle?: React__default.CSSProperties;
-    /** 激活态 Tab 的自定义 inline style（会合并到 tabStyle 之上） */
     activeTabStyle?: React__default.CSSProperties;
-    /** 自定义关闭图标渲染 */
     renderCloseIcon?: (key: string) => React__default.ReactNode;
-    /** 自定义添加按钮渲染 */
     renderAddButton?: () => React__default.ReactNode;
     className?: string;
     style?: React__default.CSSProperties;
-    /** 容器背景色 */
     background?: string;
-    /** 标签默认文字色 */
     tabColor?: string;
-    /** 标签 hover 文字色 */
     tabHoverColor?: string;
-    /** 标签 hover 背景色 */
     tabHoverBackground?: string;
-    /** 激活态文字色 */
     tabActiveColor?: string;
-    /** 激活态背景色 */
     tabActiveBackground?: string;
-    /** 激活态指示器颜色（attached 模式底线 / floating 模式无效） */
     activeIndicatorColor?: string;
-    /**
-     * 将 TabBar 空白区域标记为 Tauri 窗口拖拽区域。
-     * 开启后，标签之外的空白处可拖动窗口；标签、关闭、添加按钮已内置 no-drag 保护。
-     * @default false
-     */
-    tauriDragRegion?: boolean;
 }
 declare const TabBar: React__default.NamedExoticComponent<TabBarProps>;
 
@@ -676,7 +630,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

@@ -2025,107 +2025,13 @@ var Card = ({
 };
 
 // src/components/Bar/TabBar.tsx
-import { useRef as useRef8, useCallback as useCallback9, memo as memo4, useEffect as useEffect9 } from "react";
-
-// src/components/Bar/useAdaptiveTabLayout.ts
-import { useState as useState13, useRef as useRef7, useCallback as useCallback8, useEffect as useEffect8 } from "react";
-function useAdaptiveTabLayout(navRef, options) {
-  const { itemsLength, addable, minWidthRatio, maxTabWidthRatio } = options;
-  const itemsLengthRef = useRef7(itemsLength);
-  itemsLengthRef.current = itemsLength;
-  const addableRef = useRef7(addable);
-  addableRef.current = addable;
-  const minWidthRatioRef = useRef7(minWidthRatio);
-  minWidthRatioRef.current = minWidthRatio;
-  const maxTabWidthRatioRef = useRef7(maxTabWidthRatio);
-  maxTabWidthRatioRef.current = maxTabWidthRatio;
-  const [layout, setLayout] = useState13({ scrollMode: false, tabWidth: void 0 });
-  const calculateTimeoutRef = useRef7(null);
-  const lastLayoutRef = useRef7({ scrollMode: false, tabWidth: void 0 });
-  const addBtnWidthRef = useRef7(0);
-  const lastAddableRef = useRef7(void 0);
-  const calculate = useCallback8(() => {
-    const navOuter = navRef.current?.parentElement;
-    const nav = navRef.current;
-    const currentItemsLength = itemsLengthRef.current;
-    const currentAddable = addableRef.current;
-    const currentMinWidthRatio = minWidthRatioRef.current;
-    const currentMaxTabWidthRatio = maxTabWidthRatioRef.current;
-    if (!nav || !navOuter || currentItemsLength === 0) return;
-    if (currentAddable !== lastAddableRef.current) {
-      lastAddableRef.current = currentAddable;
-      if (currentAddable) {
-        const addBtnElement = navOuter.querySelector(".fc-tab-bar__add-btn");
-        if (addBtnElement) {
-          const btnStyle = getComputedStyle(addBtnElement);
-          const marginL = parseFloat(btnStyle.marginLeft) || 0;
-          const marginR = parseFloat(btnStyle.marginRight) || 0;
-          addBtnWidthRef.current = addBtnElement.getBoundingClientRect().width + marginL + marginR;
-        }
-      } else {
-        addBtnWidthRef.current = 0;
-      }
-    }
-    const navOuterCS = getComputedStyle(navOuter);
-    const navWrap = nav.querySelector(".fc-tab-bar__nav-wrap");
-    const navOuterW = navOuter.clientWidth - parseFloat(navOuterCS.paddingLeft) - parseFloat(navOuterCS.paddingRight);
-    const navW = navOuterW - addBtnWidthRef.current;
-    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 minAllowedWidth = 42;
-    const prev = lastLayoutRef.current;
-    const hysteresisFactor = 1.1;
-    let newScrollMode;
-    let newTabWidth;
-    if (idealW < threshold) {
-      newScrollMode = true;
-      newTabWidth = Math.max(threshold, minAllowedWidth);
-    } else if (prev.scrollMode && idealW < threshold * hysteresisFactor) {
-      newScrollMode = true;
-      newTabWidth = Math.max(threshold, minAllowedWidth);
-    } else {
-      newScrollMode = false;
-      newTabWidth = Math.min(Math.max(idealW, minAllowedWidth), maxAllowedWidth);
-    }
-    if (prev.tabWidth !== newTabWidth || prev.scrollMode !== newScrollMode) {
-      const newLayout = { scrollMode: newScrollMode, tabWidth: newTabWidth };
-      lastLayoutRef.current = newLayout;
-      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;
-  useEffect8(() => {
-    const rafId = requestAnimationFrame(calculate);
-    const handleResize = () => calculateDebouncedRef.current();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", handleResize);
-      if (calculateTimeoutRef.current) clearTimeout(calculateTimeoutRef.current);
-    };
-  }, []);
-  useEffect8(() => {
-    calculate();
-  }, [itemsLength, calculate]);
-  return layout;
-}
-
-// src/components/Bar/TabBar.tsx
+import { useRef as useRef7, useCallback as useCallback8, memo as memo4, useEffect as useEffect8 } from "react";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var TabItemView = memo4(({
   item,
   isActive,
   closable,
   draggable,
-  tabWidth,
   tabClassName,
   activeTabClassName,
   tabStyle,
@@ -2139,7 +2045,6 @@ var TabItemView = memo4(({
   onDragEnd
 }) => {
   const showClose = item.closable !== void 0 ? item.closable : closable;
-  const isCompact = tabWidth !== void 0 && tabWidth < 42;
   const classes = [
     "fc-tab-bar__tab",
     isActive && "fc-tab-bar__tab--active",
@@ -2149,7 +2054,6 @@ var TabItemView = memo4(({
     isActive && activeTabClassName
   ].filter(Boolean).join(" ");
   const mergedStyle = {
-    ...tabWidth !== void 0 ? { width: tabWidth, boxSizing: "border-box", flexShrink: 0 } : void 0,
     ...tabStyle,
     ...isActive ? activeTabStyle : void 0
   };
@@ -2158,7 +2062,6 @@ var TabItemView = memo4(({
     {
       className: classes,
       style: mergedStyle,
-      "data-compact": isCompact || void 0,
       onClick: () => !item.disabled && onClick(item.key),
       draggable: draggable && !item.disabled,
       onDragStart: (e) => onDragStart(e, item.key),
@@ -2177,7 +2080,7 @@ var TabItemView = memo4(({
             className: "fc-tab-bar__tab-close",
             onClick: (e) => onClose(e, item.key),
             role: "button",
-            "aria-label": `\u5173\u95ED`,
+            "aria-label": "\u5173\u95ED",
             children: renderCloseIcon ? renderCloseIcon(item.key) : "\xD7"
           }
         )
@@ -2195,8 +2098,8 @@ var TabBar = memo4(({
   closable = false,
   addable = false,
   draggable = false,
-  minWidthRatio = 0.07,
-  maxTabWidthRatio = 0.15,
+  minTabWidth = 8,
+  maxTabWidth = 18,
   onChange,
   onClose,
   onAdd,
@@ -2209,7 +2112,6 @@ var TabBar = memo4(({
   renderAddButton,
   className = "",
   style,
-  tauriDragRegion = false,
   background,
   tabColor,
   tabHoverColor,
@@ -2218,135 +2120,131 @@ var TabBar = memo4(({
   tabActiveBackground,
   activeIndicatorColor
 }) => {
-  const colorVars = {
+  const cssVarMap = {
     "--tab-bar-bg": background,
     "--tab-color": tabColor,
     "--tab-hover-color": tabHoverColor,
     "--tab-hover-bg": tabHoverBackground,
     "--tab-active-color": tabActiveColor,
     "--tab-active-bg": tabActiveBackground,
-    "--tab-active-indicator": activeIndicatorColor
+    "--tab-active-indicator": activeIndicatorColor,
+    "--tab-min-width": `${minTabWidth}rem`,
+    "--tab-max-width": `${maxTabWidth}rem`
   };
-  const overrideStyle = {};
-  for (const [key, value] of Object.entries(colorVars)) {
-    if (value !== void 0) {
-      overrideStyle[key] = value;
-    }
+  const cssVars = {};
+  for (const [k, v] of Object.entries(cssVarMap)) {
+    if (v !== void 0) cssVars[k] = v;
   }
-  const mergedStyle = { ...overrideStyle, ...style };
-  const dragKeyRef = useRef8(null);
-  const navRef = useRef8(null);
-  const layout = useAdaptiveTabLayout(navRef, {
-    itemsLength: items.length,
-    addable,
-    minWidthRatio,
-    maxTabWidthRatio
-  });
-  const prevItemsLengthRef = useRef8(items.length);
-  useEffect9(() => {
-    const prev = prevItemsLengthRef.current;
-    prevItemsLengthRef.current = items.length;
-    if (items.length <= prev || !layout.scrollMode) return;
-    const roll = navRef.current?.querySelector(".fc-roll");
-    if (!roll) return;
+  const mergedStyle = { ...cssVars, ...style };
+  const navOuterRef = useRef7(null);
+  const addBtnRef = useRef7(null);
+  const navWrapRef = useRef7(null);
+  const dragKeyRef = useRef7(null);
+  useEffect8(() => {
+    const el = navWrapRef.current;
+    if (!el) return;
+    const handler = (e) => {
+      if (e.deltaY === 0 || e.deltaX !== 0) return;
+      el.scrollLeft += e.deltaY;
+      e.preventDefault();
+    };
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => el.removeEventListener("wheel", handler);
+  }, []);
+  const prevLenRef = useRef7(items.length);
+  useEffect8(() => {
+    const prev = prevLenRef.current;
+    prevLenRef.current = items.length;
+    if (items.length <= prev) return;
+    const el = navWrapRef.current;
+    if (!el) return;
     requestAnimationFrame(() => {
-      roll.scrollLeft = roll.scrollWidth;
+      el.scrollLeft = el.scrollWidth;
     });
-  }, [items.length, layout.scrollMode]);
-  const handleClick = useCallback9(
-    (key) => onChange(key),
-    [onChange]
-  );
-  const handleClose = useCallback9(
-    (e, key) => {
-      e.stopPropagation();
-      onClose?.(key);
-    },
-    [onClose]
-  );
-  const handleDragStart = useCallback9(
-    (e, key) => {
-      dragKeyRef.current = key;
-      e.dataTransfer.effectAllowed = "move";
-      const target = e.currentTarget;
-      requestAnimationFrame(() => target.classList.add("fc-tab-bar__tab--dragging"));
-    },
-    []
-  );
-  const handleDragOver = useCallback9((e) => {
+  }, [items.length]);
+  const handleClick = useCallback8((key) => onChange(key), [onChange]);
+  const handleClose = useCallback8((e, key) => {
+    e.stopPropagation();
+    onClose?.(key);
+  }, [onClose]);
+  const handleDragStart = useCallback8((e, key) => {
+    dragKeyRef.current = key;
+    e.dataTransfer.effectAllowed = "move";
+    const target = e.currentTarget;
+    requestAnimationFrame(() => target.classList.add("fc-tab-bar__tab--dragging"));
+  }, []);
+  const handleDragOver = useCallback8((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
   }, []);
-  const handleDrop = useCallback9(
-    (e, targetKey) => {
-      e.preventDefault();
-      const dragKey = dragKeyRef.current;
-      if (!dragKey || dragKey === targetKey || !onReorder) return;
-      const fromIndex = items.findIndex((i) => i.key === dragKey);
-      const toIndex = items.findIndex((i) => i.key === targetKey);
-      if (fromIndex === -1 || toIndex === -1) return;
-      const reordered = [...items];
-      const [moved] = reordered.splice(fromIndex, 1);
-      reordered.splice(toIndex, 0, moved);
-      onReorder(reordered);
-    },
-    [items, onReorder]
-  );
-  const handleDragEnd = useCallback9((e) => {
+  const handleDrop = useCallback8((e, targetKey) => {
+    e.preventDefault();
+    const dragKey = dragKeyRef.current;
+    if (!dragKey || dragKey === targetKey || !onReorder) return;
+    const from = items.findIndex((i) => i.key === dragKey);
+    const to = items.findIndex((i) => i.key === targetKey);
+    if (from === -1 || to === -1) return;
+    const reordered = [...items];
+    const [moved] = reordered.splice(from, 1);
+    reordered.splice(to, 0, moved);
+    onReorder(reordered);
+  }, [items, onReorder]);
+  const handleDragEnd = useCallback8((e) => {
     dragKeyRef.current = null;
     e.currentTarget.classList.remove("fc-tab-bar__tab--dragging");
   }, []);
-  const { scrollMode, tabWidth } = layout;
   const rootClasses = [
     "fc-tab-bar",
     `fc-tab-bar--${variant}`,
     `fc-tab-bar--radius-${radius}`,
     tabRadius && `fc-tab-bar--tab-radius-${tabRadius}`,
-    !scrollMode && tabWidth !== void 0 && "fc-tab-bar--shrink",
     className
   ].filter(Boolean).join(" ");
-  const tabList = /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__nav-wrap", children: items.map((item) => /* @__PURE__ */ jsx18(
-    TabItemView,
-    {
-      item,
-      isActive: activeKey === item.key,
-      closable,
-      draggable,
-      tabWidth,
-      tabClassName,
-      activeTabClassName,
-      tabStyle,
-      activeTabStyle,
-      renderCloseIcon,
-      onClick: handleClick,
-      onClose: handleClose,
-      onDragStart: handleDragStart,
-      onDragOver: handleDragOver,
-      onDrop: handleDrop,
-      onDragEnd: handleDragEnd
-    },
-    item.key
-  )) });
-  const addBtn = addable && /* @__PURE__ */ jsx18(
-    "div",
-    {
-      className: "fc-tab-bar__add-btn",
-      onClick: onAdd,
-      role: "button",
-      "aria-label": "\u6DFB\u52A0\u6807\u7B7E",
-      children: renderAddButton ? renderAddButton() : "+"
-    }
-  );
-  const dragRegion = tauriDragRegion ? { "data-tauri-drag-region": "" } : {};
-  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", ...dragRegion, children: /* @__PURE__ */ jsxs13("div", { className: `fc-tab-bar__nav-outer${scrollMode ? " fc-tab-bar__nav-outer--scroll" : ""}`, ...dragRegion, children: [
-    /* @__PURE__ */ jsx18("div", { className: `fc-tab-bar__nav${scrollMode ? " fc-tab-bar__nav--scroll" : ""}`, ref: navRef, children: scrollMode ? /* @__PURE__ */ jsx18(RollingBox, { horizontal: true, showThumb: "hide", style: { flex: 1, minWidth: 0, height: "auto" }, children: tabList }) : tabList }),
-    addBtn
+  const navWrapClasses = [
+    "fc-tab-bar__nav-wrap",
+    "fc-tab-bar__nav-wrap--scroll"
+    // 始终启用滚动模式，由 CSS 控制
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", children: /* @__PURE__ */ jsxs13("div", { className: "fc-tab-bar__nav-outer", ref: navOuterRef, children: [
+    /* @__PURE__ */ jsx18("div", { className: navWrapClasses, ref: navWrapRef, children: items.map((item) => /* @__PURE__ */ jsx18(
+      TabItemView,
+      {
+        item,
+        isActive: activeKey === item.key,
+        closable,
+        draggable,
+        tabClassName,
+        activeTabClassName,
+        tabStyle,
+        activeTabStyle,
+        renderCloseIcon,
+        onClick: handleClick,
+        onClose: handleClose,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onDragEnd: handleDragEnd
+      },
+      item.key
+    )) }),
+    addable && /* @__PURE__ */ jsx18(
+      "div",
+      {
+        className: "fc-tab-bar__add-btn",
+        ref: addBtnRef,
+        onClick: onAdd,
+        role: "button",
+        "aria-label": "\u6DFB\u52A0\u6807\u7B7E",
+        children: renderAddButton ? renderAddButton() : "+"
+      }
+    ),
+    /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__drag-handle", "data-tauri-drag-region": true })
   ] }) });
 });
 TabBar.displayName = "TabBar";
 
 // src/components/Tag/TagItem.tsx
-import { useEffect as useEffect10, useRef as useRef9, useState as useState14 } from "react";
+import { useEffect as useEffect9, useRef as useRef8, useState as useState13 } from "react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function TagItem({
   schema,
@@ -2357,10 +2255,10 @@ function TagItem({
   color,
   borderColor
 }) {
-  const [editing, setEditing] = useState14(false);
-  const [draft, setDraft] = useState14(() => value !== void 0 ? String(value) : "");
-  const inputRef = useRef9(null);
-  useEffect10(() => {
+  const [editing, setEditing] = useState13(false);
+  const [draft, setDraft] = useState13(() => value !== void 0 ? String(value) : "");
+  const inputRef = useRef8(null);
+  useEffect9(() => {
     if (!editing) setDraft(value !== void 0 ? String(value) : "");
   }, [value, editing]);
   const colorVars = {
@@ -2459,7 +2357,7 @@ function TagItem({
 }
 
 // src/components/MarkdownEditor/MarkdownEditor.tsx
-import { useState as useState15 } from "react";
+import { useState as useState14 } from "react";
 import MDEditor, { commands } from "@uiw/react-md-editor";
 import { jsx as jsx20 } from "react/jsx-runtime";
 function withTitle(cmd, title) {
@@ -2495,7 +2393,7 @@ function MarkdownEditor({
   borderColor
 }) {
   const { resolvedTheme } = useTheme();
-  const [showSplit, setShowSplit] = useState15(false);
+  const [showSplit, setShowSplit] = useState14(false);
   const colorVars = {
     "--md-bg": background,
     "--md-toolbar-bg": toolbarBackground,
@@ -2554,7 +2452,7 @@ function MarkdownEditor({
 }
 
 // src/components/ContextMenu/ContextMenuContext.tsx
-import { createContext as createContext4, useContext as useContext4, useEffect as useEffect11, useRef as useRef10, useState as useState16 } from "react";
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect10, useRef as useRef9, useState as useState15 } from "react";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var ContextMenuContext = createContext4(null);
 function ContextMenuProvider({
@@ -2563,13 +2461,13 @@ function ContextMenuProvider({
   borderColor,
   hoverBackground
 }) {
-  const [menu, setMenu] = useState16({
+  const [menu, setMenu] = useState15({
     visible: false,
     x: 0,
     y: 0,
     items: []
   });
-  const menuRef = useRef10(null);
+  const menuRef = useRef9(null);
   const showContextMenu = (e, items) => {
     e.preventDefault();
     e.stopPropagation();
@@ -2577,7 +2475,7 @@ function ContextMenuProvider({
   };
   const hide = () => setMenu((s) => ({ ...s, visible: false }));
   useClickOutside(menuRef, hide, menu.visible);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!menu.visible) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") hide();
@@ -2646,10 +2544,10 @@ function ContextMenuProvider({
 var useContextMenu = () => useContext4(ContextMenuContext);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState18, useRef as useRef11, useEffect as useEffect12, useCallback as useCallback11, useMemo as useMemo5 } from "react";
+import { useState as useState17, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback10, useMemo as useMemo5 } from "react";
 
 // src/components/SmartMessage/SmartMessage.tsx
-import { useState as useState17, useCallback as useCallback10 } from "react";
+import { useState as useState16, useCallback as useCallback9 } from "react";
 import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var SmartMessage = ({
   id,
@@ -2662,8 +2560,8 @@ var SmartMessage = ({
   className = "",
   style = {}
 }) => {
-  const [copied, setCopied] = useState17(false);
-  const handleCopy = useCallback10(async () => {
+  const [copied, setCopied] = useState16(false);
+  const handleCopy = useCallback9(async () => {
     try {
       await navigator.clipboard.writeText(content);
       setCopied(true);
@@ -2751,34 +2649,34 @@ var Chat = ({
   height = "600px",
   width
 }) => {
-  const [showHistory, setShowHistory] = useState18(false);
-  const [isMinimized, setIsMinimized] = useState18(false);
-  const messagesContainerRef = useRef11(null);
-  const messagesEndRef = useRef11(null);
-  const historyPanelRef = useRef11(null);
+  const [showHistory, setShowHistory] = useState17(false);
+  const [isMinimized, setIsMinimized] = useState17(false);
+  const messagesContainerRef = useRef10(null);
+  const messagesEndRef = useRef10(null);
+  const historyPanelRef = useRef10(null);
   const currentConversation = useMemo5(
     () => conversations.find((c) => c.id === currentConversationId),
     [conversations, currentConversationId]
   );
   const currentTitle = currentConversation?.title || title;
-  useEffect12(() => {
+  useEffect11(() => {
     if (autoScroll && messagesContainerRef.current && !showHistory && !isMinimized) {
       messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
     }
   }, [messages, loading, showHistory, isMinimized, autoScroll]);
   useClickOutside(historyPanelRef, () => setShowHistory(false), showHistory);
-  const handleDeleteConversation = useCallback11((conversationId) => {
+  const handleDeleteConversation = useCallback10((conversationId) => {
     onDeleteConversation?.(conversationId);
   }, [onDeleteConversation]);
-  const handleMinimize = useCallback11(() => {
+  const handleMinimize = useCallback10(() => {
     setIsMinimized(true);
     onMinimize?.();
   }, [onMinimize]);
-  const handleRestore = useCallback11(() => {
+  const handleRestore = useCallback10(() => {
     setIsMinimized(false);
     onRestore?.();
   }, [onRestore]);
-  const handleCopy = useCallback11((content) => {
+  const handleCopy = useCallback10((content) => {
     const message = messages.find((m) => m.content === content);
     if (message) {
       onMessageCopy?.(message);
@@ -2956,7 +2854,7 @@ var Chat = ({
 };
 
 // src/components/Relation/Relation.tsx
-import { useCallback as useCallback12, useEffect as useEffect13 } from "react";
+import React13, { useCallback as useCallback11, useEffect as useEffect12, memo as memo5 } from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -2970,7 +2868,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 +2890,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 +2969,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 +2980,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 +2997,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 +3017,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 +3027,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,59 +3065,84 @@ 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;
   const isDark = theme === "dark";
   const bgColor = isDark ? "#0f172a" : "#f5f7fa";
-  useEffect13(() => {
+  useEffect12(() => {
     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]);
-  const handleNodesChange = useCallback12(
+  useEffect12(() => {
+    if (propNodes) {
+      setNodes(propNodes);
+    }
+  }, [propNodes, setNodes]);
+  useEffect12(() => {
+    if (propEdges) {
+      setEdges(propEdges);
+    }
+  }, [propEdges, setEdges]);
+  const handleNodesChange = useCallback11(
     (changes) => {
       onNodesChange(changes);
       if (onNodesChangeProp) {
-        onNodesChangeProp(nodes);
+        setTimeout(() => {
+          onNodesChangeProp(nodes);
+        }, 0);
       }
     },
     [onNodesChange, onNodesChangeProp, nodes]
   );
-  const handleEdgesChange = useCallback12(
+  const handleEdgesChange = useCallback11(
     (changes) => {
       onEdgesChange(changes);
       if (onEdgesChangeProp) {
-        onEdgesChangeProp(edges);
+        setTimeout(() => {
+          onEdgesChangeProp(edges);
+        }, 0);
       }
     },
     [onEdgesChange, onEdgesChangeProp, edges]
   );
-  const onConnect = useCallback12(
+  const onConnect = useCallback11(
     (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(
+  const handleNodeClick = useCallback11(
     (_event, node) => {
       if (onNodeClick && node.data) {
         onNodeClick(node.id, node.data, _event);
@@ -3147,7 +3150,7 @@ var RelationContent = ({
     },
     [onNodeClick]
   );
-  const handleNodeDoubleClick = useCallback12(
+  const handleNodeDoubleClick = useCallback11(
     (_event, node) => {
       if (onNodeDoubleClick && node.data) {
         onNodeDoubleClick(node.id, node.data);
@@ -3155,7 +3158,7 @@ var RelationContent = ({
     },
     [onNodeDoubleClick]
   );
-  const handleNodeContextMenu = useCallback12(
+  const handleNodeContextMenu = useCallback11(
     (event, node) => {
       event.preventDefault();
       if (onNodeContextMenu && node.data) {
@@ -3164,7 +3167,7 @@ var RelationContent = ({
     },
     [onNodeContextMenu]
   );
-  const handleEdgeClick = useCallback12(
+  const handleEdgeClick = useCallback11(
     (_event, edge) => {
       if (onEdgeClick) {
         onEdgeClick(edge.id, edge.data);
@@ -3172,18 +3175,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 +3284,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 +3293,7 @@ var RelationContent = ({
           ReactFlow,
           {
             nodes: nodesWithTheme,
-            edges,
+            edges: edgesWithStyle,
             onNodesChange: handleNodesChange,
             onEdgesChange: handleEdgesChange,
             onConnect: enableEdgeCreation ? onConnect : void 0,
@@ -3220,15 +3311,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.5",
   "type": "module",
   "author": "flowcloudai",
   "module": "dist/index.js",