@pisell/materials 2.2.41 → 2.2.43

package/es/index.js

@@ -134,4 +134,14 @@ export { default as PisellAdjustPriceInputNumber } from "./components/pisellAdju
 export { default as PisellStatisticList } from "./components/pisellStatisticList";
 export { default as PisellFloatingPanel } from "./components/pisellFloatingPanel";
 export { default as ProductCard } from "./components/productCard";
-export { default as Collapse } from "./components/collapse";
+export { default as Collapse } from "./components/collapse";
+export { default as PisellAvatar } from "./components/pisellAvatar";
+export { default as PisellViewGrid } from "./components/pisellViewGrid";
+export { default as PisellCustomCheckboxGroup } from "./components/pisellCustomCheckboxGroup";
+export { default as PisellDropdown } from "./components/pisellDropdown";
+export { default as PisellSectionHeaders } from "./components/pisellSectionHeaders";
+export { default as PisellImageCarousels } from "./components/pisellImageCarousels";
+export { default as PisellHeaderProgressBar } from "./components/pisellHeaderProgressBar";
+export { default as PisellList01 } from "./components/pisellList01";
+export { default as PisellAnchor } from "./components/pisellAnchor";
+export { default as SectionFooters } from "./components/section-footers";

package/lib/components/TimeResourceSelector/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export interface TimeSlot {
+    value: string;
+    label: string;
+    time: string;
+    remainingCount: number;
+    disabled?: boolean;
+}
+export interface TimeResourceSelectorProps {
+    timeSlots?: TimeSlot[];
+    multiple?: boolean;
+    showUnavailable?: boolean;
+    defaultExpanded?: boolean;
+    defaultSelectFirst?: boolean;
+    onChange?: (values: string | string[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const TimeResourceSelector: React.FC<TimeResourceSelectorProps>;
+export default TimeResourceSelector;

package/lib/components/TimeResourceSelector/index.js

@@ -0,0 +1,109 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/TimeResourceSelector/index.tsx
+var TimeResourceSelector_exports = {};
+__export(TimeResourceSelector_exports, {
+  default: () => TimeResourceSelector_default
+});
+module.exports = __toCommonJS(TimeResourceSelector_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_PisellCustomCheckboxGroup = __toESM(require("../PisellCustomCheckboxGroup"));
+var import_index = require("./index.less");
+var TimeResourceSelector = ({
+  timeSlots = [],
+  multiple = false,
+  showUnavailable = true,
+  defaultExpanded = true,
+  defaultSelectFirst = true,
+  onChange,
+  className,
+  style
+}) => {
+  const [selectedValues, setSelectedValues] = (0, import_react.useState)([]);
+  const [error, setError] = (0, import_react.useState)("");
+  const filteredTimeSlots = timeSlots.filter(
+    (slot) => showUnavailable ? true : !slot.disabled
+  );
+  (0, import_react.useEffect)(() => {
+    if (defaultSelectFirst && filteredTimeSlots.length > 0 && selectedValues.length === 0) {
+      const firstAvailable = filteredTimeSlots.find((slot) => !slot.disabled);
+      if (firstAvailable) {
+        const value = firstAvailable.value;
+        setSelectedValues([value]);
+        onChange == null ? void 0 : onChange(multiple ? [value] : value);
+      }
+    }
+  }, [filteredTimeSlots, defaultSelectFirst, multiple, onChange]);
+  const renderTimeCard = (item) => {
+    const { time, remainingCount, disabled } = item;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellCard,
+      {
+        className: "time-resource-card",
+        bodyStyle: { padding: "12px" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "time-slot-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "time-text" }, time), /* @__PURE__ */ import_react.default.createElement("div", { className: "remaining-count" }, "剩余: ", remainingCount))
+    );
+  };
+  const handleChange = (0, import_react.useCallback)(
+    (value) => {
+      if (Array.isArray(value)) {
+        setSelectedValues(value);
+        setError(value.length === 0 ? "Please select a session time" : "");
+      } else {
+        setSelectedValues([value]);
+        setError("");
+      }
+      onChange == null ? void 0 : onChange(value);
+    },
+    [onChange]
+  );
+  const renderContent = () => {
+    if (filteredTimeSlots.length === 0) {
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { description: "No dates are available" });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, error && /* @__PURE__ */ import_react.default.createElement("div", { className: "time-resource-error" }, error), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCustomCheckboxGroup.default,
+      {
+        dataSource: filteredTimeSlots,
+        renderItem: renderTimeCard,
+        value: selectedValues,
+        onChange: handleChange,
+        isMultiple: multiple,
+        columns: 4,
+        horizontalGap: 16,
+        verticalGap: 16
+      }
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `time-resource-selector ${className || ""}`, style }, /* @__PURE__ */ import_react.default.createElement(import_antd.Collapse, { defaultActiveKey: defaultExpanded ? ["1"] : [] }, /* @__PURE__ */ import_react.default.createElement(import_antd.Collapse.Panel, { header: "选择时间段", key: "1" }, renderContent())));
+};
+var TimeResourceSelector_default = TimeResourceSelector;

package/lib/components/TimeResourceSelector/index.less

@@ -0,0 +1,59 @@
+.time-resource-selector {
+  .time-resource-card {
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .time-slot-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 80px;
+
+    .time-text {
+      font-size: 16px;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+
+    .remaining-count {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+
+  // 选中状态
+  .pisell-checkbox-item-selected {
+    .time-resource-card {
+      border-color: #1890ff;
+      background: rgba(24, 144, 255, 0.1);
+    }
+  }
+
+  // 禁用状态
+  .pisell-checkbox-item-disabled {
+    .time-resource-card {
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  // 错误提示
+  .time-resource-error {
+    color: #ff4d4f;
+    padding: 8px 0;
+    text-align: center;
+    background-color: #fff2f0;
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
+}

package/lib/components/pisellAnchor/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './index.less';
+export interface Option {
+    id: string | number;
+    name: React.ReactNode;
+}
+export interface PisellAnchorProps {
+    options?: Option[];
+    tab?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (key: string | number) => void;
+}
+declare const PisellAnchor: React.ForwardRefExoticComponent<PisellAnchorProps & React.RefAttributes<any>>;
+export default PisellAnchor;

package/lib/components/pisellAnchor/index.js

@@ -0,0 +1,120 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellAnchor/index.tsx
+var pisellAnchor_exports = {};
+__export(pisellAnchor_exports, {
+  default: () => pisellAnchor_default
+});
+module.exports = __toCommonJS(pisellAnchor_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_ahooks = require("ahooks");
+var import_ChevronLeft = __toESM(require("@pisell/icon/es/ChevronLeft"));
+var import_ChevronRight = __toESM(require("@pisell/icon/es/ChevronRight"));
+var import_index = require("./index.less");
+var PisellAnchor = (0, import_react.forwardRef)((props, ref) => {
+  const { options = [], tab, className, style, onChange } = props;
+  const contentRef = (0, import_react.useRef)(null);
+  const [isShowButton, setIsShowButton] = (0, import_react.useState)(true);
+  const [leftWidth, setLeftWidth] = (0, import_react.useState)(0);
+  const [rightWidth, setRightWidth] = (0, import_react.useState)(40);
+  const { run: onScroll } = (0, import_ahooks.useDebounceFn)(
+    (e) => {
+      const { scrollLeft, scrollWidth, clientWidth } = e.target;
+      setLeftWidth(scrollLeft > 0 ? 40 : 0);
+      setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
+    },
+    { wait: 200 }
+  );
+  const setTabScroll = (offsetLeft) => {
+    if (contentRef.current) {
+      contentRef.current.scrollTo({
+        left: offsetLeft,
+        behavior: "smooth"
+      });
+    }
+  };
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    scroll: (tab2) => {
+      if (tab2) {
+        const dom = document.querySelector(`#tab-${tab2}`);
+        if (dom) {
+          setTabScroll(dom.offsetLeft);
+        }
+      }
+    }
+  }));
+  const onPageChange = (type) => {
+    if (contentRef.current) {
+      const { scrollLeft, clientWidth } = contentRef.current;
+      contentRef.current.scrollTo({
+        left: scrollLeft + (type === "left" ? -clientWidth : clientWidth),
+        behavior: "smooth"
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabs", className), style }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-tabs-btn-left",
+      style: { width: leftWidth },
+      onClick: () => onPageChange("left")
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ChevronLeft.default, { className: "pisell-tabs-btn-icon" })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: contentRef,
+      className: "pisell-tabs-content",
+      id: `tab-${tab}-content`,
+      onScroll
+    },
+    options.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.id,
+        id: `tab-${item.id}`,
+        className: (0, import_classnames.default)("pisell-tabs-tab", {
+          "pisell-tabs-tab-active": tab === item.id
+        }),
+        onClick: () => onChange == null ? void 0 : onChange(item.id)
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-tabs-tab-content" }, item.name)
+    ))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-tabs-btn-right",
+      style: { width: rightWidth },
+      onClick: () => onPageChange("right")
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ChevronRight.default, { className: "pisell-tabs-btn-icon" })
+  ));
+});
+var pisellAnchor_default = PisellAnchor;

package/lib/components/pisellAnchor/index.less

@@ -0,0 +1,177 @@
+.pisell-anchor-containers {
+  // display: flex;
+  // align-items: center;
+  // background-color: #fff;
+  // height: 40px;
+  .pisell-lowcode-anchor-wrapper {
+    &::before {
+      content: '';
+      display: none;
+    }
+    .pisell-lowcode-anchor {
+      height: 40px;
+      border-bottom: none !important;
+      background-color: #fff;
+
+      .pisell-lowcode-anchor-ink {
+        display: none;
+      }
+
+      .pisell-lowcode-anchor-link {
+        height: 100%;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+
+        &-title {
+          color: var(--Gray-900, #101828);
+          font-family: Inter;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 40px;
+        }
+      }
+
+      .pisell-lowcode-anchor-link-active {
+        border-radius: 100px;
+        background: var(--theme-color, #7f56d9);
+        height: 40px;
+
+        .pisell-lowcode-anchor-link-title {
+          color: var(--White, #fff);
+          line-height: 40px;
+        }
+      }
+    }
+  }
+  .pisell-anchor-scroll {
+    height: 40px;
+    flex: 1;
+    overflow-x: auto;
+
+    // 隐藏滚动条 - Firefox
+    scrollbar-width: none;
+
+    // 隐藏滚动条 - IE and Edge
+    -ms-overflow-style: none;
+
+    // 隐藏滚动条 - Chrome, Safari, Opera
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .pisell-anchor-buttons {
+    display: flex;
+    gap: 8px;
+    margin-left: 16px;
+
+    .scroll-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      background: white;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover:not(.disabled) {
+        color: #1890ff;
+        border-color: #1890ff;
+      }
+
+      &.disabled {
+        color: #d9d9d9;
+        cursor: not-allowed;
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+
+.pisell-tabs {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0d1619;
+  cursor: default;
+  position: relative;
+
+  .pisell-tabs-btn-left,
+  .pisell-tabs-btn-right {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.8) 100%);
+    cursor: pointer;
+    transition: width 300ms ease;
+    user-select: none;
+
+    .pisell-tabs-btn-icon {
+      width: 24px;
+      height: 24px;
+      background: #f1f1f1;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #262626;
+      font-size: 20px;
+    }
+  }
+
+  .pisell-tabs-btn-left {
+    left: 0;
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-tabs-btn-right {
+    right: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-tabs-content {
+    flex: 1;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .pisell-tabs-tab {
+      flex: 0 0 auto;
+      padding: 8px 16px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #1677ff;
+      }
+
+      &.pisell-tabs-tab-active {
+        color: #1677ff;
+        font-weight: 600;
+      }
+    }
+  }
+}

package/lib/components/pisellAvatar/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { AvatarProps } from 'antd';
+import './index.less';
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface PisellAvatarProps extends Omit<AvatarProps, 'size' | 'shape'> {
+    shape?: 'circle' | 'square';
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    useTextAvatar?: boolean;
+    borderRadius?: number;
+    onError?: () => boolean;
+}
+declare const PisellAvatar: React.FC<PisellAvatarProps>;
+export default PisellAvatar;

package/lib/components/pisellAvatar/index.js

@@ -0,0 +1,108 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellAvatar/index.tsx
+var pisellAvatar_exports = {};
+__export(pisellAvatar_exports, {
+  default: () => pisellAvatar_default
+});
+module.exports = __toCommonJS(pisellAvatar_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_iconfont = __toESM(require("../iconfont"));
+var import_index = require("./index.less");
+var sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 56,
+  xxl: 64
+};
+var fontSizeMap = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  xxl: 24
+};
+var PisellAvatar = ({
+  shape = "circle",
+  size = "xs",
+  src,
+  alt,
+  icon,
+  children,
+  className,
+  style,
+  useTextAvatar,
+  borderRadius = 4,
+  onError,
+  ...restProps
+}) => {
+  const classes = (0, import_classnames.default)(
+    "pisell-avatar",
+    `pisell-avatar-${size}`,
+    `pisell-avatar-${shape}`,
+    {
+      "pisell-avatar-with-text": !src && !icon && children
+    },
+    className
+  );
+  const mergedStyle = {
+    ...style,
+    width: sizeMap[size],
+    height: sizeMap[size],
+    fontSize: fontSizeMap[size],
+    lineHeight: `${sizeMap[size]}px`,
+    borderRadius: shape === "square" ? `${borderRadius}px` : "50%"
+  };
+  const renderChildren = (0, import_react.useMemo)(() => {
+    if (useTextAvatar && children) {
+      return children;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-user-01", className: "pisell-avatar-icon" });
+  }, [useTextAvatar, children]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Avatar,
+    {
+      ...restProps,
+      className: classes,
+      shape,
+      style: mergedStyle,
+      src,
+      alt,
+      icon,
+      onError
+    },
+    renderChildren
+  );
+};
+var pisellAvatar_default = PisellAvatar;

package/lib/components/pisellAvatar/index.less

@@ -0,0 +1,26 @@
+@prefix: pisell-avatar;
+
+.@{prefix} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--Gray-100, #f2f4f7); // 默认背景色
+  border: none; // 移除默认边框
+
+  img {
+    object-fit: cover;
+  }
+
+  .anticon {
+    font-size: inherit !important;
+    color: var(--Gray-600, #475467) !important;
+  }
+
+  // 文本头像样式
+  &.pisell-avatar-with-text {
+    background: var(--Gray-100, #f2f4f7); // 文本头像的背景色
+    color: var(--Gray-600, #475467); // 文本颜色
+    font-weight: 600;
+    // border: 0.75px solid var(--Gray-900, #101828);
+  }
+}

package/lib/components/pisellCard/index.d.ts

@@ -2,6 +2,14 @@ import React from 'react';
 import { CardProps } from 'antd';
 import './index.less';
 export interface PisellCardProps extends CardProps {
+    bordered?: boolean;
+    selected?: boolean;
+    loading?: boolean;
+    padding?: number;
+    borderRadius?: number;
+    disabled?: boolean;
+    onClick?: () => void;
+    isClickable?: boolean;
 }
 /**
  * Pisell 卡片容器组件