@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellLookup/utils/storage.js

@@ -0,0 +1,96 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellLookup/utils/storage.ts
+var storage_exports = {};
+__export(storage_exports, {
+  addHistoryItem: () => addHistoryItem,
+  clearHistory: () => clearHistory,
+  isLocalStorageAvailable: () => isLocalStorageAvailable,
+  loadHistory: () => loadHistory,
+  removeHistoryItem: () => removeHistoryItem,
+  saveHistory: () => saveHistory
+});
+module.exports = __toCommonJS(storage_exports);
+var loadHistory = (key) => {
+  try {
+    const data = localStorage.getItem(key);
+    if (!data) return [];
+    return JSON.parse(data);
+  } catch (error) {
+    console.error("Failed to load history from localStorage:", error);
+    return [];
+  }
+};
+var saveHistory = (key, history, maxCount) => {
+  try {
+    const limitedHistory = history.slice(0, maxCount);
+    localStorage.setItem(key, JSON.stringify(limitedHistory));
+  } catch (error) {
+    console.error("Failed to save history to localStorage:", error);
+  }
+};
+var clearHistory = (key) => {
+  try {
+    localStorage.removeItem(key);
+  } catch (error) {
+    console.error("Failed to clear history from localStorage:", error);
+  }
+};
+var addHistoryItem = (key, item, maxCount) => {
+  try {
+    const history = loadHistory(key);
+    const filteredHistory = history.filter((h) => h !== item);
+    const newHistory = [item, ...filteredHistory];
+    saveHistory(key, newHistory, maxCount);
+    return newHistory.slice(0, maxCount);
+  } catch (error) {
+    console.error("Failed to add history item:", error);
+    return [];
+  }
+};
+var removeHistoryItem = (key, item) => {
+  try {
+    const history = loadHistory(key);
+    const newHistory = history.filter((h) => h !== item);
+    localStorage.setItem(key, JSON.stringify(newHistory));
+    return newHistory;
+  } catch (error) {
+    console.error("Failed to remove history item:", error);
+    return [];
+  }
+};
+var isLocalStorageAvailable = () => {
+  try {
+    const testKey = "__pisell_lookup_test__";
+    localStorage.setItem(testKey, "test");
+    localStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addHistoryItem,
+  clearHistory,
+  isLocalStorageAvailable,
+  loadHistory,
+  removeHistoryItem,
+  saveHistory
+});

package/lib/components/pisellLookup/utils/trigger.d.ts

@@ -0,0 +1,42 @@
+import type { DisplayType, TriggerType } from '../types';
+/**
+ * 触发器相关工具函数
+ */
+/**
+ * 根据触发器类型获取默认的展示类型
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 默认的展示类型
+ */
+export declare const getDefaultDisplayType: (triggerType?: TriggerType, hasTrigger?: boolean) => DisplayType;
+/**
+ * 判断是否为输入框触发器
+ * @param triggerType 触发器类型
+ * @returns 是否为输入框触发器
+ */
+export declare const isInputTrigger: (triggerType?: TriggerType) => boolean;
+/**
+ * 判断是否为按钮类触发器（button、icon、text、自定义）
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 是否为按钮类触发器
+ */
+export declare const isButtonLikeTrigger: (triggerType?: TriggerType, hasTrigger?: boolean) => boolean;
+/**
+ * 判断展示类型是否需要容器（modal、drawer）
+ * @param displayType 展示类型
+ * @returns 是否需要容器
+ */
+export declare const needsContainer: (displayType?: DisplayType) => boolean;
+/**
+ * 判断展示类型是否需要浮层（popup）
+ * @param displayType 展示类型
+ * @returns 是否需要浮层
+ */
+export declare const needsPopup: (displayType?: DisplayType) => boolean;
+/**
+ * 判断展示类型是否为内联（inline）
+ * @param displayType 展示类型
+ * @returns 是否为内联
+ */
+export declare const isInline: (displayType?: DisplayType) => boolean;

package/lib/components/pisellLookup/utils/trigger.js

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellLookup/utils/trigger.ts
+var trigger_exports = {};
+__export(trigger_exports, {
+  getDefaultDisplayType: () => getDefaultDisplayType,
+  isButtonLikeTrigger: () => isButtonLikeTrigger,
+  isInline: () => isInline,
+  isInputTrigger: () => isInputTrigger,
+  needsContainer: () => needsContainer,
+  needsPopup: () => needsPopup
+});
+module.exports = __toCommonJS(trigger_exports);
+var getDefaultDisplayType = (triggerType, hasTrigger) => {
+  if (hasTrigger) {
+    return "modal";
+  }
+  if (triggerType === "input") {
+    return "inline";
+  }
+  if (triggerType === "button" || triggerType === "icon" || triggerType === "text") {
+    return "modal";
+  }
+  return "detached";
+};
+var isInputTrigger = (triggerType) => {
+  return triggerType === "input";
+};
+var isButtonLikeTrigger = (triggerType, hasTrigger) => {
+  if (hasTrigger) return true;
+  return triggerType === "button" || triggerType === "icon" || triggerType === "text";
+};
+var needsContainer = (displayType) => {
+  return displayType === "modal" || displayType === "drawer";
+};
+var needsPopup = (displayType) => {
+  return displayType === "popup";
+};
+var isInline = (displayType) => {
+  return displayType === "inline";
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getDefaultDisplayType,
+  isButtonLikeTrigger,
+  isInline,
+  isInputTrigger,
+  needsContainer,
+  needsPopup
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { PisellMetricCardProps } from './types';
+import './PisellMetricCard.less';
+/**
+ * PisellMetricCard 指标卡片组件
+ *
+ * 用于展示单一核心指标的专业卡片组件
+ * 支持标题、数值、环比、趋势箭头、标签等信息展示
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 使用对象配置
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120
+ *   }}
+ * />
+ * ```
+ */
+declare const PisellMetricCard: React.FC<PisellMetricCardProps>;
+export default PisellMetricCard;

package/lib/components/pisellMetricCard/PisellMetricCard.js

@@ -0,0 +1,166 @@
+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/pisellMetricCard/PisellMetricCard.tsx
+var PisellMetricCard_exports = {};
+__export(PisellMetricCard_exports, {
+  default: () => PisellMetricCard_default
+});
+module.exports = __toCommonJS(PisellMetricCard_exports);
+var import_react = __toESM(require("react"));
+var import_pisellCard = __toESM(require("../pisellCard"));
+var import_components = require("./components");
+var import_utils = require("./utils");
+var import_PisellMetricCard = require("./PisellMetricCard.less");
+var PisellMetricCard = (props) => {
+  const {
+    // 核心数据
+    title,
+    subtitle,
+    value,
+    tag,
+    tooltip,
+    // 配置对象
+    format,
+    comparison,
+    styleConfig,
+    // 简单开关
+    showSubtitle = false,
+    showTag = false,
+    showTooltip = false,
+    loading = false,
+    hoverable = true,
+    // 通用属性
+    className,
+    style,
+    onClick
+  } = props;
+  const formatConfig = (0, import_react.useMemo)(() => ({
+    precision: (format == null ? void 0 : format.precision) ?? 0,
+    useGrouping: (format == null ? void 0 : format.useGrouping) ?? false,
+    showCurrencySymbol: (format == null ? void 0 : format.showCurrencySymbol) ?? false,
+    currencySymbol: (format == null ? void 0 : format.currencySymbol) ?? "",
+    formatter: format == null ? void 0 : format.formatter,
+    hideDecimalForWholeNumbers: (format == null ? void 0 : format.hideDecimalForWholeNumbers) ?? true
+  }), [format]);
+  const cardStyle = (0, import_react.useMemo)(() => {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+      bordered: ((_a = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _a.bordered) ?? true,
+      borderRadius: ((_b = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _b.borderRadius) ?? 12,
+      padding: ((_c = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _c.padding) ?? 16,
+      shadow: ((_d = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _d.shadow) ?? true,
+      background: ((_e = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _e.background) ?? "#ffffff",
+      width: ((_f = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _f.width) ?? "auto"
+    };
+  }, [styleConfig]);
+  const titleStyle = (0, import_react.useMemo)(() => {
+    var _a, _b, _c;
+    return {
+      size: ((_a = styleConfig == null ? void 0 : styleConfig.title) == null ? void 0 : _a.size) ?? 14,
+      weight: ((_b = styleConfig == null ? void 0 : styleConfig.title) == null ? void 0 : _b.weight) ?? 400,
+      color: ((_c = styleConfig == null ? void 0 : styleConfig.title) == null ? void 0 : _c.color) ?? "rgba(0, 0, 0, 0.45)"
+    };
+  }, [styleConfig]);
+  const valueStyle = (0, import_react.useMemo)(() => {
+    var _a, _b, _c;
+    return {
+      size: ((_a = styleConfig == null ? void 0 : styleConfig.value) == null ? void 0 : _a.size) ?? 30,
+      weight: ((_b = styleConfig == null ? void 0 : styleConfig.value) == null ? void 0 : _b.weight) ?? 600,
+      color: ((_c = styleConfig == null ? void 0 : styleConfig.value) == null ? void 0 : _c.color) ?? "rgba(0, 0, 0, 0.85)"
+    };
+  }, [styleConfig]);
+  const formattedValue = (0, import_react.useMemo)(() => {
+    return (0, import_utils.formatMetricValue)(value, formatConfig);
+  }, [value, formatConfig]);
+  const comparisonConfig = (0, import_react.useMemo)(() => {
+    if (!(comparison == null ? void 0 : comparison.value)) return null;
+    return {
+      value: comparison.value,
+      text: comparison.text ?? "v.s. pre",
+      showTrendIcon: comparison.showTrendIcon ?? true,
+      positiveColor: comparison.positiveColor ?? "#52c41a",
+      negativeColor: comparison.negativeColor ?? "#ff4d4f",
+      size: comparison.size ?? 14
+    };
+  }, [comparison]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_pisellCard.default,
+    {
+      bordered: cardStyle.bordered,
+      borderRadius: cardStyle.borderRadius,
+      padding: cardStyle.padding,
+      loading,
+      isClickable: !!onClick,
+      onClick,
+      style: {
+        width: typeof cardStyle.width === "number" ? `${cardStyle.width}px` : cardStyle.width,
+        background: cardStyle.background,
+        boxShadow: typeof cardStyle.shadow === "string" ? cardStyle.shadow : cardStyle.shadow ? "0px 1px 2px 0px rgba(16, 24, 40, 0.05)" : "none",
+        ...style
+      },
+      className: `pisell-metric-card ${className || ""}`
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.MetricTitle,
+      {
+        title,
+        subtitle: showSubtitle ? subtitle : void 0,
+        tooltip: showTooltip ? tooltip : void 0,
+        titleSize: titleStyle.size,
+        titleWeight: titleStyle.weight,
+        titleColor: titleStyle.color
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.MetricValue,
+      {
+        value: formattedValue,
+        valueSize: valueStyle.size,
+        valueWeight: valueStyle.weight,
+        valueColor: valueStyle.color
+      }
+    ),
+    comparisonConfig && /* @__PURE__ */ import_react.default.createElement(
+      import_components.MetricComparison,
+      {
+        comparison: comparisonConfig.value,
+        comparisonText: comparisonConfig.text,
+        showTrendIcon: comparisonConfig.showTrendIcon,
+        positiveColor: comparisonConfig.positiveColor,
+        negativeColor: comparisonConfig.negativeColor,
+        comparisonSize: comparisonConfig.size,
+        precision: formatConfig.precision,
+        showCurrencySymbol: formatConfig.showCurrencySymbol,
+        currencySymbol: formatConfig.currencySymbol
+      }
+    ),
+    showTag && tag && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-metric-card-tag" }, tag)
+  );
+};
+var PisellMetricCard_default = PisellMetricCard;

package/lib/components/pisellMetricCard/PisellMetricCard.less

@@ -0,0 +1,74 @@
+.pisell-metric-card {
+  // 标题区域
+  &-title-wrapper {
+    // 不设置固定的 margin-bottom，由子元素控制
+  }
+  
+  &-title {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 22px;
+    margin-bottom: 0;
+    
+    // 如果后面有副标题，间距为 4px
+    & + .pisell-metric-card-subtitle {
+      margin-top: 4px;
+    }
+  }
+  
+  &-subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 20px;
+    margin-bottom: 0;
+  }
+  
+  // 标题区域与数值区域的间距：8px
+  &-title-wrapper + &-value {
+    margin-top: 8px;
+  }
+  
+  // 数值区域
+  &-value {
+    font-size: 30px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 38px;
+    margin-bottom: 0;
+  }
+  
+  // 数值与环比信息的间距：4px
+  &-value + &-comparison {
+    margin-top: 4px;
+  }
+  
+  // 环比信息区域
+  &-comparison {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  
+  &-trend-icon {
+    font-size: 12px;
+  }
+  
+  // 环比信息与标签的间距：8px
+  &-comparison + &-tag {
+    margin-top: 8px;
+  }
+  
+  // 如果没有环比，数值与标签的间距
+  &-value + &-tag {
+    margin-top: 8px;
+  }
+  
+  // 标签区域
+  &-tag {
+    // margin-top 由上面的相邻选择器控制
+  }
+}

package/lib/components/pisellMetricCard/PisellMetricCard.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellMetricCard from './PisellMetricCard';
+declare const meta: Meta<typeof PisellMetricCard>;
+export default meta;
+declare type Story = StoryObj<typeof PisellMetricCard>;
+export declare const Basic: Story;
+export declare const WithCurrency: Story;
+export declare const PositiveTrend: Story;
+export declare const NegativeTrend: Story;
+export declare const WithGrouping: Story;
+export declare const WithPrecision: Story;
+export declare const Complete: Story;
+export declare const WithTag: Story;
+export declare const CustomStyle: Story;
+export declare const Loading: Story;
+export declare const EmptyValue: Story;
+export declare const MultipleCards: Story;