@huibo-ui/react-antd 1.0.1 → 1.0.3

package/lib/components/Button.d.ts

@@ -8,7 +8,10 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     loading?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
+    /** antd htmlType：submit/reset/button。转发到 hb-button 内部 <button type>，触发表单提交。 */
+    htmlType?: 'button' | 'submit' | 'reset';
     children?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    [key: string]: any;
 }
-export declare function Button({ type, size, danger, block, loading, disabled, icon, children, onClick, ...rest }: ButtonProps): React.JSX.Element;
+export declare function Button({ type, size, danger, block, loading, disabled, icon, htmlType, children, onClick, ...rest }: ButtonProps): React.JSX.Element;

package/lib/components/Button.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { HbButton } from '@huibo-ui/react';
-export function Button({ type, size, danger, block, loading, disabled, icon, children, onClick, ...rest }) {
+export function Button({ type, size, danger, block, loading, disabled, icon, htmlType, children, onClick, ...rest }) {
     const huiboType = danger ? 'danger' : type || 'default';
     const huiboSize = size === 'middle' ? 'default' : size || 'default';
-    return (_jsxs(HbButton, { type: huiboType, size: huiboSize, disabled: disabled, loading: loading, onClick: onClick, children: [icon, children] }));
+    return (_jsxs(HbButton, { type: huiboType, htmlType: htmlType || 'button', size: huiboSize, disabled: disabled, loading: loading, block: block, onClick: onClick, children: [icon, children] }));
 }

package/lib/components/ConfigProvider.d.ts

@@ -19,6 +19,7 @@ export interface AntdThemeConfig {
     dark?: boolean;
 }
 export interface ConfigProviderProps {
+    [key: string]: any;
     theme?: AntdThemeConfig;
     locale?: any;
     componentSize?: 'small' | 'middle' | 'large';

package/lib/components/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface DatePickerProps {
+    [key: string]: any;
     value?: any;
     onChange?: (value: any, dateString: string) => void;
     picker?: 'date' | 'month' | 'year' | 'week' | 'quarter';
@@ -20,6 +21,7 @@ export declare namespace DatePicker {
     var RangePicker: any;
 }
 export interface RangePickerProps {
+    [key: string]: any;
     value?: any[];
     onChange?: (dates: any[], dateStrings: [string, string]) => void;
     format?: string;

package/lib/components/Form.d.ts

@@ -1,31 +1,33 @@
 import React from 'react';
 /**
- * antd Form 兼容层。
+ * antd Form 兼容层（同步化版）。
  *
- * useForm() 返回一个实例，其方法转发到内部 <hb-form> 自定义元素的 @Method
- * （getFieldsValue / setFieldsValue / setFieldValue / getFieldValue /
- *   validateFields / validate / resetFields）。
- * 转发通过 ref：useForm 创建一个 ref setter，<HbForm ref={form.__setRef}> 挂载后
- * 把 CE 元素存进闭包，之后实例方法即直接调 CE method。
- * 在 CE 挂载前调用方法会排队等待——与 antd useForm 行为一致。
+ * 核心改造：hb-form 的 @Method 是异步(Promise)，但 antd FormInstance 的
+ * getFieldsValue / resetFields / setFieldsValue 是同步。scrm 等业务大量
+ * `formRef.current.getFieldsValue()` 同步取值，异步会拿到 Promise 而崩。
+ *
+ * 解法：instance 内部维护同步 `values` 缓存，hbChange(onValuesChange) 实时更新；
+ *   - 读方法同步返回缓存
+ *   - 写方法同步更新缓存 + 异步调 hb-form @Method 落到子控件
+ *   - validateFields / validate 保持异步（antd 本身也返回 Promise）
+ *
+ * Form 用 forwardRef：`<Form ref={formRef}>` 拿到同步 FormInstance。
+ * useForm 与 ref 共享同一份 createFormInstance 逻辑。
  */
 export interface FormInstance {
-    /** 内部：供 <HbForm ref> 绑定 CE 元素 */
-    __setRef: (el: any) => void;
-    getFieldValue: (name: string) => Promise<any>;
-    getFieldsValue: (nameList?: string[]) => Promise<Record<string, any>>;
-    setFieldValue: (name: string, value: any) => Promise<void>;
-    setFieldsValue: (values: Record<string, any>) => Promise<void>;
-    /** 对齐 antd：通过 resolve(values)/reject(errorFields) */
+    getFieldValue: (name: string) => any;
+    getFieldsValue: (nameList?: string[]) => Record<string, any>;
+    setFieldValue: (name: string, value: any) => void;
+    setFieldsValue: (values: Record<string, any>) => void;
     validateFields: (nameList?: string[]) => Promise<Record<string, any>>;
-    /** 返回布尔，对齐早期用法 */
     validate: (nameList?: string[]) => Promise<boolean>;
-    resetFields: (nameList?: string[]) => Promise<void>;
-    /** 兼容 antd 上的其它常用方法（简易实现，保持不崩溃） */
+    resetFields: (nameList?: string[]) => void;
     submit: () => void;
-    scrollToField: (_name: string) => void;
+    scrollToField: (name: string) => void;
     getFieldsError: () => any[];
-    getFieldError: (_name: string) => string[];
+    getFieldError: (name: string) => string[];
+    /** scrm 兼容：handleReset = resetFields */
+    handleReset?: () => void;
 }
 export interface FormProps {
     form?: FormInstance;
@@ -47,15 +49,9 @@ export interface FormProps {
     children?: React.ReactNode;
     style?: React.CSSProperties;
     className?: string;
+    [key: string]: any;
 }
-export declare function Form(props: FormProps): React.JSX.Element;
-export declare namespace Form {
-    var Item: typeof FormItem;
-    var useForm: any;
-    var List: any;
-    var Provider: any;
-    var useWatch: any;
-}
+export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<FormInstance>>;
 export interface FormItemProps {
     name?: string | string[];
     label?: React.ReactNode;
@@ -72,8 +68,11 @@ export interface FormItemProps {
     };
     colon?: boolean;
     tooltip?: React.ReactNode;
+    /** antd noStyle：不额外包裹。hb-form-item 无对应概念，这里仅消费该 prop 不报错 */
+    noStyle?: boolean;
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
+    [key: string]: any;
 }
 export declare function FormItem(props: FormItemProps): React.JSX.Element;

package/lib/components/Form.js

@@ -1,44 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { HbForm, HbFormItem } from '@huibo-ui/react';
-export function Form(props) {
-    const { form, initialValues, onFinish, onFinishFailed, onValuesChange, layout, labelCol, children, style, className, } = props;
-    const labelPosition = layout === 'vertical' ? 'top' : layout === 'inline' ? 'left' : 'right';
-    // 延迟绑定：ref 回调把 CE 元素交给 form 实例
-    const refCallback = (el) => {
-        if (form)
-            form.__setRef(el);
-    };
-    return (_jsx(HbForm, { ref: refCallback, initialValues: initialValues, onFinish: onFinish, onFinishFailed: onFinishFailed ? (errors) => onFinishFailed({ errorFields: errors, values: {} }) : undefined, onValuesChange: onValuesChange
-            ? (info) => {
-                const prop = info?.prop;
-                if (!prop)
-                    return;
-                onValuesChange({ [prop]: info.value }, {});
-            }
-            : undefined, labelPosition: labelPosition, labelWidth: labelCol?.span ? `${(labelCol.span / 24) * 100}%` : '80px', style: style, className: className, children: children }));
-}
-export function FormItem(props) {
-    const { name, label, rules, required, labelCol, children, style, className } = props;
-    // name 可能是路径数组 ['a','b']，hb-form-item 的 prop 取路径字符串
-    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 }));
-}
-Form.Item = FormItem;
-/**
- * useForm —— 返回 antd 风格的 form 实例。
- * 实例方法转发到 <hb-form> CE 的 @Method。CE 尚未挂载时，方法调用会被队列等待。
- */
-Form.useForm = function useForm() {
+function createFormInstance() {
     let ceEl = null;
     const pending = [];
+    const values = {};
     const bind = (el) => {
         ceEl = el;
-        if (el) {
+        if (el)
             pending.splice(0).forEach(fn => fn());
-        }
     };
-    /** CE 挂载前排队，挂载后立即执行；返回 promise 以兼容 await */
     const run = (fn) => {
         if (ceEl)
             return fn(ceEl);
@@ -46,52 +17,93 @@ Form.useForm = function useForm() {
             pending.push(() => fn(ceEl).then(resolve, reject));
         });
     };
-    const instance = {
-        __setRef: bind,
-        getFieldValue: (name) => run(el => el.getFieldValue(name)),
-        getFieldsValue: (nameList) => run(el => el.getFieldsValue(nameList)),
-        setFieldValue: (name, value) => run(el => el.setFieldValueMethod(name, value)),
-        setFieldsValue: (values) => run(el => el.setFieldsValue(values)),
-        validateFields: (nameList) => run(el => el.validateFields(nameList)),
-        validate: (nameList) => run(el => (nameList ? el.validate(nameList) : el.validate())),
-        resetFields: (nameList) => run(el => el.resetFields(nameList)),
-        submit: () => {
-            // 提交由表单内 type=submit 按钮触发；此处做兜底校验
-            run(async (el) => {
-                try {
-                    await el.validateFields();
-                }
-                catch {
-                    /* 校验失败错误已由 FormItem 展示 */
-                }
-            });
+    const inst = {
+        getFieldValue: (name) => values[name],
+        getFieldsValue: (nameList) => {
+            if (nameList && nameList.length > 0) {
+                const picked = {};
+                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) => {
+            if (vals)
+                Object.assign(values, vals);
+            void run(el => el.setFieldsValue(vals));
+        },
+        resetFields: (nameList) => {
+            if (nameList && nameList.length > 0) {
+                nameList.forEach(n => { delete values[n]; });
+            }
+            else {
+                Object.keys(values).forEach(k => { delete values[k]; });
+            }
+            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 展示 */ } }); },
         scrollToField: () => { },
         getFieldsError: () => [],
         getFieldError: () => [],
+        handleReset: () => inst.resetFields(),
     };
-    return [instance];
+    // 内部钩子：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);
+        }
+        // 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 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 }));
+});
+Form.useForm = function useForm() {
+    const [f] = React.useState(createFormInstance);
+    return [f];
 };
-Form.List = (({ children }) => children || null);
-Form.Provider = (({ children }) => children);
-/**
- * Form.useWatch —— 监听某字段值（简易实现：挂载时从 CE 取一次值）。
- * 用于「读初始/回填值」场景；实时联动需要外层 <Form onValuesChange> 驱动，当前项目未用到联动。
- */
 Form.useWatch = function useWatch(namePath, form) {
     const name = Array.isArray(namePath) ? namePath.join('.') : namePath;
     const [val, setVal] = React.useState(undefined);
     React.useEffect(() => {
         if (!form)
             return;
-        let active = true;
-        form.getFieldsValue().then((all) => {
-            if (active && all && name in all)
-                setVal(all[name]);
-        });
-        return () => {
-            active = false;
-        };
+        setVal(form.getFieldValue?.(name));
     }, [form, name]);
     return val;
 };
+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 }));
+}
+Form.Item = FormItem;

package/lib/components/Input.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface InputProps {
+    [key: string]: any;
     value?: string;
     defaultValue?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/lib/components/Layout.d.ts

@@ -11,6 +11,7 @@ import React from 'react';
  * 且消费方的 Tailwind className（full / flex flex-col / h-full）能直接生效。
  */
 export interface LayoutProps {
+    [key: string]: any;
     children?: React.ReactNode;
     style?: React.CSSProperties;
     className?: string;

package/lib/components/Layout.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 export function Layout(props) {
     const { children, style, className, hasSider } = props;
-    // 默认 flex 行布局（sider + 右侧）；若 className 含 flex-col 则尊重它（垂直）
-    const isVertical = className && /flex-col|flex-direction:\s*column/.test(className);
+    // antd 语义：含 Sider 直接子→水平(row)；否则→垂直(column, Header 顶部)。
+    // 之前硬编码 row 导致 scrm 外层 Layout（Header+下层）横排，Header 跑到左侧。
+    const childrenArr = React.Children.toArray(children);
+    const siderDetected = hasSider || childrenArr.some(c => c?.type === Layout.Sider);
     const flexStyle = {
         display: 'flex',
-        flexDirection: isVertical ? 'column' : 'row',
+        flexDirection: siderDetected ? 'row' : 'column',
         flex: 1,
         minHeight: 0,
         width: '100%',

package/lib/components/Menu.d.ts

@@ -7,6 +7,7 @@ export interface MenuItemType {
     disabled?: boolean;
 }
 export interface MenuProps {
+    [key: string]: any;
     items?: MenuItemType[];
     mode?: 'horizontal' | 'vertical' | 'inline';
     selectedKeys?: string[];

package/lib/components/Modal.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ModalProps {
+    [key: string]: any;
     open?: boolean;
     title?: React.ReactNode;
     width?: string | number;

package/lib/components/Modal.js

@@ -1,10 +1,13 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { HbDialog } from '@huibo-ui/react';
 export function Modal(props) {
-    const { open, title, width, onCancel, maskClosable = true, keyboard = true, children } = props;
-    return (_jsxs(HbDialog, { modelValue: open || false, title: typeof title === 'string' ? title : '', width: width ? String(width) : undefined, closeOnClickModal: maskClosable, closeOnPressEscape: keyboard, showClose: true, onHbClose: () => { if (onCancel)
-            onCancel({}); }, children: [children, props.footer !== null && props.footer !== undefined ? props.footer : null] }));
+    const { open, title, width, onCancel, onOk, confirmLoading, okText, cancelText, maskClosable = true, keyboard = true, destroyOnClose, footer, children } = 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)
+            onCancel({}); }, children: [children, resolvedFooter !== null && resolvedFooter !== undefined ? resolvedFooter : null] }));
 }
 function imperative(opts) {
     const div = document.createElement('div');

package/lib/components/Select.d.ts

@@ -5,6 +5,7 @@ export interface SelectOption {
     disabled?: boolean;
 }
 export interface SelectProps {
+    [key: string]: any;
     value?: string | number | (string | number)[];
     defaultValue?: string | number | (string | number)[];
     onChange?: (value: any, option: any) => void;

package/lib/components/Tree.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface TreeProps {
+    [key: string]: any;
     treeData?: any[];
     checkable?: boolean;
     checkStrictly?: boolean;

package/package.json

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