Puck项目中Select字段数值类型转换问题的分析与解决

问题背景

在Puck项目开发过程中，开发者发现当使用select或radio类型的字段时，如果选项值(value)设置为数字类型，最终获取到的数据会被自动转换为字符串类型。这在实际应用中可能导致类型不一致的问题，特别是在需要严格类型检查的场景下。

问题复现

通过以下配置可以复现该问题：

{
  fields: {
    numberField: {
      type: "select",
      label: "数字选择字段",
      options: [
        { value: 1, label: "1" },
        { value: 2, label: "2" },
        // 更多数字选项...
      ],
    },
    resolveData: (data) => {
      console.log(data.props.numberField); // 输出为字符串而非数字
    }
  }
}

技术原因分析

这个问题的根本原因在于HTML规范本身。在HTML中，所有input元素(包括select和radio)的value属性都只能是字符串类型。当Puck框架处理表单数据时，直接从DOM元素获取的值自然就是字符串格式。

解决方案思路

Puck框架已经对布尔值类型做了特殊处理，我们可以借鉴相同的思路来处理数字类型。具体实现需要考虑以下几点：

1. 检测字段配置中options的value类型是否为数字
2. 在数据获取时进行类型转换
3. 保持与现有布尔值处理逻辑的一致性

实现方案

核心实现逻辑可以简化为：

const isNumberField = field.options.some(
  (option) => typeof option.value === "number"
);

if (isNumberField) {
  return Number(value);
}

这种方案具有以下优点：

• 向后兼容，不影响现有功能
• 自动识别数字类型字段
• 保持数据类型一致性

技术影响评估

该修复将影响以下方面：

1. 数据一致性：确保前端数据类型与后端期望一致
2. 表单验证：数字验证将更加准确
3. 数据绑定：减少类型转换的中间处理

最佳实践建议

在实际项目中使用数字类型选项时，建议：

1. 明确标注字段的数字类型特性
2. 在文档中说明类型转换行为
3. 考虑添加类型验证提示

总结

Puck框架通过这次修复完善了表单字段的类型处理能力，使开发者能够更灵活地使用数字类型选项，同时保持数据的类型一致性。这种改进体现了框架对开发者体验的持续优化，也为处理复杂表单场景提供了更好的支持。