feat(auth): 优化登录视图，调整手机号和验证码输入框样式，提升用户体验

frontend/portal/src/views/auth/LoginView.vue

@@ -28,7 +28,7 @@
               <input 
                 v-model="phone"
                 type="tel" 
-                class="flex-1 block w-full rounded-r-lg border-slate-300 focus:border-primary-500 focus:ring-primary-500 sm:text-lg py-3" 
+                class="flex-1 block w-full rounded-r-lg border border-slate-300 focus:border-primary-500 focus:ring-primary-500 sm:text-lg py-3 px-4" 
                 placeholder="请输入手机号"
                 required
               >
@@ -74,12 +74,14 @@
          <h2 class="text-2xl font-bold text-slate-900 mb-2">输入验证码</h2>
          <p class="text-sm text-slate-500 mb-8">验证码已发送至 +86 {{ phone }}</p>
 
-         <div class="flex gap-3 mb-8 justify-center">
+         <div class="mb-8">
             <input 
-              v-for="i in 6" :key="i"
+              v-model="otpCode"
               type="text" 
-              maxlength="1"
-              class="w-12 h-14 text-center text-2xl font-bold border border-slate-300 rounded-lg focus:border-primary-500 focus:ring-2 focus:ring-primary-200"
+              maxlength="4"
+              class="w-full h-14 px-4 text-center text-3xl font-bold border border-slate-300 rounded-lg focus:border-primary-500 focus:ring-4 focus:ring-primary-100 outline-none tracking-[1.5em] pl-[1.5em]"
+              placeholder="0000"
+              @input="otpCode = otpCode.replace(/\D/g, '')"
             >
          </div>
 
@@ -105,6 +107,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const step = ref(1);
 const phone = ref('');
+const otpCode = ref('');
 const agreed = ref(false);
 
 const getOTP = () => {
@@ -117,8 +120,10 @@ const getOTP = () => {
 
 const login = () => {
     // Simulate Login
-    setTimeout(() => {
-        router.push('/');
-    }, 800);
+    if (otpCode.value.length >= 4) {
+        setTimeout(() => {
+            router.push('/');
+        }, 800);
+    }
 };
 </script>