6.4 国际化之多语言

史, 昂 • 2024年5月23日 am8:11 • Oinone 7天入门到精通 • 阅读 1302

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

选择新增翻译生效模块
选择翻译的模型为：菜单模型
源语言选择中文，目标选择English
添加翻译项目：
1. 源术语为：商店
2. 翻译值为：shop
3. 状态为：激活

Step2 查看效果

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

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

在前面菜单的翻译中，似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样，当然不是。是因为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 重启应用查看效果

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

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

前端翻译

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

Step1 修改前端DoNothingActionWidget.ts

import translateValueByKey
提示语用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 新增翻译记录

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

不要找有字读配置translate = true的模型，因为会影响后端翻译性能。
最好统一到一个模型中，便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载，避免性能损失

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

Step4 新增或修改.env

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

yaml文件中oss配置的文件路径：http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/
租户/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】，查看前端翻译效果

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

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

Oinone 7天从入门到精通

史, 昂数式管理员

0 2

6.5 权限体系（改）

上一篇 2024年5月23日 am8:10

6.3 数据审计（改）

下一篇 2024年5月23日 am8:12

4.2 前端高级特性

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.0K000
Oinone 7天入门到精通

3.5.7.2 自定义母版

母版是什么在业务系统中，母版是一种全局通用的组件，用于包裹每个页面的元素。这个概念类似于 PPT 中的母版，它定义了页面的整体结构、样式和布局，使得系统具有一致的外观和风格。特点：全局通用：母版是全局性的，适用于系统中的每个页面，确保一致性的用户体验。包裹元素：母版包裹每个页面的元素，定义了整体的结构和布局。外观一致性：通过统一的母版设计，系统达到外观和风格的一致性。与 PPT 母版的类比：在母版的概念上，与 PPT 中的母版类似，都是用于定义整体结构和样式，确保每个页面都具有一致的外观。默认母版范围: 图3-5-7-20 默认母版范围作用场景在系统中，我们提供了多个纬度的母版，包括全局、应用和页面纬度。这样的设计允许根据不同的业务场景选择合适的母版纬度，以满足不同层次的定制需求。母版纬度：全局母版：覆盖系统中所有页面，确保全局的一致性和统一的用户体验。定义全局性的结构、样式和布局。应用母版：适用于特定应用或模块，定制化程度介于全局和页面之间。允许在不同应用间实现一定的差异化。页面母版：面向具体页面，提供最大的定制化空间。允许在不同页面中定义不同的结构和样式。选择纬度：业务场景决定：根据具体的业务场景和需求选择合适的母版纬度。定制化需求：如果需要全局一致性，选择全局母版；如果在应用层面有特定需求，选择应用母版；如果需要最大的灵活性和定制化，选择页面母版。参数说明：在系统中，使用 registerMask 注册母版时，需要提供两个参数。第一个参数是母版的 XML，第二个参数用于控制母版的注册行为，包括 module、moduleName、model 和 actionName。母版 XML（第一个参数）：提供母版的 XML 描述，定义了母版的结构和样式。控制参数（第二个参数）： module：指定模块的名称。 moduleName：指定模块的显示名称。 model：指定母版所属的模型。 actionName：指定母版的操作名称，可以是字符串或字符串数组。全局母版可以使用 registerMask 注册母版。当第二个参数为 {} 时，即代表注册全局母版。示例工程目录以下是需关注的工程目录示例，并确保导入导出依赖正确：图3-5-7-21 全局纬度注册母版工程目录示例示例代码以下是一个示例代码： import { registerMask } from '@kunlun/dependencies'; /** * mask: 在做系统时，我们通常会把外层的布局(菜单、顶部导航)等抽出公共组件，公共组件会抽离全局通用。类似ppt母版的概念即为Mask * registerMask 第二个入参为{}即注册了全局得母版 * * 和默认母版相比移除右上角消息、语言切换、用户 * `<block> * <widget widget="notification" /> * <widget widget="divider" /> * <widget widget="language" /> * <widget widget="divider" /> * <widget widget="user" /> * </block>` */ const registerGlobalMask = () => { registerMask(` <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask>`, {}); } registerGlobalMask(); 图3-5-7-22 全局纬度注册母版代码示例复制这段代码执行下registerGlobalMask()试试看吧效果右上角消息、语言切换、用户被移除。图3-5-7-23 全局纬度注册母版效果示例应用母版在系统中，可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’} 时，即注册了 resource（资源）应用的母版。示例工程目录以下是需关注的工程目录示例，更新导出./moduleMask：图3-5-7-24 应用纬度注册母版工程目录示例示例代码以下是一个示例代码： /** * registerMask 第二个入参为{moduleName: 'resource'}即注册了resource(资源)应用的母版 * * resource来源: 通常是浏览器url上的module * * 和默认模版相比拿掉了菜单 * `<sidebar> * <widget widget="nav-menu" height="100%"…

史, 昂
2024年5月23日
1.1K000
Oinone 7天入门到精通

工作台

有工作台权限的用户，默认登录页为工作台，也可以通过APP Finder进入工作台。 1. 快捷处理右上角消息中会气泡展示未处理或未读的操作，点击展开后可以点过去进行快捷处理。 2. 查看、处理流程 2.1 流程查看流程管理页面共同点： 1包含选项分类筛选 2包含标签筛选 3包含应用下拉选筛选 4包含根据流程名称搜素流程管理页面名词解释：待办：当前登录用户未处理的流程节点我发起的：当前登录用户人为触发的流程（模型触发）抄送：抄送给当前登录用户的节点（审批/填写）我已办结：由当前登录用户完成人工/自动同意、人工拒绝或人工填写的节点无需办理：当前登录用户转交的任务/被退回、被撤销、被或签、被其他分支任务拒绝的还未办理的任务站内信：当前登录用户收到的站内信 2.2 流程处理每条流程数据下方有动作，点击进入流程处理页面，大致分为详情页和操作页。待办中点击“审批/填写”会进入流程操作页。审批操作页可能包含“同意、拒绝、退回、加签、转交、返回”，填写操作页可能包含“提交、暂存”，审批操作页包含哪些动作由流程设计决定。我发起的、抄送、我已办结、无需处理点击“查看”会进入流程详情页。 3. 应用快捷入口应用中心中星标的收藏应用会展示在此处，点击可快捷进入应用。应用中心中已安装的应用点击星标即可收藏。

史, 昂
2024年6月20日
695000
3.4.2 函数的开放级别与类型

一、函数开放级别我们在日常开发中通常会因为安全性，为方法定义不同的开放层级，或者通过应用分层把需要对web开放的接口统一定义在一个独立的应用中。oinone也提供类似的策略，所有逻辑都通过Function来归口统一管理，所以在Function是可以定义其开放级别有API、REMOTE、LOCAL三种类型，配置可多选。四种自定义新增方式与开放级别的对应关系函数本地调用(LOCAL) 远程调用(REMOTE) 开放(API) 伴随模型新增函数支持支持【默认】支持独立新增函数绑定到模型支持支持【默认】支持独立新增函数只作公共逻辑单元支持支持【默认】伴随ServerAction新增函数必选表3-4-2-1 四种自定义新增方式与开放级别的对应关系远程调用（REMOTE）如果函数的开放级别为本地调用，则不会发布远程服务和注册远程服务消费者非数据管理器函数提供者：如果函数定义在当前部署包的启动应用中，则主动发布远程服务提供者。消费者：如果函数定义在部署依赖包中但未在当前部署包的启动应用中，则系统会默认注册远程消费者。发布注册的远程服务使用命名空间和函数编码进行路由。所以非数据管理器函数的消费者并不需要感知该服务是否是本地提供还是远程提供。而服务提供者也不需要手动注册远程服务。数据管理器类函数提供者：如果数据管理器函数所在模型定义在当前部署包的启动应用中，则系统会主动发布数据管理器的远程服务作为数据管理器的远程服务提供者；消费者：如果模型定义在部署依赖包中但未在当前部署包的启动应用中，则系统会主动注册数据管理器的远程服务消费者。所以数据管理器类函数的消费者与服务提供者并不需要感知函数的远程调用。二、函数类型函数的类型语义分为：增、删、改、查，在编程模式下目前用于Function为API级别，生成GraphQL的Schema时放在query还是mutation。查放在query，其余放mutation。三、函数分类 TBD 在无代码编辑器中，函数分类主要用函数选择的分类管理。

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.1K000
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. 流程运行记录查看所有运行流程都会记录在流程运行记录中，可以根据流程的所属应用，流程名称，触发方式和状态进行搜索，流程运行记录详情中展示流程运行的具体节点，运行时间，当前运行节点，异常信息等。

史, 昂
2024年6月20日
1.0K000

登录后才能评论

评论列表（2条）

xiao3 2024年11月25日 am10:43

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

Reply
- shao 2024年11月25日 pm5:24
  
  @xiao3：支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈
  
  Reply