@aloudata/aloudata-design 1.9.17 → 1.10.0

package/dist/Tree/Tree.d.ts

@@ -0,0 +1,136 @@
+import type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';
+import RcTree from 'rc-tree';
+import type { DataNode, Key } from 'rc-tree/lib/interface';
+import * as React from 'react';
+export type SwitcherIcon = React.ReactNode | ((props: AldTreeNodeProps) => React.ReactNode);
+export type TreeLeafIcon = React.ReactNode | ((props: AldTreeNodeProps) => React.ReactNode);
+export interface AldTreeNodeAttribute {
+    eventKey: string;
+    prefixCls: string;
+    className: string;
+    expanded: boolean;
+    selected: boolean;
+    checked: boolean;
+    halfChecked: boolean;
+    children: React.ReactNode;
+    title: React.ReactNode;
+    pos: string;
+    dragOver: boolean;
+    dragOverGapTop: boolean;
+    dragOverGapBottom: boolean;
+    isLeaf: boolean;
+    selectable: boolean;
+    disabled: boolean;
+    disableCheckbox: boolean;
+}
+export interface AldTreeNodeProps {
+    className?: string;
+    checkable?: boolean;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    title?: string | React.ReactNode;
+    key?: Key;
+    eventKey?: string;
+    isLeaf?: boolean;
+    checked?: boolean;
+    expanded?: boolean;
+    loading?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    icon?: ((treeNode: AldTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
+    children?: React.ReactNode;
+    [customProp: string]: any;
+}
+export type AldTreeNode = React.Component<AldTreeNodeProps, object>;
+export interface AldTreeNodeBaseEvent {
+    node: AldTreeNode;
+    nativeEvent: MouseEvent;
+}
+export interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {
+    event: 'check';
+    checked?: boolean;
+    checkedNodes?: AldTreeNode[];
+}
+export interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {
+    event: 'select';
+    selected?: boolean;
+    selectedNodes?: DataNode[];
+}
+export interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {
+    expanded?: boolean;
+}
+export interface AldTreeNodeMouseEvent {
+    node: AldTreeNode;
+    event: React.DragEvent<HTMLElement>;
+}
+export interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {
+    expandedKeys: Key[];
+}
+export interface AldTreeNodeAttribute {
+    node: AldTreeNode;
+    dragNode: AldTreeNode;
+    dragNodesKeys: Key[];
+    dropPosition: number;
+    dropToGap?: boolean;
+    event: React.MouseEvent<HTMLElement>;
+}
+export type TreeNodeNormal = DataNode;
+type DraggableFn = (node: DataNode) => boolean;
+interface DraggableConfig {
+    icon?: React.ReactNode | false;
+    nodeDraggable?: DraggableFn;
+}
+export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon'> {
+    showLine?: boolean | {
+        showLeafIcon: boolean | TreeLeafIcon;
+    };
+    className?: string;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 是否自动展开父节点 */
+    autoExpandParent?: boolean;
+    /** Checkable状态下节点选择完全受控（父子节点选中状态不再关联） */
+    checkStrictly?: boolean;
+    /** 是否支持选中 */
+    checkable?: boolean;
+    /** 是否禁用树 */
+    disabled?: boolean;
+    /** 默认展开所有树节点 */
+    defaultExpandAll?: boolean;
+    /** 默认展开对应树节点 */
+    defaultExpandParent?: boolean;
+    /** 默认展开指定的树节点 */
+    defaultExpandedKeys?: Key[];
+    /** （受控）展开指定的树节点 */
+    expandedKeys?: Key[];
+    /** （受控）选中复选框的树节点 */
+    checkedKeys?: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    };
+    /** 默认选中复选框的树节点 */
+    defaultCheckedKeys?: Key[];
+    /** （受控）设置选中的树节点 */
+    selectedKeys?: Key[];
+    /** 默认选中的树节点 */
+    defaultSelectedKeys?: Key[];
+    selectable?: boolean;
+    /** 点击树节点触发 */
+    filterAldTreeNode?: (node: AldTreeNode) => boolean;
+    loadedKeys?: Key[];
+    /** 设置节点可拖拽（IE>8） */
+    draggable?: DraggableFn | boolean | DraggableConfig;
+    style?: React.CSSProperties;
+    showIcon?: boolean;
+    icon?: ((nodeProps: AldTreeNodeAttribute) => React.ReactNode) | React.ReactNode | RcTreeProps<T>['icon'];
+    switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];
+    prefixCls?: string;
+    children?: React.ReactNode;
+    blockNode?: boolean;
+    size?: 'large' | 'small';
+    titleRender?: (node: T) => React.ReactNode;
+    showTabLeader?: boolean;
+    handlerRender?: (node: T) => React.ReactNode;
+}
+declare const Tree: React.ForwardRefExoticComponent<TreeProps<DataNode> & React.RefAttributes<RcTree<DataNode>>>;
+export default Tree;

package/dist/Tree/Tree.js

@@ -0,0 +1,130 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import classNames from 'classnames';
+import { noop } from 'lodash';
+import RcTree from 'rc-tree';
+import * as React from 'react';
+import { ConfigContext } from "../ConfigProvider";
+import { ChevronDownLine, DragLine } from "../Icon";
+import collapseMotion from "../_utils/motion";
+import theme from "../style/themes/default/themeColor.module.less";
+import dropIndicatorRender from "./utils/dropIndicator";
+import renderSwitcherIcon from "./utils/iconUtil";
+var TREE_SWITCH_LARGE_ICON_SIZE = 20;
+var TREE_SWITCH_CION_SIZE = 16;
+
+// [Legacy] Compatible for v3
+
+var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames;
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction,
+    virtual = _React$useContext.virtual;
+  var size = props.size || 'small';
+  var className = props.className,
+    _props$showIcon = props.showIcon,
+    showIcon = _props$showIcon === void 0 ? false : _props$showIcon,
+    showLine = props.showLine,
+    _props$blockNode = props.blockNode,
+    blockNode = _props$blockNode === void 0 ? false : _props$blockNode,
+    children = props.children,
+    _props$checkable = props.checkable,
+    checkable = _props$checkable === void 0 ? false : _props$checkable,
+    _props$selectable = props.selectable,
+    selectable = _props$selectable === void 0 ? true : _props$selectable,
+    draggable = props.draggable,
+    titleRender = props.titleRender,
+    showTabLeader = props.showTabLeader,
+    _props$handlerRender = props.handlerRender,
+    handlerRender = _props$handlerRender === void 0 ? noop : _props$handlerRender,
+    _props$motion = props.motion,
+    motion = _props$motion === void 0 ? _objectSpread(_objectSpread({}, collapseMotion), {}, {
+      motionAppear: false
+    }) : _props$motion;
+  var prefixCls = getPrefixCls('tree', 'ald-tree');
+  var customTitleRender = React.useCallback(function (node) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, titleRender ? titleRender(node) : node.title, showTabLeader && /*#__PURE__*/React.createElement("div", {
+      className: "ald-tree-tab-leader"
+    }), handlerRender && handlerRender(node));
+  }, [titleRender, showTabLeader, handlerRender]);
+  var newProps = _objectSpread(_objectSpread({}, props), {}, {
+    checkable: checkable,
+    selectable: selectable,
+    showIcon: showIcon,
+    motion: motion,
+    blockNode: blockNode,
+    showLine: Boolean(showLine),
+    dropIndicatorRender: dropIndicatorRender,
+    titleRender: customTitleRender
+  });
+  var draggableConfig = React.useMemo(function () {
+    if (!draggable) {
+      return false;
+    }
+    var newIcon = /*#__PURE__*/React.createElement(DragLine, {
+      size: TREE_SWITCH_CION_SIZE,
+      color: theme.NL50
+    });
+    var mergedDraggable = {
+      icon: newIcon
+    };
+    switch (_typeof(draggable)) {
+      case 'function':
+        mergedDraggable.nodeDraggable = draggable;
+        break;
+      case 'object':
+        mergedDraggable = _objectSpread(_objectSpread({}, draggable), {}, {
+          icon: newIcon
+        });
+        break;
+      default:
+        break;
+      // Do nothing
+    }
+
+    return mergedDraggable;
+  }, [draggable]);
+  var renderIndent = function renderIndent(nodeProps) {
+    var _keyEntities;
+    var eventKey = nodeProps.eventKey,
+      keyEntities = nodeProps.context.keyEntities,
+      isLeaf = nodeProps.isLeaf;
+    var level = ((_keyEntities = keyEntities[eventKey]) === null || _keyEntities === void 0 ? void 0 : _keyEntities.level) || 0;
+    var indentWidth = isLeaf ? TREE_SWITCH_CION_SIZE : 0;
+    indentWidth += level * (TREE_SWITCH_CION_SIZE / 2);
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: indentWidth
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(RcTree, _extends({
+    itemHeight: 20,
+    ref: ref,
+    virtual: virtual
+  }, newProps, {
+    prefixCls: prefixCls,
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className),
+    direction: direction,
+    checkable: checkable ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-checkbox-inner")
+    }) : checkable,
+    selectable: selectable
+    // @ts-ignore
+    ,
+    switcherIcon: function switcherIcon(nodeProps) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ChevronDownLine, {
+        size: size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE,
+        color: theme.NL50
+      }, "\u5C55\u5F00"), showLine, nodeProps));
+    },
+    draggable: draggableConfig
+  }), children);
+});
+export default Tree;

package/dist/Tree/demo/basic/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 export default (function () {
   return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Tree, {
     treeData: [{
-      title: 'parent 1',
+      title: 'Parent 1',
       key: '0-0',
       children: [{
         title: 'parent 1-0',
@@ -26,7 +26,8 @@ export default (function () {
               color: '#1890ff'
             }
           }, "sss"),
-          key: '0-0-1-0'
+          key: '0-0-1-0',
+          disabled: true
         }]
       }]
     }]

package/dist/Tree/demo/drag/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Tree/demo/drag/index.js

@@ -0,0 +1,52 @@
+import { App, Tree } from "../../..";
+import React from 'react';
+export default (function () {
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Tree, {
+    draggable: true,
+    checkable: true,
+    showTabLeader: true,
+    onSelect: function onSelect(node, s) {
+      console.log('onSelect', node, s);
+    },
+    handlerRender: function handlerRender(node) {
+      return /*#__PURE__*/React.createElement("div", null, node.title, "handler");
+    },
+    titleRender: function titleRender(node) {
+      return /*#__PURE__*/React.createElement("span", null, node.title);
+    },
+    treeData: [{
+      title: 'Parent 1',
+      key: '0-0',
+      checkable: true,
+      children: [{
+        title: 'parent 1-0',
+        key: '0-0-0',
+        selectable: true,
+        children: [{
+          title: 'leaf',
+          selectable: true,
+          key: '0-0-0-0',
+          isLeaf: true
+        }, {
+          title: 'leaf',
+          key: '0-0-0-1',
+          isLeaf: true
+        }]
+      }, {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        disabled: true,
+        selectable: true,
+        children: [{
+          title: /*#__PURE__*/React.createElement("span", {
+            style: {
+              color: '#1890ff'
+            }
+          }, "sss"),
+          key: '0-0-1-0',
+          disabled: true
+        }]
+      }]
+    }]
+  }));
+});

package/dist/Tree/index.d.ts

@@ -1,13 +1,19 @@
-import { DataNode } from 'antd/lib/tree';
-import { AntTreeNode, AntTreeNodeCheckedEvent, AntTreeNodeExpandedEvent, AntTreeNodeMouseEvent, AntTreeNodeProps, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, TreeProps as AntdTreeProps } from 'antd/lib/tree/Tree';
-import RcTree from 'rc-tree';
-import { BasicDataNode } from 'rc-tree/lib/interface';
-import React, { ForwardedRef } from 'react';
-export type { DataNode, EventDataNode } from 'antd/lib/tree';
-export type { ExpandAction as DirectoryTreeExpandAction, DirectoryTreeProps, } from 'antd/lib/tree/DirectoryTree';
-export type { AntTreeNode, AntTreeNodeMouseEvent, AntTreeNodeExpandedEvent, AntTreeNodeCheckedEvent, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, AntTreeNodeProps, };
-export type TreeProps<T extends BasicDataNode = DataNode> = Omit<AntdTreeProps<T>, 'switcherIcon'>;
-declare const _default: <T extends BasicDataNode = DataNode>(props: TreeProps<T> & {
-    ref?: React.ForwardedRef<RcTree<DataNode>> | undefined;
-}) => React.ReactElement;
-export default _default;
+/// <reference types="react" />
+import type RcTree from 'rc-tree';
+import type { BasicDataNode } from 'rc-tree';
+import { TreeNode } from 'rc-tree';
+import type { DataNode } from 'rc-tree/lib/interface';
+import DirectoryTree from './DirectoryTree';
+import type { TreeProps } from './Tree';
+export type { EventDataNode } from 'rc-tree/lib/interface';
+export type { ExpandAction as DirectoryTreeExpandAction, DirectoryTreeProps, } from './DirectoryTree';
+export type { AldTreeNode, AldTreeNodeAttribute, AldTreeNodeCheckedEvent, AldTreeNodeExpandedEvent, AldTreeNodeMouseEvent, AldTreeNodeProps, AldTreeNodeSelectedEvent, TreeProps, } from './Tree';
+export type { DataNode };
+type CompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(props: React.PropsWithChildren<TreeProps<T>> & {
+    ref?: React.Ref<RcTree>;
+}) => React.ReactElement) & {
+    TreeNode: typeof TreeNode;
+    DirectoryTree: typeof DirectoryTree;
+};
+declare const Tree: CompoundedComponent;
+export default Tree;

package/dist/Tree/index.js

@@ -1,17 +1,7 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
-import { Tree as AntdTree } from 'antd';
-import React from 'react';
-import { ChevronDownLine } from "../Icon";
-import theme from "../style/themes/default/themeColor.module.less";
-function Tree(props, ref) {
-  var restProps = Object.assign({}, (_objectDestructuringEmpty(props), props));
-  return /*#__PURE__*/React.createElement(AntdTree, _extends({}, restProps, {
-    ref: ref,
-    switcherIcon: /*#__PURE__*/React.createElement(ChevronDownLine, {
-      size: 14,
-      color: theme.NL40
-    }, "\u5C55\u5F00")
-  }));
-}
-export default /*#__PURE__*/React.forwardRef(Tree);
+import { TreeNode } from 'rc-tree';
+import DirectoryTree from "./DirectoryTree";
+import TreePure from "./Tree";
+var Tree = TreePure;
+Tree.DirectoryTree = DirectoryTree;
+Tree.TreeNode = TreeNode;
+export default Tree;

package/dist/Tree/style/checkbox.less

@@ -0,0 +1,226 @@
+.aldCheckboxFn(@checkbox-prefix-cls: ~'ald-tree-checkbox') {
+  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
+  // 一般状态
+  .@{checkbox-prefix-cls} {
+    .reset-component();
+
+    position: relative;
+    line-height: 1;
+    white-space: nowrap;
+    outline: none;
+    cursor: pointer;
+
+    &-checked::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px solid @checkbox-color;
+      border-radius: @checkbox-border-radius;
+      visibility: hidden;
+      animation: ald-checkbox-effect 0.36s ease-in-out;
+      animation-fill-mode: backwards;
+      content: '';
+    }
+
+    &:hover::after,
+    .@{checkbox-prefix-cls}-wrapper:hover &::after {
+      visibility: hidden;
+    }
+
+    &-inner {
+      position: relative;
+      top: 0;
+      left: 0;
+      display: block;
+      width: @checkbox-size;
+      height: @checkbox-size;
+      direction: ltr;
+      background-color: @checkbox-check-bg;
+      border: 1px solid #dbdbdb;
+      border-radius: @checkbox-border-radius;
+      border-collapse: separate;
+      transition: all 0.3s;
+      transform: scale(0.875);
+
+      &::after {
+        @check-width: (@checkbox-size / 14) * 5px;
+        @check-height: (@checkbox-size / 14) * 8px;
+
+        position: absolute;
+        top: 50%;
+        left: 21.5%;
+        display: table;
+        width: @check-width;
+        height: @check-height;
+        border: 2px solid @checkbox-check-color;
+        border-top: 0;
+        border-left: 0;
+        transform: rotate(45deg) scale(0) translate(-50%, -50%);
+        opacity: 0;
+        transition: all 0.1s @ease-in-back, opacity 0.1s;
+        content: ' ';
+      }
+    }
+
+    &-input {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+
+  // 选中状态
+  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
+    position: absolute;
+    display: table;
+    border: 2px solid @checkbox-color;
+    border-top: 0;
+    border-left: 0;
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    opacity: 1;
+    transition: all 0.2s @ease-out-back 0.1s;
+    content: ' ';
+  }
+
+  .@{checkbox-prefix-cls}-checked {
+    .@{checkbox-inner-prefix-cls} {
+      background-color: #f8f8f8;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-disabled {
+    cursor: initial;
+
+    &.@{checkbox-prefix-cls}-checked {
+      .@{checkbox-inner-prefix-cls}::after {
+        border-color: @disabled-color;
+        animation-name: none;
+      }
+    }
+
+    .@{checkbox-prefix-cls}-input {
+      cursor: initial;
+      pointer-events: none;
+    }
+
+    .@{checkbox-inner-prefix-cls} {
+      background-color: @input-disabled-bg;
+      // border-color: @border-color-base !important;
+
+      &::after {
+        border-color: @input-disabled-bg;
+        border-collapse: separate;
+        animation-name: none;
+      }
+    }
+
+    & + span {
+      color: @disabled-color;
+      cursor: initial;
+    }
+
+    // Not show highlight border of checkbox when disabled
+    &:hover::after,
+    .@{checkbox-prefix-cls}-wrapper:hover &::after {
+      visibility: hidden;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-wrapper {
+    .reset-component();
+
+    display: inline-flex;
+    align-items: baseline;
+    line-height: unset;
+    cursor: pointer;
+
+    &::after {
+      display: inline-block;
+      width: 0;
+      overflow: hidden;
+      content: '\a0';
+    }
+
+    &.@{checkbox-prefix-cls}-wrapper-disabled {
+      cursor: initial;
+    }
+
+    & + & {
+      margin-left: 8px;
+    }
+
+    &&-in-form-item {
+      input[type='checkbox'] {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  .@{checkbox-prefix-cls} + span {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+
+  .@{checkbox-prefix-cls}-group {
+    .reset-component();
+
+    display: inline-block;
+
+    &-item {
+      margin-right: @checkbox-group-item-margin-right;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    &-item + &-item {
+      margin-left: 0;
+    }
+  }
+
+  // 半选状态
+  .@{checkbox-prefix-cls}-indeterminate {
+    .@{checkbox-inner-prefix-cls} {
+      background-color: @checkbox-check-bg;
+    }
+    .@{checkbox-inner-prefix-cls}::after {
+      @indeterminate-width: @checkbox-size - 8px;
+      @indeterminate-height: @checkbox-size - 14px;
+
+      top: 50%;
+      left: 50%;
+      width: @indeterminate-width;
+      height: @indeterminate-height;
+      background-color: @checkbox-color;
+      border: 0;
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+      content: ' ';
+    }
+
+    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
+      background-color: @disabled-color;
+      border-color: @disabled-color;
+    }
+  }
+}
+
+@keyframes ald-checkbox-effect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}