团队冲刺8

第8天：前端框架搭建与通用组件封装
关键词：Element Plus · Axios封装 · 动态路由 · 权限控制
前端技术选型

• Vue 3 + Element Plus + Vite
• Axios + 请求/响应拦截器
• ECharts + Vue-ECharts
• 动态路由 + 按钮级权限控制
  通用组件封装
  几天后台开发下来，发现很多模块有相似的模式。前端也做了大量封装：

1. SearchFm组件：基于配置项渲染搜索表单，减少重复代码
2. CrudTable组装：封装分页、排序、批量操作、行操作按钮
3. 流程进度组件：基于ECharts的审核进度展示
4. 图片上传组件：集成水印功能 + 压缩 + 预览
   权限控制
   企业后台的权限控制是刚需。采用RBAC模型：

• 用户 → 角色 → 权限（三级）
• 前端：路由级权限（动态路由） + 按钮级权限（自定义指令v-permission）
• 后端：接口级权限（Spring Security + 自定义注解）
  踩坑：Element Plus表格性能
  列表数据量大的时候（几千条），El-Table的渲染卡顿明显。
  解决：启用虚拟滚动（el-table-v2），配合后端分页，每页只加载20条，前端展示流畅了很多。