flowcloudai-ui 0.1.4 → 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

@@ -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>;
 

package/dist/index.js

@@ -2025,113 +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 rafRef = 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 = screen.width * currentMinWidthRatio;
-    const maxAllowedWidth = screen.width * 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 calculateRef = useRef7(calculate);
-  calculateRef.current = calculate;
-  useEffect8(() => {
-    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 () => {
-      ro.disconnect();
-      if (rafRef.current !== null) cancelAnimationFrame(rafRef.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,
@@ -2145,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",
@@ -2155,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
   };
@@ -2164,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),
@@ -2183,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"
           }
         )
@@ -2201,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,
@@ -2215,7 +2112,6 @@ var TabBar = memo4(({
   renderAddButton,
   className = "",
   style,
-  tauriDragRegion = false,
   background,
   tabColor,
   tabHoverColor,
@@ -2224,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,
@@ -2363,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 = {
@@ -2465,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) {
@@ -2501,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,
@@ -2560,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({
@@ -2569,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();
@@ -2583,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();
@@ -2652,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,
@@ -2668,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);
@@ -2757,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);
@@ -2962,7 +2854,7 @@ var Chat = ({
 };
 
 // src/components/Relation/Relation.tsx
-import React13, { useCallback as useCallback12, useEffect as useEffect13, memo as memo5 } from "react";
+import React13, { useCallback as useCallback11, useEffect as useEffect12, memo as memo5 } from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -3184,7 +3076,7 @@ var RelationContent = ({
   const theme = propTheme;
   const isDark = theme === "dark";
   const bgColor = isDark ? "#0f172a" : "#f5f7fa";
-  useEffect13(() => {
+  useEffect12(() => {
     if (fitView && fitViewFn && (propNodes?.length || 0) > 0) {
       const timer = setTimeout(() => {
         fitViewFn({ duration: 300, padding: 0.2, ...fitViewOptions }).catch((error) => {
@@ -3194,17 +3086,17 @@ var RelationContent = ({
       return () => clearTimeout(timer);
     }
   }, [fitView, fitViewFn, fitViewOptions, propNodes]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (propNodes) {
       setNodes(propNodes);
     }
   }, [propNodes, setNodes]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (propEdges) {
       setEdges(propEdges);
     }
   }, [propEdges, setEdges]);
-  const handleNodesChange = useCallback12(
+  const handleNodesChange = useCallback11(
     (changes) => {
       onNodesChange(changes);
       if (onNodesChangeProp) {
@@ -3215,7 +3107,7 @@ var RelationContent = ({
     },
     [onNodesChange, onNodesChangeProp, nodes]
   );
-  const handleEdgesChange = useCallback12(
+  const handleEdgesChange = useCallback11(
     (changes) => {
       onEdgesChange(changes);
       if (onEdgesChangeProp) {
@@ -3226,7 +3118,7 @@ var RelationContent = ({
     },
     [onEdgesChange, onEdgesChangeProp, edges]
   );
-  const onConnect = useCallback12(
+  const onConnect = useCallback11(
     (params) => {
       const newEdge = {
         ...params,
@@ -3250,7 +3142,7 @@ var RelationContent = ({
     },
     [setEdges, onConnectProp, edgeStyles.defaultColor, isDark]
   );
-  const handleNodeClick = useCallback12(
+  const handleNodeClick = useCallback11(
     (_event, node) => {
       if (onNodeClick && node.data) {
         onNodeClick(node.id, node.data, _event);
@@ -3258,7 +3150,7 @@ var RelationContent = ({
     },
     [onNodeClick]
   );
-  const handleNodeDoubleClick = useCallback12(
+  const handleNodeDoubleClick = useCallback11(
     (_event, node) => {
       if (onNodeDoubleClick && node.data) {
         onNodeDoubleClick(node.id, node.data);
@@ -3266,7 +3158,7 @@ var RelationContent = ({
     },
     [onNodeDoubleClick]
   );
-  const handleNodeContextMenu = useCallback12(
+  const handleNodeContextMenu = useCallback11(
     (event, node) => {
       event.preventDefault();
       if (onNodeContextMenu && node.data) {
@@ -3275,7 +3167,7 @@ var RelationContent = ({
     },
     [onNodeContextMenu]
   );
-  const handleEdgeClick = useCallback12(
+  const handleEdgeClick = useCallback11(
     (_event, edge) => {
       if (onEdgeClick) {
         onEdgeClick(edge.id, edge.data);

package/package.json

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