@pisell/materials 6.0.14 → 6.0.16

package/es/components/iconSelect/index.js

@@ -0,0 +1,217 @@
+var _excluded = ["type", "icons"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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, { useState, useEffect } from 'react';
+import { Button, Input, Popover, Radio, Space } from 'antd';
+import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
+import { useControllableValue } from 'ahooks';
+import { isUndefined } from '@pisell/utils';
+import { getText } from "../../locales";
+import { getIconList } from "./utils";
+import "./index.less";
+var IconGroupNameMap = {
+  outlined: getText('pisell-icon-select-outlined'),
+  filled: getText('pisell-icon-select-filled'),
+  'two-tone': getText('pisell-icon-select-two-tone'),
+  iconfont: getText('pisell-icon-select-iconfont')
+};
+var Icon = function Icon(props) {
+  var type = props.type,
+    _props$icons = props.icons,
+    icons = _props$icons === void 0 ? {} : _props$icons,
+    rest = _objectWithoutProperties(props, _excluded);
+  var Comp = icons[type];
+  if (!Comp) return null;
+  return /*#__PURE__*/React.createElement(Comp, rest);
+};
+var IconContent = function IconContent(_ref) {
+  var selectedGroup = _ref.selectedGroup,
+    groups = _ref.groups,
+    setSelectedGroup = _ref.setSelectedGroup,
+    search = _ref.search,
+    setSearch = _ref.setSearch,
+    list = _ref.list,
+    handleChange = _ref.handleChange,
+    icons = _ref.icons;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-icon-select-popup"
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    className: "pisell-lowcode-icon-select-radio-group",
+    size: "middle",
+    value: selectedGroup,
+    onChange: function onChange(e) {
+      return setSelectedGroup(e.target.value);
+    }
+  }, groups.map(function (item) {
+    return /*#__PURE__*/React.createElement(Radio.Button, {
+      key: item.group,
+      value: item.group
+    }, IconGroupNameMap[item.group]);
+  })), /*#__PURE__*/React.createElement(Input, {
+    value: search,
+    size: "middle",
+    placeholder: getText('pisell-icon-select-search'),
+    allowClear: true,
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    onChange: function onChange(e) {
+      return setSearch(e.target.value);
+    },
+    style: {
+      width: '100%'
+    },
+    className: "pisell-lowcode-icon-select-search"
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: "pisell-lowcode-icon-select-content"
+  }, list.map(function (item) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "pisell-lowcode-icon-select-item",
+      key: item.name,
+      onClick: function onClick() {
+        return handleChange(item.name);
+      },
+      title: item.name
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: item.name,
+      icons: icons
+    }));
+  })));
+};
+var IconSelect = function IconSelect(props) {
+  var disabled = props.disabled,
+    defaultValue = props.defaultValue;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    search = _useState4[0],
+    setSearch = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    icons = _useState6[0],
+    setIcons = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    groups = _useState8[0],
+    setGroups = _useState8[1];
+  var _useState9 = useState('outlined'),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedGroup = _useState10[0],
+    setSelectedGroup = _useState10[1];
+  var _useState11 = useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    firstLoad = _useState12[0],
+    setFirstLoad = _useState12[1];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    list = _useState14[0],
+    setList = _useState14[1];
+  var _useControllableValue = useControllableValue(props, {
+      defaultValue: defaultValue
+    }),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    value = _useControllableValue2[0],
+    onChange = _useControllableValue2[1];
+  if (firstLoad && defaultValue && isUndefined(value)) {
+    onChange(defaultValue);
+    setFirstLoad(false);
+  }
+  useEffect(function () {
+    var _groups$;
+    var iconList = getIconList();
+    var groups = [];
+    var icons = {};
+    iconList.forEach(function (item) {
+      var _ref2 = item,
+        group = _ref2.group,
+        name = _ref2.name,
+        icon = _ref2.icon;
+      if (groups.every(function (item) {
+        return item.group !== group;
+      })) {
+        groups.push({
+          group: group,
+          list: []
+        });
+      }
+      var target = groups.find(function (item) {
+        return item.group === group;
+      });
+      target.list.push(item);
+      icons[item.name] = item === null || item === void 0 ? void 0 : item.icon;
+    });
+    setIcons(icons);
+    setGroups(groups);
+    setSelectedGroup((_groups$ = groups[0]) === null || _groups$ === void 0 ? void 0 : _groups$.group);
+  }, []);
+  useEffect(function () {
+    var _currentGroup$list;
+    var currentGroup = groups.find(function (item) {
+      return item.group === selectedGroup;
+    });
+    setList(((_currentGroup$list = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.list) !== null && _currentGroup$list !== void 0 ? _currentGroup$list : []).filter(function (item) {
+      return search ? item.name.toLowerCase().indexOf(search.toLowerCase()) > -1 : true;
+    }));
+  }, [selectedGroup, search, groups]);
+  var handleChange = function handleChange(icon) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(icon);
+    hide();
+  };
+  var triggerNode = /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-icon-select-trigger"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: value,
+    icons: icons,
+    style: {
+      fontSize: 24
+    }
+  }));
+  var hide = function hide() {
+    setOpen(false);
+  };
+  var handleOpenChange = function handleOpenChange(newOpen) {
+    setOpen(newOpen);
+  };
+  return /*#__PURE__*/React.createElement(Space.Compact, {
+    block: true,
+    className: "pisell-lowcode-icon-select"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    content: /*#__PURE__*/React.createElement(IconContent, {
+      selectedGroup: selectedGroup,
+      groups: groups,
+      setSelectedGroup: setSelectedGroup,
+      search: search,
+      setSearch: setSearch,
+      list: list,
+      handleChange: handleChange,
+      icons: icons
+    }),
+    trigger: "click",
+    placement: "bottom",
+    open: open,
+    onOpenChange: handleOpenChange
+  }, value ? /*#__PURE__*/React.createElement(Button, {
+    size: "large",
+    disabled: disabled,
+    icon: triggerNode,
+    className: "pisell-lowcode-icon-select-button"
+  }) : /*#__PURE__*/React.createElement(Button, {
+    className: "pisell-lowcode-icon-select-button-text",
+    size: "large"
+  }, getText('pisell-icon-select-select'))), value && !disabled && /*#__PURE__*/React.createElement(Button, {
+    size: "large",
+    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
+    className: "pisell-lowcode-icon-select-button",
+    onClick: function onClick() {
+      return onChange === null || onChange === void 0 ? void 0 : onChange('');
+    }
+  }));
+};
+export default IconSelect;

package/es/components/iconSelect/index.less

@@ -0,0 +1,54 @@
+.pisell-lowcode-icon-select-trigger {
+  font-size: 20px;
+  .anticon {
+    font-size: 20px;
+  }
+}
+
+.pisell-lowcode-icon-select-button {
+  // width: 44px;
+  // height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pisell-lowcode-icon-select-button-text {
+  border-radius: 9px;
+}
+
+.pisell-lowcode-icon-select-popup {
+  width: 350px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  .pisell-lowcode-icon-select-radio-group {
+    width: 100%;
+    display: flex;
+    & > * {
+      flex: 1;
+      padding: 0;
+      text-align: center;
+    }
+  }
+  .pisell-lowcode-icon-select-content {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 280px;
+    .pisell-lowcode-icon-select-item {
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 24px;
+      cursor: pointer;
+      display: inline-block;
+      transition: background-color 0.2s;
+      text-align: center;
+      border-radius: 4px;
+      &:hover {
+        background-color: #f1f2f3;
+      }
+    }
+  }
+}

package/es/components/iconSelect/utils.d.ts

@@ -0,0 +1,14 @@
+export declare type IconGroup = 'outlined' | 'filled' | 'two-tone' | 'iconfont';
+export declare function get(obj: any, path: string, defaultValue?: any): any;
+export declare function getAntdIconList(): ({
+    name: any;
+    group: "filled" | "outlined" | "two-tone";
+    icon: any;
+} | null)[];
+interface IconItem {
+    name: string;
+    group: IconGroup;
+    icon: any;
+}
+export declare function getIconList(): IconItem[];
+export {};

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,7 +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>>;