1. Oinone社区Home
  2. Oinone 7天入门到精通

6.4 国际化之多语言

史, 昂 • • Oinone 7天入门到精通 • 2410 views

多语言是国际化中大家最常面对的问题，我们需要对应用的页面结构元素进行翻译，也需要对系统内容进行翻译比如：菜单、数据字典等，甚至还会业务数据进行翻译。但不管什么翻译需求，我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译，反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译

准备工作

pamirs-demo-boot的pom文件中引入pamirs-translate包依赖

<dependency>
    <groupId>pro.shushi.pamirs.core</groupId>
    <artifactId>pamirs-translate</artifactId>
</dependency>

pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate，即在启动模块中增加translate模块

pamirs:
    boot:
    modules:
        - translate

后端翻译（使用）

这里通过对菜单的翻译来带大家了解翻译模块

Step1 新增翻译记录

切换应用到translate模块，点击新增翻译。

  1. 选择新增翻译生效模块

  2. 选择翻译的模型为：菜单模型

  3. 源语言选择中文，目标选择English

  4. 添加翻译项目：

    1. 源术语为：商店

    2. 翻译值为：shop

    3. 状态为：激活

image.png

Step2 查看效果

应用切换到Demo模块，在右上角切换语言至英语

image.png

后端翻译（自定义模型的翻译）

在前面菜单的翻译中，似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样，当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。

Step1 为PetType模型的name字段增加翻译注解

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.IdModel;

@Model.MultiTable(typeField = "kind")
@Model.model(PetType.MODEL_MODEL)
@Model(displayName="品种",labelFields = {"name"})
public class PetType extends IdModel {

    public static final String MODEL_MODEL="demo.PetType";

    @Field(displayName = "品种名" , translate = true)
    private String name;

    @Field(displayName = "宠物分类")
    private String kind;
}

Step2 重启应用查看效果

  1. 切换应用到translate模块，点击新增翻译

image.png

  1. 切换应用到Demo模块，切换中英文，查看效果

image.png

前端翻译

还记得我们前端第一个自定义动作吗？会弹出“oinone第一个自定义Action，啥也没干”，我们要对它进行翻译。

Step1 修改前端DoNothingActionWidget.ts

  1. import translateValueByKey

  2. 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\'oinone第一个自定义Action，啥也没干\')||\'oinone第一个自定义Action，啥也没干\');

    前端更多翻译工具请见前端高级特性-框架之翻译工具

import {
  Action,
  ActionContextType,
  ActionWidget,
  executeConfirm,
  IClientAction,
  SPI,
  ViewType,
  Widget,
  translateValueByKey
} from '@kunlun/dependencies';

@SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' }))
export class DoNothingActionWidget extends ActionWidget {
  @Widget.Method()
  public async clickAction() {
        const confirmRs =  executeConfirm(translateValueByKey('oinone第一个自定义Action，啥也没干')||'oinone第一个自定义Action，啥也没干');
    }
}

//定义动作元数据
Action.registerAction('*', {
  displayName: '啥也没干',
  name: 'demo.doNothing',
  id: 'demo.doNothing',
  contextType: ActionContextType.ContextFree,
  bindingType: [ViewType.Table]
} as IClientAction);

Step2 新增翻译记录

前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点：

  1. 不要找有字读配置translate = true的模型，因为会影响后端翻译性能。

  2. 最好统一到一个模型中，便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载，避免性能损失

image.png

Step3 刷新远程资源生成前端语言文件

image.png

Step4 新增或修改.env

前端在项目根目录下新增或修改.env，可以参考.env.example文件。通过.env文件为前端配置oss文件路径，针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为：http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。

  1. yaml文件中oss配置的文件路径：http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/

  2. 租户/translate/模块/语言文件 前端会自动根据上下文组织

# 后端api配置
# API_BASE_URL=http://127.0.0.1:8090
# 下面是国际化语言的cdn配置，默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js
I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo

Step5 重启前端应用看效果

对语言进行中英文切换，进入宠狗达人页面，点击【第一个自定义Action】，查看前端翻译效果

image.png

image.png

Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9328.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
史, 昂's avatar史, 昂数式管理员
0 2
Previous 2024年5月23日 am8:10
Next 2024年5月23日 am8:12

相关推荐

  • 4.1.3 模块之生命周期 Oinone 7天入门到精通

    4.1.3 模块之生命周期

    了解oinone的启动生命周期过程，对于理解oinone或者开发高级功能都有非常大的帮助 一、生命周期大图 图4-1-3-1 生命周期大图 二、平台扩展说明 平台节点通过SPI机制进行扩展，本书籍暂不展开，更多详情请见可关注数式Oinone公众号中的Oinone内核揭秘系列文章。 三、业务扩展说明 接口 说明 使用场景 LifecycleBeginAllInit 系统进入生命周期前置逻辑注：不能有任何数据库操作 系统级别的信息收集上报 LifecycleCompletedAllInit 系统生命周期完结后置逻辑 系统级别的信息收集上报、生命周期过程中的数据或上下文清理 LifecycleBeginInit 模块进入生命周期前置逻辑注：不能有任何数据库操作 预留，能做的事情比较少 LifecycleCompletedInit 模块生命周期完结后置逻辑 本模块需等待其他模块初始化完毕以后进行初始化的逻辑。比如：1.集成模块的初始化2.权限缓存的初始化…… MetaDataEditor 元数据编辑注：不能有任何数据库操作 这个在第3章Oinone的基础入门中已经多次提及，核心场景是向系统主动注册如Action、Menu、View等元数据 ExtendBuildInit 系统构建前置处理逻辑 预留，能做的事情比较少，做一些跟模块无关的事情 ExtendAfterBuilderInit 系统构建后置处理逻辑 预留，能做的事情比较少，做一些跟模块无关的事情 InstallDataInit 模块在初次安装时的初始化逻辑 根据模块启动指令来进行选择执行逻辑，一般用于初始化业务数据。应用启动参数与指令转化逻辑详见4.1.2【模块之启动指令】一文 UpgradeDataInit 模块在升级时的初始化逻辑注：根据启动指令来执行，是否执行一次业务自己控制 ReloadDataInit 模块在重启时的初始化逻辑注：根据启动指令来执行，是否执行一次业务自己控制 表4-1-3-1 业务拓展说明 四、常用生命周期举例 Install\Upgrade\Reload的业务初始化(举例) Step1 新建DemoModuleBizInit DemoModuleBizInit实现InstallDataInit, UpgradeDataInit, ReloadDataInit a. InstallDataInit 对应 init b. UpgradeDataInit 对应 upgrade c. ReloadDataInit 对应 reload modules方法代表改初始化类与哪些模块匹配，以模块编码为准 priority 执行优先级 package pro.shushi.pamirs.demo.core.init; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.common.api.command.AppLifecycleCommand; import pro.shushi.pamirs.boot.common.api.init.InstallDataInit; import pro.shushi.pamirs.boot.common.api.init.ReloadDataInit; import pro.shushi.pamirs.boot.common.api.init.UpgradeDataInit; import pro.shushi.pamirs.demo.api.DemoModule; import pro.shushi.pamirs.demo.api.enumeration.DemoExpEnumerate; import pro.shushi.pamirs.meta.common.exception.PamirsException; import java.util.Collections; import java.util.List; @Component public class DemoModuleBizInit implements InstallDataInit, UpgradeDataInit, ReloadDataInit { @Override public boolean init(AppLifecycleCommand command, String version) { throw PamirsException.construct(DemoExpEnumerate.SYSTEM_ERROR).appendMsg("DemoModuleBizInit: install").errThrow(); //安装指令执行逻辑 // return Boolean.TRUE; } @Override public boolean reload(AppLifecycleCommand command, String version) { throw PamirsException.construct(DemoExpEnumerate.SYSTEM_ERROR).appendMsg("DemoModuleBizInit: reload").errThrow(); //重启指令执行逻辑 // return Boolean.TRUE; } @Override public boolean upgrade(AppLifecycleCommand command, String version, String existVersion) { throw PamirsException.construct(DemoExpEnumerate.SYSTEM_ERROR).appendMsg("DemoModuleBizInit: upgrade").errThrow(); //升级指令执行逻辑 // return Boolean.TRUE; } @Override public List<String> modules() { return Collections.singletonList(DemoModule.MODULE_MODULE); } @Override public int priority() { return 0; } } 图4-1-3-2 新建DemoModuleBizInit Step2 重启看效果 启动指令为-Plifecycle=INSTALL，转化指令为 install为AUTO；upgrade为FORCE 因为DemoModule我们已经执行过好多次了，所以会进入upgrade逻辑。系统重启的效果跟我们预期的结果一致，确实执行了DemoModuleBizInit的upgrade方法 图4-1-3-3 系统重启执行DemoModuleBizInit的upgrade方法 MetaDataEditor 回顾使用情况 最早在3.3.2【模型的类型】一文中介绍“传输模型”时，初始化ViewAction窗口动作时使用到，这里不过多介绍。下面主要介绍下InitializationUtil的工具类包含方法。 注：模块上报元数据只能通过注解或者实现MetaDataEditor接口并使用InitializationUtil工具来进行，更建议用注解方式

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.6K00

  • 产品使用手册（改）

    史, 昂's avatar 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    1.5K00
  • 工作流 Oinone 7天入门到精通

    工作流

    1. 查看、处理流程 1.1 流程查看 流程管理页面共同点： 选项分类筛选 标签筛选 应用下拉选筛选 根据流程名称搜索 流程管理页面名词解释： 任务待办：当前登录用户未处理的流程节点 我发起的：当前登录用户人为触发的流程（模型触发） 抄送：抄送给当前登录用户的节点（审批/填写） 我已办结：由当前登录用户完成人工/自动同意、人工拒绝或人工填写的节点 无需办理：当前登录用户转交的任务/被退回、被撤销、被或签、被其他分支任务拒绝的还未办理的任务 1.2 流程处理 1.2.1 任务待办 任务待办中点击“审批/填写”会进入流程详情处理页面，主要展示 1. 操作区 2. 流程发起人及状态 3. 模型视图内容 4. 流程时间线及其他记录。 审批代办操作区可能包含“分享、同意、拒绝、退回、加签、转交、返回”，填写代办操作区可能包含“分享、转交、提交、暂存、返回”，审批/填写操作区包含哪些动作由流程设计决定。 1.2.2 我发起的 我发起的流程列表中主要分为进行中和已完成的流程。进行中的流程可以进行查看、催办、撤销的操作，已完成的流程可以进行查看操作。 查看我发起的流程，进入流程详情页面，也是根据流程状态展示对应操作功能，进行中的流程有分享、催办、撤销、返回按钮，已完成的流程有分享、返回按钮。 1.2.3 抄送 抄送列表中每条抄送只可以进行查看操作，查看进入流程的详情页面，有分享和返回的操作。 1.2.4 我已办结 我已办结列表中可以进行查看操作，查看进入代办的详情页面，可以进行分享和返回的操作。 1.2.5 无需办理 无需办理列表中可以进行查看操作，查看进入代办的详情页面，可以进行分享和返回的操作。 2. 流程运行记录查看 所有运行流程都会记录在流程运行记录中，可以根据流程的所属应用，流程名称，触发方式和状态进行搜索，流程运行记录详情中展示流程运行的具体节点，运行时间，当前运行节点，异常信息等。

    史, 昂's avatar 史, 昂
    2024年6月20日
    2.1K00
  • 3.5.7.1 基础概念 Oinone 7天入门到精通

    3.5.7.1 基础概念

    模块(module) 概念 在 Oinone 系统的架构中，模块（module）是核心组成元素之一，可以被理解为域（domain）的一个具象化概念。模块的来源有两种：一种是基于后端代码定义，另一种是通过无代码新增。具体的代码定义方式，请参考“[占位符]”，而无代码定义的相关信息则可在“[占位符]”找到。在 Oinone 体系中，模块对应两种实体：模块和应用。 模块： 这是一类特定能力的集合，它可以依赖其他模块，也可以被其他模块依赖。 应用： 它是一种特殊的模块，具备模块的所有特性，并在此基础上可被终端用户访问。 使用 在前端开发中，module通常以应用的形式出现，它们往往对前端用户保持透明。在接下来的讨论中，我们主要围绕应用来探讨module的使用。从应用的角度出发，我们可以在前端开发中识别出以下几种典型使用场景，并通过具体的业务案例来加以说明 应用菜单扩展： 实现自定义母版来定义特定应用的菜单 表格布局扩展： 用于自定义布局的工具，以定义特定应用的表格布局 在这些场景中，我们着重实现了应用层面的隔离，确保每个模块都能在应用的维度上独立运作 查找 在实际业务开发中，有3个方式可以找到应用 浏览器url查找(查找速度快，可能不准) 图3-5-7-1 浏览器url查找模块(module) 接口返回查找 第一步找到截图类似请求 图3-5-7-2 接口找到viewActionQuery 第二步根据返回找应用 图3-5-7-3 接口返回查找模块(module) vue调试器选中对应的组件查找 图3-5-7-4 vue调试器查找模块(module) 推荐使用浏览器url查找，若与预期不符，可用另外两种方式查找 模型(model) 概念 在 Oinone 系统的架构中，模型（model）是另一个关键核心组成部分。模型在业务层面主要体现之一为数据库的实体表，它是承载业务实现的基础结构。要了解模型的详细介绍，请参考“[占位符]”，前端所用的模型，对应后端代码定义来说，代表的是模型的编码。 关于模型的定义，我们提供了两种方法： 代码定义： 对于需要通过编程实现的模型定义，您可以参考“[占位符]”来了解具体的代码实现方法； 无代码定义：如果您倾向于使用无代码工具来定义模型，具体的操作和流程可以在“[占位符]”中找到 使用 在前端开发中，模型是前端运行的必要条件，以下场景中，模型不直接感知: 视图渲染 页面之间跳转交互 与后端交互 以下场景中，模型会直接决定前端的渲染逻辑 母版扩展：为某模型扩展母版 布局扩展：为某模型扩展布局 页面扩展：为某模型扩展个性化页面 字段扩展: 扩展字段时加上模型的范围 动作扩展: 扩展动作时加上模型的范围 以上场景中，涵盖了前端工作的方方面面，在OInone体系中，模型不止是后端运行得基础，同样也决定了前端如何运行，那这样做有什么好处呢？ 前后端几乎不需要联调，联调的协议用模型来承载 前端无需定义路由、权限埋点 查找 在实际业务开发中，有3个方式可以找到模型 浏览器url查找 图3-5-7-5 浏览器url查找模型(model) 接口返回查找 第一步找到类似截图请求 图3-5-7-6 接口找到viewActionQuery 第二步根据返回找模型 图3-5-7-7 接口找到viewActionQuery vue调试器选中对应的组件查找 图3-5-7-8 vue调试器查找模型(model) 动作(action) 概念 动作(action)定义了终端用户得交互，它描述了前端与前端、前端与后端之间的交互。 动作涵盖了前端以下部分: 页面跳转(router) 调用后端接口 页内交互(打开弹窗、打开抽屉) 它有两部分的来源: 模型内定义动作 窗口动作(页面跳转、打开弹窗、打开抽屉) 服务器动作(调接口) 前端定义客户端动作，可自定义其它逻辑，例如: 把选中行的某一列数据复制一下 使用 动作的使用绝大部分的情况是由平台自动执行的，在平台执行不符合预期时可以使用自定义动作自行扩展 查找 vue调试器选中对应的组件查找 选中服务器动作(ServerAction) 图3-5-7-9 vue调试器查找服务器动作(ServerAction) 选中窗口动作(ViewAction) 图3-5-7-10 vue调试器查找窗口动作(ViewAction) 字段(field) 概念 在我们的后端模型中，字段（Field）是核心的定义元素，它们在数据库中表现为数据表的列。更重要的是，这些字段在前端应用中发挥着数据传输的关键作用。例如，当前端需要调用后端接口时，它会发送如下结构的数据： 图3-5-7-11 name字段数据举例 这里的 "name" 是一个字段实例，它连接了前后端的交互。在后端，该字段不仅用于数据存储，也参与逻辑运算。 字段在 Oinone 系统中的加强应用 在 Oinone 系统中，字段的功能得到了扩展。除了基本的前后端数据交互，字段的定义还直接影响前端的用户界面（UI）交互。例如： 前端交互组件的选择：前端交互组件的类型取决于字段的数据类型。对于 String 类型的 "name" 字段，前端会使用输入框来收集用户输入的 "张三"。 数据存储和类型定义：在后端，"name" 字段被明确定义为 String 类型，这决定了它如何存储和处理数据。 字段与前端组件定义的解耦 一个关键的设计原则是，前端组件的定义与具体的字段值或字段名（如 "name" 或 "张三"）不直接相关，而是基于字段的数据类型（此例中为 String）。这种设计实现了： 前端组件的一致性：确保所有组件的输入输出遵循同一数据类型（如 String）。 高度的组件复用性：在满足 UI 要求的前提下，任何 String 类型的字段都可以使用这种通用的组件设计。 使用 Oinone 系统中的视图与字段交互的灵活性 Oinone 系统为每种视图和字段类型（Ttype）提供了默认的交互模式。这不仅保证了前端工程启动时所有界面的即时展示，也为开发者带来了高度的灵活性和扩展能力。以下是这一设计理念的关键点： 1. 视图与字段交互的默认实现 每种视图都有对应字段类型（Ttype）的默认交互实现，确保用户界面一致且直观。这使得在前端工程启动时，所有界面能够无需额外配置即可正常展示。 2. 灵活性与扩展能力 尽管系统提供了默认的交互方式，开发者仍然拥有自定义这些交互方式的能力。这意味着开发者可以根据应用需求，设计更加贴合业务逻辑和用户体验的交互模式。 3. 覆盖和替换默认组件 最为重要的是，开发者不仅可以添加新的交互方式，还可以完全覆盖和替换系统的默认组件。这提供了极大的自由度，使开发者能够根据具体场景重新设计和实现界面组件，从而达到完全定制化的用户体验。 查找 vue调试器选中对应的组件查找 图3-5-7-12 vue调试器查找字段(field) 视图类型(viewType) 概念 在 Oinone 系统中，视图是模型在前端的具体表现形式。视图的核心组成和功能如下： 1. 组成要素 字段：视图中的字段代表了模型的数据结构，它们是界面上数据显示和交互的基础。 动作：视图包含的动作定义了用户可以进行的操作，如添加、编辑、删除等。 前端UI：视图的界面设计，包括布局、元素样式等，决定了用户的交互体验。 2. 数据源与交互 数据源：视图的数据直接来源于后端模型。这意味着前端视图展示的内容是根据后端模型中定义的数据结构动态生成的。 交互：视图不仅展示数据，还提供与数据交互的能力。这些交互也是基于后端模型定义的，包括数据的增删改查等操作。 3. 灵活性 视图可以灵活选择是否采用模型的交互。这意味着开发者可以根据需求决定视图仅展示模型的数据，或者同时提供与数据的交互功能。 使用 在 Oinone 系统中，用户可以通过无代码界面设计器轻松配置视图。系统内置了以下主要视图类型： 表格（Table） 表单（Form） 详情（Detail） 搜索（Search） 画廊（Gallery） 树（Tree） 界面设计器配置…

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.8K00
  • 4.1.14 Search之非存储字段条件 Oinone 7天入门到精通

    4.1.14 Search之非存储字段条件

    search默认查询的是模型的queryPage函数，但我们有时候需要替换调用的函数，这个特性会在下个版本支持。其核心场景为当搜索条件中有非存储字段，如果直接用queryPage函数的rsql拼接就会报错，所以非存储字段不会增加在rsql中。本文介绍一个比较友好的临时替代方案。 非存储字段条件（举例） Step1 为PetTalent新增一个非存储字段unStore @Field(displayName = "非存储字段测试",store = NullableBoolEnum.FALSE) private String unStore; 图4-1-14-1 为PetTalent新增一个非存储字段unStore Step2 修改PetTalent的Table视图的Template 在标签内增加一个查询条件 <field data="unStore" /> 图4-1-14-2 修改PetTalent的Table视图的Template Step3 重启看效果 进入宠物达人列表页，在搜索框【非存储字段测试】输入查询内容，点击搜索跟无条件一致 Step4 修改PetTalentAction的queryPage方法 package pro.shushi.pamirs.demo.core.action; …… 引入依赖类 @Model.model(PetTalent.MODEL_MODEL) @Component public class PetTalentAction { ……其他代码 @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API}) public Pagination<PetTalent> queryPage(Pagination<PetTalent> page, IWrapper<PetTalent> queryWrapper){ QueryWrapper<PetTalent> queryWrapper1 = (QueryWrapper<PetTalent>) queryWrapper; Map<String, Object> queryData = queryWrapper.getQueryData(); String unStore = (String) queryData.get(LambdaUtil.fetchFieldName(PetTalent::getUnStore)); if (StringUtils.isNotEmpty(unStore)) { //转换查询条件 queryWrapper1.like( 图4-1-14-3 修改PetTalentAction的queryPage方法 Step5 重启看效果 在搜索框【非存储字段测试】输入查询内容，跟通过【达人】字段搜索的效果是一致的 图4-1-14-4 示例效果

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.9K00

Leave a Reply

Please Login to Comment

Comments(2)

  • xiao3's avatar
    xiao3 2024年11月25日 am10:43

    只支持英语吗？如何添加其他语种？

    • shao's avatar
      shao 2024年11月25日 pm5:24

      @xiao3：支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈