基础表单：登录注册页面需求分析
这个页面的定位
登录注册页面看似简单，实际上在整个后台管理系统中承担着承上启下的角色。向上它复习了前面学过的页面创建和路由配置，向下它为后续的动态表单、权限控制和顶部菜单的用户退出功能做铺垫。从技术层面看，它是对 Element Plus el-form 组件的一次完整实战。
本节的重点不是表单校验或者 API 对接（这些在后续章节会详细展开），而是页面结构设计——如何设计一个既美观又功能完整的登录注册页面，特别是如何处理不同屏幕尺寸下的响应式布局。
主流后台登录页面设计参考
在设计自己的登录页面之前，有必要先看看大厂和开源框架是怎么做的。以下是几种典型的设计方案：
大厂设计参考
| 产品 | 登录方式 | 布局特点 | 亮点 |
|---|---|---|---|
| 火山引擎 | 账号登录 + 手机号登录 + 第三方登录 | Tab 切换不同登录方式，第三方登录在底部 | 账号登录和手机号登录分离为独立 Tab，信息层次清晰 |
| 百度智能云 | 账号登录 + 短信登录 + 云账号登录 | 三种方式并列展示，短信登录置于下方 | 通过视觉权重引导用户优先选择账号/云账号登录 |
| 小红书开放平台 | APP 扫码 + 手机号登录 + 第三方登录 | 左侧扫码区域 + 右侧表单区域 | 移动端用户引导做得好，扫码和表单在同一视图中 |
这些大厂的设计有一个共同特点：不把所有登录方式堆在一个表单里，而是通过 Tab、折叠区域或视觉分区来组织信息。
开源框架设计参考
| 框架 | 布局方案 | 响应式处理 | 切换动画 |
|---|---|---|---|
| Vue Vben Admin | 左侧品牌区 + 右侧表单 | 移动端隐藏左侧，表单居中 | 登录方式切换时元素从右侧滑入 |
| Naive UI Admin | 居中表单 + 背景图 | 移动端背景图缩放，表单下移 | 登录方式从上至下浮动进入 |
| EleAdmin | 全屏背景 + 居中表单 | 纯响应式缩放 | 无特殊动画，保持简洁 |
Vue Vben Admin 和 Naive UI Admin 在登录方式切换时都加了过渡动画——点击切换后，表单元素以动画方式逐步出现，这种细节显著提升了用户体验。不过 Vben Admin 在移动端的表现稍弱，左侧背景图在小屏幕下直接隐藏，没有做适配。Naive UI Admin 在移动端把图片放在页面中间，但表单被挤到了图片下方，用户需要滚动才能看到，这个交互设计并不理想。
页面结构设计
综合以上参考，登录注册页面的结构可以拆解为以下几个独立模块：
整体布局
┌──────────────────────────────────────────┐
│ 背景层 (可选) │
│ ┌────────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────────────────────┐ │ │
│ │ │ 表单容器 │ │ │
│ │ │ ┌────────────────────┐ │ │ │
│ │ │ │ 标题区域 │ │ │ │
│ │ │ ├────────────────────┤ │ │ │
│ │ │ │ 登录方式 Tab │ │ │ │
│ │ │ ├────────────────────┤ │ │ │
│ │ │ │ 表单区域 │ │ │ │
│ │ │ ├────────────────────┤ │ │ │
│ │ │ │ 提交按钮 │ │ │ │
│ │ │ ├────────────────────┤ │ │ │
│ │ │ │ 其他登录方式 │ │ │ │
│ │ │ └────────────────────┘ │ │ │
│ │ └──────────────────────────┘ │ │
│ │ │ │
│ └────────────────────────────────────┘ │
└──────────────────────────────────────────┘
text
各模块详细设计
1. 背景层（可选）
背景层用于展示品牌信息、产品宣传图或装饰性元素。需要支持三种布局模式：
| 模式 | 描述 | 适用场景 |
|---|---|---|
| 左侧图片 + 右侧表单 | 经典双栏布局 | 桌面端品牌展示 |
| 右侧图片 + 左侧表单 | 镜像双栏布局 | 桌面端差异化 |
| 全屏居中表单 | 无背景图或背景模糊 | 移动端、简洁风格 |
背景层作为一个独立的 Props 传入，组件本身不关心背景内容。
2. 标题区域
标题区域的文字（如"登录"或"注册"）是可选的，通过 Props 控制是否显示。标题区域内还需要放置注册/登录的切换入口。参考不同框架的做法：
- 火山引擎风格：注册入口放在表单底部，作为"其他操作"的一部分
- Naive UI Admin 风格：注册入口放在标题区域，"没有账号？免费注册" 高亮链接
- Vben Admin 风格：注册入口在表单下方
推荐将注册/登录切换放在标题区域右侧，这样用户进入页面的第一时间就能看到切换入口，减少认知负担。
3. 登录方式 Tab
管理后台系统通常需要支持以下登录方式：
| 登录方式 | 使用场景 | 实现复杂度 |
|---|---|---|
| 账号密码登录 | 最基础的登录方式，企业内部系统标配 | 低 |
| 手机号 + 短信验证码 | 面向 C 端用户，降低注册门槛 | 中（需对接短信服务） |
| 扫码登录 | 移动端 APP 用户引导，企业微信/钉钉集成 | 高（需 WebSocket 或轮询） |
| 第三方登录 | 快速注册/登录，降低使用成本 | 中（OAuth 对接） |
对于 OA 类管理后台，通常支持统一账号登录和子账号登录。第三方登录一般放在页面底部，用图标 + 链接的形式展示。
Tab 区域的设计需要注意切换时的过渡动画。参考 Vben Admin 的实现：切换登录方式时，旧表单元素向左淡出，新表单元素从右侧滑入，整个过渡时间控制在 300ms 左右。
4. 表单区域
表单区域的核心是 Element Plus 的 el-form 组件，包含以下基础元素：
<el-form :model="formData" :rules="formRules" ref="formRef">
<el-form-item prop="username">
<el-input v-model="formData.username" placeholder="请输入账号">
<template #prefix>
<el-icon><User /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password>
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item>
<div class="flex justify-between w-full">
<el-checkbox v-model="formData.remember">记住密码</el-checkbox>
<el-link type="primary">忘记密码？</el-link>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" class="w-full" @click="handleSubmit">登录</el-button>
</el-form-item>
</el-form>
vue
表单区域的设计要点：
- 每个输入框左侧放置图标，提升可辨识度
- 密码框启用
show-password属性，允许用户查看输入内容 - "记住密码"和"忘记密码"放在同一行，左右分布
- 登录按钮占满整行宽度，视觉上突出主操作
5. 其他登录方式
底部区域用于展示第三方登录入口，设计为动态组件——接收一个数组 Props，自动渲染对应的图标按钮：
<template>
<div class="other-login" v-if="options.length">
<el-divider>其他登录方式</el-divider>
<div class="flex justify-center gap-4">
<el-tooltip v-for="item in options" :key="item.name" :content="item.name">
<el-button circle @click="item.action">
<el-icon :size="20"><component :is="item.icon" /></el-icon>
</el-button>
</el-tooltip>
</div>
</div>
</template>
vue
常见的第三方登录包括：微信、支付宝、GitHub、Google、钉钉、企业微信等。不同项目需要支持的第三方登录不同，因此设计为数组 Props 最灵活。
响应式设计要点
登录注册页面的响应式布局是本节的重点之一。不同屏幕尺寸下的表现直接影响用户的第一印象。
桌面端（宽度 > 1024px）
- 左侧展示品牌图片（宽度约 50%-60%），右侧放置表单（宽度约 40%-50%）
- 表单容器水平垂直居中于右侧区域
- 背景图片完整显示，不失真
平板端（768px < 宽度 < 1024px）
- 品牌图片区域缩小或隐藏
- 表单容器居中显示
- 如果保留图片，可以缩小为顶部 banner 形式
移动端（宽度 < 768px）
- 完全隐藏背景图片（移动端下载大图浪费流量且遮挡内容）
- 表单容器占满整个视口
- 表单宽度设为
max-width: 400px; margin: 0 auto;确保在大屏手机上不会过宽 - 第三方登录按钮适当缩小
/* 响应式断点示例 */
.login-container {
display: flex;
min-height: 100vh;
}
@media (max-width: 768px) {
.login-container {
flex-direction: column;
}
.login-bg {
display: none; /* 移动端隐藏背景 */
}
.login-form-wrapper {
width: 100%;
padding: 24px;
}
}
css
交互动画细节
参考 Vben Admin 和 Naive UI Admin 的实现，登录方式切换时需要加入过渡动画：
- Vben Admin：所有元素依次从右侧滑入（stagger animation），每个元素延迟约 50ms
- Naive UI Admin：表单元素从上至下浮动进入，带有轻微的弹性效果
推荐使用 Vue 的 <Transition> 组件配合 CSS @keyframes 实现这些效果。动画不宜过长，控制在 200-400ms 之间，过长会让用户感觉页面"卡顿"。
LoginForm 组件封装思路
为了提高复用性，登录表单应该封装为独立组件。组件的 Props 设计如下：
| Props | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | '' | 表单标题，为空则不显示 |
showRegister | boolean | true | 是否显示注册入口 |
loginMethods | string[] | ['account'] | 支持的登录方式 |
thirdPartyLogins | ThirdPartyLogin[] | [] | 第三方登录配置 |
backgroundImage | string | '' | 背景图片 URL |
layout | 'left' | 'right' | 'center' | 'left' | 表单位置 |
组件对外暴露的事件：
| 事件 | 参数 | 说明 |
|---|---|---|
login | { username, password } | 用户点击登录按钮 |
register | - | 用户点击注册入口 |
thirdPartyLogin | provider: string | 用户点击第三方登录 |
这种封装方式使得登录页面可以在不同项目中复用——只需要传入不同的 Props 配置就能适配不同的登录需求。
页面路由配置
登录注册页面作为独立页面，需要配置路由。通常放在根路由下，不需要嵌套在默认布局（带侧边栏和头部）中：
// router/routes/index.ts
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('~/pages/login/index.vue'),
meta: {
title: '登录',
hidden: true, // 不在菜单中显示
}
},
{
path: '/register',
name: 'Register',
component: () => import('~/pages/register/index.vue'),
meta: {
title: '注册',
hidden: true,
}
},
// ... 其他业务路由
]
typescript
meta.hidden: true 确保登录和注册页面不会出现在自动生成的菜单中。登录成功后通过 router.push('/') 跳转到主页面。
学习路径建议
本节是登录注册模块的第一节，后续章节的展开顺序为：
- 本节：需求分析，理解页面结构设计
- 下一节：表单基本结构，使用
el-form搭建登录表单 - 后续：语言切换与暗黑模式、响应式布局优化、第三方登录集成、表单校验
建议在动手实现之前，先浏览 Element Plus Form 组件的官方文档，了解 el-form、el-form-item、el-input 的基本用法和校验规则配置方式。然后对照 Naive UI Admin 或 Vue Vben Admin 的登录页面，尝试自己搭建一个基础版本，再对比课程中的实现方式查漏补缺。
↑