fix: tab关闭时阻止冒泡

packages/app/src/pages/home/main/tab/item/index.module.css

@@ -15,3 +15,12 @@
 .tab-item-active {
   color: var(--primary-color);
 }
+
+.close {
+  border-radius: 50%;
+  transition: background 200ms linear;
+
+  &:hover {
+    background-color: #eee;
+  }
+}

packages/app/src/pages/home/main/tab/item/index.tsx

@@ -1,6 +1,6 @@
 import {tabStore} from '@stores';
 import css from './index.module.css';
-import {FC} from 'react';
+import {FC, MouseEvent} from 'react';
 import {useStore} from 'zustand';
 import classNames from 'classnames';
 import {useSortable} from '@dnd-kit/sortable';
@@ -27,7 +27,8 @@ const TabItem: FC<Props> = function ({id, label, onContentMenu}) {
     useSortable({id, attributes: {role: 'tab'}});
   const dispatch = useContextSection(context, state => state[1]);
 
-  function onClose() {
+  function onClose(e: MouseEvent) {
+    e.stopPropagation();
     Modal.confirm({
       title: '关闭标签',
       content: `你确定要关闭${label}吗？`,
@@ -68,6 +69,7 @@ const TabItem: FC<Props> = function ({id, label, onContentMenu}) {
           size='14'
           fill={id === activeKey ? 'var(--primary-color)' : '#ccc'}
           onClick={onClose}
+          className={css.close}
         />
       )}
     </li>