优化登录界面逻辑与 ui

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

@@ -71,8 +71,8 @@ async function handleSendCode() {
     startCountDown()
   } catch (error) {
     ElMessage.error(readError(error, '验证码发送失败'))
-  } finally {
     await loadCaptcha()
+  } finally {
     sending.value = false
   }
 }
@@ -231,9 +231,9 @@ async function handleLogin() {
   justify-content: space-between;
   padding: 40px 36px;
   background:
-    radial-gradient(circle at 30% 20%, rgba(20, 119, 255, 0.08), transparent 50%),
+    radial-gradient(circle at 28% 20%, rgba(255, 106, 0, 0.12), transparent 50%),
-    radial-gradient(circle at 80% 90%, rgba(109, 40, 217, 0.06), transparent 50%),
+    radial-gradient(circle at 82% 88%, rgba(255, 183, 77, 0.12), transparent 52%),
-    linear-gradient(160deg, rgba(20, 119, 255, 0.06), rgba(109, 40, 217, 0.03));
+    linear-gradient(160deg, rgba(255, 247, 237, 0.96), rgba(255, 251, 235, 0.62));
 }
 
 .brand-lockup {
@@ -248,8 +248,8 @@ async function handleLogin() {
   height: 36px;
   place-items: center;
   border-radius: 10px;
-  background: linear-gradient(135deg, #1477ff, #2f8dff);
+  background: linear-gradient(135deg, #ff6a00, #ff914d);
-  box-shadow: 0 8px 24px rgba(20, 119, 255, 0.22);
+  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.24);
   color: #fff;
   font-size: 15px;
   font-weight: 900;
@@ -298,7 +298,7 @@ async function handleLogin() {
 
 .login-header .eyebrow {
   margin: 0 0 8px;
-  color: #1477ff;
+  color: #ff6a00;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
@@ -341,8 +341,8 @@ async function handleLogin() {
 .user-form :deep(.el-input__wrapper.is-focus) {
   background: #ffffff;
   box-shadow:
-    0 0 0 1px rgba(20, 119, 255, 0.45) inset,
+    0 0 0 1px rgba(255, 106, 0, 0.46) inset,
-    0 0 0 3px rgba(20, 119, 255, 0.08);
+    0 0 0 3px rgba(255, 106, 0, 0.1);
 }
 .user-form :deep(.el-input__inner) {
   color: #0f172a;
@@ -377,8 +377,8 @@ async function handleLogin() {
   overflow: hidden;
   border: 1px solid #dbe5f0;
   border-radius: 10px;
-  background: #f8fafc;
+  background: #fff7ed;
-  color: #1477ff;
+  color: #ff6a00;
   cursor: pointer;
   font-size: 13px;
   font-weight: 700;
@@ -403,16 +403,16 @@ async function handleLogin() {
   font-weight: 700;
   letter-spacing: 0.3px;
   background: #ffffff;
-  border-color: #1477ff;
+  border-color: #ff6a00;
-  color: #1477ff;
+  color: #ff6a00;
   box-shadow: none;
   transition:
     background 0.2s,
     color 0.2s;
 }
 .user-code-row .el-button:hover:not(:disabled) {
-  background: #1477ff;
+  background: #ff6a00;
-  border-color: #1477ff;
+  border-color: #ff6a00;
   color: #ffffff;
 }
 .user-code-row .el-button:disabled {
@@ -428,16 +428,16 @@ async function handleLogin() {
   font-weight: 700;
   margin-top: 8px;
   letter-spacing: 0.5px;
-  background: linear-gradient(135deg, #1477ff, #2f8dff);
+  background: linear-gradient(135deg, #ff6a00, #ff8a1f);
   border: none;
-  box-shadow: 0 10px 28px rgba(20, 119, 255, 0.22);
+  box-shadow: 0 10px 28px rgba(255, 106, 0, 0.24);
   transition:
     transform 0.15s,
     box-shadow 0.2s;
 }
 .user-login-btn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 14px 36px rgba(20, 119, 255, 0.28);
+  box-shadow: 0 14px 36px rgba(255, 106, 0, 0.3);
 }
 
 .login-notice {

frontend/src/features/auth/views/MobileLoginView.vue

@@ -38,12 +38,11 @@ async function loadCaptcha() {
 }
 
 async function sendCode() {
-  const shouldRefresh = Boolean(form.captchaCode.trim())
+  const sent = await handleSendCode(form.phone, {
-  await handleSendCode(form.phone, {
     captchaId: captcha.value?.captcha_id || '',
     captchaCode: form.captchaCode,
   })
-  if (shouldRefresh) {
+  if (!sent && form.captchaCode.trim()) {
     await loadCaptcha()
   }
 }
@@ -164,8 +163,8 @@ async function handleLogin() {
 .mobile-login-shell {
   min-height: 100dvh;
   background:
-    radial-gradient(circle at 50% 12%, rgba(20, 119, 255, 0.1), transparent 34%),
+    radial-gradient(circle at 50% 12%, rgba(255, 106, 0, 0.12), transparent 34%),
-    linear-gradient(180deg, #f8fbff 0%, #ffffff 70%, #f7fafc 100%);
+    linear-gradient(180deg, #fff7ed 0%, #ffffff 68%, #fffaf4 100%);
   color: #111827;
 }
 
@@ -217,8 +216,8 @@ async function handleLogin() {
   height: 46px;
   place-items: center;
   border-radius: 14px;
-  background: linear-gradient(135deg, #1477ff, #2f8dff);
+  background: linear-gradient(135deg, #ff6a00, #ff914d);
-  box-shadow: 0 14px 32px rgba(20, 119, 255, 0.18);
+  box-shadow: 0 14px 32px rgba(255, 106, 0, 0.2);
   color: #ffffff;
   font-size: 19px;
   font-weight: 900;
@@ -294,8 +293,8 @@ async function handleLogin() {
   overflow: hidden;
   border: 1px solid #dbe5f0;
   border-radius: 8px;
-  background: #f8fafc;
+  background: #fff7ed;
-  color: #1477ff;
+  color: #ff6a00;
   font-size: 12px;
   font-weight: 800;
   padding: 0;
@@ -315,9 +314,9 @@ async function handleLogin() {
 .code-btn {
   min-width: 82px;
   height: 32px;
-  border-color: #1477ff !important;
+  border-color: #ff6a00 !important;
   border-radius: 8px;
-  color: #1477ff !important;
+  color: #ff6a00 !important;
   font-weight: 700;
 }
 
@@ -333,7 +332,7 @@ async function handleLogin() {
 
 .assist-row span {
   min-width: 0;
-  color: #1477ff;
+  color: #ff6a00;
 }
 
 .assist-row a {
@@ -361,7 +360,7 @@ async function handleLogin() {
 }
 
 .agreement-row :deep(.van-checkbox__label b) {
-  color: #1477ff;
+  color: #ff6a00;
   font-weight: 700;
 }
 
@@ -369,8 +368,8 @@ async function handleLogin() {
   height: 48px;
   border: none !important;
   border-radius: 10px !important;
-  background: #1477ff !important;
+  background: linear-gradient(135deg, #ff6a00, #ff8a1f) !important;
-  box-shadow: 0 12px 24px rgba(20, 119, 255, 0.18);
+  box-shadow: 0 12px 24px rgba(255, 106, 0, 0.22);
   font-size: 17px;
   font-weight: 900;
 }
@@ -383,7 +382,7 @@ async function handleLogin() {
   border: 1px solid #e4e8ee;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.82);
-  color: #1477ff;
+  color: #ff6a00;
   font-size: 15px;
   font-weight: 900;
   text-align: center;