@para-ui/core 5.0.0-beta.12 → 5.0.0-beta.13

package/lib/AutoBox/component.json

@@ -0,0 +1,133 @@
+{
+    "name": "AutoBox",
+    "category": "Layout",
+    "description": "自适应容器，根据容器宽度自动计算可见项数量，超出部分折叠到'更多'下拉弹层中展示",
+    "semantic": {
+        "intent": [
+            "响应式布局",
+            "内容收纳"
+        ],
+        "useCases": [
+            "工具栏",
+            "标签组",
+            "操作区"
+        ],
+        "riskLevel": "low"
+    },
+    "variants": {
+        "default": {
+            "meaning": "默认样式"
+        }
+    },
+    "states": [
+        "default",
+        "expanded"
+    ],
+    "idealProps": {
+        "list": {
+            "type": "array",
+            "description": "需要自适应容纳的子节点数组(ReactNode[]);事件挂在节点自身,AutoBox 不暴露 item-level onClick"
+        },
+        "showNum": {
+            "type": "number",
+            "description": "强制显示前 N 项(跳过自适应计算),溢出全部进'更多'"
+        },
+        "trigger": {
+            "type": "enum",
+            "values": [
+                "click",
+                "hover"
+            ],
+            "default": "click",
+            "description": "'更多'弹层触发方式"
+        },
+        "placement": {
+            "type": "string",
+            "default": "bottomLeft",
+            "description": "'更多'弹层位置(透传 Popover placement)"
+        },
+        "hideMore": {
+            "type": "boolean",
+            "default": false,
+            "description": "隐藏内置'更多'按钮(配 anchorEl + openMore 自管理外置触发器)"
+        },
+        "moreCustomize": {
+            "type": "ReactNode",
+            "description": "自定义'更多'触发节点,替换默认 More 图标按钮"
+        },
+        "openMore": {
+            "type": "boolean",
+            "default": false,
+            "description": "外部受控弹层显隐"
+        },
+        "onShowMore": {
+            "type": "function",
+            "description": "(bol: boolean) => void 是否有溢出项的状态回调"
+        },
+        "onCloseMore": {
+            "type": "function",
+            "description": "() => void 受控弹层关闭回调"
+        }
+    },
+    "do": [
+        "用于空间有限需要收纳溢出内容的场景",
+        "配合 Popover 展示更多",
+        "list 中每个 ReactNode 自行绑定点击事件——AutoBox 只做布局计算和'更多'收纳"
+    ],
+    "dont": [
+        "在固定宽度布局中滥用",
+        "列表项过多时不做分页",
+        "期望 AutoBox 暴露单项 onClick——事件需要挂在 list 元素自身上"
+    ],
+    "events": {
+        "onShowMore": {
+            "signature": "(bol: boolean) => void",
+            "asyncSupported": false,
+            "examples": [
+                "bol=true 表示当前有溢出项（list.length > morePos），可用于显示/隐藏外部操作按钮",
+                "bol=false 表示所有项都可见，无需显示外部'更多'入口",
+                "配合 hideMore + openMore 实现外置触发器：onShowMore={setHasMore}，只在 hasMore 时渲染自定义按钮"
+            ],
+            "commonMistakes": [
+                "期望 onShowMore 返回具体溢出项数量——它只返回 boolean，溢出项数量需自行计算(list.length - morePos)",
+                "在 onShowMore 里 setState 引发重渲染后，AutoBox 内部 resize 可能再次触发 onShowMore，注意避免循环",
+                "onShowMore 在 list prop 变化或 window resize 后都会重新触发，不要依赖它的调用次数做副作用"
+            ]
+        },
+        "onCloseMore": {
+            "signature": "() => void",
+            "asyncSupported": false,
+            "examples": [
+                "弹层关闭时同步外部受控状态：onCloseMore={() => setOpenMore(false)}",
+                "关闭时记录日志：onCloseMore={() => analytics.track('more_closed')}",
+                "配合 openMore 实现受控弹层：<AutoBox openMore={open} onCloseMore={() => setOpen(false)} />"
+            ],
+            "commonMistakes": [
+                "传了 onCloseMore 但忘记传 openMore——二者需配合使用才能实现受控弹层",
+                "期望 onCloseMore 在用户点击弹层内容后也触发——只有弹层关闭时触发，内容点击需在 list 节点自身处理",
+                "期望 onCloseMore 携带关闭原因——回调无参数，无法区分是点击外部还是 ESC 关闭"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "list 类型是 any[]，但传入非 ReactNode 元素会导致 runtime 渲染异常",
+            "wrong": "// list 传了原始数据对象，忘记 map 成 ReactNode\n<AutoBox list={[{ id: 1, name: '标签' }]} />  // 对象不是合法 ReactNode，渲染报错",
+            "right": "// 先 map 成 ReactNode\n<AutoBox list={data.map(d => <Tag key={d.id}>{d.name}</Tag>)} />"
+        },
+        {
+            "issue": "moreCustomize 声明为 ReactNode，但 src 内部也处理了函数形式（typeof moreCustomize === 'function'），类型声明不完整",
+            "wrong": "// 传函数期望接收 morePos 参数，但 TypeScript 按 ReactNode 检查会报类型错误\nmoreCustomize={(morePos) => <span>+{morePos}</span>}",
+            "right": "// 如需传函数绕过类型检查需显式 as any，或直接传静态 ReactNode\nmoreCustomize={<span>更多</span>}"
+        },
+        {
+            "issue": "AutoBoxProps 有索引签名 [name: string]: any，传错误 prop 名不会报 TS 错误",
+            "wrong": "// 拼写错误不会被 TS 捕获\n<AutoBox list={list} closeMore={() => {}} />  // closeMore 应为 onCloseMore，静默失效",
+            "right": "// 注意使用正确 prop 名\n<AutoBox list={list} onCloseMore={() => {}} />"
+        }
+    ],
+    "mapping": {
+        "realComponent": "AutoBox",
+        "adapter": null
+    }
+}

package/lib/AutoBox/index.d.ts

@@ -6,7 +6,7 @@ export interface AutoBoxProps {
     /** style */
     style?: React.CSSProperties;
     /** list选项 */
-    list?: any[];
+    list?: React.ReactNode[];
     /** 指定渲染几项,存在这个参数,则不自适应 */
     showNum?: number;
     /** 下拉框样式 */
@@ -18,7 +18,7 @@ export interface AutoBoxProps {
     /** 打开下拉框 */
     openMore?: boolean;
     /** 定位元素 */
-    anchorEl?: any;
+    anchorEl?: HTMLElement | null;
     /** 关闭弹窗 */
     onCloseMore?: () => void;
     /** 显示更多 */
@@ -27,7 +27,7 @@ export interface AutoBoxProps {
     trigger?: 'click' | 'hover';
     /** 位置 */
     placement?: TooltipPlacement;
-    [name: string]: any;
+    [name: string]: unknown;
 }
 export declare const AutoBox: FunctionComponent<AutoBoxProps>;
 export default AutoBox;

package/lib/AutoBox/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const s=require("../_virtual/jsx-runtime.js"),t=require("react"),_=require("../Popover/index.js"),A=require("./protal.js"),F=require("../node_modules/@para-ui/icons/More/index.js"),N=require("../GlobalContext/constant.js");;/* empty css            */const w=i=>{const{className:x,list:o=[],popoverClassName:p,moreCustomize:l,anchorEl:v,hideMore:q=!1,showNum:m,onCloseMore:j,onShowMore:u,style:P,trigger:S="click",placement:$="bottomLeft"}=i,M=t.useRef(null),[r,f]=t.useState(null),[E,d]=t.useState(!1),[h]=t.useState({}),z=t.useRef();t.useEffect(()=>{i.openMore!==void 0&&d(i.openMore)},[i.openMore]),t.useEffect(()=>{if(i.showNum===void 0)return a(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a),clearTimeout(h.timer)}},[o]),t.useEffect(()=>{m!==void 0&&(f(m),window.removeEventListener("resize",a))},[m]),t.useEffect(()=>{r!==null&&o.length>r?u&&u(!0):u&&u(!1)},[o,r,u]);const y=e=>{if(e)return d(!0);c()},c=()=>{d(!1),j&&j()},D=()=>{c()},C=e=>{if(e===null||e===0)return;e===void 0&&(e=o.length);const n=M.current;if(n)if(n.scrollWidth>n.clientWidth){const b=Number(e)-1;f(b),C(b)}else o.length<=e&&D()},a=()=>{clearTimeout(h.timer),c(),h.timer=setTimeout(()=>{f(o.length),C()},100)},L=()=>{let e=`${N.$prefixCls}-auto-box`;return x&&(e+=` ${x}`),e},g=()=>{let e=`${N.$prefixCls}-auto-box-popover`;return p&&(e+=` ${p}`),e},R=()=>s.jsxRuntimeExports.jsx("div",{className:"auto-box-popover-content",children:o&&o.map((e,n)=>r!==null&&r>n?null:s.jsxRuntimeExports.jsx(t.Fragment,{children:e},n))}),T=()=>{if(r!==null&&o.length>r&&!q){const e=()=>l?typeof l=="function"?l(r):l:s.jsxRuntimeExports.jsx(F.More,{});return s.jsxRuntimeExports.jsx(_.Popover,{open:E,content:R(),overlayClassName:g(),placement:$,trigger:S,onVisibleChange:y,children:s.jsxRuntimeExports.jsx("div",{className:"auto-box-more",ref:z,children:e()})})}},B=()=>{if(v&&E)return s.jsxRuntimeExports.jsx(A.Protal,{className:g(),anchorEl:v,onClose:c,children:R()})};return s.jsxRuntimeExports.jsxs("div",{className:L(),style:P,ref:M,children:[o.map((e,n)=>r!==null&&r<=n?null:s.jsxRuntimeExports.jsx(t.Fragment,{children:e},n)),T(),B()]})};exports.AutoBox=w;exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const s=require("../_virtual/jsx-runtime.js"),t=require("react"),_=require("../Popover/index.js"),A=require("./protal.js"),F=require("../node_modules/@para-ui/icons/More/index.js"),N=require("../GlobalContext/constant.js");;/* empty css            */const w=i=>{const{className:x,list:o=[],popoverClassName:p,moreCustomize:l,anchorEl:v,hideMore:q=!1,showNum:m,onCloseMore:j,onShowMore:u,style:P,trigger:S="click",placement:$="bottomLeft"}=i,M=t.useRef(null),[r,f]=t.useState(null),[E,d]=t.useState(!1),[h]=t.useState({}),z=t.useRef(null);t.useEffect(()=>{i.openMore!==void 0&&d(i.openMore)},[i.openMore]),t.useEffect(()=>{if(i.showNum===void 0)return a(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a),clearTimeout(h.timer)}},[o]),t.useEffect(()=>{m!==void 0&&(f(m),window.removeEventListener("resize",a))},[m]),t.useEffect(()=>{r!==null&&o.length>r?u&&u(!0):u&&u(!1)},[o,r,u]);const y=e=>{if(e)return d(!0);c()},c=()=>{d(!1),j&&j()},D=()=>{c()},C=e=>{if(e===null||e===0)return;e===void 0&&(e=o.length);const n=M.current;if(n)if(n.scrollWidth>n.clientWidth){const b=Number(e)-1;f(b),C(b)}else o.length<=e&&D()},a=()=>{clearTimeout(h.timer),c(),h.timer=setTimeout(()=>{f(o.length),C()},100)},L=()=>{let e=`${N.$prefixCls}-auto-box`;return x&&(e+=` ${x}`),e},g=()=>{let e=`${N.$prefixCls}-auto-box-popover`;return p&&(e+=` ${p}`),e},R=()=>s.jsxRuntimeExports.jsx("div",{className:"auto-box-popover-content",children:o&&o.map((e,n)=>r!==null&&r>n?null:s.jsxRuntimeExports.jsx(t.Fragment,{children:e},n))}),T=()=>{if(r!==null&&o.length>r&&!q){const e=()=>l?typeof l=="function"?l(r):l:s.jsxRuntimeExports.jsx(F.More,{});return s.jsxRuntimeExports.jsx(_.Popover,{open:E,content:R(),overlayClassName:g(),placement:$,trigger:S,onVisibleChange:y,children:s.jsxRuntimeExports.jsx("div",{className:"auto-box-more",ref:z,children:e()})})}},B=()=>{if(v&&E)return s.jsxRuntimeExports.jsx(A.Protal,{className:g(),anchorEl:v,onClose:c,children:R()})};return s.jsxRuntimeExports.jsxs("div",{className:L(),style:P,ref:M,children:[o.map((e,n)=>r!==null&&r<=n?null:s.jsxRuntimeExports.jsx(t.Fragment,{children:e},n)),T(),B()]})};exports.AutoBox=w;exports.default=w;
 //# sourceMappingURL=index.js.map

package/lib/AutoBox/protal.d.ts

@@ -2,11 +2,11 @@ import { FunctionComponent, ReactNode } from 'react';
 export interface ProtalBoxProps {
     className?: string;
     /** 定位元素 */
-    anchorEl?: any;
+    anchorEl?: HTMLElement | null;
     /** 关闭事件 */
     onClose?: () => void;
     children?: ReactNode;
-    [name: string]: any;
+    [name: string]: unknown;
 }
 export declare const Protal: FunctionComponent<ProtalBoxProps>;
 export default Protal;

package/lib/AutoBox/protal.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../_virtual/jsx-runtime.js"),s=require("react"),C=require("react-dom"),S=require("@snack-kit/lib"),h=require("../GlobalContext/constant.js"),p=x=>{const{children:R,className:u,anchorEl:a,onClose:l}=x,[g,w]=s.useState({}),c=s.useRef({uuid:`${h.$prefixCls}-protal-box-content-${S.UUID()}`}),r=s.useRef(),i=s.useRef();s.useEffect(()=>(E(),window.addEventListener("click",d),()=>{r&&r.current&&r.current.remove(),window.removeEventListener("click",d)}),[]);const j=(t,n)=>{const e=t.matches||t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector;for(;t&&!e.call(t,n);)t=t.parentElement;return t},d=t=>{if(!c.current)return;j(t.target,`.${c.current.uuid}`)||l&&l()},E=()=>{if(!a||!i.current)return;const t=a.getBoundingClientRect(),n=i.current.getBoundingClientRect(),e={opacity:1,left:t.left,top:t.top+t.height},f=window.innerHeight,m=window.innerWidth;e.left+n.width>m&&(e.left=m-n.width-8,e.left<0&&(e.left=0)),e.top+n.height>f&&(e.top=f-n.height-8,e.top<0&&(e.top=0)),w(e)},b=()=>{let t=`${h.$prefixCls}-protal-box`;return u&&(t+=` ${u}`),t},v=()=>o.jsxRuntimeExports.jsxs("div",{className:b(),ref:r,children:[o.jsxRuntimeExports.jsx("div",{className:"protal-mask"}),o.jsxRuntimeExports.jsx("div",{className:`protal-content ${c.current.uuid}`,style:g,ref:i,children:R})]});return o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{children:C.createPortal(v(),document.getElementsByTagName("body")[0])})};exports.Protal=p;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../_virtual/jsx-runtime.js"),c=require("react"),C=require("react-dom"),S=require("@snack-kit/lib"),h=require("../GlobalContext/constant.js"),p=x=>{const{children:R,className:a,anchorEl:d,onClose:f}=x,[g,w]=c.useState({}),l=c.useRef({uuid:`${h.$prefixCls}-protal-box-content-${S.UUID()}`}),i=c.useRef(null),u=c.useRef(null);c.useEffect(()=>(E(),window.addEventListener("click",m),()=>{i&&i.current&&i.current.remove(),window.removeEventListener("click",m)}),[]);const j=(e,o)=>{if(!e)return null;const t=e,r=t.matches||t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector;if(!r)return null;let n=e;for(;n&&!r.call(n,o);)n=n.parentElement;return n},m=e=>{if(!l.current)return;j(e.target,`.${l.current.uuid}`)||f&&f()},E=()=>{if(!d||!u.current)return;const e=d.getBoundingClientRect(),o=u.current.getBoundingClientRect(),t={opacity:1,left:e.left,top:e.top+e.height},r=window.innerHeight,n=window.innerWidth;t.left+o.width>n&&(t.left=n-o.width-8,t.left<0&&(t.left=0)),t.top+o.height>r&&(t.top=r-o.height-8,t.top<0&&(t.top=0)),w(t)},b=()=>{let e=`${h.$prefixCls}-protal-box`;return a&&(e+=` ${a}`),e},v=()=>s.jsxRuntimeExports.jsxs("div",{className:b(),ref:i,children:[s.jsxRuntimeExports.jsx("div",{className:"protal-mask"}),s.jsxRuntimeExports.jsx("div",{className:`protal-content ${l.current.uuid}`,style:g,ref:u,children:R})]});return s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:C.createPortal(v(),document.getElementsByTagName("body")[0])})};exports.Protal=p;exports.default=p;
 //# sourceMappingURL=protal.js.map

package/lib/AutoButton/component.json

@@ -0,0 +1,109 @@
+{
+    "name": "AutoButton",
+    "category": "General",
+    "description": "自适应按钮组，根据容器宽度自动折叠超出的按钮到'更多'下拉弹层，list 每项支持 buttonType 切换图标/分割/普通三种形态",
+    "semantic": {
+        "intent": [
+            "按钮收纳",
+            "响应式操作"
+        ],
+        "useCases": [
+            "操作栏",
+            "批量操作",
+            "编辑器工具栏"
+        ],
+        "riskLevel": "low"
+    },
+    "variants": {
+        "default": {
+            "meaning": "默认样式"
+        }
+    },
+    "states": [
+        "default",
+        "expanded"
+    ],
+    "idealProps": {
+        "list": {
+            "type": "array",
+            "description": "按钮项数据数组,每项为 AutoButtonItemProps(union: ButtonProps | IconButtonProps | SplitButtonProps + 扩展 buttonType/popConfirmProps)"
+        },
+        "marginRight": {
+            "type": "string",
+            "default": "16px",
+            "description": "按钮间右间距"
+        },
+        "moreProps": {
+            "type": "object",
+            "objectShape": {
+                "buttonType": { "type": "'icon'", "description": "强制图标模式（不显示文字）" },
+                "icon": { "type": "ReactNode", "description": "自定义'更多'图标（默认 MoreVert）" },
+                "children": { "type": "ReactNode", "description": "自定义'更多'按钮文字内容" }
+            },
+            "description": "溢出折叠后'更多'按钮的展示形态({ buttonType?: 'icon'; icon?: ReactNode; children?: ReactNode })"
+        },
+        "morePlacement": {
+            "type": "string",
+            "default": "bottomLeft",
+            "description": "'更多'浮层弹出位置(透传 Dropdown placement)"
+        },
+        "moreMaxWidth": {
+            "type": "string",
+            "default": "500px",
+            "description": "'更多'浮层最大宽度,超出自动换行"
+        },
+        "trigger": {
+            "type": "array",
+            "default": "['hover']",
+            "description": "'更多'浮层触发方式数组('click' | 'hover' | 'contextMenu')[]"
+        }
+    },
+    "do": [
+        "在工具栏中使用收纳溢出按钮",
+        "保持主要操作可见，把低频操作放到 list 后面让其优先被折叠",
+        "每个 list 项用 buttonType 区分形态：不传=普通按钮 / 'icon'=图标按钮 / 'split'=分割按钮",
+        "需要二次确认时用 list 项的 popConfirmProps 属性透传 PopConfirm 参数"
+    ],
+    "dont": [
+        "主要操作被收纳进更多（应调整 list 顺序）",
+        "按钮过多时不分优先级",
+        "在 list 每项上传 buttonType='split' 时忘记提供 options 字段——split 按钮的子项来自 options"
+    ],
+    "events": {
+        "list[].onClick": {
+            "signature": "(event: React.MouseEvent<HTMLButtonElement>) => void",
+            "asyncSupported": false,
+            "examples": [
+                "每项 onClick 挂在 AutoButtonItemProps 上：list={[{ children: '编辑', onClick: handleEdit }]}",
+                "溢出后在'更多'弹层中点击时，AutoButton 内部会代理调用该项的 onClick",
+                "需要区分是哪个按钮被点击：在每项的 onClick 闭包里引用各自的业务 id"
+            ],
+            "commonMistakes": [
+                "期望 AutoButton 暴露统一 onItemClick(index, item) 回调——AutoButton 无此 prop，onClick 挂在每项上",
+                "buttonType='split' 的子项点击时，src 会把 parentItem.onClick 也触发一次——注意避免重复处理",
+                "弹层中点击时 event.currentTarget 是弹层内 Button，不是原始按钮 DOM，不要依赖 currentTarget 做 DOM 查找"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "AutoButtonItemProps 是 ButtonProps | IconButtonProps | SplitButtonProps 的 union，TypeScript 需要用 buttonType 做类型守卫",
+            "wrong": "// 直接访问 split 专属字段\nconst item: AutoButtonItemProps = { buttonType: 'split', options: [...] };  // options 不在 ButtonProps 上，TS 报错",
+            "right": "// 断言为具体类型\nimport type { SplitButtonProps } from '@para-ui/core/Button';\nconst item: AutoButtonItemProps = { buttonType: 'split', ...(splitProps as SplitButtonProps) };"
+        },
+        {
+            "issue": "trigger prop 是数组类型，不是字符串，与部分其他组件的字符串 trigger 不同",
+            "wrong": "<AutoButton list={list} trigger='hover' />  // 期望字符串，实际是 string[] 类型报错",
+            "right": "<AutoButton list={list} trigger={['hover']} />  // 数组形式"
+        },
+        {
+            "issue": "list 的 popConfirmProps 是可选字段，传了但 items 没有此字段时 TypeScript 不报错（union 类型），但 runtime 才生效",
+            "wrong": "// 误以为所有 list 项都有 popConfirmProps 类型定义，直接访问\nconst confirm = item.popConfirmProps;  // 可能 undefined，需要 ?. 操作符",
+            "right": "const confirm = (item as AutoButtonItemProps).popConfirmProps;  // 先断言再访问，配合 ?. 操作符"
+        }
+    ],
+    "mapping": {
+        "realComponent": "AutoButton",
+        "adapter": null
+    }
+}

package/lib/AutoButton/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const r=require("../_virtual/jsx-runtime.js"),u=require("react"),l=require("../Button/index.js"),D=require("../AutoTips/index.js"),F=require("../PopConfirm/index.js"),S=require("../node_modules/@para-ui/icons/MoreVert/index.js"),g=require("../GlobalContext/constant.js"),w=require("../Dropdown/index.js"),I=require("../Tooltip/index.js"),E=require("clsx"),W=require("../GlobalContext/useFormatMessage.js"),O=require("./lang/index.js"),z=require("../Utils/Hooks/useResizeObserver.js");;/* empty css            */const B=q=>{const{className:y,style:C,list:o,marginRight:x="16px",moreProps:v,morePlacement:P="bottomLeft",moreMaxWidth:M="500px",trigger:T=["hover"]}=q,N=W.default("AutoButton",O.default),[s,m]=u.useState(null),c=u.useRef(null),a=u.useRef({timer:null});z.default({dom:c.current,cb:()=>f()}),u.useEffect(()=>{f()},[o]);const f=()=>{a.current.timer&&clearTimeout(a.current.timer),a.current.timer=setTimeout(()=>{m(o.length),o.length>1&&j()},100)},j=t=>{if(t===null||t===0)return;t===void 0&&(t=o.length);const e=c.current;if(e&&e.scrollWidth>e.clientWidth){const n=Number(t)-1;m(n),j(n)}},_=(t,e,n)=>{if(n){n.onClick&&n.onClick(e);return}t.onClick&&t.onClick(e)},h=(t,e,n)=>r.jsxRuntimeExports.jsx(l.Button,{variant:"text",disabled:t.disabled,loading:t.loading,className:E("item-btn",{"item-btn-disabled":t.disabled}),onClick:i=>{t.disabled||_(t,i,n)},children:r.jsxRuntimeExports.jsx(D.default,{placement:"top-start",children:t[e]})}),b=(t,e,n)=>t.disabled&&t.disabledTooltip?r.jsxRuntimeExports.jsx(I.Tooltip,{disabled:!0,...t.disabledTooltip,children:h(t,e,n)}):h(t,e,n),$=()=>r.jsxRuntimeExports.jsx("div",{className:"auto-button-dropdown-content",style:{maxWidth:M},children:o&&o.map((t,e)=>s!==null&&s>e?null:t.buttonType!=="split"?r.jsxRuntimeExports.jsx(u.Fragment,{children:d(t,b(t,"children"))},e):r.jsxRuntimeExports.jsx(u.Fragment,{children:t.options?.map((n,i)=>Array.isArray(n)?null:r.jsxRuntimeExports.jsx(u.Fragment,{children:d(n,b(n,"label",t))},`${e}-${i}`))},e))}),k=()=>{if(!(s!==null&&o.length>s))return null;const{buttonType:t,icon:e=r.jsxRuntimeExports.jsx(S.MoreVert,{}),children:n=N({id:"more"})}=v||{};let i=r.jsxRuntimeExports.jsx(l.Button,{variant:"outlined",startIcon:e,className:"auto-button-more",children:n});return t==="icon"&&(i=r.jsxRuntimeExports.jsx(l.Button.IconButton,{variant:"outlined",className:"auto-button-more",children:e})),r.jsxRuntimeExports.jsx(w.Dropdown,{overlayClassName:`${g.$prefixCls}-auto-button-dropdown`,overlay:$(),placement:P,trigger:T,children:i})},d=(t,e)=>t.popConfirmProps?r.jsxRuntimeExports.jsx(F.PopConfirm,{...t.popConfirmProps,children:e}):e;return r.jsxRuntimeExports.jsxs("div",{className:E(y,`${g.$prefixCls}-auto-button`),style:C,ref:c,children:[o.map((t,e)=>{if(s!==null&&s<=e)return null;const{buttonType:n,popConfirmProps:i,...A}=t;let p=l.Button;const R={marginRight:s===e+1?0:x};return s!==null&&o.length>s&&(R.marginRight=x),n==="icon"&&(p=l.Button.IconButton),n==="split"&&(p=l.Button.SplitButton),r.jsxRuntimeExports.jsx(u.Fragment,{children:d(t,r.jsxRuntimeExports.jsx(p,{...A,style:R}))},e)}),k()]})};exports.AutoButton=B;exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const r=require("../_virtual/jsx-runtime.js"),u=require("react"),l=require("../Button/index.js"),D=require("../AutoTips/index.js"),F=require("../PopConfirm/index.js"),S=require("../node_modules/@para-ui/icons/MoreVert/index.js"),g=require("../GlobalContext/constant.js"),w=require("../Dropdown/index.js"),I=require("../Tooltip/index.js"),E=require("clsx"),W=require("../GlobalContext/useFormatMessage.js"),O=require("./lang/index.js"),z=require("../Hooks/useResizeObserver.js");;/* empty css            */const B=q=>{const{className:y,style:C,list:o,marginRight:x="16px",moreProps:v,morePlacement:P="bottomLeft",moreMaxWidth:M="500px",trigger:T=["hover"]}=q,N=W.default("AutoButton",O.default),[s,m]=u.useState(null),c=u.useRef(null),a=u.useRef({timer:null});z.default({dom:c.current,cb:()=>f()}),u.useEffect(()=>{f()},[o]);const f=()=>{a.current.timer&&clearTimeout(a.current.timer),a.current.timer=setTimeout(()=>{m(o.length),o.length>1&&j()},100)},j=t=>{if(t===null||t===0)return;t===void 0&&(t=o.length);const e=c.current;if(e&&e.scrollWidth>e.clientWidth){const n=Number(t)-1;m(n),j(n)}},_=(t,e,n)=>{if(n){n.onClick&&n.onClick(e);return}t.onClick&&t.onClick(e)},h=(t,e,n)=>r.jsxRuntimeExports.jsx(l.Button,{variant:"text",disabled:t.disabled,loading:t.loading,className:E("item-btn",{"item-btn-disabled":t.disabled}),onClick:i=>{t.disabled||_(t,i,n)},children:r.jsxRuntimeExports.jsx(D.default,{placement:"top-start",children:t[e]})}),b=(t,e,n)=>t.disabled&&t.disabledTooltip?r.jsxRuntimeExports.jsx(I.Tooltip,{disabled:!0,...t.disabledTooltip,children:h(t,e,n)}):h(t,e,n),$=()=>r.jsxRuntimeExports.jsx("div",{className:"auto-button-dropdown-content",style:{maxWidth:M},children:o&&o.map((t,e)=>s!==null&&s>e?null:t.buttonType!=="split"?r.jsxRuntimeExports.jsx(u.Fragment,{children:d(t,b(t,"children"))},e):r.jsxRuntimeExports.jsx(u.Fragment,{children:t.options?.map((n,i)=>Array.isArray(n)?null:r.jsxRuntimeExports.jsx(u.Fragment,{children:d(n,b(n,"label",t))},`${e}-${i}`))},e))}),k=()=>{if(!(s!==null&&o.length>s))return null;const{buttonType:t,icon:e=r.jsxRuntimeExports.jsx(S.MoreVert,{}),children:n=N({id:"more"})}=v||{};let i=r.jsxRuntimeExports.jsx(l.Button,{variant:"outlined",startIcon:e,className:"auto-button-more",children:n});return t==="icon"&&(i=r.jsxRuntimeExports.jsx(l.Button.IconButton,{variant:"outlined",className:"auto-button-more",children:e})),r.jsxRuntimeExports.jsx(w.Dropdown,{overlayClassName:`${g.$prefixCls}-auto-button-dropdown`,overlay:$(),placement:P,trigger:T,children:i})},d=(t,e)=>t.popConfirmProps?r.jsxRuntimeExports.jsx(F.PopConfirm,{...t.popConfirmProps,children:e}):e;return r.jsxRuntimeExports.jsxs("div",{className:E(y,`${g.$prefixCls}-auto-button`),style:C,ref:c,children:[o.map((t,e)=>{if(s!==null&&s<=e)return null;const{buttonType:n,popConfirmProps:i,...A}=t;let p=l.Button;const R={marginRight:s===e+1?0:x};return s!==null&&o.length>s&&(R.marginRight=x),n==="icon"&&(p=l.Button.IconButton),n==="split"&&(p=l.Button.SplitButton),r.jsxRuntimeExports.jsx(u.Fragment,{children:d(t,r.jsxRuntimeExports.jsx(p,{...A,style:R}))},e)}),k()]})};exports.AutoButton=B;exports.default=B;
 //# sourceMappingURL=index.js.map

package/lib/AutoTips/autoTipsMultiline/index.d.ts

@@ -6,7 +6,7 @@ export interface AutoTipsMultilineProps extends Omit<AutoTipsProps, 'children'>
     /** 行数 */
     line?: number;
     /** 刷新 */
-    refresh?: any;
+    refresh?: () => void;
 }
 declare const AutoTipsMultiline: FunctionComponent<AutoTipsMultilineProps>;
 export default AutoTipsMultiline;

package/lib/AutoTips/autoTipsMultiline/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const r=require("../../_virtual/jsx-runtime.js"),l=require("react"),f=require("../../GlobalContext/constant.js"),M=require("../../Tooltip/index.js"),w=require("../../Utils/Hooks/useResizeObserver.js");;/* empty css            */const y=v=>{const{children:t,arrow:b=!1,placement:E="bottom-start",tips:d="",className:h="",interactive:T=!0,tipMaxWidth:O,line:m=2,refresh:A,style:C}=v,a=l.useRef(null),u=l.useRef([]),[x,N]=l.useState(),o=l.useRef({line:m,tips:d});o.current.line=m,o.current.tips=d;const[W,g]=l.useState("");w.default({dom:a.current,cb:()=>R()}),l.useEffect(()=>{R()},[t,A]);const R=()=>{if(!t)return;const e=[];let s=!1;const i=a?.current?.clientWidth||0;let p=0,c=0;for(let n=0;n<u.current.length;n++){const j=u.current[n].offsetWidth;if(p+=j,p>i)if(e.length<o.current.line-1)e.push(t.slice(c,n)),c=n,p=j,n===u.current.length-1&&(e.length<o.current.line||(s=!0,g(o.current.tips||t)),e.push(t.slice(c,t.length)));else{s=!0,g(o.current.tips||t),e.push(t.slice(c,t.length));break}else n===u.current.length-1&&e.push(t.slice(c,t.length))}N({lineArr:e,showTooltip:s})},$=l.useMemo(()=>(u.current=[],r.jsxRuntimeExports.jsx("div",{className:"hidden",children:t?.split("").map((e,s)=>r.jsxRuntimeExports.jsx("span",{ref:i=>i&&u.current.push(i),children:e},s))})),[t]),q=()=>{if(navigator.userAgent.indexOf("Safari")>-1)return!0},S=()=>{let e=`${f.$prefixCls}-auto-tips-multiline`;return q()&&(e+=` ${f.$prefixCls}-auto-tips-multiline-safari`),h&&(e+=` ${h}`),e};return r.jsxRuntimeExports.jsx("div",{ref:a,className:S(),style:C,children:r.jsxRuntimeExports.jsx(M.Tooltip,{arrow:b,title:W,placement:E,interactive:T,boundariesElement:"viewport",overlayClassName:`${f.$prefixCls}-auto-tips-multiline-tooltip`,children:r.jsxRuntimeExports.jsxs("div",{className:"auto-tips-multiline-content-box",children:[r.jsxRuntimeExports.jsx("div",{className:"auto-tips-multiline-content",children:x?.lineArr.map((e,s)=>{let i="line-text";return s===x.lineArr.length-1&&(i+=" last-line"),r.jsxRuntimeExports.jsx("div",{className:i,children:e},s)})}),$]})})})};exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const r=require("../../_virtual/jsx-runtime.js"),l=require("react"),f=require("../../GlobalContext/constant.js"),M=require("../../Tooltip/index.js"),w=require("../../Hooks/useResizeObserver.js");;/* empty css            */const y=v=>{const{children:t,arrow:b=!1,placement:E="bottom-start",tips:d="",className:h="",interactive:T=!0,tipMaxWidth:O,line:m=2,refresh:A,style:C}=v,a=l.useRef(null),u=l.useRef([]),[x,N]=l.useState(),o=l.useRef({line:m,tips:d});o.current.line=m,o.current.tips=d;const[W,g]=l.useState("");w.default({dom:a.current,cb:()=>R()}),l.useEffect(()=>{R()},[t,A]);const R=()=>{if(!t)return;const e=[];let s=!1;const i=a?.current?.clientWidth||0;let p=0,c=0;for(let n=0;n<u.current.length;n++){const j=u.current[n].offsetWidth;if(p+=j,p>i)if(e.length<o.current.line-1)e.push(t.slice(c,n)),c=n,p=j,n===u.current.length-1&&(e.length<o.current.line||(s=!0,g(o.current.tips||t)),e.push(t.slice(c,t.length)));else{s=!0,g(o.current.tips||t),e.push(t.slice(c,t.length));break}else n===u.current.length-1&&e.push(t.slice(c,t.length))}N({lineArr:e,showTooltip:s})},$=l.useMemo(()=>(u.current=[],r.jsxRuntimeExports.jsx("div",{className:"hidden",children:t?.split("").map((e,s)=>r.jsxRuntimeExports.jsx("span",{ref:i=>i&&u.current.push(i),children:e},s))})),[t]),q=()=>{if(navigator.userAgent.indexOf("Safari")>-1)return!0},S=()=>{let e=`${f.$prefixCls}-auto-tips-multiline`;return q()&&(e+=` ${f.$prefixCls}-auto-tips-multiline-safari`),h&&(e+=` ${h}`),e};return r.jsxRuntimeExports.jsx("div",{ref:a,className:S(),style:C,children:r.jsxRuntimeExports.jsx(M.Tooltip,{arrow:b,title:W,placement:E,interactive:T,boundariesElement:"viewport",overlayClassName:`${f.$prefixCls}-auto-tips-multiline-tooltip`,children:r.jsxRuntimeExports.jsxs("div",{className:"auto-tips-multiline-content-box",children:[r.jsxRuntimeExports.jsx("div",{className:"auto-tips-multiline-content",children:x?.lineArr.map((e,s)=>{let i="line-text";return s===x.lineArr.length-1&&(i+=" last-line"),r.jsxRuntimeExports.jsx("div",{className:i,children:e},s)})}),$]})})})};exports.default=y;
 //# sourceMappingURL=index.js.map

package/lib/AutoTips/component.json

@@ -0,0 +1,121 @@
+{
+    "name": "AutoTips",
+    "category": "Data Display",
+    "description": "文本溢出自动提示——内容超出容器宽度时自动弹出 Tooltip，不超出时不显示；beyondText 控制 Tooltip 显示文本还是原始 children 节点",
+    "semantic": {
+        "intent": [
+            "溢出提示",
+            "文本截断"
+        ],
+        "useCases": [
+            "表格单元格",
+            "列表项",
+            "标签"
+        ],
+        "riskLevel": "low"
+    },
+    "variants": {
+        "default": {
+            "meaning": "默认样式"
+        }
+    },
+    "states": [
+        "default",
+        "overflow"
+    ],
+    "idealProps": {
+        "children": {
+            "type": "ReactNode",
+            "description": "被截断的内容；单行模式不限制类型，多行模式（AutoTipsMultiline）限制为 string"
+        },
+        "tips": {
+            "type": "ReactNode",
+            "description": "超出时 Tooltip 显示的内容。**不传时**：beyondText=true（默认）显示 tipsElm.innerText；beyondText=false 显示原始 children。**传了 tips**：超出时直接显示 tips，忽略 beyondText"
+        },
+        "beyondText": {
+            "type": "boolean",
+            "default": true,
+            "description": "未传 tips 时的 Tooltip 内容：true=显示文本（innerText）；false=显示原始 children 节点"
+        },
+        "placement": {
+            "type": "enum",
+            "values": [
+                "top",
+                "top-start",
+                "top-end",
+                "bottom",
+                "bottom-start",
+                "bottom-end",
+                "left",
+                "left-start",
+                "left-end",
+                "right",
+                "right-start",
+                "right-end"
+            ],
+            "default": "bottom-start",
+            "description": "Tooltip 弹出方向（默认 bottom-start）"
+        },
+        "tipMaxWidth": {
+            "type": "number | string",
+            "description": "Tooltip 最大宽度"
+        },
+        "arrow": {
+            "type": "boolean",
+            "default": false,
+            "description": "Tooltip 是否显示箭头"
+        },
+        "interactive": {
+            "type": "boolean",
+            "default": true,
+            "description": "Tooltip 是否可交互（鼠标移入 Tooltip 不消失）"
+        }
+    },
+    "do": [
+        "在表格单元格中自动处理长文本截断+提示",
+        "设置合理的 tipMaxWidth 避免 Tooltip 过宽",
+        "多行截断场景使用导出的 AutoTipsMultiline 子组件（children 需为 string）"
+    ],
+    "dont": [
+        "在短文本场景中滥用（AutoTips 每次 hover 都做宽度比较，短文本无截断时 Tooltip 不会弹，但有轻微性能开销）",
+        "tip 内容过于复杂（Tooltip 本身宽度有限，复杂节点用 Popover）",
+        "在多行模式（AutoTipsMultiline）下传 ReactNode 类型 children——多行限制为 string"
+    ],
+    "events": {
+        "onMouseOver (内部)": {
+            "signature": "内部 onMouseOver 事件，无对外暴露",
+            "asyncSupported": false,
+            "examples": [
+                "鼠标悬停时 AutoTips 内部调用 mouseHover() 比较 tipsElm 与 textElm 宽度决定是否展示 Tooltip",
+                "超出宽度时自动设置 tTips state，Tooltip title 随之更新",
+                "不超出时 tTips 为空字符串，Tooltip 不渲染弹层"
+            ],
+            "commonMistakes": [
+                "期望传 onOverflow 回调在超出时得到通知——AutoTips 不暴露此事件，如需监听请用 ResizeObserver 自行比较",
+                "期望 tips prop 变化时立即更新 Tooltip 内容——tips 变化会通过 useEffect 更新 tTips state，下次 hover 才生效",
+                "在 SSR 场景中使用 AutoTips——依赖 getBoundingClientRect()，SSR 下无 DOM 会报错"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "placement 的完整枚举是带方向后缀的 MUI Popper 风格（如 'top-start'），不是简单的 'top'/'bottom'",
+            "wrong": "<AutoTips placement='topLeft'>...</AutoTips>  // 'topLeft' 不在联合类型，TS 报错",
+            "right": "<AutoTips placement='top-start'>...</AutoTips>  // 使用连字符形式"
+        },
+        {
+            "issue": "AutoTips 导出了 AutoTipsMultiline 子组件，但二者 props 不同——多行模式 children 必须为 string",
+            "wrong": "import AutoTips from '@para-ui/core/AutoTips';\n// 误用 AutoTips（单行）做多行截断\n<AutoTips style={{ WebkitLineClamp: 2 }}><ReactNode/></AutoTips>  // 多行截断行为不可靠",
+            "right": "import { AutoTipsMultiline } from '@para-ui/core/AutoTips';\n<AutoTipsMultiline line={2}>{'长文本字符串'}</AutoTipsMultiline>"
+        },
+        {
+            "issue": "tips 不传时 tTips 由 mouseHover 计算，初始为空字符串——不要用 tips='' 期望清空提示",
+            "wrong": "<AutoTips tips=''>文本内容</AutoTips>  // tips='' 等价于 tips=undefined，超出时仍显示 innerText",
+            "right": "// 不传 tips 让 AutoTips 自动提取文本\n<AutoTips>文本内容</AutoTips>"
+        }
+    ],
+    "mapping": {
+        "realComponent": "AutoTips",
+        "adapter": null
+    }
+}

package/lib/Badge/component.json

@@ -0,0 +1,92 @@
+{
+    "name": "Badge",
+    "category": "Data Display",
+    "description": "出现在子元素角部的标记节点。**注意：不接受 antd 风格的 count / dot / maxCount / overflowCount 这些 prop**——本组件用 sign 作为核心标记内容（ReactNode），不传 sign 时退化为小圆点；传 null 时不显示",
+    "semantic": {
+        "intent": [
+            "展示数量",
+            "展示状态",
+            "吸引注意"
+        ],
+        "useCases": [
+            "消息计数",
+            "在线状态",
+            "新功能标记"
+        ],
+        "riskLevel": "low"
+    },
+    "variants": {
+        "default": {
+            "meaning": "默认（带 sign 内容时按 sign 渲染；不传 sign 退化为小圆点）"
+        }
+    },
+    "states": [
+        "visible",
+        "hidden"
+    ],
+    "idealProps": {
+        "children": {
+            "type": "ReactNode",
+            "description": "被徽标包裹的目标元素，Badge 会在其右上角（或 placement 指定位置）叠加徽标显示",
+            "required": false
+        },
+        "sign": {
+            "type": "ReactNode",
+            "description": "标记内容。**核心 prop**：传数字 / 字符串显示文本徽标；不传退化为小圆点；传 null 时整个徽标不显示（用于条件展示）"
+        },
+        "backgroundColor": {
+            "type": "string",
+            "description": "徽标背景色（CSS 颜色字符串）"
+        },
+        "color": {
+            "type": "string",
+            "description": "徽标文字色（CSS 颜色字符串）"
+        },
+        "offset": {
+            "type": "[number, number]",
+            "description": "徽标相对默认位置的像素偏移 [x, y]"
+        },
+        "placement": {
+            "type": "enum",
+            "values": [
+                "top-left",
+                "top-right",
+                "bottom-left",
+                "bottom-right"
+            ],
+            "default": "top-right",
+            "description": "徽标在子元素四角的位置"
+        }
+    },
+    "do": [
+        "用 sign 传 ReactNode 作为标记（数字 / 短字符串 / 状态点）",
+        "条件展示：传 sign={null} 隐藏徽标但保留 children 占位",
+        "超过 999 的数字自动显示 '999+'，无需业务方手动判断"
+    ],
+    "dont": [
+        "传 count / dot / maxCount / overflowCount / status——这些 antd 风格 prop 不存在",
+        "把核心内容放到 children——children 是被标记的目标元素，不是徽标本身"
+    ],
+    "events": {},
+    "typescriptPitfalls": [
+        {
+            "issue": "sign 是 ReactNode 而非数字，传 null 和不传 sign 含义不同",
+            "wrong": "// 期望隐藏徽标，传 sign={0} 却仍然显示数字 0\n<Badge sign={0}>图标</Badge>  // 0 是数字，显示'0'文本徽标",
+            "right": "// 传 null 才能隐藏徽标\n<Badge sign={null}>图标</Badge>  // handleType 返回 'null'，handleSign 返回 null 不渲染"
+        },
+        {
+            "issue": "offset 是 [number, number] 元组，不是对象 { x, y }",
+            "wrong": "<Badge offset={{ x: 4, y: -4 }}>图标</Badge>  // TS 类型报错：期望 [number, number]",
+            "right": "<Badge offset={[4, -4]}>图标</Badge>  // [offsetX, offsetY]，正数向右/向下"
+        },
+        {
+            "issue": "不要传 antd 风格的 count / dot / maxCount / overflowCount prop——它们不存在于 BadgeProps",
+            "wrong": "<Badge count={5} dot={false}>图标</Badge>  // count/dot 不在 BadgeProps，静默失效",
+            "right": "<Badge sign={5}>图标</Badge>  // para-ui 用 sign 作为核心标记内容"
+        }
+    ],
+    "mapping": {
+        "realComponent": "Badge",
+        "adapter": null
+    }
+}