@aloudata/aloudata-design 0.4.0-beta.1 → 0.4.0-beta.10

package/es/InputNumber/type.d.ts

@@ -0,0 +1,161 @@
+/// <reference types="react" />
+import { InputNumberProps } from 'antd';
+export interface IInputNumberProps extends InputNumberProps {
+    /**
+     * @description   带标签的Input，设置后置标签
+     * @type  ReactNode
+     * @default    --
+     */
+    addonBefore?: React.ReactNode;
+    /**
+     * @description   带标签的Input，设置前置标签
+     * @type  ReactNode
+     * @default   --
+     */
+    addonAfter?: React.ReactNode;
+    /**
+     * @description  自动获取焦点
+     * @type boolean
+     * @default   false
+     */
+    autoFocus?: boolean;
+    /**
+     * @description   是否有边框
+     * @type  boolean
+     * @default    true
+     */
+    bordered?: boolean;
+    /**
+    * @description   是否显示增减按钮，也可以设置自定义箭头图标
+    * @type boolean
+      | {
+          upIcon?: React.ReactNode;
+          downIcon?: React.ReactNode;
+        };
+    * @default    -
+    */
+    controls?: boolean | {
+        upIcon?: React.ReactNode;
+        downIcon?: React.ReactNode;
+    };
+    /**
+     * @description   小数点
+     * @type  string
+     * @default    -
+     */
+    decimalSeparator?: string;
+    /**
+     * @description  初始值
+     * @type  number
+     * @default   -
+     */
+    defaultValue?: number;
+    /**
+     * @description  禁用
+     * @type  boolean
+     * @default    false
+     */
+    disabled?: boolean;
+    /**
+     * @description   制定输入框展示值的格式
+     * @type  (value: number | string | undefined, info: { userTyping: boolean; input: string }) => string
+     * @default   -
+     */
+    formatter?: (value: number | string | undefined, info: {
+        userTyping: boolean;
+        input: string;
+    }) => string;
+    /**
+     * @description   是否启用键盘快捷行为
+     * @type  boolean
+     * @default   true
+     */
+    keyboard?: boolean;
+    /**
+     * @description   最大值
+     * @type  number
+     * @default    Number.MAX_SAFE_INTEGER
+     */
+    max?: number;
+    /**
+     * @description   最小值
+     * @type  number
+     * @default    Number.MIN_SAFE_INTEGER
+     */
+    min?: number;
+    /**
+     * @description   指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
+     * @type  (value: string) => number
+     * @default    -
+     */
+    parser?: (value: string | undefined) => number;
+    /**
+     * @description  数值精度，配置 formatter 时会以 formatter 为准
+     * @type number
+     * @default   -
+     */
+    precision?: number;
+    /**
+     * @description   只读
+     * @type  boolean
+     * @default    false
+     */
+    readonly?: boolean;
+    /**
+     * @description   设置校验状态
+     * @type  'warning' | 'error'
+     * @default    -
+     */
+    status?: 'warning' | 'error';
+    /**
+     * @description   带有前缀图标的input
+     * @type  ReactNode
+     * @default   -
+     */
+    prefix?: React.ReactNode;
+    /**
+     * @description   输入框大小
+     * @type 'small' | 'middle' | 'large'
+     * @default    -
+     */
+    size?: 'small' | 'middle' | 'large';
+    /**
+     * @description   每次改变步数，可以为小数
+     * @type  number | string
+     * @default    1
+     */
+    step?: number | string;
+    /**
+     * @description   字符值模式，开启后支持高精度小数。同时 onChange 将返回 string 类型
+     * @type  boolean
+     * @default    false
+     */
+    stringMode?: boolean;
+    /**
+     * @description   当前值
+     * @type  number
+     * @default   -
+     */
+    value?: number;
+    /**
+     * @description   变化回调
+     * @type   (value: number | string | null) => void
+     * @default    -
+     */
+    onChange?: (value: number | string | null) => void;
+    /**
+     * @description   按下回车的回调
+     * @type  (e: React.KeyboardEvent) => void
+     * @default    -
+     */
+    onPressEnter?: (e: React.KeyboardEvent) => void;
+    /**
+     * @description   点击上下箭头的回调
+     * @type  (value: number|string, info: { offset: number|string, type: 'up' | 'down' }) => void
+     * @default    -
+     */
+    onStep?: (value: number | string, info: {
+        offset: number | string;
+        type: 'up' | 'down';
+    }) => void;
+}

package/es/InputNumber/type.js

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

package/es/Menu/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MenuProps } from 'antd';
+import { ItemType as antdItemType } from 'antd/lib/menu/hooks/useItems';
 import MenuItem from './MenuItem';
 import type { MenuClickEventHandler } from 'rc-menu/lib/interface';
 export interface IMenuProps extends MenuProps {
@@ -12,6 +13,7 @@ export interface IMenuProps extends MenuProps {
     className?: string;
     children?: React.ReactNode | React.ReactNode[];
 }
+export declare type ItemType = antdItemType;
 declare function Menu(props: IMenuProps): JSX.Element;
 declare namespace Menu {
     var Item: typeof MenuItem;

package/es/Popconfirm/index.d.ts

@@ -0,0 +1,3 @@
+import Popconfirm, { PopconfirmProps } from 'antd/es/popconfirm';
+export { PopconfirmProps };
+export default Popconfirm;

package/es/Popconfirm/index.js

@@ -0,0 +1,2 @@
+import Popconfirm from 'antd/es/popconfirm';
+export default Popconfirm;

package/es/Popconfirm/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Popconfirm/style/index.js

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Popconfirm/style/index.less

@@ -0,0 +1 @@
+@import '../../style/index.less';

package/es/Progress/index.d.ts

@@ -0,0 +1,3 @@
+import Progress, { ProgressProps } from 'antd/es/progress';
+export { ProgressProps };
+export default Progress;

package/es/Progress/index.js

@@ -0,0 +1,2 @@
+import Progress from 'antd/es/progress';
+export default Progress;

package/es/Progress/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Progress/style/index.js

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Progress/style/index.less

@@ -0,0 +1 @@
+@import '../../style/index.less';

package/es/Select/style/variables.less.d.ts

@@ -90,7 +90,13 @@ interface CssExports {
   'SELECTOR_PADDING_HORIZONTAL_MIDDLE': string;
   'SELECTOR_PADDING_HORIZONTAL_MINI': string;
   'SELECTOR_PADDING_HORIZONTAL_SMALL': string;
+  'SHADOW_BODY_TOP_LEFT': string;
   'SHADOW_L': string;
+  'SHADOW_LG': string;
+  'SHADOW_MD': string;
+  'SHADOW_SM': string;
+  'SHADOW_XL': string;
+  'SHADOW_XS': string;
   'TA10': string;
   'TA20': string;
   'TA30': string;

package/es/Steps/style/index.less

@@ -1,9 +1,7 @@
 @import '../../style/index.less';
 
-.ant-steps-item-icon {
-  width: 24px;
-  height: 24px;
-  margin: 6px 8px -2px 0;
+.ald-steps .ant-steps-item .ant-steps-item-container .ant-steps-item-icon {
+  margin: 6px 8px -2px 42px;
   font-size: 12px;
   line-height: 24px;
   text-align: center;
@@ -15,6 +13,10 @@
 .ant-steps.ald-steps {
   padding: 24px;
 
+  .ant-steps-item-container {
+    height: 49px;
+  }
+
   .ant-steps-item-content {
     display: flex;
     flex-direction: column;
@@ -34,12 +36,16 @@
   // 常规step
   .ant-steps-item {
     .ant-steps-item-tail {
+      display: flex;
+      align-items: flex-start;
+      height: 30px;
       margin-left: 50px;
       padding: 3.5px 7px;
 
       &::after {
         height: 2px;
         background-color: @NL90;
+        content: '';
       }
     }
 

package/es/Table/Table.js

@@ -31,14 +31,15 @@ import Empty from './components/Empty';
 import TableHead from './components/TableHead';
 import TableBodyRowList from './components/TableBodyRowList';
 import { useTimeoutLock } from './hooks/useFrame';
-import StylesVariable from './style/variable.less';
+var tableHeadRowHeight = 44;
 var SCROLLBAR_SIZE = 15;
 var ZERO = 0;
 
 function Table(props, ref) {
   var _classnames3;
 
-  var columns = props.columns,
+  var tableKey = props.key,
+      columns = props.columns,
       data = props.data,
       onRowSelected = props.onRowSelected,
       loadMore = props.loadMore,
@@ -61,12 +62,12 @@ function Table(props, ref) {
       rowKey = props.rowKey,
       height = props.height;
 
-  var _useState = useState(ZERO),
+  var _useState = useState(undefined),
       _useState2 = _slicedToArray(_useState, 2),
       tableClientWidth = _useState2[0],
       setTableClientWidth = _useState2[1];
 
-  var _useState3 = useState(ZERO),
+  var _useState3 = useState(undefined),
       _useState4 = _slicedToArray(_useState3, 2),
       tableClientHeight = _useState4[0],
       setTableClientHeight = _useState4[1];
@@ -75,7 +76,6 @@ function Table(props, ref) {
   var tableRef = useRef(null);
   var tableHeadRef = useRef(null);
   var tableBodyRef = useRef(null);
-  var columnsRef = useRef([]);
   var columnsWidthMapRef = useRef();
   var columnsTotalWidthRef = useRef(ZERO);
 
@@ -90,12 +90,7 @@ function Table(props, ref) {
   var _useTimeoutLock = useTimeoutLock(),
       _useTimeoutLock2 = _slicedToArray(_useTimeoutLock, 2),
       setScrollTarget = _useTimeoutLock2[0],
-      getScrollTarget = _useTimeoutLock2[1]; // 记录初始columns, 后续更改不响应
-
-
-  if (columns && columnsRef.current.length === ZERO) {
-    columnsRef.current = columns;
-  } // 初始化进入时 渲染表格容器宽度
+      getScrollTarget = _useTimeoutLock2[1]; // 初始化进入时 渲染表格容器宽度
 
 
   useEffect(function () {
@@ -105,18 +100,22 @@ function Table(props, ref) {
   }, []); // 转换外部传入的columns
 
   var newColumns = useMemo(function () {
-    var _getColumnsWidthMap = getColumnsWidthMap(columnsRef.current, tableClientWidth, columnsWidthMapRef.current),
+    if (!tableClientWidth) {
+      return [];
+    }
+
+    var _getColumnsWidthMap = getColumnsWidthMap(columns, tableClientWidth, columnsWidthMapRef.current),
         columnsWidthMap = _getColumnsWidthMap.columnsWidthMap,
         totalColumnWidth = _getColumnsWidthMap.totalColumnWidth;
 
     columnsWidthMapRef.current = columnsWidthMap;
     columnsTotalWidthRef.current = totalColumnWidth;
-    return columnsRef.current.map(function (column, index) {
+    return columns.map(function (column, index) {
       var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
 
       var key = index.toString(); // 不设置dataIndex同时进行排序 则报错
 
-      if (!column.dataIndex === undefined && sortable) {
+      if (column.dataIndex === undefined && sortable) {
         message.error('不支持未设置dataIndex时进行排序设置');
       }
 
@@ -134,7 +133,7 @@ function Table(props, ref) {
         }
       });
     });
-  }, [sortable, tableClientWidth]); // 将rowId转为React Table支持的值
+  }, [columns, sortable, tableClientWidth]); // 将rowId转为React Table支持的值
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var transformRowId = function transformRowId(row, relativeIndex, parent) {
@@ -149,10 +148,23 @@ function Table(props, ref) {
     }
 
     return relativeIndex.toString();
-  }; // 计算初始传递给 React Table的排序字段
+  };
+  /**
+   * 计算初始传递给 React Table的排序字段
+   * 1. 不存在 sortable 或者存在loadMore（内部滚动时），不进行排序操作防止内部滚动时冲突;
+   * 2. 存在默认排序以及默认排序规则，以默认为准
+   * 3. 如果给了排序但没有默认，则按第一行排序
+   * @returns
+   */
 
 
   var getTableInitSort = function getTableInitSort() {
+    var EMPTY_SIZE = 0;
+
+    if (!sortable || loadMore || newColumns.length === EMPTY_SIZE) {
+      return [];
+    }
+
     if (defaultSort && defaultSort.id) {
       return [defaultSort];
     }
@@ -204,7 +216,7 @@ function Table(props, ref) {
   var tableHeadNode = /*#__PURE__*/React.createElement(TableHead, {
     canResizeColumn: resizeColumn,
     headerGroups: headerGroups,
-    tableContentWidth: columnsTotalWidthRef.current,
+    // tableContentWidth={columnsTotalWidthRef.current}
     defaultSort: defaultSort,
     sortable: sortable,
     columns: newColumns,
@@ -263,10 +275,15 @@ function Table(props, ref) {
   }, []); // 内部滚动时 纵向的滚动
 
   var onBodyVerticalScroll = useCallback(function (target) {
+    if (!tableClientHeight) {
+      return;
+    }
+
     var scrollHeight = target.scrollHeight,
         clientHeight = target.clientHeight,
         scrollTop = target.scrollTop;
-    var currentPosToBottomGap = scrollHeight - clientHeight - scrollTop;
+    var currentPosToBottomGap = scrollHeight - clientHeight - scrollTop; // 当前滚动条到底部的距离
+
     var scrollThresholdValue = getValidScrollThreshold(scrollThreshold, tableClientHeight);
 
     if (currentPosToBottomGap < scrollThresholdValue && hasNextPage && !loadMoreLoading) {
@@ -315,6 +332,10 @@ function Table(props, ref) {
   }, [hasNextPage]); // 渲染有设置高度的表格
 
   var renderTableWithHeight = function renderTableWithHeight() {
+    if (!tableClientWidth || !tableClientHeight) {
+      return null;
+    }
+
     var renderNoHeightTableBody = function renderNoHeightTableBody() {
       if (loading && !rows.length) {
         return /*#__PURE__*/React.createElement(Loading, null);
@@ -328,7 +349,7 @@ function Table(props, ref) {
         style: {
           overflow: 'overlay',
           overflowX: tableClientWidth + SCROLLBAR_SIZE > columnsTotalWidthRef.current ? 'hidden' : 'unset',
-          height: tableClientHeight - StylesVariable.TableHeadRowHeight
+          height: tableClientHeight - tableHeadRowHeight
         },
         ref: tableBodyRef,
         onScroll: onBodyScroll
@@ -336,29 +357,30 @@ function Table(props, ref) {
     };
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames("".concat(prefixCls, "-inner-wrap"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), height))
+      className: classnames("".concat(prefixCls, "-inner-wrap"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), !!height))
     }, /*#__PURE__*/React.createElement("div", {
       ref: tableHeadRef,
       className: "".concat(prefixCls, "-tableHeadScrollWrap")
     }, tableHeadNode), /*#__PURE__*/React.createElement("div", Object.assign({}, getTableBodyProps(), {
-      className: classnames("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-tbody-innerScroll"), height))
+      className: classnames("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-tbody-innerScroll"), !!height))
     }), renderNoHeightTableBody()));
   };
 
-  return /*#__PURE__*/React.createElement(ResizeObserver, {
+  return /*#__PURE__*/React.createElement("div", {
+    key: tableKey,
+    className: prefixCls,
+    ref: tableRef,
+    style: {
+      height: !height ? 'unset' : height
+    }
+  }, /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: function onResize(_ref2) {
       var clientWidth = _ref2.width,
           clientHeight = _ref2.height;
       setTableClientWidth(clientWidth);
       setTableClientHeight(clientHeight);
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls,
-    ref: tableRef,
-    style: {
-      height: !height ? 'unset' : height
-    }
-  }, /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
+  }, !tableClientWidth ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null)) : /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
     className: classnames("".concat(prefixCls, "-table-wrap"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-init-loading"), data.length === ZERO && loading), _defineProperty(_classnames3, "".concat(prefixCls, "-empty"), data.length === ZERO && loading), _classnames3))
   }), height ? renderTableWithHeight() : renderTableWithoutHeight())));
 }

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

@@ -4,7 +4,6 @@ import { ISort, TSortOrder } from '../../interface';
 import { IWidthDetail } from '../../utils';
 interface ITableWithoutHeightProps<T extends object = {}> {
     headerGroups: HeaderGroup<T>[];
-    tableContentWidth: number;
     canResizeColumn?: boolean;
     defaultSort?: ISort<T>;
     sortable?: boolean;

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

@@ -36,7 +36,6 @@ var ARRAY_FIRST_INDEX = 0;
 
 function TableHead(props) {
   var headerGroups = props.headerGroups,
-      tableContentWidth = props.tableContentWidth,
       canResizeColumn = props.canResizeColumn,
       defaultSort = props.defaultSort,
       _props$sortable = props.sortable,
@@ -228,7 +227,7 @@ function TableHead(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-thead"),
     style: {
-      width: tableContentWidth
+      width: columnsTotalWidthRef.current
     }
   }, headerGroups.map(function (headerGroup) {
     var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),

package/es/Table/interface.d.ts

@@ -11,12 +11,14 @@ export interface IColumn<RecordType> {
     render?: (value: any, row: RecordType, index: number) => React.ReactNode;
     width?: number | string;
     minWidth?: number;
+    widthFlex?: boolean;
     sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric';
     sortOrder?: TSortOrder;
     sortDirections?: Array<'ascend' | 'descend'>;
     selected?: boolean;
 }
 export interface ITableProps<RecordType> {
+    key?: React.Key;
     columns: IColumn<RecordType>[];
     data: RecordType[];
     onRowSelected?: (row: RecordType) => void;

package/es/Table/style/index.less

@@ -30,6 +30,7 @@
   }
 
   &-tableHeadScrollWrap {
+    display: flex;
     width: 100%;
     overflow-x: hidden;
   }
@@ -37,7 +38,7 @@
   &-cell {
     flex-grow: 1;
     height: unset;
-    color: @NL0;
+    color: inherit;
     text-align: left;
     word-break: break-all;
     border-bottom: 1px solid @NL95;
@@ -125,6 +126,10 @@
         display: flex;
         align-items: center;
         padding-left: 24px;
+
+        .ald-table-cell-container {
+          width: 100%;
+        }
       }
 
       &:hover {

package/es/Table/style/variable.less

@@ -2,9 +2,4 @@
 
 @ald-iconfont-css-prefix: anticon;
 @table-head-row-height: 44px;
-@table-head-row-height-num: 44;
 @table-body-row-height: 72px;
-
-:export {
-  TableHeadRowHeight: @table-head-row-height-num;
-}

package/es/Table/style/variable.less.d.ts

@@ -1,7 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'TableHeadRowHeight': string;
+
 }
 export const cssExports: CssExports;
 export default cssExports;

package/es/Table/utils.js

@@ -1,6 +1,6 @@
 var ZERO = 0;
 var NOT_SET = -1;
-var COLUMN_MIN_WIDTH = 72;
+var COLUMN_MIN_WIDTH = 80;
 var HUNDRED = 100; // TODO: 添加单侧
 
 export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
@@ -9,12 +9,19 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
   var widthMap = new Map();
   var totalColumnWidth = ZERO;
   columns.forEach(function (item, index) {
-    var _lastWidthMap$get;
-
     var key = index.toString();
-    var width = getWidthByColumnsWidth(clientWidth, item.width); // 首先判断是否是否是容器宽度的变化
+    var widthFlex = item.widthFlex;
+    var width = getWidthByColumnsWidth(clientWidth, item.width, widthFlex); // 首先判断是否是否是容器宽度的变化
+
+    var isSpecific;
 
-    var isSpecific = lastWidthMap ? (_lastWidthMap$get = lastWidthMap.get(key)) === null || _lastWidthMap$get === void 0 ? void 0 : _lastWidthMap$get.isSpecific : isSpecificWidth(item.width);
+    if (widthFlex) {
+      isSpecific = false;
+    } else {
+      var _lastWidthMap$get;
+
+      isSpecific = lastWidthMap ? (_lastWidthMap$get = lastWidthMap.get(key)) === null || _lastWidthMap$get === void 0 ? void 0 : _lastWidthMap$get.isSpecific : isSpecificWidth(item.width);
+    }
 
     if (lastWidthMap && isSpecific) {
       var _lastWidthMap$get2;
@@ -40,7 +47,7 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
 
       return widthMap.set(item, {
         isSpecific: (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific,
-        width: 72
+        width: COLUMN_MIN_WIDTH
       });
     });
   } // 设定宽度小于容器宽度时
@@ -72,8 +79,8 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
   };
 }
 
-function getWidthByColumnsWidth(clientWidth, width) {
-  if (width === undefined) {
+function getWidthByColumnsWidth(clientWidth, width, widthFlex) {
+  if (width === undefined || widthFlex) {
     return NOT_SET;
   }
 
@@ -123,7 +130,7 @@ export function getValidScrollThreshold(height, clientHeight) {
   return scrollThreshold;
 }
 export function getPercentageValue(percentage, containerNum) {
-  var percent = Math.floor(Number(percentage.replace('%', '')) / HUNDRED);
+  var percent = Number(percentage.replace('%', '')) / HUNDRED;
   return getValidWidthByNumber(containerNum * percent);
 }
 export function getPxValue(px) {

package/es/Tabs/index.js

@@ -1,5 +1,5 @@
 import "@aloudata/icons-react/styles/index.less";
-import _More from "@aloudata/icons-react/es/icons/More";
+import _MoreFill from "@aloudata/icons-react/es/icons/MoreFill";
 import "antd/es/tabs/style";
 import _Tabs from "antd/es/tabs";
 var _excluded = ["size", "className", "popupClassName", "adaptHeight"];
@@ -34,7 +34,7 @@ export default function Tabs(props) {
   return /*#__PURE__*/React.createElement(_Tabs, Object.assign({
     moreIcon: /*#__PURE__*/React.createElement("div", {
       className: "ald-tabs-moreIcon"
-    }, /*#__PURE__*/React.createElement(_More, {
+    }, /*#__PURE__*/React.createElement(_MoreFill, {
       color: "currentColor"
     })),
     tabBarGutter: 24,

package/es/Tabs/style/index.less

@@ -5,7 +5,7 @@
 @tabs-color: @NL30;
 @tabs-fontWeight: 400;
 //active
-@tabs-color-active: @B60;
+@tabs-color-active: @B30;
 @tabs-fontWeight-active: 600;
 
 //middle - default

package/es/Tooltip/index.d.ts

@@ -46,12 +46,12 @@ export interface ITooltipProps {
      * @description 用于手动控制浮层显隐
      * @default -
      */
-    visible?: boolean;
+    open?: boolean;
     /**
      * @description 显示隐藏的回调
      * @default -
      */
-    onVisibleChange?: (visible: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
     /**
      * @description 卡片类名
      * @default -