@pisell/materials 6.9.4 → 6.11.1

package/lib/components/pisellLongText/components/ReadOnlyView.js

@@ -0,0 +1,86 @@
+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/pisellLongText/components/ReadOnlyView.tsx
+var ReadOnlyView_exports = {};
+__export(ReadOnlyView_exports, {
+  default: () => ReadOnlyView_default
+});
+module.exports = __toCommonJS(ReadOnlyView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var { Paragraph } = import_antd.Typography;
+var ReadOnlyView = (props) => {
+  const [isExpanded, setIsExpanded] = (0, import_react.useState)(false);
+  const {
+    value,
+    maxLines = 3,
+    enableExpand = true,
+    expandText = "展开",
+    collapseText = "收起",
+    expandButtonPosition = "bottom",
+    showWordCount = false,
+    fontSize = 16,
+    fontWeight = 500,
+    color = "#101828",
+    lineHeight = 1.5,
+    className,
+    style
+  } = props;
+  const content = value || "";
+  const lines = content.split("\n");
+  const needExpand = lines.length > maxLines;
+  const displayContent = !isExpanded && needExpand ? lines.slice(0, maxLines).join("\n") + "..." : content;
+  const textStyle = {
+    fontSize,
+    fontWeight,
+    color,
+    lineHeight,
+    whiteSpace: "pre-wrap",
+    // 保留换行和空格
+    margin: 0,
+    ...style
+  };
+  const handleToggleExpand = () => {
+    var _a;
+    const newExpanded = !isExpanded;
+    setIsExpanded(newExpanded);
+    (_a = props.onExpand) == null ? void 0 : _a.call(props, newExpanded);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-long-text-read ${className || ""}` }, /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: textStyle }, displayContent), enableExpand && needExpand && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      type: "link",
+      size: "small",
+      onClick: handleToggleExpand,
+      className: "pisell-long-text-expand-btn"
+    },
+    isExpanded ? collapseText : expandText
+  ), showWordCount && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-long-text-word-count" }, content.length, " 字"));
+};
+var ReadOnlyView_default = ReadOnlyView;

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

@@ -0,0 +1,6 @@
+/**
+ * PisellLongText 组件导出
+ */
+export { default as PisellLongText } from './PisellLongText';
+export type { PisellLongTextProps } from './types';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

package/lib/components/pisellLongText/index.js

@@ -0,0 +1,39 @@
+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/pisellLongText/index.tsx
+var pisellLongText_exports = {};
+__export(pisellLongText_exports, {
+  PisellLongText: () => import_PisellLongText.default
+});
+module.exports = __toCommonJS(pisellLongText_exports);
+var import_PisellLongText = __toESM(require("./PisellLongText"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellLongText
+});

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

@@ -0,0 +1,147 @@
+import type { CSSProperties, KeyboardEvent } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * PisellLongText 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加长文本特有的配置
+ */
+export interface PisellLongTextProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 编辑态默认显示行数
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 编辑态最小行数
+     */
+    minRows?: number;
+    /**
+     * 编辑态最大行数
+     */
+    maxRows?: number;
+    /**
+     * 自动高度调整
+     * @default false
+     * @example
+     * autoSize={true} // 自动调整
+     * autoSize={{ minRows: 3, maxRows: 10 }} // 指定范围
+     */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /**
+     * 只读态最大显示行数（超出显示展开按钮）
+     * @default 3
+     */
+    maxLines?: number;
+    /**
+     * 是否启用展开功能（只读态）
+     * @default true
+     */
+    enableExpand?: boolean;
+    /**
+     * 展开按钮文案
+     * @default '展开'
+     */
+    expandText?: string;
+    /**
+     * 收起按钮文案
+     * @default '收起'
+     */
+    collapseText?: string;
+    /**
+     * 展开按钮位置
+     * @default 'bottom'
+     */
+    expandButtonPosition?: 'bottom' | 'inline';
+    /**
+     * 只读态是否显示字数统计
+     * @default false
+     */
+    showWordCount?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     * @default 16
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     * @default 500
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     * @default '#101828'
+     */
+    color?: string;
+    /**
+     * 行高
+     * @example '1.5' 或 1.5
+     * @default 1.5
+     */
+    lineHeight?: string | number;
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（字符数）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示字数统计（编辑态）
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 回车键回调（传递事件对象，支持判断 Ctrl+Enter）
+     * @param e 键盘事件对象
+     */
+    onPressEnter?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * 展开/收起回调
+     * @param expanded 是否已展开
+     */
+    onExpand?: (expanded: boolean) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

package/lib/components/pisellLongText/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/pisellLongText/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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;