70 lines
2.4 KiB
Markdown
70 lines
2.4 KiB
Markdown
# 时间戳工具移动端适配方案
|
|
|
|
## 问题分析
|
|
|
|
时间戳工具（`/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. 测试暗色模式切换正常
|