feat(标签页): 实现多标签页组件功能
- 新增 TabBar 主组件，支持标签页展示和交互 - 新增 ContextMenu 右键菜单组件 - 实现圆角胶囊样式设计，渐变色激活态 - 支持点击标签切换路由 - 支持关闭标签功能，首页标签不可关闭 - 支持右键菜单：重新加载、关闭左侧/右侧/其他标签 - 添加流畅的过渡动画和 hover 效果
This commit is contained in:
gaoziman
parent
e8cacc2c7a
commit
2d63d8d5e4
71
src/components/TabBar/ContextMenu.tsx
Normal file
71
src/components/TabBar/ContextMenu.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import { Dropdown, Menu } from '@arco-design/web-react';
|
||||
import {
|
||||
IconRefresh,
|
||||
IconClose,
|
||||
IconLeft,
|
||||
IconRight,
|
||||
IconCopy,
|
||||
} from '@arco-design/web-react/icon';
|
||||
import { ContextMenuType } from '@/types/tabs';
|
||||
|
||||
interface ContextMenuProps {
|
||||
/** 右键点击的标签 key */
|
||||
targetKey: string;
|
||||
/** 是否可以关闭左侧 */
|
||||
canCloseLeft: boolean;
|
||||
/** 是否可以关闭右侧 */
|
||||
canCloseRight: boolean;
|
||||
/** 是否可以关闭其他 */
|
||||
canCloseOthers: boolean;
|
||||
/** 菜单操作回调 */
|
||||
onMenuClick: (type: ContextMenuType, key: string) => void;
|
||||
/** 子元素 */
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ContextMenu: React.FC<ContextMenuProps> = ({
|
||||
targetKey,
|
||||
canCloseLeft,
|
||||
canCloseRight,
|
||||
canCloseOthers,
|
||||
onMenuClick,
|
||||
children,
|
||||
}) => {
|
||||
const handleMenuClick = (key: string) => {
|
||||
onMenuClick(key as ContextMenuType, targetKey);
|
||||
};
|
||||
|
||||
const dropList = (
|
||||
<Menu onClickMenuItem={handleMenuClick}>
|
||||
<Menu.Item key={ContextMenuType.RELOAD}>
|
||||
<IconRefresh style={{ marginRight: 8 }} />
|
||||
重新加载
|
||||
</Menu.Item>
|
||||
<Menu.Item key={ContextMenuType.CLOSE_CURRENT}>
|
||||
<IconClose style={{ marginRight: 8 }} />
|
||||
关闭当前
|
||||
</Menu.Item>
|
||||
<Menu.Item key={ContextMenuType.CLOSE_LEFT} disabled={!canCloseLeft}>
|
||||
<IconLeft style={{ marginRight: 8 }} />
|
||||
关闭左侧
|
||||
</Menu.Item>
|
||||
<Menu.Item key={ContextMenuType.CLOSE_RIGHT} disabled={!canCloseRight}>
|
||||
<IconRight style={{ marginRight: 8 }} />
|
||||
关闭右侧
|
||||
</Menu.Item>
|
||||
<Menu.Item key={ContextMenuType.CLOSE_OTHERS} disabled={!canCloseOthers}>
|
||||
<IconCopy style={{ marginRight: 8 }} />
|
||||
关闭其他
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dropdown droplist={dropList} trigger="contextMenu" position="bl">
|
||||
{children}
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContextMenu;
|
||||
105
src/components/TabBar/index.module.less
Normal file
105
src/components/TabBar/index.module.less
Normal file
@ -0,0 +1,105 @@
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 0 16px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-border-3);
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-border-4);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
background-color: var(--color-fill-2);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-2);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.tab-item-active {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(var(--primary-6)) 0%,
|
||||
rgb(var(--primary-5)) 100%
|
||||
);
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(var(--primary-6), 0.3);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(var(--primary-5)) 0%,
|
||||
rgb(var(--primary-4)) 100%
|
||||
);
|
||||
box-shadow: 0 4px 12px rgba(var(--primary-6), 0.4);
|
||||
}
|
||||
|
||||
.tab-close {
|
||||
color: rgba(255, 255, 255, 80%);
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
border-radius: 50%;
|
||||
color: var(--color-text-3);
|
||||
transition: all 0.2s;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-1);
|
||||
background-color: var(--color-fill-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
178
src/components/TabBar/index.tsx
Normal file
178
src/components/TabBar/index.tsx
Normal file
@ -0,0 +1,178 @@
|
||||
import React from 'react';
|
||||
import { IconClose } from '@arco-design/web-react/icon';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { GlobalState } from '@/store';
|
||||
import { ContextMenuType } from '@/types/tabs';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import ContextMenu from './ContextMenu';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const TabBar: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const dispatch = useDispatch();
|
||||
const locale = useLocale();
|
||||
|
||||
const { tabs, activeKey } = useSelector((state: GlobalState) => state.tabs);
|
||||
|
||||
// 点击标签页切换路由
|
||||
const handleTabClick = (key: string) => {
|
||||
const targetTab = tabs.find((tab) => tab.key === key);
|
||||
if (targetTab) {
|
||||
dispatch({
|
||||
type: 'tabs/setActiveTab',
|
||||
payload: key,
|
||||
});
|
||||
history.push(targetTab.path);
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭标签页
|
||||
const handleTabClose = (e: React.MouseEvent, key: string) => {
|
||||
e.stopPropagation();
|
||||
const targetTab = tabs.find((tab) => tab.key === key);
|
||||
if (!targetTab || !targetTab.closable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetIndex = tabs.findIndex((tab) => tab.key === key);
|
||||
|
||||
dispatch({
|
||||
type: 'tabs/removeTab',
|
||||
payload: key,
|
||||
});
|
||||
|
||||
// 如果关闭的是当前激活的标签，需要切换到相邻标签
|
||||
if (activeKey === key && tabs.length > 1) {
|
||||
let nextTab;
|
||||
if (targetIndex < tabs.length - 1) {
|
||||
nextTab = tabs[targetIndex + 1];
|
||||
} else {
|
||||
nextTab = tabs[targetIndex - 1];
|
||||
}
|
||||
history.push(nextTab.path);
|
||||
}
|
||||
};
|
||||
|
||||
// 右键菜单操作
|
||||
const handleContextMenu = (type: ContextMenuType, targetKey: string) => {
|
||||
const targetTab = tabs.find((tab) => tab.key === targetKey);
|
||||
|
||||
if (!targetTab) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case ContextMenuType.RELOAD:
|
||||
// 重新加载页面
|
||||
window.location.reload();
|
||||
break;
|
||||
|
||||
case ContextMenuType.CLOSE_CURRENT:
|
||||
// 关闭当前标签
|
||||
if (targetTab.closable) {
|
||||
const e = new MouseEvent('click') as any;
|
||||
handleTabClose(e, targetKey);
|
||||
}
|
||||
break;
|
||||
|
||||
case ContextMenuType.CLOSE_LEFT:
|
||||
// 关闭左侧标签
|
||||
dispatch({
|
||||
type: 'tabs/closeLeftTabs',
|
||||
payload: targetKey,
|
||||
});
|
||||
break;
|
||||
|
||||
case ContextMenuType.CLOSE_RIGHT:
|
||||
// 关闭右侧标签
|
||||
dispatch({
|
||||
type: 'tabs/closeRightTabs',
|
||||
payload: targetKey,
|
||||
});
|
||||
break;
|
||||
|
||||
case ContextMenuType.CLOSE_OTHERS:
|
||||
// 关闭其他标签
|
||||
dispatch({
|
||||
type: 'tabs/closeOtherTabs',
|
||||
payload: targetKey,
|
||||
});
|
||||
history.push(targetTab.path);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 计算右键菜单的可用状态
|
||||
const getContextMenuProps = (targetKey: string) => {
|
||||
const targetIndex = tabs.findIndex((tab) => tab.key === targetKey);
|
||||
|
||||
// 检查左侧是否有可关闭的标签
|
||||
const canCloseLeft = tabs.slice(0, targetIndex).some((tab) => tab.closable);
|
||||
|
||||
// 检查右侧是否有可关闭的标签
|
||||
const canCloseRight = tabs
|
||||
.slice(targetIndex + 1)
|
||||
.some((tab) => tab.closable);
|
||||
|
||||
// 检查是否有其他可关闭的标签
|
||||
const canCloseOthers = tabs.some(
|
||||
(tab) => tab.key !== targetKey && tab.closable
|
||||
);
|
||||
|
||||
return {
|
||||
targetKey,
|
||||
canCloseLeft,
|
||||
canCloseRight,
|
||||
canCloseOthers,
|
||||
};
|
||||
};
|
||||
|
||||
// 如果没有标签页，不渲染
|
||||
if (!tabs || tabs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['tab-bar']}>
|
||||
<div className={styles['tab-list']}>
|
||||
{tabs.map((tab) => {
|
||||
const contextMenuProps = getContextMenuProps(tab.key);
|
||||
const isActive = activeKey === tab.key;
|
||||
|
||||
return (
|
||||
<ContextMenu
|
||||
key={tab.key}
|
||||
{...contextMenuProps}
|
||||
onMenuClick={handleContextMenu}
|
||||
>
|
||||
<div
|
||||
className={`${styles['tab-item']} ${
|
||||
isActive ? styles['tab-item-active'] : ''
|
||||
}`}
|
||||
onClick={() => handleTabClick(tab.key)}
|
||||
>
|
||||
<span className={styles['tab-title']}>
|
||||
{locale[tab.name] || tab.name}
|
||||
</span>
|
||||
{tab.closable && (
|
||||
<span
|
||||
className={styles['tab-close']}
|
||||
onClick={(e) => handleTabClose(e, tab.key)}
|
||||
>
|
||||
<IconClose />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</ContextMenu>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabBar;
|
||||
Loading…
Reference in New Issue
Block a user