refactor(auth): 优化认证逻辑和界面组件结构

云

19 小时以前 c2e8526f8f857be5e3a8c6f2b39c5efd424de33e

 src/views/_core/authentication/login.vue

@@ -97,6 +97,8 @@
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
        autocomplete: 'username',
        'aria-label': $t('authentication.username'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
@@ -109,6 +111,8 @@
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.passwordTip'),
        autocomplete: 'current-password',
        'aria-label': $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
@@ -122,7 +126,7 @@
</script>

<template>
  <div>
  <div class="herbal-login">
    <AuthenticationLogin
      ref="loginRef"
      :form-schema="formSchema"
@@ -134,7 +138,14 @@
      :show-forget-password="false"
      :show-doc-link="false"
      @submit="handleLogin"
    />
    >
      <template #title>
        <div class="herbal-login__heading">
          <h1>{{ $t('authentication.welcomeBack') }}<svg class="herbal-login__seal" viewBox="0 0 20 30" aria-hidden="true"><rect x="1" y="1" width="18" height="28" rx="2"/><path d="M5 5h10v8H5V5Zm0 12h10v8H5v-8Zm5-12v8m0 4v8"/></svg></h1>
          <p>{{ $t('authentication.loginSubtitle') }}</p>
        </div>
      </template>
    </AuthenticationLogin>
    <Verification
      ref="verifyRef"
      v-if="captchaEnable"
@@ -147,3 +158,24 @@
    />
  </div>
</template>

<style scoped>
.herbal-login__heading{margin-bottom:32px}
.herbal-login__heading h1{font-size:clamp(28px,2.4vw,36px);font-weight:700;line-height:1.4;letter-spacing:-.02em;margin:0 0 12px;color:#29251f;display:flex;align-items:center;gap:14px}
.herbal-login__heading p{font-size:15px;line-height:1.7;color:#756d63;margin:0}
.herbal-login__seal{width:20px;height:30px;flex-shrink:0;color:#a51d24;fill:none;stroke:currentColor;stroke-width:1.2}
.herbal-login :deep(input:not([type='checkbox'])){min-height:56px;border-radius:9px;border:1px solid #ddd6cc;background:rgba(255,255,255,.82);padding:12px 16px;font-size:16px;color:#30281f}
.herbal-login :deep(input::placeholder){color:#7a7167;opacity:1}
.herbal-login :deep(input:focus-visible){outline:2px solid #a51d24;outline-offset:3px}
.herbal-login :deep(input[autocomplete='current-password']){padding-right:44px}
.herbal-login :deep(button[aria-label='login']){min-height:58px;margin-top:8px;border-radius:9px;background:#a51d24;color:#fff;font-size:19px;font-weight:600;letter-spacing:.12em;box-shadow:0 5px 12px rgba(137,24,30,.12)}
.herbal-login :deep(button[aria-label='login']:hover){background:#87171d}
.herbal-login :deep(button[aria-label='login']:focus-visible){outline:2px solid #a51d24;outline-offset:4px}
.herbal-login :deep(button[aria-label='login']:disabled){opacity:.65;cursor:wait}
:global(.dark .herbal-login__heading h1){color:#f5eee4}
:global(.dark .herbal-login__heading p){color:#d1c1ae}
:global(.dark .herbal-login__seal){color:#eea5a4}
:global(.dark .herbal-login input:not([type='checkbox'])){background:#302720;border-color:#6f5b48;color:#f5eee4}
:global(.dark .herbal-login input::placeholder){color:#c2b29e}
@media(max-width:540px){.herbal-login__heading h1{font-size:28px}.herbal-login__heading p{font-size:14px}.herbal-login :deep(input:not([type='checkbox'])){min-height:52px}}
</style>