@huibo-ui/react-antd 1.0.6 → 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/Menu.d.ts

@@ -1,13 +1,25 @@
 import React from 'react';
+/**
+ * antd Menu 兼容层（自包含 React 渲染）。
+ *
+ * 为什么不用 core 的 hb-menu：
+ *   1. hb-menu 的 items 是数组，Stencil React 包装层首渲染时 items 常为 undefined → 走 <slot/>
+ *      渲染空；post-mount 赋值 el.items 也不可靠触发重渲染（scrm 异步加载 menuList 后
+ *      侧边菜单一直空白）。
+ *   2. hb-menu（Stencil）渲染 {item.icon} 时无法处理 React 元素图标（scrm 侧边菜单项
+ *      带 <img> 图标）。
+ * 故本层用纯 React 渲染（light DOM），items/图标/异步更新全部原生可用。
+ * 支持 antd mode(horizontal/vertical/inline)、selectedKeys、openKeys、onClick、子菜单展开。
+ */
 export interface MenuItemType {
     key: string;
-    label: React.ReactNode;
+    label?: React.ReactNode;
     icon?: React.ReactNode;
     children?: MenuItemType[];
     disabled?: boolean;
+    [k: string]: any;
 }
 export interface MenuProps {
-    [key: string]: any;
     items?: MenuItemType[];
     mode?: 'horizontal' | 'vertical' | 'inline';
     selectedKeys?: string[];
@@ -17,6 +29,7 @@ export interface MenuProps {
     onClick?: (info: {
         key: string;
         keyPath: string[];
+        item?: any;
     }) => void;
     onOpenChange?: (openKeys: string[]) => void;
     onSelect?: (info: {
@@ -26,15 +39,10 @@ export interface MenuProps {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
+    [k: string]: any;
 }
-/**
- * antd Menu 兼容层。
- *
- * 关键：hb-menu 的 `items` 是数组，React 包装层（createReactComponent）只在
- * componentDidUpdate 时把数组同步为 DOM 属性，首渲染(componentDidLoad)时 items 为
- * undefined → hb-menu 走 <slot/> 分支渲染空。因此这里用 ref 在挂载时立即同步 items。
- */
 export declare function Menu(props: MenuProps): React.JSX.Element;
 export declare namespace Menu {
     var Item: any;
+    var SubMenu: any;
 }

package/lib/components/Menu.js

@@ -1,32 +1,93 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { HbMenu, HbMenuItem } from '@huibo-ui/react';
-/**
- * antd Menu 兼容层。
- *
- * 关键：hb-menu 的 `items` 是数组，React 包装层（createReactComponent）只在
- * componentDidUpdate 时把数组同步为 DOM 属性，首渲染(componentDidLoad)时 items 为
- * undefined → hb-menu 走 <slot/> 分支渲染空。因此这里用 ref 在挂载时立即同步 items。
- */
+const PRIMARY = 'var(--hb-color-primary, #ff6700)';
 export function Menu(props) {
-    const { items, mode, selectedKeys, openKeys, theme, inlineCollapsed, onClick, onOpenChange, style, className, children } = props;
-    const refCallback = (el) => {
-        // 立即把 items 数组同步到 CE（绕过 Stencil 只把 string/bool/number 设为 attribute 的限制）
-        if (el && items) {
-            el.items = items;
+    const { items, mode = 'vertical', selectedKeys, openKeys, theme = 'light', inlineCollapsed, onClick, onOpenChange, onSelect, style, className, children, } = props;
+    const horizontal = mode === 'horizontal';
+    const dark = theme === 'dark';
+    const [internalOpen, setInternalOpen] = React.useState(openKeys ?? []);
+    const openSet = openKeys !== undefined ? openKeys : internalOpen;
+    const selected = selectedKeys ?? [];
+    const collapsed = !!inlineCollapsed;
+    const fireClick = (item, keyPath) => {
+        if (item.disabled)
+            return;
+        const info = { key: item.key, keyPath: [item.key, ...keyPath], item };
+        onClick?.(info);
+        onSelect?.({ key: item.key, keyPath: info.keyPath });
+    };
+    const toggleSub = (key) => {
+        const next = openSet.includes(key) ? openSet.filter(k => k !== key) : [...openSet, key];
+        if (openKeys === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    const Icon = ({ icon }) => icon ? (_jsx("span", { style: { display: 'inline-flex', alignItems: 'center', marginRight: 8, width: 16, height: 16 }, children: icon })) : null;
+    const textColor = dark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.88)';
+    const disabledColor = dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+    const renderItem = (item, keyPath) => {
+        const hasChildren = !!(item.children && item.children.length > 0);
+        const isSelected = selected.includes(item.key);
+        const isOpen = openSet.includes(item.key);
+        const labelColor = item.disabled ? disabledColor : isSelected ? PRIMARY : textColor;
+        if (hasChildren && !collapsed) {
+            return (_jsxs("li", { role: "menuitem", style: { listStyle: 'none' }, children: [_jsxs("div", { onClick: () => !item.disabled && toggleSub(item.key), style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            height: 40,
+                            padding: collapsed ? 0 : '0 16px',
+                            cursor: item.disabled ? 'not-allowed' : 'pointer',
+                            color: labelColor,
+                            whiteSpace: 'nowrap',
+                        }, children: [_jsx(Icon, { icon: item.icon }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.label }), _jsx("span", { style: { display: 'inline-block', transition: 'transform .2s', transform: isOpen ? 'rotate(90deg)' : 'none', fontSize: 10, marginLeft: 8 }, children: "\u25B6" })] }), isOpen && (_jsx("ul", { role: "menu", style: { listStyle: 'none', margin: 0, padding: 0 }, children: item.children.map(c => renderItem(c, [item.key, ...keyPath])) }))] }, item.key));
         }
+        // 叶子项
+        const baseStyle = {
+            display: 'flex',
+            alignItems: 'center',
+            height: horizontal ? 56 : 40,
+            padding: horizontal ? '0 20px' : collapsed ? 0 : '0 16px',
+            cursor: item.disabled ? 'not-allowed' : 'pointer',
+            color: labelColor,
+            background: isSelected ? (dark ? PRIMARY : 'rgba(255,103,0,0.06)') : 'transparent',
+            borderBottom: horizontal && isSelected ? `2px solid ${PRIMARY}` : 'none',
+            whiteSpace: 'nowrap',
+            listStyle: 'none',
+        };
+        return (_jsxs("li", { role: "menuitem", onClick: () => fireClick(item, keyPath), style: baseStyle, children: [_jsx(Icon, { icon: item.icon }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.label })] }, item.key));
     };
-    return (_jsx(HbMenu, { ref: refCallback, items: items, mode: (mode === 'inline' ? 'vertical' : mode), selectedKeys: selectedKeys, openKeys: openKeys, theme: theme, collapsed: inlineCollapsed, style: style, className: className, onHbSelect: (e) => {
-            const key = e?.detail;
-            if (onClick)
-                onClick({ key, keyPath: [key] });
-            if (props.onSelect)
-                props.onSelect({ key, keyPath: [key] });
-        }, onHbOpenChange: (e) => {
-            if (onOpenChange)
-                onOpenChange(e?.detail || []);
-        }, children: children }));
+    const list = items && items.length > 0 ? items : [];
+    return (_jsxs("ul", { role: "menu", className: className, style: {
+            listStyle: 'none',
+            margin: 0,
+            padding: inlineCollapsed || collapsed ? 0 : horizontal ? 0 : '8px 0',
+            display: horizontal ? 'flex' : 'block',
+            flexDirection: horizontal ? 'row' : 'column',
+            alignItems: horizontal ? 'stretch' : 'stretch',
+            background: dark ? '#001529' : '#fff',
+            color: textColor,
+            borderBottom: horizontal ? `1px solid ${dark ? '#1f1f1f' : '#f0f0f0'}` : 'none',
+            minWidth: horizontal ? 0 : collapsed ? 0 : 200,
+            height: horizontal ? 56 : '100%',
+            boxSizing: 'border-box',
+            userSelect: 'none',
+            ...style,
+        }, children: [list.map(it => renderItem(it, [])), children] }));
 }
-Menu.Item = function MenuItem({ children, key: itemKey, disabled, onClick }) {
-    return React.createElement(HbMenuItem, { itemKey, disabled, onClick }, children);
+/** Menu.Item —— antd4 声明式占位（scrm 用 items prop，这里仅兜底直接渲染） */
+Menu.Item = function MenuItem({ children, disabled, onClick }) {
+    return (_jsx("li", { role: "menuitem", onClick: e => !disabled && onClick?.(e), style: {
+            listStyle: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            height: 40,
+            padding: '0 16px',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            color: disabled ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.88)',
+            whiteSpace: 'nowrap',
+        }, children: children }));
+};
+Menu.SubMenu = function SubMenu({ children, title }) {
+    // 简化：直接展开渲染（scrm 用 items，此分支少用）
+    return (_jsxs("li", { role: "menuitem", style: { listStyle: 'none' }, children: [_jsx("div", { style: { padding: '0 16px', height: 40, display: 'flex', alignItems: 'center', color: 'rgba(0,0,0,0.88)' }, children: title }), _jsx("ul", { role: "menu", style: { listStyle: 'none', margin: 0, padding: 0 }, children: children })] }));
 };

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.6",
+  "version": "1.0.8",
   "description": "antd 兼容层 — 接收 antd 原生 props，内部转换为 huibo-ui，实现丝滑平替",
   "type": "module",
   "main": "lib/index.js",