From 220f49743f17e40b15502a4ad73f05eb4010c5d5 Mon Sep 17 00:00:00 2001 From: yubaolee Date: Wed, 25 Jun 2025 23:20:18 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=83docs:=20=E5=AE=8C=E5=96=84=E5=A4=9A?= =?UTF-8?q?=E8=AF=AD=E8=A8=80=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- newdocs/docs/notes/pro/multilangs.md | 66 +++++++++++++++++++++++----- 1 file changed, 55 insertions(+), 11 deletions(-) diff --git a/newdocs/docs/notes/pro/multilangs.md b/newdocs/docs/notes/pro/multilangs.md index 7d14f71a..17896905 100644 --- a/newdocs/docs/notes/pro/multilangs.md +++ b/newdocs/docs/notes/pro/multilangs.md @@ -6,6 +6,8 @@ permalink: /pro/multilangs/ ## 多语言配置 +![2025-06-25-23-10-11](http://img.openauth.net.cn/2025-06-25-23-10-11.png) + vue3版本使用 vue-i18n 实现多语言支持,通过 `useI18n()` 钩子访问翻译功能。 ### 使用方法 @@ -22,25 +24,67 @@ const i18n = useI18n()
{{ $t('login.title') }}
``` -3. **JS代码中使用** +3. **vue setup代码中使用** ```javascript -i18n.t('login.validation.usernameRequired') +let title = i18n.t('route.dashboard'); ``` -### 配置示例 +4. **普通js代码中使用** -在登录页面可见的多语言项: -- 登录相关:`login.title`, `login.workflowEngine`, `login.usernamePlaceholder`, `login.passwordPlaceholder` -- 验证消息:`login.validation.usernameRequired`, `login.validation.passwordRequired` -- 租户选择:`login.tenants.default`, `login.tenants.notExist` +如果在普通的js(非vue component)代码中使用,需要使用 `i18n.global.t` 方法。 -### 添加新语言 +```javascript +import i18n from '@/i18n' -1. 在语言文件中添加新的翻译项 -2. 确保所有使用的键都有对应翻译 +let title = i18n.global.t('route.dashboard'); +``` + +### 配置说明 + +界面显示的文本,在 `src\i18n\langs\` 文件夹中配置,目前支持中文、英文。以 `zh-cn.js` 为例: + +```javascript +export default { + login: { + title: 'OpenAuth.Net Vue3版', + logIn: '登 录', + username: '账号', + password: '密码', + usernamePlaceholder: '请输入登录账号', + oauthLoginTip: '接口服务器启用了Oauth认证,请点击这里登录', + tips: { + system: '默认System登录后,你可以无法无天', + admin: 'admin/admin登录后,会少一点权限,资源管理/分类管理的字段会少一点', + test: 'test/test登录后,权限会更少,资源管理/分类管理的字段会更少' + } + }, + tagsView: { + refresh: '刷新', + close: '关闭', + closeOthers: '关闭其它', + closeAll: '关闭所有' + }, + common: { + language: '语言', + welcome: '欢迎您,', + ok: '确定', + cancel: '取消', + }, + language: { + zh: '简体中文', + en: '英文' + }, + dashboard: { + siteInfo: '为了大家体验的一致性,数据库每1小时还原一次。不同于其他基于Element框架界面的花里胡哨,各种大按钮大缝隙,我们的原则:美观大方、简洁易用', + footer: { + copyright: '最好用的.Net权限工作流框架', + officialWebsite: '官方网站' + } + } +} +``` ### 注意事项 - 使用嵌套对象结构组织翻译项 - 参数化文本使用 `{param}` 语法 -- 确保所有用户界面文本都使用 i18n