@huibo-ui/react-antd 1.0.4 → 1.0.6

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/DatePicker.js

@@ -1,15 +1,73 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbDatePicker, HbDateRangePicker } from '@huibo-ui/react';
+/**
+ * antd DatePicker 兼容层。
+ *
+ * ⚠️ dayjs 互操作（已知限制）：
+ *   antd5 DatePicker 以 dayjs 对象作为 value/onChange 第一参数。huibo hb-date-picker
+ *   内部只认 string | Date。本层做了输入侧兼容（dayjs/moment-like 带 .toDate/.format
+ *   的值会被归一化为 Date 传入 core），输出侧 onChange 返回 core 的原始值（string|Date）
+ *   + 正确格式化的 dateString。若业务代码对 onChange 的 value 调 .format()（dayjs 用法），
+ *   需自行包一层或后续引入 dayjs 做完整往返（dayjs 仅在消费方 antd5 侧可得，本包不硬依赖）。
+ */
+/** 支持 YYYY MM DD HH mm ss 的最小格式化（与 core formatDate 对齐） */
+function fmtDate(date, fmt) {
+    const p = (n) => String(n).padStart(2, '0');
+    return fmt
+        .replace('YYYY', String(date.getFullYear()))
+        .replace('MM', p(date.getMonth() + 1))
+        .replace('DD', p(date.getDate()))
+        .replace('HH', p(date.getHours()))
+        .replace('mm', p(date.getMinutes()))
+        .replace('ss', p(date.getSeconds()));
+}
+/** 把任意输入值归一化为 core 可接受的 string | Date | undefined */
+function normalizeValue(v) {
+    if (v === null || v === undefined || v === '')
+        return undefined;
+    if (v instanceof Date)
+        return v;
+    if (typeof v === 'string' || typeof v === 'number')
+        return v;
+    // dayjs / moment-like
+    if (typeof v.toDate === 'function')
+        return v.toDate();
+    if (typeof v.format === 'function')
+        return v.format('YYYY-MM-DD HH:mm:ss');
+    return v;
+}
+/** core 输出（string|Date|undefined）→ [value, dateString] */
+function toOutgoing(raw, fmt) {
+    if (raw === undefined || raw === null || raw === '')
+        return [undefined, ''];
+    const d = raw instanceof Date ? raw : new Date(raw);
+    const ds = isNaN(d.getTime()) ? '' : fmtDate(d, fmt);
+    return [raw, ds];
+}
 export function DatePicker(props) {
-    return (_jsx(HbDatePicker, { modelValue: props.value, type: props.picker || 'date', format: props.format, clearable: props.allowClear, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, placeholder: props.placeholder, presets: props.presets, showTime: props.showTime, status: props.status, disabledDate: props.disabledDate, style: props.style, className: props.className, onHbChange: (e) => props.onChange?.(e.detail, '') }));
+    // showTime 且未指定 format 时，默认带时分秒（对齐 antd）
+    const defaultFmt = props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+    const fmt = props.format || defaultFmt;
+    // core type 仅支持 date/month/year，week/quarter 退化为 date
+    const picker = props.picker;
+    const coreType = picker === 'month' || picker === 'year' ? picker : 'date';
+    return (_jsx(HbDatePicker, { modelValue: normalizeValue(props.value), type: coreType, format: fmt, clearable: props.allowClear, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, placeholder: props.placeholder, presets: props.presets, showTime: props.showTime, status: props.status, disabledDate: props.disabledDate, style: props.style, className: props.className, onHbChange: (e) => {
+            const [val, ds] = toOutgoing(e?.detail, fmt);
+            props.onChange?.(val, ds);
+        } }));
 }
 /**
  * DatePicker.RangePicker —— 范围选择器，走 hb-date-range-picker。
  * value 为 [start, end] 数组；onChange 回调对齐 antd：(dates, [startStr, endStr])。
  */
 DatePicker.RangePicker = function RangePicker(props) {
-    return (_jsx(HbDateRangePicker, { modelValue: props.value || [], format: props.format, clearable: props.allowClear, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, showTime: props.showTime, presets: props.presets, status: props.status, disabledDate: props.disabledDate, style: props.style, className: props.className, onHbChange: (e) => {
+    const defaultFmt = props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+    const fmt = props.format || defaultFmt;
+    const norm = (v) => (Array.isArray(v) ? v.map(normalizeValue) : []);
+    return (_jsx(HbDateRangePicker, { modelValue: norm(props.value || []), format: fmt, clearable: props.allowClear, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, showTime: props.showTime, presets: props.presets, status: props.status, disabledDate: props.disabledDate, style: props.style, className: props.className, onHbChange: (e) => {
             const detail = e?.detail || [];
-            props.onChange?.(detail, [detail[0]?.format?.() || '', detail[1]?.format?.() || '']);
+            const [s, se] = toOutgoing(detail[0], fmt);
+            const [e2, ee] = toOutgoing(detail[1], fmt);
+            props.onChange?.([s, e2], [se, ee]);
         } }));
 };

package/lib/components/Descriptions.d.ts

@@ -1,12 +1,38 @@
 import React from 'react';
-export declare function Descriptions(props: {
+/**
+ * antd Descriptions 兼容层（自包含原生 HTML 渲染）。
+ *
+ * 为什么不用 core 的 hb-descriptions：
+ *   1. hb-descriptions 的 item.value 只接受 string，但 antd 业务里描述项的值
+ *      极常见是 React 节点（状态 Tag、链接、格式化金额），传 string 会丢内容。
+ *   2. hb-descriptions 不渲染 slotted children，antd4 声明式 <Descriptions.Item>
+ *      写法完全无效。
+ *   3. hb-descriptions 不认 antd5 的 items 数组 prop（曾导致 scrm 详情页全空）。
+ * 故本层用纯 React 渲染（light DOM），支持 items + children 两种写法、完整 React 节点。
+ * 样式内联，对齐 antd 视觉（bordered 表格 / 默认带冒号分行）。
+ */
+export interface DescriptionsItem {
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    span?: number;
+}
+export interface DescriptionsProps {
     title?: React.ReactNode;
     bordered?: boolean;
     column?: number;
+    colon?: boolean;
     layout?: 'horizontal' | 'vertical';
+    size?: 'default' | 'middle' | 'small';
+    items?: DescriptionsItem[];
+    /** antd contentStyle：作用到每个值单元格 */
+    contentStyle?: React.CSSProperties;
+    /** antd labelStyle：作用到每个标签单元格 */
+    labelStyle?: React.CSSProperties;
     children?: React.ReactNode;
     style?: React.CSSProperties;
-}): React.JSX.Element;
+    className?: string;
+}
+export declare function Descriptions(props: DescriptionsProps): React.JSX.Element;
 export declare namespace Descriptions {
     var Item: any;
 }

package/lib/components/Descriptions.js

@@ -1,13 +1,84 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HbDescriptions } from '@huibo-ui/react';
+import React from 'react';
+const SPAN = (v) => {
+    const n = Number(v);
+    return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
+};
+/** 从 antd4 声明式 <Descriptions.Item> children 收集为 items 数组 */
+function itemsFromChildren(children) {
+    const out = [];
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child))
+            return;
+        const p = child.props || {};
+        // DescriptionItem 占位组件不实际渲染，但其 props.label/children/span 仍可被父级读取
+        if (p.label !== undefined || p.children !== undefined) {
+            out.push({ label: p.label, value: p.children, span: SPAN(p.span) });
+        }
+    });
+    return out;
+}
 export function Descriptions(props) {
-    return _jsx(HbDescriptions, { title: typeof props.title === 'string' ? props.title : '', border: props.bordered, column: props.column ?? 3, direction: props.layout, style: props.style, children: props.children });
+    const { title, bordered = false, column = 3, colon = true, items, contentStyle, labelStyle, children, style, className, } = props;
+    const resolved = items && items.length > 0
+        ? items.map(it => ({ label: it.label, value: it.children, span: SPAN(it.span) }))
+        : itemsFromChildren(children);
+    const cols = column > 0 ? Math.floor(column) : 3;
+    // 按列数把 items 切成行（span 累计超过列数则换行），用于 bordered 表格渲染
+    const rows = [];
+    let cur = [];
+    let used = 0;
+    for (const it of resolved) {
+        if (used > 0 && used + it.span > cols) {
+            rows.push(cur);
+            cur = [];
+            used = 0;
+        }
+        cur.push(it);
+        used += it.span;
+    }
+    if (cur.length)
+        rows.push(cur);
+    const BORDER = '1px solid #f0f0f0';
+    const LABEL_BG = '#fafafa';
+    const LABEL_COLOR = 'rgba(0,0,0,0.88)';
+    const VALUE_COLOR = 'rgba(0,0,0,0.88)';
+    const PAD = 16;
+    const titleNode = title != null ? (_jsx("div", { style: { fontSize: 16, fontWeight: 500, color: LABEL_COLOR, marginBottom: 12 }, children: title })) : null;
+    let body;
+    if (bordered) {
+        body = (_jsx("table", { style: { borderCollapse: 'collapse', width: '100%', tableLayout: 'fixed', fontSize: 14 }, children: _jsx("tbody", { children: rows.map((row, ri) => (_jsx("tr", { children: row.flatMap((it, ci) => [
+                        _jsxs("th", { style: {
+                                textAlign: 'left',
+                                width: `${(100 / (cols * 2)).toFixed(2)}%`,
+                                padding: PAD,
+                                background: LABEL_BG,
+                                border: BORDER,
+                                color: 'rgba(0,0,0,0.88)',
+                                fontWeight: 400,
+                                verticalAlign: 'top',
+                                ...(labelStyle || {}),
+                            }, children: [it.label, colon ? '：' : ''] }, `l${ci}`),
+                        _jsx("td", { colSpan: it.span > 1 ? it.span * 2 - 1 : undefined, style: { padding: PAD, border: BORDER, color: VALUE_COLOR, verticalAlign: 'top', wordBreak: 'break-word', ...(contentStyle || {}) }, children: it.value }, `v${ci}`),
+                    ]) }, ri))) }) }));
+    }
+    else {
+        body = (_jsx("div", { style: { display: 'grid', gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }, children: resolved.map((it, i) => (_jsxs("div", { style: {
+                    gridColumn: it.span > 1 ? `span ${it.span}` : undefined,
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'baseline',
+                    padding: `${PAD}px ${PAD}px ${PAD}px 0`,
+                    borderBottom: BORDER,
+                    ...(contentStyle || {}),
+                }, children: [_jsxs("span", { style: { flex: 'none', maxWidth: '40%', color: 'rgba(0,0,0,0.45)', marginRight: 8, ...(labelStyle || {}) }, children: [it.label, colon ? '：' : ''] }), _jsx("span", { style: { flex: 'auto', minWidth: 0, color: VALUE_COLOR }, children: it.value })] }, i))) }));
+    }
+    return (_jsxs("div", { className: className, style: style, children: [titleNode, body] }));
 }
 /**
- * Descriptions.Item —— antd 声明式用法。
- * huibo hb-descriptions 无对齐的 item 子组件，这里渲染成一行「label: children」，
- * 保证内容可见、不崩溃（视觉与原生略有差异）。
+ * Descriptions.Item —— antd4 声明式用法占位。
+ * 自身不渲染（返回 null），由父 Descriptions 通过 React.Children 收集为 items。
  */
-Descriptions.Item = function DescriptionItem(props) {
-    return (_jsxs("div", { style: { display: 'flex', gap: 8, padding: '4px 0' }, children: [props.label != null && (_jsx("span", { style: { color: 'rgba(0,0,0,0.45)', minWidth: 80 }, children: props.label })), _jsx("span", { children: props.children })] }));
+Descriptions.Item = function DescriptionItem(_props) {
+    return null;
 };

package/lib/components/Form.js

@@ -76,14 +76,32 @@ export const Form = React.forwardRef(function Form(props, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const labelPosition = layout === 'vertical' ? 'top' : layout === 'inline' ? 'left' : 'right';
-    const refCallback = (el) => { form.__setRef?.(el); };
-    return (_jsx(HbForm, { ref: refCallback, initialValues: initialValues, onFinish: onFinish, onFinishFailed: onFinishFailed ? (errors) => onFinishFailed({ errorFields: errors, values: {} }) : undefined, onValuesChange: (info) => {
+    const elRef = React.useRef(null);
+    const refCallback = (el) => {
+        elRef.current = el;
+        form.__setRef?.(el);
+    };
+    // ⚠️ Stencil React 包装器（@huibo-ui/react）会把所有 onXxx prop 当作「事件监听器」：
+    //   onFinish → addEventListener('finish', …)，但 hb-form 把 onFinish 当「函数属性」直接调用、
+    //   并不派发 'finish' 事件 → 走 JSX prop 会被挂成永不触发的监听器，hb-form 的 this.onFinish 恒为 undefined。
+    // 故 onFinish / onFinishFailed / onValuesChange 必须直接设在 hb-form 元素实例上。
+    React.useEffect(() => {
+        const el = elRef.current;
+        if (!el)
+            return;
+        el.onFinish = onFinish;
+        el.onFinishFailed = onFinishFailed
+            ? (errors) => onFinishFailed({ errorFields: errors, values: {} })
+            : undefined;
+        el.onValuesChange = (info) => {
             const prop = info?.prop;
             if (prop)
                 form.__syncValue?.(prop, info.value);
             if (onValuesChange)
                 onValuesChange({ [prop]: info?.value }, {});
-        }, 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, 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/Modal.js

@@ -6,7 +6,10 @@ export function Modal(props) {
     // 默认 footer：OK/Cancel 按钮（对齐 antd 默认行为）。footer=null 时无底部。
     const defaultFooter = (_jsxs("div", { style: { textAlign: 'right', marginTop: 16, display: 'flex', justifyContent: 'flex-end', gap: 8 }, children: [_jsx("button", { type: "button", onClick: (e) => onCancel?.(e), style: { padding: '4px 15px', height: 32, borderRadius: 6, border: '1px solid #d9d9d9', background: '#fff', cursor: 'pointer' }, children: cancelText || '取消' }), _jsx("button", { type: "button", disabled: confirmLoading, onClick: (e) => onOk?.(e), style: { padding: '4px 15px', height: 32, borderRadius: 6, border: 'none', background: 'var(--hb-color-primary, #ff6700)', color: '#fff', cursor: 'pointer' }, children: confirmLoading ? '加载中...' : (okText || '确定') })] }));
     const resolvedFooter = footer === undefined ? defaultFooter : footer;
-    return (_jsxs(HbDialog, { modelValue: open || false, title: typeof title === 'string' ? title : '', width: width ? String(width) : undefined, closeOnClickModal: maskClosable, closeOnPressEscape: keyboard, destroyOnClose: destroyOnClose, showClose: true, onHbClose: () => { if (onCancel)
+    // antd width 默认 520（number）；hb-dialog width 是 string，number 必须补 px 否则是非法 CSS 被忽略
+    const resolvedWidth = width == null ? undefined : typeof width === 'number' ? `${width}px` : String(width);
+    const wrapClassName = props.wrapClassName;
+    return (_jsxs(HbDialog, { modelValue: open || false, title: typeof title === 'string' ? title : '', width: resolvedWidth, closeOnClickModal: maskClosable, closeOnPressEscape: keyboard, destroyOnClose: destroyOnClose, showClose: true, style: props.style, className: [props.className, wrapClassName].filter(Boolean).join(' ') || undefined, onHbClose: () => { if (onCancel)
             onCancel({}); }, children: [children, resolvedFooter !== null && resolvedFooter !== undefined ? resolvedFooter : null] }));
 }
 function imperative(opts) {

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

@@ -28,11 +28,46 @@ function SelectOptionComponent(_props) {
 }
 export function Select(props) {
     const { value, onChange, options, mode, placeholder, disabled, size, allowClear, showSearch, virtual, style, children, } = props;
-    // 优先用 options prop；否则从 <Select.Option> children 提取
-    const resolvedOptions = options && options.length > 0 ? options : optionsFromChildren(children);
-    return (_jsx(HbSelect, { modelValue: value, options: resolvedOptions, multiple: mode === 'multiple' || mode === 'tags', placeholder: placeholder, disabled: disabled, size: size === 'middle' ? 'default' : size, clearable: allowClear, filterable: showSearch, virtual: virtual, style: style, onHbChange: (e) => {
+    // antd maxTagCount：多选时折叠超出数量的 tag。映射到 hb-select 的 collapseTags + maxCollapseTags
+    const maxTagCount = props.maxTagCount;
+    // 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)
+            return undefined;
+        if (Array.isArray(val)) {
+            return val.map(x => resolvedOptions.find(o => o.value === x)).filter(o => o !== undefined);
+        }
+        return resolvedOptions.find(o => o.value === val) || undefined;
+    };
+    return (_jsx(HbSelect, { modelValue: value, options: resolvedOptions, multiple: mode === 'multiple' || mode === 'tags', placeholder: placeholder, disabled: disabled, size: size === 'middle' ? 'default' : size, clearable: allowClear, filterable: showSearch, virtual: virtual, collapseTags: maxTagCount != null || mode === 'tags', maxCollapseTags: maxTagCount, style: style, onHbChange: (e) => {
             if (onChange)
-                onChange(e.detail, undefined);
+                onChange(e.detail, resolveOption(e.detail));
         }, onHbVisibleChange: (e) => {
             if (props.onDropdownVisibleChange)
                 props.onDropdownVisibleChange(e.detail);

package/package.json

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