@huibo-ui/react-antd 1.0.6 → 1.0.7

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/package.json

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