@zat-design/sisyphus-react 3.0.13

package/es/ProTable/index.js

@@ -0,0 +1,316 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/table/style";
+import _Table from "antd/es/table";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["tableId", "headerRender", "footerRender", "quickConfig", "stripe", "columns", "className", "summary"],
+  _excluded2 = ["resizeColumn", "columnConfig", "cacheTime", "storage"];
+import { cloneDeep } from 'lodash';
+import { useDebounceEffect, useDeepCompareEffect } from 'ahooks';
+import React, { useEffect, useMemo, useState, createContext } from 'react';
+import { ReactSVG } from 'react-svg';
+import classnames from 'classnames';
+import { useProConfig, ProTransferModal } from 'zat-design-pro-component';
+import { tools } from '@zat-design-pro-component/utils';
+import { valueTypeRender } from '@/ProUtils/utils';
+import { TableResizable, ResizableLine } from './components';
+import useAntdTable from './useAntdTable';
+import empty from '../assets/empty.png';
+import resetSvg from '../assets/reset.svg';
+import customColumnSvg from '../assets/customColumn.svg';
+import { formatColumn, getColumnDataIndex } from './utils';
+var defaultCacheTime = 1; // columns 配置保存时间为一天
+// 全局上下文
+export var TableContext = /*#__PURE__*/createContext({});
+export var defaultPage = {
+  pageNum: 1,
+  pageSize: 10
+};
+function ProTable(props) {
+  var _curTableConfig$pathK;
+  var _ref = useProConfig('globalConfig') || {},
+    configStorage = _ref.storage; // 获取全局缓存位置配置
+  var _ref2 = useProConfig('ProTable') || {},
+    configResizeColumn = _ref2.resizeColumn,
+    configTColumnConfig = _ref2.columnConfig,
+    configCacheTime = _ref2.cacheTime;
+  var tableId = props.tableId,
+    headerRender = props.headerRender,
+    footerRender = props.footerRender,
+    quickConfig = props.quickConfig,
+    stripe = props.stripe,
+    _props$columns = props.columns,
+    propsColumns = _props$columns === void 0 ? [] : _props$columns,
+    className = props.className,
+    summary = props.summary,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var quickTableConfig = quickConfig ? _objectSpread({
+    // resizeColumn: true,
+    columnConfig: true,
+    cacheTime: true
+  }, restProps) : (restProps === null || restProps === void 0 ? void 0 : restProps.columnConfig) ? _objectSpread({
+    cacheTime: true
+  }, restProps) : restProps;
+  var _quickTableConfig$res = quickTableConfig.resizeColumn,
+    resizeColumn = _quickTableConfig$res === void 0 ? configResizeColumn : _quickTableConfig$res,
+    _quickTableConfig$col = quickTableConfig.columnConfig,
+    columnConfig = _quickTableConfig$col === void 0 ? configTColumnConfig : _quickTableConfig$col,
+    _quickTableConfig$cac = quickTableConfig.cacheTime,
+    cacheTime = _quickTableConfig$cac === void 0 ? configCacheTime : _quickTableConfig$cac,
+    _quickTableConfig$sto = quickTableConfig.storage,
+    storage = _quickTableConfig$sto === void 0 ? configStorage : _quickTableConfig$sto,
+    tableProps = _objectWithoutProperties(quickTableConfig, _excluded2);
+  var propsColumnObj = useMemo(function () {
+    return propsColumns.reduce(function (acc, cur) {
+      // @ts-ignore
+      acc[getColumnDataIndex(cur.dataIndex)] = _objectSpread({}, cur);
+      return acc;
+    }, {});
+  }, [propsColumns]);
+  var pathname = window.location.pathname;
+  // 以pathname + tableId作为缓存配置key
+  var pathKey = "".concat(pathname, "/").concat(tableId || '');
+  var Storage = storage === 'sessionStorage' ? sessionStorage : localStorage;
+  var tableConfig = Storage.getItem('tableConfig');
+  var curTableConfig = tableConfig ? JSON.parse(tableConfig) : {};
+  var startTime = (_curTableConfig$pathK = curTableConfig[pathKey]) === null || _curTableConfig$pathK === void 0 ? void 0 : _curTableConfig$pathK.startTime;
+  var _useState = useState(propsColumns),
+    _useState2 = _slicedToArray(_useState, 2),
+    curColumns = _useState2[0],
+    setCurColumns = _useState2[1];
+  useDeepCompareEffect(function () {
+    var localColumns;
+    var duration = (typeof cacheTime === 'number' ? cacheTime : defaultCacheTime) * 86400000;
+    // 开启缓存配置功能且缓存存在时，从缓存中获取缓存配置
+    if (cacheTime && startTime && new Date().getTime() - startTime < duration) {
+      var _curTableConfig$pathK2, _curTableConfig$pathK3, _localColumns;
+      localColumns = (_curTableConfig$pathK2 = curTableConfig[pathKey]) === null || _curTableConfig$pathK2 === void 0 ? void 0 : (_curTableConfig$pathK3 = _curTableConfig$pathK2.columns) === null || _curTableConfig$pathK3 === void 0 ? void 0 : _curTableConfig$pathK3.map(function (item) {
+        var _propsColumnObj$getCo;
+        return _objectSpread(_objectSpread({}, propsColumnObj[getColumnDataIndex(item.dataIndex)]), {}, {
+          dataIndex: item.dataIndex,
+          width: resizeColumn ? item === null || item === void 0 ? void 0 : item.width : (_propsColumnObj$getCo = propsColumnObj[getColumnDataIndex(item.dataIndex)]) === null || _propsColumnObj$getCo === void 0 ? void 0 : _propsColumnObj$getCo.width
+        });
+      });
+      localColumns = ((_localColumns = localColumns) === null || _localColumns === void 0 ? void 0 : _localColumns.length) === 0 ? undefined : localColumns;
+      setCurColumns(cloneDeep(localColumns || propsColumns));
+    } else {
+      setCurColumns(cloneDeep(propsColumns));
+    }
+  }, [pathKey, cacheTime, propsColumns]);
+  useEffect(function () {
+    if (!cacheTime && JSON.stringify(curTableConfig) !== '{}') {
+      // 关闭缓存时，清理对应table缓存
+      Storage.setItem('tableConfig', JSON.stringify(_objectSpread(_objectSpread({}, curTableConfig), {}, _defineProperty({}, pathKey, undefined))));
+    }
+  }, [cacheTime, curTableConfig, storage]);
+  // 重置列宽，恢复至props的columns列宽
+  var resetColumnWidth = function resetColumnWidth() {
+    var nextColumns = _toConsumableArray(curColumns);
+    nextColumns === null || nextColumns === void 0 ? void 0 : nextColumns.forEach(function (item) {
+      var _propsColumnObj$item$;
+      if ((_propsColumnObj$item$ = propsColumnObj[item.dataIndex]) === null || _propsColumnObj$item$ === void 0 ? void 0 : _propsColumnObj$item$.width) {
+        var _propsColumnObj$item$2;
+        item.width = (_propsColumnObj$item$2 = propsColumnObj[item.dataIndex]) === null || _propsColumnObj$item$2 === void 0 ? void 0 : _propsColumnObj$item$2.width;
+      } else {
+        delete item.width;
+      }
+    });
+    setCurColumns(nextColumns);
+  };
+  // 列宽resize函数
+  var handleResize = function handleResize(index) {
+    return function (e, _ref3) {
+      var size = _ref3.size;
+      var nextColumns = _toConsumableArray(curColumns);
+      nextColumns[index] = _objectSpread(_objectSpread({}, nextColumns[index]), {}, {
+        width: size.width
+      });
+      setCurColumns(nextColumns);
+    };
+  };
+  var columns = useMemo(function () {
+    var newColumns = curColumns.map(function (item, index) {
+      var _propsColumnObj$getCo2;
+      if ((_propsColumnObj$getCo2 = propsColumnObj[getColumnDataIndex(item.dataIndex)]) === null || _propsColumnObj$getCo2 === void 0 ? void 0 : _propsColumnObj$getCo2.render) {
+        item.render = propsColumnObj[getColumnDataIndex(item.dataIndex)].render;
+      }
+      return _objectSpread(_objectSpread({
+        ellipsis: resizeColumn
+      }, item), {}, {
+        width: item.width,
+        onHeaderCell: function onHeaderCell(column) {
+          return {
+            width: column.width,
+            minwidth: column.minWidth,
+            onDrag: handleResize(index)
+          };
+        }
+      });
+    }).filter(function (item) {
+      return !(item === null || item === void 0 ? void 0 : item.delete);
+    });
+    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item) {
+      formatColumn(item);
+    });
+    return newColumns;
+  }, [curColumns, handleResize]);
+  var handleColumnConfig = function handleColumnConfig(checkList) {
+    var newColumns = checkList === null || checkList === void 0 ? void 0 : checkList.map(function (item) {
+      return _objectSpread({}, propsColumnObj[item.dataIndex]);
+    });
+    setCurColumns(newColumns);
+  };
+  useDebounceEffect(function () {
+    if (cacheTime) {
+      var newTableConfig = _objectSpread(_objectSpread({}, curTableConfig), {}, _defineProperty({}, pathKey, {
+        startTime: new Date().getTime(),
+        columns: curColumns.map(function (item) {
+          return {
+            dataIndex: item.dataIndex,
+            width: Math.round(Number(item.width))
+          };
+        })
+      }));
+      Storage.setItem('tableConfig', JSON.stringify(newTableConfig));
+    }
+  }, [cacheTime, storage, pathKey, curColumns], {
+    wait: 100
+  });
+  var customColumns = useMemo(function () {
+    return propsColumns.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        disabled: item.fixed
+      });
+    });
+  }, [propsColumns]);
+  var checkColumns = useMemo(function () {
+    return curColumns.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        disabled: item.fixed
+      });
+    });
+  }, [curColumns]);
+  var Empty = /*#__PURE__*/React.createElement("div", {
+    className: "ant-empty ant-empty-normal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ant-empty-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: empty,
+    alt: "\u6682\u65E0\u6570\u636E"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ant-empty-description"
+  }, "\u6682\u65E0\u6570\u636E"));
+  var renderSummary = function renderSummary() {
+    var _ref4 = summary || {},
+      columns = _ref4.columns,
+      _ref4$total = _ref4.total,
+      total = _ref4$total === void 0 ? true : _ref4$total,
+      _ref4$fixed = _ref4.fixed,
+      fixed = _ref4$fixed === void 0 ? true : _ref4$fixed;
+    var _ref5 = tableProps || {},
+      dataSource = _ref5.dataSource;
+    // 没有数据时，不展示合计栏
+    if (!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(_Table.Summary, {
+      fixed: fixed
+    }, /*#__PURE__*/React.createElement(_Table.Summary.Row, null, columns === null || columns === void 0 ? void 0 : columns.map(function (_ref6) {
+      var key = _ref6.key,
+        index = _ref6.index,
+        colSpan = _ref6.colSpan,
+        prefix = _ref6.prefix,
+        title = _ref6.title,
+        precision = _ref6.precision,
+        valueType = _ref6.valueType;
+      var text = null;
+      if (title) {
+        text = title;
+      } else if (total && key) {
+        var _dataSource$reduce;
+        var format = valueTypeRender === null || valueTypeRender === void 0 ? void 0 : valueTypeRender[valueType];
+        var sum = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$reduce = dataSource.reduce) === null || _dataSource$reduce === void 0 ? void 0 : _dataSource$reduce.call(dataSource, function (pre, cur) {
+          var _cur$key;
+          return tools.calc(pre, '+', (_cur$key = cur[key]) !== null && _cur$key !== void 0 ? _cur$key : 0);
+        }, 0);
+        text = format ? format(sum, precision !== null && precision !== void 0 ? precision : 2) : sum;
+      }
+      return /*#__PURE__*/React.createElement(_Table.Summary.Cell, {
+        key: key,
+        index: index,
+        colSpan: colSpan
+      }, prefix, text);
+    })));
+  };
+  var cls = classnames(_defineProperty({
+    'pro-table': true,
+    'pro-table-no-stripe': !stripe
+  }, className, className));
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: {
+      pathKey: pathKey,
+      tableConfig: tableConfig,
+      Storage: Storage
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls
+  }, (headerRender || columnConfig || resizeColumn) && /*#__PURE__*/React.createElement("div", {
+    className: "column-config"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left-contain"
+  }, headerRender ? headerRender() : null), /*#__PURE__*/React.createElement("div", {
+    className: "right-actions"
+  }, resizeColumn && /*#__PURE__*/React.createElement(_Button, {
+    icon: /*#__PURE__*/React.createElement(ReactSVG, {
+      className: "anticon",
+      wrapper: "span",
+      src: resetSvg
+    }),
+    onClick: resetColumnWidth
+  }, "\u91CD\u7F6E\u5217\u5BBD"), columnConfig && /*#__PURE__*/React.createElement(ProTransferModal, {
+    label: "\u5217",
+    title: "\u81EA\u5B9A\u4E49\u5217",
+    draggable: true,
+    span: 8,
+    defaultValue: checkColumns,
+    clearCheckedOnClose: false,
+    fieldNames: {
+      value: 'dataIndex',
+      label: 'title'
+    },
+    dataSource: customColumns,
+    onOk: handleColumnConfig
+  }, /*#__PURE__*/React.createElement(_Button, {
+    className: "custom-column-btn",
+    icon: /*#__PURE__*/React.createElement(ReactSVG, {
+      className: "anticon",
+      wrapper: "span",
+      src: customColumnSvg
+    })
+  }, "\u81EA\u5B9A\u4E49\u5217")))), /*#__PURE__*/React.createElement("div", {
+    className: "pro-table-container"
+  }, /*#__PURE__*/React.createElement(_Table, _objectSpread({
+    components: resizeColumn ? TableResizable.components : undefined,
+    // @ts-ignore
+    columns: columns,
+    locale: {
+      emptyText: Empty
+    },
+    summary: _typeof(summary) === 'object' ? function () {
+      return renderSummary();
+    } : summary
+  }, tableProps)), /*#__PURE__*/React.createElement(ResizableLine, null)), footerRender ? /*#__PURE__*/React.createElement("div", {
+    className: "pro-table-footer ".concat((tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) ? 'has-page' : 'no-page')
+  }, footerRender()) : null));
+}
+ProTable.defaultProps = {
+  quickConfig: false,
+  stripe: true
+};
+ProTable.useAntdTable = useAntdTable;
+export default ProTable;

package/es/ProTable/propsType.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { TableProps } from 'antd/lib/table/Table';
+import { ColumnType, GetRowKey, RowSelectionType } from 'antd/lib/table/interface';
+import { FormInstance } from 'antd';
+interface SummaryColumnProps {
+    key: string;
+    index: number;
+    title?: string;
+    colSpan?: number;
+    valueType?: string;
+    precision?: number;
+    prefix?: ReactNode | string;
+}
+export interface SummaryProps {
+    columns: SummaryColumnProps[];
+    total?: boolean;
+    fixed?: boolean;
+}
+export type ProTableProps = TableProps<any> & {
+    tableId?: string;
+    rowKey?: string | GetRowKey<any>;
+    headerRender?: () => ReactNode;
+    quickConfig?: boolean;
+    resizeColumn?: boolean;
+    sortRow?: boolean | 'drag' | 'move';
+    columnConfig?: boolean;
+    cacheTime?: number | boolean;
+    sortColumnText?: string;
+    storage?: 'localStorage' | 'sessionStorage';
+    footerRender?: () => ReactNode;
+    summary?: SummaryProps | TableProps<any>['summary'];
+    /**
+     * 斑马纹设置
+     */
+    stripe?: boolean;
+};
+export type ProTableValueType = 'percentage' | 'permillage' | 'thousandth' | 'datePicker' | 'enumName' | 'enumCodeName' | 'address' | 'thousandthCNY' | 'date' | 'dateTime' | 'dateStartTime' | 'dateEndTime' | 'dateStartEndTime';
+export interface ProTableColumn extends ColumnType<any> {
+    dataIndex: string | string[];
+    width?: number | string;
+    minWidth?: number;
+    valueType?: ProTableValueType;
+    format?: string;
+    precision?: number;
+    code?: string | (() => string);
+    copyable?: boolean;
+    tooltip?: ReactNode | {
+        title?: ReactNode;
+        icon?: ReactNode;
+    };
+    transform?: (value: any, record?: any) => string[];
+}
+export interface Response<T = any> {
+    data: T;
+    status: number;
+    message: string;
+}
+export interface PaginationProps {
+    pageNum: number;
+    pageSize: number;
+}
+export interface RequestOptions<T, R> {
+    form?: FormInstance;
+    isResetQuery?: boolean;
+    rowKey?: string | GetRowKey<R>;
+    rowSelection?: boolean;
+    rowSelectType?: RowSelectionType;
+    rowSelections?: boolean;
+    extraParams?: Partial<T>;
+    page?: PaginationProps;
+    onPageChange?: (page: PaginationProps) => void;
+    transformParams?: (params: any) => any;
+    transformResponse?: (data: any) => R[];
+}
+export interface Params<T = any> extends PaginationProps {
+    queryBean?: Partial<T>;
+    [key: string]: any;
+}
+export interface List<T> {
+    pageNum: number;
+    pageSize: number;
+    total: number;
+    list: T[];
+}
+export type ListResponse<T> = Response<List<T>>;
+export type Service<Req, Res> = (params?: Params<Req>) => Promise<ListResponse<Res>>;
+export {};

package/es/ProTable/propsType.js

@@ -0,0 +1 @@
+export {};

package/es/ProTable/style/index.less

@@ -0,0 +1,299 @@
+.pro-table {
+  .custom-column-btn {
+    display    : inline-flex;
+    align-items: center;
+
+    &:hover,
+    &:visited,
+    &:focus {
+      color     : unset;
+      border    : 1px solid #d9d9d9;
+      background: unset;
+    }
+
+    .anticon {
+      height: 16px;
+    }
+  }
+
+  .copyable-table-cell {
+
+
+    .ant-typography {
+      margin-bottom: 0;
+      display      : flex;
+      align-items  : center;
+    }
+
+    .drag-icon {
+      &>div {
+        display    : flex;
+        align-items: center;
+      }
+    }
+
+    .ant-typography-copy-success {
+      svg {
+        fill: var(--zaui-success, #00ae4d);
+      }
+    }
+
+    svg {
+      width  : 14px;
+      height : 14px;
+      fill   : #3f3f3f;
+      display: inline-block;
+    }
+  }
+
+  &.pro-table-no-stripe {
+    .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(n)>td {
+      background: #fff;
+    }
+  }
+
+  .ant-table-thead {
+    .ant-dropdown-trigger {
+      &.ant-dropdown-open {
+
+        .anticon-down {
+          transition: transform 0.3s;
+          transform : rotateZ(180deg);
+        }
+      }
+    }
+  }
+
+  .pro-table-container {
+    position: relative;
+
+    .pro-table-resizable-line {
+      position   : absolute;
+      width      : 0;
+      top        : 0;
+      border-left: 1px solid var(--zaui-brand, #006aff);
+      height     : 100%;
+      left       : 100px;
+    }
+  }
+
+  .ant-table-thead {
+    tr th {
+      &:last-child {
+        .react-resizable-handle {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ant-space {
+    gap: var(--zaui-space-size-sm, 8px) !important;
+  }
+
+  .ant-btn-link {
+    padding: 0 var(--zaui-space-size-xs, 4px);
+
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+
+  .column-config {
+    display        : flex;
+    justify-content: space-between;
+    margin-bottom  : var(--zaui-space-size-md, 16px);
+
+    .right-actions {
+      display    : flex;
+      align-items: center;
+
+      >.ant-btn {
+
+        &:hover,
+        &:visited,
+        &:focus {
+          color     : unset;
+          border    : 1px solid #d9d9d9;
+          background: unset;
+        }
+      }
+
+      .custom-column-btn {
+        margin-left: var(--zaui-space-size-sm, 8px);
+      }
+    }
+  }
+
+  .ant-empty .ant-empty-image {
+    height: 80px;
+  }
+
+  .ant-table-thead>tr>th {
+    border-bottom: 0;
+    white-space  : nowrap;
+
+    .pro-table-th-cell {
+      width        : 100%;
+      overflow     : hidden;
+      white-space  : nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &::before {
+      width: 0 !important;
+    }
+
+    &.react-resizable {
+      &::before {
+        width: 1px !important;
+      }
+    }
+
+    .pro-table-tooltip {
+      display    : inline-flex;
+      align-items: center;
+
+      .icon-tip {
+        svg {
+          margin-left   : 8px;
+          width         : 14px;
+          height        : 14px;
+          vertical-align: text-bottom;
+          fill          : #909090;
+        }
+      }
+    }
+  }
+
+  .ant-table-tbody .ant-table-placeholder {
+    background: var(--zaui-base-bg, #ffffff) !important;
+  }
+
+  .ant-table-tbody>tr:not(.ant-table-placeholder)>td {
+    border-bottom: 0;
+  }
+
+  .ant-table-tbody>tr:not(.ant-table-measure-row)>td {
+    border-bottom: 0;
+  }
+
+  .ant-table-tbody tr:nth-child(n)>td {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .ant-table-tbody tr:nth-child(2n)>td {
+    background-color: #F7F9FC;
+  }
+
+  .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(n)>td {
+    background-color: #F7F9FC;
+  }
+
+  .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(2n)>td {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .react-resizable {
+    position       : relative;
+    background-clip: padding-box;
+
+    .ant-table-filter-trigger {
+      margin-right: 0;
+    }
+  }
+
+  .react-resizable-handle {
+    position: absolute;
+    right   : -5px;
+    bottom  : 0;
+    z-index : 1;
+    width   : 10px;
+    height  : 100%;
+    cursor  : col-resize;
+
+    &::before {
+      content   : '';
+      position  : absolute;
+      left      : 50%;
+      top       : 50%;
+      width     : 1px;
+      height    : 18px;
+      background: #DCDCDC;
+      transform : translateY(-50%);
+    }
+
+    &.active::before,
+    &:hover::before {
+      content    : '';
+      position   : absolute;
+      left       : 50%;
+      height     : 100%;
+      bottom     : 0;
+      border-left: 5px solid var(--zaui-brand, #006aff);
+    }
+  }
+
+  .ant-table-tbody tr td .ant-checkbox-wrapper-checked.checkbox-disabled {
+    pointer-events: none;
+    cursor        : not-allowed;
+    opacity       : 0.5;
+  }
+
+  .ant-pagination-options-quick-jumper input {
+    border    : unset;
+    background: #FAFAFA;
+    min-width : 32px;
+    height    : 32px;
+  }
+
+  .ant-pagination .ant-pagination-item-active a {
+    color        : #fff;
+    background   : var(--zaui-brand, #006aff) !important;
+    border-radius: var(--zaui-border-radius, 4px);
+  }
+
+  .pro-table-footer {
+    &.no-page {
+      margin-top: var(--zaui-space-size-md, 16px);
+    }
+
+    &.has-page {
+      margin: -50px 0 var(--zaui-space-size-md, 16px) 0;
+    }
+  }
+}
+
+.setting-overlay {
+  .column-setting-title {
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+  }
+
+  .ant-popover-inner-content {
+    max-height: 280px;
+    overflow-y: auto;
+  }
+
+  .column-checkbox-item {
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+
+    .ant-checkbox-wrapper {
+      font-weight: 500;
+    }
+  }
+}
+
+.ant-dropdown-placement-bottomLeft {
+  .ant-dropdown-menu-vertical.ant-dropdown-menu-light {
+
+    .ant-dropdown-menu-item-only-child {
+      &:hover {
+        background: rgba(0, 106, 255, 0.08);
+      }
+    }
+  }
+}