@huibo-ui/react-antd 1.0.0 → 1.0.2

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

@@ -217,3 +217,40 @@ export { Breadcrumb } from './components/Breadcrumb';
 export { Typography } from './components/Typography';
 export { QRCode } from './components/QRCode';
 export { TimePicker } from './components/TimePicker';
+export type { FormInstance, FormProps } from './components/Form';
+export type { ColumnType as ColumnGroupType } from './components/Table';
+export type TablePaginationConfig = {
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    showSizeChanger?: boolean;
+    pageSizeOptions?: string[];
+    [k: string]: any;
+};
+export type MenuItemType = {
+    key: React.Key;
+    label?: React.ReactNode;
+    children?: MenuItemType[];
+    disabled?: boolean;
+    type?: string;
+    [k: string]: any;
+};
+export type DescriptionsProps = {
+    title?: React.ReactNode;
+    bordered?: boolean;
+    column?: number | object;
+    size?: 'default' | 'middle' | 'small';
+    layout?: 'horizontal' | 'vertical';
+    colon?: boolean;
+    [k: string]: any;
+};
+/**
+ * antd theme 命名空间兼容。
+ * react-antd 用 CSS 变量驱动主题，无 token 算法；useToken 返回空 token 兜底，
+ * 避免业务代码 `const { token } = theme.useToken()` 崩溃（取到的 token.* 为 undefined）。
+ */
+export declare const theme: {
+    useToken: () => {
+        token: Record<string, any>;
+    };
+};

package/lib/index.js

@@ -121,3 +121,11 @@ export { Breadcrumb } from './components/Breadcrumb';
 export { Typography } from './components/Typography';
 export { QRCode } from './components/QRCode';
 export { TimePicker } from './components/TimePicker';
+/**
+ * antd theme 命名空间兼容。
+ * react-antd 用 CSS 变量驱动主题，无 token 算法；useToken 返回空 token 兜底，
+ * 避免业务代码 `const { token } = theme.useToken()` 崩溃（取到的 token.* 为 undefined）。
+ */
+export const theme = {
+    useToken: () => ({ token: {} }),
+};

package/package.json

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