flowcloudai-ui 0.1.5 → 0.1.7

package/dist/index.css

@@ -1846,8 +1846,6 @@
   --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;
@@ -1893,23 +1891,29 @@
 .fc-tab-bar__nav-outer {
   display: flex;
   align-items: stretch;
+  flex: 1;
+  min-width: 0;
+}
+.fc-tab-bar__nav-outer[data-tauri-drag-region] {
+  -webkit-app-region: drag;
 }
 .fc-tab-bar__nav-wrap {
   display: flex;
   align-items: stretch;
-}
-.fc-tab-bar__nav-wrap--scroll {
   flex: 1;
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-.fc-tab-bar__nav-wrap--scroll::-webkit-scrollbar {
+.fc-tab-bar__nav-wrap::-webkit-scrollbar {
   display: none;
 }
 .fc-tab-bar__tab {
+  flex: var(--tab-fill-width, 1) 1 0;
+  min-width: var(--tab-min-width, 80px);
+  max-width: var(--tab-max-width, 200px);
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--fc-space-sm, 8px);
   padding: var(--fc-space-sm, 8px) var(--fc-space-lg, 16px);
@@ -1921,14 +1925,11 @@
   white-space: nowrap;
   border: none;
   user-select: none;
+  box-sizing: border-box;
   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__tab:hover:not(.fc-tab-bar__tab--disabled):not(.fc-tab-bar__tab--dragging):not(.fc-tab-bar__tab--active) {
+.fc-tab-bar__tab:hover:not(.fc-tab-bar__tab--disabled):not(.fc-tab-bar__tab--dragging) {
   color: var(--tab-hover-color);
   background-color: var(--tab-hover-bg);
 }
@@ -1946,7 +1947,18 @@
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis;
+  -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%);
 }
 .fc-tab-bar--attached {
   border-bottom: 2px solid var(--fc-color-border);
@@ -2024,11 +2036,6 @@
 .fc-tab-bar__add-btn {
   -webkit-app-region: no-drag;
 }
-.fc-tab-bar__drag-handle {
-  flex: 0 0 0px;
-  overflow: hidden;
-  -webkit-app-region: drag;
-}
 .fc-tab-bar__tab--draggable {
   cursor: default;
 }
@@ -2053,11 +2060,13 @@
   background-color: var(--fc-color-border-light);
 }
 .fc-tab-bar__add-btn {
+  position: sticky;
+  right: 0;
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
-  flex-shrink: 0;
   margin: 0 var(--fc-space-sm, 8px);
   font-size: 20px;
   font-weight: bold;
@@ -2066,6 +2075,7 @@
   cursor: pointer;
   transition: all var(--fc-transition, 150ms ease);
   border-radius: var(--fc-radius-sm, 4px);
+  background-color: var(--tab-bar-bg);
 }
 .fc-tab-bar__add-btn:hover {
   color: var(--fc-color-primary);
@@ -2074,9 +2084,24 @@
 .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,41 +423,95 @@ 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;
-    minTabWidth?: number;
-    maxTabWidth?: number;
+    /**
+     * Tab 最小宽度比例（相对 screen.width）。
+     * Tab 压缩至此宽度后触发横向滚动。
+     * @default 0.07
+     */
+    minWidthRatio?: number;
+    /**
+     * Tab 最大宽度比例（相对 screen.width）。
+     * Tab 较少时不超过此宽度。
+     * @default 0.15
+     */
+    maxTabWidthRatio?: number;
+    /**
+     * 控制 Tab 是否自动填充容器宽度。
+     * - true: flex: 1 1 0，Tab 会自动拉伸填满导航栏（默认行为）
+     * - false: flex: 0 1 auto，Tab 只占内容宽度，剩余空间留白
+     * 当 tauriDragRegion 为 true 且 fillWidth 为 false 时，空白区域可作为窗口拖拽区。
+     * @default true
+     */
+    fillWidth?: boolean;
     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

@@ -2098,8 +2098,9 @@ var TabBar = memo4(({
   closable = false,
   addable = false,
   draggable = false,
-  minTabWidth = 8,
-  maxTabWidth = 18,
+  minWidthRatio = 0.07,
+  maxTabWidthRatio = 0.15,
+  fillWidth = true,
   onChange,
   onClose,
   onAdd,
@@ -2112,6 +2113,7 @@ var TabBar = memo4(({
   renderAddButton,
   className = "",
   style,
+  tauriDragRegion = false,
   background,
   tabColor,
   tabHoverColor,
@@ -2120,75 +2122,85 @@ var TabBar = memo4(({
   tabActiveBackground,
   activeIndicatorColor
 }) => {
-  const cssVarMap = {
+  const colorVars = {
     "--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-min-width": `${minTabWidth}rem`,
-    "--tab-max-width": `${maxTabWidth}rem`
+    "--tab-active-indicator": activeIndicatorColor
   };
-  const cssVars = {};
-  for (const [k, v] of Object.entries(cssVarMap)) {
-    if (v !== void 0) cssVars[k] = v;
+  const overrideStyle = {};
+  for (const [key, value] of Object.entries(colorVars)) {
+    if (value !== void 0) {
+      overrideStyle[key] = value;
+    }
   }
-  const mergedStyle = { ...cssVars, ...style };
-  const navOuterRef = useRef7(null);
-  const addBtnRef = useRef7(null);
-  const navWrapRef = useRef7(null);
+  const mergedStyle = { ...overrideStyle, ...style };
   const dragKeyRef = useRef7(null);
+  const navRef = useRef7(null);
+  const prevItemsLengthRef = useRef7(items.length);
   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;
+    const prev = prevItemsLengthRef.current;
+    prevItemsLengthRef.current = items.length;
     if (items.length <= prev) return;
-    const el = navWrapRef.current;
-    if (!el) return;
+    const nav = navRef.current;
+    if (!nav) return;
     requestAnimationFrame(() => {
-      el.scrollLeft = el.scrollWidth;
+      nav.scrollLeft = nav.scrollWidth;
     });
   }, [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"));
+  useEffect8(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const handleWheel = (e) => {
+      if (e.deltaY === 0) return;
+      e.preventDefault();
+      nav.scrollLeft += Number(e.deltaY);
+    };
+    nav.addEventListener("wheel", handleWheel, { passive: false });
+    return () => nav.removeEventListener("wheel", handleWheel);
   }, []);
+  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 = 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 handleDrop = useCallback8(
+    (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 = useCallback8((e) => {
     dragKeyRef.current = null;
     e.currentTarget.classList.remove("fc-tab-bar__tab--dragging");
@@ -2200,13 +2212,14 @@ var TabBar = memo4(({
     tabRadius && `fc-tab-bar--tab-radius-${tabRadius}`,
     className
   ].filter(Boolean).join(" ");
-  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(
+  const navWrapStyle = {
+    "--tab-min-width": `${Math.round(screen.width * minWidthRatio)}px`,
+    "--tab-max-width": `${Math.round(screen.width * maxTabWidthRatio)}px`,
+    "--tab-fill-width": fillWidth ? "1" : "0"
+  };
+  const dragRegion = tauriDragRegion ? { "data-tauri-drag-region": "" } : {};
+  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", ...dragRegion, children: /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__nav-outer", ...dragRegion, children: /* @__PURE__ */ jsxs13("div", { className: "fc-tab-bar__nav-wrap", ref: navRef, style: navWrapStyle, children: [
+    items.map((item) => /* @__PURE__ */ jsx18(
       TabItemView,
       {
         item,
@@ -2226,20 +2239,18 @@ var TabBar = memo4(({
         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";
 

package/package.json

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