@pisell/materials 6.3.25 → 6.3.27

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.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/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.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/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.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/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.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/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.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/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.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/index.js

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

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/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';
+}