前言
Hello，大家好久不见，最近由于事情比较多没有及时的给大家分享AdminWork框架的最新进展，实在抱歉。
虽然没有及时和大家分享项目的进度，但项目也一直在不断的更新，在得到大家的反馈问题或者一些好的建议的时候我也会第一时间进行修复和优化。争取给大家更好的使用体验和带来更高效的开发。
那下面就和大家分享一下最近AdminWork各个版本做了哪些比较重要的优化和功能调整吧~~
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 = ''
系统在获取 getMenuListByRoleId 地址的时候，发现不是真实的地址，就会加载 defaultRoutes 中的路由，以能进入系统的主页面，进行其它的开发工作
重要更新
以上是 ArcoWork 版本的最新升级内容，内容比较多，下面重点说一下比较重要的更新版本如下：
- v: 1.1.1
- v: 2.0.3 在 v2.0.3 版本中新增了一种布局方式
自2.0.3版本起，ArcoWork增加了上下分栏布局模式。也是应很多人的需求，预览如下：
现在代码地址已经全部开源在github 和 gitee 上了，如果您还不知道如何获取代码，请关注《知码前端》公众号，回复数字1，即可获得下载地址。
写在最后
由于本篇文章过长，所以其它版本的升级内容放到下一篇进行讲解。
