@huibo-ui/react-antd 1.0.14 → 1.0.16

package/lib/components/ConfigProvider.js

@@ -1,5 +1,6 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { HbConfigProvider } from '@huibo-ui/react';
 /**
  * 把 antd 的 ThemeConfig.token 映射到 huibo-ui 的 --hb-* 设计令牌。
  * 写在 document.documentElement(:root) 上，custom property 会穿透 shadow DOM，
@@ -75,22 +76,5 @@ export function ConfigProvider(props) {
     React.useEffect(() => {
         applyThemeToken(theme?.token);
     }, [theme?.token]);
-    // 设置 data-size / data-locale / data-theme 到 documentElement
-    // （原 hb-config-provider 的 applyConfig 逻辑，改为直接写 :root，避免额外 DOM 层）
-    React.useEffect(() => {
-        const root = document.documentElement;
-        root.setAttribute('data-size', props.componentSize === 'middle' ? 'default' : (props.componentSize || 'default'));
-        root.setAttribute('data-locale', props.locale ? 'zh-CN' : 'en-US');
-        if (theme?.dark) {
-            root.setAttribute('data-theme', 'dark');
-        }
-        else {
-            root.removeAttribute('data-theme');
-        }
-    }, [theme?.dark, props.componentSize, props.locale]);
-    // 直接返回 children，不包裹任何 DOM 元素 —— 对齐 antd ConfigProvider
-    // （antd 用 React Context + CSS-in-JS，零 DOM 层）。
-    // 之前渲染 hb-config-provider（display:contents）会改变 #root 子元素结构，
-    // 导致 #root { height:100% } 在某些高度链下解析失效（全屏背景图场景）。
-    return _jsx(_Fragment, { children: children });
+    return (_jsx(HbConfigProvider, { theme: theme?.dark ? 'dark' : 'light', size: props.componentSize === 'middle' ? 'default' : props.componentSize, locale: props.locale ? 'zh-CN' : 'en-US', children: _jsx("div", { style: { display: 'contents' }, children: children }) }));
 }

package/lib/components/Layout.js

@@ -10,7 +10,10 @@ export function Layout(props) {
         display: 'flex',
         flexDirection: siderDetected ? 'row' : 'column',
         flex: 1,
-        minHeight: 0,
+        // 对齐 antd .ant-layout { min-height: 100vh }：最外层 Layout 在非 flex 父容器
+        // （如 #root）里时，flex:1 不生效，用 min-height:100vh 兜底撑满视口。
+        // 内层 Layout 会被 flex 父的 height 约束覆盖（minHeight 仅是下限，不破坏布局）。
+        minHeight: '100vh',
         width: '100%',
         ...style,
     };
@@ -34,14 +37,16 @@ Layout.Sider = function Sider({ children, style, className, collapsed, theme, wi
  *
  * 对齐 antd .ant-layout-content（flex: auto + min-height: 0）。
  *
- * 过滤消费方传入的 height:'auto'：这是常见脆弱写法，会让 flex item 的
- * height 指定值变成 auto，导致子元素 height:100% 解析失败（如全屏背景图
- * 容器）。去掉它让 flex 算法自然分配高度，子元素 height:100% 才能生效。
+ * 当消费方传入 height:'auto'（常见脆弱写法）时，替换为 height:0：
+ * flex item 的 height 指定值为 auto 会导致子元素 height:100% 解析失败
+ * （浏览器 quirk：flex item 的 auto height 不能被子元素百分比解析）。
+ * 设为 0（确定值）后，flex 算法仍会按 flex-grow 分配实际高度，且子元素
+ * height:100% 能正确解析为分配后的 used value（如全屏背景图场景）。
  */
 Layout.Content = function Content({ children, style, className }) {
     const { height, ...restStyle } = style || {};
-    // 仅过滤无效的 height:'auto'；显式数值/百分比仍保留
-    const filteredStyle = height === 'auto' ? restStyle : style;
+    // height:'auto' → height:0（修正 flex 百分比高度解析 quirk）；其它值保留
+    const filteredStyle = height === 'auto' ? { ...restStyle, height: 0 } : style;
     return (_jsx("div", { style: { flex: '1 1 auto', minWidth: 0, minHeight: 0, ...filteredStyle }, className: className, children: children }));
 };
 /**

package/package.json

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