update: tab item增加关闭按钮

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

@@ -4,7 +4,6 @@ import {useContextSection} from '@hooks';
 import {context} from '../../context';
 import TabItem from './item';
 import {ShowContextMenuParams} from 'react-contexify';
-import {useIndicator} from './hooks';
 
 type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> &
   Partial<Pick<Type, Key>>;
@@ -17,7 +16,6 @@ type Props = {
 
 const Tabs: FC<Props> = function ({onTabItemContentMenu}) {
   const tabs = useContextSection(context, state => state[0]);
-  const style = useIndicator();
 
   return (
     <ul className={css.tabList} id='p_tab_list'>
@@ -32,7 +30,7 @@ const Tabs: FC<Props> = function ({onTabItemContentMenu}) {
         );
       })}
 
-      <i className={css.tabIndicator} style={style} />
+      {/* <i className={css.tabIndicator} style={style} /> */}
     </ul>
   );
 };

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

@@ -1,8 +1,15 @@
 .tab-item {
+  display: flex;
   flex-shrink: 0;
-  padding: 10px 16px;
+  align-items: center;
+  padding: 10px 8px;
   font-size: 14px;
   cursor: pointer;
+
+  & :global(.i-icon) {
+    margin-left: 8px;
+    cursor: pointer;
+  }
 }
 
 .tab-item-active {

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

@@ -5,6 +5,10 @@ import {useStore} from 'zustand';
 import classNames from 'classnames';
 import {useSortable} from '@dnd-kit/sortable';
 import {ShowContextMenuParams} from 'react-contexify';
+import {CloseOne} from '@icon-park/react';
+import {useContextSection} from '@hooks';
+import {context} from '@pages/home/context';
+import {Modal} from 'antd';
 
 type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> &
   Partial<Pick<Type, Key>>;
@@ -18,9 +22,20 @@ type Props = {
 };
 
 const TabItem: FC<Props> = function ({id, label, onContentMenu}) {
-  const {key: activeKey, dispatch} = useStore(tabStore);
+  const {key: activeKey, dispatch: setActiveKey} = useStore(tabStore);
   const {setNodeRef, transform, transition, attributes, listeners} =
     useSortable({id, attributes: {role: 'tab'}});
+  const dispatch = useContextSection(context, state => state[1]);
+
+  function onClose() {
+    Modal.confirm({
+      title: '关闭标签',
+      content: `你确定要关闭${label}吗？`,
+      onOk() {
+        dispatch({type: 'REMOVE', payload: id});
+      },
+    });
+  }
 
   return (
     <li
@@ -35,7 +50,7 @@ const TabItem: FC<Props> = function ({id, label, onContentMenu}) {
       className={classNames(css.tabItem, {
         [css.tabItemActive]: id === activeKey,
       })}
-      onClick={() => dispatch(id)}
+      onClick={() => setActiveKey(id)}
       ref={setNodeRef}
       {...attributes}
       {...listeners}
@@ -47,6 +62,14 @@ const TabItem: FC<Props> = function ({id, label, onContentMenu}) {
       }}
     >
       {label}
+      {id !== '-1' && (
+        <CloseOne
+          theme='filled'
+          size='14'
+          fill={id === activeKey ? 'var(--primary-color)' : '#ccc'}
+          onClick={onClose}
+        />
+      )}
     </li>
   );
 };