@pisell/materials 3.3.82 → 3.3.84

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.js

@@ -0,0 +1,209 @@
+import { PisellTimeRangeDisplay } from "./PisellTimeRangeDisplay";
+
+/**
+ * PisellTimeRangeDisplay 组件 Storybook
+ * 用于时间区间 + 持续时长的展示（同一天 / 跨天）
+ */
+var meta = {
+  title: 'General/PisellTimeRangeDisplay',
+  component: PisellTimeRangeDisplay,
+  tags: ['autodocs'],
+  argTypes: {
+    textAlign: {
+      control: 'radio',
+      options: ['left', 'center', 'right'],
+      description: '文本对齐'
+    },
+    showDateForSameDay: {
+      control: 'boolean',
+      description: '同一天时是否显示日期与星期'
+    },
+    locale: {
+      control: 'select',
+      options: ['zh-cn', 'en'],
+      description: '语言'
+    }
+  }
+};
+export default meta;
+/**
+ * 默认：同一天时间区间 + 持续时长
+ */
+export var Default = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00'
+  }
+};
+
+/**
+ * 同一天 + 显示日期与星期
+ */
+export var SameDayWithDate = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true
+  }
+};
+
+/**
+ * 跨天时间区间
+ */
+export var CrossDay = {
+  args: {
+    startAt: '2026-02-04 18:00',
+    endAt: '2026-02-05 10:00'
+  }
+};
+
+/**
+ * 跨年
+ */
+export var CrossYear = {
+  args: {
+    startAt: '2025-12-31 22:00',
+    endAt: '2026-01-01 02:00'
+  }
+};
+
+/**
+ * 持续时间在中间（默认 fieldOrder）
+ */
+export var DurationInMiddle = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true,
+    fields: {
+      fieldOrder: ['time', 'duration', 'date', 'weekday']
+    }
+  }
+};
+
+/**
+ * 持续时长在前
+ */
+export var DurationFirst = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    fields: {
+      fieldOrder: ['duration', 'time']
+    }
+  }
+};
+
+/**
+ * 持续时长显示秒
+ */
+export var DurationWithSeconds = {
+  args: {
+    startAt: '2026-02-04 09:00:00',
+    endAt: '2026-02-04 09:30:45',
+    durationFormat: {
+      showSeconds: true
+    }
+  }
+};
+
+/**
+ * 仅时间区间 + 持续时长（不显示日期星期）
+ */
+export var TimeAndDurationOnly = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    fields: {
+      showTimeRange: true,
+      showDate: false,
+      showWeekday: false,
+      showDuration: true
+    }
+  }
+};
+
+/**
+ * 12 小时制
+ */
+export var Time12Hour = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    timeFormat: {
+      use12Hour: true
+    }
+  }
+};
+
+/**
+ * 中文（日期 + 持续时长「天/时/分/秒」i18n）
+ */
+export var LocaleZhCN = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true,
+    locale: 'zh-cn',
+    dateFormat: {
+      showChineseUnit: true,
+      showYear: true
+    }
+  }
+};
+
+/**
+ * 英文（日期 + 持续时长 d/h/m/s）
+ */
+export var LocaleEn = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true,
+    locale: 'en',
+    dateFormat: {
+      order: 'MDY',
+      showYear: true
+    }
+  }
+};
+
+/**
+ * 小宽度：容器较窄时按块换行
+ */
+export var NarrowWidth = {
+  args: {
+    startAt: '2026-03-21 10:15',
+    endAt: '2026-03-21 10:45',
+    showDateForSameDay: true,
+    dateFormat: {
+      order: 'MDY',
+      showYear: true
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: 320,
+        border: '1px dashed #ccc',
+        padding: 8
+      }
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+
+/**
+ * 自定义容器样式
+ */
+export var CustomContainerStyle = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    containerStyle: {
+      background: '#f5f5f5',
+      borderRadius: 8,
+      padding: 16,
+      gap: 8
+    }
+  }
+};

package/es/components/pisellTimeRangeDisplay/components/DateBlock.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { formatDate, getRelativeDay, getRelativeDayLabel } from "../utils";
+/**
+ * 日期展示块（复用 PisellDateTimeDisplay 的 formatDate 与相对日逻辑）
+ */
+export var DateBlock = function DateBlock(_ref) {
+  var _labels$relativeDay;
+  var date = _ref.date,
+    format = _ref.format,
+    _ref$referenceDate = _ref.referenceDate,
+    referenceDate = _ref$referenceDate === void 0 ? dayjs() : _ref$referenceDate,
+    style = _ref.style,
+    className = _ref.className;
+  var labels = format === null || format === void 0 ? void 0 : format.relativeDayLabels;
+  var relativeDay = format !== null && format !== void 0 && format.showRelativeDay ? getRelativeDay(date, referenceDate) : null;
+  var formattedDate = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, date.locale()) : formatDate(date, format);
+  if (!formattedDate) return null;
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-range-display-date ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formattedDate);
+};
+export default DateBlock;

package/es/components/pisellTimeRangeDisplay/components/DurationBlock.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { formatDuration } from "../utils";
+/**
+ * 持续时长展示块（d h m s 或 天/时/分/秒，按 locale i18n）
+ */
+export var DurationBlock = function DurationBlock(_ref) {
+  var durationMs = _ref.durationMs,
+    _ref$showSeconds = _ref.showSeconds,
+    showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
+    locale = _ref.locale,
+    style = _ref.style,
+    className = _ref.className;
+  var formatted = formatDuration(durationMs, showSeconds, locale);
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-range-display-duration ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formatted);
+};
+export default DurationBlock;

package/es/components/pisellTimeRangeDisplay/components/TimeRangeBlock.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { formatTime, getDatePartDisplay } from "../utils";
+/**
+ * 时间区间展示块
+ * - 同一天：HH:mm-HH:mm
+ * - 跨天：起止完整日期时间；若某端为相对日（今天/昨天/明天）则只显示「时间 相对日」，不显示星期+日期
+ */
+export var TimeRangeBlock = function TimeRangeBlock(_ref) {
+  var start = _ref.start,
+    end = _ref.end,
+    isSameDay = _ref.isSameDay,
+    timeFormat = _ref.timeFormat,
+    dateFormat = _ref.dateFormat,
+    weekdayFormat = _ref.weekdayFormat,
+    _ref$referenceDate = _ref.referenceDate,
+    referenceDate = _ref$referenceDate === void 0 ? dayjs() : _ref$referenceDate,
+    style = _ref.style,
+    className = _ref.className;
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  if (isSameDay) {
+    var startStr = formatTime(start, timeFormat);
+    var endStr = formatTime(end, timeFormat);
+    // 小宽度支持：开始时间可单独一行，「 - 结束时间」整段折行
+    return /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-range-display-time ".concat(className || '').trim(),
+      style: inlineStyle
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-range-display-time-start"
+    }, startStr), /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-range-display-time-end-wrap"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-range-display-time-sep",
+      "aria-hidden": true
+    }, " - "), /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-range-display-time-end"
+    }, endStr)));
+  }
+
+  // 跨天：时间 + 日期部分；日期部分由 datetime 内置 getDatePartDisplay 统一处理（相对日 or 星期+日期）
+  var isCrossYear = start.year() !== end.year();
+  var dateFormatOverride = {
+    order: 'DMY',
+    shortMonth: true,
+    showYear: isCrossYear,
+    showMonth: true,
+    showDay: true,
+    useCommaBeforeYear: false
+  };
+  var startTimeStr = formatTime(start, timeFormat);
+  var endTimeStr = formatTime(end, timeFormat);
+  var startDatePart = getDatePartDisplay({
+    date: start,
+    dateFormat: dateFormat,
+    weekdayFormat: weekdayFormat,
+    referenceDate: referenceDate,
+    dateFormatOverride: dateFormatOverride
+  });
+  var endDatePart = getDatePartDisplay({
+    date: end,
+    dateFormat: dateFormat,
+    weekdayFormat: weekdayFormat,
+    referenceDate: referenceDate,
+    dateFormatOverride: dateFormatOverride
+  });
+  var startPart = "".concat(startTimeStr, " ").concat(startDatePart);
+  var endPart = "".concat(endTimeStr, " ").concat(endDatePart);
+
+  // 跨天拆成 2 个块，便于按块换行：块1 起止时间+日期，块2 「 - 」+ 结束时间+日期
+  var timeClass = 'pisell-time-range-display-time pisell-time-range-display-time-cross';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    key: "time-start",
+    className: "".concat(timeClass, " ").concat(className || '').trim(),
+    style: inlineStyle
+  }, startPart), /*#__PURE__*/React.createElement("span", {
+    key: "time-end",
+    className: "".concat(timeClass, " ").concat(className || '').trim(),
+    style: inlineStyle
+  }, ' - ', endPart));
+};
+export default TimeRangeBlock;

package/es/components/pisellTimeRangeDisplay/components/WeekdayBlock.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { formatWeekday } from "../utils";
+/**
+ * 星期展示块（复用 PisellDateTimeDisplay 的 formatWeekday）
+ */
+export var WeekdayBlock = function WeekdayBlock(_ref) {
+  var weekday = _ref.weekday,
+    format = _ref.format,
+    style = _ref.style,
+    className = _ref.className;
+  var formattedWeekday = formatWeekday(weekday, format);
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-range-display-weekday ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formattedWeekday);
+};
+export default WeekdayBlock;

package/es/components/pisellTimeRangeDisplay/components/index.js

@@ -0,0 +1,4 @@
+export { TimeRangeBlock } from "./TimeRangeBlock";
+export { DateBlock } from "./DateBlock";
+export { WeekdayBlock } from "./WeekdayBlock";
+export { DurationBlock } from "./DurationBlock";

package/es/components/pisellTimeRangeDisplay/index.js

@@ -0,0 +1 @@
+export { PisellTimeRangeDisplay, default } from "./PisellTimeRangeDisplay";

package/es/components/pisellTimeRangeDisplay/types.js

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

package/es/components/pisellTimeRangeDisplay/utils/formatDuration.js

@@ -0,0 +1,53 @@
+/**
+ * 判断 locale 是否为中文（用于持续时长单位 i18n）
+ */
+function isChineseLocale(locale) {
+  if (!locale) return false;
+  var n = locale.toLowerCase();
+  return n.startsWith('zh');
+}
+
+/**
+ * 将毫秒数格式化为持续时间字符串（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 function formatDuration(ms) {
+  var showSeconds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var locale = arguments.length > 2 ? arguments[2] : undefined;
+  if (!Number.isFinite(ms) || ms < 0) {
+    return isChineseLocale(locale) ? '0分钟' : '0m';
+  }
+  var d = Math.floor(ms / 86400000);
+  var h = Math.floor(ms % 86400000 / 3600000);
+  var m = Math.floor(ms % 3600000 / 60000);
+  var s = Math.floor(ms % 60000 / 1000);
+  var useZh = isChineseLocale(locale);
+  var units = useZh ? {
+    d: '天',
+    h: '时',
+    m: '分钟',
+    s: '秒'
+  } : {
+    d: 'd',
+    h: 'h',
+    m: 'm',
+    s: 's'
+  };
+  var parts = [];
+  if (d > 0) parts.push("".concat(d).concat(units.d));
+  if (h > 0) parts.push("".concat(h).concat(units.h));
+  if (m > 0) parts.push("".concat(m).concat(units.m));
+  if (showSeconds || parts.length === 0 && s >= 0) {
+    parts.push("".concat(s).concat(units.s));
+  }
+  return parts.length > 0 ? parts.join('') : useZh ? '0分钟' : '0m';
+}

package/es/components/pisellTimeRangeDisplay/utils/index.js

@@ -0,0 +1,5 @@
+export { parseTimeRange } from "./parseTimeRange";
+export { formatDuration } from "./formatDuration";
+
+// 复用 pisellDateTimeDisplay 的格式化、相对日与 locale 工具
+export { formatTime, formatDate, formatWeekday, getDayjsLocale, getRelativeDay, getRelativeDayLabel, getDatePartDisplay } from "../../pisellDateTimeDisplay/utils";

package/es/components/pisellTimeRangeDisplay/utils/parseTimeRange.js

@@ -0,0 +1,27 @@
+import dayjs from 'dayjs';
+/**
+ * 解析 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 function parseTimeRange(startAt, endAt, locale) {
+  var start = dayjs(startAt);
+  var end = dayjs(endAt);
+  if (locale) {
+    start = start.locale(locale);
+    end = end.locale(locale);
+  }
+  var isSameDay = start.isSame(end, 'day');
+  return {
+    start: start,
+    end: end,
+    isSameDay: isSameDay
+  };
+}

package/es/components/pisellUrl/PisellUrl.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PisellUrlProps } from './types';
+import './PisellUrl.less';
+/**
+ * PisellUrl URL 链接组件
+ *
+ * URL 链接输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供 URL 格式校验、协议自动补全、
+ * 链接跳转和协议/路径显示控制功能。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态（URL 输入）
+ * <PisellUrl
+ *   placeholder="请输入网址"
+ *   required
+ * />
+ *
+ * @example
+ * // 只读态（可跳转）
+ * <PisellUrl
+ *   mode="read"
+ *   value="https://www.example.com"
+ *   enableLinkClick
+ * />
+ *
+ * @example
+ * // 协议自动补全
+ * <PisellUrl
+ *   autoCompleteProtocol
+ *   defaultProtocol="https://"
+ * />
+ */
+export declare const PisellUrl: React.FC<PisellUrlProps>;
+declare const _default: React.NamedExoticComponent<PisellUrlProps>;
+export default _default;

package/es/components/pisellUrl/PisellUrl.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { getDisplayState } from '@pisell/utils';
+import ReadOnlyView from "./components/ReadOnlyView";
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import "./PisellUrl.less";
+
+/**
+ * PisellUrl URL 链接组件
+ * 
+ * URL 链接输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供 URL 格式校验、协议自动补全、
+ * 链接跳转和协议/路径显示控制功能。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 编辑态（URL 输入）
+ * <PisellUrl 
+ *   placeholder="请输入网址"
+ *   required
+ * />
+ * 
+ * @example
+ * // 只读态（可跳转）
+ * <PisellUrl 
+ *   mode="read"
+ *   value="https://www.example.com"
+ *   enableLinkClick
+ * />
+ * 
+ * @example
+ * // 协议自动补全
+ * <PisellUrl 
+ *   autoCompleteProtocol
+ *   defaultProtocol="https://"
+ * />
+ */
+export var PisellUrl = function PisellUrl(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+  // 计算显示状态
+  var displayState = getDisplayState(mode, disabled);
+
+  // 根据状态渲染对应子组件
+  switch (displayState) {
+    case 'read':
+      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+    case 'edit':
+      return /*#__PURE__*/React.createElement(EditView, props);
+    case 'disabled':
+      return /*#__PURE__*/React.createElement(DisabledView, props);
+    default:
+      return null;
+  }
+};
+
+// 性能优化：使用 memo 避免不必要的重渲染
+export default /*#__PURE__*/React.memo(PisellUrl, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.autoCompleteProtocol === nextProps.autoCompleteProtocol;
+});

package/es/components/pisellUrl/PisellUrl.less

@@ -0,0 +1,46 @@
+/**
+ * PisellUrl 组件样式
+ */
+
+.pisell-url {
+  &-edit {
+    width: 100%;
+
+    // 错误提示样式
+    &-error {
+      margin-top: 4px;
+      font-size: 12px;
+      color: #ff4d4f;
+      line-height: 1.5;
+    }
+  }
+
+  &-read {
+    display: inline-flex;
+    align-items: center;
+
+    // 链接样式
+    .pisell-lowcode-typography-link {
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    // 链接图标
+    .anticon-link {
+      font-size: 14px;
+    }
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+
+    * {
+      cursor: not-allowed !important;
+    }
+  }
+}