@pisell/materials 3.3.82 → 3.3.83

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

@@ -0,0 +1,62 @@
+import { isChinese as checkIsChinese } from "./localeUtils";
+
+/**
+ * 格式化星期
+ * @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,
+    _ref$trailingComma = _ref.trailingComma,
+    trailingComma = _ref$trailingComma === void 0 ? false : _ref$trailingComma;
+
+  // 判断是否为中文环境
+  var locale = weekday.locale();
+  var isChinese = checkIsChinese(locale);
+  var appendComma = function appendComma(s) {
+    return trailingComma ? isChinese ? "".concat(s, "\uFF0C") : "".concat(s, ",") : s;
+  };
+
+  // 单字母展示
+  if (singleLetter) {
+    if (isChinese) {
+      var weekdayMap = ['日', '一', '二', '三', '四', '五', '六'];
+      return appendComma(weekdayMap[weekday.day()]);
+    }
+    return appendComma(weekday.format('dd').charAt(0));
+  }
+
+  // 完整展示
+  if (full) {
+    return appendComma(weekday.format('dddd'));
+  }
+
+  // 默认（缩写）ddd: 周一 / Mon
+  return appendComma(weekday.format('ddd'));
+}

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

@@ -0,0 +1,7 @@
+export { formatTime } from "./formatTime";
+export { formatDate } from "./formatDate";
+export { formatWeekday } from "./formatWeekday";
+export { getDatePartDisplay } from "./formatDateOrRelative";
+export { getRefreshInterval } from "./getRefreshInterval";
+export { getRelativeDay, getRelativeDayLabel } from "./relativeDay";
+export { normalizeLocale, isChinese, getDayjsLocale } from "./localeUtils";

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

@@ -0,0 +1,36 @@
+import { getCurrentLocale } from "../../../utils/locale";
+
+/**
+ * 标准化 locale 代码
+ * @param locale 原始 locale 代码
+ * @returns 标准化后的 locale 代码（小写，用于 dayjs）
+ * @example 'zh-CN' -> 'zh-cn', 'en' -> 'en'
+ */
+export function normalizeLocale(locale) {
+  return locale.toLowerCase();
+}
+
+/**
+ * 判断是否为中文环境
+ * @param locale locale 代码
+ * @returns 是否为中文
+ * @example isChinese('zh-CN') -> true, isChinese('zh-HK') -> true, isChinese('en') -> false
+ */
+export function isChinese(locale) {
+  var normalizedLocale = normalizeLocale(locale);
+  return normalizedLocale.startsWith('zh');
+}
+
+/**
+ * 获取 dayjs 兼容的 locale 代码
+ * 未传 locale 时使用 i18n 当前语言（全局配置 / umi_locale），不再使用浏览器语言
+ * @param locale 原始 locale 代码（可选）
+ * @returns dayjs 兼容的 locale 代码
+ * @example 'zh-CN' -> 'zh-cn', 'en-US' -> 'en'
+ */
+export function getDayjsLocale(locale) {
+  if (!locale) {
+    return normalizeLocale(getCurrentLocale());
+  }
+  return normalizeLocale(locale);
+}

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

@@ -0,0 +1,45 @@
+import { isChinese as checkIsChinese } from "./localeUtils";
+var LABELS_ZH = {
+  today: '今天',
+  yesterday: '昨天',
+  tomorrow: '明天'
+};
+var LABELS_EN = {
+  today: 'Today',
+  yesterday: 'Yesterday',
+  tomorrow: 'Tomorrow'
+};
+
+/**
+ * 判断日期相对于参考日期是今天、昨天还是明天
+ *
+ * @param date 要展示的日期
+ * @param reference 参考日期（通常为「当前」dayjs()）
+ * @returns 'today' | 'yesterday' | 'tomorrow' | null
+ *
+ * @example
+ * getRelativeDay(dayjs(), dayjs())           // => 'today'
+ * getRelativeDay(dayjs().add(1,'day'), dayjs()) // => 'tomorrow'
+ * getRelativeDay(dayjs().subtract(1,'day'), dayjs()) // => 'yesterday'
+ */
+export function getRelativeDay(date, reference) {
+  var d = date.startOf('day');
+  var r = reference.startOf('day');
+  var diff = d.diff(r, 'day');
+  if (diff === 0) return 'today';
+  if (diff === 1) return 'tomorrow';
+  if (diff === -1) return 'yesterday';
+  return null;
+}
+
+/**
+ * 根据 locale 返回相对日期的展示文案
+ *
+ * @param day 'today' | 'yesterday' | 'tomorrow'
+ * @param locale dayjs locale，如 'zh-cn'、'en'
+ * @returns 如 '今天'、'Today'
+ */
+export function getRelativeDayLabel(day, locale) {
+  var isZh = locale ? checkIsChinese(locale) : false;
+  return isZh ? LABELS_ZH[day] : LABELS_EN[day];
+}

package/es/components/pisellEmail/PisellEmail.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PisellEmailProps } from './types';
+import './PisellEmail.less';
+/**
+ * PisellEmail 邮箱地址组件
+ *
+ * 邮箱地址输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design AutoComplete 和 Input 组件开发，提供邮箱格式校验、域名智能补全、
+ * mailto 邮件发送和域名隐藏功能。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态（邮箱输入）
+ * <PisellEmail
+ *   placeholder="请输入邮箱地址"
+ *   required
+ * />
+ *
+ * @example
+ * // 只读态（可发邮件）
+ * <PisellEmail
+ *   mode="read"
+ *   value="user@example.com"
+ *   enableMailto
+ * />
+ *
+ * @example
+ * // 域名补全
+ * <PisellEmail
+ *   enableAutoComplete
+ *   autoCompleteDomains={['gmail.com', 'company.com']}
+ * />
+ */
+export declare const PisellEmail: React.FC<PisellEmailProps>;
+declare const _default: React.NamedExoticComponent<PisellEmailProps>;
+export default _default;

package/es/components/pisellEmail/PisellEmail.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 "./PisellEmail.less";
+
+/**
+ * PisellEmail 邮箱地址组件
+ * 
+ * 邮箱地址输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design AutoComplete 和 Input 组件开发，提供邮箱格式校验、域名智能补全、
+ * mailto 邮件发送和域名隐藏功能。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 编辑态（邮箱输入）
+ * <PisellEmail 
+ *   placeholder="请输入邮箱地址"
+ *   required
+ * />
+ * 
+ * @example
+ * // 只读态（可发邮件）
+ * <PisellEmail 
+ *   mode="read"
+ *   value="user@example.com"
+ *   enableMailto
+ * />
+ * 
+ * @example
+ * // 域名补全
+ * <PisellEmail 
+ *   enableAutoComplete
+ *   autoCompleteDomains={['gmail.com', 'company.com']}
+ * />
+ */
+export var PisellEmail = function PisellEmail(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(PisellEmail, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.enableAutoComplete === nextProps.enableAutoComplete;
+});

package/es/components/pisellEmail/PisellEmail.less

@@ -0,0 +1,50 @@
+/**
+ * PisellEmail 组件样式
+ */
+
+.pisell-email {
+  &-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;
+      }
+    }
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+
+    * {
+      cursor: not-allowed !important;
+    }
+  }
+}
+
+// AutoComplete 下拉样式优化
+.pisell-email-autocomplete-dropdown {
+  .pisell-lowcode-select-item-option-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}

package/es/components/pisellEmail/PisellEmail.stories.d.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellEmail } from './PisellEmail';
+/**
+ * PisellEmail 是一个邮箱地址输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 邮箱格式校验（标准/严格）
+ * - 域名智能补全
+ * - mailto 邮件发送
+ * - 域名隐藏/脱敏
+ * - 白名单/黑名单域名限制
+ */
+declare const meta: Meta<typeof PisellEmail>;
+export default meta;
+declare type Story = StoryObj<typeof PisellEmail>;
+/**
+ * 基础编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 域名智能补全
+ */
+export declare const WithAutoComplete: Story;
+/**
+ * 自定义补全域名
+ */
+export declare const CustomDomains: Story;
+/**
+ * 只读态 - 可发邮件
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 带邮件图标
+ */
+export declare const ReadModeWithIcon: Story;
+/**
+ * 只读态 - 域名部分隐藏
+ */
+export declare const ReadModePartialMask: Story;
+/**
+ * 只读态 - 域名完全隐藏
+ */
+export declare const ReadModeFullMask: Story;
+/**
+ * 禁用态（编辑）
+ */
+export declare const DisabledEdit: Story;
+/**
+ * 禁用态（只读）
+ */
+export declare const DisabledRead: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 格式校验（实时）
+ */
+export declare const FormatValidation: Story;
+/**
+ * 严格格式校验
+ */
+export declare const StrictValidation: Story;
+/**
+ * 白名单域名限制
+ */
+export declare const AllowedDomains: Story;
+/**
+ * 黑名单域名限制
+ */
+export declare const BlockedDomains: Story;
+/**
+ * 显示清空按钮
+ */
+export declare const WithClearButton: Story;
+/**
+ * 自动聚焦
+ */
+export declare const WithAutoFocus: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 脱敏模式对比
+ */
+export declare const MaskingComparison: Story;
+/**
+ * 校验时机对比
+ */
+export declare const ValidateTriggerComparison: Story;
+/**
+ * 完整功能示例
+ */
+export declare const CompleteExample: Story;
+/**
+ * 域名补全演示
+ */
+export declare const AutoCompleteDemo: Story;
+/**
+ * mailto 功能演示
+ */
+export declare const MailtoDemo: Story;
+/**
+ * 白名单/黑名单演示
+ */
+export declare const DomainRestrictionDemo: Story;
+/**
+ * 所有状态展示
+ */
+export declare const AllStates: Story;
+/**
+ * 完整交互示例
+ */
+export declare const InteractiveExample: Story;