@pisell/materials 6.3.27 → 6.3.29

package/lib/components/pisellMetricCard/types.d.ts

@@ -0,0 +1,201 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 趋势类型
+ */
+export declare type TrendType = 'up' | 'down' | 'neutral';
+/**
+ * 数值格式化配置
+ */
+export interface ValueFormatConfig {
+    /** 小数精度（小数位数），默认 0 */
+    precision?: number;
+    /** 是否使用千分位分隔符，默认 false */
+    useGrouping?: boolean;
+    /** 是否显示货币符号，默认 false */
+    showCurrencySymbol?: boolean;
+    /** 货币符号（如 $, ¥），默认 '' */
+    currencySymbol?: string;
+    /** 自定义格式化函数 */
+    formatter?: (value: number | null) => string;
+    /** 整数时隐藏小数部分，默认 true */
+    hideDecimalForWholeNumbers?: boolean;
+}
+/**
+ * 环比配置
+ */
+export interface ComparisonConfig {
+    /** 环比数值（支持正负值） */
+    value: number | string | null;
+    /** 环比前缀文本，默认 'v.s. pre' */
+    text?: string;
+    /** 是否显示趋势箭头，默认 true */
+    showTrendIcon?: boolean;
+    /** 正向趋势颜色，默认 '#52c41a' */
+    positiveColor?: string;
+    /** 负向趋势颜色，默认 '#ff4d4f' */
+    negativeColor?: string;
+    /** 环比字号，默认 14 */
+    size?: number | string;
+}
+/**
+ * 样式配置
+ */
+export interface MetricCardStyleConfig {
+    /** 卡片容器样式 */
+    card?: {
+        /** 是否显示边框，默认 true */
+        bordered?: boolean;
+        /** 圆角大小（px），默认 12 */
+        borderRadius?: number;
+        /** 内边距（px），默认 16 */
+        padding?: number;
+        /** 阴影效果，默认 true */
+        shadow?: boolean | string;
+        /** 背景色，默认 '#ffffff' */
+        background?: string;
+        /** 卡片宽度，默认 'auto' */
+        width?: string | number;
+    };
+    /** 标题样式 */
+    title?: {
+        /** 字号，默认 14 */
+        size?: number | string;
+        /** 字重，默认 400 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.45)' */
+        color?: string;
+    };
+    /** 数值样式 */
+    value?: {
+        /** 字号，默认 30 */
+        size?: number | string;
+        /** 字重，默认 600 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.85)' */
+        color?: string;
+    };
+}
+/**
+ * PisellMetricCard 组件 Props
+ *
+ * 采用扁平 + 对象组合的设计，降低复杂度和耦合
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 带格式化和环比
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120,
+ *     text: 'v.s. last month'
+ *   }}
+ * />
+ * ```
+ */
+export interface PisellMetricCardProps {
+    /** 标题文本 */
+    title: string | ReactNode;
+    /** 主数值 */
+    value: number | string | null;
+    /** 副标题文本（可选） */
+    subtitle?: string | ReactNode;
+    /** 标签内容（可选） */
+    tag?: ReactNode;
+    /** 提示信息内容（可选） */
+    tooltip?: string | ReactNode;
+    /**
+     * 数值格式化配置
+     * @example format={{ precision: 2, useGrouping: true, currencySymbol: '$' }}
+     */
+    format?: ValueFormatConfig;
+    /**
+     * 环比配置
+     * @example comparison={{ value: 120, text: 'v.s. pre' }}
+     */
+    comparison?: ComparisonConfig;
+    /**
+     * 样式配置
+     * @example
+     * styleConfig={{
+     *   card: { borderRadius: 8, padding: 24 },
+     *   title: { size: 16, weight: 600 },
+     *   value: { size: 36, color: '#1890ff' }
+     * }}
+     */
+    styleConfig?: MetricCardStyleConfig;
+    /** 是否显示副标题，默认 false */
+    showSubtitle?: boolean;
+    /** 是否显示标签，默认 false */
+    showTag?: boolean;
+    /** 是否显示提示信息，默认 false */
+    showTooltip?: boolean;
+    /** 是否显示加载状态，默认 false */
+    loading?: boolean;
+    /** 鼠标悬停是否有交互效果，默认 true */
+    hoverable?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 点击卡片回调 */
+    onClick?: () => void;
+}
+/**
+ * FormatOptions (别名，用于导出)
+ */
+export interface FormatOptions extends ValueFormatConfig {
+}
+/**
+ * MetricTitle 组件 Props
+ */
+export interface MetricTitleProps {
+    title: string | ReactNode;
+    subtitle?: string | ReactNode;
+    tooltip?: string | ReactNode;
+    titleSize?: number | string;
+    titleWeight?: number | string;
+    titleColor?: string;
+}
+/**
+ * MetricValue 组件 Props
+ */
+export interface MetricValueProps {
+    value: string | null;
+    valueSize?: number | string;
+    valueWeight?: number | string;
+    valueColor?: string;
+}
+/**
+ * MetricComparison 组件 Props
+ */
+export interface MetricComparisonProps {
+    comparison: number | string | null;
+    comparisonText?: string;
+    showTrendIcon?: boolean;
+    positiveColor?: string;
+    negativeColor?: string;
+    comparisonSize?: number | string;
+    precision?: number;
+    showCurrencySymbol?: boolean;
+    currencySymbol?: string;
+}
+/**
+ * TrendIcon 组件 Props
+ */
+export interface TrendIconProps {
+    trend: TrendType;
+    color?: string;
+}

package/lib/components/pisellMetricCard/utils/calculateTrend.d.ts

@@ -0,0 +1,14 @@
+import type { TrendType } from '../types';
+/**
+ * 计算趋势方向
+ *
+ * @param comparison 环比数值
+ * @returns 'up' | 'down' | 'neutral'
+ *
+ * @example
+ * calculateTrend(120) // 'up'
+ * calculateTrend(-230) // 'down'
+ * calculateTrend(0) // 'neutral'
+ * calculateTrend(null) // 'neutral'
+ */
+export declare function calculateTrend(comparison: number | string | null | undefined): TrendType;

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -1,53 +1,139 @@
 /**
  * PisellMultipleSelect 组件样式
- * 
- * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
- * 此文件仅包含 Token 无法实现的样式
+ * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
  */
 
 .pisell-multiple-select {
+  height: 48px !important;
   width: 100%;
 
-  // 包装器布局（Token 无法配置）
+  .pisell-lowcode-select-clear {
+    color: #667085;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    margin: -22px -8px;
+    padding: 10px 8px;
+
+    &:hover {
+      color: #344054;
+    }
+  }
+
+  // Select 触发器（Figma 设计规范，与 SingleSelect / Input 体系一致）
+  .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input) {
+    .pisell-lowcode-select-selector {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+      padding: 12px 16px !important;
+      min-height: 48px !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+    }
+
+    // 多选模式：内边距适配标签，高度保持 48px
+    &.pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
+      padding: 6px 16px !important;
+      min-height: 48px !important;
+    }
+
+    &.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #d6bbfb !important; // Primary/300
+      box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+    }
+
+    &:not(.pisell-lowcode-select-open):not(.pisell-lowcode-select-disabled)
+    .pisell-lowcode-select-selector:hover {
+      border-color: #b692f6 !important; // Primary/400
+    }
+
+    &.pisell-lowcode-select-disabled .pisell-lowcode-select-selector {
+      background-color: #f9fafb !important; // Gray/50
+      color: #98a2b3 !important; // Gray/400
+      border-color: #d0d5dd !important;
+      cursor: not-allowed !important;
+    }
+
+    .pisell-lowcode-select-selection-placeholder {
+      color: #667085 !important; // Gray/500
+    }
+
+    .pisell-lowcode-select-arrow {
+      color: #667085;
+    }
+
+
+    // 多选标签（选择后展示的 item）高度 36px
+    .pisell-lowcode-select-selection-item {
+      border-radius: 6px !important;
+      padding: 0 10px !important;
+      margin-inline-end: 4px !important;
+      height: 36px !important;
+      min-height: 36px !important;
+      line-height: 36px !important;
+
+      &-content {
+        line-height: 36px !important;
+      }
+
+      &-remove {
+        margin-left: 4px !important;
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
+
   &-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    position: relative;
+
+    // 下拉选项高度 48px（通过 getPopupContainer 挂到 wrapper 内，无需 :global）
+    .pisell-multiple-select-dropdown .pisell-lowcode-select-item {
+      min-height: 48px !important;
+      height: 48px !important;
+      line-height: 48px !important;
+      padding: 0 16px !important;
+      font-size: 16px !important;
+    }
   }
 
-  // 标签（Token 无法配置的自定义元素）
   &-label {
-    font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-weight: 600;
-    color: #344054;
+    color: #344054; // Gray/700
     line-height: 20px;
 
     &-required::after {
       content: ' *';
-      color: #D92D20;
+      color: #d92d20; // Error/600
       margin-left: 0;
     }
   }
 
-  // 辅助文本（Token 无法配置的自定义元素）
   &-helper-text {
     font-size: 14px;
     font-weight: 400;
-    color: #667085;
+    color: #667085; // Gray/500
     line-height: 20px;
   }
 
-  // 错误文本（Token 无法配置的自定义元素）
   &-error-text {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 400;
-    color: #D92D20;
-    line-height: 20px;
-    animation: fadeIn 0.3s ease-in-out;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-multiple-select-fadeIn 0.3s ease-in-out;
   }
 
-  // 下拉选项中的勾选图标（Figma 设计）
   &-option-content {
     display: flex;
     align-items: center;
@@ -56,99 +142,34 @@
   }
 
   &-option-check {
-    color: #7F56D9; // Primary/600
+    color: #7f56d9; // Primary/600
     font-size: 16px;
     margin-left: 8px;
   }
 
-  // 多选模式下的特殊样式（Token 部分支持，Less 补充细节）
-  :global {
-    // 选择框垂直内边距（多选时需要更小的内边距以容纳标签）
-    .pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
-      padding: 6px 16px !important;
-    }
-
-    // 标签圆角（Token 不支持 multipleItemBorderRadius）
-    .pisell-lowcode-select-selection-item {
-      border-radius: 6px !important;
-      padding: 6px 10px !important;
-      margin-inline-end: 4px !important;
-
-      // 确保标签内容垂直居中
-      &-content {
-        line-height: 24px !important;
-      }
-
-      // 删除图标样式微调
-      &-remove {
-        margin-left: 4px !important;
-
-        &:hover {
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    // hover 边框颜色（Token 不支持 colorBorderHover）
-    .pisell-lowcode-select-multiple:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.ant-select-open) {
-      .ant-select-selector:hover {
-        border-color: #D6BBFB !important;
-      }
-    }
-  }
-}
-
-// 下拉框内的搜索框样式（Figma 设计）
-:global {
-  .pisell-select-search-wrapper {
-    padding: 6px;
-    border-bottom: 1px solid #EAECF0;
-  }
-
-  .pisell-select-search-input {
-    padding: 9px 10px !important;
-    font-size: 14px;
-
-    .ant-input {
-      font-size: 14px !important;
-      color: #344054 !important;
-
-      &::placeholder {
-        color: #98A2B3 !important;
-        font-size: 12px !important;
-      }
-    }
-
-    &:hover,
-    &:focus-within {
-      background-color: transparent !important;
-    }
-  }
-}
-
-.pisell-multiple-select {
-  // 错误状态（Token 无法单独配置错误边框颜色）
+  // 错误状态（Figma 设计体系 Error 色）
   &-error {
-    :global(.ant-select-selector) {
-      border-color: #D92D20 !important;
+    .pisell-lowcode-select .pisell-lowcode-select-selector {
+      border-color: #fda29b !important; // Error/300
 
       &:hover {
-        border-color: #D92D20 !important;
+        border-color: #f97066 !important; // Error/400
       }
     }
 
-    :global(.ant-select-focused .ant-select-selector) {
-      border-color: #D92D20 !important;
-      box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    .pisell-lowcode-select.pisell-lowcode-select-focused .pisell-lowcode-select-selector,
+    .pisell-lowcode-select.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #f97066 !important; // Error/400
+      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
     }
   }
 
-  // 自定义聚合标签样式（用于 maxTagPlaceholder 返回的元素，不受 Token 控制）
+  // 聚合标签（maxTagPlaceholder）
   &-more-tag {
     display: inline-flex;
     align-items: center;
-    background-color: #EAECF0;
-    color: #344054;
+    background-color: #eaecf0;
+    color: #344054; // Gray/700
     border: none;
     border-radius: 6px;
     padding: 6px 10px;
@@ -159,35 +180,28 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: #D0D5DD;
+      background-color: #d0d5dd; // Gray/300
     }
   }
 
-  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  // 只读状态
   &-readonly {
     &-display {
       display: flex;
       flex-wrap: wrap;
       gap: 4px;
-      padding: 12px 16px;
-      background-color: #F9FAFB;
-      border: 1px solid #EAECF0;
-      border-radius: 8px;
-      min-height: 48px;
+      align-items: center;
+      min-height: 24px;
     }
 
     &-tag {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 6px 10px;
-      background-color: #EAECF0;
-      border: none;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      color: #344054;
+      margin: 0;
+      cursor: default;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      font-size: 14px;
+      line-height: 22px;
+      padding: 2px 10px;
 
       &-icon {
         display: flex;
@@ -196,17 +210,13 @@
     }
 
     &-more-tag {
-      display: inline-flex;
-      align-items: center;
-      padding: 6px 10px;
-      background-color: #EAECF0;
-      color: #344054;
-      border: none;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      cursor: pointer;
+      margin: 0;
+      cursor: default;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      font-size: 14px;
+      line-height: 22px;
+      padding: 2px 10px;
     }
 
     &-empty {
@@ -218,8 +228,33 @@
   }
 }
 
-// 动画
-@keyframes fadeIn {
+// 下拉内搜索框（在 dropdown 内）
+.pisell-select-search-wrapper {
+  padding: 6px;
+  border-bottom: 1px solid #eaecf0;
+}
+
+.pisell-select-search-input {
+  padding: 9px 10px !important;
+  font-size: 14px;
+
+  .pisell-lowcode-input {
+    font-size: 14px !important;
+    color: #344054 !important;
+
+    &::placeholder {
+      color: #98a2b3 !important;
+      font-size: 12px !important;
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    background-color: transparent !important;
+  }
+}
+
+@keyframes pisell-multiple-select-fadeIn {
   from {
     opacity: 0;
     transform: translateY(-4px);

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.stories.js

@@ -51,7 +51,7 @@ var import_PisellMultipleSelect = __toESM(require("./PisellMultipleSelect"));
 var import_react = require("react");
 var import_antd = require("antd");
 var meta = {
-  title: "Components/PisellMultipleSelect",
+  title: "表单/表单组件/PisellMultipleSelect",
   component: import_PisellMultipleSelect.default,
   tags: ["autodocs"],
   argTypes: {

package/lib/components/pisellMultipleSelect/components/EditView.js

@@ -88,6 +88,7 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
       (opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase())
     );
   }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
+  const wrapperRef = (0, import_react.useRef)(null);
   const menuItemSelectedIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, { style: { color: "#7F56D9", fontSize: 16 } });
   const dropdownRender = (0, import_react.useCallback)(
     (menu) => {
@@ -120,7 +121,7 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
     },
     [options, showTooltipOnOverflow]
   );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-multiple-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: wrapperRef, className: (0, import_classnames.default)("pisell-multiple-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
     "label",
     {
       className: (0, import_classnames.default)("pisell-multiple-select-label", {
@@ -145,6 +146,8 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
       maxTagCount,
       maxTagPlaceholder,
       size,
+      popupClassName: "pisell-multiple-select-dropdown",
+      getPopupContainer: () => wrapperRef.current ?? document.body,
       className: (0, import_classnames.default)("pisell-multiple-select", {
         "pisell-multiple-select-error": error
       })

package/lib/components/pisellMultipleSelect/components/ReadOnlyView.d.ts

@@ -1,6 +1,6 @@
 /**
  * PisellMultipleSelect - ReadOnlyView (只读态视图)
- * 只读状态下的渲染
+ * 只读状态下使用 Tag 展示选中值
  */
 import React from 'react';
 import type { ReadOnlyViewProps } from '../types';

package/lib/components/pisellMultipleSelect/components/ReadOnlyView.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
+var import_tagColor = require("../../../utils/tagColor");
 var ReadOnlyView = (props) => {
   const {
     value = [],
@@ -73,7 +74,34 @@ var ReadOnlyView = (props) => {
       },
       label
     ),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-multiple-select-readonly-display" }, selectedOptions.length > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, tagDisplayInfo.visibleTags.map((option) => /* @__PURE__ */ import_react.default.createElement("span", { key: option.value, className: "pisell-multiple-select-readonly-tag" }, option.icon && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-tag-icon" }, option.icon), option.label)), tagDisplayInfo.hiddenCount > 0 && /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tagDisplayInfo.hiddenTags.map((t) => t.label).join(", ") }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-more-tag" }, "+", tagDisplayInfo.hiddenCount))) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-empty" }, "-"))
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-multiple-select-readonly-display" }, selectedOptions.length > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, tagDisplayInfo.visibleTags.map((option, idx) => /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tag,
+      {
+        key: option.value,
+        className: "pisell-multiple-select-readonly-tag",
+        color: option.color ?? (0, import_tagColor.getDefaultTagColor)(option.value, idx)
+      },
+      option.icon && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-tag-icon" }, option.icon),
+      option.label
+    )), tagDisplayInfo.hiddenCount > 0 && /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tooltip,
+      {
+        title: tagDisplayInfo.hiddenTags.map((t) => t.label).join(", ")
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Tag,
+        {
+          className: "pisell-multiple-select-readonly-more-tag",
+          style: {
+            backgroundColor: "#F2F4F7",
+            borderColor: "#EAECF0",
+            color: "#667085"
+          }
+        },
+        "+",
+        tagDisplayInfo.hiddenCount
+      )
+    )) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-empty" }, "-"))
   );
 };
 ReadOnlyView.displayName = "PisellMultipleSelectReadOnlyView";

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

@@ -1,6 +1,7 @@
 /**
  * PisellMultipleSelect 组件导出
  */
-export { default as PisellMultipleSelect } from './PisellMultipleSelect';
+import PisellMultipleSelect from './PisellMultipleSelect';
+export { PisellMultipleSelect };
 export type { PisellMultipleSelectProps, MultipleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, TagRendererProps, } from './types';
 export type { SelectOption, FilterOptionFunc, SortDirection, MultipleSelectState, TagDisplayInfo, } from './types';