1
This commit is contained in:
ChuXun
436
Design/frontend_Design/LoginPage_Design.md
Normal file
436
Design/frontend_Design/LoginPage_Design.md
Normal file
@@ -0,0 +1,436 @@
|
||||
# 登录页面设计文档
|
||||
|
||||
## 1. 页面概述
|
||||
|
||||
登录页面是用户进入系统的主要入口，提供账号密码登录功能，同时支持记住登录状态和找回密码功能。
|
||||
|
||||
## 2. 页面布局
|
||||
|
||||
|
||||
|
||||
### 2.1 布局结构
|
||||
|
||||
登录页面采用居中卡片式布局，包含以下主要区域：
|
||||
- 顶部 Logo 和系统名称区域
|
||||
- 中部登录表单区域
|
||||
- 底部版权信息和帮助链接区域
|
||||
|
||||
### 2.2 响应式设计
|
||||
|
||||
- **桌面端**：居中卡片，宽度 400px，两侧留白
|
||||
- **平板端**：居中卡片，宽度 80%，两侧留白
|
||||
- **移动端**：全宽卡片，上下留白，左右边距 16px
|
||||
|
||||
## 3. 组件结构
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 顶部 Logo 和系统名称 -->
|
||||
<div class="login-header">
|
||||
<img src="@/assets/images/logo.svg" alt="系统 Logo" class="login-logo" />
|
||||
<h1 class="login-title">环境监测系统</h1>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<el-card class="login-card">
|
||||
<h2 class="login-card-title">用户登录</h2>
|
||||
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
>
|
||||
<!-- 用户名输入框 -->
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="用户名"
|
||||
prefix-icon="User"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
prefix-icon="Lock"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 记住我和忘记密码 -->
|
||||
<div class="login-options">
|
||||
<el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
|
||||
<el-link type="primary" @click="forgotPassword">忘记密码？</el-link>
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
class="login-button"
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
|
||||
<!-- 其他登录方式 -->
|
||||
<div v-if="enableOtherLoginMethods" class="other-login-methods">
|
||||
<div class="divider">
|
||||
<span>其他登录方式</span>
|
||||
</div>
|
||||
<div class="login-icons">
|
||||
<el-button circle icon="Wechat" class="icon-button wechat" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册链接 -->
|
||||
<div class="register-link">
|
||||
<span>还没有账号？</span>
|
||||
<el-link type="primary" @click="goToRegister">立即注册</el-link>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 底部版权信息 -->
|
||||
<div class="login-footer">
|
||||
<p>© 2025 环境监测系统 版权所有</p>
|
||||
<p>
|
||||
<el-link type="info" href="#">用户协议</el-link>
|
||||
<el-divider direction="vertical" />
|
||||
<el-link type="info" href="#">隐私政策</el-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 4. 数据结构
|
||||
|
||||
```typescript
|
||||
interface LoginForm {
|
||||
username: string;
|
||||
password: string;
|
||||
remember: boolean;
|
||||
}
|
||||
|
||||
interface LoginResponse {
|
||||
token: string;
|
||||
user: {
|
||||
id: number;
|
||||
username: string;
|
||||
role: string;
|
||||
permissions: string[];
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## 5. 状态管理
|
||||
|
||||
```typescript
|
||||
// 组件内状态
|
||||
const loginForm = ref<LoginForm>({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false
|
||||
});
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
const loginFormRef = ref<FormInstance>();
|
||||
const enableOtherLoginMethods = ref<boolean>(true);
|
||||
|
||||
// 全局状态 (Pinia Store)
|
||||
const authStore = useAuthStore();
|
||||
```
|
||||
|
||||
## 6. 交互逻辑
|
||||
|
||||
### 6.1 表单验证规则
|
||||
|
||||
```typescript
|
||||
const loginRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '用户名长度应为 3-20 个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度应为 6-20 个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
### 6.2 登录流程
|
||||
|
||||
```typescript
|
||||
const handleLogin = async () => {
|
||||
if (!loginFormRef.value) return;
|
||||
|
||||
await loginFormRef.value.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
// 调用登录 API
|
||||
await authStore.login({
|
||||
username: loginForm.value.username,
|
||||
password: loginForm.value.password
|
||||
});
|
||||
|
||||
// 如果选择记住我，设置本地存储
|
||||
if (loginForm.value.remember) {
|
||||
localStorage.setItem('remember_username', loginForm.value.username);
|
||||
} else {
|
||||
localStorage.removeItem('remember_username');
|
||||
}
|
||||
|
||||
// 登录成功提示
|
||||
ElMessage.success('登录成功');
|
||||
|
||||
// 获取重定向地址或跳转到首页
|
||||
const redirect = route.query.redirect as string || '/';
|
||||
router.push(redirect);
|
||||
} catch (error) {
|
||||
// 错误处理
|
||||
ElMessage.error(error.response?.data?.message || '登录失败，请检查用户名和密码');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
### 6.3 其他交互功能
|
||||
|
||||
```typescript
|
||||
// 跳转到注册页面
|
||||
const goToRegister = () => {
|
||||
router.push('/auth/register');
|
||||
};
|
||||
|
||||
// 跳转到忘记密码页面
|
||||
const forgotPassword = () => {
|
||||
router.push('/auth/forgot-password');
|
||||
};
|
||||
|
||||
// 生命周期钩子，检查是否有记住的用户名
|
||||
onMounted(() => {
|
||||
const rememberedUsername = localStorage.getItem('remember_username');
|
||||
if (rememberedUsername) {
|
||||
loginForm.value.username = rememberedUsername;
|
||||
loginForm.value.remember = true;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 7. API 调用
|
||||
|
||||
### 7.1 登录 API
|
||||
|
||||
```typescript
|
||||
// api/auth.ts
|
||||
export const authApi = {
|
||||
login: (credentials: { username: string; password: string }) =>
|
||||
apiClient.post<LoginResponse>('/auth/login', credentials)
|
||||
};
|
||||
|
||||
// stores/auth.ts
|
||||
export const useAuthStore = defineStore('auth', {
|
||||
// ... 其他状态和 getters
|
||||
|
||||
actions: {
|
||||
async login(credentials) {
|
||||
try {
|
||||
const { data } = await authApi.login(credentials);
|
||||
this.token = data.token;
|
||||
this.user = data.user;
|
||||
|
||||
// 存储 token 到本地存储
|
||||
localStorage.setItem('token', data.token);
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
this.error = error.response?.data?.message || '登录失败';
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 8. 样式设计
|
||||
|
||||
```scss
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding: 20px;
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.login-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
|
||||
.login-card-title {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.login-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.other-login-methods {
|
||||
margin-top: 24px;
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 16px 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 0 16px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 16px;
|
||||
|
||||
.icon-button {
|
||||
font-size: 20px;
|
||||
|
||||
&.wechat {
|
||||
color: #07c160;
|
||||
background-color: #f0f9eb;
|
||||
border-color: #e1f3d8;
|
||||
|
||||
&:hover {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-link {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式样式
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-container {
|
||||
padding: 16px;
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 9. 安全考虑
|
||||
|
||||
1. **密码安全**
|
||||
- 密码输入框使用 `type="password"` 和 `show-password` 属性
|
||||
- 密码不在前端存储，只在登录时传输
|
||||
- 密码传输使用 HTTPS 加密
|
||||
|
||||
2. **Token 安全**
|
||||
- Token 存储在 localStorage 中，有 XSS 风险，可考虑使用 HttpOnly Cookie
|
||||
- Token 过期处理在响应拦截器中统一处理
|
||||
|
||||
3. **表单安全**
|
||||
- 实施前端输入验证，防止基本的注入攻击
|
||||
- 防止表单重复提交（登录按钮 loading 状态）
|
||||
|
||||
## 10. 测试用例
|
||||
|
||||
1. **单元测试**
|
||||
- 测试表单验证逻辑
|
||||
- 测试记住用户名功能
|
||||
|
||||
2. **集成测试**
|
||||
- 测试登录成功流程
|
||||
- 测试登录失败处理
|
||||
- 测试重定向功能
|
||||
|
||||
3. **端到端测试**
|
||||
- 测试完整登录流程
|
||||
- 测试页面响应式布局
|
||||
|
||||
## 11. 性能优化
|
||||
|
||||
1. **延迟加载**
|
||||
- 第三方图标库按需引入
|
||||
- 忘记密码页面使用动态导入
|
||||
|
||||
2. **缓存策略**
|
||||
- 记住用户名使用 localStorage
|
||||
- 静态资源（logo 等）设置适当的缓存策略
|
||||
Reference in New Issue
Block a user