feat: 添加国际化支持，更新登录和注册组件中的文本，优化用户体验

src/auth/components/login/email/step1.vue

@@ -4,6 +4,8 @@ import { toastController } from "@ionic/vue";
 import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
 import { authClient } from "@/auth";
 
+const { t } = useI18n();
+
 const emit = defineEmits<{
   (e: "success", value: string): void;
 }>();
@@ -46,7 +48,7 @@ async function submitSendVerification() {
   }
   else {
     const toast = await toastController.create({
-      message: error?.message || "Failed to send verification code.",
+      message: error?.message || t('auth.common.failedSendCode'),
       duration: 1500,
       position: "bottom",
     });
@@ -58,29 +60,29 @@ async function submitSendVerification() {
 
 <template>
   <h1 class="title">
-    <strong>Log in</strong>
+    <strong>{{ t('auth.login.title') }}</strong>
   </h1>
 
   <ui-input-label
     ref="inputInstance"
     v-model="model"
-    label="Email"
+    :label="t('auth.common.email')"
-    placeholder="Enter your email"
+    :placeholder="t('auth.common.enterEmail')"
     type="email"
-    error-text="Please enter a valid email address."
+    :error-text="t('auth.common.validEmailError')"
     @ion-input="validate($event.target.value as string)"
     @ion-blur="markTouched"
   />
 
   <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSendVerification">
-    Next
+    {{ t('auth.common.next') }}
   </ion-button>
 
-  <ui-divider text="Or continue with" />
+  <ui-divider :text="t('auth.common.orContinueWith')" />
 
   <ion-button color="medium" expand="block" class="ion-margin-top" shape="round">
     <IonIcon slot="start" aria-hidden="true" :icon="logoGoogle" />
-    Google
+    {{ t('auth.common.google') }}
   </ion-button>
 </template>
 

src/auth/components/login/email/step2.vue

@@ -1,6 +1,8 @@
 <script lang='ts' setup>
 import { toastController } from "@ionic/vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   email: string;
 }>();
@@ -12,7 +14,7 @@ const model = defineModel({ type: String, required: true });
 async function submitSignup() {
   if (model.value.length !== 6) {
     const toast = await toastController.create({
-      message: "Please enter a valid 6-digit verification code.",
+      message: t('auth.common.validVerificationCodeError'),
       duration: 1500,
       position: "bottom",
     });
@@ -26,14 +28,14 @@ async function submitSignup() {
 </script>
 
 <template>
-  <h1><strong>Verify your email</strong></h1>
+  <h1><strong>{{ t('auth.verification.title') }}</strong></h1>
-  <p>We have sent a verification code to {{ email }}. Please enter the code below to verify your email address.</p>
+  <p>{{ t('auth.verification.description', { email: props.email }) }}</p>
 
   <div>
     <ion-input-otp v-model="model" :length="6" />
 
     <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSignup">
-      Log in
+      {{ t('auth.login.loginButton') }}
     </ion-button>
   </div>
 </template>

src/auth/components/login/index.vue

@@ -4,6 +4,8 @@ import { authClient } from "@/auth";
 import Step1 from "./email/step1.vue";
 import Step2 from "./email/step2.vue";
 
+const { t } = useI18n();
+
 const form = ref({
   email: "",
   verificationCode: "",
@@ -34,7 +36,7 @@ async function submitSignup() {
       <IonToolbar>
         <IonButtons slot="start">
           <IonButton @click="closeModal">
-            Close
+            {{ t('auth.common.close') }}
           </IonButton>
         </IonButtons>
       </IonToolbar>

src/auth/components/signup/email/step1.vue

@@ -4,6 +4,8 @@ import { toastController } from "@ionic/vue";
 import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
 import { authClient } from "@/auth";
 
+const { t } = useI18n();
+
 const emit = defineEmits<{
   (e: "success", value: string): void;
 }>();
@@ -46,7 +48,7 @@ async function submitSendVerification() {
   }
   else {
     const toast = await toastController.create({
-      message: error?.message || "Failed to send verification code.",
+      message: error?.message || t('auth.common.failedSendCode'),
       duration: 1500,
       position: "bottom",
     });
@@ -57,25 +59,33 @@ async function submitSendVerification() {
 </script>
 
 <template>
-  <h1><strong>What's your email?</strong></h1>
+  <h1><strong>{{ t('auth.signup.title') }}</strong></h1>
-  <p>You'll use this email to login and access everything we have to offer.</p>
+  <p>{{ t('auth.signup.description') }}</p>
 
   <div>
-    <ui-input ref="inputInstance" v-model="model" type="email" placeholder="email@example.com" error-text="Please enter a valid email address." @ion-input="validate($event.target.value as string)" @ion-blur="markTouched" />
+    <ui-input 
+      ref="inputInstance" 
+      v-model="model" 
+      type="email" 
+      :placeholder="t('auth.signup.emailPlaceholder')" 
+      :error-text="t('auth.common.validEmailError')" 
+      @ion-input="validate($event.target.value as string)" 
+      @ion-blur="markTouched" 
+    />
 
     <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSendVerification">
-      Sign up
+      {{ t('auth.signup.signupButton') }}
     </ion-button>
 
-    <ui-divider text="Or continue with" />
+    <ui-divider :text="t('auth.common.orContinueWith')" />
 
     <ion-button color="medium" expand="block" class="ion-margin-top" shape="round">
       <IonIcon slot="start" aria-hidden="true" :icon="phonePortraitOutline" />
-      Phone Number
+      {{ t('auth.common.phoneNumber') }}
     </ion-button>
     <ion-button color="medium" expand="block" class="ion-margin-top" shape="round">
       <IonIcon slot="start" aria-hidden="true" :icon="logoGoogle" />
-      Google
+      {{ t('auth.common.google') }}
     </ion-button>
   </div>
 </template>

src/auth/components/signup/email/step2.vue

@@ -3,6 +3,8 @@ import type { PropType } from "vue";
 import type { AuthUserSignup } from "@/auth/type";
 import { toastController } from "@ionic/vue";
 
+const { t } = useI18n();
+
 const emit = defineEmits<{
   (e: "success", value: AuthUserSignup): void;
 }>();
@@ -11,7 +13,7 @@ const model = defineModel({ type: Object as PropType<AuthUserSignup>, required:
 async function submitSignup() {
   if (model.value.verificationCode.length !== 6) {
     const toast = await toastController.create({
-      message: "Please enter a valid 6-digit verification code.",
+      message: t('auth.common.validVerificationCodeError'),
       duration: 1500,
       position: "bottom",
     });
@@ -25,8 +27,8 @@ async function submitSignup() {
 </script>
 
 <template>
-  <h1><strong>Verify your email</strong></h1>
+  <h1><strong>{{ t('auth.verification.title') }}</strong></h1>
-  <p>We have sent a verification code to {{ model.email }}. Please enter the code below to verify your email address.</p>
+  <p>{{ t('auth.verification.description', { email: model.email }) }}</p>
 
   <div>
     <ion-input-otp v-model="model.verificationCode" :length="6" />
@@ -38,7 +40,7 @@ async function submitSignup() {
     <ui-input v-model="model.confirmPassword" placeholder="Confirm Password" /> -->
 
     <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSignup">
-      Submit
+      {{ t('auth.common.submit') }}
     </ion-button>
   </div>
 </template>

src/auth/components/signup/index.vue

@@ -2,6 +2,8 @@
 import { modalController } from "@ionic/vue";
 import VerificationCode from "./verification-code.vue";
 
+const { t } = useI18n();
+
 async function closeModal() {
   await modalController.dismiss();
 }
@@ -13,7 +15,7 @@ async function closeModal() {
       <IonToolbar>
         <IonButtons slot="start">
           <IonButton @click="closeModal">
-            Close
+            {{ t('auth.common.close') }}
           </IonButton>
         </IonButtons>
       </IonToolbar>

src/auth/components/signup/verification-code.vue

@@ -6,6 +6,8 @@ import { authClient } from "@/auth";
 import Step1 from "./email/step1.vue";
 import Step2 from "./email/step2.vue";
 
+const { t } = useI18n();
+
 const form = ref<AuthUserSignup>({
   name: "",
   email: "",
@@ -34,7 +36,7 @@ async function submitSignup() {
     step.value = 1;
     await modalController.dismiss(data.user);
     const toast = await toastController.create({
-      message: "Email verified successfully!",
+      message: t('auth.signup.emailVerified'),
       duration: 1500,
       position: "bottom",
     });
@@ -43,7 +45,7 @@ async function submitSignup() {
   }
   else {
     const toast = await toastController.create({
-      message: error?.message || "Failed to verify the code.",
+      message: error?.message || t('auth.common.failedVerifyCode'),
       duration: 1500,
       position: "bottom",
     });

src/locales/en-US.json

@@ -226,5 +226,36 @@
     "trade": "Trade",
     "chat": "Chat",
     "user": "Profile"
+  },
+  "auth": {
+    "common": {
+      "close": "Close",
+      "next": "Next",
+      "submit": "Submit",
+      "email": "Email",
+      "enterEmail": "Enter your email",
+      "validEmailError": "Please enter a valid email address.",
+      "orContinueWith": "Or continue with",
+      "google": "Google",
+      "phoneNumber": "Phone Number",
+      "validVerificationCodeError": "Please enter a valid 6-digit verification code.",
+      "failedSendCode": "Failed to send verification code.",
+      "failedVerifyCode": "Failed to verify the code."
+    },
+    "login": {
+      "title": "Log in",
+      "loginButton": "Log in"
+    },
+    "signup": {
+      "title": "What's your email?",
+      "description": "You'll use this email to login and access everything we have to offer.",
+      "signupButton": "Sign up",
+      "emailPlaceholder": "email@example.com",
+      "emailVerified": "Email verified successfully!"
+    },
+    "verification": {
+      "title": "Verify your email",
+      "description": "We have sent a verification code to {email}. Please enter the code below to verify your email address."
+    }
   }
 }

src/locales/zh-CN.json

@@ -226,5 +226,36 @@
     "trade": "交易",
     "chat": "聊天",
     "user": "我的"
+  },
+  "auth": {
+    "common": {
+      "close": "关闭",
+      "next": "下一步",
+      "submit": "提交",
+      "email": "邮箱",
+      "enterEmail": "请输入您的邮箱",
+      "validEmailError": "请输入有效的邮箱地址。",
+      "orContinueWith": "或使用以下方式继续",
+      "google": "Google",
+      "phoneNumber": "手机号码",
+      "validVerificationCodeError": "请输入有效的6位验证码。",
+      "failedSendCode": "发送验证码失败。",
+      "failedVerifyCode": "验证码验证失败。"
+    },
+    "login": {
+      "title": "登录",
+      "loginButton": "登录"
+    },
+    "signup": {
+      "title": "您的邮箱是什么？",
+      "description": "您将使用此邮箱登录并访问我们提供的所有内容。",
+      "signupButton": "注册",
+      "emailPlaceholder": "email@example.com",
+      "emailVerified": "邮箱验证成功！"
+    },
+    "verification": {
+      "title": "验证您的邮箱",
+      "description": "我们已向 {email} 发送了一个验证码。请在下方输入代码以验证您的邮箱地址。"
+    }
   }
 }