@cuvp1225/antd 0.2.73 → 0.2.75

package/lib/esm/components/index.js

@@ -16,6 +16,9 @@ export { Typography, Title, Paragraph, Text } from './typography';
 export { Columns, Column } from './columns';
 export { Row1 } from './row';
 export { Popconfirm } from './popconfirm';
+export { Popover } from './popover';
+export { Tooltip } from './tooltip';
+export { Result } from './result';
 export { Drawer } from "./drawer";
 export { DatePicker } from "./date-picker";
 export { Radio, RadioGroup } from "./radio";
@@ -32,3 +35,29 @@ export { Timeline, TimelineItem } from './timeline';
 export { Collapse, CollapsePanel } from './collapse';
 export { List, ListItem } from './list';
 export { Dropdown, DropdownButton } from './dropdown';
+export { Upload } from "./upload";
+export { Skeleton } from "./skeleton";
+export { Spin } from './spin';
+export { Anchor } from './anchor';
+export { Calendar } from './calendar';
+export { Carousel } from './carousel';
+export { Divider } from './divider';
+export { Badge } from './badge';
+export { Pagination } from './pagination';
+export { Table } from './table';
+export { Card } from './card';
+export { Tag } from './tag';
+export { Avatar } from './avatar';
+export { Empty } from './empty';
+export { Slider } from './slider';
+export { Rate } from './rate';
+export { Comment } from './comment';
+export { TimePicker } from './time-picker';
+export { Transfer } from './transfer';
+export { Statistic } from './statistic';
+export { PageHeader } from './pageheader';
+export { Switch } from './switch';
+export { AutoComplete } from './auto-complete';
+export { Mentions } from './mentions';
+export { TreeSelect } from './tree-select';
+export { Image } from './image';

package/lib/esm/components/mentions.d.ts

@@ -0,0 +1,3 @@
+import { MentionProps } from 'antd';
+import React from 'react';
+export declare const Mentions: React.ForwardRefExoticComponent<Omit<MentionProps & React.RefAttributes<import("antd/lib/mentions").MentionsRef> & import("@music163/tango-boot").TangoComponentProps, "ref"> & React.RefAttributes<unknown>>;

package/lib/esm/components/mentions.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import { Mentions as AntMentions } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function MentionsDesigner(_a) {
+    var _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const mentionsRef = useRef(null);
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-mentions');
+            // console.log('spinNode', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    return (React.createElement("div", { ref: mentionsRef },
+        React.createElement(AntMentions, Object.assign({ "data-dnd": dataDnd, "data-id": dataId, style: style }, rest))));
+}
+export const Mentions = defineComponent(AntMentions, {
+    name: 'Mentions',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            // console.log("Mentions:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(MentionsDesigner, Object.assign({}, designerProps, originalProps));
+        }
+    }
+});

package/lib/esm/components/pageheader.d.ts

@@ -0,0 +1,3 @@
+import { PageHeaderProps } from 'antd';
+import React from 'react';
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & import("@music163/tango-boot").TangoComponentProps & React.RefAttributes<unknown>>;

package/lib/esm/components/pageheader.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+import { PageHeader as AntPageHeader } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function PageHeaderDesigner(_a) {
+    var { children, title } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", "title", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const pageHeaderRef = useRef(null);
+    // 监听弹层显示事件
+    // const handleVisibleChange = (visible: boolean) => {
+    //   console.log('handleVisibleChange', visible);
+    //   if (visible) {
+    //     // 使用微任务确保弹层已渲染
+    //     Promise.resolve().then(() => {
+    //       const popoverNode = document.querySelector('.ant-popover-placement-top');
+    //       console.log('popoverNode' ,popoverNode)
+    //       if (popoverNode) {
+    //         popoverNode.setAttribute('data-dnd', dataDnd);
+    //         popoverNode.setAttribute('data-id', dataId);
+    //       }
+    //     });
+    //   }
+    // };
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-page-header');
+            console.log('pageHeader', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    return (React.createElement("div", { ref: pageHeaderRef },
+        React.createElement(AntPageHeader, Object.assign({ title: title, "data-dnd": dataDnd, "data-id": dataId }, rest), children)));
+}
+export const PageHeader = defineComponent(AntPageHeader, {
+    name: 'PageHeader',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            console.log("PageHeader:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(PageHeaderDesigner, Object.assign({ title: "\u4E00\u7EA7\u6807\u9898" }, designerProps, originalProps));
+        },
+    },
+    // designerConfig: {
+    // },
+});

package/lib/esm/components/pagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from 'antd';
+import React from 'react';
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & import("@music163/tango-boot").TangoComponentProps & React.RefAttributes<unknown>>;

package/lib/esm/components/pagination.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import { Pagination as AntPagination } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function PaginationDesigner(_a) {
+    var _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const paginationRef = useRef(null);
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-pagination');
+            // console.log('spinNode', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    return (React.createElement("div", { ref: paginationRef },
+        React.createElement(AntPagination, Object.assign({ "data-dnd": dataDnd, "data-id": dataId, style: style }, rest))));
+}
+export const Pagination = defineComponent(AntPagination, {
+    name: 'Pagination',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            // console.log("Pagination:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(PaginationDesigner, Object.assign({}, designerProps, originalProps));
+        }
+    }
+});

package/lib/esm/components/placeholder.js

@@ -31,6 +31,15 @@ function PlaceholderView(_a) {
     //placeholder = '点击或拖拽组件/区块到这里',
     placeholder = '点击或拖拽组件/区块到这里' } = _a, rest = __rest(_a, ["size", "placeholder"]);
     const height = sizeMap[size];
-    return (React.createElement(Box, Object.assign({ className: "tango-placeholder", height: height, css: placeholderStyle }, rest), placeholder));
+    console.log('zcq-PlaceholderView01', rest);
+    //去除rest里的dnd-id属性，解决row等容器组件能否直接选中问题
+    const newRest = Object.keys(rest)
+        .filter(key => key !== "data-dnd")
+        .reduce((acc, key) => {
+        acc[key] = rest[key];
+        return acc;
+    }, {});
+    console.log('zcq-PlaceholderView02', newRest);
+    return (React.createElement(Box, Object.assign({ className: "tango-placeholder", height: height, css: placeholderStyle }, newRest), placeholder));
 }
 export const Placeholder = defineComponent(PlaceholderView);

package/lib/esm/components/popconfirm.js

@@ -1,38 +1,28 @@
 import { __rest } from "tslib";
 import { Popconfirm as AntPopconfirm } from 'antd';
 import { defineComponent } from '@music163/tango-boot';
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { SLOT } from '@music163/tango-helpers';
 function PopconfirmDesigner(_a) {
     var { children, title } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", "title", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
-    useEffect(() => {
-        console.log('PopconfirmDesigner', dataDnd, dataId, rest);
-    }, []);
-    // 添加弹出层容器的自定义属性
-    const observer = useRef(new MutationObserver((mutations) => {
-        function isElement(node) {
-            return node.nodeType === Node.ELEMENT_NODE;
-        }
-        mutations.forEach((mutation) => {
-            Array.from(mutation.addedNodes).forEach((node) => {
-                if (isElement(node)) {
-                    if (node.nodeType === 1 && node.classList.contains('ant-popover')) {
-                        console.log('找到了 Popconfirm 的弹出层容器', node);
-                        node.setAttribute('data-dnd', dataDnd);
-                        observer.current.disconnect(); // 一旦找到并修改，就停止观察
-                    }
+    const popconfirmRef = useRef(null);
+    // 监听弹层显示事件
+    const handleVisibleChange = (visible) => {
+        console.log('handleVisibleChange', visible);
+        if (visible) {
+            // 使用微任务确保弹层已渲染
+            Promise.resolve().then(() => {
+                const popoverNode = document.querySelector('.ant-popconfirm');
+                console.log('popoverNode', popoverNode);
+                if (popoverNode) {
+                    popoverNode.setAttribute('data-dnd', dataDnd);
+                    popoverNode.setAttribute('data-id', dataId);
                 }
             });
-        });
-    }));
-    useEffect(() => {
-        const container = document.body; // 或者更具体的容器，如果你知道 Popconfirm 将会在哪里渲染
-        observer.current.observe(container, { childList: true, subtree: true });
-        return () => {
-            observer.current.disconnect(); // 组件卸载时停止观察
-        };
-    }, []);
-    return (React.createElement(AntPopconfirm, Object.assign({ title: title }, rest, { style: style }), children));
+        }
+    };
+    return (React.createElement("div", { ref: popconfirmRef },
+        React.createElement(AntPopconfirm, Object.assign({ title: title, onOpenChange: handleVisibleChange }, rest), children)));
 }
 export const Popconfirm = defineComponent(AntPopconfirm, {
     name: 'Popconfirm',

package/lib/esm/components/popover.d.ts

@@ -0,0 +1,3 @@
+import { PopoverProps } from 'antd';
+import React from 'react';
+export declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps & React.RefAttributes<unknown> & import("@music163/tango-boot").TangoComponentProps, "ref"> & React.RefAttributes<unknown>>;

package/lib/esm/components/popover.js

@@ -0,0 +1,37 @@
+import { __rest } from "tslib";
+import { Popover as AntPopover } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function PopoverDesigner(_a) {
+    var { children, title } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", "title", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const popoverRef = useRef(null);
+    // 监听弹层显示事件
+    const handleVisibleChange = (visible) => {
+        console.log('handleVisibleChange', visible);
+        if (visible) {
+            // 使用微任务确保弹层已渲染
+            Promise.resolve().then(() => {
+                const popoverNode = document.querySelector('.ant-popover');
+                console.log('popoverNode', popoverNode);
+                if (popoverNode) {
+                    popoverNode.setAttribute('data-dnd', dataDnd);
+                    popoverNode.setAttribute('data-id', dataId);
+                }
+            });
+        }
+    };
+    return (React.createElement("div", { ref: popoverRef },
+        React.createElement(AntPopover, Object.assign({ title: title, onOpenChange: handleVisibleChange }, rest), children)));
+}
+export const Popover = defineComponent(AntPopover, {
+    name: 'Popover',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            console.log("Popover:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(PopoverDesigner, Object.assign({ title: "Are you sure?" }, designerProps, originalProps));
+        },
+    },
+    // designerConfig: {
+    // },
+});

package/lib/esm/components/radio.js

@@ -1,21 +1,35 @@
 import { __rest } from "tslib";
 import { defineComponent } from '@music163/tango-boot';
 import { Radio as AntRadio } from 'antd';
-import React from 'react';
+import React, { useEffect } from 'react';
 function RadioDesigner(_a) {
-    var { style } = _a, rest = __rest(_a, ["style"]);
-    const { optionType } = rest;
-    if (optionType === 'button') {
-        return React.createElement(AntRadio.Button, Object.assign({}, rest, { style: style }), rest.label);
-    }
-    return (React.createElement(AntRadio, Object.assign({}, rest, { style: style }), rest.label));
+    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
+    // const radioRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-radio');
+            console.log('popoverNode', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, []);
+    // const { optionType } = rest;
+    // if (optionType === 'button') {
+    //   return (
+    //     <div ref={radioRef} className='.ant-radio'>
+    //       <AntRadio.Button {...rest} style={style} >{rest.label}</AntRadio.Button>
+    //     </div>
+    //   );
+    // }
+    return (React.createElement(AntRadio, Object.assign({}, rest, { style: style }), children));
 }
 export const Radio = defineComponent(AntRadio, {
     name: 'Radio',
     designerConfig: {
         render({ designerProps, originalProps, }) {
             console.log("designerProps:", designerProps, "originalProps:", originalProps);
-            return React.createElement(RadioDesigner, Object.assign({ label: '单项1', optionType: '' }, designerProps, originalProps));
+            return React.createElement(RadioDesigner, Object.assign({}, designerProps, originalProps));
         },
     },
 });

package/lib/esm/components/rate.d.ts

@@ -0,0 +1,3 @@
+import { RateProps } from 'antd';
+import React from 'react';
+export declare const Rate: React.ForwardRefExoticComponent<Omit<RateProps & React.RefAttributes<unknown> & import("@music163/tango-boot").TangoComponentProps, "ref"> & React.RefAttributes<unknown>>;

package/lib/esm/components/rate.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+import { Rate as AntRate } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function RateDesigner(_a) {
+    var { children, title } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", "title", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const rateRef = useRef(null);
+    // 监听弹层显示事件
+    // const handleVisibleChange = (visible: boolean) => {
+    //   console.log('handleVisibleChange', visible);
+    //   if (visible) {
+    //     // 使用微任务确保弹层已渲染
+    //     Promise.resolve().then(() => {
+    //       const popoverNode = document.querySelector('.ant-popover-placement-top');
+    //       console.log('popoverNode' ,popoverNode)
+    //       if (popoverNode) {
+    //         popoverNode.setAttribute('data-dnd', dataDnd);
+    //         popoverNode.setAttribute('data-id', dataId);
+    //       }
+    //     });
+    //   }
+    // };
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-rate');
+            console.log('rate', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    return (React.createElement("div", { ref: rateRef },
+        React.createElement(AntRate, Object.assign({ "data-dnd": dataDnd, "data-id": dataId }, rest))));
+}
+export const Rate = defineComponent(AntRate, {
+    name: 'Rate',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            console.log("Rate:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(RateDesigner, Object.assign({ title: "\u4E00\u7EA7\u6807\u9898" }, designerProps, originalProps));
+        },
+    },
+    // designerConfig: {
+    // },
+});

package/lib/esm/components/result.d.ts

@@ -0,0 +1,3 @@
+import { ResultProps } from 'antd';
+import React from 'react';
+export declare const Result: React.ForwardRefExoticComponent<ResultProps & import("@music163/tango-boot").TangoComponentProps & React.RefAttributes<unknown>>;

package/lib/esm/components/result.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+import { Result as AntResult } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function ResultDesigner(_a) {
+    var { children, title } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", "title", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const resultRef = useRef(null);
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-result');
+            console.log('popoverNode', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    // 监听弹层显示事件
+    // const handleVisibleChange = (visible: boolean) => {
+    //   console.log('handleVisibleChange', visible);
+    //   if (visible) {
+    //     // 使用微任务确保弹层已渲染
+    //     Promise.resolve().then(() => {
+    //       const popoverNode = document.querySelector('.ant-popover-placement-top');
+    //       console.log('popoverNode' ,popoverNode)
+    //       if (popoverNode) {
+    //         popoverNode.setAttribute('data-dnd', dataDnd);
+    //         popoverNode.setAttribute('data-id', dataId);
+    //       }
+    //     });
+    //   }
+    // };
+    return (React.createElement("div", { ref: resultRef },
+        React.createElement(AntResult, Object.assign({ title: title, "data-dnd": dataDnd, "data-id": dataId, style: style }, rest), children)));
+}
+export const Result = defineComponent(AntResult, {
+    name: 'Result',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            console.log("Result:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(ResultDesigner, Object.assign({ title: "Are you sure?" }, designerProps, originalProps));
+        },
+    },
+    // designerConfig: {
+    // },
+});

package/lib/esm/components/row.js

@@ -2,7 +2,6 @@ import { __rest } from "tslib";
 import React from 'react';
 import { coral } from 'coral-system';
 import { defineComponent } from '@music163/tango-boot';
-import { Placeholder } from './placeholder';
 //import { ShadowContainer } from './shadow-container';
 // const BaseRowWrapper = coral(
 //   'div',
@@ -25,11 +24,19 @@ const rowStyle = {
 //   children?: React.ReactNode;
 // }
 function RowDesigner(_a) {
+    // useEffect(() => {
+    //   Promise.resolve().then(() => {
+    //     const popoverNode = document.querySelector('.ant-raw');
+    //     // console.log('spinNode', popoverNode);
+    //     if (popoverNode) {
+    //       popoverNode.setAttribute('draggable', 'true');
     var { gutter, align, justify, prefixCls, wrap, style, children } = _a, rest = __rest(_a, ["gutter", "align", "justify", "prefixCls", "wrap", "style", "children"]);
-    //console.log("zcq栅格行的入参",dataDnd,dataId);
-    const mergedStyle = React.useMemo(() => (Object.assign(Object.assign({}, rowStyle), style)), [style]);
-    return (React.createElement("div", { style: Object.assign({}, mergedStyle), "data-dnd": "/src/pages/index/index.js:Row1:row11", "data-id": "row11" },
-        React.createElement("div", null, children || React.createElement(Placeholder, null))));
+    //     }
+    //   });
+    // }, []);
+    console.log("zcq栅格行的入参", gutter, align, justify, prefixCls, wrap, style, children);
+    return (React.createElement("div", { style: Object.assign(Object.assign({}, rowStyle), style) },
+        React.createElement("div", null, children || React.createElement("div", null, "\u62D6\u5165\u7EC4\u4EF6"))));
 }
 const Div = coral('div', undefined, {
     prefix: '--music',

package/lib/esm/components/skeleton.d.ts

@@ -0,0 +1,3 @@
+import { SkeletonProps } from 'antd';
+import React from 'react';
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & import("@music163/tango-boot").TangoComponentProps & React.RefAttributes<unknown>>;

package/lib/esm/components/skeleton.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+import { Skeleton as AntSkeleton } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function SkeletonDesigner(_a) {
+    var { children } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const skeletonRef = useRef(null);
+    // 监听弹层显示事件
+    // const handleVisibleChange = (visible: boolean) => {
+    //   console.log('handleVisibleChange', visible);
+    //   if (visible) {
+    //     // 使用微任务确保弹层已渲染
+    //     Promise.resolve().then(() => {
+    //       const popoverNode = document.querySelector('.ant-popover-placement-top');
+    //       console.log('popoverNode' ,popoverNode)
+    //       if (popoverNode) {
+    //         popoverNode.setAttribute('data-dnd', dataDnd);
+    //         popoverNode.setAttribute('data-id', dataId);
+    //       }
+    //     });
+    //   }
+    // };
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-skeleton');
+            console.log('ant-skeleton', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    return (React.createElement("div", { ref: skeletonRef },
+        React.createElement(AntSkeleton, Object.assign({ "data-dnd": dataDnd, "data-id": dataId }, rest), children)));
+}
+export const Skeleton = defineComponent(AntSkeleton, {
+    name: 'Skeleton',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            console.log("Skeleton:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(SkeletonDesigner, Object.assign({}, designerProps, originalProps));
+        },
+    },
+    // designerConfig: {
+    // },
+});

package/lib/esm/components/slider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Slider: React.ForwardRefExoticComponent<(Omit<import("antd").SliderSingleProps & React.RefAttributes<unknown> & import("@music163/tango-boot").TangoComponentProps, "ref"> | Omit<import("antd/lib/slider").SliderRangeProps & React.RefAttributes<unknown> & import("@music163/tango-boot").TangoComponentProps, "ref">) & React.RefAttributes<unknown>>;

package/lib/esm/components/slider.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+import { Slider as AntSlider } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function SliderDesigner(_a) {
+    var { children, title } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", "title", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const rateRef = useRef(null);
+    // 监听弹层显示事件
+    // const handleVisibleChange = (visible: boolean) => {
+    //   console.log('handleVisibleChange', visible);
+    //   if (visible) {
+    //     // 使用微任务确保弹层已渲染
+    //     Promise.resolve().then(() => {
+    //       const popoverNode = document.querySelector('.ant-popover-placement-top');
+    //       console.log('popoverNode' ,popoverNode)
+    //       if (popoverNode) {
+    //         popoverNode.setAttribute('data-dnd', dataDnd);
+    //         popoverNode.setAttribute('data-id', dataId);
+    //       }
+    //     });
+    //   }
+    // };
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-slider');
+            console.log('rate', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    return (React.createElement("div", { ref: rateRef },
+        React.createElement(AntSlider, Object.assign({ "data-dnd": dataDnd, "data-id": dataId }, rest))));
+}
+export const Slider = defineComponent(AntSlider, {
+    name: 'Slider',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            console.log("Slider:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(SliderDesigner, Object.assign({ title: "\u4E00\u7EA7\u6807\u9898" }, designerProps, originalProps));
+        },
+    },
+    // designerConfig: {
+    // },
+});

package/lib/esm/components/spin.d.ts

@@ -0,0 +1,3 @@
+import { SpinProps } from 'antd';
+import React from 'react';
+export declare const Spin: React.ForwardRefExoticComponent<SpinProps & import("@music163/tango-boot").TangoComponentProps & React.RefAttributes<unknown>>;

package/lib/esm/components/spin.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import { Spin as AntSpin } from 'antd';
+import { defineComponent } from '@music163/tango-boot';
+import React, { useEffect, useRef } from 'react';
+import { SLOT } from '@music163/tango-helpers';
+function SpinDesigner(_a) {
+    var { children, spinning } = _a, _b = SLOT.dnd, dataDnd = _a[_b], _c = SLOT.id, dataId = _a[_c], { style } = _a, rest = __rest(_a, ["children", "spinning", typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + "", "style"]);
+    const spinRef = useRef(null);
+    useEffect(() => {
+        Promise.resolve().then(() => {
+            const popoverNode = document.querySelector('.ant-spin');
+            // console.log('spinNode', popoverNode);
+            if (popoverNode) {
+                popoverNode.setAttribute('data-dnd', dataDnd);
+                popoverNode.setAttribute('data-id', dataId);
+                popoverNode.setAttribute('draggable', 'true');
+            }
+        });
+    }, [dataDnd, dataId]);
+    return (React.createElement("div", { ref: spinRef },
+        React.createElement(AntSpin, Object.assign({ spinning: spinning, "data-dnd": dataDnd, "data-id": dataId, style: style }, rest), children)));
+}
+export const Spin = defineComponent(AntSpin, {
+    name: 'Spin',
+    designerConfig: {
+        render({ designerProps, originalProps }) {
+            // console.log("Spin:  designerProps:", designerProps, "originalProps:", originalProps);
+            return React.createElement(SpinDesigner, Object.assign({ spinning: true }, designerProps, originalProps));
+        },
+    },
+});

package/lib/esm/components/statistic.d.ts

@@ -0,0 +1,3 @@
+import { StatisticProps } from 'antd';
+import React from 'react';
+export declare const Statistic: React.ForwardRefExoticComponent<StatisticProps & import("@music163/tango-boot").TangoComponentProps & React.RefAttributes<unknown>>;