问题发现探讨

问题：平台菜单跳转失效

原因：平台采用微前端，多路由的架构，微应用内部hash路由发生变化时，未同步外部histroy路由。基座采用histroy路由，各个微应用内部采用hash路由，点击菜单时，无论是不是跨微应用，触发的都是histroy路由路径和params改变，路由的改变从而引起的mricoApp的data改变将微应用中hash路由替换为对应界面，当通过菜单方式进入指定页面，然后用非菜单方式跳离界面时，此时如果点击第一次的菜单，就会因为路由特性，相同路由不做操作。

解决：datachange中同步hsitroy路由或加入同步基座路由的事件。

问题：

1.全菜单维护在本地，新增功能菜单改完微应用要改基座菜单

2.（README：基座要求 *简单* *稳定* *轻量*）基座代码不够简单，轻量。

解决建议：

1.业务逻辑是用户---->菜单权限------>权限筛菜单，开发可以简便到用户---->获得对应菜单。将全菜单维护在数据库中，支持界面化添加菜单，平台做了通过角色控制菜单权限，分配用户角色，完全可以通过用户获取对应用户的全菜单。

2.现基座中有几十个微应用组件，其中都是标红的三个文件，上一步改的话menus那个文件就没有了，其余两个文件，就是基础路由加一个mircoapp组件，完全可以将几十个组件抽象为一个组件，根据通用路由进入该组件，然后获取对应route的前缀再通过usebusinessapp获取配置加载微应用，几十个微应用组件就都没有了。

理解：

1. Tab 删除选中上一次选中而不是之前一个，当前页面无菜单项，应该选中父菜单，无父菜单不选中（不算问题，只是与常规逻辑不同）

2. 菜单与tab应该同在基座，tab不应该跟着微应用走

3. tab组件删除tag时应该是有逻辑错误，菜单逻辑复杂，受路由，tab，多层计算等影响，左侧菜单初始化逻辑有问题，同步菜单,未覆盖全面。

（复现操作：

1.点击kbs多个菜单生成多个tab，从后往前删除tab，跳转异常

2.点击kbs中绩效，刷新界面，无法定位到指定菜单，左侧菜单为空

）

原因：

1. 我们的tab和其他多tab，例如谷歌浏览器的多tab，其实还是有些不同，我不知道是业务需求就是这样设计的还是什么。如果是就这样设计的那没事了。

2. 现在我们的多tab是单微应用的tab，写在每个微应用中的，跨应用就没有了。我觉得主要是失去了导航tab的实际意义，没有提供一致的导航体验，应该无论在哪个微应用中，看到的都是相同的顶层导航，这有助于保持整体应用的一致性和直观感。

3. 加载一个包含导航的基座相较于加载每个微应用自带的导航逻辑，减少了重复代码，性能也能有一点得到优化，然后集中的处理路由可以让应用间的跳转更加流畅，尤其在子应用之间切换时，基座层可以控制Tab的激活状态，协调各个微应用之间的交互和路由跳转逻辑，提供更加连贯的体验。

问题：contains属性与iconfont应用时不生效

示例：https://codesandbox.io/p/sandbox/useclickaway-bug-forked-ngt6qk?file=%2FApp.tsx%3A19%2C28

contains：JavaScript 中的 contains() 方法是 DOM API 的一部分，主要用于检查一个节点是否包含另一个节点，即判断一个元素是否是另一个元素的后代。这个方法的原理相对简单直观：它通过遍历 DOM 树，检查指定的节点是否是调用此方法的节点的子节点或后代节点。内部原理其实是类似虚拟dom树的递归对比方法来判断其父元素是否包含当前节点。

react中使用ahooks，useclickaway这个hooks，ref绑定图标外div上，点击图标时仍然触发回调函数。原因：其hook内部通过js api contains来判断点击的dom是否在ref内部，也就是ref.current.contains(event.target)来判断是否触发回调，因为绑定ref的dom元素内部的iconfont图标组件，由于点击状态的更新，导致父组件带动自组件的更新，iconfont组件内部会重新执行createIconFont函数，createIconFont作用是新建icontfont的实例，接收参数scriptUrl，函数内部会根据url动态创建script标签，引入js资源，然后渲染，所以点击之后每次的图标都不是之前的图标，自然ref.current.contains(event.target)这个判断就始终为false，触发回调。

解决：将createIconFont提出组件外

问题：缺少地图组件，虽然使用场景并不多，但是每次一旦有，都要重新开发。有时候涉及开发的人没有怎么接触过，虽然不难但是从头看文档也需要消耗很长时间。开发地图公共组件，实现基本地图的功能，如基础地图，聚合图层，信息弹窗，地图绘制框选，单点中心点等功能。能直接使用。

解决建议：我之前拿react + 高德，写过一套地图组件，如果需要的话，后续我这边这个用vue+腾讯再写一套。