Code du Travail Numérique项目中DSFR表单输入框宽度优化实践

Code du Travail Numérique项目中DSFR表单输入框宽度优化实践

问题背景

在Code du Travail Numérique项目的IRC工具(个体化解雇协议工具)开发过程中，开发团队发现多个步骤的表单输入框存在宽度问题。具体表现为某些关键输入字段(如日期、薪资金额等)采用了固定宽度282px的设计，而没有充分利用屏幕空间，影响了表单的整体美观性和用户体验。

问题详细分析

通过对各步骤表单的截图分析，可以识别出以下具体问题点：

1. 步骤2(日期输入)：日期选择字段宽度被限制在282px，而实际上应该充分利用三栏布局的空间(移动端除外)
2. 步骤6(薪资金额输入)：薪资金额输入框同样受到282px宽度限制
3. 特殊行业情况：某些特定行业(如银行高管)的表单中有额外选项，这些特殊字段也存在宽度问题

技术解决方案

经过与团队讨论后，决定采用以下技术方案：

1. 使用min-width替代固定宽度：避免硬编码宽度值，改用min-width确保最小宽度要求的同时允许字段根据布局自动扩展
2. 响应式布局调整：保持移动端的单栏布局，但在桌面端充分利用三栏布局空间
3. 特殊情况处理：对于需要全宽显示的字段(如企业名称和集体协议名称)，保留其全宽特性

实施细节

在实际CSS调整中，主要进行了以下修改：

/* 替换原有的固定宽度 */
.input-field {
  min-width: 282px; /* 保证最小宽度 */
  width: auto; /* 允许自动扩展 */
}

/* 特殊字段保持全宽 */
.special-field {
  width: 100%;
}

设计考量

这一调整基于以下设计原则：

1. 一致性：确保整个工具中表单字段的宽度表现一致
2. 可用性：在保证可读性的前提下最大化利用屏幕空间
3. 灵活性：适应不同行业、不同步骤的特殊需求

效果验证

修改后，各步骤的表单字段能够：

• 在桌面端充分利用三栏布局空间
• 在移动端自动调整为单栏布局
• 特殊字段仍能保持全宽显示
• 整体表单布局更加协调美观

经验总结

这次优化实践提供了以下宝贵经验：

1. 在响应式设计中应避免硬编码宽度值
2. 表单设计需要考虑不同场景的特殊需求
3. 团队协作和设计评审对保证UI一致性至关重要
4. 截图对比是验证UI修改效果的有效手段

通过这次优化，Code du Travail Numérique项目的IRC工具在用户体验和界面一致性方面都得到了显著提升。