211 lines
4.5 KiB
Markdown
211 lines
4.5 KiB
Markdown
# 日期计算器移动端适配修复计划
|
||
|
||
## 问题描述
|
||
日期计算器工具在移动端无法正常使用。当前CSS虽有部分移动端样式，但存在布局错乱、元素溢出、交互困难等问题。
|
||
|
||
## 当前状态分析
|
||
|
||
### 现有移动端样式（`@media (max-width: 768px)`）
|
||
- `.dc-panels` 已设置为 `grid-template-columns: 1fr`（单列）
|
||
- `.dc-actions` 已设置为 `grid-template-columns: 1fr`（单列）
|
||
- `.dc-toolbar` 已设置为 `flex-direction: column`
|
||
|
||
### 存在的移动端问题
|
||
|
||
1. **Hero区域过高**：200px最小高度 + 40px padding，在移动端占用过多空间
|
||
2. **结果项横向溢出**：`dc-result-item` 使用 `flex` 布局，label + value + copy按钮在小屏幕上可能溢出
|
||
3. **时区选择器宽度问题**：`min-width: 220px` 在小屏幕上可能超出容器
|
||
4. **输入框字体过大**：15px字体在移动端可能导致输入困难
|
||
5. **按钮间距不足**：操作按钮在移动端可能难以点击
|
||
6. **DatePicker组件**：带 `showTime` 的日期选择器在移动端体验不佳
|
||
|
||
## 实现方案
|
||
|
||
### 1. CSS移动端样式优化
|
||
|
||
**文件**：`DateCalculator.css`
|
||
|
||
**修改内容**：
|
||
|
||
#### 1.1 Hero区域压缩
|
||
```css
|
||
@media (max-width: 768px) {
|
||
.date-calculator-hero {
|
||
min-height: 120px;
|
||
padding: 24px 16px;
|
||
}
|
||
|
||
.date-calculator-hero-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
font-size: 22px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.date-calculator-hero-title {
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.2 时区栏适配
|
||
```css
|
||
@media (max-width: 768px) {
|
||
.dc-timezone-bar {
|
||
flex-wrap: wrap;
|
||
padding: 8px 12px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.dc-timezone-select {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.3 结果项垂直布局
|
||
```css
|
||
@media (max-width: 768px) {
|
||
.dc-result-item {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.dc-result-label {
|
||
min-width: 0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.dc-result-value {
|
||
margin: 0;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
padding: 8px;
|
||
background: #f1f5f9;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.dc-result-copy {
|
||
align-self: flex-end;
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.4 输入区域优化
|
||
```css
|
||
@media (max-width: 768px) {
|
||
.dc-input-area {
|
||
font-size: 16px; /* 防止iOS缩放 */
|
||
padding: 12px;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.5 按钮优化
|
||
```css
|
||
@media (max-width: 768px) {
|
||
.dc-action-btn {
|
||
height: 52px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.dc-actions {
|
||
gap: 12px;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.6 面板间距优化
|
||
```css
|
||
@media (max-width: 768px) {
|
||
.dc-panels {
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.dc-panel-body {
|
||
padding: 12px;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 组件逻辑优化
|
||
|
||
**文件**：`DateCalculator.tsx`
|
||
|
||
**修改内容**：
|
||
|
||
#### 2.1 添加移动端检测
|
||
```tsx
|
||
const [isMobile, setIsMobile] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const checkMobile = () => {
|
||
setIsMobile(window.innerWidth <= 768);
|
||
};
|
||
checkMobile();
|
||
window.addEventListener('resize', checkMobile);
|
||
return () => window.removeEventListener('resize', checkMobile);
|
||
}, []);
|
||
```
|
||
|
||
#### 2.2 DatePicker移动端优化
|
||
在移动端使用更简单的日期选择器，不使用 `showTime`：
|
||
```tsx
|
||
<DatePicker
|
||
showTime={!isMobile}
|
||
value={dateInput}
|
||
onChange={(val) => setDateInput(val)}
|
||
placeholder={t("dateCalculator.datePickPlaceholder")}
|
||
format={isMobile ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss"}
|
||
style={{ width: "100%" }}
|
||
size="large"
|
||
/>
|
||
```
|
||
|
||
### 3. 涉及文件
|
||
|
||
| 文件 | 修改类型 | 说明 |
|
||
|------|----------|------|
|
||
| `DateCalculator.css` | 修改 | 优化移动端布局样式 |
|
||
| `DateCalculator.tsx` | 修改 | 添加移动端检测，优化DatePicker |
|
||
|
||
## 验证步骤
|
||
|
||
1. **Chrome DevTools移动端模拟**
|
||
- 打开 DevTools → Toggle device toolbar
|
||
- 选择 iPhone SE / iPhone 12 Pro / Pixel 5 等设备
|
||
- 验证布局是否正常
|
||
|
||
2. **真机测试**
|
||
- 在手机浏览器中打开 `/utility/date-calculator`
|
||
- 测试以下功能：
|
||
- 时间戳转日期输入和结果显示
|
||
- 日期转时间戳选择日期
|
||
- 复制功能
|
||
- 获取当前时间
|
||
- 清除功能
|
||
- 时区切换
|
||
|
||
3. **交互测试**
|
||
- 输入框是否容易点击和输入
|
||
- 按钮是否容易点击
|
||
- 结果项是否完整显示
|
||
- 日期选择器是否正常工作
|
||
|
||
## 预期效果
|
||
|
||
- Hero区域高度减少约40%
|
||
- 结果项在移动端垂直排列，更易阅读
|
||
- 输入框字体16px，防止iOS自动缩放
|
||
- 按钮高度52px，更易点击
|
||
- 整体布局紧凑，无水平溢出
|