feat(phase3): complete loading workbenches

src/modules/auth/pages/LoginView.test.ts

@@ -42,6 +42,18 @@ describe('LoginView authentication lifecycle', () => {
     expect(loginSource).not.toContain('demo-tip')
   })
 
+  it('uses the admin design tokens and keeps the brand visible at 320px', () => {
+    expect(loginSource).toContain('<h1>柏悦物流管理后台</h1>')
+    expect(loginSource).toContain('class="login-mobile-brand"')
+    expect(loginSource).toContain('aria-label="平台员工登录"')
+    expect(loginSource).toContain('autocomplete="username" maxlength="100" autofocus')
+    expect(loginSource).toContain('aria-live="polite"')
+    expect(loginSource).toContain('background: var(--cc-surface-muted)')
+    expect(loginSource).toContain('border-radius: var(--cc-radius-lg)')
+    expect(loginSource).toContain('@media (max-width: 360px)')
+    expect(loginSource).not.toContain('让跨境物流管理')
+  })
+
   it('initializes preview access after login and before redirecting', async () => {
     const pinia = createPinia()
     setActivePinia(pinia)

src/modules/auth/pages/LoginView.vue

@@ -54,8 +54,8 @@ async function submit() {
     <section class="login-intro">
       <div class="login-brand"><img class="login-brand-logo" :src="baiyueLogoWhite" alt="柏悦物流" /></div>
       <div>
-        <h1>让跨境物流管理<br />清晰、可靠、可追踪</h1>
-        <p class="intro-copy">统一管理企业入驻、内部权限和头程订单，让每一次操作都有边界、有记录。</p>
+        <h1>柏悦物流管理后台</h1>
+        <p class="intro-copy">平台内部运营与管理系统</p>
       </div>
       <div class="security-note">
         <ShieldCheck :size="22" />
@@ -65,12 +65,13 @@ async function submit() {
 
     <section class="login-panel">
       <div class="login-card">
+        <div class="login-mobile-brand"><img :src="baiyueLogoWhite" alt="柏悦物流" /></div>
         <div class="login-card-icon"><LockKeyhole :size="24" /></div>
         <h2>登录管理后台</h2>
         <p>使用平台内部员工账号登录</p>
-        <el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" @submit.prevent="submit">
+        <el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" aria-label="平台员工登录" @submit.prevent="submit">
           <el-form-item label="账号" prop="account" required>
-            <el-input v-model.trim="form.account" placeholder="请输入账号" :prefix-icon="UserRound" autocomplete="username" maxlength="100" />
+            <el-input v-model.trim="form.account" placeholder="请输入账号" :prefix-icon="UserRound" autocomplete="username" maxlength="100" autofocus />
           </el-form-item>
           <el-form-item label="密码" prop="password" required>
             <el-input v-model="form.password" type="password" show-password placeholder="请输入密码" :prefix-icon="LockKeyhole" autocomplete="current-password" maxlength="128" />
@@ -79,8 +80,38 @@ async function submit() {
             登录 <ArrowRight :size="17" />
           </el-button>
         </el-form>
-        <div v-if="loginError" class="login-error" role="alert"><p>{{ loginError.message }}</p><ApiErrorMeta :details="loginError" /></div>
+        <div v-if="loginError" class="login-error" role="alert" aria-live="polite"><p>{{ loginError.message }}</p><ApiErrorMeta :details="loginError" /></div>
       </div>
     </section>
   </div>
 </template>
+
+<style scoped>
+.login-page { min-width: 0; min-height: 100svh; background: var(--cc-surface); color: var(--cc-text); }
+.login-intro { min-width: 0; background: var(--cc-navy); }
+.login-intro h1 { max-width: 560px; margin: 16px 0 14px; font-size: 40px; line-height: 1.2; overflow-wrap: anywhere; }
+.intro-copy { margin: 0; color: #cbd5e1; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
+.login-panel { min-width: 0; background: var(--cc-surface-muted); }
+.login-card { min-width: 0; padding: 32px; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); background: var(--cc-surface); box-shadow: var(--cc-shadow-md); }
+.login-card-icon { border-radius: var(--cc-radius-lg); background: var(--cc-primary-soft); }
+.login-card h2, .login-card > p { overflow-wrap: anywhere; }
+.login-mobile-brand { display: none; }
+.login-submit { min-height: 44px; }
+.login-error { min-width: 0; padding: 12px 14px; border: 1px solid #fecdca; border-radius: var(--cc-radius-md); background: var(--cc-danger-soft); color: var(--cc-danger); overflow-wrap: anywhere; }
+.login-error :deep(*) { max-width: 100%; overflow-wrap: anywhere; }
+.login-card :deep(.el-input__wrapper:focus-within) { box-shadow: 0 0 0 1px var(--cc-primary) inset, 0 0 0 3px var(--cc-primary-soft); }
+
+@media (max-width: 960px) {
+  .login-panel { align-items: start; padding: 24px; }
+  .login-card { width: min(440px, 100%); margin: auto; padding: 28px; }
+  .login-mobile-brand { display: flex; min-height: 52px; align-items: center; margin: -28px -28px 28px; padding: 12px 20px; border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0; background: var(--cc-navy); }
+  .login-mobile-brand img { display: block; width: 154px; height: 48px; object-fit: contain; object-position: left center; }
+}
+
+@media (max-width: 360px) {
+  .login-panel { padding: 12px; }
+  .login-card { padding: 20px; }
+  .login-mobile-brand { margin: -20px -20px 24px; padding-inline: 16px; }
+  .login-card h2 { font-size: 24px; }
+}
+</style>