refactor: 错误信息调整国际化

src/components/login-field/Field.vue

@@ -2,6 +2,7 @@
 import {ElInput} from 'element-plus';
 import {useField} from 'vee-validate';
 import {toRefs} from 'vue';
+import {useI18n} from 'vue-i18n';
 
 defineOptions({name: 'LoginField'});
 
@@ -15,6 +16,8 @@ const props = defineProps<Props>();
 const {name, placeholder, type} = toRefs(props);
 
 const {value, errorMessage, name: inputName} = useField<string>(name.value);
+
+const {t} = useI18n();
 </script>
 
 <template>
@@ -33,7 +36,7 @@ const {value, errorMessage, name: inputName} = useField<string>(name.value);
     </template>
   </ElInput>
   <p :class="['error-tip', {'error-top-hidden': !errorMessage}]">
-    {{errorMessage}}
+    {{errorMessage && t(errorMessage)}}
   </p>
 </template>
 

src/locales/login.ts

@@ -7,6 +7,10 @@ export default {
     forgetPassword: '忘记密码',
     loginBtnText: '登录',
     regist: '申请成为供应商',
+    errors: {
+      name: '请输入姓名',
+      password: '请输入密码',
+    },
   },
   ko: {
     title: '供应商管理系统',
@@ -16,5 +20,9 @@ export default {
     forgetPassword: '忘记密码',
     loginBtnText: '登录',
     regist: '申请成为供应商',
+    errors: {
+      name: '请输入姓名',
+      password: '请输入密码',
+    },
   },
 };

src/locales/register.ts

@@ -14,6 +14,12 @@ export default {
     successTitle: '恭喜，供应商注册申请成功',
     successSubtitle: '审核结果将在5个工作日以内发送至您的邮箱，请您耐心等待～',
     notifyButtonText: '通知企业审核',
+    errors: {
+      enterprise: '请输入企业名称',
+      phone: '请输入手机联系方式',
+      idcard: '请上传法人身份证',
+      licenseImage: '请上传营业执照',
+    },
   },
   ko: {},
 };

src/pages/login/hooks.ts

@@ -17,13 +17,13 @@ export function useFormState() {
     },
     validationSchema: toTypedSchema(
       object({
-        name: string({errorMap: () => ({message: '请输入姓名'})}).min(
+        name: string({errorMap: () => ({message: 'login.errors.name'})}).min(
           1,
-          '请输入用户名',
+          'login.errors.name',
         ),
-        password: string({errorMap: () => ({message: '请输入密码'})}).min(
+        password: string({errorMap: () => ({message: 'login.errors.password'})}).min(
           1,
-          '请输入密码',
+          'login.errors.password',
         ),
         company: string().optional(),
       }),

src/pages/register/hooks.ts

@@ -11,14 +11,14 @@ type FormState = {
 };
 
 const validate = object({
-  enterprise: string({errorMap: () => ({message: '请输入企业名称'})})
-    .min(1, '请输入企业名称'),
-  phone: string({errorMap: () => ({message: '请输入企业名称'})})
-    .min(1, '请输入企业名称'),
-  idCardImage: string({errorMap: () => ({message: '请上传法人身份证'})})
-    .min(1, '请上传法人身份证'),
-  licenseImage: string({errorMap: () => ({message: '请上传营业执照'})})
-    .min(1, '请上传营业执照'),
+  enterprise: string({errorMap: () => ({message: 'register.errors.enterprise'})})
+    .min(1, 'register.errors.enterprise'),
+  phone: string({errorMap: () => ({message: 'register.errors.phone'})})
+    .min(1, 'register.errors.phone'),
+  idCardImage: string({errorMap: () => ({message: 'register.errors.idcard'})})
+    .min(1, 'register.errors.idcard'),
+  licenseImage: string({errorMap: () => ({message: 'register.errors.licenseImage'})})
+    .min(1, 'register.errors.licenseImage'),
 });
 
 export function useFormState(isSuccess: Ref<boolean>) {