docs(tabs): 更新标签页视图组件设计与交互细节
- 采用固定内边距策略，解决标签页悬停时的布局抖动问题 - 统一关闭按钮尺寸为14x14px，提升视觉一致性 - 优化活动标签和悬停状态的层级管理，确保视觉层次正确 - 增强视觉反馈，添加内嵌阴影效果改善用户体验 - 添加平滑颜色过渡动画（0.2秒），提升交互流畅度 - 支持玻璃拟态设计系统，实现现代化视觉风格 - 完善工具箱图标支持，确保标签页工具功能准确显示
This commit is contained in:
eafonyang
@@ -1,7 +1,7 @@
|
||||
# 系统用户管理页面
|
||||
|
||||
<cite>
|
||||
**本文档引用的文件**
|
||||
**本文引用的文件**
|
||||
- [frontend/src/views/system/users/index.vue](file://frontend/src/views/system/users/index.vue)
|
||||
- [frontend/src/api/user.js](file://frontend/src/api/user.js)
|
||||
- [backend/src/routes/users.js](file://backend/src/routes/users.js)
|
||||
@@ -16,6 +16,12 @@
|
||||
- [backend/src/app.js](file://backend/src/app.js)
|
||||
</cite>
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 更新了搜索和重置按钮的交互设计，采用统一的圆形图标格式
|
||||
- 改进了按钮的悬停状态和过渡效果，提升用户体验
|
||||
- 使用Vue 3组合式API图标组件实现一致的视觉风格
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
2. [项目结构](#项目结构)
|
||||
@@ -67,11 +73,11 @@ Services --> DB
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/system/users/index.vue:1-428](file://frontend/src/views/system/users/index.vue#L1-L428)
|
||||
- [frontend/src/views/system/users/index.vue:1-419](file://frontend/src/views/system/users/index.vue#L1-L419)
|
||||
- [backend/src/routes/users.js:1-180](file://backend/src/routes/users.js#L1-L180)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/system/users/index.vue:1-428](file://frontend/src/views/system/users/index.vue#L1-L428)
|
||||
- [frontend/src/views/system/users/index.vue:1-419](file://frontend/src/views/system/users/index.vue#L1-L419)
|
||||
- [backend/src/routes/users.js:1-180](file://backend/src/routes/users.js#L1-L180)
|
||||
|
||||
## 核心组件
|
||||
@@ -85,6 +91,15 @@ Services --> DB
|
||||
- **表单验证**：用户名长度验证、密码强度验证
|
||||
- **响应式设计**：适配不同屏幕尺寸的设备
|
||||
|
||||
#### 更新的交互设计
|
||||
|
||||
**已更新** 搜索和重置按钮现已采用统一的圆形图标格式，提升了交互清晰度和视觉一致性：
|
||||
|
||||
- **圆形图标按钮**：搜索按钮使用`Search`图标，重置按钮使用`Refresh`图标
|
||||
- **一致的悬停状态**：所有按钮具有统一的悬停效果和过渡动画
|
||||
- **改进的可访问性**：通过`title`属性提供更好的无障碍支持
|
||||
- **现代化设计风格**：符合Element Plus的设计规范
|
||||
|
||||
### 后端用户管理服务
|
||||
|
||||
后端提供了完整的用户管理API，包含以下核心功能：
|
||||
@@ -95,7 +110,7 @@ Services --> DB
|
||||
- **数据验证**：输入参数的完整性和安全性检查
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/system/users/index.vue:169-393](file://frontend/src/views/system/users/index.vue#L169-L393)
|
||||
- [frontend/src/views/system/users/index.vue:160-384](file://frontend/src/views/system/users/index.vue#L160-L384)
|
||||
- [backend/src/routes/users.js:35-177](file://backend/src/routes/users.js#L35-L177)
|
||||
|
||||
## 架构概览
|
||||
@@ -135,7 +150,7 @@ UserModel --> Database
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/system/users/index.vue:173](file://frontend/src/views/system/users/index.vue#L173)
|
||||
- [frontend/src/views/system/users/index.vue:163](file://frontend/src/views/system/users/index.vue#L163)
|
||||
- [backend/src/routes/users.js:12-13](file://backend/src/routes/users.js#L12-L13)
|
||||
|
||||
## 详细组件分析
|
||||
@@ -159,6 +174,24 @@ UserModel --> Database
|
||||
- **搜索功能**：基于用户名的模糊查询
|
||||
- **实时刷新**：操作完成后自动刷新数据
|
||||
|
||||
#### 更新的按钮交互设计
|
||||
|
||||
**已更新** 搜索区域采用了现代化的圆形图标按钮设计：
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
SearchForm[搜索表单] --> UsernameInput[用户名输入框]
|
||||
UsernameInput --> SearchButton[圆形搜索按钮]
|
||||
UsernameInput --> ResetButton[圆形重置按钮]
|
||||
SearchButton --> HandleSearch[执行搜索逻辑]
|
||||
ResetButton --> HandleReset[重置表单并刷新]
|
||||
HandleSearch --> LoadData[加载数据]
|
||||
HandleReset --> LoadData
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/system/users/index.vue:13-16](file://frontend/src/views/system/users/index.vue#L13-L16)
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class UserManagementPage {
|
||||
@@ -168,6 +201,7 @@ class UserManagementPage {
|
||||
+pagination : Object
|
||||
+loadData() void
|
||||
+handleSearch() void
|
||||
+handleReset() void
|
||||
+handleCreateSubmit() void
|
||||
+handleChangePassword() void
|
||||
+handleToggleStatus() void
|
||||
@@ -189,11 +223,11 @@ UserManagementPage --> ValidationRules : validates
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/system/users/index.vue:169-393](file://frontend/src/views/system/users/index.vue#L169-L393)
|
||||
- [frontend/src/views/system/users/index.vue:160-384](file://frontend/src/views/system/users/index.vue#L160-L384)
|
||||
- [frontend/src/api/user.js:1-40](file://frontend/src/api/user.js#L1-L40)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/system/users/index.vue:1-428](file://frontend/src/views/system/users/index.vue#L1-L428)
|
||||
- [frontend/src/views/system/users/index.vue:1-419](file://frontend/src/views/system/users/index.vue#L1-L419)
|
||||
|
||||
### 用户路由和控制器
|
||||
|
||||
@@ -367,6 +401,7 @@ Vue[Vue 3]
|
||||
ElementPlus[Element Plus]
|
||||
Axios[Axios]
|
||||
Router[Vue Router]
|
||||
Icons[@element-plus/icons-vue]
|
||||
end
|
||||
subgraph "后端依赖"
|
||||
Express[Express.js]
|
||||
@@ -384,14 +419,15 @@ Express --> Sequelize
|
||||
Sequelize --> MySQL
|
||||
Express --> Winston
|
||||
Express --> Crypto
|
||||
UsersPage --> Icons
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/system/users/index.vue:170-173](file://frontend/src/views/system/users/index.vue#L170-L173)
|
||||
- [frontend/src/views/system/users/index.vue:161-164](file://frontend/src/views/system/users/index.vue#L161-L164)
|
||||
- [backend/src/app.js:6-12](file://backend/src/app.js#L6-L12)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/system/users/index.vue:170-173](file://frontend/src/views/system/users/index.vue#L170-L173)
|
||||
- [frontend/src/views/system/users/index.vue:161-164](file://frontend/src/views/system/users/index.vue#L161-L164)
|
||||
- [backend/src/app.js:6-12](file://backend/src/app.js#L6-L12)
|
||||
|
||||
## 性能考虑
|
||||
@@ -403,6 +439,7 @@ Express --> Crypto
|
||||
- **虚拟滚动**: 大数据量时的表格优化
|
||||
- **缓存策略**: 本地存储用户会话信息
|
||||
- **防抖处理**: 搜索框输入防抖
|
||||
- **图标优化**: 使用SVG图标减少资源加载
|
||||
|
||||
### 后端性能优化
|
||||
- **数据库索引**: 用户名字段建立索引
|
||||
@@ -439,6 +476,11 @@ Express --> Crypto
|
||||
- **原因**: 服务器内部异常
|
||||
- **解决**: 查看后端日志文件
|
||||
|
||||
#### 图标显示问题
|
||||
- **问题**: 圆形图标按钮显示异常
|
||||
- **原因**: @element-plus/icons-vue依赖缺失
|
||||
- **解决**: 确认依赖正确安装，检查浏览器控制台错误
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/config/logger.js:10-26](file://backend/src/config/logger.js#L10-L26)
|
||||
- [frontend/src/utils/auth.js:46-50](file://frontend/src/utils/auth.js#L46-L50)
|
||||
@@ -450,12 +492,13 @@ Express --> Crypto
|
||||
### 主要优势
|
||||
- **完整的CRUD功能**: 支持用户的所有基本操作
|
||||
- **严格的安全控制**: 多层次的权限验证和保护机制
|
||||
- **良好的用户体验**: 响应式设计和直观的操作界面
|
||||
- **良好的用户体验**: 响应式设计和直观的圆形图标按钮
|
||||
- **可扩展的架构**: 清晰的分层设计便于功能扩展
|
||||
|
||||
### 技术特点
|
||||
- **现代化技术栈**: Vue 3 + Express.js + MySQL
|
||||
- **安全最佳实践**: JWT认证、密码哈希、权限控制
|
||||
- **统一的交互设计**: 标准化的圆形图标按钮和一致的悬停效果
|
||||
- **完整的开发流程**: 从设计到部署的完整解决方案
|
||||
- **详细的文档支持**: 清晰的代码注释和使用说明
|
||||
|
||||
|
||||
Reference in New Issue
Block a user