@pisell/materials 6.11.16 → 6.11.18

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

@@ -0,0 +1,116 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+import dayjs from 'dayjs';
+/** 将 HH:mm 或 HH:mm:ss 解析为当天该时间的 dayjs（基于 reference 的日期） */
+function parseTimeOfDay(timeStr, reference) {
+  var _timeStr$trim$split$m = timeStr.trim().split(':').map(Number),
+    _timeStr$trim$split$m2 = _slicedToArray(_timeStr$trim$split$m, 3),
+    h = _timeStr$trim$split$m2[0],
+    m = _timeStr$trim$split$m2[1],
+    s = _timeStr$trim$split$m2[2];
+  return reference.hour(isNaN(h) ? 0 : h).minute(isNaN(m) ? 0 : m).second(isNaN(s) ? 0 : s).millisecond(0);
+}
+
+/** 匹配 HH:mm 或 HH:mm:ss 这类纯时间字符串 */
+var TIME_ONLY_REGEX = /^\s*\d{1,2}:\d{2}(:\d{2})?\s*$/;
+
+/**
+ * 解析 value 为 Dayjs，无效则返回 null。
+ * 支持 dayjs 可解析的日期时间；纯时间字符串（如 '12:00'、'14:30'）会基于 reference 的日期解析。
+ */
+export function parseValue(value, reference) {
+  if (value == null) return null;
+  var ref = reference !== null && reference !== void 0 ? reference : dayjs();
+  if (typeof value === 'string' && TIME_ONLY_REGEX.test(value)) {
+    return parseTimeOfDay(value, ref);
+  }
+  var d = dayjs(value);
+  return d.isValid() ? d : null;
+}
+
+/**
+ * 将 range 转为 [startDayjs, endDayjs]（reference 为营业锚定日的 0 点）
+ * - 同日内：如 08:00–22:00
+ * - 跨日营业：结束钟面早于或等于开始（如 02:01–次日 02:00）时，end 解析为 reference 的次日同一时刻
+ */
+export function getRangeBounds(range, reference) {
+  if (!range) {
+    return [reference.startOf('day'), reference.endOf('day')];
+  }
+  var start = parseTimeOfDay(range.start, reference);
+  var end = parseTimeOfDay(range.end, reference);
+  if (end.isBefore(start) || end.isSame(start)) {
+    end = parseTimeOfDay(range.end, reference.add(1, 'day'));
+  }
+  return [start, end];
+}
+
+/**
+ * 将时间吸附到 step 分钟刻度（0、15、30、45 等）：四舍五入到最近刻度。
+ */
+export function snapToStepMinutes(t, stepMinutes) {
+  var m = t.minute();
+  var snapped = Math.round(m / stepMinutes) * stepMinutes;
+  if (snapped >= 60) {
+    return t.add(1, 'hour').minute(0).second(0).millisecond(0);
+  }
+  return t.minute(snapped).second(0).millisecond(0);
+}
+
+/**
+ * 判断时间是否落在任一禁用区间内（按绝对时间与区间 [start,end) 比较）
+ * 注：与主时间轴同 reference 的跨日 range 一致时需传入同一营业锚定日解析出的区间。
+ */
+export function isInDisabledRanges(t, disabledRanges) {
+  if (!(disabledRanges !== null && disabledRanges !== void 0 && disabledRanges.length)) return false;
+  var tMin = t.startOf('minute');
+  var _iterator = _createForOfIteratorHelper(disabledRanges),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var r = _step.value;
+      var _getRangeBounds = getRangeBounds(r, t.startOf('day')),
+        _getRangeBounds2 = _slicedToArray(_getRangeBounds, 2),
+        s = _getRangeBounds2[0],
+        e = _getRangeBounds2[1];
+      if ((tMin.isAfter(s) || tMin.isSame(s)) && tMin.isBefore(e)) return true;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+}
+
+/**
+ * 在 [rangeStart, rangeEnd] 内按 stepMinutes 生成刻度时间列表（Dayjs）
+ */
+export function getTicks(rangeStart, rangeEnd, stepMinutes) {
+  var out = [];
+  var cur = rangeStart;
+  while (!cur.isAfter(rangeEnd)) {
+    out.push(cur);
+    cur = cur.add(stepMinutes, 'minute');
+  }
+  return out;
+}
+
+/**
+ * 横向时间轴「格」数量，与 useTimeAxis 中 totalLengthPx 算法一致（含尾格）
+ */
+export function getHorizontalAxisSlotCount(range, referenceDate, stepMinutes) {
+  var _getRangeBounds3 = getRangeBounds(range, referenceDate),
+    _getRangeBounds4 = _slicedToArray(_getRangeBounds3, 2),
+    rangeStart = _getRangeBounds4[0],
+    rangeEnd = _getRangeBounds4[1];
+  var ticks = getTicks(rangeStart, rangeEnd, stepMinutes);
+  var lastTick = ticks.length > 0 ? ticks[ticks.length - 1] : null;
+  var needTailCell = lastTick != null && rangeEnd.isAfter(lastTick);
+  return ticks.length + (needTailCell ? 1 : 0);
+}

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellTimeRangeDisplayProps } from './types';
+import './PisellTimeRangeDisplay.less';
+/**
+ * PisellTimeRangeDisplay 组件
+ *
+ * @description
+ * 纯展示型时间区间组件，将 startAt / endAt 格式化为「时间区间 + 持续时间」。
+ * - 同一天：HH:mm-HH:mm，可选显示日期/星期
+ * - 跨天：起止日期时间
+ * - 持续时间：d h m s 格式
+ * - 字段顺序由 fieldOrder 控制，可将 duration 放在中间
+ *
+ * @example
+ * <PisellTimeRangeDisplay
+ *   startAt="2026-02-04 09:00"
+ *   endAt="2026-02-04 18:00"
+ * />
+ * // => "09:00-18:00" + "9h"
+ *
+ * <PisellTimeRangeDisplay
+ *   startAt={start}
+ *   endAt={end}
+ *   fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
+ *   showDateForSameDay
+ * />
+ */
+export declare const PisellTimeRangeDisplay: React.FC<PisellTimeRangeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellTimeRangeDisplayProps>;
+export default _default;

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.d.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellTimeRangeDisplay } from './PisellTimeRangeDisplay';
+/**
+ * PisellTimeRangeDisplay 组件 Storybook
+ * 用于时间区间 + 持续时长的展示（同一天 / 跨天）
+ */
+declare const meta: Meta<typeof PisellTimeRangeDisplay>;
+export default meta;
+declare type Story = StoryObj<typeof PisellTimeRangeDisplay>;
+/**
+ * 默认：同一天时间区间 + 持续时长
+ */
+export declare const Default: Story;
+/**
+ * 同一天 + 显示日期与星期
+ */
+export declare const SameDayWithDate: Story;
+/**
+ * 跨天时间区间
+ */
+export declare const CrossDay: Story;
+/**
+ * 跨年
+ */
+export declare const CrossYear: Story;
+/**
+ * 持续时间在中间（默认 fieldOrder）
+ */
+export declare const DurationInMiddle: Story;
+/**
+ * 持续时长在前
+ */
+export declare const DurationFirst: Story;
+/**
+ * 持续时长显示秒
+ */
+export declare const DurationWithSeconds: Story;
+/**
+ * 仅时间区间 + 持续时长（不显示日期星期）
+ */
+export declare const TimeAndDurationOnly: Story;
+/**
+ * 12 小时制
+ */
+export declare const Time12Hour: Story;
+/**
+ * 中文（日期 + 持续时长「天/时/分/秒」i18n）
+ */
+export declare const LocaleZhCN: Story;
+/**
+ * 英文（日期 + 持续时长 d/h/m/s）
+ */
+export declare const LocaleEn: Story;
+/**
+ * 小宽度：容器较窄时按块换行
+ */
+export declare const NarrowWidth: Story;
+/**
+ * 自定义容器样式
+ */
+export declare const CustomContainerStyle: Story;

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/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/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/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/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/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/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/utils/formatDuration.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 将毫秒数格式化为持续时间字符串（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 declare function formatDuration(ms: number, showSeconds?: boolean, locale?: string): string;

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

@@ -0,0 +1,4 @@
+export { parseTimeRange } from './parseTimeRange';
+export type { ParseTimeRangeResult } from './parseTimeRange';
+export { formatDuration } from './formatDuration';
+export { formatTime, formatDate, formatWeekday, getDayjsLocale, getRelativeDay, getRelativeDayLabel, getDatePartDisplay, } from '../../pisellDateTimeDisplay/utils';

package/es/components/pisellTimeRangeDisplay/utils/parseTimeRange.d.ts

@@ -0,0 +1,23 @@
+import { type Dayjs } from 'dayjs';
+import type { DayjsLike } from '../types';
+export interface ParseTimeRangeResult {
+    /** 开始时间（已应用 locale） */
+    start: Dayjs;
+    /** 结束时间（已应用 locale） */
+    end: Dayjs;
+    /** 是否同一天（按本地时区自然日判定） */
+    isSameDay: boolean;
+}
+/**
+ * 解析 startAt / endAt 为 Dayjs，并判定是否同一天
+ *
+ * @param startAt 开始时间（dayjs 兼容值）
+ * @param endAt 结束时间（dayjs 兼容值）
+ * @param locale dayjs locale，可选
+ * @returns { start, end, isSameDay }
+ *
+ * @example
+ * parseTimeRange('2026-02-04 09:00', '2026-02-04 18:00', 'zh-cn')
+ * // => { start: Dayjs, end: Dayjs, isSameDay: true }
+ */
+export declare function parseTimeRange(startAt: DayjsLike, endAt: DayjsLike, locale?: string): ParseTimeRangeResult;

package/es/components/pisellTooltip/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TooltipPropsWithTitle } from 'antd/es/tooltip';
 import { PisellContextType } from "../pisell-config-provider/context";
 import './index.less';
@@ -6,5 +6,5 @@ export interface PisellTooltipProps extends TooltipPropsWithTitle {
     /** 平台 */
     platform?: PisellContextType['platform'];
 }
-declare const PisellTooltip: (props: PisellTooltipProps) => JSX.Element;
+declare const PisellTooltip: (props: PisellTooltipProps) => React.JSX.Element;
 export default PisellTooltip;

package/es/components/pisellUpload/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { UploadProps } from 'antd';
 import './index.less';
 export interface PisellUploadProps extends UploadProps {
@@ -7,5 +7,5 @@ export interface PisellUploadProps extends UploadProps {
     text2?: string;
     uploadType?: 'button' | 'drop' | 'custom';
 }
-declare const PisellUpload: (props: PisellUploadProps) => JSX.Element;
+declare const PisellUpload: (props: PisellUploadProps) => React.JSX.Element;
 export default PisellUpload;

package/es/components/pisellUrl/PisellUrl.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PisellUrlProps } from './types';
+import './PisellUrl.less';
+/**
+ * PisellUrl URL 链接组件
+ *
+ * URL 链接输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供 URL 格式校验、协议自动补全、
+ * 链接跳转和协议/路径显示控制功能。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态（URL 输入）
+ * <PisellUrl
+ *   placeholder="请输入网址"
+ *   required
+ * />
+ *
+ * @example
+ * // 只读态（可跳转）
+ * <PisellUrl
+ *   mode="read"
+ *   value="https://www.example.com"
+ *   enableLinkClick
+ * />
+ *
+ * @example
+ * // 协议自动补全
+ * <PisellUrl
+ *   autoCompleteProtocol
+ *   defaultProtocol="https://"
+ * />
+ */
+export declare const PisellUrl: React.FC<PisellUrlProps>;
+declare const _default: React.NamedExoticComponent<PisellUrlProps>;
+export default _default;

package/es/components/pisellUrl/PisellUrl.stories.d.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellUrl } from './PisellUrl';
+/**
+ * PisellUrl 是一个 URL 地址输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - URL 格式校验
+ * - 协议自动补全
+ * - 链接跳转（新窗口，安全性保障）
+ * - 协议/路径显示控制
+ * - 协议白名单限制
+ */
+declare const meta: Meta<typeof PisellUrl>;
+export default meta;
+declare type Story = StoryObj<typeof PisellUrl>;
+/**
+ * 基础编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 协议自动补全
+ */
+export declare const WithProtocolAutoComplete: Story;
+/**
+ * 只读态 - 可跳转
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 隐藏协议
+ */
+export declare const ReadModeHideProtocol: Story;
+/**
+ * 只读态 - 仅域名
+ */
+export declare const ReadModeDomainOnly: Story;
+/**
+ * 禁用态（编辑）
+ */
+export declare const DisabledEdit: Story;
+/**
+ * 禁用态（只读）
+ */
+export declare const DisabledRead: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 格式校验（实时）
+ */
+export declare const FormatValidation: Story;
+/**
+ * 协议限制（仅 HTTPS）
+ */
+export declare const HttpsOnly: Story;
+/**
+ * 协议必需
+ */
+export declare const RequireProtocol: Story;
+/**
+ * 显示清空按钮
+ */
+export declare const WithClearButton: Story;
+/**
+ * 自动聚焦
+ */
+export declare const WithAutoFocus: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 显示控制对比
+ */
+export declare const DisplayFormatComparison: Story;
+/**
+ * 校验时机对比
+ */
+export declare const ValidateTriggerComparison: Story;
+/**
+ * 所有状态展示
+ */
+export declare const AllStates: Story;
+/**
+ * 完整功能示例
+ */
+export declare const CompleteExample: Story;
+/**
+ * 协议补全演示
+ */
+export declare const ProtocolCompleteDemo: Story;
+/**
+ * 链接跳转演示
+ */
+export declare const LinkClickDemo: Story;
+/**
+ * 协议限制演示
+ */
+export declare const ProtocolRestrictionDemo: Story;
+/**
+ * 完整交互示例
+ */
+export declare const InteractiveExample: Story;
+/**
+ * 协议默认值对比
+ */
+export declare const ProtocolDefaultComparison: Story;