@pisell/materials 1.8.38 → 1.8.41

package/lib/components/pisellDateTimeDisplay/docs/pisellDateTimeDisplay.md

@@ -3,7 +3,7 @@ nav:
   title: 组件
   order: 1
 group:
-  title: Display
+  title: General
   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'}}
+        />
+    );
 };
 ```