Qinglong定时任务界面语言显示问题分析与修复

问题背景

在Qinglong 2.18.1版本中，用户报告了一个界面显示相关的bug。当系统语言设置为英文时，定时任务列表中的"最后运行时长"字段仍然显示为中文格式，而不是预期的英文格式。这个问题影响了国际用户的使用体验，特别是在多语言环境下工作的开发者。

技术分析

该问题主要出现在前端界面的时间格式化处理上。具体来说，系统在处理定时任务的运行时长显示时，直接硬编码了中文的时间单位（如"秒"、"分"、"小时"、"天"），而没有根据当前系统语言设置进行本地化处理。

在代码层面，这个问题主要存在于crontab/index.tsx文件中，其中diffTime函数负责计算并格式化时间差。该函数直接返回了包含中文时间单位的字符串，而没有考虑国际化(i18n)的需求。

解决方案

修复这个问题的核心思路是将硬编码的中文字符替换为通过国际化系统获取的本地化字符串。具体实现包括：

1. 引入react-intl-universal的get方法来获取本地化字符串
2. 创建一个新的时间差计算函数diffTimeWithTranslation，该函数接收两个参数：
   • 时间数值
   • 国际化获取函数(intl.get)

新函数的实现逻辑如下：

function diffTimeWithTranslation(num: number, intlGet: typeof get) {
    // 时间差计算逻辑保持不变
    // 但将硬编码的中文单位替换为通过intlGet获取的本地化字符串
    let returnStr = seconds + intlGet('秒');
    if (minutes > 0) {
        returnStr = minutes + intlGet('分') + returnStr;
    }
    if (hours > 0) {
        returnStr = hours + intlGet('小时') + returnStr;
    }
    if (days > 0) {
        returnStr = days + intlGet('天') + returnStr;
    }
    return returnStr;
}

修复效果

在Qinglong 2.18.2版本中，这个问题已经得到修复。现在当用户将系统语言切换为英文时，定时任务列表中的"最后运行时长"字段会正确显示英文格式的时间单位（如"seconds"、"minutes"、"hours"、"days"），而不是之前的中文格式。

最佳实践建议

对于开发者来说，处理国际化问题时应该注意以下几点：

1. 避免在代码中直接硬编码特定语言的字符串
2. 使用成熟的国际化库（如react-intl-universal）来处理多语言场景
3. 对于时间、日期、数字等常见格式化需求，优先使用库提供的格式化方法
4. 在设计组件时，考虑将语言相关的处理集中管理，便于维护和扩展

这个修复不仅解决了当前的语言显示问题，也为Qinglong未来的多语言支持打下了更好的基础。