微前端改造细节-526互联

优化husky校验规则，添加代码提交校验，避免随意提交导致代码可读性降低。
给主应用添加了开发文档入口，方便在开发时查阅文档，提升开发效率。
优化了控制台的构建提示，更换为“?欢迎使用${blue("无界[Wujie]")}-极致的微前端框架”。
项目开启了Mock服务，当接口需要对接时候关闭相关服务即可，目前已经定位到相关代码位置。
配置了项目的基础配置，主应用导航栏使用水平布局（上下分层），同时隐藏标签页，子应用默认使用垂直布局（左右分层），主应用不允许修改布局，子应用开放修改（暂定）。
给主应用添加了接口请求地址设置，便于在开发和部署时生成不同的请求URL地址，在utils/http中添加baseURL设置。
替换了项目的默认用户头像。
对主应用主体内容区域的样式进行了调整，保证子应用和主应用页面能够显示完全，去除浏览器默认滚动条。
修复了部署后个性化设置按钮隐藏后，点击头像显示的下拉框内容换行的问题。
主子应用使用单点登录，主子应用使用同一个后台管理系统框架（pure-admin），主应用在加载子应用的时候将用户名、角色类型和accessToken传给子应用，子应用自动完成登录和重定向，同时，子应用可以单独运行，有独立的登录等完整功能。
主应用添加系统管理子应用入口，同时优化了加载逻辑，使用asyncRoute加载子系统路由，后续可以根据用户&主体进行动态区分。
排查发现之前的demo在别的电脑进入预览链接，子应用加载不出来，原因是入口URL使用的是localhost，运行的电脑未启动该子应用，改成局域网地址就可以访问了，如：192.168.1.1。
使用tailwindCSS原子化样式框架，重写了主应用的首页代码，熟悉了相关写法。
主应用引入无界生命周期、hostMap和credentialFetch等方法，同时注册了eventBus监听事件，方便子应用进行通信。
在主应用（Vue3）的全局变量（getCurrentInstance().appContext.config.globalProperties）中注入了$WujieVue的无界实例，便于在其他页面获取bus等工具。
成功注册了系统管理子应用，安排在本地的8080端口，主应用使用8848端口。
使用主应用框架和配置项为模版构建了系统管理子应用，去除了无界相关的设置，由主应用注入相关配置，子应用目前无需改造。
优化主应用和子应用联动的基础能力，在主应用点击切换为暗色模式时子应用获取监听的事件，同步进行切换，若子已为暗色模式，主为亮色模式，主切换时同步暗色模式更改（由toggle改为赋值）。
还联动了主题颜色的切换，修复了子应用初始化时菜单栏没有设置上主题的问题，触发原因未知导致html标签class中未添加layout-theme-xxx的类名，因此进行动态判断，如果window.__POWERED_BY_WUJIE__存在的话，则手动给html加上指定样式，保证子应用和主应用的主题保持一致。
隐藏了子应用在无界环境下色弱模式和灰色模式的设置按钮，默认关闭，如果需要这两个模式由主应用主动开启/应用即可，子应用开启会导致页面样式异常，故隐藏。
子应用重新进行 pnpm install 启用husky提交校验，将主应用和子应用使用到Sass-darken方法改为'Sass:color.adjust'方法，因为不通过eslint校验。
修复了主应用在移动端时导航栏仍呈现PC端样式导致显示不全的问题，放开主应用useResizeObserver方法中isMobile则禁用的规则，还修改根据屏幕宽度切换主题模式。
子应用也放开了，同时修复了子应用在无界环境下，移动端抽屉按钮点击失灵的方法，因为都用到了useResizeObserver的方法，查看源码发现其实现方式通过元素选择器进行判断，主子应用存在同样的元素，则取到了主应用元素的状态导致开启失败，给主应用的监听元素添加main-的前缀，则可以进行正确监听，主子应用都能正确打开对应的抽屉菜单。
修复了主应用在切换子应用的过程中主容器会出现滚动条的问题，排查是切换时默认使用到fade-transform的transition动画，去除了里面的transform样式并添加overflow为hidden即可。
在路由类型文件（router.d.ts）中添加了isPoweredByWujie用于判断该路由是否为无界子应用。
主&子应用同时开启打包时使用cdn替换本地库和Gzip&Brotli压缩，便于部署时进一步压缩打包体积。
修复了在PC端浏览器宽度按最小化时，子应用显示的折叠菜单栏和主应用的抽屉菜单栏相互遮挡的问题，提升了主应用的侧边栏显示权重。
优化了主子应用异常页面（403、404和500）的布局方式，在小屏幕下也能够正常显示不被遮挡。
优化了主应用进入子应用的入口页配置，取消子应用的跳转，采用子应用的redirect模块自动完成重定向功能，避免子应用页面出现闪烁的问题。
更改了主应用index.html的默认显示title和serverConfig中的Title参数。
子应用添加权限管理相关页面，配置了asyncRoutes和Mock相关的接口，现在能够正常显示相关页面，不过现在起到仅展示功能未接入相关接口，同时还需要后期设计。
全局使用iconify-icons图标，方便引入多种类型的图标，同时支持本地化图标和在线图标。
修复VSCode中Typescript提示“@/xxx/xxx”模块找不到或其相应的类型声明的问题，原因是使用IDE中使用的Typescript解析版本太高，切换为workspace指定的版本就不会报错了。
子应用启用@pureadmin/table组件，使用二次封装的el-table组件，支持列拖动、列表刷新和密度调整功能。
修复了子应用中el-popover定位异常的问题，原因是el-popover使用到的是popper.js，这个库是基于最外层的html标签进行定位的，对于webComponent中的shadowDom-html标签会进行忽略，解决方式给子应用的body表填添加了position:relative即可。
为了给予主子应用在移动端时一定的区分度，故在无界环境下，给子应用的导航栏添加系统名称并更换了抽屉的icon，去除最小宽度的限制，避免较小分辨率的手机导航栏显示不全的问题。
当子应用在无界环境点击侧边栏，子容器的高度定位出现问题，已修复。
优化了redirect组件的页面样式，在初次加载子应用的时候会进行重定向，给予用户一定的提示，避免以为是页面卡住了。
了解了关闭标签页的方式，在页面中引入useMultiTagsStoreHook().splice()方法即可关闭当前页，原本写了一个redirect的页面来做重定向发现已经有组件故舍弃。
给子应用全局做了无界判断，确保在无界环境和独立运行时显示对应的样式。
由于子应用在主应用运行时使用到了保活模式，导致即便是退出登录重新进入子应用仍保留原来的状态，故在退出登录时清理完毕后调用window.location.reload方法刷新页面将子应用销毁，另一种方式是通过子应用实例的destory方法但是执行后就再也打不开子应用了故采用刷新页面的方式。