FxTabs 标签页

多标签页组件，支持 谷歌 / 卡片 / 朴素 / 轻快 四种风格，内置左右滚动、滚轮响应、拖拽排序、右键菜单、固定标签（affix）与工具栏。状态逻辑抽离到 useTabs composable，组件本身只做渲染与事件转发。

基础用法（配合 useTabs）

<script setup lang="ts">
import { FxTabs, useTabs } from "@fx/layouts"

const {
  visibleTabs,
  active,
  removeTab,
  closeLeftTabs,
  closeRightTabs,
  closeOtherTabs,
  closeAllTabs,
  sortTabs,
  togglePin,
} = useTabs({
  initialTabs: [{ key: "/home", title: "首页", icon: "ep:data-analysis", affix: true }],
  maxCount: 10,
  persist: true,
})
</script>

<template>
  <FxTabs
    v-model:active="active"
    :tabs="visibleTabs"
    style-type="chrome"
    :draggable="true"
    :wheelable="true"
    @close="removeTab"
    @close-left="closeLeftTabs"
    @close-right="closeRightTabs"
    @close-other="closeOtherTabs"
    @close-all="closeAllTabs"
    @sort="sortTabs"
    @pin="togglePin"
    @unpin="togglePin"
  />
</template>

Attributes（核心）

参数	说明	类型	默认值
tabs	标签列表（建议传 useTabs().visibleTabs）	FxTabItem[]	[]
active (v-model)	当前激活 key	string	""
style-type	标签页风格	chrome | card | plain | brisk	card
draggable	是否启用拖拽排序	boolean	true
wheelable	是否响应纵向滚轮	boolean	true
show-more / show-refresh / show-maximize	工具栏按钮显隐	boolean	true
height	标签栏高度（px）	number	38

Events（核心）

事件名	说明
update:active / click / close / close-left / close-right / close-other / close-all	标签交互
sort	拖拽排序 (oldIndex, newIndex)
pin / unpin	固定 / 取消固定
reload / toggle-maximize	刷新 / 最大化

四种风格

风格	视觉
chrome	谷歌浏览器：SVG 弧形圆角底，标签重叠
card	独立圆角卡片，边框
plain	仅左右分隔线
brisk	底部主色下划线

注意事项

• 组件只负责渲染与事件转发，路由跳转 / 刷新实现由消费方在事件回调中处理
• 完整 Attributes / Events / Exposes / useTabs 参数详见包内 packages/layout-ui/src/fxTabs/README.md