sync from local backup

2026-08-05 23:59:22 +08:00
commit a59f46b894
409 changed files with 166027 additions and 0 deletions
@@ -0,0 +1,210 @@
+# 日期计算器移动端适配修复计划
+
+## 问题描述
+日期计算器工具在移动端无法正常使用。当前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，更易点击
+- 整体布局紧凑，无水平溢出