@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellSingleSelect/components/EditView.js

@@ -0,0 +1,156 @@
+var _excluded = ["value", "options", "label", "helperText", "error", "errorText", "required", "placeholder", "showSearch", "allowClear", "size", "className", "style", "onSearch", "filterOption", "onChange"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * PisellSingleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+
+import React, { forwardRef, useMemo, useCallback, useState } from 'react';
+import { Select, Input } from 'antd';
+import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import { useDebouncedSearch } from '@pisell/utils';
+var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    options = props.options,
+    label = props.label,
+    helperText = props.helperText,
+    error = props.error,
+    errorText = props.errorText,
+    required = props.required,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    className = props.className,
+    style = props.style,
+    onSearch = props.onSearch,
+    filterOption = props.filterOption,
+    onChange = props.onChange,
+    restProps = _objectWithoutProperties(props, _excluded);
+
+  // 转换为 Ant Design 需要的格式
+  var antdOptions = useMemo(function () {
+    return options.map(function (opt) {
+      return {
+        label: opt.label,
+        value: opt.value,
+        disabled: opt.disabled
+      };
+    });
+  }, [options]);
+
+  // 处理值变化
+  var handleChange = function handleChange(newValue) {
+    var selectedOption = options.find(function (opt) {
+      return opt.value === newValue;
+    });
+    onChange === null || onChange === void 0 || onChange(newValue !== null && newValue !== void 0 ? newValue : null, selectedOption !== null && selectedOption !== void 0 ? selectedOption : null);
+  };
+
+  // 搜索关键词状态
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchKeyword = _useState2[0],
+    setSearchKeyword = _useState2[1];
+
+  // 处理搜索输入（防抖）
+  var _useDebouncedSearch = useDebouncedSearch('', 300, function (text) {
+      onSearch === null || onSearch === void 0 || onSearch(text);
+    }),
+    _useDebouncedSearch2 = _slicedToArray(_useDebouncedSearch, 2),
+    setSearchInput = _useDebouncedSearch2[1];
+  var handleSearchInput = function handleSearchInput(e) {
+    var text = e.target.value;
+    setSearchKeyword(text);
+    setSearchInput(text);
+  };
+
+  // 过滤选项
+  var filteredAntdOptions = useMemo(function () {
+    if (!showSearch || !searchKeyword) return antdOptions;
+    if (filterOption) {
+      // 使用自定义过滤
+      return antdOptions.filter(function (opt) {
+        var selectOption = options.find(function (o) {
+          return o.value === opt.value;
+        });
+        return selectOption ? filterOption(searchKeyword, selectOption) : false;
+      });
+    }
+
+    // 默认按 label 过滤
+    return antdOptions.filter(function (opt) {
+      return opt.label.toLowerCase().includes(searchKeyword.toLowerCase());
+    });
+  }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
+
+  // 自定义选中图标
+  var menuItemSelectedIcon = /*#__PURE__*/React.createElement(CheckOutlined, {
+    style: {
+      color: '#7F56D9',
+      fontSize: 16
+    }
+  });
+
+  // 自定义下拉框渲染（在顶部添加搜索框）
+  var dropdownRender = useCallback(function (menu) {
+    if (!showSearch) return menu;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-select-search-wrapper"
+    }, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "Search",
+      prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
+        style: {
+          color: '#98A2B3',
+          fontSize: 16
+        }
+      }),
+      value: searchKeyword,
+      onChange: handleSearchInput,
+      className: "pisell-select-search-input",
+      bordered: false,
+      autoFocus: true
+    })), menu);
+  }, [showSearch, searchKeyword, handleSearchInput]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-single-select-wrapper', className),
+    style: style
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: classNames('pisell-single-select-label', {
+      'pisell-single-select-label-required': required
+    })
+  }, label), /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+    ref: ref,
+    value: value !== null && value !== void 0 ? value : undefined,
+    options: filteredAntdOptions,
+    placeholder: placeholder,
+    showSearch: false,
+    allowClear: allowClear,
+    menuItemSelectedIcon: menuItemSelectedIcon,
+    dropdownRender: dropdownRender,
+    onChange: handleChange,
+    size: size,
+    className: classNames('pisell-single-select', {
+      'pisell-single-select-error': error
+    })
+  })), helperText && !error && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-select-helper-text"
+  }, helperText), error && errorText && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-select-error-text"
+  }, errorText));
+});
+EditView.displayName = 'PisellSingleSelectEditView';
+export default EditView;

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

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下的渲染
+ */
+import React from 'react';
+import type { ReadOnlyViewProps } from '../types';
+declare const ReadOnlyView: React.FC<ReadOnlyViewProps>;
+export default ReadOnlyView;

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

@@ -0,0 +1,37 @@
+/**
+ * PisellSingleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下的渲染
+ */
+
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { findOptionByValue } from '@pisell/utils';
+var ReadOnlyView = function ReadOnlyView(props) {
+  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]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-single-select-wrapper', 'pisell-single-select-readonly', className),
+    style: style
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: classNames('pisell-single-select-label', {
+      'pisell-single-select-label-required': required
+    })
+  }, 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", {
+    className: "pisell-single-select-readonly-empty"
+  }, "-")));
+};
+ReadOnlyView.displayName = 'PisellSingleSelectReadOnlyView';
+export default ReadOnlyView;

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

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

package/es/components/pisellSingleSelect/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellSingleSelect 组件导出
+ */
+
+export { default as PisellSingleSelect } from "./PisellSingleSelect";
+
+// 公共类型从 types 中重新导出，方便使用

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

@@ -0,0 +1,92 @@
+import type { BaseSelectProps, SelectOption } from '@pisell/utils';
+/**
+ * PisellSingleSelect 组件 Props 类型定义
+ *
+ * 继承 BaseSelectProps，添加单选特有的配置
+ * @template T 选项值的类型，默认为 string | number
+ */
+export interface PisellSingleSelectProps<T = string | number> extends BaseSelectProps<T> {
+    /**
+     * 受控模式：当前选中值
+     */
+    value?: T | null;
+    /**
+     * 非受控模式：默认选中值
+     */
+    defaultValue?: T;
+    /**
+     * 值变化回调
+     * @param value 新的选中值
+     * @param option 选中的选项对象（如果值为 null 则 option 也为 null）
+     */
+    onChange?: (value: T | null, option: SelectOption<T> | null) => void;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 是否必填
+     */
+    'aria-required'?: boolean;
+    /**
+     * ARIA 是否无效
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * ARIA 描述关联 ID
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * PisellSingleSelect 组件 Ref 方法
+ * @template T 选项值的类型
+ */
+export interface SingleSelectRef<T = string | number> {
+    /**
+     * 聚焦到组件
+     */
+    focus: () => void;
+    /**
+     * 失焦
+     */
+    blur: () => void;
+    /**
+     * 获取当前选中值
+     */
+    getValue: () => T | null;
+    /**
+     * 设置选中值
+     */
+    setValue: (value: T | null) => void;
+    /**
+     * 清空选中值
+     */
+    clearValue: () => void;
+}
+/**
+ * EditView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface EditViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+    /**
+     * 内部状态管理对象（从 useSelectState Hook 传入）
+     */
+    state?: {
+        value: T | null | undefined;
+        setValue: (value: T | null) => void;
+        clearValue: () => void;
+    };
+}
+/**
+ * DisabledView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface DisabledViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+}
+/**
+ * ReadOnlyView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface ReadOnlyViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+}
+export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from '@pisell/utils';

package/es/components/pisellSingleSelect/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -4,6 +4,9 @@ export declare type MultiLanguageValue = {
     en: string;
     'zh-CN': string;
     'zh-HK': string;
+    'ja': string;
+    'pt': string;
+    original: string;
 };
 export interface EditableConfig {
     /** 是否禁用编辑 */

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

@@ -0,0 +1,197 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import { parseTimeRange, getDayjsLocale, getRelativeDay } from "./utils";
+import { TimeRangeBlock, DateBlock, WeekdayBlock, DurationBlock } from "./components";
+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 var PisellTimeRangeDisplay = function PisellTimeRangeDisplay(props) {
+  var _durationFormat$showS;
+  var startAt = props.startAt,
+    endAt = props.endAt,
+    _props$textAlign = props.textAlign,
+    textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
+    fields = props.fields,
+    _props$showDateForSam = props.showDateForSameDay,
+    showDateForSameDay = _props$showDateForSam === void 0 ? true : _props$showDateForSam,
+    timeFormat = props.timeFormat,
+    dateFormat = props.dateFormat,
+    weekdayFormat = props.weekdayFormat,
+    durationFormat = props.durationFormat,
+    containerStyle = props.containerStyle,
+    timeStyle = props.timeStyle,
+    dateStyle = props.dateStyle,
+    weekdayStyle = props.weekdayStyle,
+    durationStyle = props.durationStyle,
+    localeProp = props.locale,
+    className = props.className,
+    style = props.style,
+    onClick = props.onClick;
+  var effectiveLocale = useMemo(function () {
+    return localeProp !== null && localeProp !== void 0 ? localeProp : getDayjsLocale();
+  }, [localeProp]);
+  var _useMemo = useMemo(function () {
+      return parseTimeRange(startAt, endAt, effectiveLocale);
+    }, [startAt, endAt, effectiveLocale]),
+    start = _useMemo.start,
+    end = _useMemo.end,
+    isSameDay = _useMemo.isSameDay;
+  var durationMs = useMemo(function () {
+    return end.diff(start);
+  }, [start, end]);
+
+  // 换行顺序（右先换）：先持续时间 → 结束时间（跨天）→ 开始/结束的时间与日期 → 星期；故左到右为 星期, 日期, 时间, 持续时间
+  var _ref = fields || {},
+    _ref$showTimeRange = _ref.showTimeRange,
+    showTimeRange = _ref$showTimeRange === void 0 ? true : _ref$showTimeRange,
+    _ref$showDate = _ref.showDate,
+    showDate = _ref$showDate === void 0 ? true : _ref$showDate,
+    _ref$showWeekday = _ref.showWeekday,
+    showWeekday = _ref$showWeekday === void 0 ? true : _ref$showWeekday,
+    _ref$showDuration = _ref.showDuration,
+    showDuration = _ref$showDuration === void 0 ? true : _ref$showDuration,
+    _ref$fieldOrder = _ref.fieldOrder,
+    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;
+
+  // 默认不展示相对日（今天/昨天/明天），可通过 dateFormat.showRelativeDay: true 开启
+  var effectiveDateFormat = useMemo(function () {
+    return _objectSpread({
+      showRelativeDay: false
+    }, dateFormat);
+  }, [dateFormat]);
+
+  // 与 DateTimeDisplay 一致：日期与星期一体，若日期以相对日展示则不展示星期
+  var referenceDate = dayjs();
+  var relativeDay = effectiveDateFormat !== null && effectiveDateFormat !== void 0 && effectiveDateFormat.showRelativeDay ? getRelativeDay(start, referenceDate) : null;
+  var hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
+
+  // 换行后每行对齐方式与 textAlign 一致（Figma：换行后每行居中）
+  var justifyContent = textAlign === 'right' ? 'flex-end' : textAlign === 'left' ? 'flex-start' : 'center';
+  var containerInlineStyle = _objectSpread({
+    background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
+    borderRadius: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.borderRadius,
+    border: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.border,
+    boxShadow: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow,
+    padding: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.padding,
+    gap: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.gap,
+    textAlign: textAlign,
+    justifyContent: justifyContent
+  }, style);
+  var renderField = function renderField(fieldType) {
+    switch (fieldType) {
+      case 'time':
+        return showTimeRange ? /*#__PURE__*/React.createElement(TimeRangeBlock, {
+          key: "time",
+          start: start,
+          end: end,
+          isSameDay: isSameDay,
+          timeFormat: timeFormat,
+          dateFormat: effectiveDateFormat,
+          weekdayFormat: weekdayFormat,
+          referenceDate: dayjs(),
+          style: timeStyle
+        }) : null;
+      case 'date':
+        if (!showDate) return null;
+        if (!isSameDay) return null; // 跨天时时间块已含起止日期，不再单独展示
+        if (!showDateForSameDay) return null;
+        return /*#__PURE__*/React.createElement(DateBlock, {
+          key: "date",
+          date: start,
+          format: effectiveDateFormat,
+          referenceDate: dayjs(),
+          style: dateStyle
+        });
+      case 'weekday':
+        if (!showWeekday) return null;
+        if (!isSameDay) return null; // 跨天时时间块已含起止星期，不再单独展示
+        if (!showDateForSameDay) return null;
+        if (hideWeekdayWhenDateRelative) return null;
+        return /*#__PURE__*/React.createElement(WeekdayBlock, {
+          key: "weekday",
+          weekday: start,
+          format: weekdayFormat,
+          style: weekdayStyle
+        });
+      case 'duration':
+        return showDuration ? /*#__PURE__*/React.createElement(DurationBlock, {
+          key: "duration",
+          durationMs: durationMs,
+          showSeconds: showSeconds,
+          locale: effectiveLocale,
+          style: durationStyle
+        }) : null;
+      default:
+        return null;
+    }
+  };
+  var items = [];
+  fieldOrder.forEach(function (fieldType) {
+    var node = renderField(fieldType);
+    if (node != null) {
+      items.push({
+        type: fieldType,
+        node: node
+      });
+    }
+  });
+  if (items.length === 0) {
+    return null;
+  }
+
+  // 时间/日期与持续时长之间用居中圆点 · 分隔
+  var renderedWithSeparator = items.flatMap(function (_ref2, index) {
+    var type = _ref2.type,
+      node = _ref2.node;
+    var needDotBefore = type === 'duration' && index > 0;
+    var needDotAfter = type === 'duration' && index < items.length - 1;
+    var sep = /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-range-display-sep",
+      "aria-hidden": true
+    }, " \xB7 ");
+    var el = /*#__PURE__*/React.cloneElement(node, {
+      key: type
+    });
+    if (needDotBefore) return [sep, el];
+    if (needDotAfter) return [el, sep];
+    return [el];
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-time-range-display ".concat(className || '').trim(),
+    style: containerInlineStyle,
+    onClick: onClick
+  }, renderedWithSeparator);
+};
+export default /*#__PURE__*/React.memo(PisellTimeRangeDisplay);

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.less

@@ -0,0 +1,49 @@
+/**
+ * Time Range Display 样式
+ * 无 layout 配置：一行放不下时按块换行，块内不换行，换行后每行居中
+ */
+.pisell-time-range-display {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0 4px;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.88);
+
+  .pisell-time-range-display-time,
+  .pisell-time-range-display-date,
+  .pisell-time-range-display-weekday,
+  .pisell-time-range-display-duration {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .pisell-time-range-display-sep {
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0 2px;
+    user-select: none;
+  }
+
+  // 各块内不换行，换行时以块为单位
+  &-time,
+  &-date,
+  &-weekday,
+  &-duration {
+    //display: inline-block;
+    //white-space: nowrap;
+  }
+
+  &-sep {
+    //display: inline-block;
+    //white-space: nowrap;
+  }
+
+  // 同天小宽度：「 - 结束时间」不拆开
+  &-time-end-wrap {
+    //white-space: nowrap;
+  }
+}

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;