refactor: 国际化支持

src/locale/en-US/index.json

@@ -1,52 +1,36 @@
 {
-  "login": "login",
-  "login.form.forgetPassword": "forget the password",
-  "login.form.password.errMsg": "",
-  "login.form.password.placeholder": "",
-  "login.form.register": "register",
-  "login.form.rememberPassword": "Remember password",
-  "login.form.subtitle": "Arco Admin gives you a better experience",
-  "login.form.title": "welcome",
-  "login.form.userName.errMsg": "",
-  "login.form.userName.placeholder": "",
-  "login.tab.iphone": "",
-  "menu.arcoWebsite": "Arco Design",
-  "menu.dashboard": "dash board",
-  "menu.exception": "Exception page",
-  "menu.faq": "common problem",
-  "menu.form": "form page",
-  "menu.list": "List",
-  "menu.profile": "Details page",
-  "menu.result": "Results page",
-  "menu.server.dashboard": "Dashboard-Server",
-  "menu.server.monitor": "Real-time monitoring-server",
-  "menu.server.workplace": "Workbench-server",
-  "menu.user": "Personal Center",
-  "menu.visualization": "data visualization",
-  "navbar.action.locale": "Switch to Chinese",
-  "navbar.docs": "Document Center",
-  "settings.alertContent": "After configuration, it will only take effect temporarily. To actually affect the project, click the \"Copy Configuration\" button below and replace the configuration into settings.json.",
-  "settings.close": "closure",
-  "settings.color.tooltip": "10 gradient colors generated based on theme colors (copy the configuration to the project so that the theme colors can take effect for light/dark mode at the same time)",
-  "settings.colorWeak": "Color Weakness Mode",
-  "settings.content": "content area",
-  "settings.copySettings": "Copy configuration",
-  "settings.copySettings.message": "Copied successfully, please paste into the src/settings.json file",
-  "settings.footer": "",
-  "settings.language": "",
-  "settings.menu": "",
-  "settings.menuFromServer": "",
-  "settings.menuWidth": "",
-  "settings.navbar": "",
-  "settings.navbar.alerts": "",
-  "settings.navbar.screen.toExit": "",
-  "settings.navbar.screen.toFull": "",
-  "settings.navbar.theme.toDark": "",
-  "settings.navbar.theme.toLight": "",
-  "settings.otherSettings": "",
-  "settings.search": "",
-  "settings.tabBar": "",
-  "settings.themeColor": "",
-  "settings.title": "",
-  "settings.topMenu": ""
+  "common.login": "Login",
+  "common.logout": "Logout",
+  "common.ok": "OK",
+  "common.cancel": "Cancel",
+  "common.save": "Save",
+  "common.delete": "Delete",
+  "common.confirm": "Confirm",
+  "common.add": "Add",
+  "common.edit": "Edit",
+  "common.copy": "Copy",
+  "common.close": "Close",
+  "common.back": "Back",
+  "login-agreement": "I have read and agree",
+  "login-agreement-and": "and",
+  "login-privacy-policy": "Privacy Policy",
+  "login-service-agreement": "Service Agreement",
+  "login-tab-account": "Account login",
+  "login-tab-tel": "Captcha login",
+  "login-title": "Welcome",
+  "login.form.agreement.tips": "Please read and agree to the Service Agreement and Privacy Policy",
+  "login.form.captcha.msg": "Please enter verification code",
+  "login.form.captcha.placeholder": "Verification code",
+  "login.form.captcha.resend": "Retrieve {seconds} s",
+  "login.form.captcha.send": "Send",
+  "login.form.login.success": "Login successful!",
+  "login.form.password.placeholder": "Please enter password",
+  "login.form.phone.placeholder": "Please enter phone number",
+  "login.form.remember": "Remember password",
+  "login.form.username.msg": "Please enter account/email",
+  "login.form.username.placeholder": "Account/Email",
+  "login.more": "More",
+  "settings.close": "",
+  "settings.copySettings": "",
+  "common.signin": "Sign in"
 }

src/locale/zh-CN/index.json

@@ -1,52 +1,35 @@
 {
-  "login": "登录",
-  "login.form.forgetPassword": "忘记密码",
-  "login.form.password.errMsg": "密码错误",
+  "common.login": "登录",
+  "common.logout": "退出",
+  "common.ok": "确定",
+  "common.cancel": "取消",
+  "common.save": "保存",
+  "common.delete": "删除",
+  "common.add": "添加",
+  "common.edit": "编辑",
+  "common.copy": "复制",
+  "common.close": "关闭",
+  "common.back": "返回",
+  "login-agreement": "我已阅读并同意",
+  "login-agreement-and": "和",
+  "login-privacy-policy": "隐私政策",
+  "login-service-agreement": "服务协议",
+  "login-tab-account": "账号登录",
+  "login-tab-tel": "手机号登录",
+  "login-title": "欢迎登录",
+  "login.form.agreement.tips": "请阅读并同意服务协议和隐私政策",
+  "login.form.captcha.msg": "请输入验证码",
+  "login.form.captcha.placeholder": "请输入验证码",
+  "login.form.captcha.resend": "重新获取 {seconds} s",
+  "login.form.captcha.send": "获取验证码",
+  "login.form.login.success": "登录成功！",
   "login.form.password.placeholder": "请输入密码",
-  "login.form.register": "注册",
-  "login.form.rememberPassword": "记住密码",
-  "login.form.subtitle": "Arco Admin 给你更好的体验",
-  "login.form.title": "欢迎",
-  "login.form.userName.errMsg": "账号错误",
-  "login.form.userName.placeholder": "请输入账号",
-  "login.tab.iphone": "手机号",
-  "menu.arcoWebsite": "Arco Design",
-  "menu.dashboard": "仪表盘",
-  "menu.exception": "异常页",
-  "menu.faq": "常见问题",
-  "menu.form": "表单页",
-  "menu.list": "列表页",
-  "menu.profile": "详情页",
-  "menu.result": "结果页",
-  "menu.server.dashboard": "仪表盘-服务端",
-  "menu.server.monitor": "实时监控-服务端",
-  "menu.server.workplace": "工作台-服务端",
-  "menu.user": "个人中心",
-  "menu.visualization": "数据可视化",
-  "navbar.action.locale": "切换为中文",
-  "navbar.docs": "文档中心",
-  "settings.alertContent": "配置之后仅是临时生效，要想真正作用于项目，点击下方的 \"复制配置\" 按钮，将配置替换到 settings.json 中即可。",
+  "login.form.phone.placeholder": "请输入手机号",
+  "login.form.remember": "记住密码",
+  "login.form.username.msg": "请输入账号/邮箱",
+  "login.form.username.placeholder": "账号/邮箱",
+  "login.more": "更多方式",
   "settings.close": "关闭",
-  "settings.color.tooltip": "根据主题颜色生成的 10 个梯度色（将配置复制到项目中，主题色才能对亮色 / 暗黑模式同时生效）",
-  "settings.colorWeak": "色弱模式",
-  "settings.content": "内容区域",
-  "settings.copySettings": "",
-  "settings.copySettings.message": "复制成功，请粘贴到 src/settings.json 文件中",
-  "settings.footer": "底部",
-  "settings.language": "语言",
-  "settings.menu": "菜单栏",
-  "settings.menuFromServer": "菜单来源于后台",
-  "settings.menuWidth": "菜单宽度 (px)",
-  "settings.navbar": "",
-  "settings.navbar.alerts": "消息通知",
-  "settings.navbar.screen.toExit": "点击退出全屏模式",
-  "settings.navbar.screen.toFull": "点击切换全屏模式",
-  "settings.navbar.theme.toDark": "点击切换为暗黑模式",
-  "settings.navbar.theme.toLight": "点击切换为亮色模式",
-  "settings.otherSettings": "其他设置",
-  "settings.search": "搜索",
-  "settings.tabBar": "多页签",
-  "settings.themeColor": "主题色",
-  "settings.title": "页面配置",
-  "settings.topMenu": "顶部菜单栏"
+  "settings.copySettings": "确定",
+  "signin": "注册"
 }

src/views/login/components/login-form.vue

@@ -6,14 +6,14 @@
     :model="form"
     :rules="rules"
   >
-    <div class="login-form-title">欢迎登录</div>
+    <div class="login-form-title">{{ $t('login-title') }}</div>
     <a-tabs v-model:active-key="tabActiveKey" size="mini" animation>
-      <a-tab-pane key="1" title="账号登录" destroy-on-hide>
+      <a-tab-pane key="1" :title="$t('login-tab-account')" destroy-on-hide>
         <a-form-item field="username" validate-trigger="blur" hide-label>
           <a-input
             v-model="form.username"
             autocomplete="username"
-            placeholder="账号/邮箱"
+            :placeholder="$t('login.form.username.placeholder')"
           >
             <template #prefix>
               <icon-user />
@@ -24,7 +24,7 @@
           <a-input-password
             v-model="form.password"
             autocomplete="current-password"
-            placeholder="请输入密码"
+            :placeholder="$t('login.form.password.placeholder')"
             allow-clear
           >
             <template #prefix>
@@ -37,16 +37,16 @@
           :model-value="loginConfig.rememberPassword"
           @change="setRememberPassword"
         >
-          记住密码
+          {{ $t('login.form.remember') }}
         </a-checkbox>
       </a-tab-pane>
-      <a-tab-pane key="2" title="手机号登录" destroy-on-hide>
+      <a-tab-pane key="2" :title="$t('login-tab-tel')" destroy-on-hide>
         <a-form-item field="phone" validate-trigger="blur" hide-label>
           <a-input-group :style="{ width: '320px' }">
             <country-code-select />
             <a-input
               v-model="form.phone"
-              placeholder="请输入手机号"
+              :placeholder="$t('login.form.phone.placeholder')"
               :max-length="11"
               allow-clear
             />
@@ -56,7 +56,7 @@
           <a-input-group :style="{ width: '320px' }">
             <a-input
               v-model="form.captcha"
-              placeholder="请输入验证码"
+              :placeholder="$t('login.form.captcha.placeholder')"
               allow-clear
             >
             </a-input>
@@ -77,10 +77,12 @@
       :loading="loading"
       @click="handleSubmit"
     >
-      登录
+      {{ $t('common.login') }}
     </a-button>
-    <a-button type="text" long class="login-form-register-btn"> 注册 </a-button>
-    <a-divider orientation="center">更多方式</a-divider>
+    <a-button type="text" long class="login-form-register-btn">
+      {{ $t('signin') }}
+    </a-button>
+    <a-divider orientation="center">{{ $t('login.more') }}</a-divider>
     <a-space class="login-form-more" :size="2" fill>
       <icon-alipay-circle style="color: #4b81ff" />
       <icon-wechat style="color: #38ad19" />
@@ -92,10 +94,12 @@
       </template>
     </a-space>
     <div class="login-form-actions">
-      <a-checkbox v-model="form.agreement"> 我已阅读并同意 </a-checkbox>
-      <a-link>服务协议</a-link>
-      <span>和</span>
-      <a-link>隐私政策</a-link>
+      <a-checkbox v-model="form.agreement">
+        {{ $t('login-agreement') }}
+      </a-checkbox>
+      <a-link>{{ $t('login-service-agreement') }}</a-link>
+      <span>{{ $t('login-agreement-and') }}</span>
+      <a-link>{{ $t('login-privacy-policy') }}</a-link>
     </div>
   </a-form>
 </template>
@@ -117,7 +121,7 @@
   const { t } = useI18n();
   const codeDisabled = ref(false);
   const userStore = useUserStore();
-  const codeText = ref('获取验证码');
+  const codeText = ref(t('login.form.captcha.send'));
   const formRef = ref();
   const tabActiveKey = ref('1');
   const { loading, setLoading } = useLoading();
@@ -136,12 +140,12 @@
   });
 
   const rules = {
-    username: [{ required: true, message: '请输入账号/邮箱' }],
-    captcha: [{ required: true, message: '请输入验证码' }],
-    // 密码格式：6-32位，包含大小写字母、数字、特殊字符(除空格)两种以上
+    username: [{ required: true, message: t('login.form.username.msg') }],
+    captcha: [{ required: true, message: t('login.form.captcha.msg') }],
     password: [
       { required: true, message: '请输入密码' },
       {
+        // 密码格式：6-32位，包含大小写字母、数字、特殊字符(除空格)两种以上
         match:
           /^(?![\d]+$)(?![a-z]+$)(?![A-Z]+$)(?![~!@#$%^&*.]+$)[\da-zA-z~!@#$%^&*.]{6,32}$/,
         message: '密码格式不正确',
@@ -156,16 +160,14 @@
   const handleSubmit = () => {
     if (loading.value) return;
 
-    if (!form.agreement) {
-      Message.info('请阅读并同意服务协议和隐私政策');
-      return;
-    }
-
     if (tabActiveKey.value === '1') {
       formRef.value
         .validateField(['username', 'password'])
         .then(async (res) => {
           if (res) return;
+          if (!form.agreement) {
+            return Message.info(t('login.form.agreement.tips'));
+          }
           setLoading(true);
           try {
             const userInfoform = pick(form, ['username', 'password']);
@@ -195,21 +197,25 @@
     if (tabActiveKey.value === '2') {
       formRef.value.validateField(['phone', 'captcha']).then((res) => {
         if (res) return;
+        if (!form.agreement)
+          return Message.info('请阅读并同意服务协议和隐私政策');
         //   setLoading(true);
       });
     }
   };
+
   const setRememberPassword = (value: boolean) => {
     loginConfig.value.rememberPassword = value;
   };
 
   const { start } = useCountDown({
     initValue: 9,
     onEnd: () => {
-      codeText.value = '获取验证码';
+      codeText.value = t('login.form.captcha.send');
       codeDisabled.value = false;
     },
-    onChange: (count) => (codeText.value = `重新获取${count}s`),
+    onChange: (seconds) =>
+      (codeText.value = t('login.form.captcha.resend', { seconds })),
   });
 
   // 发送验证码

src/views/login/index.vue

@@ -38,24 +38,24 @@
       bottom: 0;
       width: 100%;
     }
-  }
 
-  .header {
-    position: fixed;
-    top: 0;
-    left: 22px;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    padding: @spacing-7 @spacing-0;
+    .header {
+      position: fixed;
+      top: 0;
+      left: 22px;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      padding: @spacing-7 @spacing-0;
 
-    &-text {
-      margin-right: 4px;
-      margin-left: 4px;
-      font-size: 26px;
-      font-weight: 500;
-      color: rgb(var(--color-text-1));
+      &-text {
+        margin-right: 4px;
+        margin-left: 4px;
+        font-size: 26px;
+        font-weight: 500;
+        color: rgb(var(--color-text-1));
+      }
     }
   }
 </style>