soybeanjs / soybean-admin

A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite5, TypeScript, Pinia, NaiveUI and UnoCSS. 一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia, NaiveUI 和 UnoCSS。
https://soybeanjs.cn
MIT License
10.21k stars 1.83k forks source link

feat: add subpackage `@sa/alova`, refactor example with this package. #639

Closed JOU-amjs closed 1 month ago

JOU-amjs commented 1 month ago

此pr包含以下修改,保持了与@sa/axios相同的效果:

添加@sa/alova子包

通过77行代码实现了比@sa/axios更丰富的特性,具体如下:

  1. 尽量与@sa/axios的封装设计保持了一致
  2. 自带了token无感刷新特性,不再需要自行实现,并且在刷新token期间发送的请求将会挂起等待,刷新完成自动重新请求
  3. 因不再需要自行实现token刷新,去除了onBackendFail钩子
  4. 可自定义请求适配器,默认使用fetch适配器

使用@sa/alova重构views

  1. src/service/api下改用@sa/alova
  2. 使用alova的usePagination重构了packages/hooks/src/use-table.tssrc/hooks/common/table.ts,删除了大量与usePagination重复的代码,既兼容了之前的用法,也保留了usePagination的所有特性,例如对列表下一页数据做预加载。并对用户列表、角色列表和菜单列表做了小调整。
  3. 对以下组件中的权限列表、页面列表等的获取,使用useWatcher进行重构:
    • 用户操作抽屉src\views\manage\user\modules\user-operate-drawer.vue
    • 菜单权限弹框src\views\manage\role\modules\menu-auth-modal.vue
    • 菜单操作弹框src\views\manage\menu\modules\menu-operate-modal.vue
  4. 由于表单提交未找到可用的api,暂无法使用useForm重构。

部分优化

  1. 对以上弹框和抽屉内的数据获取添加了loading效果
  2. 发现菜单列表src\views\manage\menu\index.vue中的allPages数据只在菜单操作弹框src\views\manage\menu\modules\menu-operate-modal.vue内使用,因此将allPages的数据获取移动到了菜单操作弹框中,实现弹框显示再加载的效果
Azir-11 commented 1 month ago

其实这个可以直接在example上进行更改的,在service/request里多封一个alova,然后复制一份某个管理页,当然额外加一个一级菜单也行,里面的请求使用alova的封装,,use-table也可以新写一份,原来那份不动

Azir-11 commented 1 month ago

单独写到alova分支可能看的人不会很多,后续跟进更新也会稍微麻烦一点