陪伴是最深情的告白，AdminWork框架升级更新摘要（一）

用户9078190

发布于 2022-10-28 19:14:11

8260

文章被收录于专栏：知码前端知码前端

1 前言

Hello，大家好久不见，最近由于事情比较多没有及时的给大家分享AdminWork框架的最新进展，实在抱歉。

虽然没有及时和大家分享项目的进度，但项目也一直在不断的更新，在得到大家的反馈问题或者一些好的建议的时候我也会第一时间进行修复和优化。争取给大家更好的使用体验和带来更高效的开发。

那下面就和大家分享一下最近AdminWork各个版本做了哪些比较重要的优化和功能调整吧~~

2 ArcoWork版

「ArcoWork」版本主要的技术骨架：

Vue3
Typescript
ArcoDesign
Pinia

❝ArcoDesign 简介 Arco Design 是由字节跳动UED-火山引擎和架构前端字节云团队联合推出的企业级设计系统。 Arco Design 拥有系统的设计规范和资源，同时依据规范提供了丰富的原子组件，覆盖了React、Vue、Mobile 等框架和方向。在原子组件基础上也提供了丰富的定制化工具，包括风格配置平台、物料平台等，也提供了资源平台包括 IconBox、设计资源库、Arco Pro 最佳实践等。旨在帮助设计师与开发者解放双手，提升工作效率。更高效、高质量的打造符合业务规范的中后台应用。 「——arco.design官网」 ❞

升级内容

(v: 2.0.3)

升级：升级 arco-design 版本到 v2.37.1
新增：适配 上下 分栏
升级：升级 arco-design 版本到 v2.35.2

(v: 2.0.1)

升级：升级 arco-design 版本到 v2.32.0
新增：添加自定义 axios 的 request interceptor，方便使用 Pinia。

(v: 2.0.0)

升级：升级 arco-design 版本到 v2.26.0
优化：优化 main.ts 执行流程，优化代码

(v: 1.1.3)

升级：升级 arco-design 版本到 v2.26.0
优化：优化 main.ts 执行流程，优化代码

(v: 1.1.2)

升级：网络操作 api post、get 支持泛型功能
新增：新增 FormRender 组件，方便在构建表单项的时候，可以通过 render方法自定义元素
调整：调整 TableHeader.vue 中的组件布局样式
修复：修复 Humburger.vue 组件中 展开和闭合图标指示器显示不正确的 bug
修复：修复 演示页面部分 bug
新增：新增 jsx 编写组件的功能

  plugins: [
     ...
      vueJsx(),
     ...
    ],

新增：FormRender 中添加常用的 表单元素 快捷渲染方式，如下：

  import {
    Checkbox,
    Input,
    InputNumber,
    Option,
    Select,
    SelectOptionData,
    SelectProps,
  } from '@arco-design/web-vue'
  import { AllowedComponentProps, h, Ref } from 'vue'

  export default function Render(props: any) {
    if (!props || !props.formItem) {
      throw new Error('miss formItem prop and check it')
    }
    return props.render(props.formItem, h)
  }

  export function renderInput(value: Ref<string>, props = {}) {
    return (
      <Input
        onUpdate:modelValue={(newValue) => {
          value.value = newValue
        }}
        modelValue={value.value}
        {...props}
      />
    )
  }
  ...

(v: 1.1.1)

优化：优化 Tabbar 按钮样式
升级：更改 Vue Admin Work P 名字为 Admin Work Pro
重要升级：菜单可以从本地路由中过滤
- 完全从本地 views 中动态加载
- 完全从本地 路由表 中动态加载
- 本地 views 和本地 路由表 两种方式的结合。注：本地 路由表方式的 优先级要高于 本地 views的方式。（本项目默认的使用方式）
- 之前的菜单都是根据接口数据从本地 views 中动态加载，但在某些场景下或者某些人的开发习惯，可能需要根据本地定义中的路由表（如：src/router/index.ts 中的 asyncRoutes）中动态加载。如果接口中的菜单配置项和本地路由表中的配置项重复，优先使用本地路由表中的配置项。
- 在根据权限获取到菜单列表的时候，就可以根据以下三种方式加载路由：
优化：把 src/router/index.ts中的路由分类
- constantRoutes 存放一些系统页面，如login、redirect、404、403、500等
- asyncRoutes 存放一些需要根据权限加载的路由
- extraRoutes 存放一些由一级页面进入二级及多级页面，不需要在菜单中展示，同时也不需要根据权限加载的路由。如：列表详情页面
新增：在菜单数据结构中新增routeName属性，方便在有些时候可以自己命令菜单路由名称
- 在定义路由的时候，需要指定 name 属性，项目目前使用的方式是根据 menuUrl 获取最后的路径为 name 属性值，如 /system/department，就会以 department 为 name属性。
- 但在某些场景下，可能需要自定义 name，这个时候就可以根据 routeName 配置项来指定，如指定为 my-department。当没有配置此配置项时，还是会使用根据 menuUrl 获取最后的路径为 name属性值。
新增：在菜单数据结构中新增localFilePath属性，方便在有些时候可以自己自定义 vue 文件路径
- 在动态加载路由的时候，系统会根据 menuUrl 从 src/views 中动态加载 .vue 文件。
- 但在某些场景下，可能会根据自定义的 path 从 src/views 中动态加载 .vue 文件。
- 注：localFilePath 在配置的时候要以views为参考，可以配置成，如：system/department 或者 ./system/department 或者 /system/department。切记：不要加文件后缀名.vue
新增：在菜单数据结构中新增isRootPath属性，可以自定义 / 路径跳转的页面地址
- 如果没有指定任何路由为 isRootPath，则会以根据权限获取的菜单中的第一个元素的 children 属性的第一个元素的 menuUrl 指定为 / 路由的 redirect属性值
- 如果指定了多个路由配置项 isRootPath 为 true，则会以按顺序获取第一个路由
- 要指定到某个具体的叶子路由中，如果某个路由下面有 children 属性并且不为空，则判定该路由不是叶子路由
- 在动态加载路由的时候，会增加一个 path 为 / 的路由，在访问 http://localhost:3000/ 的时候会加载此配置路由，此路由不方便指定具体的 component，但可以指定一个 redirect 属性，这样就可以动态配置此路由的跳转页面
- 如果对某个具体的路由指定 isRootPath 为 true 的时候，会把此路由的 path或者menuUrl 指定为 / 路由的 redirect属性值
新增：defaultRoutes 为了在一开始对接项目的时候，后端人员还没有准备好菜单接口，导致前端开发者不能进入主页面。如果设置获取 菜单 的地址为空时，会加载此 defaultRoutes，否则会加载接口中的菜单数据
- 在刚开始对接正式后台接口的时候，后端人员还没有准备好菜单接口，导致前端开发者不能进入主页面。这个时候可以先把 根据角色获取菜单数据的接口 置为 ''，对应本项目中就是，src/api/url.ts中的以下地址

  // 在有接口的时候，要配置成真实的接口
  export const getMenuListByRoleId = '/getMenusByRoleId'
  // 在没有接口时候，可以先配置成 '' ，等后台人员提供了接口再进行修改成真实的接口
  export const getMenuListByRoleId = ''