# 时间戳工具移动端适配方案

## 问题分析

时间戳工具（`/utility/timestamp`）当前仅有一个桌面端组件 `TimestampTool.tsx`，通过 CSS Media Query 适配移动端。存在的问题：

### 当前移动端问题

1. **DatePicker 组件不友好** - antd 的 `DatePicker` + `showTime` 在移动端弹窗体验差，日期选择不便
2. **双栏布局空间利用率低** - 两列面板在窄屏上内容拥挤
3. **时区 Select 下拉框难用** - 7 个选项的下拉选择器在移动端操作困难
4. **结果项溢出** - 复制按钮和长文本在小屏上布局错乱
5. **触控目标偏小** - 按钮和输入框未针对触摸优化

## 当前状态

| 项目 | 状态 |
|------|------|
| 桌面端组件 | `TimestampTool.tsx` (已有) |
| 移动端组件 | ❌ 不存在 |
| 路由配置 | App.tsx 未区分移动/桌面端 |
| 移动端样式 | 仅依赖 CSS Media Query |

## 实现方案

### 方案：创建独立移动端组件

遵循项目已有模式（如 `RegexToolMobile`、`JsonFormatterMobile`）：

#### 新增文件

| 文件 | 说明 |
|------|------|
| `src/pages/TimestampTool/TimestampToolMobile.tsx` | 移动端专用组件 |
| `src/pages/TimestampTool/TimestampToolMobile.css` | 移动端专用样式 |

#### 修改文件

| 文件 | 修改内容 |
|------|----------|
| `src/App.tsx` | 添加 `TimestampToolMobile` 的懒加载和路由条件渲染 |

### 移动端组件设计要点

1. **单栏流式布局** - 上下排列，充分利用宽度
2. **原生日期选择** - 使用 `<input type="datetime-local">` 替代 antd DatePicker，移动端自动唤起原生选择器
3. **时区快速切换** - 使用按钮组/分段控制器替代 Select 下拉
4. **大号触控按钮** - 所有按钮最小 44px 高度
5. **结果卡片化** - 每个结果独立卡片，易于阅读和操作
6. **固定底部操作栏** - 获取当前时间、清空等常用操作固定在底部

### 核心功能保留

- 时间戳 → 日期转换（自动识别秒/毫秒）
- 日期 → 时间戳转换
- 时区切换
- 复制结果
- 获取当前时间
- 清空输入

## 验证步骤

1. 桌面端访问 `/utility/timestamp` 显示原组件
2. 移动端（≤768px）访问 `/utility/timestamp` 显示新移动端组件
3. 测试时间戳输入转换功能正常
4. 测试日期选择功能正常（原生日期选择器）
5. 测试时区切换功能正常
6. 测试复制功能正常
7. 测试暗色模式切换正常