@huibo-ui/react-antd 1.0.10 → 1.0.12

package/lib/components/Drawer.js

@@ -1,6 +1,169 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { HbDrawer } from '@huibo-ui/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+/**
+ * antd Drawer 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbDrawer>（Shadow DOM slot）：抽屉内容进 slot 后，<Form>/<Descriptions> 等
+ * 嵌套布局受 ::slotted 干扰。纯 div 自渲染 mask + 四方向滑入容器，children 作为真实 DOM，
+ * 嵌套复杂内容布局稳定。动画复刻 hb-drawer 的四方向 slide（@keyframes 内联，不依赖 hb-*）。
+ */
+// @keyframes 只需注入一次（与 Modal 共享 head，独立命名避免与 Modal 冲突）。
+let drawerMotionInjected = false;
+function injectDrawerMotion() {
+    if (drawerMotionInjected || typeof document === 'undefined')
+        return;
+    drawerMotionInjected = true;
+    const style = document.createElement('style');
+    style.setAttribute('data-hb-drawer-motion', '');
+    style.textContent = `
+@keyframes hb-drawer2-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes hb-drawer2-overlay-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes hb-drawer2-in-ltr { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes hb-drawer2-out-ltr { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes hb-drawer2-in-rtl { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes hb-drawer2-out-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes hb-drawer2-in-ttb { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes hb-drawer2-out-ttb { from { transform: translateY(0); } to { transform: translateY(-100%); } }
+@keyframes hb-drawer2-in-btt { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes hb-drawer2-out-btt { from { transform: translateY(0); } to { transform: translateY(100%); } }
+`;
+    document.head.appendChild(style);
+}
+const CloseIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 1024 1024", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M563.8 512l262.5-312.9c14.4-17.2.5-43.1-21.3-43.1H704.5c-7.9 0-15.4 3.5-20.5 9.5L512 417.8 339.9 165.5c-5.1-6-12.6-9.5-20.5-9.5H198.7c-21.8 0-35.7 25.9-21.3 43.1L439.9 512 177.4 824.9c-14.4 17.2-.5 43.1 21.3 43.1h120.5c7.9 0 15.4-3.5 20.5-9.5L512 606.2l172.1 252.3c5.1 6 12.6 9.5 20.5 9.5h120.5c21.8 0 35.7-25.9 21.3-43.1L563.8 512z" }) }));
+const placementToDir = { left: 'ltr', right: 'rtl', top: 'ttb', bottom: 'btt' };
 export function Drawer(props) {
-    const dirMap = { left: 'ltr', right: 'rtl', top: 'ttb', bottom: 'btt' };
-    return _jsx(HbDrawer, { modelValue: props.open ?? false, title: typeof props.title === 'string' ? props.title : '', direction: dirMap[props.placement || 'right'], size: props.width ? String(props.width) : undefined, closeOnClickModal: props.maskClosable ?? true, onHbClose: () => props.onClose?.(), children: props.children });
+    const { open, title, placement = 'right', width, height, onClose, maskClosable = true, keyboard = true, destroyOnClose, children, footer, style, className, closable = true, } = props;
+    injectDrawerMotion();
+    const dir = placementToDir[placement];
+    const isHorizontal = placement === 'left' || placement === 'right';
+    const resolvedSize = isHorizontal
+        ? width != null
+            ? typeof width === 'number'
+                ? `${width}px`
+                : String(width)
+            : '378px'
+        : height != null
+            ? typeof height === 'number'
+                ? `${height}px`
+                : String(height)
+            : '378px';
+    // 离场动画：open 由 true→false 时播放 0.3s 出场再卸载。
+    // 关键：显示条件 = open || leaving；两者都为 false 时返回 null（完全卸载），
+    // 否则 open=false 后 drawer 仍 fixed 显示，导致遮罩挡住下层、X/Esc「看似」关不掉。
+    const [leaving, setLeaving] = React.useState(false);
+    const prevOpen = React.useRef(!!open);
+    React.useEffect(() => {
+        if (open && !prevOpen.current) {
+            setLeaving(false);
+        }
+        else if (!open && prevOpen.current) {
+            setLeaving(true);
+            const t = setTimeout(() => setLeaving(false), 300);
+            return () => clearTimeout(t);
+        }
+        prevOpen.current = !!open;
+    }, [open]);
+    // Esc 关闭（必须在所有 hooks 内，不能被下面的 return null 跳过 → 否则违反 Rules of Hooks）
+    React.useEffect(() => {
+        if (!open || !keyboard)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose?.();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, keyboard, onClose]);
+    // body 滚动锁定：弹层显示时锁住 body 滚动，避免关闭时页面因滚动条显隐而 reflow 闪烁。
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const body = document.body;
+        const prevOverflow = body.style.overflow;
+        const prevPaddingRight = body.style.paddingRight;
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollbarWidth > 0)
+            body.style.paddingRight = `${scrollbarWidth}px`;
+        body.style.overflow = 'hidden';
+        return () => {
+            body.style.overflow = prevOverflow;
+            body.style.paddingRight = prevPaddingRight;
+        };
+    }, [open]);
+    // 不显示（关闭且离场动画结束）→ 完全不渲染（必须在所有 hooks 之后）
+    if (!open && !leaving)
+        return null;
+    // 容器定位（四方向）
+    const posStyle = { position: 'fixed' };
+    if (dir === 'ltr') {
+        posStyle.top = 0;
+        posStyle.left = 0;
+        posStyle.bottom = 0;
+        posStyle.width = resolvedSize;
+        posStyle.maxWidth = '100vw';
+    }
+    if (dir === 'rtl') {
+        posStyle.top = 0;
+        posStyle.right = 0;
+        posStyle.bottom = 0;
+        posStyle.width = resolvedSize;
+        posStyle.maxWidth = '100vw';
+    }
+    if (dir === 'ttb') {
+        posStyle.left = 0;
+        posStyle.right = 0;
+        posStyle.top = 0;
+        posStyle.height = resolvedSize;
+        posStyle.maxHeight = '100vh';
+    }
+    if (dir === 'btt') {
+        posStyle.left = 0;
+        posStyle.right = 0;
+        posStyle.bottom = 0;
+        posStyle.height = resolvedSize;
+        posStyle.maxHeight = '100vh';
+    }
+    return (_jsxs("div", { style: { position: 'fixed', inset: 0, zIndex: 1000, pointerEvents: 'none' }, children: [_jsx("div", { onClick: () => maskClosable && onClose?.(), style: {
+                    position: 'fixed',
+                    inset: 0,
+                    background: 'var(--hb-color-bg-mask, rgba(0,0,0,0.45))',
+                    pointerEvents: 'auto',
+                    animation: `${leaving ? 'hb-drawer2-overlay-out' : 'hb-drawer2-overlay-in'} 0.3s ease both`,
+                } }), _jsxs("div", { style: {
+                    ...posStyle,
+                    background: 'var(--hb-color-bg-elevated, #fff)',
+                    boxShadow: '-6px 0 16px 0 rgba(0,0,0,0.08), -3px 0 6px -4px rgba(0,0,0,0.12), -9px 0 28px 8px rgba(0,0,0,0.05)',
+                    pointerEvents: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    zIndex: 1050,
+                    animation: `${leaving ? `hb-drawer2-out-${dir}` : `hb-drawer2-in-${dir}`} 0.3s cubic-bezier(0.16, 1, 0.3, 1) both`,
+                    ...style,
+                }, className: className, children: [title !== undefined && (_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            padding: '16px 24px',
+                            borderBottom: '1px solid var(--hb-color-border-secondary, #f0f0f0)',
+                        }, children: [_jsx("div", { style: { fontSize: 16, fontWeight: 600, color: 'var(--hb-color-text, rgba(0,0,0,0.88))' }, children: title }), closable && (_jsx("button", { type: "button", onClick: () => onClose?.(), "aria-label": "close", style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 28,
+                                    height: 28,
+                                    border: 'none',
+                                    background: 'none',
+                                    color: 'var(--hb-color-text-secondary, rgba(0,0,0,0.45))',
+                                    cursor: 'pointer',
+                                    borderRadius: 6,
+                                    padding: 0,
+                                    transition: 'all 0.2s',
+                                }, onMouseEnter: e => (e.currentTarget.style.background = 'var(--hb-color-fill-tertiary, #fafafa)'), onMouseLeave: e => (e.currentTarget.style.background = 'none'), children: _jsx(CloseIcon, {}) }))] })), _jsx("div", { style: { flex: 1, padding: 24, overflowY: 'auto' }, children: children }), footer !== null && footer !== undefined && (_jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            gap: 8,
+                            padding: '8px 24px',
+                            borderTop: '1px solid var(--hb-color-border-secondary, #f0f0f0)',
+                        }, children: footer }))] })] }));
 }

package/lib/components/Dropdown.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbDropdown } from '@huibo-ui/react';
 export function Dropdown(props) {
-    return _jsx(HbDropdown, { items: props.menu?.items || [], trigger: (props.trigger?.[0] || 'hover'), placement: props.placement, children: props.children });
+    return (_jsx(HbDropdown, { items: props.menu?.items || [], trigger: (props.trigger?.[0] || 'hover'), placement: props.placement, children: props.children }));
 }

package/lib/components/FloatButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbFloatButton } from '@huibo-ui/react';
 export function FloatButton(props) {
-    return _jsx(HbFloatButton, { type: props.type, icon: props.icon, shape: props.shape, onHbClick: () => props.onClick?.(), children: props.children });
+    return (_jsx(HbFloatButton, { type: props.type, icon: props.icon, shape: props.shape, onHbClick: () => props.onClick?.(), children: props.children }));
 }

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;