@huibo-ui/react-antd 1.0.5 → 1.0.7

package/lib/components/Cascader.d.ts

@@ -1,12 +1,20 @@
 import React from 'react';
-export declare function Cascader(props: {
+export interface CascaderProps {
     options?: any[];
     value?: any;
-    onChange?: (value: any) => void;
+    onChange?: (value: any, selectOptions?: any) => void;
     multiple?: boolean;
     placeholder?: string;
     disabled?: boolean;
     allowClear?: boolean;
     showSearch?: boolean;
+    /** antd fieldNames：自定义节点字段名，如 { label:'name', value:'id', children:'child' } */
+    fieldNames?: {
+        label?: string;
+        value?: string;
+        children?: string;
+    };
     style?: React.CSSProperties;
-}): React.JSX.Element;
+    [key: string]: any;
+}
+export declare function Cascader(props: CascaderProps): React.JSX.Element;

package/lib/components/Cascader.js

@@ -1,5 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbCascader } from '@huibo-ui/react';
+/**
+ * 按 antd fieldNames 递归把自定义节点字段映射为 hb-cascader 认的 {label,value,children}，
+ * 保留原始字段（onChange 第二参数对齐 antd 返回原始 option）。
+ */
+function mapCascader(nodes, fn) {
+    if (!nodes || nodes.length === 0)
+        return [];
+    if (!fn)
+        return nodes;
+    const ln = fn.label || 'label';
+    const vn = fn.value || 'value';
+    const cn = fn.children || 'children';
+    return nodes.map(n => {
+        const mapped = { ...n, label: n[ln], value: n[vn] };
+        if (Array.isArray(n[cn]))
+            mapped.children = mapCascader(n[cn], fn);
+        return mapped;
+    });
+}
 export function Cascader(props) {
-    return _jsx(HbCascader, { options: props.options || [], modelValue: props.value, multiple: props.multiple, placeholder: props.placeholder, disabled: props.disabled, clearable: props.allowClear, filterable: props.showSearch, onHbChange: (e) => props.onChange?.(e.detail), style: props.style });
+    const options = mapCascader(props.options, props.fieldNames);
+    return (_jsx(HbCascader, { options: options, modelValue: props.value, multiple: props.multiple, placeholder: props.placeholder, disabled: props.disabled, clearable: props.allowClear, filterable: props.showSearch, onHbChange: (e) => props.onChange?.(e.detail), style: props.style }));
 }

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/Select.d.ts

@@ -23,6 +23,13 @@ export interface SelectProps {
     virtual?: boolean;
     onSearch?: (value: string) => void;
     onDropdownVisibleChange?: (open: boolean) => void;
+    /** antd fieldNames：自定义 option 字段名映射，如 { label:'nickName', value:'id' } */
+    fieldNames?: {
+        label?: string;
+        value?: string;
+        disabled?: string;
+        options?: string;
+    };
 }
 export declare function Select(props: SelectProps): React.JSX.Element;
 export declare namespace Select {

package/lib/components/Select.js

@@ -30,8 +30,32 @@ export function Select(props) {
     const { value, onChange, options, mode, placeholder, disabled, size, allowClear, showSearch, virtual, style, children, } = props;
     // antd maxTagCount：多选时折叠超出数量的 tag。映射到 hb-select 的 collapseTags + maxCollapseTags
     const maxTagCount = props.maxTagCount;
-    // 优先用 options prop；否则从 <Select.Option> children 提取
-    const resolvedOptions = options && options.length > 0 ? options : optionsFromChildren(children);
+    // antd fieldNames：自定义 option 字段名（如 {label:'nickName', value:'id'}）。
+    // hb-select 只认 {value,label,disabled}，必须按 fieldNames 重映射，否则下拉项无文案、值 undefined。
+    const fieldNames = props.fieldNames;
+    function mapOptions(opts) {
+        if (!opts || opts.length === 0)
+            return [];
+        if (!fieldNames)
+            return opts;
+        const ln = fieldNames.label || 'label';
+        const vn = fieldNames.value || 'value';
+        const dn = fieldNames.disabled || 'disabled';
+        const on = fieldNames.options; // OptGroup 子选项字段
+        const out = [];
+        for (const o of opts) {
+            if (on && Array.isArray(o[on])) {
+                for (const c of o[on])
+                    out.push({ ...c, value: c[vn], label: c[ln], disabled: c[dn] });
+            }
+            else {
+                out.push({ ...o, value: o[vn], label: o[ln], disabled: o[dn] });
+            }
+        }
+        return out;
+    }
+    // 优先用 options prop；否则从 <Select.Option> children 提取；再按 fieldNames 映射
+    const resolvedOptions = mapOptions(options && options.length > 0 ? options : optionsFromChildren(children));
     // 从 options 里查出选中项（单选返回单个 option，多选返回数组），对齐 antd onChange 第二参数
     const resolveOption = (val) => {
         if (!resolvedOptions || resolvedOptions.length === 0)

package/package.json

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