@pisell/materials 6.0.13 → 6.0.15

package/es/components/iconSelect/utils.js

@@ -0,0 +1,102 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React from 'react';
+export function get(obj, path, defaultValue) {
+  // 处理路径为空的情况
+  if (!path) return defaultValue;
+
+  // 将路径分割成数组
+  var keys = path.split('.');
+  var result = obj;
+
+  // 遍历路径
+  var _iterator = _createForOfIteratorHelper(keys),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var key = _step.value;
+      // 如果当前结果是null或undefined,返回默认值
+      if (result == null) {
+        return defaultValue;
+      }
+      result = result[key];
+    }
+
+    // 如果最终结果是null或undefined,返回默认值
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return result === undefined ? defaultValue : result;
+}
+function getIconfontIconList() {
+  // iconfont的js会在页面中添加svg元素
+  var symbols = Array.prototype.slice.call(window.document.querySelectorAll('svg[style="position: absolute; width: 0px; height: 0px; overflow: hidden;"][aria-hidden="true"] > symbol'));
+  return symbols.map(function (symbol) {
+    var id = symbol.id;
+    return {
+      name: id,
+      group: 'iconfont',
+      icon: function icon(props) {
+        return /*#__PURE__*/React.createElement("span", {
+          role: "img",
+          className: "anticon"
+        }, /*#__PURE__*/React.createElement("svg", {
+          viewBox: "64 64 896 896",
+          width: "1em",
+          height: "1em",
+          fill: "currentColor",
+          dangerouslySetInnerHTML: {
+            __html: symbol.innerHTML
+          }
+        }));
+      }
+    };
+  });
+}
+export function getAntdIconList() {
+  var antdIcons = window.icons;
+  return Object.keys(antdIcons).map(function (key) {
+    var _ref, _item$displayName, _item$render;
+    var item = antdIcons[key];
+    if (_typeof(item) !== 'object') {
+      return null;
+    }
+    var name = (_ref = (_item$displayName = item === null || item === void 0 ? void 0 : item.displayName) !== null && _item$displayName !== void 0 ? _item$displayName : item === null || item === void 0 ? void 0 : (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.displayName) !== null && _ref !== void 0 ? _ref : key;
+    var group = 'outlined';
+    var lowercaseName = name.toLowerCase();
+    if (/outlined$/.test(lowercaseName)) {
+      group = 'outlined';
+    } else if (/filled$/.test(lowercaseName)) {
+      group = 'filled';
+    } else if (/twotone$/.test(lowercaseName)) {
+      group = 'two-tone';
+    } else {
+      return null;
+    }
+    return {
+      name: name,
+      group: group,
+      icon: item
+    };
+  }).filter(Boolean);
+}
+export function getIconList() {
+  var iconfontIconList = getIconfontIconList();
+  var antdIconList = getAntdIconList();
+  var allIcons = [].concat(_toConsumableArray(iconfontIconList), _toConsumableArray(antdIconList));
+  var uniqueIconsMap = new Map();
+  allIcons.forEach(function (icon) {
+    if (!uniqueIconsMap.has(icon.name)) {
+      uniqueIconsMap.set(icon.name, icon);
+    }
+  });
+  return Array.from(uniqueIconsMap.values());
+}

package/es/components/image/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ImageProps as AntdImageProps } from 'antd';
+export interface ImageProps extends Omit<AntdImageProps, 'placeholder'> {
+    /**
+     * 占位图类型
+     */
+    fallbackType?: 'image' | 'avatar' | 'product';
+}
+declare const Image: React.FC<ImageProps>;
+export default Image;

package/es/components/image/index.js

@@ -0,0 +1,25 @@
+var _excluded = ["fallbackType", "fallback"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { Image as AntdImage } from 'antd';
+import image from "./image.png";
+import avatar from "./avatar.png";
+import product from "./product.png";
+var defaultFallbackMap = {
+  image: image,
+  avatar: avatar,
+  product: product
+};
+var Image = function Image(_ref) {
+  var _ref$fallbackType = _ref.fallbackType,
+    fallbackType = _ref$fallbackType === void 0 ? 'image' : _ref$fallbackType,
+    fallback = _ref.fallback,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var finalFallback = fallback || defaultFallbackMap[fallbackType];
+  return /*#__PURE__*/React.createElement(AntdImage, _extends({}, restProps, {
+    fallback: finalFallback
+  }));
+};
+export default Image;

package/es/components/page-header/index.less

@@ -2,17 +2,17 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   .pisell-lowcode-page-header {
     display: flex;
-    align-items: center;    
+    align-items: start;
     justify-content: space-between;
     width: 100%;
 
     .pisell-lowcode-page-header-left {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 0px !important;
     }
 
     .pisell-lowcode-page-header-title {
@@ -21,7 +21,7 @@
       font-weight: var(--Typography-Font-Weight-fontWeightStrong, 700);
       line-height: var(
         --Typography-Line-Height-lineHeightHeading4,
-        28px
+        40px
       );
     }
 

package/es/components/pisellAppCard/PisellAppCard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PisellAppCardProps } from './types';
+import './PisellAppCard.less';
+declare const PisellAppCard: React.FC<PisellAppCardProps>;
+export default PisellAppCard;

package/es/components/pisellAppCard/PisellAppCard.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Dropdown, Button } from 'antd';
+import classNames from 'classnames';
+import PisellTags from "../pisellTags";
+import PisellCard from "../pisellCard";
+import PisellAvatar from "../pisellAvatar";
+import "./PisellAppCard.less";
+import Icon from "../icon";
+var PisellAppCard = function PisellAppCard(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    avatar = _ref.avatar,
+    tags = _ref.tags,
+    title = _ref.title,
+    description = _ref.description,
+    bottomButtons = _ref.bottomButtons,
+    moreActions = _ref.moreActions,
+    icon = _ref.icon;
+  return /*#__PURE__*/React.createElement(PisellCard, {
+    className: classNames('pisell-lowcode-app-card', className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-app-card-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-app-card-header-left"
+  }, (avatar || icon) && /*#__PURE__*/React.createElement(PisellAvatar, {
+    icon: icon && /*#__PURE__*/React.createElement(Icon, {
+      type: icon
+    }),
+    src: avatar || undefined,
+    alt: title,
+    size: "xl",
+    shape: "square",
+    style: {
+      border: 'none'
+    },
+    borderRadius: 10
+  })), /*#__PURE__*/React.createElement("div", null, moreActions && moreActions.length > 0 && /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: moreActions.map(function (action, index) {
+        return {
+          key: index,
+          label: action.label,
+          onClick: action.onClick
+        };
+      })
+    },
+    placement: "bottomRight",
+    trigger: ['click']
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      type: "pisell2-dots-vertical"
+    }),
+    size: "large"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-app-card-content"
+  }, tags && tags.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-app-card-content-tags"
+  }, tags.map(function (tag, index) {
+    return /*#__PURE__*/React.createElement(PisellTags, {
+      key: index,
+      type: tag.type,
+      color: tag.color
+    }, tag.label);
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-app-card-content-title"
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-app-card-content-description"
+  }, description))), bottomButtons && bottomButtons.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-app-card-footer"
+  }, bottomButtons.map(function (button, index) {
+    return !button.hidden && /*#__PURE__*/React.createElement(Button, {
+      type: button.type,
+      onClick: button.onClick,
+      key: index,
+      size: "large"
+    }, button.label);
+  })));
+};
+export default PisellAppCard;

package/es/components/pisellAppCard/PisellAppCard.less

@@ -0,0 +1,55 @@
+.pisell-lowcode-app-card {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  cursor: auto;
+
+  .pisell-lowcode-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    &::before {
+        display: none;
+    }
+    &::after {
+        display: none;
+    }
+  }
+
+  .pisell-lowcode-app-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .pisell-lowcode-app-card-header-left {
+      .anticon {
+        font-size: 32px !important;
+      }
+    }
+  }
+
+  .pisell-lowcode-app-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .pisell-lowcode-app-card-content-title {
+      color: var(--Gray-900, #101828);
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px; /* 155.556% */
+    }
+    .pisell-lowcode-app-card-content-description {
+        color: var(--Gray-600, #475467);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+    }
+    .pisell-lowcode-app-card-content-tags {
+        display: flex;
+        gap: 8px;
+    }
+  }
+
+  .pisell-lowcode-app-card-footer {
+    display: flex;
+    gap: 12px;
+  }
+}

package/es/components/pisellAppCard/index.d.ts

@@ -0,0 +1,3 @@
+import PisellAppCard from './PisellAppCard';
+export default PisellAppCard;
+export type { PisellAppCardProps } from './types';

package/es/components/pisellAppCard/index.js

@@ -0,0 +1,2 @@
+import PisellAppCard from "./PisellAppCard";
+export default PisellAppCard;

package/es/components/pisellAppCard/types.d.ts

@@ -0,0 +1,34 @@
+import { CSSProperties } from 'react';
+export interface PisellAppCardProps {
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: CSSProperties;
+    /** 头像地址 */
+    avatar?: string;
+    /** icon */
+    icon?: string;
+    /** 标签列表 */
+    tags?: Array<{
+        label: string;
+        color?: 'success' | 'warning' | 'error' | 'gray';
+        type: 'pill_color' | 'pill_outline';
+    }>;
+    /** 标题 */
+    title: string;
+    /** 描述 */
+    description?: string;
+    /** 底部按钮列表 */
+    bottomButtons?: Array<{
+        label: string;
+        onClick?: () => void;
+        type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+        hidden: boolean;
+    }>;
+    /** 右侧更多操作列表 */
+    moreActions?: Array<{
+        label: string;
+        onClick?: () => void;
+        icon?: React.ReactNode;
+    }>;
+}

package/es/components/pisellAppCard/types.js

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

package/es/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { Props as TreeItemProps } from './TreeItem';
 interface Props extends TreeItemProps {
     id: UniqueIdentifier;
+    __designMode?: string;
 }
 export declare function SortableTreeItem({ id, depth, ...props }: Props): React.JSX.Element;
 export {};

package/es/components/pisellDraggable/components/TreeItem/TreeItem.d.ts

@@ -16,6 +16,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
     onRemove?(): void;
     wrapperRef?(node: HTMLLIElement): void;
     item: TreeItemType;
-    renderItem?(item: TreeItemType): React.ReactNode;
+    renderItem?(item: Props, ref: React.ForwardedRef<HTMLDivElement>): React.ReactNode;
+    __designMode?: string;
+    isBlocked?: boolean;
 }
 export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/es/components/pisellDraggable/components/TreeItem/TreeItem.js

@@ -1,5 +1,11 @@
-var _excluded = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "style", "wrapperRef", "item", "renderItem"];
+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); }
+var _excluded = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "style", "wrapperRef", "item", "renderItem", "isBlocked", "__designMode"];
 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 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
@@ -23,9 +29,11 @@ export var TreeItem = /*#__PURE__*/forwardRef(function (props, ref) {
     wrapperRef = props.wrapperRef,
     item = props.item,
     renderItem = props.renderItem,
+    isBlocked = props.isBlocked,
+    __designMode = props.__designMode,
     otherProps = _objectWithoutProperties(props, _excluded);
   if (renderItem) {
-    return renderItem(props);
+    return renderItem(props, ref);
   }
   return /*#__PURE__*/React.createElement("li", _extends({
     className: classNames('Wrapper', clone && 'clone', ghost && 'ghost', indicator && 'indicator', disableSelection && 'disableSelection', disableInteraction && 'disableInteraction'),
@@ -37,7 +45,7 @@ export var TreeItem = /*#__PURE__*/forwardRef(function (props, ref) {
     className: 'TreeItem',
     ref: ref,
     style: style
-  }, /*#__PURE__*/React.createElement(Handle, handleProps), onCollapse && /*#__PURE__*/React.createElement(Action, {
+  }, /*#__PURE__*/React.createElement(Handle, __designMode === 'design' ? {} : _objectSpread({}, handleProps)), onCollapse && /*#__PURE__*/React.createElement(Action, {
     onClick: onCollapse,
     className: classNames('Collapse', collapsed && 'collapsed')
   }, collapseIcon), /*#__PURE__*/React.createElement("span", {

package/es/components/pisellDraggable/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import type { TreeItem, TreeItems } from './types';
+import type { Props as TreeItemProps } from './components/TreeItem/TreeItem';
 interface Props {
     /** 是否支持折叠功能 */
     collapsible?: boolean;
@@ -16,12 +17,16 @@ interface Props {
     /** 是否支持删除节点功能 */
     removable?: boolean;
     /** 自定义渲染树节点 */
-    renderItem?: (item: TreeItem) => React.ReactNode;
+    renderItem?: (item: TreeItemProps, ref: React.RefObject<HTMLDivElement>) => React.ReactNode;
     /** 树形数据变化回调 */
     onChange?: (items: TreeItems) => void;
     /** 删除节点前 */
     onRemoveBefore?: (item: TreeItem) => Promise<boolean>;
+    /** 设计模式 */
+    __designMode?: string;
+    /** 最大层级 */
+    maxLevel?: number;
 }
-export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, }: Props): React.JSX.Element;
-declare const Demo: () => React.JSX.Element;
+export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, __designMode, maxLevel, }: Props): React.JSX.Element;
+declare const Demo: (props: Props) => React.JSX.Element;
 export default Demo;

package/es/components/pisellDraggable/index.js

@@ -50,7 +50,8 @@ var initialItems = [{
     children: []
   }, {
     id: 'Winter',
-    children: []
+    children: [],
+    disabledDrop: true
   }]
 }, {
   id: 'About Us',
@@ -120,7 +121,10 @@ export function SortableTree(_ref3) {
     removable = _ref3$removable === void 0 ? true : _ref3$removable,
     renderItem = _ref3.renderItem,
     onChange = _ref3.onChange,
-    onRemoveBefore = _ref3.onRemoveBefore;
+    onRemoveBefore = _ref3.onRemoveBefore,
+    __designMode = _ref3.__designMode,
+    _ref3$maxLevel = _ref3.maxLevel,
+    maxLevel = _ref3$maxLevel === void 0 ? 3 : _ref3$maxLevel;
   // 状态管理
   /** 当前树形数据 */
   var _useState = useState([]),
@@ -146,6 +150,9 @@ export function SortableTree(_ref3) {
     console.log('初始化', value);
     setItems(value);
   }, [value]);
+  var flattenTreeData = useMemo(function () {
+    return flattenTree(items);
+  }, [items]);
 
   /**
    * 扁平化处理树形数据
@@ -154,16 +161,16 @@ export function SortableTree(_ref3) {
    * 3. 移除被折叠节点的子节点
    */
   var flattenedItems = useMemo(function () {
-    var flattenedTree = flattenTree(items);
-    var collapsedItems = flattenedTree.reduce(function (acc, _ref4) {
-      var children = _ref4.children,
+    var collapsedItems = flattenTreeData.reduce(function (acc, _ref4) {
+      var _ref4$children = _ref4.children,
+        children = _ref4$children === void 0 ? [] : _ref4$children,
         collapsed = _ref4.collapsed,
         id = _ref4.id;
       return collapsed && children.length ? [].concat(_toConsumableArray(acc), [id]) : acc;
     }, []);
-    return removeChildrenOf(flattenedTree, activeId != null ? [activeId].concat(_toConsumableArray(collapsedItems)) : collapsedItems);
-  }, [activeId, items]);
-
+    return removeChildrenOf(flattenTreeData, activeId != null ? [activeId].concat(_toConsumableArray(collapsedItems)) : collapsedItems);
+  }, [activeId, flattenTreeData]);
+  console.log('flattenedItems', flattenedItems);
   /**
    * 计算拖拽投影
    * 根据当前拖拽状态计算目标位置和深度
@@ -198,6 +205,39 @@ export function SortableTree(_ref3) {
   useEffect(function () {
     document.body.id = 'body';
   }, []);
+
+  /**
+   * 检查子树是否超过最大深度限制
+   * @param items 当前项目列表
+   * @param itemId 要检查的项目ID
+   * @param baseDepth 基础深度
+   * @returns 是否超过限制
+   */
+  function checkSubtreeDepth(items, itemId, baseDepth) {
+    var item = items.find(function (i) {
+      return i.id === itemId;
+    });
+    if (!item) return false;
+
+    // 首先检查目标位置的深度
+    if (baseDepth >= maxLevel) return true;
+
+    // 获取所有子节点
+    var children = items.filter(function (i) {
+      return i.parentId === itemId;
+    });
+
+    // 如果当前节点已经是最大深度，且尝试添加子节点，则返回 true
+    if (baseDepth >= maxLevel - 1 && children.length > 0) return true;
+
+    // 递归检查所有子节点
+    return children.some(function (child) {
+      // 计算子节点在新位置的深度
+      var childNewDepth = baseDepth + 1;
+      // 如果子节点深度超过限制，或者子节点的子树超过限制，则返回 true
+      return childNewDepth >= maxLevel || checkSubtreeDepth(items, child.id, childNewDepth);
+    });
+  }
   return /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     collisionDetection: closestCenter,
@@ -222,14 +262,15 @@ export function SortableTree(_ref3) {
       depth: id === activeId && projected ? projected.depth : depth,
       indentationWidth: indentationWidth,
       indicator: indicator,
-      collapsed: Boolean(collapsed && children.length),
-      onCollapse: collapsible && children.length ? function () {
+      collapsed: Boolean(collapsed && (children === null || children === void 0 ? void 0 : children.length)),
+      onCollapse: collapsible && children !== null && children !== void 0 && children.length ? function () {
         return handleCollapse(id);
       } : undefined,
       onRemove: removable ? function () {
         return handleRemove(item);
       } : undefined,
-      renderItem: renderItem
+      renderItem: renderItem,
+      __designMode: __designMode
     });
   }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
     dropAnimation: dropAnimationConfig,
@@ -264,9 +305,32 @@ export function SortableTree(_ref3) {
     setOffsetLeft(delta.x);
   }
   function handleDragOver(_ref9) {
-    var _over$id;
     var over = _ref9.over;
-    setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
+    if (!projected || !over) {
+      var _over$id;
+      setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
+      return;
+    }
+
+    // 检查目标父节点是否禁止拖入
+    var targetParent = projected.parentId ? flattenedItems.find(function (item) {
+      return item.id === projected.parentId;
+    }) : null;
+    if (targetParent !== null && targetParent !== void 0 && targetParent.disabledDrop) {
+      return;
+    }
+
+    // 检查目标深度是否超过最大层级限制
+    if (projected.depth >= maxLevel) {
+      return;
+    }
+
+    // 检查整个子树的深度是否会超过限制
+    var willExceedLimit = checkSubtreeDepth(flattenTreeData, activeId, projected.depth);
+    if (willExceedLimit) {
+      return;
+    }
+    setOverId(over.id);
   }
 
   /**
@@ -282,6 +346,25 @@ export function SortableTree(_ref3) {
     if (projected && over) {
       var depth = projected.depth,
         parentId = projected.parentId;
+
+      // 检查目标父节点是否禁止拖入
+      var targetParent = parentId ? flattenedItems.find(function (item) {
+        return item.id === parentId;
+      }) : null;
+      if (targetParent !== null && targetParent !== void 0 && targetParent.disabledDrop) {
+        return;
+      }
+
+      // 检查是否超过最大层级限制
+      if (depth >= maxLevel) {
+        return;
+      }
+
+      // 检查整个子树的深度是否会超过限制
+      var willExceedLimit = checkSubtreeDepth(flattenTreeData, active.id, depth);
+      if (willExceedLimit) {
+        return;
+      }
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
       var overIndex = clonedItems.findIndex(function (_ref11) {
         var id = _ref11.id;
@@ -374,7 +457,7 @@ var adjustTranslate = function adjustTranslate(_ref13) {
     y: transform.y - 25
   });
 };
-var Demo = function Demo() {
-  return /*#__PURE__*/React.createElement(SortableTree, null);
+var Demo = function Demo(props) {
+  return /*#__PURE__*/React.createElement(SortableTree, props);
 };
 export default Demo;

package/es/components/pisellDraggable/types.d.ts

@@ -4,6 +4,8 @@ export interface TreeItem {
     id: UniqueIdentifier;
     children: TreeItem[];
     collapsed?: boolean;
+    disabledDrop?: boolean;
+    [key: string]: any;
 }
 export declare type TreeItems = TreeItem[];
 export interface FlattenedItem extends TreeItem {