@pisell/materials 1.8.12 → 1.8.13

package/es/components/pisellSingleSelect/components/ReadOnlyView.js

@@ -1,20 +1,21 @@
 /**
  * PisellSingleSelect - ReadOnlyView (只读态视图)
- * 只读状态下的渲染
+ * 只读状态下使用 Tag 展示选中值
  */
 
 import React, { useMemo } from 'react';
+import { Tag } from 'antd';
 import classNames from 'classnames';
 import { findOptionByValue } from '@pisell/utils';
+import { getDefaultTagColor } from "../../../utils/tagColor";
 var ReadOnlyView = function ReadOnlyView(props) {
+  var _selectedOption$color;
   var value = props.value,
     options = props.options,
     label = props.label,
     required = props.required,
     className = props.className,
     style = props.style;
-
-  // 查找选中的选项
   var selectedOption = useMemo(function () {
     return value !== null && value !== undefined ? findOptionByValue(value, options) : undefined;
   }, [value, options]);
@@ -27,9 +28,12 @@ var ReadOnlyView = function ReadOnlyView(props) {
     })
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "pisell-single-select-readonly-display"
-  }, selectedOption ? /*#__PURE__*/React.createElement(React.Fragment, null, selectedOption.icon && /*#__PURE__*/React.createElement("span", {
-    className: "pisell-single-select-readonly-icon"
-  }, selectedOption.icon), /*#__PURE__*/React.createElement("span", null, selectedOption.label)) : /*#__PURE__*/React.createElement("span", {
+  }, selectedOption ? /*#__PURE__*/React.createElement(Tag, {
+    className: "pisell-single-select-readonly-tag",
+    color: (_selectedOption$color = selectedOption.color) !== null && _selectedOption$color !== void 0 ? _selectedOption$color : getDefaultTagColor(selectedOption.value, 0)
+  }, selectedOption.icon && /*#__PURE__*/React.createElement("span", {
+    className: "pisell-single-select-readonly-tag-icon"
+  }, selectedOption.icon), selectedOption.label) : /*#__PURE__*/React.createElement("span", {
     className: "pisell-single-select-readonly-empty"
   }, "-")));
 };

package/es/components/pisellSingleSelect/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * PisellSingleSelect 组件导出
  */
-export { default as PisellSingleSelect } from './PisellSingleSelect';
+import PisellSingleSelect from './PisellSingleSelect';
+export { PisellSingleSelect };
 export type { PisellSingleSelectProps, SingleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, } from './types';
 export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from './types';

package/es/components/pisellSingleSelect/index.js

@@ -2,6 +2,21 @@
  * PisellSingleSelect 组件导出
  */
 
-export { default as PisellSingleSelect } from "./PisellSingleSelect";
+import { getText } from "../../locales";
+import PisellSingleSelect from "./PisellSingleSelect";
+
+/** RecordBoard 列 type 联动排序：内置 First → Last / Last → First */
+PisellSingleSelect.SortOptions = {
+  getSortItems: function getSortItems(fieldKey) {
+    return [{
+      key: "".concat(fieldKey, ":asc"),
+      label: getText('sort-first-last')
+    }, {
+      key: "".concat(fieldKey, ":desc"),
+      label: getText('sort-last-first')
+    }];
+  }
+};
+export { PisellSingleSelect };
 
 // 公共类型从 types 中重新导出，方便使用

package/es/components/pisellStatisticList/index.d.ts

@@ -11,6 +11,7 @@ export interface PisellStatisticListProps extends React.HTMLAttributes<HTMLDivEl
         isLink?: boolean;
         link?: string;
         tip?: string;
+        onClick?: () => void;
         children?: {
             label: string;
             value: string;

package/es/components/pisellStatisticList/index.js

@@ -26,7 +26,8 @@ var PisellStatisticList = function PisellStatisticList(props) {
     var _item$isLink = item.isLink,
       isLink = _item$isLink === void 0 ? false : _item$isLink,
       _item$link = item.link,
-      link = _item$link === void 0 ? '' : _item$link;
+      link = _item$link === void 0 ? '' : _item$link,
+      _onClick = item.onClick;
     return /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-statistic-list-item",
       style: {
@@ -50,10 +51,12 @@ var PisellStatisticList = function PisellStatisticList(props) {
       className: "pisell-lowcode-statistic-list-item-value",
       style: {
         color: valueColor
-      }
+      },
+      onClick: _onClick
     }, isLink && link ? /*#__PURE__*/React.createElement("a", {
       href: "javascript:void(0);",
       onClick: function onClick() {
+        if (_onClick) return;
         location.replace(item.link);
       }
     }, item.value || '-') : item.value || '-'), !!((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) && /*#__PURE__*/React.createElement(Row, {

package/es/components/pisellText/components/Editable/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import './index.less';
+export declare type MultiLanguageValue = {
+    en: string;
+    'zh-CN': string;
+    'zh-HK': string;
+    'ja': string;
+    'pt': string;
+    original: string;
+};
+export interface EditableConfig {
+    /** 是否禁用编辑 */
+    disabled?: boolean;
+    /** 最大长度 */
+    maxLength?: number;
+    /** 编辑图标 */
+    icon?: React.ReactNode;
+}
+export interface EditableProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** 文本内容，支持字符串或多语言对象 */
+    value?: string | MultiLanguageValue;
+    /** 子节点内容，优先级高于 value */
+    children?: string;
+    /** 可编辑配置，boolean 时使用默认配置 */
+    editable?: boolean | EditableConfig;
+    /** 编辑变更回调 */
+    onChange?: (value: string | MultiLanguageValue) => void;
+    /** 输入框尺寸 */
+    size?: 'large' | 'middle' | 'small';
+}
+declare const Editable: React.FC<EditableProps>;
+export default Editable;

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellTimeRangeDisplayProps } from './types';
+import './PisellTimeRangeDisplay.less';
+/**
+ * PisellTimeRangeDisplay 组件
+ *
+ * @description
+ * 纯展示型时间区间组件，将 startAt / endAt 格式化为「时间区间 + 持续时间」。
+ * - 同一天：HH:mm-HH:mm，可选显示日期/星期
+ * - 跨天：起止日期时间
+ * - 持续时间：d h m s 格式
+ * - 字段顺序由 fieldOrder 控制，可将 duration 放在中间
+ *
+ * @example
+ * <PisellTimeRangeDisplay
+ *   startAt="2026-02-04 09:00"
+ *   endAt="2026-02-04 18:00"
+ * />
+ * // => "09:00-18:00" + "9h"
+ *
+ * <PisellTimeRangeDisplay
+ *   startAt={start}
+ *   endAt={end}
+ *   fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
+ *   showDateForSameDay
+ * />
+ */
+export declare const PisellTimeRangeDisplay: React.FC<PisellTimeRangeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellTimeRangeDisplayProps>;
+export default _default;

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.js

@@ -10,6 +10,7 @@ import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
 import { parseTimeRange, getDayjsLocale, getRelativeDay } from "./utils";
 import { TimeRangeBlock, DateBlock, WeekdayBlock, DurationBlock } from "./components";
+import useEngineContext from "../../hooks/useEngineContext";
 import "./PisellTimeRangeDisplay.less";
 
 /**
@@ -37,7 +38,7 @@ import "./PisellTimeRangeDisplay.less";
  * />
  */
 export var PisellTimeRangeDisplay = function PisellTimeRangeDisplay(props) {
-  var _durationFormat$showS;
+  var _context$engine, _durationFormat$showS;
   var startAt = props.startAt,
     endAt = props.endAt,
     _props$textAlign = props.textAlign,
@@ -58,9 +59,11 @@ export var PisellTimeRangeDisplay = function PisellTimeRangeDisplay(props) {
     className = props.className,
     style = props.style,
     onClick = props.onClick;
+  var context = useEngineContext();
+  var resolvedLocale = localeProp || (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || 'en';
   var effectiveLocale = useMemo(function () {
-    return localeProp !== null && localeProp !== void 0 ? localeProp : getDayjsLocale();
-  }, [localeProp]);
+    return getDayjsLocale(resolvedLocale);
+  }, [resolvedLocale]);
   var _useMemo = useMemo(function () {
       return parseTimeRange(startAt, endAt, effectiveLocale);
     }, [startAt, endAt, effectiveLocale]),
@@ -85,10 +88,10 @@ export var PisellTimeRangeDisplay = function PisellTimeRangeDisplay(props) {
     fieldOrder = _ref$fieldOrder === void 0 ? ['weekday', 'date', 'time', 'duration'] : _ref$fieldOrder;
   var showSeconds = (_durationFormat$showS = durationFormat === null || durationFormat === void 0 ? void 0 : durationFormat.showSeconds) !== null && _durationFormat$showS !== void 0 ? _durationFormat$showS : false;
 
-  // 使用 datetime 展示时默认开启「今天/昨天/明天」相对日
+  // 默认不展示相对日（今天/昨天/明天），可通过 dateFormat.showRelativeDay: true 开启
   var effectiveDateFormat = useMemo(function () {
     return _objectSpread({
-      showRelativeDay: true
+      showRelativeDay: false
     }, dateFormat);
   }, [dateFormat]);
 

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.d.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellTimeRangeDisplay } from './PisellTimeRangeDisplay';
+/**
+ * PisellTimeRangeDisplay 组件 Storybook
+ * 用于时间区间 + 持续时长的展示（同一天 / 跨天）
+ */
+declare const meta: Meta<typeof PisellTimeRangeDisplay>;
+export default meta;
+declare type Story = StoryObj<typeof PisellTimeRangeDisplay>;
+/**
+ * 默认：同一天时间区间 + 持续时长
+ */
+export declare const Default: Story;
+/**
+ * 同一天 + 显示日期与星期
+ */
+export declare const SameDayWithDate: Story;
+/**
+ * 跨天时间区间
+ */
+export declare const CrossDay: Story;
+/**
+ * 跨年
+ */
+export declare const CrossYear: Story;
+/**
+ * 持续时间在中间（默认 fieldOrder）
+ */
+export declare const DurationInMiddle: Story;
+/**
+ * 持续时长在前
+ */
+export declare const DurationFirst: Story;
+/**
+ * 持续时长显示秒
+ */
+export declare const DurationWithSeconds: Story;
+/**
+ * 仅时间区间 + 持续时长（不显示日期星期）
+ */
+export declare const TimeAndDurationOnly: Story;
+/**
+ * 12 小时制
+ */
+export declare const Time12Hour: Story;
+/**
+ * 中文（日期 + 持续时长「天/时/分/秒」i18n）
+ */
+export declare const LocaleZhCN: Story;
+/**
+ * 英文（日期 + 持续时长 d/h/m/s）
+ */
+export declare const LocaleEn: Story;
+/**
+ * 小宽度：容器较窄时按块换行
+ */
+export declare const NarrowWidth: Story;
+/**
+ * 自定义容器样式
+ */
+export declare const CustomContainerStyle: Story;

package/es/components/pisellTimeRangeDisplay/components/DateBlock.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type Dayjs } from 'dayjs';
+import type { DateFormatConfig, TextStyleConfig } from '../types';
+export interface DateBlockProps {
+    /** 日期对象 */
+    date: Dayjs;
+    /** 日期格式配置（含 showRelativeDay：今天/昨天/明天） */
+    format?: DateFormatConfig;
+    /** 参考日期，用于相对日判定，默认 dayjs() */
+    referenceDate?: Dayjs;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 日期展示块（复用 PisellDateTimeDisplay 的 formatDate 与相对日逻辑）
+ */
+export declare const DateBlock: React.FC<DateBlockProps>;
+export default DateBlock;

package/es/components/pisellTimeRangeDisplay/components/DurationBlock.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { TextStyleConfig } from '../types';
+export interface DurationBlockProps {
+    /** 持续时间（毫秒） */
+    durationMs: number;
+    /** 是否显示秒 */
+    showSeconds?: boolean;
+    /** 语言代码，zh 时使用「天/时/分/秒」 */
+    locale?: string;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 持续时长展示块（d h m s 或 天/时/分/秒，按 locale i18n）
+ */
+export declare const DurationBlock: React.FC<DurationBlockProps>;
+export default DurationBlock;

package/es/components/pisellTimeRangeDisplay/components/TimeRangeBlock.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type Dayjs } from 'dayjs';
+import type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, TextStyleConfig } from '../types';
+export interface TimeRangeBlockProps {
+    /** 开始时间 */
+    start: Dayjs;
+    /** 结束时间 */
+    end: Dayjs;
+    /** 是否同一天 */
+    isSameDay: boolean;
+    /** 时间格式配置 */
+    timeFormat?: TimeFormatConfig;
+    /** 日期格式配置（跨天时用于起止日期，含 showRelativeDay） */
+    dateFormat?: DateFormatConfig;
+    /** 星期格式配置（跨天时用于「Sat, 22 Jan」） */
+    weekdayFormat?: WeekdayFormatConfig;
+    /** 参考日期，用于相对日判定，默认 dayjs() */
+    referenceDate?: Dayjs;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 时间区间展示块
+ * - 同一天：HH:mm-HH:mm
+ * - 跨天：起止完整日期时间；若某端为相对日（今天/昨天/明天）则只显示「时间 相对日」，不显示星期+日期
+ */
+export declare const TimeRangeBlock: React.FC<TimeRangeBlockProps>;
+export default TimeRangeBlock;

package/es/components/pisellTimeRangeDisplay/components/WeekdayBlock.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+import type { WeekdayFormatConfig, TextStyleConfig } from '../types';
+export interface WeekdayBlockProps {
+    /** 日期对象（用于获取星期） */
+    weekday: Dayjs;
+    /** 星期格式配置 */
+    format?: WeekdayFormatConfig;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 星期展示块（复用 PisellDateTimeDisplay 的 formatWeekday）
+ */
+export declare const WeekdayBlock: React.FC<WeekdayBlockProps>;
+export default WeekdayBlock;

package/es/components/pisellTimeRangeDisplay/components/index.d.ts

@@ -0,0 +1,8 @@
+export { TimeRangeBlock } from './TimeRangeBlock';
+export { DateBlock } from './DateBlock';
+export { WeekdayBlock } from './WeekdayBlock';
+export { DurationBlock } from './DurationBlock';
+export type { TimeRangeBlockProps } from './TimeRangeBlock';
+export type { DateBlockProps } from './DateBlock';
+export type { WeekdayBlockProps } from './WeekdayBlock';
+export type { DurationBlockProps } from './DurationBlock';

package/es/components/pisellTimeRangeDisplay/index.d.ts

@@ -0,0 +1,3 @@
+export { PisellTimeRangeDisplay, default } from './PisellTimeRangeDisplay';
+export type { PisellTimeRangeDisplayProps, LayoutDirection, TimeRangeFieldType, TimeRangeFieldConfig, DurationFormatConfig, DayjsLike, } from './types';
+export type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign, } from './types';

package/es/components/pisellTimeRangeDisplay/types.d.ts

@@ -0,0 +1,137 @@
+import type { CSSProperties } from 'react';
+import type { Dayjs } from 'dayjs';
+import type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign } from '../pisellDateTimeDisplay/types';
+export type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign, };
+/**
+ * 字段类型（时间区间、日期、星期、持续时长）
+ * - time: 时间区间块（HH:mm-HH:mm 或跨天起止）
+ * - date: 日期块
+ * - weekday: 星期块
+ * - duration: 持续时长块
+ */
+export declare type TimeRangeFieldType = 'time' | 'date' | 'weekday' | 'duration';
+/**
+ * 持续时长格式配置
+ */
+export interface DurationFormatConfig {
+    /**
+     * 是否显示秒
+     * @default false
+     * @example true -> "2h30m23s" | false -> "2h30m"
+     */
+    showSeconds?: boolean;
+}
+/**
+ * 字段配置
+ */
+export interface TimeRangeFieldConfig {
+    /**
+     * 是否显示时间区间块
+     * @default true
+     */
+    showTimeRange?: boolean;
+    /**
+     * 是否显示日期块
+     * @default true
+     */
+    showDate?: boolean;
+    /**
+     * 是否显示星期块
+     * @default true
+     */
+    showWeekday?: boolean;
+    /**
+     * 是否显示持续时长块
+     * @default true
+     */
+    showDuration?: boolean;
+    /**
+     * 字段顺序（四类块可任意排序；默认 时间 日期 星期 持续时长，可实现「持续时间在前」等）
+     * @default ['weekday', 'date', 'time', 'duration'] 换行顺序：先持续时间 → 结束时间（跨天）→ 开始/结束时间与日期 → 星期
+     */
+    fieldOrder?: TimeRangeFieldType[];
+}
+/**
+ * startAt / endAt 的 dayjs 兼容值
+ */
+export declare type DayjsLike = Dayjs | string | number;
+/**
+ * PisellTimeRangeDisplay 组件 Props
+ */
+export interface PisellTimeRangeDisplayProps {
+    /**
+     * 开始时间（dayjs 兼容值）
+     */
+    startAt: DayjsLike;
+    /**
+     * 结束时间（dayjs 兼容值）
+     */
+    endAt: DayjsLike;
+    /**
+     * 文本对齐方式（单行/多行均生效）
+     * @default 'center'
+     */
+    textAlign?: TextAlign;
+    /**
+     * 字段显示与排序配置
+     */
+    fields?: TimeRangeFieldConfig;
+    /**
+     * 同一天时是否显示具体日期
+     * @default true
+     */
+    showDateForSameDay?: boolean;
+    /**
+     * 时间格式配置（复用 PisellDateTimeDisplay）
+     */
+    timeFormat?: TimeFormatConfig;
+    /**
+     * 日期格式配置（复用 PisellDateTimeDisplay）
+     */
+    dateFormat?: DateFormatConfig;
+    /**
+     * 星期格式配置（复用 PisellDateTimeDisplay）
+     */
+    weekdayFormat?: WeekdayFormatConfig;
+    /**
+     * 持续时长格式配置
+     */
+    durationFormat?: DurationFormatConfig;
+    /**
+     * 容器样式
+     */
+    containerStyle?: ContainerStyleConfig;
+    /**
+     * 时间区间文本样式
+     */
+    timeStyle?: TextStyleConfig;
+    /**
+     * 日期文本样式
+     */
+    dateStyle?: TextStyleConfig;
+    /**
+     * 星期文本样式
+     */
+    weekdayStyle?: TextStyleConfig;
+    /**
+     * 持续时长文本样式
+     */
+    durationStyle?: TextStyleConfig;
+    /**
+     * dayjs locale（语言代码）
+     * @default 优先使用全局配置，其次浏览器语言
+     */
+    locale?: string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 点击回调
+     */
+    onClick?: () => void;
+}

package/es/components/pisellTimeRangeDisplay/utils/formatDuration.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 将毫秒数格式化为持续时间字符串（d h m s 或 天/时/分/秒）
+ *
+ * @param ms 持续时间（毫秒）
+ * @param showSeconds 是否显示秒，默认 false
+ * @param locale 语言代码，zh 时使用「天/时/分/秒」，否则使用 d/h/m/s
+ * @returns 如 "2h30m"、"1d2h30m23s" 或 "2时30分"、"1天2时30分23秒"
+ *
+ * @example
+ * formatDuration(9000000, false)        // => "2h30m"
+ * formatDuration(9000000, false, 'zh-cn') // => "2时30分"
+ * formatDuration(86400000, false)       // => "1d"
+ */
+export declare function formatDuration(ms: number, showSeconds?: boolean, locale?: string): string;

package/es/components/pisellTimeRangeDisplay/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { parseTimeRange } from './parseTimeRange';
+export type { ParseTimeRangeResult } from './parseTimeRange';
+export { formatDuration } from './formatDuration';
+export { formatTime, formatDate, formatWeekday, getDayjsLocale, getRelativeDay, getRelativeDayLabel, getDatePartDisplay, } from '../../pisellDateTimeDisplay/utils';

package/es/components/pisellTimeRangeDisplay/utils/parseTimeRange.d.ts

@@ -0,0 +1,23 @@
+import { type Dayjs } from 'dayjs';
+import type { DayjsLike } from '../types';
+export interface ParseTimeRangeResult {
+    /** 开始时间（已应用 locale） */
+    start: Dayjs;
+    /** 结束时间（已应用 locale） */
+    end: Dayjs;
+    /** 是否同一天（按本地时区自然日判定） */
+    isSameDay: boolean;
+}
+/**
+ * 解析 startAt / endAt 为 Dayjs，并判定是否同一天
+ *
+ * @param startAt 开始时间（dayjs 兼容值）
+ * @param endAt 结束时间（dayjs 兼容值）
+ * @param locale dayjs locale，可选
+ * @returns { start, end, isSameDay }
+ *
+ * @example
+ * parseTimeRange('2026-02-04 09:00', '2026-02-04 18:00', 'zh-cn')
+ * // => { start: Dayjs, end: Dayjs, isSameDay: true }
+ */
+export declare function parseTimeRange(startAt: DayjsLike, endAt: DayjsLike, locale?: string): ParseTimeRangeResult;