优化

src/modules/auth/views/LoginView.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { ArrowRight, LockKeyhole, UserRound } from '@lucide/vue'
-import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
 import { useAuthStore } from '@/modules/auth/store/auth'
+import AuthShell from '@/modules/auth/components/AuthShell.vue'
 
 interface LoginForm {
   account: string
@@ -40,7 +40,11 @@ const rules: FormRules<LoginForm> = {
 async function submit() {
   if (!formRef.value || loading.value) return
   const valid = await formRef.value.validate().catch(() => false)
-  if (!valid) return
+  if (!valid) {
+    await nextTick()
+    document.querySelector<HTMLElement>('.auth-form-panel .el-form-item.is-error input')?.focus()
+    return
+  }
 
   loading.value = true
   try {
@@ -60,20 +64,20 @@ function showResetHint() {
 </script>
 
 <template>
-  <div class="auth-page">
-    <header class="auth-header">
-      <RouterLink to="/login" class="auth-brand"><img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" /></RouterLink>
-      <div>还没有企业账号？ <RouterLink to="/register">申请入驻</RouterLink></div>
-    </header>
-    <main class="auth-main">
-      <section class="auth-copy">
-        <h1>跨境物流业务<br />一个工作台完成</h1>
-        <p>从企业成员协作到头程订单跟进，统一管理业务与权限。</p>
-        <div class="auth-facts"><span>企业级权限</span><span>订单全程跟进</span><span>多端业务协同</span></div>
-      </section>
-      <section class="auth-card" aria-labelledby="login-title">
+  <AuthShell
+    switch-text="还没有企业账号？"
+    switch-label="申请入驻"
+    switch-to="/register"
+    visual-title="跨境物流业务，一个工作台完成"
+    visual-description="从企业协作到头程订单跟进，让业务信息与操作权限始终清晰。"
+    :features="['企业级角色与权限', '头程订单全程跟进', '多成员业务协同']"
+  >
+    <div class="auth-form-content auth-form-content--login">
+      <div class="auth-form-heading">
         <h2 id="login-title">登录客户工作台</h2>
-        <p>企业注册成功后即可登录；提交订单前需完成企业资料审核</p>
+        <p>使用企业账号登录，继续管理您的跨境物流业务。</p>
+      </div>
+      <div class="auth-account-note">企业注册成功后即可登录；提交订单前需完成企业资料审核。</div>
         <el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" @submit.prevent="submit">
           <el-form-item label="用户名" prop="account">
             <el-input v-model="form.account" autocomplete="username" maxlength="64" placeholder="请输入用户名" :prefix-icon="UserRound" />
@@ -87,7 +91,6 @@ function showResetHint() {
           </div>
           <el-button native-type="submit" class="auth-submit" type="primary" :loading="loading">登录 <ArrowRight :size="17" /></el-button>
         </el-form>
-      </section>
-    </main>
-  </div>
+    </div>
+  </AuthShell>
 </template>