From fe32095c6763a9a4d6ff4dcfcb22483ef7d1d1ac Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Tue, 2 Jun 2026 09:59:05 +0800
Subject: [PATCH] feat(login): add language switcher and refine page layout

add language switcher with Chinese, English and Thai options at login page bottom
integrate i18n locale switching functionality
restructure login page container for better content centering
adjust van-cell styles to remove side padding and full-width border
---
 src/pages/login/index.vue | 86 ++++++++++++++++++++++++++-------------
 1 file changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 192e75d..0492bcc 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,41 +1,53 @@
 <template>
-  <div class="h-[100dvh] flex flex-col items-center justify-center px-4 overflow-hidden bg-white">
-    <div class="px-[12px]">
-      <section>
-        <van-cell :title="t('common.login.fields.country')" :value="selectedCountryDisplay" is-link
-          @click="countryPopupVisible = true" />
+  <div class="h-[100dvh] flex flex-col px-[12px] overflow-hidden bg-white">
+    <div class="flex-1 flex flex-col items-center justify-center">
+      <div>
+        <section>
+          <van-cell :title="t('common.login.fields.country')" :value="selectedCountryDisplay" is-link
+            @click="countryPopupVisible = true" />
 
-        <van-field v-model="phone" type="tel" clearable :label="t('common.login.fields.phone')"
-          :placeholder="t('common.login.placeholders.phone')" autocomplete="tel" />
+          <van-field v-model="phone" type="tel" clearable :label="t('common.login.fields.phone')"
+            :placeholder="t('common.login.placeholders.phone')" autocomplete="tel" />
 
-        <van-field v-model="code" type="digit" clearable maxlength="8" :label="t('common.login.fields.code')"
-          :placeholder="t('common.login.placeholders.code')" autocomplete="one-time-code">
-          <template #button>
-            <van-button class="rounded-full" size="small" @click="handleSendCode">
-              {{ t('common.login.actions.sendCode') }}
+          <van-field v-model="code" type="digit" clearable maxlength="8" :label="t('common.login.fields.code')"
+            :placeholder="t('common.login.placeholders.code')" autocomplete="one-time-code">
+            <template #button>
+              <van-button class="rounded-full" size="small" @click="handleSendCode">
+                {{ t('common.login.actions.sendCode') }}
+              </van-button>
+            </template>
+          </van-field>
+
+          <div class="mt-4">
+            <van-button class="login-main-btn" type="primary" block :loading="phoneSubmitting"
+              :disabled="!canSubmitPhoneLogin" @click="handlePhoneLogin">
+              {{ t('common.login.actions.login') }}
             </van-button>
-          </template>
-        </van-field>
+          </div>
+        </section>
 
-        <div class="mt-4">
-          <van-button class="login-main-btn" type="primary" block :loading="phoneSubmitting"
-            :disabled="!canSubmitPhoneLogin" @click="handlePhoneLogin">
-            {{ t('common.login.actions.login') }}
-          </van-button>
+        <van-divider>{{ t('common.login.dividersText') }}</van-divider>
+
+        <div class="flex flex-col items-center justify-center">
+          <div ref="googleButtonEl" id="buttonDiv" class="google-login-btn"></div>
         </div>
-      </section>
-
-      <van-divider>{{ t('common.login.dividersText') }}</van-divider>
-
-      <div class="flex flex-col items-center justify-center">
-        <div ref="googleButtonEl" id="buttonDiv" class="google-login-btn"></div>
       </div>
     </div>
+
+    <!-- 语种切换 -->
+    <div class="flex justify-center items-center gap-4 pb-4">
+      <span v-for="lang in languageOptions" :key="lang.locale"
+        class="text-xs transition-colors duration-200 text-[14px]"
+        :class="currentLocale === lang.locale ? 'text-[#00C853] font-medium' : 'text-[#999]'"
+        @click="switchLanguage(lang.locale)">
+        {{ lang.label }}
+      </span>
+    </div>
   </div>
 
   <van-popup v-model:show="countryPopupVisible" round position="bottom" class="h-[70vh]">
-    <div class="h-full flex flex-col">
-      <div class="p-3">
+    <div class="h-full flex flex-col px-[12px]">
+      <div>
         <van-search v-model="countrySearch" :placeholder="t('common.login.placeholders.selectCountry')" shape="round" />
       </div>
       <div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
@@ -51,7 +63,7 @@ import { computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { oauthToken } from "@/api/login";
 import { COUNTRY_CALLING_CODES, findCountryCallingCode } from "@/constants/countryCallingCodes";
-import { getCurrentLocale } from "@/i18n";
+import { getCurrentLocale, setLocale } from "@/i18n";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -63,6 +75,14 @@ const googleButtonRendered = ref(false);
 const countryPopupVisible = ref(false);
 const countrySearch = ref("");
 
+const languageOptions = [
+  { locale: "zh-CN", label: "中文" },
+  { locale: "en-US", label: "English" },
+  { locale: "th-TH", label: "ภาษาไทย" },
+];
+const currentLocale = computed(() => getCurrentLocale());
+const switchLanguage = (locale: string) => setLocale(locale);
+
 const selectedCountry = ref(
   findCountryCallingCode(
     (() => {
@@ -272,6 +292,16 @@ onMounted(() => {
   border-radius: 50px !important;
 }
 
+:deep(.van-cell) {
+  padding-left: 0;
+  padding-right: 0;
+
+  &::after {
+    left: 0;
+    right: 0;
+  }
+}
+
 .login-main-btn {
   height: 44px;
 }