@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -0,0 +1,254 @@
+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 from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import { useCurrentTime } from "./hooks";
+import { getRefreshInterval, isChinese as checkIsChinese, getRelativeDay, getRelativeDayLabel, getDayjsLocale } from "./utils";
+import { TimeDisplay, DateDisplay, WeekdayDisplay } from "./components";
+import { DATETIME_DISPLAY_FORMATS } from "./formats/dateTimeDisplayFormats";
+import "./PisellDateTimeDisplay.less";
+
+/**
+ * PisellDateTimeDisplay 组件
+ *
+ * @description
+ * 专注于展示当前时间的组件，支持：
+ * - 当前日期、时间、星期展示
+ * - 多种布局方式（水平、垂直、单行）
+ * - 丰富的格式化配置
+ * - 自动刷新
+ * - 国际化支持
+ *
+ * @example
+ * // 基础用法
+ * <PisellDateTimeDisplay />
+ *
+ * // 自定义格式
+ * <PisellDateTimeDisplay
+ *   layout="vertical"
+ *   timeFormat={{ use12Hour: true, showSeconds: true }}
+ *   dateFormat={{ showYear: true, showChineseUnit: true }}
+ * />
+ *
+ * // 自定义格式化字符串
+ * <PisellDateTimeDisplay
+ *   customFormat="YYYY-MM-DD HH:mm:ss"
+ * />
+ */
+export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
+  var _ref, _presetSource$localeK;
+  var _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
+    _props$textAlign = props.textAlign,
+    textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
+    fields = props.fields,
+    formatByLocale = props.formatByLocale,
+    timeFormat = props.timeFormat,
+    dateFormat = props.dateFormat,
+    weekdayFormat = props.weekdayFormat,
+    customFormat = props.customFormat,
+    _props$inlineSeparato = props.inlineSeparator,
+    inlineSeparator = _props$inlineSeparato === void 0 ? ' · ' : _props$inlineSeparato,
+    containerStyle = props.containerStyle,
+    timeStyle = props.timeStyle,
+    dateStyle = props.dateStyle,
+    weekdayStyle = props.weekdayStyle,
+    refreshInterval = props.refreshInterval,
+    _props$disableAutoRef = props.disableAutoRefresh,
+    disableAutoRefresh = _props$disableAutoRef === void 0 ? false : _props$disableAutoRef,
+    locale = props.locale,
+    onTimeUpdate = props.onTimeUpdate,
+    onClick = props.onClick,
+    className = props.className,
+    style = props.style;
+
+  // 多语言格式：formatByLocale 优先，否则用内置 DATETIME_DISPLAY_FORMATS；再与单项 props 合并（单项优先）
+  var localeKey = getDayjsLocale(locale);
+  var baseLocale = localeKey.split('-')[0];
+  var presetSource = formatByLocale !== null && formatByLocale !== void 0 ? formatByLocale : DATETIME_DISPLAY_FORMATS;
+  var preset = (_ref = (_presetSource$localeK = presetSource[localeKey]) !== null && _presetSource$localeK !== void 0 ? _presetSource$localeK : presetSource[baseLocale]) !== null && _ref !== void 0 ? _ref : {};
+  var effectiveFields = _objectSpread(_objectSpread({}, preset.fields), fields);
+  var effectiveDateFormat = _objectSpread(_objectSpread({}, preset.dateFormat), dateFormat);
+  var effectiveTimeFormat = _objectSpread(_objectSpread({}, preset.timeFormat), timeFormat);
+  var effectiveWeekdayFormat = _objectSpread(_objectSpread({}, preset.weekdayFormat), weekdayFormat);
+
+  // 计算刷新间隔
+  var computedRefreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : getRefreshInterval(effectiveTimeFormat);
+
+  // 使用自定义 hook 管理当前时间
+  var currentTime = useCurrentTime({
+    refreshInterval: computedRefreshInterval,
+    disabled: disableAutoRefresh,
+    locale: locale,
+    onUpdate: onTimeUpdate
+  });
+
+  // 如果有自定义格式化，直接使用
+  if (customFormat) {
+    var formattedTime = currentTime.format(customFormat);
+    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,
+      textAlign: textAlign
+    }, style);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-datetime-display pisell-datetime-display-custom ".concat(className || '').trim(),
+      style: _containerInlineStyle,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement("span", null, formattedTime));
+  }
+
+  // 获取字段配置（已含多语言预设合并）
+  var _ref2 = effectiveFields || {},
+    _ref2$showTime = _ref2.showTime,
+    showTime = _ref2$showTime === void 0 ? true : _ref2$showTime,
+    _ref2$showDate = _ref2.showDate,
+    showDate = _ref2$showDate === void 0 ? true : _ref2$showDate,
+    _ref2$showWeekday = _ref2.showWeekday,
+    showWeekday = _ref2$showWeekday === void 0 ? true : _ref2$showWeekday,
+    _ref2$fieldOrder = _ref2.fieldOrder,
+    fieldOrder = _ref2$fieldOrder === void 0 ? ['time', 'date', 'weekday'] : _ref2$fieldOrder;
+
+  // 日期与星期一体：若日期以相对日（今天/昨天/明天）展示，则不展示星期
+  var referenceDate = dayjs();
+  var relativeDay = effectiveDateFormat !== null && effectiveDateFormat !== void 0 && effectiveDateFormat.showRelativeDay ? getRelativeDay(currentTime, referenceDate) : null;
+  var hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
+
+  // 构建容器样式
+  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
+  }, style);
+
+  // 渲染单个字段
+  var renderField = function renderField(fieldType) {
+    switch (fieldType) {
+      case 'time':
+        return showTime ? /*#__PURE__*/React.createElement(TimeDisplay, {
+          key: "time",
+          time: currentTime,
+          format: effectiveTimeFormat,
+          style: timeStyle
+        }) : null;
+      case 'date':
+        return showDate ? /*#__PURE__*/React.createElement(DateDisplay, {
+          key: "date",
+          date: currentTime,
+          format: effectiveDateFormat,
+          referenceDate: dayjs(),
+          style: dateStyle
+        }) : null;
+      case 'weekday':
+        return showWeekday && !hideWeekdayWhenDateRelative ? /*#__PURE__*/React.createElement(WeekdayDisplay, {
+          key: "weekday",
+          weekday: currentTime,
+          format: effectiveWeekdayFormat,
+          style: weekdayStyle
+        }) : null;
+      default:
+        return null;
+    }
+  };
+
+  // 单行布局：使用分隔符连接，支持每段不同分隔符（如 2025-12-31 - 2:00 周四）
+  if (layout === 'inline') {
+    var inlineSeparators = effectiveFields === null || effectiveFields === void 0 ? void 0 : effectiveFields.inlineSeparators;
+    var _renderedFields = fieldOrder.map(renderField).filter(function (field) {
+      return field !== null;
+    });
+    if (_renderedFields.length === 0) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-datetime-display pisell-datetime-display-inline ".concat(className || '').trim(),
+      style: containerInlineStyle,
+      onClick: onClick
+    }, _renderedFields.map(function (field, index) {
+      var _inlineSeparators$ind;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, field, index < _renderedFields.length - 1 && /*#__PURE__*/React.createElement("span", {
+        className: "pisell-datetime-display-separator"
+      }, (_inlineSeparators$ind = inlineSeparators === null || inlineSeparators === void 0 ? void 0 : inlineSeparators[index]) !== null && _inlineSeparators$ind !== void 0 ? _inlineSeparators$ind : inlineSeparator));
+    }));
+  }
+
+  // 水平或垂直布局：直接渲染字段
+  var renderedFields = fieldOrder.map(renderField).filter(function (field) {
+    return field !== null;
+  });
+
+  // 如果没有要显示的字段，返回 null
+  if (renderedFields.length === 0) {
+    return null;
+  }
+
+  // 水平布局特殊处理：将日期和星期放在同一行
+  if (layout === 'horizontal') {
+    // 提取时间字段
+    var timeField = showTime ? renderField('time') : null;
+
+    // 判断是否为中文环境
+    var currentLocale = currentTime.locale();
+    var isChinese = checkIsChinese(currentLocale);
+
+    // 当同时显示日期和星期时，使用合并格式；有相对日时只展示相对日，不展示具体日期与星期
+    if (showDate && showWeekday) {
+      var _labels$relativeDay;
+      var labels = effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.relativeDayLabels;
+      var dateStr = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, currentTime.locale()) : isChinese ? currentTime.format('M月D日') : currentTime.format('D MMM');
+      var weekdayStr = currentTime.format('ddd');
+      // 相对日替换掉原日期展示：有今天/昨天/明天时只显示相对日，不拼接具体日期或星期
+      var combinedStr = relativeDay ? dateStr : isChinese ? "".concat(weekdayStr, " ").concat(dateStr) : "".concat(weekdayStr, ", ").concat(dateStr);
+
+      // 构建日期样式
+      var dateInlineStyle = {
+        fontSize: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.fontSize,
+        fontWeight: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.fontWeight,
+        color: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.color,
+        lineHeight: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.lineHeight
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-datetime-display pisell-datetime-display-".concat(layout, " ").concat(className || '').trim(),
+        style: containerInlineStyle,
+        onClick: onClick
+      }, timeField, /*#__PURE__*/React.createElement("span", {
+        className: "pisell-datetime-display-date pisell-datetime-display-combined",
+        style: dateInlineStyle
+      }, combinedStr));
+    }
+
+    // 只显示日期或只显示星期：分别渲染
+    var dateField = showDate ? renderField('date') : null;
+    var weekdayField = showWeekday ? renderField('weekday') : null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-datetime-display pisell-datetime-display-".concat(layout, " ").concat(className || '').trim(),
+      style: containerInlineStyle,
+      onClick: onClick
+    }, timeField, (dateField || weekdayField) && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-datetime-display-date-weekday-row"
+    }, dateField, weekdayField));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-datetime-display pisell-datetime-display-".concat(layout, " ").concat(className || '').trim(),
+    style: containerInlineStyle,
+    onClick: onClick
+  }, renderedFields);
+};
+
+// 性能优化：使用 React.memo
+export default /*#__PURE__*/React.memo(PisellDateTimeDisplay);

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.less

@@ -0,0 +1,96 @@
+.pisell-datetime-display {
+  display: flex;
+  color: #000;
+
+  // 水平布局（默认）
+  &-horizontal {
+    flex-direction: column;
+    gap: 4px;
+
+    .pisell-datetime-display-time {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .pisell-datetime-display-date,
+    .pisell-datetime-display-weekday {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+
+    // 合并显示的日期星期（Sat, 21 Mar 或 周五 1月30日）
+    .pisell-datetime-display-combined {
+      font-size: 12px;
+    }
+
+    // 日期和星期同一行的容器
+    .pisell-datetime-display-date-weekday-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  // 垂直布局
+  &-vertical {
+    flex-direction: column;
+    gap: 8px;
+
+    .pisell-datetime-display-time {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .pisell-datetime-display-date,
+    .pisell-datetime-display-weekday {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+  }
+
+  // 单行布局
+  &-inline {
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+  }
+
+  // 分隔符
+  &-separator {
+    display: inline-block;
+  }
+
+  // 自定义格式化
+  &-custom {
+    display: inline-block;
+  }
+
+  // 时间
+  &-time {
+    display: inline-block;
+  }
+
+  // 日期
+  &-date {
+    display: inline-block;
+
+    // 英文环境合并格式（Sat, 21 Mar）
+    &.pisell-datetime-display-combined {
+      display: block;
+    }
+  }
+
+  // 星期
+  &-weekday {
+    display: inline-block;
+  }
+}

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.d.ts

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellDateTimeDisplay from './PisellDateTimeDisplay';
+/**
+ * PisellDateTimeDisplay 组件 Storybook
+ */
+declare const meta: Meta<typeof PisellDateTimeDisplay>;
+export default meta;
+declare type Story = StoryObj<typeof PisellDateTimeDisplay>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 水平布局（默认）
+ */
+export declare const HorizontalLayout: Story;
+/**
+ * 垂直布局
+ */
+export declare const VerticalLayout: Story;
+/**
+ * 单行布局
+ */
+export declare const InlineLayout: Story;
+/**
+ * 单行布局 - 自定义分隔符
+ */
+export declare const InlineWithCustomSeparator: Story;
+/**
+ * 中文完整日期格式：2025-12-31 - 2:00 周四
+ * 单行、日期在前、日期与时间之间 " - "、时间与星期之间空格
+ */
+export declare const InlineDateTimeWeekdayZh: Story;
+/**
+ * 12小时制
+ */
+export declare const Time12Hour: Story;
+/**
+ * 显示秒
+ */
+export declare const TimeWithSeconds: Story;
+/**
+ * 12小时制 + 显示秒
+ */
+export declare const Time12HourWithSeconds: Story;
+/**
+ * 小时补零
+ */
+export declare const TimePadHour: Story;
+/**
+ * 只显示小时
+ */
+export declare const TimeOnlyHour: Story;
+/**
+ * 完整日期（Y-M-D）
+ */
+export declare const DateFullYMD: Story;
+/**
+ * 月-日-年 格式
+ */
+export declare const DateMDY: Story;
+/**
+ * 日-月-年 格式
+ */
+export declare const DateDMY: Story;
+/**
+ * 中文日期带单位
+ */
+export declare const DateChinese: Story;
+/**
+ * 相对日：今天/昨天/明天
+ * 与「当前日期」同天显示「今天」，前一天「昨天」，后一天「明天」；其他日期仍按原格式。
+ * 参考日为 dayjs()，随时间变化：例如 2 月 4 日当天，2 月 4 日显示「今天」，2 月 3 日显示「昨天」。
+ */
+export declare const RelativeDay: Story;
+/**
+ * 相对日 - 英文
+ */
+export declare const RelativeDayEn: Story;
+/**
+ * 相对日 - 自定义文案
+ */
+export declare const RelativeDayCustomLabels: Story;
+/**
+ * 英文完整月份
+ */
+export declare const DateFullMonth: Story;
+/**
+ * 自定义分隔符
+ */
+export declare const DateCustomSeparator: Story;
+/**
+ * 星期完整展示（英文）
+ */
+export declare const WeekdayFull: Story;
+/**
+ * 星期完整展示（中文）
+ */
+export declare const WeekdayFullChinese: Story;
+/**
+ * 星期单字母展示
+ */
+export declare const WeekdaySingleLetter: Story;
+/**
+ * 只显示时间
+ */
+export declare const OnlyTime: Story;
+/**
+ * 只显示日期
+ */
+export declare const OnlyDate: Story;
+/**
+ * 自定义字段顺序
+ */
+export declare const CustomFieldOrder: Story;
+/**
+ * 自定义格式化 - ISO 格式
+ */
+export declare const CustomFormatISO: Story;
+/**
+ * 自定义格式化 - 中文格式
+ */
+export declare const CustomFormatChinese: Story;
+/**
+ * 自定义格式化 - 包含星期
+ */
+export declare const CustomFormatWithWeekday: Story;
+/**
+ * 中文环境
+ */
+export declare const LocaleChinese: Story;
+/**
+ * 英文环境
+ */
+export declare const LocaleEnglish: Story;
+/**
+ * 自定义容器样式
+ */
+export declare const CustomContainerStyle: Story;
+/**
+ * 自定义文本样式
+ */
+export declare const CustomTextStyle: Story;
+/**
+ * 居中对齐
+ */
+export declare const CenterAlign: Story;
+/**
+ * 禁用自动刷新
+ */
+export declare const DisableRefresh: Story;
+/**
+ * 自定义刷新间隔（5秒）
+ */
+export declare const CustomRefreshInterval: Story;
+/**
+ * 应用场景 - 后台首页
+ */
+export declare const ScenarioDashboard: Story;
+/**
+ * 应用场景 - 状态栏
+ */
+export declare const ScenarioStatusBar: Story;
+/**
+ * 应用场景 - 欢迎页
+ */
+export declare const ScenarioWelcome: Story;
+/**
+ * 应用场景 - 大屏展示
+ */
+export declare const ScenarioLargeScreen: Story;
+/**
+ * 多语言对比
+ */
+export declare const MultiLanguage: Story;
+/**
+ * 时间格式对比
+ */
+export declare const TimeFormats: Story;
+/**
+ * 日期格式对比
+ */
+export declare const DateFormats: Story;
+/**
+ * 星期格式对比
+ */
+export declare const WeekdayFormats: Story;
+/**
+ * 所有布局对比
+ */
+export declare const AllLayouts: Story;
+/**
+ * 深色主题
+ */
+export declare const DarkTheme: Story;