@pisell/materials 3.3.84 → 3.3.85

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

@@ -0,0 +1,347 @@
+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;
+    /**
+     * 英文 DMY 时年月之间是否加逗号（如 21 Mar, 2026；false 时为 22 Jan 2025）
+     * @default true
+     */
+    useCommaBeforeYear?: boolean;
+    /**
+     * 是否在「今天/昨天/明天」时用相对日替换具体日期
+     * 开启后：与参考日同天显示「今天」，前一天「昨天」，后一天「明天」；其他日期仍按原格式
+     * @default false
+     */
+    showRelativeDay?: boolean;
+    /**
+     * 相对日文案覆盖（用于 i18n 或自定义）
+     * 不传时按 locale 使用默认：zh 今天/昨天/明天，en Today/Yesterday/Tomorrow
+     */
+    relativeDayLabels?: {
+        today?: string;
+        yesterday?: string;
+        tomorrow?: string;
+    };
+}
+/**
+ * 星期格式配置
+ */
+export interface WeekdayFormatConfig {
+    /**
+     * 是否完整展示
+     * @default false
+     * @example true -> "Saturday" / "星期六" | false -> "Sat" / "周六"
+     */
+    full?: boolean;
+    /**
+     * 是否单字母展示
+     * @default false
+     * @example true -> "S" / "六" | false -> "Sat" / "周六"
+     */
+    singleLetter?: boolean;
+    /**
+     * 是否在星期后加逗号（用于与日期拼接如 "Sat, 21 Mar, 2026"）
+     * @default false
+     */
+    trailingComma?: boolean;
+}
+/**
+ * 字段配置
+ */
+export interface FieldConfig {
+    /**
+     * 是否显示时间字段
+     * @default true
+     */
+    showTime?: boolean;
+    /**
+     * 是否显示日期字段
+     * @default true
+     */
+    showDate?: boolean;
+    /**
+     * 是否显示星期字段
+     * @default true
+     */
+    showWeekday?: boolean;
+    /**
+     * 字段顺序
+     * @default ['time', 'date', 'weekday']
+     */
+    fieldOrder?: FieldType[];
+    /**
+     * 单行布局时每段之间的分隔符，按顺序对应字段之间
+     * 如 ['date','time','weekday'] 配 inlineSeparators: [' - ', ' '] => "2025-12-31 - 2:00 周四"
+     * 不足时用组件 inlineSeparator 补齐
+     */
+    inlineSeparators?: string[];
+}
+/**
+ * 文本样式配置
+ */
+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;
+}
+/**
+ * 多语言格式预设（日期/时间/星期 + 字段顺序与分隔符）
+ * 用于 formatByLocale[locale] 或默认多语言配置
+ */
+export interface DateTimeDisplayFormatPreset {
+    dateFormat?: DateFormatConfig;
+    timeFormat?: TimeFormatConfig;
+    weekdayFormat?: WeekdayFormatConfig;
+    fields?: FieldConfig;
+}
+/**
+ * PisellDateTimeDisplay 组件 Props
+ */
+export interface PisellDateTimeDisplayProps {
+    /**
+     * 布局方向
+     * @default 'horizontal'
+     */
+    layout?: LayoutDirection;
+    /**
+     * 文本对齐方式
+     * @default 'center'
+     */
+    textAlign?: TextAlign;
+    /**
+     * 字段显示配置
+     */
+    fields?: FieldConfig;
+    /**
+     * 多语言格式配置：按 locale 取对应格式预设，再与下方单项配置合并（单项优先）
+     * @example formatByLocale={{ 'zh-cn': { dateFormat: {...}, fields: { fieldOrder: ['date','time','weekday'], inlineSeparators: [' - ', ' '] } }, 'en': {...} }}
+     */
+    formatByLocale?: Record<string, Partial<DateTimeDisplayFormatPreset>>;
+    /**
+     * 时间格式配置
+     */
+    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 优先使用全局配置（usePisellConfig），其次使用 i18n 当前语言（getCurrentLocale：全局配置 / umi_locale）
+     * @example 'zh-CN' | 'zh-HK' | 'en' | 'en-US' | 'ja'
+     * @description
+     * - 支持标准 BCP 47 语言代码，会自动标准化为 dayjs 兼容格式
+     * - 优先级：组件 locale 属性 > PisellConfigProvider 全局配置 > i18n 当前语言
+     */
+    locale?: string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 时间更新回调
+     * @param currentTime 当前时间（Dayjs 对象）
+     */
+    onTimeUpdate?: (currentTime: Dayjs) => void;
+    /**
+     * 点击回调
+     */
+    onClick?: () => void;
+}

package/lib/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/lib/components/pisellDateTimeDisplay/utils/formatDateOrRelative.d.ts

@@ -0,0 +1,17 @@
+import type { Dayjs } from 'dayjs';
+import type { DateFormatConfig, WeekdayFormatConfig } from '../types';
+/**
+ * 获取「日期部分」的展示文案（相对日内置在 datetime）
+ * - 若开启 showRelativeDay 且日期为今天/昨天/明天，返回相对日文案（如「今天」「Yesterday」）
+ * - 否则返回「星期, 日期」格式（用于时间区间跨天等场景）
+ *
+ * 供 PisellDateTimeDisplay、PisellTimeRangeDisplay 等统一使用，相对时间逻辑只在此处维护
+ */
+export declare function getDatePartDisplay(params: {
+    date: Dayjs;
+    dateFormat?: DateFormatConfig;
+    weekdayFormat?: WeekdayFormatConfig;
+    referenceDate: Dayjs;
+    /** 覆盖日期格式（如跨天时的 order: 'DMY', shortMonth: true） */
+    dateFormatOverride?: Partial<DateFormatConfig>;
+}): string;

package/lib/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/lib/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/lib/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/lib/components/pisellDateTimeDisplay/utils/index.d.ts

@@ -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, type RelativeDay, } from './relativeDay';
+export { normalizeLocale, isChinese, getDayjsLocale, } from './localeUtils';

package/lib/components/pisellDateTimeDisplay/utils/localeUtils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 标准化 locale 代码
+ * @param locale 原始 locale 代码
+ * @returns 标准化后的 locale 代码（小写，用于 dayjs）
+ * @example 'zh-CN' -> 'zh-cn', 'en' -> 'en'
+ */
+export declare function normalizeLocale(locale: string): string;
+/**
+ * 判断是否为中文环境
+ * @param locale locale 代码
+ * @returns 是否为中文
+ * @example isChinese('zh-CN') -> true, isChinese('zh-HK') -> true, isChinese('en') -> false
+ */
+export declare function isChinese(locale: string): boolean;
+/**
+ * 获取 dayjs 兼容的 locale 代码
+ * 未传 locale 时使用 i18n 当前语言（全局配置 / umi_locale），不再使用浏览器语言
+ * @param locale 原始 locale 代码（可选）
+ * @returns dayjs 兼容的 locale 代码
+ * @example 'zh-CN' -> 'zh-cn', 'en-US' -> 'en'
+ */
+export declare function getDayjsLocale(locale?: string): string;

package/lib/components/pisellDateTimeDisplay/utils/relativeDay.d.ts

@@ -0,0 +1,23 @@
+import type { Dayjs } from 'dayjs';
+export declare type RelativeDay = 'today' | 'yesterday' | '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 declare function getRelativeDay(date: Dayjs, reference: Dayjs): RelativeDay | null;
+/**
+ * 根据 locale 返回相对日期的展示文案
+ *
+ * @param day 'today' | 'yesterday' | 'tomorrow'
+ * @param locale dayjs locale，如 'zh-cn'、'en'
+ * @returns 如 '今天'、'Today'
+ */
+export declare function getRelativeDayLabel(day: RelativeDay, locale?: string): string;

package/lib/components/pisellEmpty/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { EmptyProps } from 'antd';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellEmptyProps extends EmptyProps {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /** 额外内容描述 */
+    extraDescription?: React.ReactNode;
+    /** 额外内容描述 */
+    icon?: React.ReactNode;
+    /** 自定义底部额外操作区域 */
+    footer?: React.ReactNode;
+    [key: string]: any;
+    /** 最大宽度 */
+    maxWidth?: number;
+}
+declare const PisellEmpty: (props: PisellEmptyProps) => React.JSX.Element;
+export default PisellEmpty;

package/lib/components/pisellFilter/type.d.ts

@@ -0,0 +1,5 @@
+import { FilterListProps } from '../filter/components/FilterButton/types';
+import { FormInstance } from 'antd';
+export declare type PisellFilterProps = FilterListProps & FormInstance & {
+    hasForm?: boolean;
+};

package/lib/components/pisellFind/PisellFind.stories.d.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellFind } from './index';
+/**
+ * PisellFind 组件 Storybook
+ * 基于 PisellLookup 的组件内查找优化版本
+ */
+declare const meta: Meta<typeof PisellFind>;
+export default meta;
+declare type Story = StoryObj<typeof PisellFind>;
+/**
+ * 基础示例 - 列表查找
+ */
+export declare const Basic: Story;
+/**
+ * 表格查找
+ */
+export declare const TableFind: Story;
+/**
+ * Input 模式查找
+ */
+export declare const InputMode: Story;
+/**
+ * 使用 Ref 控制
+ */
+export declare const WithRef: Story;
+/**
+ * 显示确认按钮
+ */
+export declare const WithConfirmButton: Story;
+/**
+ * 关闭历史记录
+ */
+export declare const NoHistory: Story;
+/**
+ * 多字段搜索
+ */
+export declare const MultiFieldSearch: Story;
+/**
+ * Drawer 模式
+ */
+export declare const DrawerMode: Story;
+/**
+ * Playground - 自由配置
+ */
+export declare const Playground: Story;

package/lib/components/pisellFind/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { PisellLookupProps, PisellLookupRef } from '../pisellLookup';
+/**
+ * PisellFind Props
+ * 继承 PisellLookup 的所有 Props
+ */
+export declare type PisellFindProps = PisellLookupProps;
+/**
+ * PisellFind Ref
+ * 继承 PisellLookup 的所有 Ref 方法
+ */
+export declare type PisellFindRef = PisellLookupRef;
+/**
+ * PisellFind 组件
+ * 基于 PisellLookup 的组件内查找优化版本
+ *
+ * 核心特点：
+ * - 默认使用 button 触发器
+ * - 默认不显示确认按钮（输入即搜索）
+ * - 默认开启搜索历史
+ * - 默认不展示结果区（结果在页面其他位置展示）
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <PisellFind
+ *   onSearch={(keyword) => {
+ *     const filtered = data.filter(item => item.name.includes(keyword));
+ *     setFilteredData(filtered);
+ *   }}
+ * />
+ *
+ * // 切换为 Input 模式
+ * <PisellFind
+ *   triggerType="input"
+ *   onSearch={(keyword) => filterData(keyword)}
+ * />
+ * ```
+ */
+export declare const PisellFind: React.ForwardRefExoticComponent<PisellLookupProps & React.RefAttributes<PisellLookupRef>>;

package/lib/components/pisellLookup/PisellLookup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PisellLookupProps, PisellLookupRef } from './types';
+import './PisellLookup.less';
+export declare const PisellLookup: React.ForwardRefExoticComponent<PisellLookupProps & React.RefAttributes<PisellLookupRef>>;