2.4 KiB
2.4 KiB
时间戳工具移动端适配方案
问题分析
时间戳工具（/utility/timestamp）当前仅有一个桌面端组件 TimestampTool.tsx，通过 CSS Media Query 适配移动端。存在的问题：
当前移动端问题
- DatePicker 组件不友好 - antd 的
DatePicker+showTime在移动端弹窗体验差，日期选择不便 - 双栏布局空间利用率低 - 两列面板在窄屏上内容拥挤
- 时区 Select 下拉框难用 - 7 个选项的下拉选择器在移动端操作困难
- 结果项溢出 - 复制按钮和长文本在小屏上布局错乱
- 触控目标偏小 - 按钮和输入框未针对触摸优化
当前状态
| 项目 | 状态 |
|---|---|
| 桌面端组件 | TimestampTool.tsx (已有) |
| 移动端组件 | ❌ 不存在 |
| 路由配置 | App.tsx 未区分移动/桌面端 |
| 移动端样式 | 仅依赖 CSS Media Query |
实现方案
方案：创建独立移动端组件
遵循项目已有模式（如 RegexToolMobile、JsonFormatterMobile）：
新增文件
| 文件 | 说明 |
|---|---|
src/pages/TimestampTool/TimestampToolMobile.tsx |
移动端专用组件 |
src/pages/TimestampTool/TimestampToolMobile.css |
移动端专用样式 |
修改文件
| 文件 | 修改内容 |
|---|---|
src/App.tsx |
添加 TimestampToolMobile 的懒加载和路由条件渲染 |
移动端组件设计要点
- 单栏流式布局 - 上下排列，充分利用宽度
- 原生日期选择 - 使用
<input type="datetime-local">替代 antd DatePicker，移动端自动唤起原生选择器 - 时区快速切换 - 使用按钮组/分段控制器替代 Select 下拉
- 大号触控按钮 - 所有按钮最小 44px 高度
- 结果卡片化 - 每个结果独立卡片，易于阅读和操作
- 固定底部操作栏 - 获取当前时间、清空等常用操作固定在底部
核心功能保留
- 时间戳 → 日期转换（自动识别秒/毫秒）
- 日期 → 时间戳转换
- 时区切换
- 复制结果
- 获取当前时间
- 清空输入
验证步骤
- 桌面端访问
/utility/timestamp显示原组件 - 移动端（≤768px）访问
/utility/timestamp显示新移动端组件 - 测试时间戳输入转换功能正常
- 测试日期选择功能正常（原生日期选择器）
- 测试时区切换功能正常
- 测试复制功能正常
- 测试暗色模式切换正常