@huibo-ui/react-antd 1.0.11 → 1.0.12

package/lib/components/Form.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 /**
- * antd Form 兼容层（同步化版）。
+ * antd Form 兼容层（纯 div + React 受控实现）。
  *
- * 核心改造：hb-form 的 @Method 是异步(Promise)，但 antd FormInstance 的
- * getFieldsValue / resetFields / setFieldsValue 是同步。scrm 等业务大量
- * `formRef.current.getFieldsValue()` 同步取值，异步会拿到 Promise 而崩。
+ * 不再走 <HbForm>/<HbFormItem>（Shadow DOM slot）：
+ *   1) hb-form-item 的 labelCol/wrapperCol 栅格、labelAlign、必填星号等布局受 Shadow DOM
+ *      限制，弹窗/卡片内嵌表单极易错位；
+ *   2) hb-form 内部靠 querySelector('hb-input,...') 取子控件 modelValue，在纯 React 子树
+ *      （兼容层组件已是标准 antd 签名 value/onChange）下完全多余且脆弱。
  *
- * 解法：instance 内部维护同步 `values` 缓存，hbChange(onValuesChange) 实时更新；
- *   - 读方法同步返回缓存
- *   - 写方法同步更新缓存 + 异步调 hb-form @Method 落到子控件
- *   - validateFields / validate 保持异步（antd 本身也返回 Promise）
+ * 新方案对齐 antd 的 rc-field-form 思路：Form 持有 values/errors 的 React state，
+ * FormItem 通过 cloneElement 给唯一子控件注入 value/onChange/onChange（标准 antd 签名），
+ * 子控件作为真实 DOM 参与 flex 文档流。校验在 React 层跑，validateFields 返回 values。
  *
- * Form 用 forwardRef：`<Form ref={formRef}>` 拿到同步 FormInstance。
- * useForm 与 ref 共享同一份 createFormInstance 逻辑。
+ * FormInstance 保持 antd 语义：getFieldsValue/setFieldsValue/validateFields/resetFields。
  */
 export interface FormInstance {
     getFieldValue: (name: string) => any;
@@ -24,11 +24,22 @@ export interface FormInstance {
     resetFields: (nameList?: string[]) => void;
     submit: () => void;
     scrollToField: (name: string) => void;
-    getFieldsError: () => any[];
+    getFieldsError: () => Array<{
+        name: string;
+        errors: string[];
+    }>;
     getFieldError: (name: string) => string[];
-    /** scrm 兼容：handleReset = resetFields */
+    /** 内部：注册字段（FormItem 挂载时调用） */
+    __registerField?: (name: string, field: FieldControl) => () => void;
+    /** scrm 兼容 */
     handleReset?: () => void;
 }
+interface FieldControl {
+    setValue: (value: any) => void;
+    validate: () => Promise<string[]>;
+    setErrors: (errors: string[]) => void;
+    props: FormItemProps;
+}
 export interface FormProps {
     form?: FormInstance;
     initialValues?: Record<string, any>;
@@ -49,10 +60,11 @@ export interface FormProps {
     children?: React.ReactNode;
     style?: React.CSSProperties;
     className?: string;
+    name?: string;
     [key: string]: any;
 }
 type FormType = React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormInstance>> & {
-    Item: any;
+    Item: React.ComponentType<FormItemProps>;
     useForm: () => [FormInstance];
     useWatch: (namePath: string | string[], form?: FormInstance) => any;
     List: any;
@@ -75,7 +87,6 @@ export interface FormItemProps {
     };
     colon?: boolean;
     tooltip?: React.ReactNode;
-    /** antd noStyle：不额外包裹。hb-form-item 无对应概念，这里仅消费该 prop 不报错 */
     noStyle?: boolean;
     style?: React.CSSProperties;
     className?: string;

package/lib/components/Form.js

@@ -1,25 +1,53 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { HbForm, HbFormItem } from '@huibo-ui/react';
-function createFormInstance() {
-    let ceEl = null;
-    const pending = [];
-    const values = {};
-    const bind = (el) => {
-        ceEl = el;
-        if (el)
-            pending.splice(0).forEach(fn => fn());
-    };
-    const run = (fn) => {
-        if (ceEl)
-            return fn(ceEl);
-        return new Promise((resolve, reject) => {
-            pending.push(() => fn(ceEl).then(resolve, reject));
-        });
-    };
-    const inst = {
-        getFieldValue: name => values[name],
+// === 校验规则执行 ===
+async function runRules(value, rules = []) {
+    const errors = [];
+    for (const rule of rules) {
+        const label = rule.label || '该字段';
+        if (rule.required && (value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0))) {
+            errors.push(rule.message ?? `${label}不能为空`);
+            continue;
+        }
+        if (value === undefined || value === null || value === '')
+            continue;
+        if (rule.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value))) {
+            errors.push(rule.message ?? `${label}格式不正确`);
+        }
+        else if (rule.type === 'url' && !/^https?:\/\//.test(String(value))) {
+            errors.push(rule.message ?? `${label}必须是合法 URL`);
+        }
+        else if (rule.pattern) {
+            const re = typeof rule.pattern === 'string' ? new RegExp(rule.pattern) : rule.pattern;
+            if (!re.test(String(value)))
+                errors.push(rule.message ?? `${label}格式不正确`);
+        }
+        else if (rule.min !== undefined && typeof value === 'number' && value < rule.min) {
+            errors.push(rule.message ?? `${label}不能小于 ${rule.min}`);
+        }
+        else if (rule.max !== undefined && typeof value === 'number' && value > rule.max) {
+            errors.push(rule.message ?? `${label}不能大于 ${rule.max}`);
+        }
+        else if (rule.len !== undefined && String(value).length !== rule.len) {
+            errors.push(rule.message ?? `${label}长度必须为 ${rule.len}`);
+        }
+        else if (rule.validator) {
+            try {
+                await rule.validator(value, rules);
+            }
+            catch (e) {
+                errors.push(e?.message || rule.message || `${label}校验失败`);
+            }
+        }
+    }
+    return errors;
+}
+const FormContext = React.createContext(null);
+function createFormInstance(getState, api) {
+    return {
+        getFieldValue: name => getState().values[name],
         getFieldsValue: nameList => {
+            const { values } = getState();
             if (nameList && nameList.length > 0) {
                 const picked = {};
                 nameList.forEach(n => {
@@ -30,93 +58,190 @@ function createFormInstance() {
             }
             return { ...values };
         },
-        setFieldValue: (name, value) => {
-            values[name] = value;
-            void run(el => el.setFieldValueMethod(name, value));
-        },
+        setFieldValue: api.setFieldValue,
         setFieldsValue: vals => {
             if (vals)
-                Object.assign(values, vals);
-            void run(el => el.setFieldsValue(vals));
+                Object.keys(vals).forEach(n => api.setFieldValue(n, vals[n]));
         },
-        resetFields: nameList => {
-            if (nameList && nameList.length > 0) {
-                nameList.forEach(n => {
-                    delete values[n];
-                });
+        validateFields: api.validateFields,
+        validate: async (nameList) => {
+            try {
+                await api.validateFields(nameList);
+                return true;
             }
-            else {
-                Object.keys(values).forEach(k => {
-                    delete values[k];
-                });
+            catch {
+                return false;
             }
-            void run(el => el.resetFields(nameList));
-        },
-        validateFields: nameList => run(el => el.validateFields(nameList)).then(() => ({ ...values })),
-        validate: nameList => run(el => (nameList ? el.validate(nameList) : el.validate())),
-        submit: () => {
-            void run(async (el) => {
-                try {
-                    await el.validateFields();
-                }
-                catch {
-                    /* 校验失败由 FormItem 展示 */
-                }
-            });
         },
+        resetFields: api.resetFields,
+        submit: api.submit,
         scrollToField: () => { },
-        getFieldsError: () => [],
-        getFieldError: () => [],
-        handleReset: () => inst.resetFields(),
+        getFieldsError: () => Object.entries(getState().errors).map(([name, errors]) => ({ name, errors })),
+        getFieldError: name => getState().errors[name] || [],
+        __registerField: api.registerField,
+        handleReset: () => api.resetFields(),
     };
-    // 内部钩子：Form 组件挂
-    inst.__setRef = bind;
-    inst.__syncValue = (prop, value) => {
-        if (prop)
-            values[prop] = value;
-    };
-    return inst;
 }
-export const Form = React.forwardRef(function Form(props, ref) {
-    const { form: formProp, initialValues, onFinish, onFinishFailed, onValuesChange, layout, labelCol, children, style, className } = props;
-    const [innerForm] = React.useState(() => formProp || createFormInstance());
-    const form = formProp || innerForm;
-    React.useImperativeHandle(ref, () => form, [form]);
-    // initialValues 落到同步缓存 + hb-form（子控件）
-    React.useEffect(() => {
-        if (initialValues) {
-            void form.setFieldsValue(initialValues);
+const FormInner = (props, ref) => {
+    const { form: formProp, initialValues, onFinish, onFinishFailed, onValuesChange, layout = 'horizontal', labelCol, wrapperCol, labelAlign = 'right', requiredMark = true, children, style, className, } = props;
+    const [values, setValues] = React.useState(() => ({ ...(initialValues || {}) }));
+    const [errors, setErrors] = React.useState({});
+    const fieldsRef = React.useRef(new Map());
+    const stateRef = React.useRef({ values, errors });
+    stateRef.current = { values, errors };
+    const setFieldValueInternal = React.useCallback((name, value) => {
+        setValues(prev => {
+            const next = { ...prev, [name]: value };
+            if (onValuesChange)
+                onValuesChange({ [name]: value }, next);
+            return next;
+        });
+        // 有错误时尽早重校以清除
+        fieldsRef.current
+            .get(name)
+            ?.validate()
+            .then(ers => {
+            setErrors(prev => (prev[name] && prev[name].length ? { ...prev, [name]: ers } : prev));
+        });
+    }, [onValuesChange]);
+    const validateFieldsInternal = React.useCallback(async (nameList) => {
+        const names = nameList && nameList.length > 0 ? nameList : Array.from(fieldsRef.current.keys());
+        const newErrors = {};
+        await Promise.all(names.map(async (name) => {
+            const field = fieldsRef.current.get(name);
+            if (!field)
+                return;
+            const ers = await runRules(values[name], field.props.rules);
+            if (ers.length)
+                newErrors[name] = ers;
+            field.setErrors(ers);
+        }));
+        setErrors(prev => {
+            const merged = { ...prev };
+            names.forEach(n => {
+                if (n in newErrors)
+                    merged[n] = newErrors[n];
+                else
+                    delete merged[n];
+            });
+            return merged;
+        });
+        if (Object.keys(newErrors).length > 0) {
+            const err = { values, errorFields: Object.entries(newErrors).map(([name, errors]) => ({ name, errors })) };
+            throw err;
         }
+        const picked = {};
+        names.forEach(n => {
+            picked[n] = values[n];
+        });
+        return picked;
+    }, [values]);
+    const resetFieldsInternal = React.useCallback((nameList) => {
+        const names = nameList && nameList.length > 0 ? nameList : Array.from(fieldsRef.current.keys());
+        setValues(prev => {
+            const next = { ...prev };
+            names.forEach(n => {
+                next[n] = initialValues?.[n];
+            });
+            return next;
+        });
+        setErrors(prev => {
+            const next = { ...prev };
+            names.forEach(n => delete next[n]);
+            return next;
+        });
+        names.forEach(n => fieldsRef.current.get(n)?.setErrors([]));
+    }, [initialValues]);
+    const registerField = React.useCallback((name, field) => {
+        fieldsRef.current.set(name, field);
+        return () => {
+            fieldsRef.current.delete(name);
+        };
     }, []);
-    const labelPosition = layout === 'vertical' ? 'top' : layout === 'inline' ? 'left' : 'right';
-    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 元素实例上。
+    const api = React.useMemo(() => ({
+        setFieldValue: setFieldValueInternal,
+        validateFields: validateFieldsInternal,
+        resetFields: resetFieldsInternal,
+        registerField,
+        submit: () => {
+            validateFieldsInternal()
+                .then(vals => onFinish?.(vals))
+                .catch(errInfo => onFinishFailed?.(errInfo));
+        },
+    }), [setFieldValueInternal, validateFieldsInternal, resetFieldsInternal, registerField, onFinish, onFinishFailed]);
+    const instance = React.useMemo(() => createFormInstance(() => stateRef.current, api), [api]);
+    // 受控 form（外部 useForm 传入）需要把内部 api 桥接上去：让外部 instance 也能驱动本组件 state。
+    React.useImperativeHandle(ref, () => formProp || instance, [formProp, instance]);
+    // 外部 formProp 同步：把它的 get/set 重定向到本组件实现。
     React.useEffect(() => {
-        const el = elRef.current;
-        if (!el)
+        if (!formProp)
             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 }, {});
+        formProp.getFieldValue = (n) => stateRef.current.values[n];
+        formProp.getFieldsValue = (nl) => {
+            const v = stateRef.current.values;
+            if (nl && nl.length) {
+                const p = {};
+                nl.forEach(n => {
+                    if (n in v)
+                        p[n] = v[n];
+                });
+                return p;
+            }
+            return { ...v };
+        };
+        formProp.setFieldValue = setFieldValueInternal;
+        formProp.setFieldsValue = (vals) => vals && Object.keys(vals).forEach(n => setFieldValueInternal(n, vals[n]));
+        formProp.validateFields = validateFieldsInternal;
+        formProp.validate = async (nl) => {
+            try {
+                await validateFieldsInternal(nl);
+                return true;
+            }
+            catch {
+                return false;
+            }
         };
-    });
-    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 }));
-});
+        formProp.resetFields = resetFieldsInternal;
+        formProp.submit = api.submit;
+        formProp.getFieldsError = () => Object.entries(stateRef.current.errors).map(([name, errors]) => ({ name, errors }));
+        formProp.getFieldError = (n) => stateRef.current.errors[n] || [];
+        formProp.handleReset = () => resetFieldsInternal();
+    }, [formProp, setFieldValueInternal, validateFieldsInternal, resetFieldsInternal, api.submit]);
+    const ctxValue = React.useMemo(() => ({
+        values,
+        errors,
+        setFieldValue: setFieldValueInternal,
+        registerField,
+        layout,
+        labelColSpan: labelCol?.span,
+        wrapperColSpan: wrapperCol?.span,
+        labelAlign,
+        requiredMark,
+    }), [values, errors, setFieldValueInternal, registerField, layout, labelCol, wrapperCol, labelAlign, requiredMark]);
+    return (_jsx(FormContext.Provider, { value: ctxValue, children: _jsx("form", { onSubmit: e => {
+                e.preventDefault();
+                api.submit();
+            }, style: style, className: className, children: children }) }));
+};
+export const Form = React.forwardRef(FormInner);
 Form.useForm = function useForm() {
-    const [f] = React.useState(createFormInstance);
-    return [f];
+    const ref = React.useRef(null);
+    if (!ref.current) {
+        ref.current = {
+            getFieldValue: () => undefined,
+            getFieldsValue: () => ({}),
+            setFieldValue: () => { },
+            setFieldsValue: () => { },
+            validateFields: () => Promise.resolve({}),
+            validate: () => Promise.resolve(true),
+            resetFields: () => { },
+            submit: () => { },
+            scrollToField: () => { },
+            getFieldsError: () => [],
+            getFieldError: () => [],
+        };
+    }
+    return [ref.current];
 };
 Form.useWatch = function useWatch(namePath, form) {
     const name = Array.isArray(namePath) ? namePath.join('.') : namePath;
@@ -131,8 +256,95 @@ Form.useWatch = function useWatch(namePath, form) {
 Form.List = ({ children }) => children || null;
 Form.Provider = ({ children }) => children || null;
 export function FormItem(props) {
-    const { name, label, rules, required, labelCol, noStyle, children, style, className } = props;
-    const propName = Array.isArray(name) ? name.join('.') : name;
-    return (_jsx(HbFormItem, { prop: propName || '', label: typeof label === 'string' ? label : '', rules: rules || [], required: required, labelCol: labelCol?.span, style: style, className: className, children: children }));
+    const { name, label, rules, required, valuePropName = 'value', initialValue, labelCol, wrapperCol, colon = true, noStyle, style, className, children } = props;
+    const ctx = React.useContext(FormContext);
+    const propName = Array.isArray(name) ? name.join('.') : name || '';
+    const [localErrors, setLocalErrors] = React.useState([]);
+    const errors = (ctx?.errors[propName] ?? localErrors) || [];
+    const isRequired = required || rules?.some((r) => r.required);
+    const child = React.Children.only(children);
+    const labelColSpan = labelCol?.span ?? ctx?.labelColSpan;
+    // wrapperCol 支持 { span, offset }：offset 在 wrapper 左侧留出与 labelCol 等比的空间。
+    // 注意：|| 与 ?? 不可直接混用（babel parser 报错），用显式括号 + 层级判断。
+    const wrapperColObjSpan = typeof wrapperCol === 'object' ? wrapperCol.span : undefined;
+    const wrapperColNumSpan = typeof wrapperCol === 'number' ? wrapperCol : undefined;
+    const wrapperColSpan = wrapperColObjSpan ?? wrapperColNumSpan ?? ctx?.wrapperColSpan;
+    const wrapperColOffset = typeof wrapperCol === 'object' ? wrapperCol.offset : undefined;
+    const isHorizontalLayout = ctx?.layout === 'horizontal';
+    const hasLabel = label !== undefined;
+    // 注册字段（供 Form.validateFields 跑 rules）
+    React.useEffect(() => {
+        if (!ctx || !propName)
+            return;
+        const control = {
+            setValue: v => ctx.setFieldValue(propName, v),
+            validate: async () => {
+                const ers = await runRules(ctx.values[propName], rules);
+                setLocalErrors(ers);
+                return ers;
+            },
+            setErrors: ers => setLocalErrors(ers),
+            props,
+        };
+        return ctx.registerField(propName, control);
+    }, [propName, rules, ctx]);
+    // 给子控件注入 value/onChange（标准 antd 签名）
+    let clonedChild = child;
+    if (child && ctx && propName) {
+        const currentValue = ctx.values[propName] ?? initialValue;
+        clonedChild = React.cloneElement(child, {
+            [valuePropName]: currentValue,
+            onChange: (e) => {
+                // 兼容 React.ChangeEvent（e.target.value）、CustomEvent（e.detail）、裸值
+                let v;
+                if (e && e.target && valuePropName in e.target)
+                    v = e.target[valuePropName];
+                else if (e && 'detail' in e)
+                    v = e.detail;
+                else
+                    v = e;
+                ctx.setFieldValue(propName, v);
+                // 透传业务方自己写的 onChange
+                child.props.onChange?.(e);
+            },
+        });
+    }
+    if (noStyle) {
+        return _jsx(_Fragment, { children: clonedChild });
+    }
+    const isVertical = ctx?.layout === 'vertical';
+    // 水平布局：label 占 labelCol 宽度（右对齐），wrapper 占 wrapperCol 宽度。
+    // 关键：即使本 Item 无 label，只要 Form 设置了 labelCol，wrapper 仍要左移 label 宽度，
+    // 保持与有 label 的行齐平（antd 行为）。wrapperCol.offset 额外再左移。
+    const labelWidthPct = labelColSpan != null ? `${(labelColSpan / 24) * 100}%` : undefined;
+    const wrapperWidthPct = wrapperColSpan != null ? `${(wrapperColSpan / 24) * 100}%` : undefined;
+    // 无 label 时：用空 label 占位（保持缩进）；有 offset 时叠加
+    const offsetPct = wrapperColOffset != null ? `${(wrapperColOffset / 24) * 100}%` : undefined;
+    const showLabelPlaceholder = isHorizontalLayout && !hasLabel && labelWidthPct != null;
+    if (isVertical) {
+        return (_jsxs("div", { style: { marginBottom: 8, ...style }, className: className, children: [hasLabel && (_jsxs("div", { style: { fontSize: 14, color: 'var(--hb-color-text, rgba(0,0,0,0.88))', marginBottom: 8 }, children: [isRequired && ctx?.requiredMark !== false && _jsx("span", { style: { color: '#ff4d4f', marginRight: 4 }, children: "*" }), label] })), _jsx("div", { children: clonedChild }), errors.length > 0 && _jsx("div", { style: { color: '#ff4d4f', fontSize: 12, lineHeight: '20px', marginTop: 4 }, children: errors[0] })] }));
+    }
+    if (!isHorizontalLayout) {
+        // inline / 默认：纯堆叠
+        return (_jsxs("div", { style: { display: 'inline-flex', alignItems: 'center', marginRight: 16, marginBottom: 8, ...style }, className: className, children: [hasLabel && (_jsxs("span", { style: { fontSize: 14, color: 'var(--hb-color-text, rgba(0,0,0,0.88))', marginRight: 8 }, children: [isRequired && ctx?.requiredMark !== false && _jsx("span", { style: { color: '#ff4d4f', marginRight: 4 }, children: "*" }), label] })), _jsx("div", { children: clonedChild }), errors.length > 0 && _jsx("div", { style: { color: '#ff4d4f', fontSize: 12, marginLeft: 8 }, children: errors[0] })] }));
+    }
+    // 水平布局：label 列 + wrapper 列（flex，align-items 顶部对齐，label 用 line-height 与控件首行齐平）
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'flex-start',
+            marginBottom: 24,
+            ...style,
+        }, className: className, children: [(hasLabel || showLabelPlaceholder) && (_jsx("div", { style: {
+                    flexGrow: 0,
+                    flexShrink: 0,
+                    width: labelWidthPct,
+                    textAlign: ctx?.labelAlign === 'left' ? 'left' : 'right',
+                    paddingRight: 8,
+                    fontSize: 14,
+                    color: 'var(--hb-color-text, rgba(0,0,0,0.88))',
+                    lineHeight: '32px',
+                    minHeight: 32,
+                }, children: hasLabel && (_jsxs(_Fragment, { children: [isRequired && ctx?.requiredMark !== false && _jsx("span", { style: { color: '#ff4d4f', fontFamily: 'SimSun, sans-serif', marginRight: 4 }, children: "*" }), label, colon && typeof label === 'string' ? ':' : ''] })) })), _jsxs("div", { style: { flex: 1, minWidth: 0, width: wrapperWidthPct, marginLeft: offsetPct }, children: [clonedChild, errors.length > 0 && _jsx("div", { style: { color: '#ff4d4f', fontSize: 12, lineHeight: '20px', marginTop: 4 }, children: errors[0] })] })] }));
 }
 Form.Item = FormItem;

package/lib/components/Image.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbImage } from '@huibo-ui/react';
 export function Image(props) {
-    return (_jsx(HbImage, { src: props.src || '', width: props.width ? String(props.width) : undefined, height: props.height ? String(props.height) : undefined, preview: props.preview, alt: props.alt, style: props.style }));
+    return (_jsx(HbImage, { src: props.src || '', width: props.width ? String(props.width) : undefined, height: props.height ? String(props.height) : undefined, preview: props.preview ?? true, alt: props.alt, style: props.style }));
 }

package/lib/components/Input.js

@@ -2,7 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HbInput } from '@huibo-ui/react';
 export function Input(props) {
     const { value, onChange, onInput, placeholder, disabled, readOnly, size, allowClear, showCount, maxLength, prefix, suffix, addonBefore, addonAfter, type, style, className, id, name, } = props;
-    return (_jsx(HbInput, { modelValue: value ?? '', placeholder: placeholder, disabled: disabled, readonly: readOnly, size: size === 'middle' ? 'default' : size, clearable: allowClear, showWordLimit: showCount, maxlength: maxLength, type: type === 'password' ? 'password' : 'text', inputId: id, name: name, style: style, 
+    // type 透传：textarea / password 都要保留，其余按 text。
+    const resolvedType = type === 'password' ? 'password' : type === 'textarea' ? 'textarea' : 'text';
+    return (_jsx(HbInput, { modelValue: value ?? '', placeholder: placeholder, disabled: disabled, readonly: readOnly, size: size === 'middle' ? 'default' : size, clearable: allowClear, showWordLimit: showCount, maxlength: maxLength, type: resolvedType, rows: props.rows, resize: props.resize, autosize: props.autoSize, 
+        // antd prefix/suffix 是 ReactNode，hb-input 的 prefixIcon/suffixIcon 只接受 string，
+        // 取文本内容映射（图标类 prefix 暂不支持，文字 prefix 如 ￥ 生效）。
+        prefixIcon: typeof prefix === 'string' ? prefix : '', suffixIcon: typeof suffix === 'string' ? suffix : '', addonBefore: typeof addonBefore === 'string' ? addonBefore : '', addonAfter: typeof addonAfter === 'string' ? addonAfter : '', inputId: id, name: name, showPassword: props.showPassword, style: style, 
         // antd onChange 接收 React.ChangeEvent，huibo hbChange 接收 CustomEvent<string>
         onHbChange: (e) => {
             if (onChange)
@@ -13,13 +18,29 @@ export function Input(props) {
         } }));
 }
 Input.TextArea = function TextArea(props) {
-    return _jsx(Input, { ...props, type: "textarea" });
+    // antd TextArea：autoSize 时锁定高度（不可拖拽），否则默认允许垂直拖拽（resize:vertical）。
+    const resize = props.autoSize ? 'none' : 'vertical';
+    return _jsx(Input, { ...props, type: "textarea", resize: resize });
 };
 /**
- * Input.Password —— 复用 Input，通过 type="password"（hb-input 的 showPassword 视觉由其内部决定）。
+ * Input.Password —— 带眼睛图标切换显示/隐藏（对齐 antd）。
+ *
+ * 修复前：用 suffix={emoji} 自渲染眼睛图标，但 hb-input 的 suffixIcon 不支持 onClick，
+ * 图标只能看不能点，无法切换显示/隐藏。
+ *
+ * 现在：hb-input 原生支持 type="password" + showPassword，内部已实现可点击的眼睛切换
+ * （见 Input.tsx 的 .hb-input__password，onClick→togglePasswordVisible，图标随状态切换
+ * 睁眼/闭眼 SVG）。这里只需透传 showPassword=true 即可获得与 antd 一致的切换交互，
+ * 不再自渲染 emoji suffix。
+ *
+ * visibilityToggle=false 时关闭切换（对齐 antd visibilityToggle 属性）。
  */
 Input.Password = function Password(props) {
-    return _jsx(Input, { ...props, type: "password" });
+    const visibilityToggle = props.visibilityToggle !== false;
+    // 透传给 Input：type 固定 password；当 visibilityToggle 为 false 时不开启底层切换。
+    // 注意 Input.Password 不应接受外部 suffix（否则会与眼睛图标冲突），这里不透传 suffix。
+    const { suffix: _omitSuffix, ...rest } = props;
+    return _jsx(Input, { ...rest, type: "password", showPassword: visibilityToggle });
 };
 Input.Search = function Search(props) {
     const { onSearch, enterButton, ...rest } = props;

package/lib/components/InputNumber.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare function InputNumber(props: {
     value?: number;
-    onChange?: (value: number) => void;
+    onChange?: (value: number | null) => void;
     min?: number;
     max?: number;
     step?: number;

package/lib/components/InputNumber.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbInputNumber } from '@huibo-ui/react';
 export function InputNumber(props) {
-    return (_jsx(HbInputNumber, { modelValue: props.value ?? 0, min: props.min, max: props.max, step: props.step, precision: props.precision, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, placeholder: props.placeholder, style: props.style, onHbChange: (e) => props.onChange?.(e.detail) }));
+    // value 可能是 null/undefined/NaN（Form 初始或 InputNumber 内部 bug）。
+    // 传给 hb-input-number 的 modelValue 必须是合法 number 或 undefined，
+    // 传 null/NaN 会让内部 currentValue 变 NaN，点击加减按钮又 emit NaN 污染 Form。
+    const safeValue = typeof props.value === 'number' && !Number.isNaN(props.value) ? props.value : props.defaultValue;
+    // ⚠️ min/max/step/precision 不能透传 undefined：React 兼容层 attachProps 会执行
+    // node.step = undefined，覆盖 hb-input-number 的 @Prop 默认值（step 默认 1），
+    // 导致 increase 里 base + this.step = 3 + undefined = NaN，点加减号 emit NaN。
+    // 故这些数值 prop 必须给 antd 语义的默认值兜底。
+    return (_jsx(HbInputNumber, { modelValue: safeValue, min: props.min ?? -Infinity, max: props.max ?? Infinity, step: props.step ?? 1, precision: props.precision, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, controlsPosition: "right", placeholder: props.placeholder, style: props.style, onHbChange: (e) => {
+            // 兜底：hb-input-number 在点击加减按钮等路径下会 emit NaN，
+            // 这里转成 null（antd 语义：空值），避免污染 Form 字段。
+            const v = e.detail;
+            const out = typeof v === 'number' && !Number.isNaN(v) ? v : null;
+            props.onChange?.(out);
+        } }));
 }

package/lib/components/Layout.d.ts

@@ -26,7 +26,7 @@ export declare namespace Layout {
     var Footer: ({ children, style, className }: any) => React.JSX.Element;
 }
 export declare function Row(props: {
-    gutter?: number | number[];
+    gutter?: number | [number, number];
     justify?: string;
     align?: string;
     children?: React.ReactNode;