@huibo-ui/react-antd 1.0.11 → 1.0.12

package/lib/components/Statistic.d.ts

@@ -5,5 +5,6 @@ export declare function Statistic(props: {
     precision?: number;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    valueStyle?: React.CSSProperties;
     style?: React.CSSProperties;
 }): React.JSX.Element;

package/lib/components/Statistic.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbStatistic } from '@huibo-ui/react';
 export function Statistic(props) {
-    return (_jsx(HbStatistic, { title: typeof props.title === 'string' ? props.title : '', value: props.value ?? 0, precision: props.precision, prefix: props.prefix, suffix: props.suffix, style: props.style }));
+    // hb-statistic 用 valuePrefix（非 prefix），且只接受 string。
+    // 注意：不能传 `prefix` prop —— 它会命中 HTMLElement 原生只读 getter，抛 "has only a getter"。
+    const strPrefix = typeof props.prefix === 'string' ? props.prefix : '';
+    const strSuffix = typeof props.suffix === 'string' ? props.suffix : '';
+    return (_jsx(HbStatistic, { title: typeof props.title === 'string' ? props.title : '', value: props.value ?? 0, precision: props.precision, valuePrefix: strPrefix, suffix: strSuffix, style: props.style }));
 }

package/lib/components/Switch.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
+/**
+ * antd Switch 兼容层。
+ * antd 有受控(checked)和非受控(defaultChecked)两种模式；兼容层需同时支持。
+ * 之前只读 checked、忽略 defaultChecked，导致 <Switch defaultChecked /> 实际未打开。
+ */
 export declare function Switch(props: {
     checked?: boolean;
+    defaultChecked?: boolean;
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
     size?: 'small' | 'middle' | 'large';

package/lib/components/Switch.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { HbSwitch } from '@huibo-ui/react';
+/**
+ * antd Switch 兼容层。
+ * antd 有受控(checked)和非受控(defaultChecked)两种模式；兼容层需同时支持。
+ * 之前只读 checked、忽略 defaultChecked，导致 <Switch defaultChecked /> 实际未打开。
+ */
 export function Switch(props) {
-    return (_jsx(HbSwitch, { modelValue: props.checked ?? false, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, activeText: props.checkedChildren, inactiveText: props.unCheckedChildren, onHbChange: (e) => props.onChange?.(e.detail) }));
+    // 非受控：用内部 state 跟踪，初始值取 defaultChecked。
+    const isControlled = props.checked !== undefined;
+    const [inner, setInner] = React.useState(props.defaultChecked ?? false);
+    const value = isControlled ? props.checked : inner;
+    return (_jsx(HbSwitch, { modelValue: value, disabled: props.disabled || props.loading, size: props.size === 'middle' ? 'default' : props.size, activeText: props.checkedChildren, inactiveText: props.unCheckedChildren, onHbChange: (e) => {
+            if (!isControlled)
+                setInner(e.detail);
+            props.onChange?.(e.detail);
+        } }));
 }

package/lib/components/Tabs.js

@@ -17,7 +17,36 @@ export function Tabs(props) {
     const card = type === 'card';
     const fontSize = size === 'large' ? 16 : size === 'small' ? 13 : 14;
     const tabPadding = size === 'large' ? '16px 24px' : size === 'small' ? '8px 16px' : '12px 16px';
-    const tabBar = (_jsx("div", { style: {
+    /**
+     * 滑动 ink bar（对齐 antd，修复 #18）：
+     * 修复前每个 tab 各自按 active 条件渲染一个无 transition 的下划线，切换时瞬变；
+     * 现在用单一绝对定位 ink bar，位置/宽度由当前 active tab 的 offset 测量驱动，
+     * 切换时 transform/width 平滑过渡（滑动效果）。
+     */
+    const tabRefs = React.useRef({});
+    const navRef = React.useRef(null);
+    const [ink, setInk] = React.useState({ offset: 0, size: 0, ready: false });
+    const measureInk = React.useCallback(() => {
+        const el = tabRefs.current[current] ?? null;
+        const nav = navRef.current;
+        if (!el || !nav)
+            return;
+        // 水平：左偏移与宽度；垂直：上偏移与高度
+        if (vertical) {
+            setInk({ offset: el.offsetTop, size: el.offsetHeight, ready: true });
+        }
+        else {
+            setInk({ offset: el.offsetLeft, size: el.offsetWidth, ready: true });
+        }
+    }, [current, vertical]);
+    React.useEffect(() => {
+        measureInk();
+    }, [measureInk, list.length, tabPosition]);
+    const inkStyle = vertical
+        ? { position: 'absolute', left: 0, top: ink.offset, height: ink.size, width: 2, background: PRIMARY, transition: 'top 0.3s cubic-bezier(0.645,0.045,0.355,1), height 0.3s' }
+        : { position: 'absolute', left: ink.offset, bottom: 0, width: ink.size, height: 2, background: PRIMARY, transition: 'left 0.3s cubic-bezier(0.645,0.045,0.355,1), width 0.3s' };
+    const tabBar = (_jsxs("div", { ref: navRef, style: {
+            position: 'relative',
             display: 'flex',
             flexDirection: vertical ? 'column' : 'row',
             borderBottom: vertical || card ? 'none' : '1px solid #f0f0f0',
@@ -25,31 +54,27 @@ export function Tabs(props) {
             gap: vertical ? 0 : 4,
             overflowX: vertical ? 'visible' : 'auto',
             scrollbarWidth: 'thin',
-        }, children: list.map(it => {
-            const active = it.key === current;
-            return (_jsxs("div", { role: "tab", "aria-selected": active, onClick: () => select(it.key, it.disabled), style: {
-                    padding: tabPadding,
-                    cursor: it.disabled ? 'not-allowed' : 'pointer',
-                    color: it.disabled ? 'rgba(0,0,0,0.25)' : active ? PRIMARY : 'rgba(0,0,0,0.88)',
-                    fontWeight: active ? 500 : 400,
-                    fontSize,
-                    whiteSpace: 'nowrap',
-                    position: 'relative',
-                    background: card ? (active ? '#fff' : 'transparent') : 'transparent',
-                    border: card ? '1px solid #f0f0f0' : 'none',
-                    [vertical ? 'borderBottom' : 'borderBottom']: card ? (active ? '1px solid #fff' : '1px solid #f0f0f0') : 'none',
-                    marginBottom: card && !vertical ? '-1px' : undefined,
-                    borderRadius: card ? (vertical ? '4px 0 0 4px' : '4px 4px 0 0') : undefined,
-                    transition: 'color .2s',
-                }, children: [it.label, active && !card && (_jsx("span", { style: {
-                            position: 'absolute',
-                            [vertical ? 'right' : 'bottom']: 0,
-                            [vertical ? 'top' : 'left']: vertical ? 0 : 0,
-                            [vertical ? 'width' : 'height']: '2px',
-                            [vertical ? 'height' : 'width']: '100%',
-                            background: PRIMARY,
-                        } }))] }, it.key));
-        }) }));
+        }, children: [!card && ink.ready && _jsx("span", { style: inkStyle, "aria-hidden": "true" }), list.map(it => {
+                const active = it.key === current;
+                return (_jsx("div", { ref: el => {
+                        tabRefs.current[it.key] = el;
+                    }, role: "tab", "aria-selected": active, onClick: () => select(it.key, it.disabled), style: {
+                        padding: tabPadding,
+                        cursor: it.disabled ? 'not-allowed' : 'pointer',
+                        color: it.disabled ? 'rgba(0,0,0,0.25)' : active ? PRIMARY : 'rgba(0,0,0,0.88)',
+                        fontWeight: active ? 500 : 400,
+                        fontSize,
+                        whiteSpace: 'nowrap',
+                        position: 'relative',
+                        zIndex: 1,
+                        background: card ? (active ? '#fff' : 'transparent') : 'transparent',
+                        border: card ? '1px solid #f0f0f0' : 'none',
+                        [vertical ? 'borderBottom' : 'borderBottom']: card ? (active ? '1px solid #fff' : '1px solid #f0f0f0') : 'none',
+                        marginBottom: card && !vertical ? '-1px' : undefined,
+                        borderRadius: card ? (vertical ? '4px 0 0 4px' : '4px 4px 0 0') : undefined,
+                        transition: 'color .2s',
+                    }, children: it.label }, it.key));
+            })] }));
     // 对齐 antd Tabs 默认的渲染策略：
     // - destroyInactiveTabPane=true：只渲染当前 active（切换即销毁旧的）
     // - 默认（lazy keep-alive）：只渲染「当前 active」和「曾经 active 过」的；

package/lib/components/Tag.d.ts

@@ -3,6 +3,7 @@ export declare function Tag(props: {
     color?: string;
     closable?: boolean;
     onClose?: () => void;
+    bordered?: boolean;
     children?: React.ReactNode;
     style?: React.CSSProperties;
 }): React.JSX.Element;

package/lib/components/Tag.js

@@ -4,7 +4,7 @@ const colorMap = {
     success: 'success',
     processing: 'info',
     error: 'danger',
-    default: 'info',
+    default: 'default',
     warning: 'warning',
     blue: 'primary',
     green: 'success',
@@ -12,5 +12,9 @@ const colorMap = {
     orange: 'warning',
 };
 export function Tag(props) {
-    return (_jsx(HbTag, { type: (colorMap[props.color || 'default'] || 'default'), closable: props.closable, onHbClose: () => props.onClose?.(), style: props.style, children: props.children }));
+    // antd color 既支持预设色名也支持任意 CSS 色（#hex / rgb）。
+    // 预设色名 → 映射成 hb-tag type；任意 hex/rgb → 传给 hb-tag 的 color prop（自定义色，由底层渲染）。
+    // bordered 默认 true（对齐 antd），透传给 hb-tag。
+    const isPreset = props.color && colorMap[props.color];
+    return (_jsx(HbTag, { type: isPreset ? colorMap[props.color] : 'default', color: isPreset ? undefined : props.color, closable: props.closable, bordered: props.bordered ?? true, onHbClose: () => props.onClose?.(), style: props.style, children: props.children }));
 }

package/lib/components/Timeline.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbTimeline } from '@huibo-ui/react';
 export function Timeline(props) {
-    return _jsx(HbTimeline, { items: props.items, direction: props.mode, reverse: props.reverse });
+    // hb-timeline 的 item 用 { content, time?, color? }；antd 用 { children, label, color }。
+    // 兼容层把 antd 的 children/label 映射到 content（取字符串），color 透传，
+    // 否则 items 透传后 hb-timeline 取不到 content，时间线文字为空。
+    const mapped = props.items?.map(it => ({
+        content: typeof it?.children === 'string' ? it.children : typeof it?.label === 'string' ? it.label : '',
+        time: typeof it?.time === 'string' ? it.time : undefined,
+        color: it?.color,
+    }));
+    return _jsx(HbTimeline, { items: mapped, direction: props.mode, reverse: props.reverse });
 }

package/lib/components/TreeSelect.d.ts

@@ -2,10 +2,12 @@ import React from 'react';
 export declare function TreeSelect(props: {
     treeData?: any[];
     value?: any;
+    defaultValue?: any;
     onChange?: (value: any) => void;
     multiple?: boolean;
     treeCheckable?: boolean;
     placeholder?: string;
     disabled?: boolean;
     style?: React.CSSProperties;
+    children?: React.ReactNode;
 }): React.JSX.Element;

package/lib/components/TreeSelect.js

@@ -1,5 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbTreeSelect } from '@huibo-ui/react';
+/**
+ * 把 antd treeData（字段 value/title/children/disabled）归一化成 hb-tree-select 需要的
+ * key/title/children/disabled。hb-tree-select 内部用 node.key 标识节点（渲染 data-tree-key），
+ * antd treeData 用 value。修复前直接透传 treeData，hb 取 node.key 得到 undefined，
+ * 导致 data-tree-key 缺失、点击节点选中失效（modelValue 用 undefined 比较）、子节点选不中。
+ */
+function normalizeTreeData(nodes) {
+    return (nodes || []).map(n => {
+        const out = {
+            key: n.key !== undefined ? String(n.key) : n.value !== undefined ? String(n.value) : n.title,
+            title: n.title ?? n.label,
+            disabled: !!n.disabled,
+        };
+        if (n.children && n.children.length > 0)
+            out.children = normalizeTreeData(n.children);
+        return out;
+    });
+}
 export function TreeSelect(props) {
-    return (_jsx(HbTreeSelect, { data: props.treeData || [], modelValue: props.value, multiple: props.multiple || props.treeCheckable, checkable: props.treeCheckable, placeholder: props.placeholder, disabled: props.disabled, onHbChange: (e) => props.onChange?.(e.detail), style: props.style }));
+    return (_jsx(HbTreeSelect, { data: normalizeTreeData(props.treeData || []), modelValue: props.value ?? props.defaultValue ?? '', multiple: props.multiple || props.treeCheckable, checkable: props.treeCheckable, placeholder: props.placeholder, disabled: props.disabled, onHbChange: (e) => props.onChange?.(e.detail), style: props.style, children: props.children }));
 }

package/lib/components/Typography.js

@@ -1,6 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { HbLink } from '@huibo-ui/react';
 export function Typography(props) {
     return _jsx(_Fragment, { children: props.children });
 }
@@ -12,7 +11,8 @@ Typography.Paragraph = function Paragraph(props) {
     return _jsx("p", { children: props.children });
 };
 Typography.Link = function Link(props) {
-    return _jsx(HbLink, { href: props.href, children: props.children });
+    const { href, children, target, onClick, style, className, ...rest } = props;
+    return (_jsx("a", { href: href, target: target, onClick: onClick, style: { color: 'var(--hb-color-primary)', textDecoration: 'none', cursor: 'pointer', ...style }, className: className, ...rest, children: children }));
 };
 Typography.Text = function Text(props) {
     return (_jsx("span", { style: {

package/lib/components/Watermark.js

@@ -1,5 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbWatermark } from '@huibo-ui/react';
 export function Watermark(props) {
-    return (_jsx(HbWatermark, { content: props.content || '', width: props.width, height: props.height, gap: Array.isArray(props.gap) ? props.gap[0] : props.gap, rotate: props.rotate, fontColor: props.font?.color, fontSize: props.font?.fontSize, children: props.children }));
+    // 仅传递显式提供的 props：底层 hb-watermark 的 @Prop 带默认值
+    // （width=120 / height=120 / gap=8 / rotate=-22 / fontSize=14 / fontColor），
+    // 若此处把 undefined 透传给 HbWatermark，React 兼容层的 attachProps 会执行
+    // `node.width = undefined` 覆盖 Stencil 默认值，导致 SVG 取到 undefined、
+    // backgroundSize 缺失，水印完全不显示。
+    const { content, width, height, gap, rotate, font, children } = props;
+    const layerProps = { content: content || '' };
+    if (width !== undefined)
+        layerProps.width = width;
+    if (height !== undefined)
+        layerProps.height = height;
+    const gapValue = Array.isArray(gap) ? gap[0] : gap;
+    if (gapValue !== undefined)
+        layerProps.gap = gapValue;
+    if (rotate !== undefined)
+        layerProps.rotate = rotate;
+    if (font?.color !== undefined)
+        layerProps.fontColor = font.color;
+    if (font?.fontSize !== undefined)
+        layerProps.fontSize = font.fontSize;
+    return _jsx(HbWatermark, { ...layerProps, children: children });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huibo-ui/react-antd",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "antd 兼容层 — 接收 antd 原生 props，内部转换为 huibo-ui，实现丝滑平替",
   "type": "module",
   "main": "lib/index.js",
@@ -9,10 +9,6 @@
   "files": [
     "lib"
   ],
-  "scripts": {
-    "build": "tsc --outDir lib || true",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -29,5 +25,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsc --outDir lib || true"
   }
-}
+}