Explorar o código

加入多语言

root %!s(int64=2) %!d(string=hai) anos
pai
achega
041ecdcc8e
Modificáronse 4 ficheiros con 67 adicións e 6 borrados
  1. 1 1
      app.html
  2. 5 1
      lang/en-US.js
  3. 58 4
      login.html
  4. 3 0
      pages/login/header.js

+ 1 - 1
app.html

@@ -87,7 +87,7 @@
     (function () {
       let amis = amisRequire('amis/embed');
       const match = amisRequire('path-to-regexp').match;
-    
+      // 引入语言包内容
       let enUSLocale = enUs()
       let zhCNLocale = zhCn()
       //多语言映射

+ 5 - 1
lang/en-US.js

@@ -4,7 +4,11 @@ function enUs() {
     replaceText: {
       '会员编号':'USER NUMBER en-US',
       '个人信息':'User Info',
-      '名字e':'show name'
+      '名字e':'show name',
+      '用户名':'User Name',
+      '密码': 'Password',
+      '验证码': 'Verification Code',
+      '平台': 'Platform'
     },
     register: {
         'Action.countDown': 'Wait for ${timeLeft}s',

+ 58 - 4
login.html

@@ -2,7 +2,7 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8" />
-    <title>登录</title>
+    <title>Roma</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="icon" type="image/x-ico" href=""/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
@@ -58,7 +58,7 @@
             height: 100%;
         }
         .amis-scope h1 {
-            font-size: 5vw;
+            font-size: 4vw;
         }
         @media (max-width: 768px) {
             .amis-scope .cxd-Form{
@@ -99,11 +99,55 @@
 <body>
 <div id="root" class="app-wrapper"></div>
 <script type='text/javascript' src='./public/static/amis-sdk/sdk.js'></script>
+<script src="./lang/en-US.js"></script>
+<script src="./lang/zh-CN.js"></script>
 
 <script type="text/javascript">
     (function () {
         let amis = amisRequire('amis/embed');
+        // 引入语言包内容
+        let enUSLocale = enUs()
+        let zhCNLocale = zhCn()
+        //多语言映射
+        const languageMap = {
+          "en-US": {
+            register: enUSLocale.register,
+            replaceText: enUSLocale.replaceText,
+            langReplaceTextIgnoreKeys: enUSLocale.langReplaceTextIgnoreKeys
+          },
+          "zh-CN": {
+            register: zhCNLocale.register,
+            replaceText: zhCNLocale.replaceText,
+            langReplaceTextIgnoreKeys: zhCNLocale.langReplaceTextIgnoreKeys
+          }
+        }
+        // 缓存中设置的语言
+        let lang = localStorage.getItem('language')
+        //内置组件的翻译信息
+        let langRegister = {}
+        //json配置的全文翻译信息
+        let langReplaceText = {}
+        //需要忽略json配置的全文替换key
+        let langReplaceTextIgnoreKeys = {}
+        if (undefined !== languageMap[lang]) {
+          langRegister = languageMap[lang].register
+          langReplaceText = languageMap[lang].replaceText
+          langReplaceTextIgnoreKeys = languageMap[lang].langReplaceTextIgnoreKeys
+        } else {
+          // 未找到默认中文
+          lang = 'zh-CN'
+        }
+        // 没有替换或忽略替换配置,则为{}
+        if (undefined !== langReplaceText && Object.keys(langReplaceText).length !== 0) {
+        } else {
+          langReplaceText = {}
+        }
 
+        if (undefined !== langReplaceTextIgnoreKeys && Object.keys(langReplaceTextIgnoreKeys).length !== 0) {
+        } else {
+          langReplaceTextIgnoreKeys = {}
+        }
+      // 页面json内容
         const amisJSON = {
             "type": "wrapper",
             "className": "fixed login_layout m:h-screen m:w-full bg-gray-50",
@@ -196,7 +240,7 @@
                     {
                         "type":"html",
                         "className":"text-center",
-                        "html":"<h1 class='title-name'>Roma管理后台</h1>"
+                        "html":"<h1 class='title-name'>Roma台</h1>"
                     },
                     {
                         "type": "input-group",
@@ -281,7 +325,17 @@
 
         };
 
-        let amisScoped = amis.embed('#root', amisJSON);
+        let amisScoped = amis.embed(
+          '#root', 
+          amisJSON, 
+          { 
+            locale: lang 
+          }, 
+          { 
+            replaceText: langReplaceText,
+            langReplaceTextIgnoreKeys: langReplaceTextIgnoreKeys
+          }
+        );
     })();
     // 刷新验证码
     function refresh_code()

+ 3 - 0
pages/login/header.js

@@ -0,0 +1,3 @@
+function getHeader() {
+    
+}