@pisell/materials 6.9.4 → 6.9.5

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

@@ -0,0 +1,298 @@
+import type { CSSProperties } from 'react';
+import type { Dayjs } from 'dayjs';
+/**
+ * 布局方向
+ * - horizontal: 水平布局（默认）- 时间在上，日期+星期在下
+ * - vertical: 垂直布局 - 时间、日期、星期分别独立成行
+ * - inline: 单行布局 - 所有信息横向排列，用分隔符连接
+ */
+export declare type LayoutDirection = 'horizontal' | 'vertical' | 'inline';
+/**
+ * 日期顺序
+ * - YMD: 年-月-日（如：2026-03-21）
+ * - MDY: 月-日-年（如：Mar 21, 2026）
+ * - DMY: 日-月-年（如：21 Mar 2026）
+ */
+export declare type DateOrder = 'YMD' | 'MDY' | 'DMY';
+/**
+ * 对齐方式
+ */
+export declare type TextAlign = 'left' | 'center' | 'right';
+/**
+ * 字段类型
+ */
+export declare type FieldType = 'time' | 'date' | 'weekday';
+/**
+ * 时间格式配置
+ */
+export interface TimeFormatConfig {
+    /**
+     * 是否使用12小时制
+     * @default false
+     * @example true -> "1:45 PM" | false -> "13:45"
+     */
+    use12Hour?: boolean;
+    /**
+     * 是否显示秒
+     * @default false
+     * @example true -> "13:45:30" | false -> "13:45"
+     */
+    showSeconds?: boolean;
+    /**
+     * 小时是否补零
+     * @default false
+     * @example true -> "01:45 PM" | false -> "1:45 PM"
+     */
+    padHour?: boolean;
+    /**
+     * 是否只显示小时
+     * @default false
+     * @example true -> "13" | false -> "13:45"
+     */
+    onlyShowHour?: boolean;
+}
+/**
+ * 日期格式配置
+ */
+export interface DateFormatConfig {
+    /**
+     * 日期顺序
+     * @default 'YMD'
+     */
+    order?: DateOrder;
+    /**
+     * 英文月份是否简写
+     * @default true
+     * @example true -> "Mar" | false -> "March"
+     */
+    shortMonth?: boolean;
+    /**
+     * 英文月份是否数字展示
+     * @default false
+     * @example true -> "03" | false -> "Mar"
+     */
+    numericMonth?: boolean;
+    /**
+     * 中文是否显示"年月日"汉字
+     * @default false
+     * @example true -> "2026年3月21日" | false -> "2026-03-21"
+     */
+    showChineseUnit?: boolean;
+    /**
+     * 分隔符
+     * @default '-'
+     * @example '-' -> "2026-03-21" | '/' -> "2026/03/21"
+     */
+    separator?: string;
+    /**
+     * 是否显示年
+     * @default false
+     */
+    showYear?: boolean;
+    /**
+     * 是否显示月
+     * @default true
+     */
+    showMonth?: boolean;
+    /**
+     * 是否显示日
+     * @default true
+     */
+    showDay?: boolean;
+}
+/**
+ * 星期格式配置
+ */
+export interface WeekdayFormatConfig {
+    /**
+     * 是否完整展示
+     * @default false
+     * @example true -> "Saturday" / "星期六" | false -> "Sat" / "周六"
+     */
+    full?: boolean;
+    /**
+     * 是否单字母展示
+     * @default false
+     * @example true -> "S" / "六" | false -> "Sat" / "周六"
+     */
+    singleLetter?: boolean;
+}
+/**
+ * 字段配置
+ */
+export interface FieldConfig {
+    /**
+     * 是否显示时间字段
+     * @default true
+     */
+    showTime?: boolean;
+    /**
+     * 是否显示日期字段
+     * @default true
+     */
+    showDate?: boolean;
+    /**
+     * 是否显示星期字段
+     * @default true
+     */
+    showWeekday?: boolean;
+    /**
+     * 字段顺序
+     * @default ['time', 'date', 'weekday']
+     */
+    fieldOrder?: FieldType[];
+}
+/**
+ * 文本样式配置
+ */
+export interface TextStyleConfig {
+    /**
+     * 字体大小
+     * @example 14 | '14px' | '1rem'
+     */
+    fontSize?: number | string;
+    /**
+     * 字体粗细
+     * @example 400 | '400' | 'bold'
+     */
+    fontWeight?: number | string;
+    /**
+     * 字体颜色
+     * @example '#000' | 'rgba(0, 0, 0, 0.85)'
+     */
+    color?: string;
+    /**
+     * 行高
+     * @example 1.5 | '1.5' | '24px'
+     */
+    lineHeight?: number | string;
+}
+/**
+ * 容器样式配置
+ */
+export interface ContainerStyleConfig {
+    /**
+     * 背景色
+     * @example '#fff' | 'transparent'
+     */
+    background?: string;
+    /**
+     * 圆角
+     * @example 8 | '8px'
+     */
+    borderRadius?: number | string;
+    /**
+     * 边框
+     * @example '1px solid #ddd'
+     */
+    border?: string;
+    /**
+     * 阴影
+     * @example '0 2px 8px rgba(0, 0, 0, 0.1)'
+     */
+    boxShadow?: string;
+    /**
+     * 内边距
+     * @example 16 | '16px' | '16px 24px'
+     */
+    padding?: number | string;
+    /**
+     * 间距（子元素之间的间距）
+     * @example 8 | '8px'
+     */
+    gap?: number | string;
+}
+/**
+ * PisellDateTimeDisplay 组件 Props
+ */
+export interface PisellDateTimeDisplayProps {
+    /**
+     * 布局方向
+     * @default 'horizontal'
+     */
+    layout?: LayoutDirection;
+    /**
+     * 文本对齐方式
+     * @default 'left'
+     */
+    textAlign?: TextAlign;
+    /**
+     * 字段显示配置
+     */
+    fields?: FieldConfig;
+    /**
+     * 时间格式配置
+     */
+    timeFormat?: TimeFormatConfig;
+    /**
+     * 日期格式配置
+     */
+    dateFormat?: DateFormatConfig;
+    /**
+     * 星期格式配置
+     */
+    weekdayFormat?: WeekdayFormatConfig;
+    /**
+     * 自定义格式化字符串（优先级最高，类似 dayjs().format()）
+     * @example 'YYYY-MM-DD HH:mm:ss' | 'MM/DD/YYYY'
+     * @description 当设置此属性时，其他格式化配置将被忽略
+     */
+    customFormat?: string;
+    /**
+     * 单行模式分隔符
+     * @default ' · '
+     * @example ' | ' | ' - '
+     */
+    inlineSeparator?: string;
+    /**
+     * 容器样式
+     */
+    containerStyle?: ContainerStyleConfig;
+    /**
+     * 时间文本样式
+     */
+    timeStyle?: TextStyleConfig;
+    /**
+     * 日期文本样式
+     */
+    dateStyle?: TextStyleConfig;
+    /**
+     * 星期文本样式
+     */
+    weekdayStyle?: TextStyleConfig;
+    /**
+     * 自定义刷新间隔（毫秒）
+     * @description 不设置则根据 showSeconds 自动判断（显示秒=1000ms，否则=60000ms）
+     * @example 1000 | 5000 | 60000
+     */
+    refreshInterval?: number;
+    /**
+     * 是否禁用自动刷新
+     * @default false
+     * @description 设置为 true 时，组件只显示初始时间，不会自动更新
+     */
+    disableAutoRefresh?: boolean;
+    /**
+     * dayjs locale
+     * @default 使用系统语言
+     * @example 'zh-cn' | 'en' | 'ja'
+     */
+    locale?: string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 时间更新回调
+     * @param currentTime 当前时间（Dayjs 对象）
+     */
+    onTimeUpdate?: (currentTime: Dayjs) => void;
+    /**
+     * 点击回调
+     */
+    onClick?: () => void;
+}

package/es/components/pisellDateTimeDisplay/types.js

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

package/es/components/pisellDateTimeDisplay/utils/formatDate.d.ts

@@ -0,0 +1,21 @@
+import type { Dayjs } from 'dayjs';
+import type { DateFormatConfig } from '../types';
+/**
+ * 格式化日期
+ * @param date dayjs 日期对象
+ * @param config 日期格式配置
+ * @returns 格式化后的日期字符串
+ *
+ * @example
+ * // 英文环境
+ * formatDate(dayjs(), { order: 'YMD', shortMonth: true, showYear: true })
+ * // => "2026-Mar-21"
+ *
+ * // 中文环境
+ * formatDate(dayjs(), { order: 'YMD', showChineseUnit: true, showYear: true })
+ * // => "2026年3月21日"
+ *
+ * formatDate(dayjs(), { order: 'MDY', shortMonth: false, showYear: true })
+ * // => "March 21, 2026"
+ */
+export declare function formatDate(date: Dayjs, config?: DateFormatConfig): string;

package/es/components/pisellDateTimeDisplay/utils/formatDate.js

@@ -0,0 +1,127 @@
+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; }
+/**
+ * 格式化日期
+ * @param date dayjs 日期对象
+ * @param config 日期格式配置
+ * @returns 格式化后的日期字符串
+ *
+ * @example
+ * // 英文环境
+ * formatDate(dayjs(), { order: 'YMD', shortMonth: true, showYear: true })
+ * // => "2026-Mar-21"
+ *
+ * // 中文环境
+ * formatDate(dayjs(), { order: 'YMD', showChineseUnit: true, showYear: true })
+ * // => "2026年3月21日"
+ *
+ * formatDate(dayjs(), { order: 'MDY', shortMonth: false, showYear: true })
+ * // => "March 21, 2026"
+ */
+export function formatDate(date, config) {
+  var _ref = config || {},
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 'YMD' : _ref$order,
+    _ref$shortMonth = _ref.shortMonth,
+    shortMonth = _ref$shortMonth === void 0 ? true : _ref$shortMonth,
+    _ref$numericMonth = _ref.numericMonth,
+    numericMonth = _ref$numericMonth === void 0 ? false : _ref$numericMonth,
+    _ref$showChineseUnit = _ref.showChineseUnit,
+    showChineseUnit = _ref$showChineseUnit === void 0 ? false : _ref$showChineseUnit,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? '-' : _ref$separator,
+    _ref$showYear = _ref.showYear,
+    showYear = _ref$showYear === void 0 ? false : _ref$showYear,
+    _ref$showMonth = _ref.showMonth,
+    showMonth = _ref$showMonth === void 0 ? true : _ref$showMonth,
+    _ref$showDay = _ref.showDay,
+    showDay = _ref$showDay === void 0 ? true : _ref$showDay;
+
+  // 判断是否为中文环境
+  var locale = date.locale();
+  var isChinese = locale === 'zh-cn' || locale === 'zh';
+
+  // 构建格式化字符串的各部分
+  var parts = [];
+
+  // 年份格式
+  var yearFormat = isChinese && showChineseUnit ? 'YYYY年' : 'YYYY';
+
+  // 月份格式
+  var monthFormat = '';
+  if (numericMonth) {
+    // 数字月份
+    monthFormat = isChinese && showChineseUnit ? 'M月' : 'MM';
+  } else {
+    // 文本月份（英文）或数字月份（中文）
+    if (isChinese) {
+      monthFormat = showChineseUnit ? 'M月' : 'M';
+    } else {
+      monthFormat = shortMonth ? 'MMM' : 'MMMM';
+    }
+  }
+
+  // 日期格式
+  var dayFormat = isChinese && showChineseUnit ? 'D日' : 'DD';
+
+  // 根据日期顺序组装
+  switch (order) {
+    case 'YMD':
+      if (showYear) parts.push(yearFormat);
+      if (showMonth) parts.push(monthFormat);
+      if (showDay) parts.push(dayFormat);
+      break;
+    case 'MDY':
+      if (showMonth) parts.push(monthFormat);
+      if (showDay) parts.push(dayFormat);
+      if (showYear) parts.push(yearFormat);
+      break;
+    case 'DMY':
+      if (showDay) parts.push(dayFormat);
+      if (showMonth) parts.push(monthFormat);
+      if (showYear) parts.push(yearFormat);
+      break;
+  }
+
+  // 如果没有要显示的部分，返回空字符串
+  if (parts.length === 0) {
+    return '';
+  }
+
+  // 中文且有单位时，直接连接（不使用分隔符）
+  if (isChinese && showChineseUnit) {
+    return date.format(parts.join(''));
+  }
+
+  // MDY 格式特殊处理（英文习惯）
+  if (order === 'MDY' && !isChinese) {
+    // 月日之间用空格，日年之间用逗号+空格
+    var formatted = date.format(parts.join(' '));
+    // 如果有年份，在日和年之间加逗号
+    if (showYear && showMonth && showDay) {
+      // 例如: "Mar 21 2026" -> "Mar 21, 2026"
+      var _formatted$split = formatted.split(' '),
+        _formatted$split2 = _slicedToArray(_formatted$split, 3),
+        month = _formatted$split2[0],
+        day = _formatted$split2[1],
+        year = _formatted$split2[2];
+      return "".concat(month, " ").concat(day, ", ").concat(year);
+    }
+    if (showYear && showDay && !showMonth) {
+      // 例如: "21 2026" -> "21, 2026"
+      var _formatted$split3 = formatted.split(' '),
+        _formatted$split4 = _slicedToArray(_formatted$split3, 2),
+        _day = _formatted$split4[0],
+        _year = _formatted$split4[1];
+      return "".concat(_day, ", ").concat(_year);
+    }
+    return formatted;
+  }
+
+  // 其他情况使用分隔符
+  return date.format(parts.join(separator));
+}

package/es/components/pisellDateTimeDisplay/utils/formatTime.d.ts

@@ -0,0 +1,19 @@
+import type { Dayjs } from 'dayjs';
+import type { TimeFormatConfig } from '../types';
+/**
+ * 格式化时间
+ * @param time dayjs 时间对象
+ * @param config 时间格式配置
+ * @returns 格式化后的时间字符串
+ *
+ * @example
+ * formatTime(dayjs(), { use12Hour: false, showSeconds: false, padHour: false })
+ * // => "13:45"
+ *
+ * formatTime(dayjs(), { use12Hour: true, showSeconds: false, padHour: true })
+ * // => "01:45 PM"
+ *
+ * formatTime(dayjs(), { use12Hour: false, showSeconds: true, padHour: false })
+ * // => "13:45:30"
+ */
+export declare function formatTime(time: Dayjs, config?: TimeFormatConfig): string;

package/es/components/pisellDateTimeDisplay/utils/formatTime.js

@@ -0,0 +1,44 @@
+/**
+ * 格式化时间
+ * @param time dayjs 时间对象
+ * @param config 时间格式配置
+ * @returns 格式化后的时间字符串
+ *
+ * @example
+ * formatTime(dayjs(), { use12Hour: false, showSeconds: false, padHour: false })
+ * // => "13:45"
+ *
+ * formatTime(dayjs(), { use12Hour: true, showSeconds: false, padHour: true })
+ * // => "01:45 PM"
+ *
+ * formatTime(dayjs(), { use12Hour: false, showSeconds: true, padHour: false })
+ * // => "13:45:30"
+ */
+export function formatTime(time, config) {
+  var _ref = config || {},
+    _ref$use12Hour = _ref.use12Hour,
+    use12Hour = _ref$use12Hour === void 0 ? false : _ref$use12Hour,
+    _ref$showSeconds = _ref.showSeconds,
+    showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
+    _ref$padHour = _ref.padHour,
+    padHour = _ref$padHour === void 0 ? false : _ref$padHour,
+    _ref$onlyShowHour = _ref.onlyShowHour,
+    onlyShowHour = _ref$onlyShowHour === void 0 ? false : _ref$onlyShowHour;
+
+  // 只显示小时
+  if (onlyShowHour) {
+    return padHour ? time.format('HH') : time.format('H');
+  }
+
+  // 12小时制
+  if (use12Hour) {
+    var _hourFormat = padHour ? 'hh' : 'h';
+    var _timeFormat = showSeconds ? "".concat(_hourFormat, ":mm:ss A") : "".concat(_hourFormat, ":mm A");
+    return time.format(_timeFormat);
+  }
+
+  // 24小时制（默认）
+  var hourFormat = padHour ? 'HH' : 'H';
+  var timeFormat = showSeconds ? "".concat(hourFormat, ":mm:ss") : "".concat(hourFormat, ":mm");
+  return time.format(timeFormat);
+}

package/es/components/pisellDateTimeDisplay/utils/formatWeekday.d.ts

@@ -0,0 +1,30 @@
+import type { Dayjs } from 'dayjs';
+import type { WeekdayFormatConfig } from '../types';
+/**
+ * 格式化星期
+ * @param weekday dayjs 日期对象
+ * @param config 星期格式配置
+ * @returns 格式化后的星期字符串
+ *
+ * @example
+ * // 英文环境
+ * formatWeekday(dayjs(), { full: false, singleLetter: false })
+ * // => "Sat"
+ *
+ * formatWeekday(dayjs(), { full: true })
+ * // => "Saturday"
+ *
+ * formatWeekday(dayjs(), { singleLetter: true })
+ * // => "S"
+ *
+ * // 中文环境
+ * formatWeekday(dayjs(), { full: false, singleLetter: false })
+ * // => "周六"
+ *
+ * formatWeekday(dayjs(), { full: true })
+ * // => "星期六"
+ *
+ * formatWeekday(dayjs(), { singleLetter: true })
+ * // => "六"
+ */
+export declare function formatWeekday(weekday: Dayjs, config?: WeekdayFormatConfig): string;

package/es/components/pisellDateTimeDisplay/utils/formatWeekday.js

@@ -0,0 +1,61 @@
+/**
+ * 格式化星期
+ * @param weekday dayjs 日期对象
+ * @param config 星期格式配置
+ * @returns 格式化后的星期字符串
+ *
+ * @example
+ * // 英文环境
+ * formatWeekday(dayjs(), { full: false, singleLetter: false })
+ * // => "Sat"
+ *
+ * formatWeekday(dayjs(), { full: true })
+ * // => "Saturday"
+ *
+ * formatWeekday(dayjs(), { singleLetter: true })
+ * // => "S"
+ *
+ * // 中文环境
+ * formatWeekday(dayjs(), { full: false, singleLetter: false })
+ * // => "周六"
+ *
+ * formatWeekday(dayjs(), { full: true })
+ * // => "星期六"
+ *
+ * formatWeekday(dayjs(), { singleLetter: true })
+ * // => "六"
+ */
+export function formatWeekday(weekday, config) {
+  var _ref = config || {},
+    _ref$full = _ref.full,
+    full = _ref$full === void 0 ? false : _ref$full,
+    _ref$singleLetter = _ref.singleLetter,
+    singleLetter = _ref$singleLetter === void 0 ? false : _ref$singleLetter;
+
+  // 判断是否为中文环境
+  var locale = weekday.locale();
+  var isChinese = locale === 'zh-cn' || locale === 'zh';
+
+  // 单字母展示
+  if (singleLetter) {
+    if (isChinese) {
+      // 中文：一、二、三、四、五、六、日
+      var weekdayMap = ['日', '一', '二', '三', '四', '五', '六'];
+      return weekdayMap[weekday.day()];
+    } else {
+      // 英文：S, M, T, W, T, F, S
+      // 使用 format('dd') 获取缩写（如 Su, Mo），然后取第一个字母
+      return weekday.format('dd').charAt(0);
+    }
+  }
+
+  // 完整展示
+  if (full) {
+    // dddd: 星期一 / Monday
+    return weekday.format('dddd');
+  }
+
+  // 默认（缩写）
+  // ddd: 周一 / Mon
+  return weekday.format('ddd');
+}

package/es/components/pisellDateTimeDisplay/utils/getRefreshInterval.d.ts

@@ -0,0 +1,18 @@
+import type { TimeFormatConfig } from '../types';
+/**
+ * 根据时间格式配置计算刷新间隔
+ * @param timeFormat 时间格式配置
+ * @returns 刷新间隔（毫秒）
+ *
+ * @description
+ * - 显示秒时：1000ms (1秒刷新一次)
+ * - 不显示秒时：60000ms (60秒刷新一次)
+ *
+ * @example
+ * getRefreshInterval({ showSeconds: true })
+ * // => 1000
+ *
+ * getRefreshInterval({ showSeconds: false })
+ * // => 60000
+ */
+export declare function getRefreshInterval(timeFormat?: TimeFormatConfig): number;

package/es/components/pisellDateTimeDisplay/utils/getRefreshInterval.js

@@ -0,0 +1,28 @@
+/**
+ * 根据时间格式配置计算刷新间隔
+ * @param timeFormat 时间格式配置
+ * @returns 刷新间隔（毫秒）
+ *
+ * @description
+ * - 显示秒时：1000ms (1秒刷新一次)
+ * - 不显示秒时：60000ms (60秒刷新一次)
+ *
+ * @example
+ * getRefreshInterval({ showSeconds: true })
+ * // => 1000
+ *
+ * getRefreshInterval({ showSeconds: false })
+ * // => 60000
+ */
+export function getRefreshInterval(timeFormat) {
+  var _timeFormat$showSecon;
+  var showSeconds = (_timeFormat$showSecon = timeFormat === null || timeFormat === void 0 ? void 0 : timeFormat.showSeconds) !== null && _timeFormat$showSecon !== void 0 ? _timeFormat$showSecon : false;
+
+  // 显示秒时 1 秒刷新
+  if (showSeconds) {
+    return 1000;
+  }
+
+  // 否则 60 秒刷新
+  return 60000;
+}

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

@@ -0,0 +1,4 @@
+export { formatTime } from './formatTime';
+export { formatDate } from './formatDate';
+export { formatWeekday } from './formatWeekday';
+export { getRefreshInterval } from './getRefreshInterval';

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

@@ -0,0 +1,4 @@
+export { formatTime } from "./formatTime";
+export { formatDate } from "./formatDate";
+export { formatWeekday } from "./formatWeekday";
+export { getRefreshInterval } from "./getRefreshInterval";