90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
|
import { defineComponent, type PropType } from 'vue';
|
|||
|
|
import { message } from 'ant-design-vue';
|
|||
|
|
import type { TabView } from '@/stores/tabsStore';
|
|||
|
|
import styles from './PageTabs.module.less';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Chrome 风格的页面标签栏组件
|
|||
|
|
* 参考 VBEN tabs-chrome 的视觉设计：
|
|||
|
|
* - 标签重叠排列（负 margin）
|
|||
|
|
* - 激活态：圆角背景 + SVG 底部曲线
|
|||
|
|
* - hover 态：浅灰背景
|
|||
|
|
* - 标签间分隔线
|
|||
|
|
* - 关闭按钮
|
|||
|
|
*/
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: 'PageTabs',
|
|||
|
|
props: {
|
|||
|
|
/** 标签列表 */
|
|||
|
|
tabs: { type: Array as PropType<TabView[]>, required: true },
|
|||
|
|
/** 当前激活 key */
|
|||
|
|
activeKey: { type: String, required: true },
|
|||
|
|
/** 关闭标签 */
|
|||
|
|
onClose: { type: Function as PropType<(key: string) => void>, default: undefined },
|
|||
|
|
/** 切换标签 */
|
|||
|
|
onChange: { type: Function as PropType<(key: string) => void>, default: undefined },
|
|||
|
|
},
|
|||
|
|
setup(props) {
|
|||
|
|
const handleClick = (key: string) => {
|
|||
|
|
if (key !== props.activeKey && props.onChange) {
|
|||
|
|
props.onChange(key);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClose = (key: string, e: Event) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
if (props.tabs.length <= 1) {
|
|||
|
|
message.warning('至少保留一个标签');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (props.onClose) {
|
|||
|
|
props.onClose(key);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return () => (
|
|||
|
|
<div class={styles.tabsWrap}>
|
|||
|
|
{props.tabs.map((tab, i) => {
|
|||
|
|
const isActive = tab.path === props.activeKey;
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={tab.path}
|
|||
|
|
class={[styles.tabItem, isActive ? styles.active : '', styles.draggable].join(' ')}
|
|||
|
|
onClick={() => handleClick(tab.path)}
|
|||
|
|
>
|
|||
|
|
{/* 分隔线：第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
|
|||
|
|
<div
|
|||
|
|
v-show={i !== 0 && !isActive && props.tabs[i - 1]?.path !== props.activeKey}
|
|||
|
|
class={styles.divider}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Chrome 风格背景：激活态 */}
|
|||
|
|
<div class={[styles.tabBg, isActive ? styles.tabBgActive : ''].join(' ')}>
|
|||
|
|
<div class={styles.tabBgInner} />
|
|||
|
|
{/* 左下曲线 */}
|
|||
|
|
<svg class={styles.tabBgCurveBefore} height="7" width="7">
|
|||
|
|
<path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
|
|||
|
|
</svg>
|
|||
|
|
{/* 右下曲线 */}
|
|||
|
|
<svg class={styles.tabBgCurveAfter} height="7" width="7">
|
|||
|
|
<path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class={styles.tabTitleCon}>
|
|||
|
|
{/* 标签文字（flex 子元素，与关闭按钮同行） */}
|
|||
|
|
<span class={styles.tabTitle}>{tab.title}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 关闭按钮（flex 子元素，不参与 shrink） */}
|
|||
|
|
<span class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
|
|||
|
|
✕
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
});
|