feat: 添加全局tab

Author: Ohh-889

src/layouts/modules/global-tab/GlobalTab.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const GlobalTab = () => {
+  return <div>GlobalTab</div>;
+};
+
+export default GlobalTab;

src/layouts/modules/global-tab/TabContextMenu.tsx

@@ -0,0 +1,133 @@
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+
+import { clearLeftTabs, clearRightTabs, clearTabs, removeTab } from '@/store/slice/tab';
+
+interface ContextMenuProps {
+  active: boolean;
+  children: React.ReactNode;
+  darkMode: boolean;
+  disabledKeys?: App.Global.DropdownKey[];
+  excludeKeys?: App.Global.DropdownKey[];
+  i18nKey: App.Global.Tab['i18nKey'];
+  locale: App.I18n.LangType;
+  mode: UnionKey.ThemeTabMode;
+  tabId: string;
+}
+
+interface DropdownOption {
+  disabled?: boolean;
+  icon: string;
+  key: App.Global.DropdownKey;
+  label: string;
+}
+
+function getMenu(options: DropdownOption[]) {
+  const items: MenuProps['items'] = options.map(opt => ({
+    disabled: opt.disabled,
+    icon: (
+      <SvgIcon
+        className="text-icon"
+        icon={opt.icon}
+      />
+    ),
+    key: opt.key,
+    label: opt.label
+  }));
+
+  return items;
+}
+
+function arePropsEqual(oldProps: Readonly<ContextMenuProps>, newProps: Readonly<ContextMenuProps>) {
+  if (oldProps.active !== newProps.active) return false;
+  if (oldProps.darkMode !== newProps.darkMode) return false;
+  if (oldProps.i18nKey !== newProps.i18nKey) return false;
+  if (oldProps.mode !== newProps.mode) return false;
+  if (oldProps.locale !== newProps.locale) return false;
+  if (oldProps.tabId !== newProps.tabId) return false;
+  if (oldProps.excludeKeys?.length !== newProps.excludeKeys?.length) return false;
+
+  const result = newProps.disabledKeys?.every((key, index) => key === oldProps.disabledKeys?.[index]);
+
+  return result || false;
+}
+
+const ContextMenu: FC<ContextMenuProps> = memo(({ children, disabledKeys = [], excludeKeys = [], tabId }) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const options = () => {
+    const opts: DropdownOption[] = [
+      {
+        icon: 'ant-design:close-outlined',
+        key: 'closeCurrent',
+        label: t('dropdown.closeCurrent')
+      },
+      {
+        icon: 'ant-design:column-width-outlined',
+        key: 'closeOther',
+        label: t('dropdown.closeOther')
+      },
+      {
+        icon: 'mdi:format-horizontal-align-left',
+        key: 'closeLeft',
+        label: t('dropdown.closeLeft')
+      },
+      {
+        icon: 'mdi:format-horizontal-align-right',
+        key: 'closeRight',
+        label: t('dropdown.closeRight')
+      },
+      {
+        icon: 'ant-design:line-outlined',
+        key: 'closeAll',
+        label: t('dropdown.closeAll')
+      }
+    ];
+
+    return opts
+      .filter(opt => !excludeKeys.includes(opt.key))
+      .map(opt => {
+        if (disabledKeys.includes(opt.key)) {
+          opt.disabled = true;
+        }
+        return opt;
+      });
+  };
+
+  const menu = getMenu(options());
+
+  const dropdownAction: Record<App.Global.DropdownKey, () => void> = {
+    closeAll() {
+      dispatch(clearTabs());
+    },
+    closeCurrent() {
+      dispatch(removeTab(tabId));
+    },
+    closeLeft() {
+      dispatch(clearLeftTabs(tabId));
+    },
+    closeOther() {
+      dispatch(clearTabs([tabId]));
+    },
+    closeRight() {
+      dispatch(clearRightTabs(tabId));
+    }
+  };
+
+  const handleClick: MenuProps['onClick'] = e => {
+    dropdownAction[e.key as App.Global.DropdownKey]();
+  };
+
+  return (
+    <Dropdown
+      menu={{ items: menu, onClick: handleClick }}
+      trigger={['contextMenu']}
+    >
+      {children}
+    </Dropdown>
+  );
+}, arePropsEqual);
+
+export default ContextMenu;

src/layouts/modules/global-tab/shared.ts

@@ -0,0 +1,9 @@
+/**
+ * Filter tabs by id
+ *
+ * @param tabId
+ * @param tabs
+ */
+export function filterTabsById(tabId: string, tabs: App.Global.Tab[]) {
+  return tabs.filter(tab => tab.id !== tabId);
+}

src/layouts/modules/global-tab/tabHooks.ts

@@ -0,0 +1,91 @@
+import { useRouter } from '@/features/router';
+import { selectActiveTabId, selectHomeTab, selectTabs, setActiveTabId, setTabs } from '@/store/slice/tab';
+
+import { filterTabsById } from './shared';
+
+export function useTabActions() {
+  const dispatch = useAppDispatch();
+
+  const tabs = useAppSelector(selectTabs);
+
+  const { navigate } = useRouter();
+
+  const activeTabId = useAppSelector(selectActiveTabId);
+
+  const homeTab = useAppSelector(selectHomeTab);
+
+  /**
+   * 更新标签页
+   *
+   * @param newTabs
+   */
+  function updateTabs(newTabs: App.Global.Tab[]) {
+    dispatch(setTabs(newTabs));
+  }
+
+  /**
+   * 切换激活的标签页
+   *
+   * @param tabId
+   */
+  function changeActiveTabId(tabId: string) {
+    dispatch(setActiveTabId(tabId));
+  }
+
+  /**
+   * 根据标签页切换路由
+   *
+   * @param tab
+   */
+  async function switchRouteByTab(tab: App.Global.Tab) {
+    navigate(tab.fullPath);
+
+    changeActiveTabId(tab.id);
+  }
+
+  /**
+   * 清除左侧标签页
+   *
+   * @param tabId
+   */
+  function clearLeftTabs(tabId: string) {
+    const tabIndex = tabs.findIndex(tab => tab.id === tabId);
+
+    if (tabIndex === -1) return;
+
+    const restTabs = tabs.slice(tabIndex);
+
+    dispatch(setTabs(restTabs));
+  }
+
+  /**
+   * 删除标签页
+   *
+   * @param tabId
+   */
+  function removeTab(tabId: string) {
+    const isRemoveActiveTab = activeTabId === tabId;
+
+    const updatedTabs = filterTabsById(tabId, tabs);
+
+    if (!isRemoveActiveTab) {
+      // 如果删除的不是激活的标签页，则更新标签页
+      updateTabs(updatedTabs);
+    } else {
+      // 如果删除的是激活的标签页，则切换到最后一个标签页或者首页标签页
+      const activeTab = updatedTabs.at(-1) || homeTab;
+
+      if (activeTab) {
+        switchRouteByTab(activeTab);
+
+        updateTabs(updatedTabs);
+      }
+    }
+  }
+
+  return {
+    clearLeftTabs,
+    removeTab,
+    updateTabs
+  };
+}