woshilina / storage-front

front vue

storage-front

线上体验 账号：ceshi 密码：123456

项目介绍：

1. 此项目为前端项目，搭配的后端项目是storage-service
2. 此项目使用的是 vue3 框架, UI组件库用的 Element Plus，状态管理 pinia，路由管理 vue-router 4
3. 菜单包含：用户管理、角色管理、权限管理、物品管理、图标下拉选、通用设置、关于
4. 基于Element Plus的 menu 菜单采用递归方式封装左侧菜单
5. 基于Element Plus的Virtualized Table 虚拟化表格封装super-table,利用 vue3 的组合式函数封装相同逻辑，项目中的几个页面除了权限管理都是使用的super-table组件， super-table 组件可配置批量操作按钮、过滤项、列表项、分页、配置列显隐、排序
   • 自定义列设置即列显隐功能支持保存，保存后再次进入该页面会按照保存的信息展现列
   • 自定义列排序功能需要后台接口，可参考商品管理页
6. 基于RBAC模型实现权限管理，RBAC模型具有简化权限管理、灵活的角色与权限关系、提高安全性和易于扩展等优点。中心**是通过将权限分配给➡角色，再将角色分配给➡用户，来实现对系统资源的访问控制
7. 采用 JWT 实现跨域认证，在axios 请求拦截将 token 添加到请求头Authorization，同时为了实现无感刷新提高用户体验，使用了refresh token，在 axios响应拦截封装刷新 token的逻辑
8. 自定义指令 v-permission，用于前端权限判断，控制显隐
9. 利用vite-plugin-svg-icons插件封装图标选择器组件ElIconSelect

功能介绍：

1. 用户注册登录
2. 权限管理（增删改查，树形表格结构，编码code唯一）
3. 角色管理（增删改查，配置角色权限）
4. 用户管理（增删改查，配置用户角色）
5. 用户可修改个人信息，修改密码
6. 页面模式可切换设置：浅色模式、深色模式、跟随系统

页面展示

1. 登录页
2. 权限管理页
3. 角色管理页
4. 用户管理页
5. 商品管理页
6. 列显隐操作
7. 列排序 默认按照名称排序，点击数量列排序按钮会按照数量列排序
8. 个人信息页
9. 页面模式