@pisell/materials 1.8.41 → 1.8.42

package/es/components/pisellDateTimeDisplay/docs/pisellDateTimeDisplay.md

@@ -3,7 +3,7 @@ nav:
   title: 组件
   order: 1
 group:
-  title: General
+  title: Display
   order: 1
 title: PisellDateTimeDisplay
 order: 1
@@ -32,35 +32,35 @@ PisellDateTimeDisplay 是一个专注于展示**当前时间**的组件，用于
 ### 简单示例
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return <PisellDateTimeDisplay/>;
+  return <PisellDateTimeDisplay />;
 };
 ```
 
 ### 基础配置
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 默认样式 */}
-            <PisellDateTimeDisplay/>
-
-            {/* 显示秒 */}
-            <PisellDateTimeDisplay
-                timeFormat={{showSeconds: true}}
-            />
-
-            {/* 12小时制 */}
-            <PisellDateTimeDisplay
-                timeFormat={{use12Hour: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 默认样式 */}
+      <PisellDateTimeDisplay />
+
+      {/* 显示秒 */}
+      <PisellDateTimeDisplay
+        timeFormat={{ showSeconds: true }}
+      />
+
+      {/* 12小时制 */}
+      <PisellDateTimeDisplay
+        timeFormat={{ use12Hour: true }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -71,84 +71,84 @@ export default () => {
 ### 水平布局（默认）
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <PisellDateTimeDisplay
-            layout="horizontal"
-        />
-    );
+  return (
+    <PisellDateTimeDisplay
+      layout="horizontal"
+    />
+  );
 };
 ```
 
 ### 垂直布局
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <PisellDateTimeDisplay
-            layout="vertical"
-        />
-    );
+  return (
+    <PisellDateTimeDisplay
+      layout="vertical"
+    />
+  );
 };
 ```
 
 ### 单行布局
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 默认分隔符 */}
-            <PisellDateTimeDisplay
-                layout="inline"
-            />
-
-            {/* 自定义分隔符 */}
-            <PisellDateTimeDisplay
-                layout="inline"
-                inlineSeparator=" | "
-            />
-
-            {/* 空格分隔符 */}
-            <PisellDateTimeDisplay
-                layout="inline"
-                inlineSeparator=" "
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 默认分隔符 */}
+      <PisellDateTimeDisplay
+        layout="inline"
+      />
+
+      {/* 自定义分隔符 */}
+      <PisellDateTimeDisplay
+        layout="inline"
+        inlineSeparator=" | "
+      />
+
+      {/* 空格分隔符 */}
+      <PisellDateTimeDisplay
+        layout="inline"
+        inlineSeparator=" "
+      />
+    </div>
+  );
 };
 ```
 
 ### 对齐方式
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16, width: 300}}>
-            {/* 左对齐 */}
-            <div style={{border: '1px solid #d9d9d9', padding: 16}}>
-                <PisellDateTimeDisplay textAlign="left"/>
-            </div>
-
-            {/* 居中对齐 */}
-            <div style={{border: '1px solid #d9d9d9', padding: 16}}>
-                <PisellDateTimeDisplay textAlign="center"/>
-            </div>
-
-            {/* 右对齐 */}
-            <div style={{border: '1px solid #d9d9d9', padding: 16}}>
-                <PisellDateTimeDisplay textAlign="right"/>
-            </div>
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}>
+      {/* 左对齐 */}
+      <div style={{ border: '1px solid #d9d9d9', padding: 16 }}>
+        <PisellDateTimeDisplay textAlign="left" />
+      </div>
+
+      {/* 居中对齐 */}
+      <div style={{ border: '1px solid #d9d9d9', padding: 16 }}>
+        <PisellDateTimeDisplay textAlign="center" />
+      </div>
+
+      {/* 右对齐 */}
+      <div style={{ border: '1px solid #d9d9d9', padding: 16 }}>
+        <PisellDateTimeDisplay textAlign="right" />
+      </div>
+    </div>
+  );
 };
 ```
 
@@ -159,59 +159,59 @@ export default () => {
 ### 24小时制（默认）
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 默认格式：13:45 */}
-            <PisellDateTimeDisplay
-                timeFormat={{use12Hour: false}}
-            />
-
-            {/* 显示秒：13:45:30 */}
-            <PisellDateTimeDisplay
-                timeFormat={{use12Hour: false, showSeconds: true}}
-            />
-
-            {/* 小时补零：01:45 */}
-            <PisellDateTimeDisplay
-                timeFormat={{use12Hour: false, padHour: true}}
-            />
-
-            {/* 只显示小时：13 */}
-            <PisellDateTimeDisplay
-                timeFormat={{onlyShowHour: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 默认格式：13:45 */}
+      <PisellDateTimeDisplay
+        timeFormat={{ use12Hour: false }}
+      />
+
+      {/* 显示秒：13:45:30 */}
+      <PisellDateTimeDisplay
+        timeFormat={{ use12Hour: false, showSeconds: true }}
+      />
+
+      {/* 小时补零：01:45 */}
+      <PisellDateTimeDisplay
+        timeFormat={{ use12Hour: false, padHour: true }}
+      />
+
+      {/* 只显示小时：13 */}
+      <PisellDateTimeDisplay
+        timeFormat={{ onlyShowHour: true }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 12小时制
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 12小时制：1:45 PM */}
-            <PisellDateTimeDisplay
-                timeFormat={{use12Hour: true}}
-            />
-
-            {/* 显示秒：1:45:30 PM */}
-            <PisellDateTimeDisplay
-                timeFormat={{use12Hour: true, showSeconds: true}}
-            />
-
-            {/* 小时补零：01:45 PM */}
-            <PisellDateTimeDisplay
-                timeFormat={{use12Hour: true, padHour: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 12小时制：1:45 PM */}
+      <PisellDateTimeDisplay
+        timeFormat={{ use12Hour: true }}
+      />
+
+      {/* 显示秒：1:45:30 PM */}
+      <PisellDateTimeDisplay
+        timeFormat={{ use12Hour: true, showSeconds: true }}
+      />
+
+      {/* 小时补零：01:45 PM */}
+      <PisellDateTimeDisplay
+        timeFormat={{ use12Hour: true, padHour: true }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -222,141 +222,141 @@ export default () => {
 ### 日期顺序
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 年-月-日 */}
-            <PisellDateTimeDisplay
-                dateFormat={{order: 'YMD', showYear: true}}
-            />
-
-            {/* 月-日-年 */}
-            <PisellDateTimeDisplay
-                dateFormat={{order: 'MDY', showYear: true}}
-            />
-
-            {/* 日-月-年 */}
-            <PisellDateTimeDisplay
-                dateFormat={{order: 'DMY', showYear: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 年-月-日 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ order: 'YMD', showYear: true }}
+      />
+
+      {/* 月-日-年 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ order: 'MDY', showYear: true }}
+      />
+
+      {/* 日-月-年 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ order: 'DMY', showYear: true }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 字段显隐
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 完整日期 */}
-            <PisellDateTimeDisplay
-                dateFormat={{showYear: true, showMonth: true, showDay: true}}
-            />
-
-            {/* 只显示月日 */}
-            <PisellDateTimeDisplay
-                dateFormat={{showYear: false, showMonth: true, showDay: true}}
-            />
-
-            {/* 只显示年月 */}
-            <PisellDateTimeDisplay
-                dateFormat={{showYear: true, showMonth: true, showDay: false}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 完整日期 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ showYear: true, showMonth: true, showDay: true }}
+      />
+
+      {/* 只显示月日 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ showYear: false, showMonth: true, showDay: true }}
+      />
+
+      {/* 只显示年月 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ showYear: true, showMonth: true, showDay: false }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 英文月份格式
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 简写月份：Mar */}
-            <PisellDateTimeDisplay
-                locale="en"
-                dateFormat={{shortMonth: true}}
-            />
-
-            {/* 完整月份：March */}
-            <PisellDateTimeDisplay
-                locale="en"
-                dateFormat={{shortMonth: false}}
-            />
-
-            {/* 数字月份：03 */}
-            <PisellDateTimeDisplay
-                locale="en"
-                dateFormat={{numericMonth: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 简写月份：Mar */}
+      <PisellDateTimeDisplay
+        locale="en"
+        dateFormat={{ shortMonth: true }}
+      />
+
+      {/* 完整月份：March */}
+      <PisellDateTimeDisplay
+        locale="en"
+        dateFormat={{ shortMonth: false }}
+      />
+
+      {/* 数字月份：03 */}
+      <PisellDateTimeDisplay
+        locale="en"
+        dateFormat={{ numericMonth: true }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 中文日期格式
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 不带单位：3-21 */}
-            <PisellDateTimeDisplay
-                locale="zh-cn"
-                dateFormat={{showChineseUnit: false}}
-            />
-
-            {/* 带单位：3月21日 */}
-            <PisellDateTimeDisplay
-                locale="zh-cn"
-                dateFormat={{showChineseUnit: true}}
-            />
-
-            {/* 完整日期：2026年3月21日 */}
-            <PisellDateTimeDisplay
-                locale="zh-cn"
-                dateFormat={{showYear: true, showChineseUnit: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 不带单位：3-21 */}
+      <PisellDateTimeDisplay
+        locale="zh-cn"
+        dateFormat={{ showChineseUnit: false }}
+      />
+
+      {/* 带单位：3月21日 */}
+      <PisellDateTimeDisplay
+        locale="zh-cn"
+        dateFormat={{ showChineseUnit: true }}
+      />
+
+      {/* 完整日期：2026年3月21日 */}
+      <PisellDateTimeDisplay
+        locale="zh-cn"
+        dateFormat={{ showYear: true, showChineseUnit: true }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 自定义分隔符
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 短横线 */}
-            <PisellDateTimeDisplay
-                dateFormat={{showYear: true, separator: '-'}}
-            />
-
-            {/* 斜杠 */}
-            <PisellDateTimeDisplay
-                dateFormat={{showYear: true, separator: '/'}}
-            />
-
-            {/* 点 */}
-            <PisellDateTimeDisplay
-                dateFormat={{showYear: true, separator: '.'}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 短横线 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ showYear: true, separator: '-' }}
+      />
+
+      {/* 斜杠 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ showYear: true, separator: '/' }}
+      />
+
+      {/* 点 */}
+      <PisellDateTimeDisplay
+        dateFormat={{ showYear: true, separator: '.' }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -367,60 +367,60 @@ export default () => {
 ### 英文星期
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 默认（缩写）：Sat */}
-            <PisellDateTimeDisplay
-                locale="en"
-                weekdayFormat={{full: false, singleLetter: false}}
-            />
-
-            {/* 完整：Saturday */}
-            <PisellDateTimeDisplay
-                locale="en"
-                weekdayFormat={{full: true}}
-            />
-
-            {/* 单字母：S */}
-            <PisellDateTimeDisplay
-                locale="en"
-                weekdayFormat={{singleLetter: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 默认（缩写）：Sat */}
+      <PisellDateTimeDisplay
+        locale="en"
+        weekdayFormat={{ full: false, singleLetter: false }}
+      />
+
+      {/* 完整：Saturday */}
+      <PisellDateTimeDisplay
+        locale="en"
+        weekdayFormat={{ full: true }}
+      />
+
+      {/* 单字母：S */}
+      <PisellDateTimeDisplay
+        locale="en"
+        weekdayFormat={{ singleLetter: true }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 中文星期
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 默认（缩写）：周六 */}
-            <PisellDateTimeDisplay
-                locale="zh-cn"
-                weekdayFormat={{full: false, singleLetter: false}}
-            />
-
-            {/* 完整：星期六 */}
-            <PisellDateTimeDisplay
-                locale="zh-cn"
-                weekdayFormat={{full: true}}
-            />
-
-            {/* 单字母：六 */}
-            <PisellDateTimeDisplay
-                locale="zh-cn"
-                weekdayFormat={{singleLetter: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 默认（缩写）：周六 */}
+      <PisellDateTimeDisplay
+        locale="zh-cn"
+        weekdayFormat={{ full: false, singleLetter: false }}
+      />
+
+      {/* 完整：星期六 */}
+      <PisellDateTimeDisplay
+        locale="zh-cn"
+        weekdayFormat={{ full: true }}
+      />
+
+      {/* 单字母：六 */}
+      <PisellDateTimeDisplay
+        locale="zh-cn"
+        weekdayFormat={{ singleLetter: true }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -431,59 +431,59 @@ export default () => {
 ### 字段显隐
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 只显示时间 */}
-            <PisellDateTimeDisplay
-                fields={{showTime: true, showDate: false, showWeekday: false}}
-            />
-
-            {/* 只显示日期 */}
-            <PisellDateTimeDisplay
-                fields={{showTime: false, showDate: true, showWeekday: false}}
-            />
-
-            {/* 只显示星期 */}
-            <PisellDateTimeDisplay
-                fields={{showTime: false, showDate: false, showWeekday: true}}
-            />
-
-            {/* 显示时间和日期 */}
-            <PisellDateTimeDisplay
-                fields={{showTime: true, showDate: true, showWeekday: false}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 只显示时间 */}
+      <PisellDateTimeDisplay
+        fields={{ showTime: true, showDate: false, showWeekday: false }}
+      />
+
+      {/* 只显示日期 */}
+      <PisellDateTimeDisplay
+        fields={{ showTime: false, showDate: true, showWeekday: false }}
+      />
+
+      {/* 只显示星期 */}
+      <PisellDateTimeDisplay
+        fields={{ showTime: false, showDate: false, showWeekday: true }}
+      />
+
+      {/* 显示时间和日期 */}
+      <PisellDateTimeDisplay
+        fields={{ showTime: true, showDate: true, showWeekday: false }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 字段排序
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 默认顺序：时间、日期、星期 */}
-            <PisellDateTimeDisplay
-                fields={{fieldOrder: ['time', 'date', 'weekday']}}
-            />
-
-            {/* 日期在前 */}
-            <PisellDateTimeDisplay
-                fields={{fieldOrder: ['date', 'time', 'weekday']}}
-            />
-
-            {/* 星期在前 */}
-            <PisellDateTimeDisplay
-                fields={{fieldOrder: ['weekday', 'date', 'time']}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 默认顺序：时间、日期、星期 */}
+      <PisellDateTimeDisplay
+        fields={{ fieldOrder: ['time', 'date', 'weekday'] }}
+      />
+
+      {/* 日期在前 */}
+      <PisellDateTimeDisplay
+        fields={{ fieldOrder: ['date', 'time', 'weekday'] }}
+      />
+
+      {/* 星期在前 */}
+      <PisellDateTimeDisplay
+        fields={{ fieldOrder: ['weekday', 'date', 'time'] }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -494,32 +494,32 @@ export default () => {
 ### 标准格式
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* ISO 格式 */}
-            <PisellDateTimeDisplay
-                customFormat="YYYY-MM-DD HH:mm:ss"
-            />
-
-            {/* 简短格式 */}
-            <PisellDateTimeDisplay
-                customFormat="MM/DD HH:mm"
-            />
-
-            {/* 中文格式 */}
-            <PisellDateTimeDisplay
-                customFormat="YYYY年MM月DD日 HH:mm"
-            />
-
-            {/* 包含星期 */}
-            <PisellDateTimeDisplay
-                customFormat="YYYY-MM-DD dddd HH:mm"
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* ISO 格式 */}
+      <PisellDateTimeDisplay
+        customFormat="YYYY-MM-DD HH:mm:ss"
+      />
+
+      {/* 简短格式 */}
+      <PisellDateTimeDisplay
+        customFormat="MM/DD HH:mm"
+      />
+
+      {/* 中文格式 */}
+      <PisellDateTimeDisplay
+        customFormat="YYYY年MM月DD日 HH:mm"
+      />
+
+      {/* 包含星期 */}
+      <PisellDateTimeDisplay
+        customFormat="YYYY-MM-DD dddd HH:mm"
+      />
+    </div>
+  );
 };
 ```
 
@@ -530,30 +530,30 @@ export default () => {
 ### 自动刷新
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 默认刷新（60秒） */}
-            <PisellDateTimeDisplay/>
-
-            {/* 显示秒（1秒刷新） */}
-            <PisellDateTimeDisplay
-                timeFormat={{showSeconds: true}}
-            />
-
-            {/* 自定义刷新间隔（5秒） */}
-            <PisellDateTimeDisplay
-                refreshInterval={5000}
-            />
-
-            {/* 禁用自动刷新 */}
-            <PisellDateTimeDisplay
-                disableAutoRefresh={true}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 默认刷新（60秒） */}
+      <PisellDateTimeDisplay />
+
+      {/* 显示秒（1秒刷新） */}
+      <PisellDateTimeDisplay
+        timeFormat={{ showSeconds: true }}
+      />
+
+      {/* 自定义刷新间隔（5秒） */}
+      <PisellDateTimeDisplay
+        refreshInterval={5000}
+      />
+
+      {/* 禁用自动刷新 */}
+      <PisellDateTimeDisplay
+        disableAutoRefresh={true}
+      />
+    </div>
+  );
 };
 ```
 
@@ -564,30 +564,30 @@ export default () => {
 ### 语言切换
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 中文 */}
-            <PisellDateTimeDisplay
-                locale="zh-cn"
-                dateFormat={{showYear: true, showChineseUnit: true}}
-            />
-
-            {/* 英文 */}
-            <PisellDateTimeDisplay
-                locale="en"
-                dateFormat={{showYear: true}}
-            />
-
-            {/* 日文 */}
-            <PisellDateTimeDisplay
-                locale="ja"
-                dateFormat={{showYear: true}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 中文 */}
+      <PisellDateTimeDisplay
+        locale="zh-cn"
+        dateFormat={{ showYear: true, showChineseUnit: true }}
+      />
+
+      {/* 英文 */}
+      <PisellDateTimeDisplay
+        locale="en"
+        dateFormat={{ showYear: true }}
+      />
+
+      {/* 日文 */}
+      <PisellDateTimeDisplay
+        locale="ja"
+        dateFormat={{ showYear: true }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -598,65 +598,65 @@ export default () => {
 ### 容器样式
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', gap: 16}}>
-            {/* 默认样式 */}
-            <PisellDateTimeDisplay/>
-
-            {/* 自定义容器样式 */}
-            <PisellDateTimeDisplay
-                containerStyle={{
-                    background: '#f5f5f5',
-                    borderRadius: 8,
-                    border: '1px solid #d9d9d9',
-                    padding: 16,
-                }}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      {/* 默认样式 */}
+      <PisellDateTimeDisplay />
+
+      {/* 自定义容器样式 */}
+      <PisellDateTimeDisplay
+        containerStyle={{
+          background: '#f5f5f5',
+          borderRadius: 8,
+          border: '1px solid #d9d9d9',
+          padding: 16,
+        }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 文本样式
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-            {/* 自定义时间样式 */}
-            <PisellDateTimeDisplay
-                timeStyle={{
-                    fontSize: 32,
-                    fontWeight: 700,
-                    color: '#1890ff',
-                }}
-            />
-
-            {/* 自定义所有样式 */}
-            <PisellDateTimeDisplay
-                timeStyle={{
-                    fontSize: 28,
-                    fontWeight: 600,
-                    color: '#000',
-                }}
-                dateStyle={{
-                    fontSize: 16,
-                    fontWeight: 400,
-                    color: '#666',
-                }}
-                weekdayStyle={{
-                    fontSize: 14,
-                    fontWeight: 400,
-                    color: '#999',
-                }}
-            />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 自定义时间样式 */}
+      <PisellDateTimeDisplay
+        timeStyle={{
+          fontSize: 32,
+          fontWeight: 700,
+          color: '#1890ff',
+        }}
+      />
+
+      {/* 自定义所有样式 */}
+      <PisellDateTimeDisplay
+        timeStyle={{
+          fontSize: 28,
+          fontWeight: 600,
+          color: '#000',
+        }}
+        dateStyle={{
+          fontSize: 16,
+          fontWeight: 400,
+          color: '#666',
+        }}
+        weekdayStyle={{
+          fontSize: 14,
+          fontWeight: 400,
+          color: '#999',
+        }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -667,143 +667,143 @@ export default () => {
 ### 后台首页
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div style={{padding: 24, background: '#fff', borderRadius: 8}}>
-            <PisellDateTimeDisplay
-                layout="horizontal"
-                timeFormat={{showSeconds: false}}
-                dateFormat={{showYear: true, showChineseUnit: true}}
-                locale="zh-cn"
-                timeStyle={{fontSize: 32, fontWeight: 700}}
-                dateStyle={{fontSize: 18, fontWeight: 400, color: '#666'}}
-                weekdayStyle={{fontSize: 18, fontWeight: 400, color: '#666'}}
-            />
-        </div>
-    );
+  return (
+    <div style={{ padding: 24, background: '#fff', borderRadius: 8 }}>
+      <PisellDateTimeDisplay
+        layout="horizontal"
+        timeFormat={{ showSeconds: false }}
+        dateFormat={{ showYear: true, showChineseUnit: true }}
+        locale="zh-cn"
+        timeStyle={{ fontSize: 32, fontWeight: 700 }}
+        dateStyle={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+        weekdayStyle={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 欢迎页
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div
-            style={{
-                height: 300,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                borderRadius: 8,
-            }}
-        >
-            <PisellDateTimeDisplay
-                layout="vertical"
-                textAlign="center"
-                timeFormat={{use12Hour: true, showSeconds: true}}
-                dateFormat={{showYear: true}}
-                locale="en"
-                containerStyle={{
-                    background: 'rgba(255, 255, 255, 0.2)',
-                    borderRadius: 16,
-                    padding: 32,
-                }}
-                timeStyle={{
-                    fontSize: 48,
-                    fontWeight: 700,
-                    color: '#fff',
-                }}
-                dateStyle={{
-                    fontSize: 20,
-                    fontWeight: 400,
-                    color: 'rgba(255, 255, 255, 0.9)',
-                }}
-                weekdayStyle={{
-                    fontSize: 18,
-                    fontWeight: 400,
-                    color: 'rgba(255, 255, 255, 0.8)',
-                }}
-            />
-        </div>
-    );
+  return (
+    <div
+      style={{
+        height: 300,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        borderRadius: 8,
+      }}
+    >
+      <PisellDateTimeDisplay
+        layout="vertical"
+        textAlign="center"
+        timeFormat={{ use12Hour: true, showSeconds: true }}
+        dateFormat={{ showYear: true }}
+        locale="en"
+        containerStyle={{
+          background: 'rgba(255, 255, 255, 0.2)',
+          borderRadius: 16,
+          padding: 32,
+        }}
+        timeStyle={{
+          fontSize: 48,
+          fontWeight: 700,
+          color: '#fff',
+        }}
+        dateStyle={{
+          fontSize: 20,
+          fontWeight: 400,
+          color: 'rgba(255, 255, 255, 0.9)',
+        }}
+        weekdayStyle={{
+          fontSize: 18,
+          fontWeight: 400,
+          color: 'rgba(255, 255, 255, 0.8)',
+        }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 大屏展示
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div
-            style={{
-                height: 200,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: '#000',
-                borderRadius: 8,
-            }}
-        >
-            <PisellDateTimeDisplay
-                layout="inline"
-                inlineSeparator=" "
-                timeFormat={{showSeconds: true}}
-                dateFormat={{showYear: true}}
-                customFormat="YYYY-MM-DD HH:mm:ss"
-                containerStyle={{
-                    padding: 24,
-                }}
-                style={{
-                    fontSize: 48,
-                    fontWeight: 700,
-                    color: '#0f0',
-                    fontFamily: 'monospace',
-                }}
-            />
-        </div>
-    );
+  return (
+    <div
+      style={{
+        height: 200,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#000',
+        borderRadius: 8,
+      }}
+    >
+      <PisellDateTimeDisplay
+        layout="inline"
+        inlineSeparator=" "
+        timeFormat={{ showSeconds: true }}
+        dateFormat={{ showYear: true }}
+        customFormat="YYYY-MM-DD HH:mm:ss"
+        containerStyle={{
+          padding: 24,
+        }}
+        style={{
+          fontSize: 48,
+          fontWeight: 700,
+          color: '#0f0',
+          fontFamily: 'monospace',
+        }}
+      />
+    </div>
+  );
 };
 ```
 
 ### 状态栏
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
+import { PisellDateTimeDisplay } from '@pisell/materials';
 
 export default () => {
-    return (
-        <div
-            style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                padding: '12px 24px',
-                background: '#001529',
-                color: '#fff',
-            }}
-        >
-            <div style={{fontSize: 18, fontWeight: 600}}>
-                系统管理后台
-            </div>
-
-            <PisellDateTimeDisplay
-                layout="inline"
-                inlineSeparator=" | "
-                timeFormat={{showSeconds: false}}
-                dateFormat={{showYear: false}}
-                locale="zh-cn"
-                style={{color: 'rgba(255, 255, 255, 0.8)'}}
-            />
-        </div>
-    );
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '12px 24px',
+        background: '#001529',
+        color: '#fff',
+      }}
+    >
+      <div style={{ fontSize: 18, fontWeight: 600 }}>
+        系统管理后台
+      </div>
+      
+      <PisellDateTimeDisplay
+        layout="inline"
+        inlineSeparator=" | "
+        timeFormat={{ showSeconds: false }}
+        dateFormat={{ showYear: false }}
+        locale="zh-cn"
+        style={{ color: 'rgba(255, 255, 255, 0.8)' }}
+      />
+    </div>
+  );
 };
 ```
 
@@ -814,41 +814,41 @@ export default () => {
 ### 时间更新回调
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
-import {message} from 'antd';
-import type {Dayjs} from 'dayjs';
+import { PisellDateTimeDisplay } from '@pisell/materials';
+import { message } from 'antd';
+import type { Dayjs } from 'dayjs';
 
 export default () => {
-    const handleTimeUpdate = (currentTime: Dayjs) => {
-        console.log('当前时间:', currentTime.format('YYYY-MM-DD HH:mm:ss'));
-    };
-
-    return (
-        <PisellDateTimeDisplay
-            timeFormat={{showSeconds: true}}
-            onTimeUpdate={handleTimeUpdate}
-        />
-    );
+  const handleTimeUpdate = (currentTime: Dayjs) => {
+    console.log('当前时间:', currentTime.format('YYYY-MM-DD HH:mm:ss'));
+  };
+
+  return (
+    <PisellDateTimeDisplay
+      timeFormat={{ showSeconds: true }}
+      onTimeUpdate={handleTimeUpdate}
+    />
+  );
 };
 ```
 
 ### 点击事件
 
 ```tsx
-import {PisellDateTimeDisplay} from '@pisell/materials';
-import {message} from 'antd';
+import { PisellDateTimeDisplay } from '@pisell/materials';
+import { message } from 'antd';
 
 export default () => {
-    const handleClick = () => {
-        message.info('时间组件被点击了！');
-    };
-
-    return (
-        <PisellDateTimeDisplay
-            onClick={handleClick}
-            style={{cursor: 'pointer'}}
-        />
-    );
+  const handleClick = () => {
+    message.info('时间组件被点击了！');
+  };
+
+  return (
+    <PisellDateTimeDisplay
+      onClick={handleClick}
+      style={{ cursor: 'pointer' }}
+    />
+  );
 };
 ```