@huibo-ui/react-antd 1.0.7 → 1.0.9

package/lib/components/ConfigProvider.js

@@ -76,5 +76,5 @@ export function ConfigProvider(props) {
     React.useEffect(() => {
         applyThemeToken(theme?.token);
     }, [theme?.token]);
-    return (_jsx(HbConfigProvider, { theme: theme?.dark ? 'dark' : 'light', size: props.componentSize === 'middle' ? 'default' : props.componentSize, locale: props.locale ? 'zh-CN' : 'en-US', children: _jsx("div", { style: { display: 'block', width: '100%', height: '100%' }, children: children }) }));
+    return (_jsx(HbConfigProvider, { theme: theme?.dark ? 'dark' : 'light', size: props.componentSize === 'middle' ? 'default' : props.componentSize, locale: props.locale ? 'zh-CN' : 'en-US', children: _jsx("div", { style: { display: 'contents' }, children: children }) }));
 }

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/lib/components/message.js

@@ -3,11 +3,28 @@
  * message.success('保存成功') → 创建 hb-message 并显示
  */
 let messageCounter = 0;
+/**
+ * 获取/创建固定定位的 message 容器（与主包 show-message.ts 的 #hb-message-container 对齐）。
+ * 命令式 message 必须脱离文档流固定在视口顶部居中，否则会被 body 内容流推到视口外，
+ * 用户看不到提示（表现为「点了没反应」）。
+ */
+function getMessageContainer() {
+    let container = document.getElementById('hb-message-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'hb-message-container';
+        container.style.cssText =
+            'position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1100;' +
+                'display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;';
+        document.body.appendChild(container);
+    }
+    return container;
+}
 function showMessage(type, content, duration) {
     const id = `hb-msg-${++messageCounter}`;
     const div = document.createElement('div');
     div.id = id;
-    document.body.appendChild(div);
+    getMessageContainer().appendChild(div);
     // 创建 hb-message 元素
     const el = document.createElement('hb-message');
     el.type = type;

package/package.json

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