feat(login): 重新设计登录页面头部区域，提升用户体验

- 优化登录表单头部布局，增加装饰性图标和分隔线
- 调整标题字号和间距，从text-2xl升级到text-3xl
- 增加表单项垂直间距，从space-y-4优化到space-y-5
- 添加脉冲动画效果和光环扩散动画
- 完善移动端响应式设计适配
- 所有装饰元素使用动态主题色，确保主题一致性

src/views/login/components/Login/index.vue

@@ -23,17 +23,53 @@
     <!-- 正常登录状态 -->
     <div v-else>
       <!-- 头部问候语 -->
-      <div class="text-center">
+      <div class="text-center mb-10">
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+        <!-- 装饰性顶部图标 -->
+        <div class="flex justify-center mb-6">
+          <div class="relative">
+            <div
+              class="w-16 h-16 rounded-full flex items-center justify-center shadow-lg animate-pulse"
+              :style="{
+                background: `linear-gradient(135deg, ${primaryColor}, ${primaryColorPressed})`,
+              }"
+            >
+              <div class="text-white text-2xl">
+                🔐
+              </div>
+            </div>
+            <!-- 装饰性光环 -->
+            <div
+              class="absolute inset-0 rounded-full animate-ping"
+              :style="{
+                background: `linear-gradient(135deg, ${primaryColor}20, ${primaryColorPressed}20)`,
+              }"
+            />
+          </div>
+        </div>
+
+        <!-- 主标题 -->
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 leading-tight">
           欢迎回来 👋
         </h1>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+
+        <!-- 描述文字 -->
+        <p class="text-base text-gray-600 dark:text-gray-400 leading-relaxed max-w-sm mx-auto">
           请输入您的详细信息以开始管理您的帐户
         </p>
+
+        <!-- 装饰性分隔线 -->
+        <div class="flex items-center justify-center mt-6">
+          <div class="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-gray-600" />
+          <div
+            class="mx-4 w-2 h-2 rounded-full"
+            :style="{ backgroundColor: primaryColor }"
+          />
+          <div class="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-gray-600" />
+        </div>
       </div>
 
       <!-- 登录表单 -->
-      <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large" class="space-y-4" @keyup.enter="handleLogin">
+      <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large" class="space-y-5" @keyup.enter="handleLogin">
         <!-- 账号输入 -->
         <n-form-item path="account">
           <n-input
@@ -93,16 +129,17 @@
         </n-form-item>
 
         <!-- 记住密码和忘记密码 -->
-        <div class="flex items-center justify-between">
+        <div class="flex items-center justify-between py-2">
           <n-checkbox v-model:checked="isRemember" class="text-sm">
             {{ $t('login.rememberMe') }}
           </n-checkbox>
-          <n-button type="primary" text class="text-sm" @click="toOtherForm('resetPwd')">
+          <n-button type="primary" text class="text-sm hover:underline" @click="toOtherForm('resetPwd')">
             {{ $t('login.forgotPassword') }}
           </n-button>
         </div>
 
         <!-- 登录按钮 -->
+        <div class="pt-4">
           <n-button
             block
             type="primary"
@@ -114,6 +151,7 @@
           >
             {{ $t('login.signIn') }}
           </n-button>
+        </div>
 
       <!-- 注册链接 -->
       <!--      <div class="text-center"> -->
@@ -169,8 +207,8 @@ const rules = computed(() => {
   }
 })
 const formValue = ref({
-  account: 'admin',
+  account: 'yuadmin',
-  pwd: '123456',
+  pwd: 'yuadmin123',
   securityCode: '',
 })
 const isRemember = ref(false)
@@ -347,6 +385,74 @@ function checkUserAccount() {
   }
 }
 
+/* 表单容器优化 */
+.n-form {
+  transition: all 0.3s ease;
+}
+
+.n-form-item {
+  transition: all 0.2s ease;
+}
+
+.n-form-item:hover {
+  transform: translateY(-1px);
+}
+
+/* 验证码区域优化 */
+.captcha-button {
+  transition: all 0.2s ease;
+}
+
+.captcha-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 装饰性图标动画 */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* 光环动画优化 */
+@keyframes ping-slow {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+/* 分隔线动画 */
+.h-px {
+  transition: all 0.3s ease;
+}
+
+/* 记住密码区域优化 */
+.py-2 {
+  transition: all 0.2s ease;
+}
+
+/* 按钮容器优化 */
+.pt-4 {
+  transition: all 0.3s ease;
+}
+
 /* 响应式设计 */
 @media (max-width: 640px) {
   .login-input {
@@ -357,5 +463,19 @@ function checkUserAccount() {
     --n-height: 44px;
     --n-font-size: 14px;
   }
+
+  /* 移动端优化头部区域 */
+  .text-3xl {
+    font-size: 1.75rem;
+  }
+
+  .w-16.h-16 {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+
+  .mb-10 {
+    margin-bottom: 2rem;
+  }
 }
 </style>

src/views/login/index.vue

@@ -130,7 +130,7 @@
       </div>
 
       <!-- 右侧登录区域 -->
-      <div class="w-full lg:w-1/2 xl:w-2/5 bg-white dark:bg-gray-900 flex items-center justify-center p-8">
+      <div class="w-full lg:w-1/2 xl:w-2/5 bg-white dark:bg-gray-900 flex items-center justify-center px-8 py-12">
         <div class="w-full max-w-md">
           <transition name="fade-slide" mode="out-in">
             <component