You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

2.7 KiB

项目时长单位自动转换

日期: 2026-01-21
类型: 功能增强
影响范围: 创建/编辑项目弹窗

变更概述

实现了项目时长的单位自动转换功能,用户可以选择"秒"或"分钟"作为输入单位,系统会自动转换为秒存储到后端。

实现细节

1. 提交时转换(前端 → 后端)

CreateProjectModalonSubmit 方法中,根据用户选择的单位自动转换:

// 计算实际时长(秒)
const durationInSeconds = data.duration
  ? data.durationUnit === 'minutes'
    ? Number(data.duration) * 60  // 分钟转秒
    : Number(data.duration)        // 已经是秒
  : undefined;

示例

  • 用户输入 5 分钟 → 存储为 300 秒
  • 用户输入 30 秒 → 存储为 30 秒

2. 编辑时智能转换(后端 → 前端)

在编辑模式下,从后端读取的秒数会智能转换为更友好的单位:

if (editingProjectInfo.duration) {
  const durationInSeconds = Number(editingProjectInfo.duration);
  // 如果能被 60 整除且大于等于 60,转换为分钟
  if (durationInSeconds >= 60 && durationInSeconds % 60 === 0) {
    duration = String(durationInSeconds / 60);
    durationUnit = 'minutes';
  } else {
    duration = String(durationInSeconds);
    durationUnit = 'seconds';
  }
}

转换规则

  • 300 秒 → 显示为 5 分钟
  • 90 秒 → 显示为 90 秒(不能整除 60)
  • 45 秒 → 显示为 45 秒(小于 60)

用户体验改进

  1. 灵活输入:用户可以根据习惯选择秒或分钟
  2. 智能显示:编辑时自动选择最合适的单位
  3. 数据一致:后端统一使用秒存储,避免混乱

技术细节

数据流

用户输入 (5 分钟)
  ↓
前端转换 (300 秒)
  ↓
后端存储 (300)
  ↓
前端读取 (300 秒)
  ↓
智能转换 (5 分钟)
  ↓
用户看到 (5 分钟)

边界情况处理

  • 空值undefined 保持不变
  • 零值0 保持为秒
  • 小数:支持小数输入(如 1.5 分钟 = 90 秒
  • 不能整除:保持秒单位(如 90 秒 不转换为 1.5 分钟

相关文件

  • client/src/components/features/project/CreateProjectModal.tsx - 实现转换逻辑

测试建议

  1. 创建项目

    • 输入 5 分钟,验证后端存储为 300 秒
    • 输入 30 秒,验证后端存储为 30 秒
    • 输入 1.5 分钟,验证后端存储为 90 秒
  2. 编辑项目

    • 后端 300 秒 → 前端显示 5 分钟
    • 后端 90 秒 → 前端显示 90 秒
    • 后端 45 秒 → 前端显示 45 秒
  3. 边界情况

    • 空值处理
    • 零值处理
    • 小数处理