xmirror-components 1.0.28 → 1.0.30-alpha.1

package/build/es/components/Table/Footer/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 import type { TableComponentProps } from '../types.ts';
 declare function Index(props: TableComponentProps): React.JSX.Element;
 export default Index;

package/build/es/components/Table/Footer/index.js

@@ -1,9 +1,10 @@
 import React, { useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Checkbox, Row, Col } from 'antd';
+import { Checkbox, Col } from 'antd';
 import { CSSTransition } from 'react-transition-group';
 import { CloseOutlined } from '@ant-design/icons';
-import './index.less';
+import { Global } from '@emotion/react';
+import { TableFooterWrapper, TableFooterTotal, StyledRow, CloseButton, zoomStyles, globalStyles } from './styles';
 function Index(props) {
     var _a;
     var transitionNodeRef = useRef(null);
@@ -67,20 +68,22 @@ function Index(props) {
         var selectedRowKeys = (_a = rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : [];
         return !!(selectedRowKeys.length > 0 && selectedRowKeys.length === optionalNum);
     }, [rowSelection.selectedRowKeys, optionalNum]);
-    return (React.createElement("div", { className: "table-footer" },
-        React.createElement(CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: "zoom", unmountOnExit: true, timeout: 300 }, function () {
-            var _a, _b;
-            return (React.createElement(Row, { ref: transitionNodeRef, className: "table-batch-dialog", justify: "space-between" },
-                React.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
-                    React.createElement(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
-                        React.createElement(FormattedMessage, { id: "component.table.selected", defaultMessage: '已选{length}条', values: {
-                                length: (_b = (_a = rowSelection.selectedRowKeys) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0
-                            } }))),
-                React.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
-                    selectionPopover,
-                    React.createElement("span", { className: "btn-close", onClick: function () { changeCheckAll({ target: { checked: false } }); } },
-                        React.createElement(CloseOutlined, null)))));
-        }),
-        pagination && (React.createElement("span", { className: "table-footer-total" }, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Global, { styles: globalStyles }),
+        React.createElement(TableFooterWrapper, null,
+            React.createElement(CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: zoomStyles, unmountOnExit: true, timeout: 300 }, function () {
+                var _a, _b;
+                return (React.createElement(StyledRow, { ref: transitionNodeRef, justify: "space-between" },
+                    React.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
+                        React.createElement(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
+                            React.createElement(FormattedMessage, { id: "component.table.selected", defaultMessage: '已选{length}条', values: {
+                                    length: (_b = (_a = rowSelection.selectedRowKeys) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0
+                                } }))),
+                    React.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
+                        selectionPopover,
+                        React.createElement(CloseButton, { onClick: function () { changeCheckAll({ target: { checked: false } }); } },
+                            React.createElement(CloseOutlined, null)))));
+            }),
+            pagination && (React.createElement(TableFooterTotal, null, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null)))));
 }
 export default Index;

package/build/es/components/Table/Footer/styles.d.ts

@@ -0,0 +1,25 @@
+export declare const TableFooterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableFooterTotal: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TableBatchDialog: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledRow: import("@emotion/styled").StyledComponent<import("antd").RowProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const CloseButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const zoomStyles: {
+    enter: string;
+    enterActive: string;
+    leaveActive: string;
+};
+export declare const globalStyles = "\n  .zoom-enter {\n    transform: scale(0);\n  }\n\n  .zoom-enter-active {\n    transform: scale(1);\n  }\n\n  .zoom-leave-active {\n    transform: scale(0);\n  }\n";

package/build/es/components/Table/Footer/styles.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@emotion/styled';
+import { Row } from 'antd';
+export var TableFooterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 8px;\n"], ["\n  position: absolute;\n  left: 8px;\n"])));
+export var TableFooterTotal = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 14px;\n  color: #666;\n"], ["\n  font-size: 14px;\n  color: #666;\n"])));
+export var TableBatchDialog = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"], ["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"
+    // 包装 Row 组件的样式
+])));
+// 包装 Row 组件的样式
+export var StyledRow = styled(Row)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"], ["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"])));
+export var CloseButton = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 20px;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: all 0.5s;\n\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  margin-left: 20px;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: all 0.5s;\n\n  &:hover {\n    opacity: 1;\n  }\n"
+    // 动画样式 - 使用 CSS 类名
+])));
+// 动画样式 - 使用 CSS 类名
+export var zoomStyles = {
+    enter: 'zoom-enter',
+    enterActive: 'zoom-enter-active',
+    leaveActive: 'zoom-leave-active'
+};
+// 全局样式注入
+export var globalStyles = "\n  .zoom-enter {\n    transform: scale(0);\n  }\n\n  .zoom-enter-active {\n    transform: scale(1);\n  }\n\n  .zoom-leave-active {\n    transform: scale(0);\n  }\n";
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/build/es/components/Table/PopoverSetColumns/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { type TableComponentProps } from '../types';
-import './index.less';
 interface PopoverSetColumnsProps {
     order: string[];
     visibleItems: string[];

package/build/es/components/Table/PopoverSetColumns/index.js

@@ -14,7 +14,7 @@ import { HolderOutlined } from '@ant-design/icons';
 // import { message, IconFont } from 'xmirror-components'
 import { message } from '../../AntdApp';
 import IconFont from '../../IconFont';
-import './index.less';
+import { ColumnsSettingWrapper } from './styles';
 function PopoverSetColumns(_a) {
     var order = _a.order, visibleItems = _a.visibleItems, _b = _a.columns, columns = _b === void 0 ? [] : _b, onChangeOrder = _a.onChangeOrder, columnsVisible = _a.columnsVisible, columnsSort = _a.columnsSort, onChangeVisible = _a.onChangeVisible;
     var dragged = useRef(null);
@@ -160,7 +160,7 @@ function PopoverSetColumns(_a) {
                 : null;
         });
     }, [order, visibleItems, columns, columnsSort, columnsVisible]);
-    return (React.createElement(Popover, { overlayClassName: "table-columns-setting-popover", content: React.createElement("ul", { onDragOver: dragOver, className: "table-columns-setting-wrapper" }, renderList), trigger: "click", align: {
+    return (React.createElement(Popover, { overlayClassName: "table-columns-setting-popover", content: React.createElement(ColumnsSettingWrapper, { onDragOver: dragOver }, renderList), trigger: "click", align: {
             offset: [-60, -14]
         } },
         React.createElement(IconFont, { type: "icon-setting", style: {

package/build/es/components/Table/PopoverSetColumns/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const PopoverWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnsSettingWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/build/es/components/Table/PopoverSetColumns/styles.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+var dragUpAnimation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    margin-top: 0;\n  }\n  to {\n    margin-top: 32px;\n  }\n"], ["\n  from {\n    margin-top: 0;\n  }\n  to {\n    margin-top: 32px;\n  }\n"])));
+var dragDownAnimation = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    margin-top: 32px;\n    margin-bottom: 0;\n  }\n  to {\n    margin-top: 0;\n    margin-bottom: 32px;\n  }\n"], ["\n  from {\n    margin-top: 32px;\n    margin-bottom: 0;\n  }\n  to {\n    margin-top: 0;\n    margin-bottom: 32px;\n  }\n"])));
+export var PopoverWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .ant-popover-inner-content {\n    max-height: 360px;\n    padding: 0;\n    overflow-y: auto;\n  }\n"], ["\n  .ant-popover-inner-content {\n    max-height: 360px;\n    padding: 0;\n    overflow-y: auto;\n  }\n"])));
+export var ColumnsSettingWrapper = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px 0;\n\n  .drag-up {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  .drag-down {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  li {\n    width: 150px;\n    padding: 5px 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: keep-all;\n    white-space: nowrap;\n    user-select: none;\n    transition: background-color 0.5s;\n\n    .icon-drag {\n      margin-right: 10px;\n      color: #999;\n      cursor: move;\n    }\n\n    &[draggable=\"false\"] {\n      .icon-drag {\n        cursor: no-drop;\n        opacity: 0.2;\n      }\n    }\n\n    &:hover {\n      background-color: #f0f0f0;\n    }\n  }\n"], ["\n  padding: 10px 0;\n\n  .drag-up {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  .drag-down {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  li {\n    width: 150px;\n    padding: 5px 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: keep-all;\n    white-space: nowrap;\n    user-select: none;\n    transition: background-color 0.5s;\n\n    .icon-drag {\n      margin-right: 10px;\n      color: #999;\n      cursor: move;\n    }\n\n    &[draggable=\"false\"] {\n      .icon-drag {\n        cursor: no-drop;\n        opacity: 0.2;\n      }\n    }\n\n    &:hover {\n      background-color: #f0f0f0;\n    }\n  }\n"])), dragUpAnimation, dragDownAnimation);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/build/es/components/Table/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { AnyObject, TableComponentProps } from './types';
-import './index.less';
 declare const _default: React.ForwardRefExoticComponent<TableComponentProps<AnyObject> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/build/es/components/Table/index.js

@@ -15,7 +15,7 @@ import { useLocalStorageState } from 'ahooks';
 import { DownOutlined } from '@ant-design/icons';
 import PopoverSetColumns from './PopoverSetColumns';
 import Footer from './Footer';
-import './index.less';
+import { TableWrapper } from './styles';
 function Index(props, ref) {
     var _a = props.columns, columns = _a === void 0 ? [] : _a, columnsSort = props.columnsSort, columnsVisible = props.columnsVisible, _b = props.tableId, tableId = _b === void 0 ? '' : _b, pagination = props.pagination, dataSource = props.dataSource;
     var pathname = location.pathname;
@@ -181,7 +181,7 @@ function Index(props, ref) {
     useEffect(function () {
         initColumnsSort();
     }, []);
-    return (React.createElement("div", { className: "table-wrapper", style: { position: 'relative' }, ref: ref },
+    return (React.createElement(TableWrapper, { ref: ref },
         React.createElement(Table, __assign({ ref: tableRef, scroll: {
                 x: 900
             } }, props, { pagination: paginationProps, columns: renderColumns }))));

package/build/es/components/Table/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/es/components/Table/styles.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@emotion/styled';
+export var TableWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  .ant-pagination-options {\n    .ant-select {\n      width: auto !important;\n    }\n  }\n"], ["\n  position: relative;\n\n  .ant-pagination-options {\n    .ant-select {\n      width: auto !important;\n    }\n  }\n"])));
+var templateObject_1;

package/build/es/index.d.ts

@@ -5,4 +5,5 @@ export { default as SwitchValue } from './components/SwitchValue';
 export { default as IconButton } from './components/IconButton';
 export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
 export { default as ConfigProvider, ConfigContext } from './components/ConfigProvider';
+export { default as Table } from './components/Table';
 export { default as useRequest } from './hooks/useRequest';

package/build/es/index.js

@@ -5,4 +5,5 @@ export { default as SwitchValue } from './components/SwitchValue';
 export { default as IconButton } from './components/IconButton';
 export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
 export { default as ConfigProvider, ConfigContext } from './components/ConfigProvider';
+export { default as Table } from './components/Table';
 export { default as useRequest } from './hooks/useRequest';

package/build/lib/components/Table/Footer/index.js

@@ -38,7 +38,8 @@ var react_intl_1 = require("react-intl");
 var antd_1 = require("antd");
 var react_transition_group_1 = require("react-transition-group");
 var icons_1 = require("@ant-design/icons");
-require("./index.less");
+var react_2 = require("@emotion/react");
+var styles_1 = require("./styles");
 function Index(props) {
     var _a;
     var transitionNodeRef = (0, react_1.useRef)(null);
@@ -102,20 +103,22 @@ function Index(props) {
         var selectedRowKeys = (_a = rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : [];
         return !!(selectedRowKeys.length > 0 && selectedRowKeys.length === optionalNum);
     }, [rowSelection.selectedRowKeys, optionalNum]);
-    return (react_1.default.createElement("div", { className: "table-footer" },
-        react_1.default.createElement(react_transition_group_1.CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: "zoom", unmountOnExit: true, timeout: 300 }, function () {
-            var _a, _b;
-            return (react_1.default.createElement(antd_1.Row, { ref: transitionNodeRef, className: "table-batch-dialog", justify: "space-between" },
-                react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
-                    react_1.default.createElement(antd_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "component.table.selected", defaultMessage: '已选{length}条', values: {
-                                length: (_b = (_a = rowSelection.selectedRowKeys) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0
-                            } }))),
-                react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
-                    selectionPopover,
-                    react_1.default.createElement("span", { className: "btn-close", onClick: function () { changeCheckAll({ target: { checked: false } }); } },
-                        react_1.default.createElement(icons_1.CloseOutlined, null)))));
-        }),
-        pagination && (react_1.default.createElement("span", { className: "table-footer-total" }, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.Global, { styles: styles_1.globalStyles }),
+        react_1.default.createElement(styles_1.TableFooterWrapper, null,
+            react_1.default.createElement(react_transition_group_1.CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: styles_1.zoomStyles, unmountOnExit: true, timeout: 300 }, function () {
+                var _a, _b;
+                return (react_1.default.createElement(styles_1.StyledRow, { ref: transitionNodeRef, justify: "space-between" },
+                    react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
+                        react_1.default.createElement(antd_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "component.table.selected", defaultMessage: '已选{length}条', values: {
+                                    length: (_b = (_a = rowSelection.selectedRowKeys) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0
+                                } }))),
+                    react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
+                        selectionPopover,
+                        react_1.default.createElement(styles_1.CloseButton, { onClick: function () { changeCheckAll({ target: { checked: false } }); } },
+                            react_1.default.createElement(icons_1.CloseOutlined, null)))));
+            }),
+            pagination && (react_1.default.createElement(styles_1.TableFooterTotal, null, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null)))));
 }
 exports.default = Index;

package/build/lib/components/Table/Footer/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalStyles = exports.zoomStyles = exports.CloseButton = exports.StyledRow = exports.TableBatchDialog = exports.TableFooterTotal = exports.TableFooterWrapper = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+var antd_1 = require("antd");
+exports.TableFooterWrapper = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 8px;\n"], ["\n  position: absolute;\n  left: 8px;\n"])));
+exports.TableFooterTotal = styled_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 14px;\n  color: #666;\n"], ["\n  font-size: 14px;\n  color: #666;\n"])));
+exports.TableBatchDialog = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"], ["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"
+    // 包装 Row 组件的样式
+])));
+// 包装 Row 组件的样式
+exports.StyledRow = (0, styled_1.default)(antd_1.Row)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"], ["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"])));
+exports.CloseButton = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 20px;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: all 0.5s;\n\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  margin-left: 20px;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: all 0.5s;\n\n  &:hover {\n    opacity: 1;\n  }\n"
+    // 动画样式 - 使用 CSS 类名
+])));
+// 动画样式 - 使用 CSS 类名
+exports.zoomStyles = {
+    enter: 'zoom-enter',
+    enterActive: 'zoom-enter-active',
+    leaveActive: 'zoom-leave-active'
+};
+// 全局样式注入
+exports.globalStyles = "\n  .zoom-enter {\n    transform: scale(0);\n  }\n\n  .zoom-enter-active {\n    transform: scale(1);\n  }\n\n  .zoom-leave-active {\n    transform: scale(0);\n  }\n";
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/build/lib/components/Table/PopoverSetColumns/index.js

@@ -52,7 +52,7 @@ var icons_1 = require("@ant-design/icons");
 // import { message, IconFont } from 'xmirror-components'
 var AntdApp_1 = require("../../AntdApp");
 var IconFont_1 = __importDefault(require("../../IconFont"));
-require("./index.less");
+var styles_1 = require("./styles");
 function PopoverSetColumns(_a) {
     var order = _a.order, visibleItems = _a.visibleItems, _b = _a.columns, columns = _b === void 0 ? [] : _b, onChangeOrder = _a.onChangeOrder, columnsVisible = _a.columnsVisible, columnsSort = _a.columnsSort, onChangeVisible = _a.onChangeVisible;
     var dragged = (0, react_1.useRef)(null);
@@ -198,7 +198,7 @@ function PopoverSetColumns(_a) {
                 : null;
         });
     }, [order, visibleItems, columns, columnsSort, columnsVisible]);
-    return (react_1.default.createElement(antd_1.Popover, { overlayClassName: "table-columns-setting-popover", content: react_1.default.createElement("ul", { onDragOver: dragOver, className: "table-columns-setting-wrapper" }, renderList), trigger: "click", align: {
+    return (react_1.default.createElement(antd_1.Popover, { overlayClassName: "table-columns-setting-popover", content: react_1.default.createElement(styles_1.ColumnsSettingWrapper, { onDragOver: dragOver }, renderList), trigger: "click", align: {
             offset: [-60, -14]
         } },
         react_1.default.createElement(IconFont_1.default, { type: "icon-setting", style: {

package/build/lib/components/Table/PopoverSetColumns/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSettingWrapper = exports.PopoverWrapper = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+var react_1 = require("@emotion/react");
+var dragUpAnimation = (0, react_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    margin-top: 0;\n  }\n  to {\n    margin-top: 32px;\n  }\n"], ["\n  from {\n    margin-top: 0;\n  }\n  to {\n    margin-top: 32px;\n  }\n"])));
+var dragDownAnimation = (0, react_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    margin-top: 32px;\n    margin-bottom: 0;\n  }\n  to {\n    margin-top: 0;\n    margin-bottom: 32px;\n  }\n"], ["\n  from {\n    margin-top: 32px;\n    margin-bottom: 0;\n  }\n  to {\n    margin-top: 0;\n    margin-bottom: 32px;\n  }\n"])));
+exports.PopoverWrapper = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .ant-popover-inner-content {\n    max-height: 360px;\n    padding: 0;\n    overflow-y: auto;\n  }\n"], ["\n  .ant-popover-inner-content {\n    max-height: 360px;\n    padding: 0;\n    overflow-y: auto;\n  }\n"])));
+exports.ColumnsSettingWrapper = styled_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px 0;\n\n  .drag-up {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  .drag-down {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  li {\n    width: 150px;\n    padding: 5px 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: keep-all;\n    white-space: nowrap;\n    user-select: none;\n    transition: background-color 0.5s;\n\n    .icon-drag {\n      margin-right: 10px;\n      color: #999;\n      cursor: move;\n    }\n\n    &[draggable=\"false\"] {\n      .icon-drag {\n        cursor: no-drop;\n        opacity: 0.2;\n      }\n    }\n\n    &:hover {\n      background-color: #f0f0f0;\n    }\n  }\n"], ["\n  padding: 10px 0;\n\n  .drag-up {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  .drag-down {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  li {\n    width: 150px;\n    padding: 5px 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: keep-all;\n    white-space: nowrap;\n    user-select: none;\n    transition: background-color 0.5s;\n\n    .icon-drag {\n      margin-right: 10px;\n      color: #999;\n      cursor: move;\n    }\n\n    &[draggable=\"false\"] {\n      .icon-drag {\n        cursor: no-drop;\n        opacity: 0.2;\n      }\n    }\n\n    &:hover {\n      background-color: #f0f0f0;\n    }\n  }\n"])), dragUpAnimation, dragDownAnimation);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/build/lib/components/Table/index.js

@@ -53,7 +53,7 @@ var ahooks_1 = require("ahooks");
 var icons_1 = require("@ant-design/icons");
 var PopoverSetColumns_1 = __importDefault(require("./PopoverSetColumns"));
 var Footer_1 = __importDefault(require("./Footer"));
-require("./index.less");
+var styles_1 = require("./styles");
 function Index(props, ref) {
     var _a = props.columns, columns = _a === void 0 ? [] : _a, columnsSort = props.columnsSort, columnsVisible = props.columnsVisible, _b = props.tableId, tableId = _b === void 0 ? '' : _b, pagination = props.pagination, dataSource = props.dataSource;
     var pathname = location.pathname;
@@ -219,7 +219,7 @@ function Index(props, ref) {
     (0, react_1.useEffect)(function () {
         initColumnsSort();
     }, []);
-    return (react_1.default.createElement("div", { className: "table-wrapper", style: { position: 'relative' }, ref: ref },
+    return (react_1.default.createElement(styles_1.TableWrapper, { ref: ref },
         react_1.default.createElement(antd_1.Table, __assign({ ref: tableRef, scroll: {
                 x: 900
             } }, props, { pagination: paginationProps, columns: renderColumns }))));

package/build/lib/components/Table/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableWrapper = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+exports.TableWrapper = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  .ant-pagination-options {\n    .ant-select {\n      width: auto !important;\n    }\n  }\n"], ["\n  position: relative;\n\n  .ant-pagination-options {\n    .ant-select {\n      width: auto !important;\n    }\n  }\n"])));
+var templateObject_1;

package/build/lib/index.d.ts

@@ -1,6 +1,8 @@
+import { AnyObject } from 'antd/es/_util/type';
 import { AppProps } from 'antd';
 import { Checkbox } from 'antd';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { ColumnTitleProps } from 'antd/es/table/interface';
 import { default as default_2 } from 'react';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ModalStaticFunctions } from 'antd/es/modal/confirm';
@@ -10,6 +12,8 @@ import { Plugin as Plugin_2 } from 'ahooks/lib/useRequest/src/types';
 import { Result } from 'ahooks/lib/useRequest/src/types';
 import { Service } from 'ahooks/lib/useRequest/src/types';
 import { SwitchProps } from 'antd/es/switch';
+import { TableColumnType } from 'antd';
+import { TableProps } from 'antd';
 
 export declare function App({ children, config, ...props }: AppProps & {
     config?: ConfigProviderConfigProps;
@@ -77,6 +81,40 @@ declare interface CheckboxValueProps<T = any, F = any> extends Omit<default_2.Co
     children?: default_2.ReactNode;
 }
 
+declare interface ColumnGroupType<RecordType = AnyObject> extends Omit<ColumnType<RecordType>, 'dataIndex'> {
+    children: TableComponentProps<RecordType>['columns'];
+}
+
+declare interface ColumnType<RecordType> extends Omit<TableColumnType<RecordType>, 'title' | 'fixed'> {
+    /**
+     * 控制该字段是否支持排序，列表 columnsSort 为 true 时有效
+     * （columnSortDisabled，尽量只给首尾字段加，中间的字段加了用处不大）
+     */
+    columnSortDisabled?: boolean;
+    /**
+     * 控制是否支持字段的显示隐藏功能
+     */
+    columnVisibleDisabled?: boolean;
+    /**
+     * 字段的显示隐藏属性
+     */
+    columnVisible?: boolean;
+    /**
+     * 字段id
+     */
+    dataIndex: string | string[];
+    /**
+     * 字段id
+     */
+    fixed?: 'left' | 'right' | boolean | string;
+    /**
+     * 标题
+     */
+    title?: default_2.ReactNode | ((props: ColumnTitleProps<RecordType>) => default_2.ReactNode);
+}
+
+declare type ColumnTypes<RecordType = AnyObject> = ColumnType<RecordType> | ColumnGroupType<RecordType>;
+
 export declare const ConfigContext: default_2.Context<ConfigContextProps>;
 
 declare interface ConfigContextProps {
@@ -208,6 +246,31 @@ declare interface SwitchValueProps<T = boolean | string | number, F = boolean |
     onChange?: (value: T | F, event: default_2.MouseEvent<HTMLButtonElement> | default_2.KeyboardEvent<HTMLButtonElement>) => void;
 }
 
+export declare const Table: default_2.ForwardRefExoticComponent<TableComponentProps<AnyObject> & default_2.RefAttributes<HTMLDivElement>>;
+
+declare interface TableComponentProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
+    /**
+     * 列表项
+     */
+    columns?: Array<ColumnTypes<RecordType>>;
+    /**
+     * 是否打开列表字段排序功能
+     */
+    columnsSort?: boolean;
+    /**
+     * 是否打开列表字段的显示隐藏属性
+     */
+    columnsVisible?: boolean;
+    /**
+     * 列表唯一值，用来处理一个页面多个列表且同时开启字段排序或字段隐藏功能
+     */
+    tableId?: string;
+    /**
+     * 中间的批量操作弹出层
+     */
+    selectionPopover?: default_2.ReactNode;
+}
+
 export declare function useRequest<TData, TParams extends unknown[]>(service: Service<TData, TParams>, options?: Options<TData, TParams>, plugins?: Array<Plugin_2<TData, TParams>>): WrappedResult<TData, TParams>;
 
 declare interface WrappedResult<TData, TParams extends unknown[]> extends Omit<Result<TData, TParams>, 'data'> {

package/build/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRequest = exports.ConfigContext = exports.ConfigProvider = exports.setGlobalLoading = exports.GlobalLoading = exports.IconButton = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
+exports.useRequest = exports.Table = exports.ConfigContext = exports.ConfigProvider = exports.setGlobalLoading = exports.GlobalLoading = exports.IconButton = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
 var AntdApp_1 = require("./components/AntdApp");
 Object.defineProperty(exports, "App", { enumerable: true, get: function () { return __importDefault(AntdApp_1).default; } });
 Object.defineProperty(exports, "message", { enumerable: true, get: function () { return AntdApp_1.message; } });
@@ -23,5 +23,7 @@ Object.defineProperty(exports, "setGlobalLoading", { enumerable: true, get: func
 var ConfigProvider_1 = require("./components/ConfigProvider");
 Object.defineProperty(exports, "ConfigProvider", { enumerable: true, get: function () { return __importDefault(ConfigProvider_1).default; } });
 Object.defineProperty(exports, "ConfigContext", { enumerable: true, get: function () { return ConfigProvider_1.ConfigContext; } });
+var Table_1 = require("./components/Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
 var useRequest_1 = require("./hooks/useRequest");
 Object.defineProperty(exports, "useRequest", { enumerable: true, get: function () { return __importDefault(useRequest_1).default; } });

package/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmirror-components",
-  "version": "1.0.28",
+  "version": "1.0.30-alpha.1",
   "type": "module",
   "main": "build/lib/index.js",
   "module": "build/es/index.js",

package/build/types/components/Table/Footer/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 import type { TableComponentProps } from '../types.ts';
 declare function Index(props: TableComponentProps): React.JSX.Element;
 export default Index;

package/build/types/components/Table/Footer/styles.d.ts

@@ -0,0 +1,25 @@
+export declare const TableFooterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableFooterTotal: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TableBatchDialog: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledRow: import("@emotion/styled").StyledComponent<import("antd").RowProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const CloseButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const zoomStyles: {
+    enter: string;
+    enterActive: string;
+    leaveActive: string;
+};
+export declare const globalStyles = "\n  .zoom-enter {\n    transform: scale(0);\n  }\n\n  .zoom-enter-active {\n    transform: scale(1);\n  }\n\n  .zoom-leave-active {\n    transform: scale(0);\n  }\n";

package/build/types/components/Table/PopoverSetColumns/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { type TableComponentProps } from '../types';
-import './index.less';
 interface PopoverSetColumnsProps {
     order: string[];
     visibleItems: string[];

package/build/types/components/Table/PopoverSetColumns/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const PopoverWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnsSettingWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/build/types/components/Table/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { AnyObject, TableComponentProps } from './types';
-import './index.less';
 declare const _default: React.ForwardRefExoticComponent<TableComponentProps<AnyObject> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/build/types/components/Table/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/types/index.d.ts

@@ -5,4 +5,5 @@ export { default as SwitchValue } from './components/SwitchValue';
 export { default as IconButton } from './components/IconButton';
 export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
 export { default as ConfigProvider, ConfigContext } from './components/ConfigProvider';
+export { default as Table } from './components/Table';
 export { default as useRequest } from './hooks/useRequest';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmirror-components",
-  "version": "1.0.28",
+  "version": "1.0.30-alpha.1",
   "type": "module",
   "main": "build/lib/index.js",
   "module": "build/es/index.js",