@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.js

@@ -0,0 +1,1159 @@
+import PisellDateTimeDisplay from "./PisellDateTimeDisplay";
+
+/**
+ * PisellDateTimeDisplay 组件 Storybook
+ */
+var meta = {
+  title: 'Data Display/PisellDateTimeDisplay',
+  component: PisellDateTimeDisplay,
+  tags: ['autodocs'],
+  argTypes: {
+    layout: {
+      control: 'radio',
+      options: ['horizontal', 'vertical', 'inline'],
+      description: '布局方向'
+    },
+    textAlign: {
+      control: 'radio',
+      options: ['left', 'center', 'right'],
+      description: '文本对齐方式'
+    },
+    locale: {
+      control: 'select',
+      options: ['zh-cn', 'en', 'ja'],
+      description: '语言'
+    }
+  }
+};
+export default meta;
+/**
+ * 基础示例
+ */
+export var Basic = {
+  args: {}
+};
+
+/**
+ * 水平布局（默认）
+ */
+export var HorizontalLayout = {
+  args: {
+    layout: 'horizontal'
+  }
+};
+
+/**
+ * 垂直布局
+ */
+export var VerticalLayout = {
+  args: {
+    layout: 'vertical'
+  }
+};
+
+/**
+ * 单行布局
+ */
+export var InlineLayout = {
+  args: {
+    layout: 'inline'
+  }
+};
+
+/**
+ * 单行布局 - 自定义分隔符
+ */
+export var InlineWithCustomSeparator = {
+  args: {
+    layout: 'inline',
+    inlineSeparator: ' | '
+  }
+};
+
+/**
+ * 中文完整日期格式：2025-12-31 - 2:00 周四
+ * 单行、日期在前、日期与时间之间 " - "、时间与星期之间空格
+ */
+export var InlineDateTimeWeekdayZh = {
+  args: {
+    layout: 'inline',
+    locale: 'zh-cn',
+    fields: {
+      fieldOrder: ['date', 'time', 'weekday'],
+      inlineSeparators: [' - ', ' ']
+    },
+    dateFormat: {
+      order: 'YMD',
+      showYear: true,
+      separator: '-',
+      showChineseUnit: false,
+      showRelativeDay: false
+    }
+  }
+};
+
+/**
+ * 12小时制
+ */
+export var Time12Hour = {
+  args: {
+    timeFormat: {
+      use12Hour: true
+    }
+  }
+};
+
+/**
+ * 显示秒
+ */
+export var TimeWithSeconds = {
+  args: {
+    timeFormat: {
+      showSeconds: true
+    }
+  }
+};
+
+/**
+ * 12小时制 + 显示秒
+ */
+export var Time12HourWithSeconds = {
+  args: {
+    timeFormat: {
+      use12Hour: true,
+      showSeconds: true
+    }
+  }
+};
+
+/**
+ * 小时补零
+ */
+export var TimePadHour = {
+  args: {
+    timeFormat: {
+      use12Hour: true,
+      padHour: true
+    }
+  }
+};
+
+/**
+ * 只显示小时
+ */
+export var TimeOnlyHour = {
+  args: {
+    timeFormat: {
+      onlyShowHour: true
+    }
+  }
+};
+
+/**
+ * 完整日期（Y-M-D）
+ */
+export var DateFullYMD = {
+  args: {
+    dateFormat: {
+      order: 'YMD',
+      showYear: true,
+      showMonth: true,
+      showDay: true
+    }
+  }
+};
+
+/**
+ * 月-日-年 格式
+ */
+export var DateMDY = {
+  args: {
+    locale: 'en',
+    dateFormat: {
+      order: 'MDY',
+      showYear: true
+    }
+  }
+};
+
+/**
+ * 日-月-年 格式
+ */
+export var DateDMY = {
+  args: {
+    locale: 'en',
+    dateFormat: {
+      order: 'DMY',
+      showYear: true
+    }
+  }
+};
+
+/**
+ * 中文日期带单位
+ */
+export var DateChinese = {
+  args: {
+    locale: 'zh-cn',
+    dateFormat: {
+      showYear: true,
+      showChineseUnit: true
+    }
+  }
+};
+
+/**
+ * 相对日：今天/昨天/明天
+ * 与「当前日期」同天显示「今天」，前一天「昨天」，后一天「明天」；其他日期仍按原格式。
+ * 参考日为 dayjs()，随时间变化：例如 2 月 4 日当天，2 月 4 日显示「今天」，2 月 3 日显示「昨天」。
+ */
+export var RelativeDay = {
+  args: {
+    layout: 'horizontal',
+    dateFormat: {
+      showRelativeDay: true,
+      showYear: true,
+      showChineseUnit: true
+    },
+    locale: 'zh-cn'
+  }
+};
+
+/**
+ * 相对日 - 英文
+ */
+export var RelativeDayEn = {
+  args: {
+    layout: 'horizontal',
+    dateFormat: {
+      showRelativeDay: true,
+      order: 'MDY',
+      showYear: true
+    },
+    locale: 'en'
+  }
+};
+
+/**
+ * 相对日 - 自定义文案
+ */
+export var RelativeDayCustomLabels = {
+  args: {
+    layout: 'horizontal',
+    dateFormat: {
+      showRelativeDay: true,
+      relativeDayLabels: {
+        today: '今日',
+        yesterday: '昨日',
+        tomorrow: '翌日'
+      },
+      showYear: true,
+      showChineseUnit: true
+    },
+    locale: 'zh-cn'
+  }
+};
+
+/**
+ * 英文完整月份
+ */
+export var DateFullMonth = {
+  args: {
+    locale: 'en',
+    dateFormat: {
+      order: 'MDY',
+      showYear: true,
+      shortMonth: false
+    }
+  }
+};
+
+/**
+ * 自定义分隔符
+ */
+export var DateCustomSeparator = {
+  args: {
+    dateFormat: {
+      showYear: true,
+      separator: '/'
+    }
+  }
+};
+
+/**
+ * 星期完整展示（英文）
+ */
+export var WeekdayFull = {
+  args: {
+    locale: 'en',
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+
+/**
+ * 星期完整展示（中文）
+ */
+export var WeekdayFullChinese = {
+  args: {
+    locale: 'zh-cn',
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+
+/**
+ * 星期单字母展示
+ */
+export var WeekdaySingleLetter = {
+  args: {
+    weekdayFormat: {
+      singleLetter: true
+    }
+  }
+};
+
+/**
+ * 只显示时间
+ */
+export var OnlyTime = {
+  args: {
+    fields: {
+      showTime: true,
+      showDate: false,
+      showWeekday: false
+    }
+  }
+};
+
+/**
+ * 只显示日期
+ */
+export var OnlyDate = {
+  args: {
+    fields: {
+      showTime: false,
+      showDate: true,
+      showWeekday: false
+    },
+    dateFormat: {
+      showYear: true
+    }
+  }
+};
+
+/**
+ * 自定义字段顺序
+ */
+export var CustomFieldOrder = {
+  args: {
+    layout: 'vertical',
+    fields: {
+      fieldOrder: ['weekday', 'date', 'time']
+    }
+  }
+};
+
+/**
+ * 自定义格式化 - ISO 格式
+ */
+export var CustomFormatISO = {
+  args: {
+    customFormat: 'YYYY-MM-DD HH:mm:ss'
+  }
+};
+
+/**
+ * 自定义格式化 - 中文格式
+ */
+export var CustomFormatChinese = {
+  args: {
+    customFormat: 'YYYY年MM月DD日 HH:mm'
+  }
+};
+
+/**
+ * 自定义格式化 - 包含星期
+ */
+export var CustomFormatWithWeekday = {
+  args: {
+    locale: 'en',
+    customFormat: 'YYYY-MM-DD dddd HH:mm'
+  }
+};
+
+/**
+ * 中文环境
+ */
+export var LocaleChinese = {
+  args: {
+    locale: 'zh-cn',
+    layout: 'vertical',
+    dateFormat: {
+      showYear: true,
+      showChineseUnit: true
+    },
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+
+/**
+ * 英文环境
+ */
+export var LocaleEnglish = {
+  args: {
+    locale: 'en',
+    layout: 'vertical',
+    dateFormat: {
+      order: 'MDY',
+      showYear: true,
+      shortMonth: false
+    },
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+
+/**
+ * 自定义容器样式
+ */
+export var CustomContainerStyle = {
+  args: {
+    containerStyle: {
+      background: '#f5f5f5',
+      borderRadius: 8,
+      border: '1px solid #d9d9d9',
+      padding: 16
+    }
+  }
+};
+
+/**
+ * 自定义文本样式
+ */
+export var CustomTextStyle = {
+  args: {
+    layout: 'vertical',
+    timeStyle: {
+      fontSize: 32,
+      fontWeight: 700,
+      color: '#1890ff'
+    },
+    dateStyle: {
+      fontSize: 18,
+      fontWeight: 400,
+      color: '#666'
+    },
+    weekdayStyle: {
+      fontSize: 16,
+      fontWeight: 400,
+      color: '#999'
+    }
+  }
+};
+
+/**
+ * 居中对齐
+ */
+export var CenterAlign = {
+  args: {
+    textAlign: 'center',
+    containerStyle: {
+      border: '1px solid #d9d9d9',
+      padding: 16
+    }
+  }
+};
+
+/**
+ * 禁用自动刷新
+ */
+export var DisableRefresh = {
+  args: {
+    disableAutoRefresh: true
+  }
+};
+
+/**
+ * 自定义刷新间隔（5秒）
+ */
+export var CustomRefreshInterval = {
+  args: {
+    timeFormat: {
+      showSeconds: true
+    },
+    refreshInterval: 5000
+  }
+};
+
+/**
+ * 应用场景 - 后台首页
+ */
+export var ScenarioDashboard = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 24,
+        background: '#fff',
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 20,
+        fontWeight: 600,
+        marginBottom: 16
+      }
+    }, "\u6B22\u8FCE\u56DE\u6765\uFF01"), /*#__PURE__*/React.createElement(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'
+      }
+    }));
+  }
+};
+
+/**
+ * 应用场景 - 状态栏
+ */
+export var ScenarioStatusBar = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '12px 24px',
+        background: '#001529',
+        color: '#fff'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 18,
+        fontWeight: 600
+      }
+    }, "\u7CFB\u7EDF\u7BA1\u7406\u540E\u53F0"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      layout: "inline",
+      inlineSeparator: " | ",
+      timeFormat: {
+        showSeconds: false
+      },
+      dateFormat: {
+        showYear: false
+      },
+      locale: "zh-cn",
+      style: {
+        color: 'rgba(255, 255, 255, 0.8)'
+      }
+    }));
+  }
+};
+
+/**
+ * 应用场景 - 欢迎页
+ */
+export var ScenarioWelcome = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 300,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement(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)'
+      }
+    }));
+  }
+};
+
+/**
+ * 应用场景 - 大屏展示
+ */
+export var ScenarioLargeScreen = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 200,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#000',
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement(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'
+      }
+    }));
+  }
+};
+
+/**
+ * 多语言对比
+ */
+export var MultiLanguage = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        border: '1px solid #d9d9d9',
+        padding: 16,
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8,
+        fontWeight: 600
+      }
+    }, "\u4E2D\u6587"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "zh-cn",
+      dateFormat: {
+        showYear: true,
+        showChineseUnit: true
+      },
+      weekdayFormat: {
+        full: true
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        border: '1px solid #d9d9d9',
+        padding: 16,
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8,
+        fontWeight: 600
+      }
+    }, "English"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "en",
+      dateFormat: {
+        order: 'MDY',
+        showYear: true
+      },
+      weekdayFormat: {
+        full: true
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        border: '1px solid #d9d9d9',
+        padding: 16,
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8,
+        fontWeight: 600
+      }
+    }, "\u65E5\u672C\u8A9E"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "ja",
+      dateFormat: {
+        showYear: true
+      },
+      weekdayFormat: {
+        full: true
+      }
+    })));
+  }
+};
+
+/**
+ * 时间格式对比
+ */
+export var TimeFormats = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "24\u5C0F\u65F6\u5236\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      fields: {
+        showDate: false,
+        showWeekday: false
+      },
+      timeFormat: {
+        use12Hour: false
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "12\u5C0F\u65F6\u5236\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      fields: {
+        showDate: false,
+        showWeekday: false
+      },
+      timeFormat: {
+        use12Hour: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u663E\u793A\u79D2\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      fields: {
+        showDate: false,
+        showWeekday: false
+      },
+      timeFormat: {
+        showSeconds: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "12\u5C0F\u65F6+\u79D2+\u8865\u96F6\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      fields: {
+        showDate: false,
+        showWeekday: false
+      },
+      timeFormat: {
+        use12Hour: true,
+        showSeconds: true,
+        padHour: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u53EA\u663E\u793A\u5C0F\u65F6\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      fields: {
+        showDate: false,
+        showWeekday: false
+      },
+      timeFormat: {
+        onlyShowHour: true
+      }
+    })));
+  }
+};
+
+/**
+ * 日期格式对比
+ */
+export var DateFormats = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u9ED8\u8BA4\uFF08\u4E0D\u663E\u793A\u5E74\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      fields: {
+        showTime: false,
+        showWeekday: false
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "Y-M-D\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      fields: {
+        showTime: false,
+        showWeekday: false
+      },
+      dateFormat: {
+        order: 'YMD',
+        showYear: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "M-D-Y\uFF08\u82F1\u6587\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "en",
+      fields: {
+        showTime: false,
+        showWeekday: false
+      },
+      dateFormat: {
+        order: 'MDY',
+        showYear: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "D-M-Y\uFF08\u82F1\u6587\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "en",
+      fields: {
+        showTime: false,
+        showWeekday: false
+      },
+      dateFormat: {
+        order: 'DMY',
+        showYear: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u4E2D\u6587\u5E26\u5355\u4F4D\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "zh-cn",
+      fields: {
+        showTime: false,
+        showWeekday: false
+      },
+      dateFormat: {
+        showYear: true,
+        showChineseUnit: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u82F1\u6587\u5B8C\u6574\u6708\u4EFD\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "en",
+      fields: {
+        showTime: false,
+        showWeekday: false
+      },
+      dateFormat: {
+        order: 'MDY',
+        showYear: true,
+        shortMonth: false
+      }
+    })));
+  }
+};
+
+/**
+ * 星期格式对比
+ */
+export var WeekdayFormats = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u82F1\u6587\u9ED8\u8BA4\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "en",
+      fields: {
+        showTime: false,
+        showDate: false
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u82F1\u6587\u5B8C\u6574\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "en",
+      fields: {
+        showTime: false,
+        showDate: false
+      },
+      weekdayFormat: {
+        full: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u82F1\u6587\u5355\u5B57\u6BCD\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "en",
+      fields: {
+        showTime: false,
+        showDate: false
+      },
+      weekdayFormat: {
+        singleLetter: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u4E2D\u6587\u9ED8\u8BA4\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "zh-cn",
+      fields: {
+        showTime: false,
+        showDate: false
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u4E2D\u6587\u5B8C\u6574\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "zh-cn",
+      fields: {
+        showTime: false,
+        showDate: false
+      },
+      weekdayFormat: {
+        full: true
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 150,
+        display: 'inline-block',
+        color: '#666'
+      }
+    }, "\u4E2D\u6587\u5355\u5B57\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      locale: "zh-cn",
+      fields: {
+        showTime: false,
+        showDate: false
+      },
+      weekdayFormat: {
+        singleLetter: true
+      }
+    })));
+  }
+};
+
+/**
+ * 所有布局对比
+ */
+export var AllLayouts = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+        gap: 24
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        border: '1px solid #d9d9d9',
+        padding: 16,
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 12,
+        fontWeight: 600
+      }
+    }, "\u6C34\u5E73\u5E03\u5C40\uFF08\u9ED8\u8BA4\uFF09"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      layout: "horizontal",
+      locale: "zh-cn",
+      dateFormat: {
+        showChineseUnit: true
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        border: '1px solid #d9d9d9',
+        padding: 16,
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 12,
+        fontWeight: 600
+      }
+    }, "\u5782\u76F4\u5E03\u5C40"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      layout: "vertical",
+      locale: "zh-cn",
+      dateFormat: {
+        showYear: true,
+        showChineseUnit: true
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        border: '1px solid #d9d9d9',
+        padding: 16,
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 12,
+        fontWeight: 600
+      }
+    }, "\u5355\u884C\u5E03\u5C40"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      layout: "inline",
+      locale: "zh-cn",
+      dateFormat: {
+        showYear: true,
+        showChineseUnit: true
+      }
+    })));
+  }
+};
+
+/**
+ * 深色主题
+ */
+export var DarkTheme = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 32,
+        background: '#1f1f1f',
+        borderRadius: 8,
+        minHeight: 200,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+      layout: "vertical",
+      textAlign: "center",
+      timeFormat: {
+        use12Hour: true,
+        showSeconds: true
+      },
+      dateFormat: {
+        showYear: true
+      },
+      containerStyle: {
+        background: 'rgba(255, 255, 255, 0.1)',
+        borderRadius: 12,
+        padding: 24
+      },
+      timeStyle: {
+        fontSize: 36,
+        fontWeight: 700,
+        color: '#fff'
+      },
+      dateStyle: {
+        fontSize: 18,
+        fontWeight: 400,
+        color: 'rgba(255, 255, 255, 0.8)'
+      },
+      weekdayStyle: {
+        fontSize: 16,
+        fontWeight: 400,
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    }));
+  }
+};