@pisell/materials 1.8.38 → 1.8.41

package/es/components/pisellTimeRangeDisplay/docs/pisellTimeRangeDisplay.md

@@ -3,7 +3,7 @@ nav:
   title: 组件
   order: 1
 group:
-  title: Display
+  title: General
   order: 1
 title: PisellTimeRangeDisplay
 order: 2
@@ -14,7 +14,8 @@ category: pro
 
 ## 组件介绍
 
-PisellTimeRangeDisplay 是一个专注于展示**时间区间 + 持续时间**的纯展示型组件，用于在不同语言、时区与信息密度下，将开始时间（startAt）与结束时间（endAt）格式化为「时间区间 + 持续时间」的紧凑表达。
+PisellTimeRangeDisplay 是一个专注于展示**时间区间 + 持续时间**
+的纯展示型组件，用于在不同语言、时区与信息密度下，将开始时间（startAt）与结束时间（endAt）格式化为「时间区间 + 持续时间」的紧凑表达。
 
 **核心特性**：
 
@@ -33,30 +34,30 @@ PisellTimeRangeDisplay 是一个专注于展示**时间区间 + 持续时间**
 ### 简单示例（同一天）
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellTimeRangeDisplay
-      startAt="2026-02-04 09:00"
-      endAt="2026-02-04 18:00"
-    />
-  );
+    return (
+        <PisellTimeRangeDisplay
+            startAt="2026-02-04 09:00"
+            endAt="2026-02-04 18:00"
+        />
+    );
 };
 ```
 
 ### 跨天示例
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellTimeRangeDisplay
-      startAt="2026-02-04 10:15"
-      endAt="2026-02-05 11:30"
-    />
-  );
+    return (
+        <PisellTimeRangeDisplay
+            startAt="2026-02-04 10:15"
+            endAt="2026-02-05 11:30"
+        />
+    );
 };
 ```
 
@@ -67,22 +68,22 @@ export default () => {
 ### 文本对齐
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 320 }}>
-      <div style={{ border: '1px solid #d9d9d9', padding: 16 }}>
-        <PisellTimeRangeDisplay startAt="2026-02-04 09:00" endAt="2026-02-04 18:00" textAlign="left" />
-      </div>
-      <div style={{ border: '1px solid #d9d9d9', padding: 16 }}>
-        <PisellTimeRangeDisplay startAt="2026-02-04 09:00" endAt="2026-02-04 18:00" textAlign="center" />
-      </div>
-      <div style={{ border: '1px solid #d9d9d9', padding: 16 }}>
-        <PisellTimeRangeDisplay startAt="2026-02-04 09:00" endAt="2026-02-04 18:00" textAlign="right" />
-      </div>
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16, width: 320}}>
+            <div style={{border: '1px solid #d9d9d9', padding: 16}}>
+                <PisellTimeRangeDisplay startAt="2026-02-04 09:00" endAt="2026-02-04 18:00" textAlign="left"/>
+            </div>
+            <div style={{border: '1px solid #d9d9d9', padding: 16}}>
+                <PisellTimeRangeDisplay startAt="2026-02-04 09:00" endAt="2026-02-04 18:00" textAlign="center"/>
+            </div>
+            <div style={{border: '1px solid #d9d9d9', padding: 16}}>
+                <PisellTimeRangeDisplay startAt="2026-02-04 09:00" endAt="2026-02-04 18:00" textAlign="right"/>
+            </div>
+        </div>
+    );
 };
 ```
 
@@ -93,76 +94,76 @@ export default () => {
 ### 字段显隐
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {/* 只显示时间区间 + 持续时长 */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00"
-        endAt="2026-02-04 18:00"
-        fields={{ showTimeRange: true, showDate: false, showWeekday: false, showDuration: true }}
-      />
-      {/* 只显示时间区间 */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00"
-        endAt="2026-02-04 18:00"
-        fields={{ showTimeRange: true, showDate: false, showWeekday: false, showDuration: false }}
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+            {/* 只显示时间区间 + 持续时长 */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00"
+                endAt="2026-02-04 18:00"
+                fields={{showTimeRange: true, showDate: false, showWeekday: false, showDuration: true}}
+            />
+            {/* 只显示时间区间 */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00"
+                endAt="2026-02-04 18:00"
+                fields={{showTimeRange: true, showDate: false, showWeekday: false, showDuration: false}}
+            />
+        </div>
+    );
 };
 ```
 
 ### 字段排序（持续时间在前）
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {/* 默认：星期、日期、时间、持续时长 */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 10:15"
-        endAt="2026-02-04 10:45"
-        showDateForSameDay
-      />
-      {/* 持续时间在前 */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 10:15"
-        endAt="2026-02-04 10:45"
-        fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
-        showDateForSameDay
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+            {/* 默认：星期、日期、时间、持续时长 */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 10:15"
+                endAt="2026-02-04 10:45"
+                showDateForSameDay
+            />
+            {/* 持续时间在前 */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 10:15"
+                endAt="2026-02-04 10:45"
+                fields={{fieldOrder: ['time', 'duration', 'date', 'weekday']}}
+                showDateForSameDay
+            />
+        </div>
+    );
 };
 ```
 
 ### 同一天是否显示日期
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {/* 显示具体日期（默认） */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00"
-        endAt="2026-02-04 18:00"
-        showDateForSameDay
-      />
-      {/* 同一天不显示日期 */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00"
-        endAt="2026-02-04 18:00"
-        showDateForSameDay={false}
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+            {/* 显示具体日期（默认） */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00"
+                endAt="2026-02-04 18:00"
+                showDateForSameDay
+            />
+            {/* 同一天不显示日期 */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00"
+                endAt="2026-02-04 18:00"
+                showDateForSameDay={false}
+            />
+        </div>
+    );
 };
 ```
 
@@ -173,40 +174,40 @@ export default () => {
 ### 24 小时制 / 显示秒
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00"
-        endAt="2026-02-04 18:30"
-        timeFormat={{ use12Hour: false }}
-      />
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00:00"
-        endAt="2026-02-04 18:30:45"
-        timeFormat={{ use12Hour: false, showSeconds: true }}
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00"
+                endAt="2026-02-04 18:30"
+                timeFormat={{use12Hour: false}}
+            />
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00:00"
+                endAt="2026-02-04 18:30:45"
+                timeFormat={{use12Hour: false, showSeconds: true}}
+            />
+        </div>
+    );
 };
 ```
 
 ### 12 小时制
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellTimeRangeDisplay
-      startAt="2026-02-04 09:00"
-      endAt="2026-02-04 18:00"
-      timeFormat={{ use12Hour: true }}
-      locale="en"
-    />
-  );
+    return (
+        <PisellTimeRangeDisplay
+            startAt="2026-02-04 09:00"
+            endAt="2026-02-04 18:00"
+            timeFormat={{use12Hour: true}}
+            locale="en"
+        />
+    );
 };
 ```
 
@@ -217,24 +218,24 @@ export default () => {
 ### 是否显示秒
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {/* 默认不显示秒：2h30m */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00"
-        endAt="2026-02-04 11:30"
-      />
-      {/* 显示秒：2h30m23s */}
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 09:00:00"
-        endAt="2026-02-04 11:30:23"
-        durationFormat={{ showSeconds: true }}
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+            {/* 默认不显示秒：2h30m */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00"
+                endAt="2026-02-04 11:30"
+            />
+            {/* 显示秒：2h30m23s */}
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 09:00:00"
+                endAt="2026-02-04 11:30:23"
+                durationFormat={{showSeconds: true}}
+            />
+        </div>
+    );
 };
 ```
 
@@ -245,28 +246,28 @@ export default () => {
 ### 日期顺序与星期
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 10:15"
-        endAt="2026-02-04 10:45"
-        showDateForSameDay
-        dateFormat={{ showRelativeDay: false, order: 'DMY', showYear: true }}
-        weekdayFormat={{ full: false }}
-        locale="zh-cn"
-      />
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 10:15"
-        endAt="2026-02-04 10:45"
-        showDateForSameDay
-        dateFormat={{ showRelativeDay: false, order: 'YMD', showYear: true }}
-        locale="en"
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 10:15"
+                endAt="2026-02-04 10:45"
+                showDateForSameDay
+                dateFormat={{showRelativeDay: false, order: 'DMY', showYear: true}}
+                weekdayFormat={{full: false}}
+                locale="zh-cn"
+            />
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 10:15"
+                endAt="2026-02-04 10:45"
+                showDateForSameDay
+                dateFormat={{showRelativeDay: false, order: 'YMD', showYear: true}}
+                locale="en"
+            />
+        </div>
+    );
 };
 ```
 
@@ -277,25 +278,25 @@ export default () => {
 ### 语言切换
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 10:15"
-        endAt="2026-02-04 10:45"
-        locale="zh-cn"
-        showDateForSameDay
-      />
-      <PisellTimeRangeDisplay
-        startAt="2026-02-04 10:15"
-        endAt="2026-02-04 10:45"
-        locale="en"
-        showDateForSameDay
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 10:15"
+                endAt="2026-02-04 10:45"
+                locale="zh-cn"
+                showDateForSameDay
+            />
+            <PisellTimeRangeDisplay
+                startAt="2026-02-04 10:15"
+                endAt="2026-02-04 10:45"
+                locale="en"
+                showDateForSameDay
+            />
+        </div>
+    );
 };
 ```
 
@@ -306,40 +307,40 @@ export default () => {
 ### 容器样式
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellTimeRangeDisplay
-      startAt="2026-02-04 09:00"
-      endAt="2026-02-04 18:00"
-      containerStyle={{
-        background: '#f5f5f5',
-        borderRadius: 8,
-        border: '1px solid #d9d9d9',
-        padding: 16,
-        gap: 8,
-      }}
-    />
-  );
+    return (
+        <PisellTimeRangeDisplay
+            startAt="2026-02-04 09:00"
+            endAt="2026-02-04 18:00"
+            containerStyle={{
+                background: '#f5f5f5',
+                borderRadius: 8,
+                border: '1px solid #d9d9d9',
+                padding: 16,
+                gap: 8,
+            }}
+        />
+    );
 };
 ```
 
 ### 文本样式
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellTimeRangeDisplay
-      startAt="2026-02-04 09:00"
-      endAt="2026-02-04 18:00"
-      timeStyle={{ fontSize: 18, fontWeight: 600, color: '#1890ff' }}
-      dateStyle={{ fontSize: 14, color: '#666' }}
-      durationStyle={{ fontSize: 14, color: '#999' }}
-    />
-  );
+    return (
+        <PisellTimeRangeDisplay
+            startAt="2026-02-04 09:00"
+            endAt="2026-02-04 18:00"
+            timeStyle={{fontSize: 18, fontWeight: 600, color: '#1890ff'}}
+            dateStyle={{fontSize: 14, color: '#666'}}
+            durationStyle={{fontSize: 14, color: '#999'}}
+        />
+    );
 };
 ```
 
@@ -350,18 +351,18 @@ export default () => {
 ### 点击事件
 
 ```tsx
-import { PisellTimeRangeDisplay } from '@pisell/materials';
-import { message } from 'antd';
+import {PisellTimeRangeDisplay} from '@pisell/materials';
+import {message} from 'antd';
 
 export default () => {
-  return (
-    <PisellTimeRangeDisplay
-      startAt="2026-02-04 09:00"
-      endAt="2026-02-04 18:00"
-      onClick={() => message.info('时间区间被点击')}
-      style={{ cursor: 'pointer' }}
-    />
-  );
+    return (
+        <PisellTimeRangeDisplay
+            startAt="2026-02-04 09:00"
+            endAt="2026-02-04 18:00"
+            onClick={() => message.info('时间区间被点击')}
+            style={{cursor: 'pointer'}}
+        />
+    );
 };
 ```
 
@@ -373,55 +374,55 @@ export default () => {
 
 #### 数据
 
-| 参数     | 说明               | 类型                    | 默认值 |
-|----------|--------------------|-------------------------|--------|
-| startAt  | 开始时间（dayjs 兼容） | `Dayjs \| string \| number` | -      |
-| endAt    | 结束时间（dayjs 兼容） | `Dayjs \| string \| number` | -      |
+| 参数      | 说明             | 类型                          | 默认值 |
+|---------|----------------|-----------------------------|-----|
+| startAt | 开始时间（dayjs 兼容） | `Dayjs \| string \| number` | -   |
+| endAt   | 结束时间（dayjs 兼容） | `Dayjs \| string \| number` | -   |
 
 #### 布局配置
 
-| 参数       | 说明       | 类型                          | 默认值     |
-|------------|------------|-------------------------------|------------|
-| textAlign  | 文本对齐   | `'left' \| 'center' \| 'right'` | `'center'` |
+| 参数        | 说明   | 类型                              | 默认值        |
+|-----------|------|---------------------------------|------------|
+| textAlign | 文本对齐 | `'left' \| 'center' \| 'right'` | `'center'` |
 
 #### 字段配置
 
-| 参数                 | 说明           | 类型            | 默认值 |
-|----------------------|----------------|-----------------|--------|
-| fields.showTimeRange | 是否显示时间区间 | `boolean`       | `true` |
-| fields.showDate      | 是否显示日期   | `boolean`       | `true` |
-| fields.showWeekday   | 是否显示星期   | `boolean`       | `true` |
-| fields.showDuration  | 是否显示持续时长 | `boolean`       | `true` |
-| fields.fieldOrder    | 字段顺序       | `TimeRangeFieldType[]` | `['weekday', 'date', 'time', 'duration']` |
-| showDateForSameDay   | 同一天时是否显示具体日期 | `boolean` | `true` |
+| 参数                   | 说明           | 类型                     | 默认值                                       |
+|----------------------|--------------|------------------------|-------------------------------------------|
+| fields.showTimeRange | 是否显示时间区间     | `boolean`              | `true`                                    |
+| fields.showDate      | 是否显示日期       | `boolean`              | `true`                                    |
+| fields.showWeekday   | 是否显示星期       | `boolean`              | `true`                                    |
+| fields.showDuration  | 是否显示持续时长     | `boolean`              | `true`                                    |
+| fields.fieldOrder    | 字段顺序         | `TimeRangeFieldType[]` | `['weekday', 'date', 'time', 'duration']` |
+| showDateForSameDay   | 同一天时是否显示具体日期 | `boolean`              | `true`                                    |
 
 #### 格式化配置
 
-| 参数                 | 说明           | 类型            |
-|----------------------|----------------|-----------------|
-| timeFormat           | 时间格式（同 PisellDateTimeDisplay） | `TimeFormatConfig` |
-| dateFormat           | 日期格式       | `DateFormatConfig` |
-| weekdayFormat        | 星期格式       | `WeekdayFormatConfig` |
-| durationFormat.showSeconds | 持续时长是否显示秒 | `boolean`，默认 `false` |
+| 参数                         | 说明                            | 类型                    |
+|----------------------------|-------------------------------|-----------------------|
+| timeFormat                 | 时间格式（同 PisellDateTimeDisplay） | `TimeFormatConfig`    |
+| dateFormat                 | 日期格式                          | `DateFormatConfig`    |
+| weekdayFormat              | 星期格式                          | `WeekdayFormatConfig` |
+| durationFormat.showSeconds | 持续时长是否显示秒                     | `boolean`，默认 `false`  |
 
 #### 样式配置
 
-| 参数           | 说明         | 类型                  |
-|----------------|--------------|-----------------------|
-| containerStyle | 容器样式     | `ContainerStyleConfig` |
-| timeStyle      | 时间文本样式 | `TextStyleConfig`     |
-| dateStyle      | 日期文本样式 | `TextStyleConfig`     |
-| weekdayStyle   | 星期文本样式 | `TextStyleConfig`     |
-| durationStyle  | 持续时长样式 | `TextStyleConfig`     |
-| className      | 自定义类名   | `string`              |
-| style          | 自定义样式   | `CSSProperties`      |
+| 参数             | 说明     | 类型                     |
+|----------------|--------|------------------------|
+| containerStyle | 容器样式   | `ContainerStyleConfig` |
+| timeStyle      | 时间文本样式 | `TextStyleConfig`      |
+| dateStyle      | 日期文本样式 | `TextStyleConfig`      |
+| weekdayStyle   | 星期文本样式 | `TextStyleConfig`      |
+| durationStyle  | 持续时长样式 | `TextStyleConfig`      |
+| className      | 自定义类名  | `string`               |
+| style          | 自定义样式  | `CSSProperties`        |
 
 #### 国际化与事件
 
-| 参数    | 说明       | 类型         |
-|---------|------------|--------------|
+| 参数      | 说明       | 类型           |
+|---------|----------|--------------|
 | locale  | dayjs 语言 | `string`     |
-| onClick | 点击回调   | `() => void` |
+| onClick | 点击回调     | `() => void` |
 
 ---
 

package/es/components/pisellUrl/PisellUrl.js

@@ -1,8 +1,10 @@
+import { getPisellComponentsThemeConfig } from "../../theme/pisell-components.js";
 import ReadOnlyView from "./components/ReadOnlyView.js";
 import EditView from "./components/EditView.js";
 import DisabledView from "./components/DisabledView.js";
 import React from "react";
 import { getDisplayState } from "@pisell/utils";
+import { ConfigProvider } from "antd";
 import "./PisellUrl.less";
 //#region src/components/pisellUrl/PisellUrl.tsx
 /**
@@ -38,12 +40,17 @@ import "./PisellUrl.less";
 */
 const PisellUrl = (props) => {
 	const { mode = "edit", disabled = false } = props;
-	switch (getDisplayState(mode, disabled)) {
-		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;
-	}
+	const displayState = getDisplayState(mode, disabled);
+	const render = () => {
+		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;
+		}
+	};
+	const theme = getPisellComponentsThemeConfig();
+	return /* @__PURE__ */ React.createElement(ConfigProvider, { theme }, render());
 };
 var PisellUrl_default = React.memo(PisellUrl, (prevProps, nextProps) => {
 	return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.autoCompleteProtocol === nextProps.autoCompleteProtocol;