@pisell/materials 6.3.27 → 6.3.29

package/lib/components/pisellPhone/components/ReadOnlyView.js

@@ -59,15 +59,29 @@ var ReadOnlyView = (props) => {
     }
   };
   const canDial = props.enableDial !== false && isMobile;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-phone-read ${props.className || ""}` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "small" }, props.showFlag !== false && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-phone-flag" }, (0, import_utils.getCountryFlag)(countryCode)), /* @__PURE__ */ import_react.default.createElement(
+  const textColor = canDial ? "#7F56DA" : props.color || "#101828";
+  const textFontSize = props.fontSize ?? 16;
+  const textFontWeight = props.fontWeight ?? 500;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-phone-read ${props.className || ""}` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "small" }, props.showFlag !== false && /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: "pisell-phone-country-code",
+      style: {
+        fontSize: textFontSize,
+        fontWeight: textFontWeight,
+        color: textColor
+      }
+    },
+    countryCode
+  ), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Typography.Text,
     {
       className: canDial ? "pisell-phone-clickable" : "",
       onClick: canDial ? handleDial : void 0,
       style: {
-        fontSize: props.fontSize || 16,
-        fontWeight: props.fontWeight || 500,
-        color: canDial ? "#7F56DA" : props.color || "#101828",
+        fontSize: textFontSize,
+        fontWeight: textFontWeight,
+        color: textColor,
         cursor: canDial ? "pointer" : "default",
         textDecoration: canDial ? "underline" : "none",
         ...props.style

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

@@ -1,7 +1,8 @@
 /**
  * PisellPhone 组件导出
  */
-export { default as PisellPhone } from './PisellPhone';
+import PisellPhone from './PisellPhone';
+export { PisellPhone };
 export type { PisellPhoneProps, CountryCode } from './types';
 export { PRESET_COUNTRY_CODES, DEFAULT_COUNTRY_CODE, COMMON_COUNTRY_CODES } from './constants/countryCodes';
 export type { DisplayState, ValidationResult, TextInputState } from './types';

package/lib/components/pisellPhone/index.js

@@ -35,8 +35,15 @@ __export(pisellPhone_exports, {
   PisellPhone: () => import_PisellPhone.default
 });
 module.exports = __toCommonJS(pisellPhone_exports);
+var import_locales = require("../../locales");
 var import_PisellPhone = __toESM(require("./PisellPhone"));
 var import_countryCodes = require("./constants/countryCodes");
+import_PisellPhone.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-a-z") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-z-a") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   COMMON_COUNTRY_CODES,

package/lib/components/pisellPhone/utils/phoneFormatter.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 电话号码格式化工具
+ */
+/**
+ * 中国大陆手机号格式化：138 0000 0000
+ */
+export declare function formatChinaMobile(phone: string): string;
+/**
+ * 美国/加拿大号码格式化：(555) 123-4567
+ */
+export declare function formatUSPhone(phone: string): string;
+/**
+ * 英国号码格式化：1234 567 8900
+ */
+export declare function formatUKPhone(phone: string): string;
+/**
+ * 根据国家码格式化电话号码
+ * @param phone 电话号码（纯数字）
+ * @param countryCode 国家码
+ * @returns 格式化后的电话号码
+ */
+export declare function formatPhone(phone: string, countryCode: string): string;
+/**
+ * 电话号码脱敏
+ * @param phone 电话号码
+ * @param pattern 脱敏模式
+ * @returns 脱敏后的号码
+ *
+ * @example
+ * maskPhone('13800000000', 'middle') // '138****0000'
+ * maskPhone('13800000000', 'last')   // '1380000****'
+ */
+export declare function maskPhone(phone: string, pattern?: 'middle' | 'last'): string;
+/**
+ * 检测号码类型（中国）
+ * @param phone 电话号码
+ * @returns 号码类型
+ */
+export declare function detectPhoneType(phone: string): 'mobile' | 'landline' | 'unknown';

package/lib/components/pisellRating/PisellRating.less

@@ -1,41 +1,49 @@
-// PisellRating 组件样式
+/**
+ * PisellRating 组件样式
+ * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
+ */
 
 .pisell-rating {
   display: inline-flex;
   align-items: center;
-  
+
   // 只读态
   &-read {
-    .ant-rate {
+    .pisell-lowcode-rate {
       cursor: default;
       pointer-events: none;
     }
   }
-  
+
   // 编辑态
   &-edit {
-    .ant-rate {
+    .pisell-lowcode-rate {
       cursor: pointer;
     }
   }
-  
+
   // 禁用态
   &-disabled {
     opacity: 0.4;
-    
-    .ant-rate {
+
+    .pisell-lowcode-rate {
       cursor: not-allowed;
     }
   }
-  
-  // 评分数值文本
+
+  // 评分数值文本（与设计体系一致）
   &-value {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.85);
+    line-height: 1.5;
+    color: #101828; // Gray/900
+    margin-left: 8px;
   }
-  
+
   // 评分人数文本
   &-count {
     font-size: 14px;
+    line-height: 1.5;
+    color: #667085; // Gray/500
+    margin-left: 8px;
   }
 }

package/lib/components/pisellRating/PisellRating.stories.js

@@ -39,7 +39,7 @@ var import_react = require("react");
 var import_antd = require("antd");
 var import_icons = require("@ant-design/icons");
 var meta = {
-  title: "Components/PisellRating",
+  title: "表单/表单组件/PisellRating",
   component: import_PisellRating.PisellRating,
   tags: ["autodocs"]
 };

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

@@ -1,6 +1,7 @@
 /**
  * PisellRating 组件导出
  */
-export { default as PisellRating } from './PisellRating';
+import PisellRating from './PisellRating';
+export { PisellRating };
 export type { PisellRatingProps } from './types';
 export type { DisplayState } from './types';

package/lib/components/pisellRating/index.js

@@ -32,7 +32,14 @@ __export(pisellRating_exports, {
   PisellRating: () => import_PisellRating.default
 });
 module.exports = __toCommonJS(pisellRating_exports);
+var import_locales = require("../../locales");
 var import_PisellRating = __toESM(require("./PisellRating"));
+import_PisellRating.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-0-9") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-9-0") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellRating

package/lib/components/pisellRecordBoard/PisellRecordBoard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RecordBoardProps } from './types';
+/**
+ * RecordBoard 容器：提供统一的 data / pagination / search 上下文。
+ * 仅接受打散 props：列表/分页/搜索/多选/列显隐、以及 grid/toolBar/search/paginationConfig/batchActionBar/cardList。
+ */
+declare const PisellRecordBoard: React.FC<RecordBoardProps>;
+export default PisellRecordBoard;

package/lib/components/pisellRecordBoard/PisellRecordBoard.js

@@ -0,0 +1,263 @@
+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/pisellRecordBoard/PisellRecordBoard.tsx
+var PisellRecordBoard_exports = {};
+__export(PisellRecordBoard_exports, {
+  default: () => PisellRecordBoard_default
+});
+module.exports = __toCommonJS(PisellRecordBoard_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_RecordBoardProvider = require("./context/RecordBoardProvider");
+var import_recordBoardColumns = require("./utils/recordBoardColumns");
+var defaultPagination = { pageNumber: 1, pageSize: 50 };
+function mergeChildComponentProps(props) {
+  const hasAny = props.grid != null || props.toolBar != null || props.search != null || props.paginationConfig != null || props.batchActionBar != null || props.cardList != null;
+  if (!hasAny) return void 0;
+  return {
+    ...props.grid != null && { grid: props.grid },
+    ...props.toolBar != null && { toolBar: props.toolBar },
+    ...props.search != null && { search: props.search },
+    ...props.paginationConfig != null && {
+      pagination: props.paginationConfig
+    },
+    ...props.batchActionBar != null && {
+      batchActionBar: props.batchActionBar
+    },
+    ...props.cardList != null && { cardList: props.cardList }
+  };
+}
+function getDefaultRecordBoardContext(layoutType, selection, rowKey) {
+  return {
+    data: [],
+    loading: false,
+    total: 0,
+    pagination: defaultPagination,
+    onPageChange: () => {
+    },
+    searchParams: {},
+    onSearch: () => {
+    },
+    onReset: () => {
+    },
+    layoutType,
+    selectedKeys: selection.selectedKeys,
+    selectedRows: selection.selectedRows,
+    onSelectionChange: selection.onSelectionChange,
+    rowKey,
+    childComponentProps: void 0,
+    scrollAreaHeight: null,
+    setScrollAreaHeight: void 0,
+    filterResetKey: void 0,
+    setFilterResetKey: void 0
+  };
+}
+var PisellRecordBoard = (props) => {
+  const {
+    children,
+    layoutType = "grid",
+    rowKey: rowKeyProp,
+    data: dataProp,
+    loading: loadingProp,
+    total: totalProp,
+    pagination: paginationProp,
+    onPageChange: onPageChangeProp,
+    searchParams: searchParamsProp,
+    onSearch: onSearchProp,
+    onReset: onResetProp,
+    ...rest
+  } = props;
+  const fillHeight = true;
+  const columnVisibilityStorageKey = props.columnVisibilityStorageKey ?? props.__id;
+  const mergedChildComponentProps = (0, import_react.useMemo)(
+    () => mergeChildComponentProps(props),
+    [
+      props.grid,
+      props.toolBar,
+      props.search,
+      props.paginationConfig,
+      props.batchActionBar,
+      props.cardList
+    ]
+  );
+  const [internalSelectedKeys, setInternalSelectedKeys] = (0, import_react.useState)(
+    []
+  );
+  const [internalSelectedRows, setInternalSelectedRows] = (0, import_react.useState)([]);
+  const [scrollAreaHeight, setScrollAreaHeight] = (0, import_react.useState)(null);
+  const [filterResetKey, setFilterResetKey] = (0, import_react.useState)(0);
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react.useState)(() => {
+    var _a, _b;
+    const fromConfig = ((_a = props.grid) == null ? void 0 : _a.defaultHiddenColumnKeys) ?? [];
+    const fromColumns = (((_b = props.grid) == null ? void 0 : _b.columns) ?? []).filter(
+      (col) => col.hidden === true
+    ).map((col) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(col)).filter(Boolean);
+    const allHiddenKeys = Array.from(/* @__PURE__ */ new Set([...fromConfig, ...fromColumns]));
+    const defaultVis = {};
+    allHiddenKeys.forEach((k) => {
+      defaultVis[k] = false;
+    });
+    if (typeof columnVisibilityStorageKey === "string" && columnVisibilityStorageKey) {
+      if (typeof import_utils.getRecordBoardColumnSettingFromLocal === "function") {
+        const saved = (0, import_utils.getRecordBoardColumnSettingFromLocal)(columnVisibilityStorageKey);
+        if ((saved == null ? void 0 : saved.columnVisibility) && Object.keys(saved.columnVisibility).length > 0) {
+          return { ...defaultVis, ...saved.columnVisibility };
+        }
+      } else if (typeof import_utils.getColumnVisibilityFromLocal === "function") {
+        const savedVis = (0, import_utils.getColumnVisibilityFromLocal)(columnVisibilityStorageKey);
+        if (savedVis && Object.keys(savedVis).length > 0) {
+          return { ...defaultVis, ...savedVis };
+        }
+      }
+    }
+    return defaultVis;
+  });
+  const [internalColumnOrder, setInternalColumnOrder] = (0, import_react.useState)(
+    () => {
+      if (typeof columnVisibilityStorageKey === "string" && columnVisibilityStorageKey && typeof import_utils.getRecordBoardColumnSettingFromLocal === "function") {
+        const saved = (0, import_utils.getRecordBoardColumnSettingFromLocal)(columnVisibilityStorageKey);
+        return (saved == null ? void 0 : saved.columnOrder) ?? null;
+      }
+      return null;
+    }
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof columnVisibilityStorageKey !== "string" || !columnVisibilityStorageKey)
+      return;
+    (0, import_utils.saveColumnVisibilityToLocal)({
+      componentId: columnVisibilityStorageKey,
+      columnVisibility: internalColumnVisibility,
+      columnOrder: internalColumnOrder ?? void 0
+    });
+  }, [columnVisibilityStorageKey, internalColumnVisibility, internalColumnOrder]);
+  const onSelectionChangeInternal = (0, import_react.useCallback)(
+    (keys, rows) => {
+      setInternalSelectedKeys(keys);
+      setInternalSelectedRows(rows);
+    },
+    []
+  );
+  const onColumnVisibilityChangeInternal = (0, import_react.useCallback)(
+    (visibility) => {
+      setInternalColumnVisibility((prev) => ({ ...prev, ...visibility }));
+    },
+    []
+  );
+  const onColumnOrderChangeInternal = (0, import_react.useCallback)((columnKeys) => {
+    setInternalColumnOrder(columnKeys);
+  }, []);
+  const contextValue = (0, import_react.useMemo)(() => {
+    const defaultCtx = getDefaultRecordBoardContext(
+      layoutType,
+      {
+        selectedKeys: internalSelectedKeys,
+        selectedRows: internalSelectedRows,
+        onSelectionChange: onSelectionChangeInternal
+      },
+      rowKeyProp
+    );
+    const data = dataProp !== void 0 ? dataProp : defaultCtx.data;
+    const loading = loadingProp !== void 0 ? loadingProp : defaultCtx.loading;
+    const total = totalProp !== void 0 ? totalProp : defaultCtx.total;
+    const pagination = paginationProp !== void 0 ? paginationProp : defaultCtx.pagination;
+    const onPageChange = onPageChangeProp ?? defaultCtx.onPageChange;
+    const searchParams = searchParamsProp !== void 0 ? searchParamsProp : defaultCtx.searchParams;
+    const onSearch = onSearchProp ?? defaultCtx.onSearch;
+    const onReset = onResetProp ?? defaultCtx.onReset;
+    const rowKey = rowKeyProp ?? defaultCtx.rowKey;
+    const gridSelection = props.grid;
+    const hasControlledSelection = (gridSelection == null ? void 0 : gridSelection.selectedKeys) != null && Array.isArray(gridSelection.selectedKeys) && typeof gridSelection.onSelectionChange === "function";
+    const selectedKeys = hasControlledSelection ? gridSelection.selectedKeys : internalSelectedKeys;
+    const selectedRows = hasControlledSelection ? gridSelection.selectedRows ?? [] : internalSelectedRows;
+    const onSelectionChange = hasControlledSelection ? gridSelection.onSelectionChange : onSelectionChangeInternal;
+    return {
+      ...defaultCtx,
+      layoutType,
+      rowKey,
+      data,
+      loading,
+      total,
+      pagination,
+      onPageChange,
+      searchParams,
+      onSearch,
+      onReset,
+      selectedKeys,
+      selectedRows,
+      onSelectionChange,
+      columnVisibility: internalColumnVisibility,
+      onColumnVisibilityChange: onColumnVisibilityChangeInternal,
+      columnOrder: internalColumnOrder,
+      onColumnOrderChange: onColumnOrderChangeInternal,
+      childComponentProps: mergedChildComponentProps ?? defaultCtx.childComponentProps,
+      fillHeight,
+      scrollAreaHeight,
+      setScrollAreaHeight,
+      filterResetKey,
+      setFilterResetKey
+    };
+  }, [
+    layoutType,
+    rowKeyProp,
+    dataProp,
+    loadingProp,
+    totalProp,
+    paginationProp,
+    onPageChangeProp,
+    searchParamsProp,
+    onSearchProp,
+    onResetProp,
+    mergedChildComponentProps,
+    internalSelectedKeys,
+    internalSelectedRows,
+    onSelectionChangeInternal,
+    internalColumnVisibility,
+    onColumnVisibilityChangeInternal,
+    internalColumnOrder,
+    onColumnOrderChangeInternal,
+    fillHeight,
+    scrollAreaHeight,
+    filterResetKey
+  ]);
+  const content = /* @__PURE__ */ import_react.default.createElement(import_RecordBoardProvider.RecordBoardProvider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-record-board-root",
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0
+      }
+    },
+    content
+  );
+};
+var PisellRecordBoard_default = PisellRecordBoard;

package/lib/components/pisellRecordBoard/PisellRecordBoard.stories.d.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellRecordBoard from './index';
+declare const meta: Meta<typeof PisellRecordBoard>;
+export default meta;
+declare type Story = StoryObj<typeof PisellRecordBoard>;
+/**
+ * Grid 布局 - 带 Table、分页、多选；列 type 驱动列/筛选/排序；筛选在 Filter 弹层内；重置清空筛选与排序。
+ */
+export declare const GridLayoutWithTable: Story;
+/**
+ * Grid 布局 - 多页分页示例（至少 25 页：250 条数据，每页 10 条）
+ */
+export declare const GridWithMultiplePages: Story;
+/**
+ * Grid 布局 - 同值列折叠：当前页某列全部同值或全部为空时，该列隐藏并在表格上方展示总结区（列名 + 统一值/空数据）。
+ */
+export declare const GridLayoutWithCollapseUniformColumns: Story;
+/**
+ * Grid 布局 - uniformCompare 示例：列值为对象时，用 uniformCompare(value, record) 返回用于比较的 string/number，全同则折叠。
+ */
+export declare const GridLayoutWithUniformCompare: Story;
+/**
+ * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
+ */
+export declare const GridWithOnRow: Story;
+/**
+ * Grid 布局 - 与 GridLayoutWithTable 类似，列 type 驱动列/筛选/排序，筛选在弹层内。
+ */
+export declare const GridLayoutWithColumnType: Story;
+/**
+ * Grid 布局 - ToolBar 内直接配置 sort 与 filter（不依赖列派生）
+ * toolBar.sort 用 getSortItems 手动配置选项，toolBar.filter 传 { defaultFilterValue }。
+ */
+export declare const GridLayoutToolBarSortAndFilter: Story;
+/**
+ * Grid 布局 - 快速筛选在 ToolBar 左侧内联展示（toolBar.quickFilter: true），右侧筛选弹层仅保留高级筛选。
+ */
+export declare const GridLayoutWithQuickFilterOnLeft: Story;
+/**
+ * 自定义左侧快速筛选 + Filter 弹层（高级筛选）+ 列自定义 render
+ */
+export declare const CustomQuickFilterAndColumnsRender: Story;
+/**
+ * 自定义 filter、自定义 sort、自定义 render
+ * 展示列上显式配置：筛选（订单状态 single 在高级筛选、下单时间 rangePickerNew + 自定义 placeholder/width 在快筛）、
+ * 排序（订单状态无 type，用 sort.getSortItems 自定义「状态 A-Z / Z-A」）、
+ * 以及列的自定义 render（订单号加粗蓝色、状态标签、买家加粗）。
+ */
+export declare const CustomFilterSortRender: Story;
+/**
+ * Grid 布局 - ToolBar 内使用 PisellFind（toolBar.search: true）
+ */
+export declare const GridLayoutWithPisellFindInToolBar: Story;
+/**
+ * Grid 布局 - ToolBar 内 PisellFind 透传（toolBar.search: { triggerType: 'input' }）
+ */
+export declare const GridLayoutToolBarSearchInput: Story;
+/**
+ * Grid 布局 - 完整示例（表格 + 多选 + BatchActionBar 批量操作）
+ */
+export declare const GridLayoutFull: Story;
+/**
+ * 占位 / 设计态（不传 value，无数据源）
+ */
+export declare const Placeholder: Story;
+/**
+ * Card 布局占位
+ */
+export declare const CardLayoutPlaceholder: Story;
+/**
+ * 自定义组合：单独挂 ToolBar / BatchActionBar / Grid / Pagination
+ */
+export declare const CustomComposition: Story;
+/**
+ * 使用 PisellFind 搜索槽：Search（PisellFind）+ ToolBar + Grid + Pagination
+ */
+export declare const WithPisellFindSearch: Story;
+/**
+ * 仅 Search + Grid + 分页（无 ToolBar）
+ */
+export declare const SearchAndGridOnly: Story;