audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增 luxsin-controller，更新 wiki

Browse Source
This commit is contained in:
eafonyang
2026-07-10 16:51:05 +08:00
parent b9ba1d5ed4
commit fc88d42be9
28 changed files with 1009 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.qoder/repowiki/zh/content/前端组件/页面组件/登录页面.md
+70 -4
View File
@@ -13,8 +13,15 @@
- [backend/src/middleware/auth.js](file://backend/src/middleware/auth.js)
- [backend/src/utils/password.js](file://backend/src/utils/password.js)
- [backend/src/utils/response.js](file://backend/src/utils/response.js)
- [frontend/src/styles/lux-theme.css](file://frontend/src/styles/lux-theme.css)
</cite>
## 更新摘要
**变更内容**
- 更新了登录按钮样式实现，从复杂渐变背景简化为纯色背景配合 backdrop-filter 模糊效果
- 优化了性能表现，同时保持了玻璃拟态美学设计
- 增强了按钮的视觉层次和交互反馈
## 目录
1. [简介](#简介)
2. [项目结构](#项目结构)
@@ -41,6 +48,7 @@ AuthUtil["认证工具<br/>frontend/src/utils/auth.js"]
RequestUtil["HTTP 请求封装<br/>frontend/src/utils/request.js"]
Router["路由守卫<br/>frontend/src/router/index.js"]
TabsUtil["标签页工具<br/>frontend/src/utils/tabs.js"]
Styles["主题样式<br/>frontend/src/styles/lux-theme.css"]
end
subgraph "后端"
AuthRoute["认证路由<br/>backend/src/routes/auth.js"]
@@ -59,6 +67,7 @@ RequestUtil --> AuthUtil
Router --> AuthUtil
Router --> TabsUtil
AuthRoute --> AuthMW
LoginView --> Styles
```
图表来源
@@ -66,17 +75,19 @@ AuthRoute --> AuthMW
- [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
- [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
- [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
- [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
章节来源
- [frontend/src/views/login/index.vue:1-453](file://frontend/src/views/login/index.vue#L1-L453)
- [frontend/src/views/login/index.vue:1-445](file://frontend/src/views/login/index.vue#L1-L445)
- [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
- [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
- [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [frontend/src/styles/lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)
- [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
- [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
@@ -88,6 +99,7 @@ AuthRoute --> AuthMW
- 认证工具：负责本地 Token 与用户信息的读取、设置、清理与解析。
- 请求封装：全局注入 Authorization 头、处理 401 自动跳转登录。
- 路由守卫：控制访问权限、超时自动登出、超级管理员限制。
- 主题样式：提供统一的按钮样式、玻璃拟态效果和视觉规范。
- 后端认证路由：处理登录、获取当前用户、修改密码。
- JWT 工具：签发与解码 Access Token，定义 TTL。
- 密码工具：PBKDF2 哈希与安全比对。
@@ -99,6 +111,7 @@ AuthRoute --> AuthMW
- [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
- [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
- [backend/src/routes/auth.js:24-77](file://backend/src/routes/auth.js#L24-L77)
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
- [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
@@ -140,7 +153,7 @@ LV->>RT : 清空标签页缓存并跳转首页
- [backend/src/utils/password.js:16-34](file://backend/src/utils/password.js#L16-L34)
- [backend/src/utils/jwt.js:7-17](file://backend/src/utils/jwt.js#L7-L17)
- [frontend/src/utils/auth.js:8-26](file://frontend/src/utils/auth.js#L8-L26)
- [frontend/src/router/index.js:82-85](file://frontend/src/router/index.js#L82-L85)
- [frontend/src/router/index.js:82-85](file://frontend/src/router/index.js#L82-85)
## 详细组件分析
@@ -401,7 +414,47 @@ AuthUtils --> JWTUtil : "解析 payload"
- 按钮尺寸与间距适中，便于触摸点击。
章节来源
- [frontend/src/views/login/index.vue:153-453](file://frontend/src/views/login/index.vue#L153-L453)
- [frontend/src/views/login/index.vue:153-445](file://frontend/src/views/login/index.vue#L153-L445)
### 按钮样式优化（新增）
**更新** 登录按钮样式已从复杂的渐变背景简化为纯色背景配合 backdrop-filter 模糊效果，在保持玻璃拟态美学的同时显著提升了性能表现。
- **样式实现**：
- 主按钮采用纯色背景 `rgba(56, 189, 248, 0.92)`，移除了复杂的渐变计算
- 保留 `backdrop-filter: blur(8px)` 模糊效果，维持玻璃质感
- 悬停状态使用更亮的纯色 `rgba(34, 211, 238, 0.95)`
- 添加了内阴影和高光效果增强立体感
- **性能优化**：
- 减少了渐变背景的渲染开销
- 简化了 CSS 计算复杂度
- 保持了流畅的交互动画
- **视觉效果**：
- 圆角设计 `border-radius: 999px` 营造现代感
- 多层阴影系统提供深度层次
- 平滑的过渡动画提升用户体验
```mermaid
flowchart TD
A["登录按钮样式"] --> B["纯色背景替代渐变"]
A --> C["保留 backdrop-filter 模糊"]
A --> D["优化阴影系统"]
B --> E["提升渲染性能"]
C --> F["维持玻璃质感"]
D --> G["增强视觉层次"]
E --> H["流畅交互体验"]
F --> H
G --> H
```
**图表来源**
- [frontend/src/views/login/index.vue:382-424](file://frontend/src/views/login/index.vue#L382-L424)
- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
章节来源
- [frontend/src/views/login/index.vue:382-424](file://frontend/src/views/login/index.vue#L382-L424)
- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
## 依赖关系分析
- 前端模块耦合：
@@ -409,6 +462,7 @@ AuthUtils --> JWTUtil : "解析 payload"
- 认证 API 依赖请求封装。
- 请求封装依赖认证工具（读取 Token）。
- 路由守卫依赖认证工具与标签页工具。
- 登录视图依赖主题样式（按钮样式、玻璃拟态效果）。
- 后端模块耦合：
- 认证路由依赖模型、密码工具、JWT 工具与响应封装。
- 认证中间件依赖 JWT 工具。
@@ -422,6 +476,7 @@ API --> REQ["请求封装"]
REQ --> AU["认证工具"]
RT["路由守卫"] --> AU
RT --> TU["标签页工具"]
LV --> ST["主题样式"]
AR["认证路由"] --> PW["密码工具"]
AR --> JW["JWT 工具"]
AR --> RU["响应封装"]
@@ -433,6 +488,7 @@ AR --> MW["认证中间件"]
- [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
- [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
- [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
- [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
@@ -444,6 +500,7 @@ AR --> MW["认证中间件"]
- [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
- [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
- [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
- [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
@@ -454,6 +511,10 @@ AR --> MW["认证中间件"]
- Token TTL：12 小时，平衡安全性与用户体验。
- 请求拦截器：避免重复设置 Authorization，减少不必要的网络开销。
- 前端解析：仅在需要时解析 Token，避免频繁计算。
- **按钮样式优化**：
- 简化渐变背景为纯色，减少 CSS 计算开销
- 保留必要的 backdrop-filter 效果，平衡性能与视觉效果
- 优化阴影层级，减少重绘重排
- 建议优化：
- 对频繁访问的受保护接口，可在路由守卫中加入缓存策略（如短期缓存用户信息）。
- 后端可引入登录失败计数与临时封禁策略，缓解暴力破解风险。
@@ -470,11 +531,16 @@ AR --> MW["认证中间件"]
- 页面跳转异常：
- 检查路由守卫逻辑与 redirect 参数传递。
- 确认标签页缓存清理是否成功。
- **按钮样式问题**：
- 检查主题样式是否正确加载。
- 确认浏览器是否支持 backdrop-filter 属性。
- 验证 CSS 优先级冲突。
章节来源
- [frontend/src/utils/request.js:44-59](file://frontend/src/utils/request.js#L44-L59)
- [frontend/src/router/index.js:68-73](file://frontend/src/router/index.js#L68-L73)
- [backend/src/middleware/auth.js:21-25](file://backend/src/middleware/auth.js#L21-L25)
- [frontend/src/views/login/index.vue:382-424](file://frontend/src/views/login/index.vue#L382-L424)
## 结论
该登录系统从前端表单到后端认证形成完整的闭环，具备良好的可维护性与扩展性。前端通过统一的请求封装与路由守卫保障了安全性与用户体验；后端通过 PBKDF2 哈希与 JWT 机制提供了可靠的认证基础。建议在生产环境中补充速率限制与 HTTPS 等安全措施，并持续监控与优化登录流程的性能与稳定性。
该登录系统从前端表单到后端认证形成完整的闭环，具备良好的可维护性与扩展性。前端通过统一的请求封装与路由守卫保障了安全性与用户体验；后端通过 PBKDF2 哈希与 JWT 机制提供了可靠的认证基础。**最新的按钮样式优化进一步提升了性能表现，在保持玻璃拟态美学的同时实现了更好的渲染效率**。建议在生产环境中补充速率限制与 HTTPS 等安全措施，并持续监控与优化登录流程的性能与稳定性。