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

frontend/portal/src/layout/LayoutCreator.vue

@@ -3,7 +3,8 @@
       <TopNavbar />
     <main class="flex-grow pt-16">
        <div class="mx-auto max-w-screen-xl py-8 flex gap-8">
-                    <!-- Creator Sidebar (Dark Theme) -->            <aside class="w-[260px] flex-shrink-0 hidden lg:block">
+          <!-- Creator Sidebar (Dark Theme) -->
+          <aside class="w-[280px] flex-shrink-0 hidden lg:block">
                <div
                   class="bg-slate-900 rounded-2xl shadow-sm overflow-hidden sticky top-24 text-slate-300 min-h-[600px] flex flex-col">
                   <!-- Header -->

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
+    if (otpCode.value.length >= 4) {
         setTimeout(() => {
             router.push('/');
         }, 800);
+    }
 };
 </script>

frontend/portal/src/views/user/NotificationsView.vue

@@ -7,14 +7,14 @@
           v-for="tab in tabs" 
           :key="tab.value"
           @click="currentTab = tab.value"
-          class="pb-4 text-sm font-medium transition-colors border-b-2 cursor-pointer focus:outline-none relative"
+          class="pb-4 text-base font-bold transition-colors border-b-2 cursor-pointer focus:outline-none relative"
           :class="currentTab === tab.value ? 'text-primary-600 border-primary-600' : 'text-slate-500 border-transparent hover:text-slate-700'"
         >
           {{ tab.label }}
-          <span v-if="tab.count > 0" class="absolute -top-1 -right-3 min-w-[1.25rem] h-5 px-1 bg-red-500 text-white text-xs rounded-full flex items-center justify-center scale-75">{{ tab.count }}</span>
+          <span v-if="tab.count > 0" class="absolute -top-1 -right-4 min-w-[1.25rem] h-5 px-1.5 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center">{{ tab.count }}</span>
         </button>
       </div>
-      <button class="mb-4 text-sm text-slate-500 hover:text-primary-600 cursor-pointer flex items-center gap-1">
+      <button class="mb-4 text-base font-medium text-slate-500 hover:text-primary-600 cursor-pointer flex items-center gap-1">
          <i class="pi pi-check-circle"></i> 全部已读
       </button>
     </div>
@@ -37,13 +37,13 @@
              <!-- Content -->
              <div class="flex-1 min-w-0">
                 <div class="flex items-center justify-between mb-1">
-                   <h3 class="font-bold text-slate-900 text-sm group-hover:text-primary-600 transition-colors flex items-center gap-2">
+                   <h3 class="font-bold text-slate-900 text-lg group-hover:text-primary-600 transition-colors flex items-center gap-2">
                       <span v-if="!item.read" class="w-2 h-2 bg-blue-600 rounded-full inline-block"></span>
                       {{ item.title }}
                    </h3>
-                   <span class="text-xs text-slate-400 whitespace-nowrap">{{ item.time }}</span>
+                   <span class="text-sm text-slate-400 whitespace-nowrap">{{ item.time }}</span>
                 </div>
-                <p class="text-sm text-slate-600 line-clamp-2">{{ item.content }}</p>
+                <p class="text-base text-slate-600 line-clamp-2">{{ item.content }}</p>
              </div>
           </div>
        </div>