@pisell/materials 2.2.47 → 2.2.49

package/es/components/pisellAnchor/index.js

@@ -1,12 +1,13 @@
+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 _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { useState, forwardRef, useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import { useDebounceFn } from 'ahooks';
+import { useDebounceFn, useThrottleFn } from 'ahooks';
 import ChevronLeft from '@pisell/icon/es/ChevronLeft';
 import ChevronRight from '@pisell/icon/es/ChevronRight';
 import "./index.less";
@@ -16,22 +17,52 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
     tab = props.tab,
     className = props.className,
     style = props.style,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    onTabClick = props.onTabClick,
+    containerRef = props.containerRef,
+    _props$platform = props.platform,
+    platform = _props$platform === void 0 ? 'pc' : _props$platform;
   var contentRef = useRef(null);
-  var _useState = useState(true),
+  var scrollTimeoutRef = useRef(null);
+  var isClickScrolling = useRef(false);
+  var clickedTabRef = useRef(null);
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    isShowButton = _useState2[0],
-    setIsShowButton = _useState2[1];
-  var _useState3 = useState(0),
+    leftWidth = _useState2[0],
+    setLeftWidth = _useState2[1];
+  var _useState3 = useState(40),
     _useState4 = _slicedToArray(_useState3, 2),
-    leftWidth = _useState4[0],
-    setLeftWidth = _useState4[1];
-  var _useState5 = useState(40),
+    rightWidth = _useState4[0],
+    setRightWidth = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    rightWidth = _useState6[0],
-    setRightWidth = _useState6[1];
+    showButtons = _useState6[0],
+    setShowButtons = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hoveredTab = _useState8[0],
+    setHoveredTab = _useState8[1];
 
-  // 处理滚动
+  // 检查是否需要显示按钮
+  useEffect(function () {
+    if (contentRef.current) {
+      var _contentRef$current = contentRef.current,
+        scrollWidth = _contentRef$current.scrollWidth,
+        clientWidth = _contentRef$current.clientWidth;
+      setShowButtons(scrollWidth > clientWidth);
+    }
+  }, [options]);
+
+  // 清理定时器
+  useEffect(function () {
+    return function () {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // 处理水平滚动
   var _useDebounceFn = useDebounceFn(function (e) {
       var _e$target = e.target,
         scrollLeft = _e$target.scrollLeft,
@@ -42,49 +73,188 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
     }, {
       wait: 200
     }),
-    onScroll = _useDebounceFn.run;
+    onScrollDebounced = _useDebounceFn.run;
 
-  // 滚动到指定选项
-  var setTabScroll = function setTabScroll(offsetLeft) {
-    if (contentRef.current) {
-      contentRef.current.scrollTo({
-        left: offsetLeft,
-        behavior: 'smooth'
-      });
-    }
-  };
+  // 处理垂直滚动
+  var _useThrottleFn = useThrottleFn(function () {
+      // 如果是点击触发的滚动，不处理滚动检测
+      if (isClickScrolling.current) return;
+      if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+      var container = containerRef.current;
+      var headerHeight = 65;
+      var containerRect = container.getBoundingClientRect();
+      var scrollTop = container.scrollTop;
+      var containerHeight = containerRect.height;
+      var scrollHeight = container.scrollHeight;
+
+      // 检查是否滚动到底部
+      var isAtBottom = scrollTop + containerHeight >= scrollHeight - 50;
+      if (isAtBottom) {
+        var lastOption = options[options.length - 1];
+        // 不要切回到之前点击的 tab
+        if (tab !== lastOption.id && lastOption.id !== clickedTabRef.current) {
+          onChange === null || onChange === void 0 || onChange(lastOption.id);
+        }
+        return;
+      }
+
+      // 找到当前可见的元素
+      var closestOption = null;
+      var minDistance = Infinity;
+      var _iterator = _createForOfIteratorHelper(options),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var option = _step.value;
+          // 尝试通过ID和data属性查找元素
+          var elementById = document.getElementById(option.id);
+          var elementByDataAttr = document.querySelector("[data-section=\"".concat(option.id, "\"]"));
+          var element = elementById || elementByDataAttr;
+          if (element) {
+            // 使用类型断言解决TS错误
+            var htmlElement = element;
 
-  // 暴露滚动方法
-  useImperativeHandle(ref, function () {
-    return {
-      scroll: function scroll(tab) {
-        if (tab) {
-          var dom = document.querySelector("#tab-".concat(tab));
-          if (dom) {
-            setTabScroll(dom.offsetLeft);
+            // 使用offsetTop计算更准确
+            var elementOffsetTop = htmlElement.offsetTop;
+            var elementHeight = htmlElement.offsetHeight;
+
+            // 计算可见度
+            var elementTopRelativeToViewport = elementOffsetTop - scrollTop;
+            var isTopVisible = elementTopRelativeToViewport >= headerHeight && elementTopRelativeToViewport <= containerHeight;
+            var isBottomVisible = elementTopRelativeToViewport + elementHeight >= headerHeight && elementTopRelativeToViewport + elementHeight <= containerHeight;
+            var isElementPartiallyVisible = isTopVisible || isBottomVisible || elementTopRelativeToViewport < headerHeight && elementTopRelativeToViewport + elementHeight > containerHeight;
+            var distance = Math.abs(elementTopRelativeToViewport - headerHeight);
+            if (distance < minDistance) {
+              minDistance = distance;
+              closestOption = option;
+            }
           }
         }
+
+        // 不要切回到之前点击的 tab
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (closestOption && tab !== closestOption.id && closestOption.id !== clickedTabRef.current && minDistance < 50) {
+        onChange === null || onChange === void 0 || onChange(closestOption.id);
+      }
+    }, {
+      wait: 150
+    }),
+    handleScrollThrottled = _useThrottleFn.run;
+
+  // 监听容器滚动
+  useEffect(function () {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+    var handleScroll = function handleScroll() {
+      if (!isClickScrolling.current) {
+        handleScrollThrottled();
       }
     };
-  });
+    var container = containerRef.current;
+    container.addEventListener('scroll', handleScroll);
+    return function () {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScrollThrottled]);
+
+  // 点击选项时更新选中项并滚动
+  var handleOptionClick = function handleOptionClick(item) {
+    // 添加调试日志
+    console.log('PisellAnchor: Tab clicked', item.id);
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    // 更新选中项
+    onChange === null || onChange === void 0 || onChange(item.id);
+
+    // 触发点击事件回调
+    onTabClick === null || onTabClick === void 0 || onTabClick();
+
+    // 统一PC和H5的交互逻辑，无论什么平台都执行滚动
+    // 尝试多种方式查找目标元素
+    var elementById = document.getElementById(String(item.id));
+    var elementByDataAttr = document.querySelector("[data-section=\"".concat(String(item.id), "\"]"));
+    var element = elementById || elementByDataAttr;
+
+    // 添加调试日志
+    console.log('PisellAnchor: Target element found?', !!element);
+    console.log('PisellAnchor: Container ref exists?', !!(containerRef !== null && containerRef !== void 0 && containerRef.current));
+    if (element && containerRef !== null && containerRef !== void 0 && containerRef.current) {
+      isClickScrolling.current = true;
+      clickedTabRef.current = item.id;
+
+      // 使用requestAnimationFrame确保DOM更新后再滚动
+      requestAnimationFrame(function () {
+        if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+
+        // 使用类型断言解决TS错误
+        var htmlElement = element;
+
+        // 更准确的滚动位置计算
+        var headerHeight = 65; // 使用一致的头部高度
+        var elementOffsetTop = htmlElement.offsetTop; // 使用offsetTop而不是getBoundingClientRect()
+
+        // 添加调试日志
+        console.log('PisellAnchor: Scrolling using offsetTop', {
+          elementOffsetTop: elementOffsetTop,
+          targetScrollTop: elementOffsetTop - headerHeight
+        });
+
+        // 执行滚动 - 使用更直接的offsetTop定位
+        containerRef.current.scrollTo({
+          top: elementOffsetTop - headerHeight,
+          behavior: 'smooth'
+        });
+
+        // 添加备份滚动机制
+        setTimeout(function () {
+          if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+
+          // 强制再次滚动以确保滚动效果
+          containerRef.current.scrollTo({
+            top: elementOffsetTop - headerHeight,
+            behavior: 'auto' // 使用即时滚动确保位置准确
+          });
+        }, 300);
+      });
+
+      // 延迟重置状态
+      scrollTimeoutRef.current = setTimeout(function () {
+        isClickScrolling.current = false;
+        clickedTabRef.current = null;
+      }, 1000);
+    } else {
+      console.warn('PisellAnchor: Cannot scroll, element or container not found', {
+        elementId: item.id,
+        elementByIdExists: !!elementById,
+        elementByDataAttrExists: !!elementByDataAttr,
+        containerExists: !!(containerRef !== null && containerRef !== void 0 && containerRef.current)
+      });
+    }
+  };
 
   // 左右按钮点击处理
   var onPageChange = function onPageChange(type) {
     if (contentRef.current) {
-      var _contentRef$current = contentRef.current,
-        scrollLeft = _contentRef$current.scrollLeft,
-        clientWidth = _contentRef$current.clientWidth;
+      var _contentRef$current2 = contentRef.current,
+        scrollLeft = _contentRef$current2.scrollLeft,
+        clientWidth = _contentRef$current2.clientWidth;
+      var newScrollLeft = scrollLeft + (type === 'left' ? -clientWidth : clientWidth);
       contentRef.current.scrollTo({
-        left: scrollLeft + (type === 'left' ? -clientWidth : clientWidth),
+        left: newScrollLeft,
         behavior: 'smooth'
       });
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('pisell-tabs', className),
+    className: classNames('pisell-anchor-tabs', className),
     style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pisell-tabs-btn-left",
+  }, showButtons && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-anchor-tabs-btn-left",
     style: {
       width: leftWidth
     },
@@ -92,27 +262,34 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
       return onPageChange('left');
     }
   }, /*#__PURE__*/React.createElement(ChevronLeft, {
-    className: "pisell-tabs-btn-icon"
+    className: "pisell-anchor-tabs-btn-icon"
   })), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: "pisell-tabs-content",
+    className: "pisell-anchor-tabs-content",
     id: "tab-".concat(tab, "-content"),
-    onScroll: onScroll
+    onScroll: onScrollDebounced
   }, options.map(function (item) {
     return /*#__PURE__*/React.createElement("div", {
       key: item.id,
       id: "tab-".concat(item.id),
-      className: classNames('pisell-tabs-tab', {
-        'pisell-tabs-tab-active': tab === item.id
+      className: classNames('pisell-anchor-tabs-tab', {
+        'pisell-anchor-tabs-tab-active': tab === item.id
       }),
       onClick: function onClick() {
-        return onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
+        console.log('PisellAnchor: Tab div clicked', item.id);
+        handleOptionClick(item);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "pisell-anchor-tabs-tab-content",
+      onClick: function onClick(e) {
+        // 防止事件冒泡问题
+        e.stopPropagation();
+        console.log('PisellAnchor: Tab span clicked', item.id);
+        handleOptionClick(item);
       }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "pisell-tabs-tab-content"
     }, item.name));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "pisell-tabs-btn-right",
+  })), showButtons && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-anchor-tabs-btn-right",
     style: {
       width: rightWidth
     },
@@ -120,7 +297,7 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
       return onPageChange('right');
     }
   }, /*#__PURE__*/React.createElement(ChevronRight, {
-    className: "pisell-tabs-btn-icon"
+    className: "pisell-anchor-tabs-btn-icon"
   })));
 });
 export default PisellAnchor;

package/es/components/pisellAnchor/index.less

@@ -92,7 +92,7 @@
   }
 }
 
-.pisell-tabs {
+.pisell-anchor-tabs {
   display: flex;
   align-items: center;
   width: 100%;
@@ -103,8 +103,8 @@
   cursor: default;
   position: relative;
 
-  .pisell-tabs-btn-left,
-  .pisell-tabs-btn-right {
+  .pisell-anchor-tabs-btn-left,
+  .pisell-anchor-tabs-btn-right {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -119,7 +119,7 @@
     transition: width 300ms ease;
     user-select: none;
 
-    .pisell-tabs-btn-icon {
+    .pisell-anchor-tabs-btn-icon {
       width: 24px;
       height: 24px;
       background: #f1f1f1;
@@ -132,17 +132,17 @@
     }
   }
 
-  .pisell-tabs-btn-left {
+  .pisell-anchor-tabs-btn-left {
     left: 0;
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
   }
 
-  .pisell-tabs-btn-right {
+  .pisell-anchor-tabs-btn-right {
     right: 0;
     background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
   }
 
-  .pisell-tabs-content {
+  .pisell-anchor-tabs-content {
     flex: 1;
     display: flex;
     overflow-x: auto;
@@ -152,26 +152,46 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
     padding: 0;
+    gap: 16px;
 
     &::-webkit-scrollbar {
       display: none;
     }
 
-    .pisell-tabs-tab {
+    .pisell-anchor-tabs-tab {
       flex: 0 0 auto;
-      padding: 8px 16px;
+      padding: 0 16px;
       cursor: pointer;
       white-space: nowrap;
       transition: all 0.3s;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      border-radius: 100px;
 
-      &:hover {
-        color: #1677ff;
+      &:hover:not(.pisell-anchor-tabs-tab-active) {
+        color: var(--theme-color, #7f56d9);
       }
 
-      &.pisell-tabs-tab-active {
-        color: #1677ff;
+      &.pisell-anchor-tabs-tab-active {
+        color: #fff;
         font-weight: 600;
+        background-color: var(--theme-color, #7f56d9);
+      }
+
+      .pisell-anchor-tabs-tab-content {
+        line-height: 24px;
       }
     }
   }
 }
+
+.pisell-anchor {
+  border-bottom: 1px solid #EAECF0;
+
+  &.pisell-anchor-no-border {
+    border-bottom: none;
+  }
+}

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 {};