chunyu_prject_react/.trae/documents/date-calculator-mobile.md

日期计算器移动端适配修复计划

问题描述

日期计算器工具在移动端无法正常使用。当前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区域压缩

@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 时区栏适配

@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 结果项垂直布局

@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 输入区域优化

@media (max-width: 768px) {
  .dc-input-area {
    font-size: 16px; /* 防止iOS缩放 */
    padding: 12px;
  }
}

1.5 按钮优化

@media (max-width: 768px) {
  .dc-action-btn {
    height: 52px;
    font-size: 16px;
  }
  
  .dc-actions {
    gap: 12px;
  }
}

1.6 面板间距优化

@media (max-width: 768px) {
  .dc-panels {
    gap: 12px;
    margin-bottom: 16px;
  }
  
  .dc-panel-body {
    padding: 12px;
    gap: 12px;
  }
}

2. 组件逻辑优化

文件：DateCalculator.tsx

修改内容：

2.1 添加移动端检测

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：

<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，更易点击
• 整体布局紧凑，无水平溢出