From b6dfde844b9851d9099e989f0b79e7f6dfc10e21 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 9 Jul 2025 14:48:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(login):=20=E9=87=8D=E6=96=B0=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化登录表单头部布局，增加装饰性图标和分隔线
- 调整标题字号和间距，从text-2xl升级到text-3xl
- 增加表单项垂直间距，从space-y-4优化到space-y-5
- 添加脉冲动画效果和光环扩散动画
- 完善移动端响应式设计适配
- 所有装饰元素使用动态主题色，确保主题一致性
---
 src/views/login/components/Login/index.vue | 158 ++++++++++++++++++---
 src/views/login/index.vue                  |   2 +-
 2 files changed, 140 insertions(+), 20 deletions(-)

diff --git a/src/views/login/components/Login/index.vue b/src/views/login/components/Login/index.vue
index 82b4266..c538147 100644
--- a/src/views/login/components/Login/index.vue
+++ b/src/views/login/components/Login/index.vue
@@ -23,17 +23,53 @@
     <!-- 正常登录状态 -->
     <div v-else>
       <!-- 头部问候语 -->
-      <div class="text-center">
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+      <div class="text-center mb-10">
+        <!-- 装饰性顶部图标 -->
+        <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,27 +129,29 @@
         </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>
 
         <!-- 登录按钮 -->
-        <n-button
-          block
-          type="primary"
-          size="large"
-          :loading="isLoading"
-          :disabled="isLoading"
-          class="login-button"
-          @click="handleLogin"
-        >
-          {{ $t('login.signIn') }}
-        </n-button>
+        <div class="pt-4">
+          <n-button
+            block
+            type="primary"
+            size="large"
+            :loading="isLoading"
+            :disabled="isLoading"
+            class="login-button"
+            @click="handleLogin"
+          >
+            {{ $t('login.signIn') }}
+          </n-button>
+        </div>
 
       <!-- 注册链接 -->
       <!--      <div class="text-center"> -->
@@ -169,8 +207,8 @@ const rules = computed(() => {
   }
 })
 const formValue = ref({
-  account: 'admin',
-  pwd: '123456',
+  account: 'yuadmin',
+  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>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ec162bf..cbc6190 100644
--- a/src/views/login/index.vue
+++ b/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