@huibo-ui/react-antd 1.0.7 → 1.0.8

package/lib/components/Form.js

@@ -101,7 +101,7 @@ export const Form = React.forwardRef(function Form(props, ref) {
                 onValuesChange({ [prop]: info?.value }, {});
         };
     });
-    return (_jsx(HbForm, { ref: refCallback, initialValues: initialValues, labelPosition: labelPosition, labelWidth: labelCol?.span ? `${(labelCol.span / 24) * 100}%` : '80px', style: style, className: className, children: children }));
+    return (_jsx(HbForm, { ref: refCallback, initialValues: initialValues, labelPosition: labelPosition, inline: layout === 'inline', labelWidth: labelCol?.span ? `${(labelCol.span / 24) * 100}%` : '80px', style: style, className: className, children: children }));
 });
 Form.useForm = function useForm() {
     const [f] = React.useState(createFormInstance);

package/lib/components/Tabs.d.ts

@@ -1,11 +1,20 @@
 import React from 'react';
+/**
+ * antd Tabs 兼容层（自包含 React 渲染）。
+ *
+ * 为什么不用 core 的 hb-tabs：hb-tabs 的 items[].content 只接受 string/HTML，
+ * 不渲染 React 节点（scrm 权益管理 Tabs items 的 children 是复杂 React 内容 → 空白）；
+ * 且 items 数组 post-mount 同步不可靠（同 hb-menu 的坑）。故本层纯 React 渲染：
+ * items 的 children/label 全部原生，activeKey 受控 + 非受控，type=line/card，tabPosition。
+ */
 export interface TabItemType {
     key: string;
-    label: React.ReactNode;
+    label?: React.ReactNode;
     children?: React.ReactNode;
     disabled?: boolean;
+    [k: string]: any;
 }
-export declare function Tabs(props: {
+export interface TabsProps {
     items?: TabItemType[];
     activeKey?: string;
     defaultActiveKey?: string;
@@ -13,9 +22,13 @@ export declare function Tabs(props: {
     type?: 'line' | 'card';
     size?: 'small' | 'middle' | 'large';
     tabPosition?: 'top' | 'bottom' | 'left' | 'right';
-    children?: React.ReactNode;
+    destroyInactiveTabPane?: boolean;
     style?: React.CSSProperties;
-}): React.JSX.Element;
+    className?: string;
+    children?: React.ReactNode;
+    [k: string]: any;
+}
+export declare function Tabs(props: TabsProps): React.JSX.Element;
 export declare namespace Tabs {
     var TabPane: any;
 }

package/lib/components/Tabs.js

@@ -1,7 +1,67 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { HbTabs, HbTabPane } from '@huibo-ui/react';
+const PRIMARY = 'var(--hb-color-primary, #ff6700)';
 export function Tabs(props) {
-    return _jsx(HbTabs, { items: props.items, modelValue: props.activeKey, type: props.type, size: props.size === 'middle' ? 'default' : props.size, tabPosition: props.tabPosition, onHbTabChange: (e) => props.onChange?.(e.detail), style: props.style, children: props.children });
+    const { items, activeKey, defaultActiveKey, onChange, type = 'line', size = 'middle', tabPosition = 'top', destroyInactiveTabPane = false, style, className, children, } = props;
+    const list = items && items.length > 0 ? items : [];
+    const [internal, setInternal] = React.useState(activeKey ?? defaultActiveKey ?? list[0]?.key ?? '');
+    const current = activeKey !== undefined ? activeKey : internal;
+    const select = (key, disabled) => {
+        if (disabled)
+            return;
+        if (activeKey === undefined)
+            setInternal(key);
+        onChange?.(key);
+    };
+    const vertical = tabPosition === 'left' || tabPosition === 'right';
+    const card = type === 'card';
+    const fontSize = size === 'large' ? 16 : size === 'small' ? 13 : 14;
+    const tabPadding = size === 'large' ? '16px 24px' : size === 'small' ? '8px 16px' : '12px 16px';
+    const tabBar = (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: vertical ? 'column' : 'row',
+            borderBottom: vertical || card ? 'none' : '1px solid #f0f0f0',
+            [vertical ? 'borderRight' : 'borderBottom']: vertical ? '1px solid #f0f0f0' : undefined,
+            gap: vertical ? 0 : 4,
+            overflowX: vertical ? 'visible' : 'auto',
+            scrollbarWidth: 'thin',
+        }, children: list.map(it => {
+            const active = it.key === current;
+            return (_jsxs("div", { role: "tab", "aria-selected": active, onClick: () => select(it.key, it.disabled), style: {
+                    padding: tabPadding,
+                    cursor: it.disabled ? 'not-allowed' : 'pointer',
+                    color: it.disabled ? 'rgba(0,0,0,0.25)' : active ? PRIMARY : 'rgba(0,0,0,0.88)',
+                    fontWeight: active ? 500 : 400,
+                    fontSize,
+                    whiteSpace: 'nowrap',
+                    position: 'relative',
+                    background: card ? (active ? '#fff' : 'transparent') : 'transparent',
+                    border: card ? '1px solid #f0f0f0' : 'none',
+                    [vertical ? 'borderBottom' : 'borderBottom']: card ? (active ? '1px solid #fff' : '1px solid #f0f0f0') : 'none',
+                    marginBottom: card && !vertical ? '-1px' : undefined,
+                    borderRadius: card ? (vertical ? '4px 0 0 4px' : '4px 4px 0 0') : undefined,
+                    transition: 'color .2s',
+                }, children: [it.label, active && !card && (_jsx("span", { style: {
+                            position: 'absolute',
+                            [vertical ? 'right' : 'bottom']: 0,
+                            [vertical ? 'top' : 'left']: vertical ? 0 : 0,
+                            [vertical ? 'width' : 'height']: '2px',
+                            [vertical ? 'height' : 'width']: '100%',
+                            background: PRIMARY,
+                        } }))] }, it.key));
+        }) }));
+    const activeItem = list.find(it => it.key === current);
+    const panels = (_jsxs("div", { style: { flex: 1, minWidth: 0, padding: vertical ? '0 16px' : '16px 0' }, children: [destroyInactiveTabPane
+                ? activeItem?.children
+                : list.map(it => (_jsx("div", { style: { display: it.key === current ? 'block' : 'none' }, children: it.children }, it.key))), !items || items.length === 0 ? children : null] }));
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            flexDirection: vertical ? 'row' : 'column',
+            [tabPosition === 'bottom' ? 'flexDirection' : '']: tabPosition === 'bottom' ? 'column-reverse' : undefined,
+            ...style,
+        }, children: [tabPosition === 'bottom' ? panels : tabBar, tabPosition === 'bottom' ? tabBar : panels] }));
 }
-Tabs.TabPane = function TabPane(props) { return React.createElement(HbTabPane, { key: props.tabKey || props.key, label: props.tab }, props.children); };
+/** Tabs.TabPane —— antd4 声明式占位（scrm 用 items，这里仅兜底） */
+Tabs.TabPane = function TabPane(_props) {
+    return null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huibo-ui/react-antd",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "antd 兼容层 — 接收 antd 原生 props，内部转换为 huibo-ui，实现丝滑平替",
   "type": "module",
   "main": "lib/index.js",