# PisellDateTimeDisplay 时间展示组件

专注于展示当前时间的 Pro 组件，支持多种布局、丰富的格式化配置和国际化。

## 快速开始

```tsx
import { PisellDateTimeDisplay } from '@pisell/materials';

export default () => {
  return <PisellDateTimeDisplay />;
};
```

## 核心特性

- ✅ 自动展示当前时间（自动刷新）
- ✅ 三种布局方式（水平、垂直、单行）
- ✅ 丰富的格式化配置
- ✅ 国际化支持
- ✅ 高度可配置的样式
- ✅ 自定义格式化字符串

## 常用示例

### 12小时制

```tsx
<PisellDateTimeDisplay
  timeFormat={{ use12Hour: true }}
/>
```

### 显示秒

```tsx
<PisellDateTimeDisplay
  timeFormat={{ showSeconds: true }}
/>
```

### 中文格式

```tsx
<PisellDateTimeDisplay
  locale="zh-cn"
  dateFormat={{ showYear: true, showChineseUnit: true }}
/>
```

### 自定义格式

```tsx
<PisellDateTimeDisplay
  customFormat="YYYY-MM-DD HH:mm:ss"
/>
```

## 文档

- [使用文档](./docs/pisellDateTimeDisplay.md)
- [设计文档](./docs/pisellDateTimeDisplay.$tab-design.md)
- [开发文档](./docs/pisellDateTimeDisplay.$tab-dev.md)
- [测试文档](./docs/pisellDateTimeDisplay.$tab-test.md)

## 组件结构

```
pisellDateTimeDisplay/
├── types.ts                          # TypeScript 类型定义
├── utils/                            # 工具函数
│   ├── formatTime.ts                # 时间格式化
│   ├── formatDate.ts                # 日期格式化
│   ├── formatWeekday.ts             # 星期格式化
│   └── getRefreshInterval.ts       # 刷新间隔计算
├── hooks/                            # 自定义 Hooks
│   └── useCurrentTime.ts            # 当前时间状态管理
├── components/                       # 子组件
│   ├── TimeDisplay.tsx              # 时间展示组件
│   ├── DateDisplay.tsx              # 日期展示组件
│   └── WeekdayDisplay.tsx           # 星期展示组件
├── PisellDateTimeDisplay.tsx         # 主组件
├── PisellDateTimeDisplay.less        # 组件样式
├── PisellDateTimeDisplay.test.tsx    # 单元测试
└── index.tsx                         # 导出入口
```

## 版本

v1.0.0

## License

MIT
