Sequential Workflow Editor 中支持对象化选项以优化国际化处理

Sequential Workflow Editor 中支持对象化选项以优化国际化处理

sequential-workflow-editor Powerful workflow editor builder for any workflow designer. 项目地址: https://gitcode.com/gh_mirrors/se/sequential-workflow-editor

背景介绍

在现代工作流编辑器开发中，选项选择器(Choice Editor)是一个常见且重要的组件。Sequential Workflow Editor 作为一款优秀的工作流设计工具，其内置的 ChoiceValueModel 目前仅支持简单的字符串数组作为选项值。这种设计在单语言环境下表现良好，但在需要国际化(i18n)支持的场景下就会暴露出明显缺陷。

现有问题分析

当前实现方式下，开发者通常这样配置选项选择器：

builder
  .property('color')
  .value(
    createChoiceValueModel({
      choices: ['红色', '蓝色', '绿色'],
      defaultValue: '蓝色'
    })
  );

这种简单字符串数组的方式存在两个主要问题：

1. 国际化困境：当应用需要支持多语言时，选项的显示文本会随用户语言环境变化，但存储的值也随之变化，导致数据不一致。

2. 数据稳定性差：不同语言用户配置的相同选项会存储为不同语言的文本，后续处理这些数据时需要进行复杂的反向转换。

解决方案设计

为了解决上述问题，我们提出了对象化选项的设计方案。该方案允许开发者定义包含稳定ID和可本地化显示文本的选项对象：

builder
  .property('operator')
  .value(
    createChoiceValueModel({
      choices: [
        { id: 'eq', displayValue: i18n('condition.operator.eq', '等于') },
        { id: 'neq', displayValue: i18n('condition.operator.neq', '不等于') }
      ],
      defaultValue: 'eq'
    })
  );

这种设计带来了以下优势：

1. 数据稳定性：存储的值始终是稳定的ID，不受语言环境影响。
2. 显示灵活性：显示文本可以根据用户语言环境动态变化。
3. 维护便利性：新增语言只需添加翻译文本，无需修改业务逻辑。

实现原理

在底层实现上，ChoiceValueModel 需要做以下调整：

1. 值存储机制：始终存储选项对象的id属性，而非显示文本。
2. 显示处理：在渲染时使用displayValue作为显示文本。
3. 默认值处理：确保默认值匹配某个选项的id。

最佳实践建议

在实际项目中使用这一特性时，建议：

1. ID命名规范：为选项ID建立统一的命名规范，如全小写、使用下划线等。
2. 翻译键管理：为每个选项的displayValue建立清晰的翻译键命名规则。
3. 默认值设置：总是设置合理的默认值，避免空选择状态。
4. 类型安全：在TypeScript项目中，可以为选项ID定义联合类型，增强类型安全性。

总结

Sequential Workflow Editor 通过支持对象化选项，显著提升了在国际化场景下的使用体验。这一改进使得开发者能够更轻松地构建多语言工作流应用，同时保证了数据的稳定性和一致性。对于需要国际化的项目来说，这一特性将成为不可或缺的功能。

随着工作流编辑器在现代应用开发中的普及，类似这样注重开发者体验的改进将帮助团队更高效地构建复杂的工作流系统。

sequential-workflow-editor Powerful workflow editor builder for any workflow designer. 项目地址: https://gitcode.com/gh_mirrors/se/sequential-workflow-editor