@huibo-ui/react-antd 1.0.10 → 1.0.12

package/lib/components/Form.js

@@ -1,111 +1,247 @@
-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],
-        getFieldsValue: (nameList) => {
+// === 校验规则执行 ===
+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 => { if (n in values)
-                    picked[n] = values[n]; });
+                nameList.forEach(n => {
+                    if (n in values)
+                        picked[n] = values[n];
+                });
                 return picked;
             }
             return { ...values };
         },
-        setFieldValue: (name, value) => {
-            values[name] = value;
-            void run(el => el.setFieldValueMethod(name, value));
-        },
-        setFieldsValue: (vals) => {
+        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;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        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 };
         };
-    });
-    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.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;
+            }
+        };
+        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;
@@ -117,11 +253,98 @@ Form.useWatch = function useWatch(namePath, form) {
     }, [form, name]);
     return val;
 };
-Form.List = (({ children }) => children || null);
-Form.Provider = (({ children }) => children || null);
+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;

package/lib/components/Layout.js

@@ -31,9 +31,13 @@ Layout.Sider = function Sider({ children, style, className, collapsed, theme, wi
 };
 /**
  * Content —— 主内容区。flex:1 撑满剩余空间。
+ *
+ * 对齐 antd .ant-layout-content（flex: auto + min-height: 0）：
+ * 当消费方传入 height:'auto'（常见脆弱写法）时，flex 容器仍会基于剩余
+ * 空间分配高度，避免子元素 height:100% 因父级塌缩而失效（如全屏背景图）。
  */
 Layout.Content = function Content({ children, style, className }) {
-    return (_jsx("div", { style: { flex: 1, minWidth: 0, minHeight: 0, ...style }, className: className, children: children }));
+    return (_jsx("div", { style: { flex: '1 1 auto', minWidth: 0, minHeight: 0, ...style }, className: className, children: children }));
 };
 /**
  * Footer —— 页脚。固定高度。
@@ -41,27 +45,38 @@ Layout.Content = function Content({ children, style, className }) {
 Layout.Footer = function Footer({ children, style, className }) {
     return (_jsx("div", { style: { flexShrink: 0, ...style }, className: className, children: children }));
 };
+// gutter 通过 React context 下发给每个 Col（antd 模型：gutter = Col 的 padding，而非 Row 的 gap）。
+// 关键：用 gap + 百分比宽度会溢出换行（3×33.33% + 2×gap > 100%），导致栅格错位。
+// 改用 antd 的「Row 负 margin + Col padding」模型：Col 宽度是百分比且 box-sizing:border-box，
+// gutter 由 Col 两侧 padding 提供，Row 用等量负 margin 抵消两端 padding，宽度永远精确。
+const RowGutterContext = React.createContext({});
 export function Row(props) {
-    const gutter = Array.isArray(props.gutter) ? props.gutter[0] : props.gutter;
-    const gap = gutter ? `${gutter}px` : undefined;
+    const rawGutter = props.gutter;
+    const horizontal = Array.isArray(rawGutter) ? rawGutter[0] : typeof rawGutter === 'number' ? rawGutter : 0;
+    const vertical = Array.isArray(rawGutter) ? rawGutter[1] : typeof rawGutter === 'number' ? rawGutter : 0;
+    const gutterCtx = React.useMemo(() => ({ horizontal, vertical }), [horizontal, vertical]);
     const justifyMap = {
-        start: 'flex-start',
-        end: 'flex-end',
-        center: 'center',
+        'start': 'flex-start',
+        'end': 'flex-end',
+        'center': 'center',
         'space-between': 'space-between',
         'space-around': 'space-around',
     };
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap,
-            justifyContent: props.justify ? justifyMap[props.justify] || props.justify : undefined,
-            alignItems: props.align,
-            ...props.style,
-        }, className: props.className, children: props.children }));
+    return (_jsx(RowGutterContext.Provider, { value: gutterCtx, children: _jsx("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                // 负 margin 抵消首尾 Col 的 padding（antd 行为），让 Row 仍贴齐父容器两边。
+                marginLeft: horizontal ? `${-horizontal / 2}px` : undefined,
+                marginRight: horizontal ? `${-horizontal / 2}px` : undefined,
+                rowGap: vertical ? `${vertical}px` : undefined,
+                justifyContent: props.justify ? justifyMap[props.justify] || props.justify : undefined,
+                alignItems: props.align,
+                ...props.style,
+            }, className: props.className, children: props.children }) }));
 }
-// Col：用 CSS 百分比宽度实现栅格，支持响应式 xl/lg/md/sm/xs
+// Col：百分比宽度（box-sizing:border-box），两侧 padding 提供 gutter；支持响应式 + offset。
 export function Col(props) {
+    const gutter = React.useContext(RowGutterContext);
     // 响应式：取当前视口匹配的最大断点（xl>lg>md>sm>xs），都没有则用 span（默认 24）
     const resolveSpan = () => {
         if (typeof window !== 'undefined') {
@@ -84,5 +99,15 @@ export function Col(props) {
     const span = resolveSpan();
     const pct = (span / 24) * 100;
     const offsetPct = props.offset ? (props.offset / 24) * 100 : 0;
-    return (_jsx("div", { style: { width: `${pct}%`, marginLeft: offsetPct ? `${offsetPct}%` : undefined, boxSizing: 'border-box', ...props.style }, className: props.className, children: props.children }));
+    const padH = gutter.horizontal ? `${gutter.horizontal / 2}px` : undefined;
+    // 垂直 gutter 由 Row 的 rowGap 提供，Col 不再加垂直 padding（否则与 rowGap 双重叠加，
+    // 导致 Row 整体偏高，且首/末行出现多余上下空白）。
+    return (_jsx("div", { style: {
+            width: `${pct}%`,
+            paddingLeft: padH,
+            paddingRight: padH,
+            marginLeft: offsetPct ? `${offsetPct}%` : undefined,
+            boxSizing: 'border-box',
+            ...props.style,
+        }, className: props.className, children: props.children }));
 }