bug: 在ActivityBar之间来回切换，Sidebar内容卸载不及时导致出现残影

[resetsix]

Describe the bug

在ActivityBar选项之间来回切换，Sidebar内容卸载不及时导致出现残影。
第一个和第三个activityBar的内容是antd自定义组件，第二个是molecule内置组件。
不知道是antd与molecule兼容性问题还是什么性能问题导致卸载不及时。

下图是第一个activityBar的相关代码

Versions

• OS: win10
• Browser: Google Chrome 117.0.5938.89（正式版本） （64 位）
• Molecule: "@dtinsight/molecule": "^1.3.0",

To reproduce

• 链接

Expected

组件能及时卸载，不会在下一个组件出现时还留有上一个选项的残影。

Actually happening

[mortalYoung]

这个问题的原因是因为 Antd 的组件有设置 transition，导致部分组件会有一个延迟。这个问题我们在 Taier 里是通过如下 CSS 解决的：

https://github.com/DTStack/Taier/blob/ec5c522264672446790ffb642f94a29b07988222/taier-ui/src/styles/reset.scss#L123-L127

[resetsix]

这个问题的原因是因为 Antd 的组件有设置 transition，导致部分组件会有一个延迟。这个问题我们在 Taier 里是通过如下 CSS 解决的：

https://github.com/DTStack/Taier/blob/ec5c522264672446790ffb642f94a29b07988222/taier-ui/src/styles/reset.scss#L123-L127

赞，果然好使！困扰半天，我寻思也没写几行代码就出现卡顿问题啦QVQ。另外有一个小问题，就是activityBar图标点击不灵敏，Taier也存在这种问题。我想尝试通过调节activityBar区域的宽度以此来解决这个问题，但是不知道该如何调节

[mortalYoung]

就是activityBar图标点击不灵敏

我看了一下，确实是有这个问题。之前没注意到。这个问题并不是 activityBar 的区域太小导致的，而是因为有一个 ScrollBar 的存在，导致遮挡了。临时的解决方案应该可以如下：

.mo-scrollBar__track--hidden{
    pointer-events: none;
}

即在 scrollbar 的 track 隐藏的时候防止鼠标事件触发

[resetsix]

就是activityBar图标点击不灵敏

我看了一下，确实是有这个问题。之前没注意到。这个问题并不是 activityBar 的区域太小导致的，而是因为有一个 ScrollBar 的存在，导致遮挡了。临时的解决方案应该可以如下：

.mo-scrollBar__track--hidden{
    pointer-events: none;
}

即在 scrollbar 的 track 隐藏的时候防止鼠标事件触发

谢谢答复，解决啦。最后我还是想了解 activityBar 的宽度该如何调节哈哈

[mortalYoung]

activityBar 的宽度该如何调节哈哈

直接拖拽就可以调整了 0.0

[resetsix]

activityBar 的宽度该如何调节哈哈

直接拖拽就可以调整了 0.0

咦是我把 ActivityBar 和 SiderBar 弄反了吗？我看官网图的意思以为最左侧的是 ActivityBar ，其次右边是SiderBar。

我以为官网是下面这个意思

问题：最左侧的宽度该如何调节呢？

[mortalYoung]

不好意思 是我看错了。。

可以直接通过修改 .mo-activityBar 的 width 样式实现。。不过我们并没有考虑到会有修改 activityBar 的宽度的需求，所以目前我也不确定这么修改完后会不会遇到什么问题 0.0

[resetsix]

不好意思 是我看错了。。

可以直接通过修改 .mo-activityBar 的 width 样式实现。。不过我们并没有考虑到会有修改 activityBar 的宽度的需求，所以目前我也不确定这么修改完后会不会遇到什么问题 0.0

没关系。好的感谢

[mortalYoung]

这个 issues 关闭了哈，另外如果有兴趣可以来一个 PR 修复 #866