FigmaToCode项目中HTML圆角边框生成问题的分析与解决

在FigmaToCode项目中，开发者发现了一个关于HTML圆角边框生成的bug：当设计稿中仅设置两个位置的圆角时，生成的HTML边框圆角位置总是错误的。本文将深入分析该问题的原因，并介绍解决方案。

问题现象

当设计稿中的元素仅设置两个位置的圆角（例如仅左上和右上）时，FigmaToCode生成的HTML代码会出现以下问题：

1. 圆角位置错位
2. 预期为直角的位置被错误地应用了圆角
3. 生成的CSS属性顺序与设计不符

问题根源

通过分析项目源代码，发现问题出在htmlBorderRadius函数中。该函数处理圆角逻辑时存在以下缺陷：

else if ("topLeftRadius" in node) {
    cornerValues = handleIndividualRadius(node);
    comp.push(
      ...cornerValues
        .filter((d) => d > 0)
        .map((value, index) => {
          const property = [
            "border-top-left-radius",
            "border-top-right-radius",
            "border-bottom-right-radius",
            "border-bottom-left-radius",
          ][index];
          return formatWithJSX(property, isJsx, value);
        }),
    );
  }

关键问题在于.filter((d) => d > 0)这行代码。它过滤掉了值为0的圆角，导致后续的map操作中索引错位，最终生成的CSS属性与设计意图不符。

解决方案

修复方案的核心思想是：

1. 保留所有圆角值（包括0值）
2. 确保CSS属性与对应圆角的物理位置严格匹配
3. 对于值为0的圆角，可以省略不生成（但必须保持索引正确）

正确的实现应该先映射属性，再过滤不需要的值，而不是先过滤再映射。这样可以保证CSS属性与设计稿中的物理位置一一对应。

技术影响

这个bug会影响以下场景：

1. 非对称圆角设计
2. 仅部分圆角的设计
3. 需要精确控制每个角圆角半径的设计

对于完全对称的圆角设计（四个角相同）或四个角都设置了圆角的设计，则不会受到影响。

最佳实践建议

在使用FigmaToCode转换设计稿时，对于圆角边框的处理，建议：

1. 明确检查设计稿中每个角的圆角设置
2. 对于非标准圆角设计，验证生成的代码
3. 考虑使用CSS简写属性border-radius来确保一致性
4. 对于复杂圆角需求，可以手动调整生成的代码

该修复已合并到主分支，并计划在当晚部署。这一改进将显著提升FigmaToCode在处理部分圆角设计时的准确性，为开发者提供更可靠的代码生成服务。