@pisell/materials 1.0.671 → 1.0.673

package/lib/components/pisell-config-provider/hooks/usePisellConfig.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 获取当前pisell全局配置
+ */
+declare const usePisellConfig: () => import("../context").PisellContextType;
+export default usePisellConfig;

package/lib/components/pisell-config-provider/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PisellContextType } from './context';
+interface PisellConfigProviderType {
+    platform?: PisellContextType['platform'];
+    children: React.ReactNode;
+    /** 货币符号 */
+    symbol?: string;
+    /** 当前语言环境 */
+    locale?: string;
+}
+declare const PisellConfigProvider: React.FC<PisellConfigProviderType>;
+export default PisellConfigProvider;

package/lib/components/pisellAdjustPrice/PisellAdjustPriceInputNumber.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { InputNumberProps } from 'antd/es/input-number';
+export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps, 'onChange'> {
+    value?: number;
+    originValue: number;
+    defaultValue?: number;
+    onChange?: (val: number) => void;
+}
+declare const PisellAdjustPriceInputNumber: (props: PisellAdjustPriceInputNumberProps) => JSX.Element;
+export default PisellAdjustPriceInputNumber;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './index.less';
+export interface PisellAdjustPriceProps {
+    value?: number;
+    originValue: number;
+    defaultValue?: number;
+    onChange?: (val: number) => void;
+}
+declare const PisellAdjustPrice: (props: PisellAdjustPriceProps) => JSX.Element;
+export default PisellAdjustPrice;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AlertProps } from 'antd';
+import './index.less';
+export interface PisellAlertProps extends AlertProps {
+    /** 是否展示忽略按钮 */
+    showDismiss?: boolean;
+    /** 忽略按钮内容 */
+    dismiss?: React.ReactNode;
+    /** 是否展示行为按钮 */
+    showView?: boolean;
+    /** 行为按钮内容 */
+    view?: React.ReactNode;
+    /** 行为按钮点击事件 */
+    onViewClick?: (e: any) => void;
+}
+/**
+ * PisellAlert警告提示组件
+ * @param props
+ * @constructor
+ */
+declare const PisellAlert: (props: PisellAlertProps) => false | JSX.Element;
+export default PisellAlert;

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

@@ -0,0 +1,23 @@
+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;
+    onTabClick?: () => void;
+    containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * 平台类型，仅用于样式调整，不再影响锚点滚动功能
+     * 无论pc还是h5模式，点击锚点都会自动滚动到对应内容
+     * @default 'pc'
+     */
+    platform?: 'pc' | 'h5';
+}
+declare const PisellAnchor: React.ForwardRefExoticComponent<PisellAnchorProps & React.RefAttributes<any>>;
+export default PisellAnchor;

package/lib/components/pisellAnchor/index.js

@@ -0,0 +1,251 @@
+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,
+    onTabClick,
+    containerRef,
+    platform = "pc"
+  } = props;
+  const contentRef = (0, import_react.useRef)(null);
+  const scrollTimeoutRef = (0, import_react.useRef)(null);
+  const isClickScrolling = (0, import_react.useRef)(false);
+  const clickedTabRef = (0, import_react.useRef)(null);
+  const [leftWidth, setLeftWidth] = (0, import_react.useState)(0);
+  const [rightWidth, setRightWidth] = (0, import_react.useState)(40);
+  const [showButtons, setShowButtons] = (0, import_react.useState)(false);
+  const [hoveredTab, setHoveredTab] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (contentRef.current) {
+      const { scrollWidth, clientWidth } = contentRef.current;
+      setShowButtons(scrollWidth > clientWidth);
+    }
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+  const { run: onScrollDebounced } = (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 { run: handleScrollThrottled } = (0, import_ahooks.useThrottleFn)(
+    () => {
+      if (isClickScrolling.current) return;
+      if (!(containerRef == null ? void 0 : containerRef.current)) return;
+      const container = containerRef.current;
+      const headerHeight = 65;
+      const containerRect = container.getBoundingClientRect();
+      const scrollTop = container.scrollTop;
+      const containerHeight = containerRect.height;
+      const scrollHeight = container.scrollHeight;
+      const isAtBottom = scrollTop + containerHeight >= scrollHeight - 50;
+      if (isAtBottom) {
+        const lastOption = options[options.length - 1];
+        if (tab !== lastOption.id && lastOption.id !== clickedTabRef.current) {
+          onChange == null ? void 0 : onChange(lastOption.id);
+        }
+        return;
+      }
+      let closestOption = null;
+      let minDistance = Infinity;
+      for (const option of options) {
+        const elementById = document.getElementById(option.id);
+        const elementByDataAttr = document.querySelector(`[data-section="${option.id}"]`);
+        const element = elementById || elementByDataAttr;
+        if (element) {
+          const htmlElement = element;
+          const elementOffsetTop = htmlElement.offsetTop;
+          const elementHeight = htmlElement.offsetHeight;
+          const elementTopRelativeToViewport = elementOffsetTop - scrollTop;
+          const isTopVisible = elementTopRelativeToViewport >= headerHeight && elementTopRelativeToViewport <= containerHeight;
+          const isBottomVisible = elementTopRelativeToViewport + elementHeight >= headerHeight && elementTopRelativeToViewport + elementHeight <= containerHeight;
+          const isElementPartiallyVisible = isTopVisible || isBottomVisible || elementTopRelativeToViewport < headerHeight && elementTopRelativeToViewport + elementHeight > containerHeight;
+          const distance = Math.abs(elementTopRelativeToViewport - headerHeight);
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestOption = option;
+          }
+        }
+      }
+      if (closestOption && tab !== closestOption.id && closestOption.id !== clickedTabRef.current && minDistance < 50) {
+        onChange == null ? void 0 : onChange(closestOption.id);
+      }
+    },
+    { wait: 150 }
+  );
+  (0, import_react.useEffect)(() => {
+    if (!(containerRef == null ? void 0 : containerRef.current)) return;
+    const handleScroll = () => {
+      if (!isClickScrolling.current) {
+        handleScrollThrottled();
+      }
+    };
+    const container = containerRef.current;
+    container.addEventListener("scroll", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, [handleScrollThrottled]);
+  const handleOptionClick = (item) => {
+    console.log("PisellAnchor: Tab clicked", item.id);
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+    onChange == null ? void 0 : onChange(item.id);
+    onTabClick == null ? void 0 : onTabClick();
+    const elementById = document.getElementById(String(item.id));
+    const elementByDataAttr = document.querySelector(`[data-section="${String(item.id)}"]`);
+    const element = elementById || elementByDataAttr;
+    console.log("PisellAnchor: Target element found?", !!element);
+    console.log("PisellAnchor: Container ref exists?", !!(containerRef == null ? void 0 : containerRef.current));
+    if (element && (containerRef == null ? void 0 : containerRef.current)) {
+      isClickScrolling.current = true;
+      clickedTabRef.current = item.id;
+      requestAnimationFrame(() => {
+        if (!(containerRef == null ? void 0 : containerRef.current)) return;
+        const htmlElement = element;
+        const headerHeight = 65;
+        const elementOffsetTop = htmlElement.offsetTop;
+        console.log("PisellAnchor: Scrolling using offsetTop", {
+          elementOffsetTop,
+          targetScrollTop: elementOffsetTop - headerHeight
+        });
+        containerRef.current.scrollTo({
+          top: elementOffsetTop - headerHeight,
+          behavior: "smooth"
+        });
+        setTimeout(() => {
+          if (!(containerRef == null ? void 0 : containerRef.current)) return;
+          containerRef.current.scrollTo({
+            top: elementOffsetTop - headerHeight,
+            behavior: "auto"
+            // 使用即时滚动确保位置准确
+          });
+        }, 300);
+      });
+      scrollTimeoutRef.current = setTimeout(() => {
+        isClickScrolling.current = false;
+        clickedTabRef.current = null;
+      }, 1e3);
+    } else {
+      console.warn("PisellAnchor: Cannot scroll, element or container not found", {
+        elementId: item.id,
+        elementByIdExists: !!elementById,
+        elementByDataAttrExists: !!elementByDataAttr,
+        containerExists: !!(containerRef == null ? void 0 : containerRef.current)
+      });
+    }
+  };
+  const onPageChange = (type) => {
+    if (contentRef.current) {
+      const { scrollLeft, clientWidth } = contentRef.current;
+      const newScrollLeft = scrollLeft + (type === "left" ? -clientWidth : clientWidth);
+      contentRef.current.scrollTo({
+        left: newScrollLeft,
+        behavior: "smooth"
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-tabs", className), style }, showButtons && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-anchor-tabs-btn-left",
+      style: { width: leftWidth },
+      onClick: () => onPageChange("left")
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ChevronLeft.default, { className: "pisell-anchor-tabs-btn-icon" })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: contentRef,
+      className: "pisell-anchor-tabs-content",
+      id: `tab-${tab}-content`,
+      onScroll: onScrollDebounced
+    },
+    options.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.id,
+        id: `tab-${item.id}`,
+        className: (0, import_classnames.default)("pisell-anchor-tabs-tab", {
+          "pisell-anchor-tabs-tab-active": tab === item.id
+        }),
+        onClick: () => {
+          console.log("PisellAnchor: Tab div clicked", item.id);
+          handleOptionClick(item);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: "pisell-anchor-tabs-tab-content",
+          onClick: (e) => {
+            e.stopPropagation();
+            console.log("PisellAnchor: Tab span clicked", item.id);
+            handleOptionClick(item);
+          }
+        },
+        item.name
+      )
+    ))
+  ), showButtons && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-anchor-tabs-btn-right",
+      style: { width: rightWidth },
+      onClick: () => onPageChange("right")
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ChevronRight.default, { className: "pisell-anchor-tabs-btn-icon" })
+  ));
+});
+var pisellAnchor_default = PisellAnchor;

package/lib/components/pisellAnchor/index.less

@@ -0,0 +1,197 @@
+.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-anchor-tabs {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0d1619;
+  cursor: default;
+  position: relative;
+
+  .pisell-anchor-tabs-btn-left,
+  .pisell-anchor-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-anchor-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-anchor-tabs-btn-left {
+    left: 0;
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-anchor-tabs-btn-right {
+    right: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-anchor-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;
+    gap: 16px;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .pisell-anchor-tabs-tab {
+      flex: 0 0 auto;
+      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:not(.pisell-anchor-tabs-tab-active) {
+        color: var(--theme-color, #7f56d9);
+      }
+
+      &.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/lib/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/lib/components/pisellAppCard/index.d.ts

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

package/lib/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/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

@@ -80,7 +80,7 @@ var PisellAvatar = ({
     ...style,
     width: sizeMap[size],
     height: sizeMap[size],
-    fontSize: children || icon ? fontSizeMap[size] : void 0,
+    fontSize: fontSizeMap[size],
     lineHeight: `${sizeMap[size]}px`,
     borderRadius: shape === "square" ? `${borderRadius}px` : "50%"
   };
@@ -88,7 +88,7 @@ var PisellAvatar = ({
     if (useTextAvatar && children) {
       return children;
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-user-01" });
+    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,

package/lib/components/pisellAvatar/index.less

@@ -14,6 +14,7 @@
 
   .anticon {
     font-size: inherit !important;
+    color: var(--Gray-600, #475467) !important;
   }
 
   // 文本头像样式

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

@@ -0,0 +1,20 @@
+/// <reference types="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 卡片容器组件
+ * @param props
+ * @constructor
+ */
+declare const PisellCard: (props: PisellCardProps) => JSX.Element;
+export default PisellCard;