BizTabsNav 多标签页导航

中后台主框架的页签栏（Chrome 页签形态）：激活项白底浮起、关闭 / 批量关闭（当前 / 其他 / 左侧 / 右侧 / 全部，affix 固定项保留）、右键菜单（重新加载 / 关闭系全量，menus 可裁剪）、before-close 异步关闭拦截（脏检查）、原生拖拽排序、超出横向滚动 + 滚轮平移。

本组件由 BizTabsNav（纯页签条 UI：Chrome 页签视觉 / 拖拽 / 溢出滚动）与 BizPageTabs（多页签管理语义：affix 固定 / beforeClose 拦截 / menus 裁剪）合并升级而来，是中后台多标签页导航的唯一组件。原 refresh 事件更名为 reload，原 BizPageTabs 的 expose close(key) 更名为 closeTab(key)，其余能力全部保留。

组件只负责页签栏本身，不接管路由与页面缓存：tabs 列表由父级维护（v-model:tabs 双向同步），与 <router-view> + <keep-alive> 配合即可组成多页签主框架（见下方 结合 BizLayout）。

基础用法

工作台

工单中心

订单详情 #1001

当前页：工作台

v-model 激活页签，v-model:tabs 双向同步列表：关闭页签后组件计算新列表（激活项被关时自动切换到相邻页签）并回写，父级零逻辑。

<script setup lang="ts">
/** 场景：基础受控——v-model 激活 + v-model:tabs 列表双向同步（关闭后自动回写） */
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

let seed = 1002
const active = ref<string | number>('workbench')
const tabs = ref<BizTabsNavItem[]>([
  { key: 'workbench', title: '工作台', affix: true, closable: false },
  { key: 'ticket', title: '工单中心' },
  { key: 'order-1001', title: '订单详情 #1001' },
])

const activeTitle = computed(
  () => tabs.value.find((t) => t.key === active.value)?.title ?? '（无激活页签）'
)

/** 模拟路由跳转：新增页签并激活（已存在则直接激活） */
const openPage = (): void => {
  seed += 1
  const key = `order-${seed}`
  if (tabs.value.some((t) => t.key === key)) {
    active.value = key
    return
  }
  tabs.value = [...tabs.value, { key, title: `订单详情 #${seed}` }]
  active.value = key
}

const onClose = (key: string | number): void => {
  ElMessage.info(`已关闭页签：${String(key)}`)
}
</script>

<template>
  <div>
    <BizTabsNav v-model="active" v-model:tabs="tabs" @close="onClose" />
    <div class="page">
      当前页：{{ activeTitle }}
      <ElButton size="small" style="margin-left: 12px" @click="openPage">模拟打开订单详情</ElButton>
    </div>
  </div>
</template>

<style scoped>
.page {
  padding: 16px;
  font-size: 14px;
  color: var(--el-text-color-regular);
  border: 1px dashed var(--el-border-color);
  border-top: none;
}
</style>

显示代码

关闭自动激活相邻页签

工作台

用户管理

工单 #01

工单 #02

工单 #03

当前激活：工单 #02

关闭「工单 #02」后自动激活右邻「工单 #03」；关闭最右侧的「工单 #03」则回退左邻； 全部关完只剩固定项时激活「工作台」。也可直接点页签上的关闭按钮验证。

激活项被关闭后优先切换到右邻、退而左邻；只剩固定项时回落到固定项。支持程序化 closeTab(key)。

<script setup lang="ts">
/** 场景：关闭自动激活相邻页签——激活项被关闭后优先切换到右邻、退而左邻 */
import { ref } from 'vue'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavInstance, BizTabsNavItem } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'workbench', title: '工作台', affix: true, closable: false },
  { key: 'user', title: '用户管理' },
  { key: 'ticket-01', title: '工单 #01' },
  { key: 'ticket-02', title: '工单 #02' },
  { key: 'ticket-03', title: '工单 #03' },
])
const active = ref<string | number>('ticket-02')
const navRef = ref<BizTabsNavInstance>()

/** 程序化关闭当前激活页签，观察相邻页签自动补位 */
const closeActive = (): void => {
  if (active.value === undefined) return
  void navRef.value?.closeTab(active.value)
}
</script>

<template>
  <div>
    <BizTabsNav ref="navRef" v-model="active" v-model:tabs="tabs" />
    <div class="tip">
      当前激活：<b>{{ tabs.find((t) => t.key === active)?.title ?? '（无）' }}</b>
      <ElButton size="small" style="margin-left: 12px" @click="closeActive">关闭当前激活页签</ElButton>
      <p>
        关闭「工单 #02」后自动激活右邻「工单 #03」；关闭最右侧的「工单 #03」则回退左邻；
        全部关完只剩固定项时激活「工作台」。也可直接点页签上的关闭按钮验证。
      </p>
    </div>
  </div>
</template>

<style scoped>
.tip {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  border: 1px dashed var(--el-border-color);
  border-top: none;
  line-height: 1.8;
}
</style>

显示代码

固定页签（affix）

首页

待办事项

通知公告

审批中心

「首页」由 affix-keys 声明为固定页签（显示圆点标记、无关闭按钮）： 关闭当前 / 其他 / 左侧 / 右侧 / 全部均不会关掉它，关闭全部后自动激活首页。 当前固定项：（无）

item.affix 与 affix-keys 双通道声明固定页签（显示圆点标记、无关闭按钮）：关闭当前 / 其他 / 左侧 / 右侧 / 全部均保留固定项，关闭全部后自动激活第一个固定项。

<script setup lang="ts">
/** 场景：affix 固定页签——item.affix 与 affix-keys 双通道，任何关闭操作均保留固定项 */
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavInstance, BizTabsNavItem } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'home', title: '首页' },
  { key: 'todo', title: '待办事项' },
  { key: 'notice', title: '通知公告' },
  { key: 'approval', title: '审批中心' },
])
/** 首页经 affix-keys 声明为固定页签（等价于在 item 上写 affix: true） */
const affixKeys = ['home']
const active = ref<string | number>('todo')
const navRef = ref<BizTabsNavInstance>()

const affixTitles = computed(() => tabs.value.filter((t) => t.affix).map((t) => t.title).join('、'))

const closeAll = (): void => {
  void navRef.value?.closeAll()
}

const onCloseAll = (rest: BizTabsNavItem[]): void => {
  ElMessage.success(`已关闭全部可关页签，保留：${rest.map((t) => t.title).join('、') || '（无）'}`)
}
</script>

<template>
  <div>
    <BizTabsNav
      ref="navRef"
      v-model="active"
      v-model:tabs="tabs"
      :affix-keys="affixKeys"
      @close-all="onCloseAll"
    />
    <div class="tip">
      <ElButton size="small" @click="closeAll">关闭全部可关页签</ElButton>
      <p>
        「首页」由 <code>affix-keys</code> 声明为固定页签（显示圆点标记、无关闭按钮）：
        关闭当前 / 其他 / 左侧 / 右侧 / 全部均不会关掉它，关闭全部后自动激活首页。
        当前固定项：{{ affixTitles || '（无）' }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.tip {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  border: 1px dashed var(--el-border-color);
  border-top: none;
  line-height: 1.8;
}
</style>

显示代码

右键菜单全量与裁剪

在任意页签上点击鼠标右键：固定项「首页」的关闭类菜单为置灰禁用

首页

数据看板

工单中心

用户管理

系统设置

menus 裁剪版（仅「重新加载 / 关闭当前」）：

首页

数据看板

工单中心

右键页签：重新加载 / 关闭当前 / 关闭其他 / 关闭左侧 / 关闭右侧 / 关闭全部；固定项对应的关闭动作自动置灰禁用。menus 属性可裁剪菜单项，context-menu=false 可整体关闭。

<script setup lang="ts">
/** 场景：右键菜单全量——重新加载/关闭当前/其他/左侧/右侧/全部，固定项对应动作自动置灰，menus 可裁剪 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem, BizTabsNavMenuAction } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'home', title: '首页', affix: true, closable: false },
  { key: 'board', title: '数据看板' },
  { key: 'ticket', title: '工单中心' },
  { key: 'user', title: '用户管理' },
  { key: 'system', title: '系统设置' },
])
const active = ref<string | number>('ticket')

/** 裁剪版：独立一份页签，仅保留「重新加载 / 关闭当前」两项 */
const trimmedTabs = ref<BizTabsNavItem[]>([
  { key: 'home', title: '首页', affix: true, closable: false },
  { key: 'board', title: '数据看板' },
  { key: 'ticket', title: '工单中心' },
])
const trimmedActive = ref<string | number>('board')
const trimmedMenus: BizTabsNavMenuAction[] = ['reload', 'close']

const onReload = (key: string | number): void => {
  // keep-alive 场景：父级将内容区 :key 拼上刷新戳即可强制重建
  ElMessage.success(`重新加载：${String(key)}（父级换 :key 重建页面）`)
}
</script>

<template>
  <div>
    <ElAlert title="在任意页签上点击鼠标右键：固定项「首页」的关闭类菜单为置灰禁用" type="info" :closable="false" style="margin-bottom: 10px" />
    <BizTabsNav v-model="active" v-model:tabs="tabs" @reload="onReload" />

    <div class="sub">menus 裁剪版（仅「重新加载 / 关闭当前」）：</div>
    <BizTabsNav v-model="trimmedActive" v-model:tabs="trimmedTabs" :menus="trimmedMenus" @reload="onReload" />
  </div>
</template>

<style scoped>
.sub {
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

关闭拦截（脏检查）

首页

商品编辑（草稿）

公告编辑（草稿）

操作日志

before-close 返回 boolean | Promise<boolean>，返回 false 取消关闭；单个关闭与批量关闭（其他 / 左侧 / 右侧 / 全部）均逐项询问，未放行的页签保留。

<script setup lang="ts">
/** 场景：before-close 异步关闭拦截——脏检查模拟，确认才关闭、取消则保留（批量关闭同样逐项询问） */
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

/** 脏页签集合：模拟编辑中未保存的页面 */
const dirtyKeys = new Set<string>(['draft-goods', 'draft-article'])
const tabs = ref<BizTabsNavItem[]>([
  { key: 'home', title: '首页', affix: true, closable: false },
  { key: 'draft-goods', title: '商品编辑（草稿）' },
  { key: 'draft-article', title: '公告编辑（草稿）' },
  { key: 'log', title: '操作日志' },
])
const active = ref<string | number>('draft-goods')

/**
 * 关闭前拦截：仅脏页签弹确认框（异步 Promise<boolean>），
 * 确认返回 true 关闭并清除脏标记，取消返回 false 保留页签。
 */
const beforeClose = (key: string | number): Promise<boolean> => {
  if (!dirtyKeys.has(String(key))) return Promise.resolve(true)
  const title = tabs.value.find((t) => t.key === key)?.title ?? String(key)
  return ElMessageBox.confirm(`「${title}」存在未保存的内容，确定关闭？`, '未保存提醒', {
    type: 'warning',
    confirmButtonText: '放弃修改并关闭',
    cancelButtonText: '继续编辑',
  })
    .then(() => {
      dirtyKeys.delete(String(key))
      ElMessage.success(`已关闭：${title}`)
      return true
    })
    .catch(() => {
      ElMessage.info(`已取消关闭，保留：${title}`)
      return false
    })
}
</script>

<template>
  <BizTabsNav v-model="active" v-model:tabs="tabs" :before-close="beforeClose" />
</template>

显示代码

拖拽排序

首页

用户管理

工单中心

数据看板

系统设置

按住页签左右拖动即可调整顺序（拖动半透明、落点显示蓝色指示线）；排序结果回写 v-model:tabs 并外抛 sort 事件。
当前顺序：首页 → 用户管理 → 工单中心 → 数据看板 → 系统设置

draggable 开启原生 DnD 拖拽排序（零第三方依赖）；排序结果经 update:tabs 回写并外抛 sort 事件。

<script setup lang="ts">
/** 场景：拖拽排序——原生 DnD 零依赖，排序后经 update:tabs 回写并外抛 sort */
import { computed, ref } from 'vue'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'home', title: '首页', affix: true, closable: false },
  { key: 'user', title: '用户管理' },
  { key: 'ticket', title: '工单中心' },
  { key: 'board', title: '数据看板' },
  { key: 'system', title: '系统设置' },
])
const active = ref<string | number>('user')

const order = computed(() => tabs.value.map((t) => t.title).join(' → '))
</script>

<template>
  <div>
    <BizTabsNav v-model="active" v-model:tabs="tabs" draggable />
    <div class="tip">
      按住页签左右拖动即可调整顺序（拖动半透明、落点显示蓝色指示线）；排序结果回写
      <code>v-model:tabs</code> 并外抛 <code>sort</code> 事件。<br />
      当前顺序：{{ order }}
    </div>
  </div>
</template>

<style scoped>
.tip {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  border: 1px dashed var(--el-border-color);
  border-top: none;
  line-height: 1.8;
}
</style>

显示代码

事件日志

首页

数据看板

工单中心

• 切换 / 关闭 / 右键重新加载 / 拖拽排序，事件日志在此显示

change / tab-click / close / close-all / reload / sort / update:tabs 事件联动的完整日志。

<script setup lang="ts">
/** 场景：事件日志——update:tabs / change / tab-click / close / close-all / reload / sort 全量联动 */
import { ref } from 'vue'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'home', title: '首页', affix: true, closable: false },
  { key: 'board', title: '数据看板' },
  { key: 'ticket', title: '工单中心' },
])
const active = ref<string | number>('board')
const logs = ref<string[]>([])

const push = (text: string): void => {
  logs.value = [`${new Date().toLocaleTimeString()} · ${text}`, ...logs.value].slice(0, 8)
}
</script>

<template>
  <div>
    <BizTabsNav
      v-model="active"
      v-model:tabs="tabs"
      draggable
      @update:tabs="(next) => push(`update:tabs：剩 ${next.length} 个页签`)"
      @change="(key) => push(`change：激活 ${String(key)}`)"
      @tab-click="(key) => push(`tab-click：点击 ${String(key)}`)"
      @close="(key) => push(`close：关闭 ${String(key)}`)"
      @close-all="(rest) => push(`close-all：剩余 ${rest.length} 个固定页签`)"
      @reload="(key) => push(`reload：重新加载 ${String(key)}`)"
      @sort="(next) => push(`sort：${next.map((t) => t.title).join('→')}`)"
    />
    <ul class="logs">
      <li v-if="logs.length === 0">切换 / 关闭 / 右键重新加载 / 拖拽排序，事件日志在此显示</li>
      <li v-for="(log, i) in logs" :key="i">{{ log }}</li>
    </ul>
  </div>
</template>

<style scoped>
.logs {
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  border: 1px dashed var(--el-border-color);
  border-top: none;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.9;
}
</style>

显示代码

页签图标

数据看板

工单中心

通知公告

操作手册

字体图标页签

无图标页签

icon 支持组件对象与字体 class 字符串（iconfont 项目）双通道；固定项显示圆点标记。

<script setup lang="ts">
/** 场景：页签图标双通道——组件对象（@element-plus/icons-vue）与字体 class 字符串（iconfont） */
import { ref } from 'vue'
import { Bell, DataAnalysis, Document, Tickets } from '@element-plus/icons-vue'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'board', title: '数据看板', icon: DataAnalysis, affix: true, closable: false },
  { key: 'ticket', title: '工单中心', icon: Tickets },
  { key: 'notice', title: '通知公告', icon: Bell },
  { key: 'doc', title: '操作手册', icon: Document },
  { key: 'font', title: '字体图标页签', icon: 'demo-iconfont' },
  { key: 'plain', title: '无图标页签' },
])
const active = ref<string | number>('board')
</script>

<template>
  <BizTabsNav v-model="active" v-model:tabs="tabs" />
</template>

<style>
/* 模拟 iconfont 字体图标通道：icon 传字体 class 字符串（真实项目接 iconfont.cn） */
.demo-iconfont::before {
  content: '\25C6';
  font-size: 12px;
  font-style: normal;
}
</style>

显示代码

全局不可关闭

经营总览（常驻）

临时分析页 1

临时分析页 2

临时分析页 3

全局 closable=false 关闭按钮全部隐藏；仅单项声明 closable: true 的临时分析页放行（悬停可见关闭按钮）。

closable=false 全局隐藏关闭按钮，单项 closable=true 白名单放行（临时页可关）。

<script setup lang="ts">
/** 场景：全局不可关闭——closable=false 隐藏全部关闭按钮，单项 closable=true 白名单放行 */
import { ref } from 'vue'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'overview', title: '经营总览（常驻）', closable: false },
  { key: 'temp-analysis-1', title: '临时分析页 1', closable: true },
  { key: 'temp-analysis-2', title: '临时分析页 2', closable: true },
  { key: 'temp-analysis-3', title: '临时分析页 3', closable: true },
])
const active = ref<string | number>('overview')
</script>

<template>
  <div>
    <BizTabsNav v-model="active" v-model:tabs="tabs" :closable="false" />
    <div class="tip">
      全局 <code>closable=false</code> 关闭按钮全部隐藏；仅单项声明 <code>closable: true</code> 的临时分析页放行（悬停可见关闭按钮）。
    </div>
  </div>
</template>

<style scoped>
.tip {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  border: 1px dashed var(--el-border-color);
  border-top: none;
  line-height: 1.8;
}
</style>

显示代码

溢出横向滚动

监控点-01

监控点-02

监控点-03

监控点-04

监控点-05

监控点-06

监控点-07

监控点-08

监控点-09

监控点-10

监控点-11

监控点-12

监控点-13

监控点-14

监控点-15

监控点-16

监控点-17

监控点-18

页签超出宽度后自动横向滚动：在页签栏上滚动鼠标滚轮平移； 激活变化时该页签自动滚入视口（点击「跳到最后一个」体验）； 右键可「关闭右侧 / 关闭其他」批量清理。 当前 18 个页签，激活：point-1

页签超出自动横向滚动（滚轮平移、滚动条隐藏）；激活项自动滚入视口；右键批量关闭清理。

<script setup lang="ts">
/** 场景：溢出横向滚动——18 个监控页签超宽后滚轮平移、激活项自动滚入视口、右键批量清理 */
import { ref } from 'vue'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

const N = 18
const tabs = ref<BizTabsNavItem[]>(
  Array.from({ length: N }, (_, i) => ({
    key: `point-${i + 1}`,
    title: `监控点-${String(i + 1).padStart(2, '0')}`,
  }))
)
const active = ref<string | number>('point-1')

/** 演示「激活项自动滚入视口」：跳到远端页签 */
const jumpFar = (): void => {
  active.value = `point-${N}`
}
</script>

<template>
  <div>
    <BizTabsNav v-model="active" v-model:tabs="tabs" />
    <div class="tip">
      页签超出宽度后自动横向滚动：在页签栏上滚动鼠标滚轮平移；
      激活变化时该页签自动滚入视口（点击「跳到最后一个」体验）；
      右键可「关闭右侧 / 关闭其他」批量清理。
      当前 {{ tabs.length }} 个页签，激活：{{ active }}
      <ElButton size="small" style="margin-left: 8px" @click="jumpFar">跳到最后一个</ElButton>
    </div>
  </div>
</template>

<style scoped>
.tip {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  border: 1px dashed var(--el-border-color);
  border-top: none;
  line-height: 1.8;
}
</style>

显示代码

keep-alive 与重新加载

工单录入

公告草稿箱

审核备注

「工单录入」的输入（切走再切回内容保留；右键「重新加载」后清空重建）：

切页保留各页草稿（keep-alive 语义）；右键「重新加载」触发 reload 事件，父级换 :key 强制重建该页。

<script setup lang="ts">
/** 场景：keep-alive 与重新加载——切页保留草稿，右键「重新加载」换 :key 强制重建 */
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizTabsNavItem } from 'vue3-ep-biz-lib'

const tabs = ref<BizTabsNavItem[]>([
  { key: 'ticket-form', title: '工单录入' },
  { key: 'article-draft', title: '公告草稿箱' },
  { key: 'audit-note', title: '审核备注' },
])
const active = ref<string | number>('ticket-form')
/** 各页独立保留的输入状态（keep-alive 语义模拟：切走再切回不丢） */
const drafts = ref<Record<string, string>>({
  'ticket-form': '',
  'article-draft': '',
  'audit-note': '',
})
/** 各页独立的刷新戳：右键「重新加载」后变化，:key 变化触发重建（状态清空） */
const stamps = ref<Record<string, number>>({
  'ticket-form': 0,
  'article-draft': 0,
  'audit-note': 0,
})

const activeTitle = computed(() => tabs.value.find((t) => t.key === active.value)?.title ?? '')

const onReload = (key: string | number): void => {
  const stamp = Date.now()
  stamps.value[String(key)] = stamp
  drafts.value[String(key)] = ''
  ElMessage.success(`已重新加载「${tabs.value.find((t) => t.key === key)?.title ?? key}」`)
}
</script>

<template>
  <div>
    <BizTabsNav v-model="active" v-model:tabs="tabs" @reload="onReload" />
    <div :key="`${active}-${stamps[String(active)]}`" class="page">
      <div class="label">「{{ activeTitle }}」的输入（切走再切回内容保留；右键「重新加载」后清空重建）：</div>
      <ElInput
        v-model="drafts[String(active)]"
        placeholder="输入点内容，切换页签再切回验证保留；右键重新加载验证重建"
        style="max-width: 360px"
      />
    </div>
  </div>
</template>

<style scoped>
.page {
  padding: 16px;
  border: 1px dashed var(--el-border-color);
  border-top: none;
}

.label {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

结合 BizLayout 的多页签框架

运维管理平台

• 首页
• 数据看板
• 工单中心
• 用户管理
• 实时监控

首页

首页

菜单开页签、页签切换联动菜单高亮；右键「重新加载」或点击右上按钮换 :key 重建本区域。 keep-alive 由业务路由层承载（<router-view> + <keep-alive :include>）。

BizLayout 的 tabs 槽对接本组件：菜单开页签、页签切换联动菜单高亮、重新加载重建内容区——多页签主框架的完整拼装。

<script setup lang="ts">
/** 场景：结合 BizLayout 的多页签主框架——菜单开页签、页签/菜单双向联动、重新加载重建内容区 */
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { DataLine, Monitor, PieChart, Tickets, User } from '@element-plus/icons-vue'
import { BizLayout, BizTabsNav } from 'vue3-ep-biz-lib'
import type { BizLayoutMenuItem, BizTabsNavItem } from 'vue3-ep-biz-lib'

const menus: BizLayoutMenuItem[] = [
  { key: '/dashboard', title: '首页', icon: PieChart },
  { key: '/board', title: '数据看板', icon: DataLine },
  { key: '/ticket', title: '工单中心', icon: Tickets },
  { key: '/user', title: '用户管理', icon: User },
  { key: '/monitor', title: '实时监控', icon: Monitor },
]

const tabs = ref<BizTabsNavItem[]>([{ key: '/dashboard', title: '首页', closable: false }])
const active = ref<string | number>('/dashboard')
/** 内容区刷新戳：右键「重新加载」/菜单刷新按钮变化，:key 变化触发重建 */
const reloadStamp = ref(0)

const activeTitle = computed(
  () => tabs.value.find((t) => t.key === active.value)?.title ?? '（无）'
)
const activeIcon = computed(() =>
  menus.find((m) => m.key === active.value)?.icon ?? DataLine
)

/** 菜单点击：模拟 router.push——不存在则开新页签，随后激活 */
const onSelect = (key: string): void => {
  const menu = menus.find((m) => m.key === key)
  if (menu === undefined) return
  if (!tabs.value.some((t) => t.key === key)) {
    tabs.value = [...tabs.value, { key, title: menu.title }]
  }
  active.value = key
}

/** 页签切换：回写菜单高亮（实际项目为 router.push） */
const onTabChange = (key: string | number): void => {
  active.value = key
}

/** 首页经 affix-keys 固定；右键重新加载 → 换 :key 重建内容区 */
const onReload = (): void => {
  reloadStamp.value = Date.now()
  ElMessage.success(`已重新加载「${activeTitle.value}」`)
}
</script>

<template>
  <div class="layout-demo">
    <BizLayout :menus="menus" :active-key="String(active)" title="运维管理平台" @select="onSelect">
      <template #tabs>
        <BizTabsNav
          v-model="active"
          v-model:tabs="tabs"
          :affix-keys="['/dashboard']"
          style="padding: 0 8px"
          @change="onTabChange"
          @reload="onReload"
        />
      </template>
      <div :key="`${active}-${reloadStamp}`" class="content">
        <ElIcon :size="20"><component :is="activeIcon" /></ElIcon>
        <div>
          <b>{{ activeTitle }}</b>
          <p>
            菜单开页签、页签切换联动菜单高亮；右键「重新加载」或点击右上按钮换 :key 重建本区域。
            keep-alive 由业务路由层承载（&lt;router-view&gt; + &lt;keep-alive :include&gt;）。
          </p>
        </div>
        <ElButton size="small" @click="onReload()">刷新本页</ElButton>
      </div>
    </BizLayout>
  </div>
</template>

<style scoped>
.layout-demo {
  height: 420px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
}

.content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--el-bg-color);
  border-radius: 6px;
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.content p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  line-height: 1.8;
}
</style>

显示代码

与路由集成（模式参考）

// 主框架内监听路由维护页签列表（组件不绑定路由，模式任选）
const tabs = ref<BizTabsNavItem[]>([{ key: '/home', title: '首页', affix: true, closable: false }])
const active = ref(route.fullPath)

watch(
  () => route.fullPath,
  (path) => {
    active.value = path
    if (!tabs.value.some((t) => t.key === path)) {
      tabs.value = [...tabs.value, { key: path, title: (route.meta.title ?? path) as string }]
    }
  },
  { immediate: true }
)

<!-- keep-alive 缓存已打开页面；reload 戳用于右键「重新加载」强制重建 -->
<BizTabsNav v-model="active" v-model:tabs="tabs" @reload="(key) => (reloadStamp = Date.now())" />
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" :key="`${route.fullPath}-${reloadStamp}`" />
  </keep-alive>
</router-view>

Props

属性名	类型	默认值	说明
model-value / v-model	string | number	—	当前激活页签 key
tabs	BizTabsNavItem[]	[]	页签列表（建议 v-model:tabs 双向绑定）
affix-keys	Array<string | number>	[]	固定页签 key 集合（如首页），等价于在 item 上写 affix: true
closable	boolean	true	全局默认可关闭（单项可被 item.closable 覆盖；affix 恒不可关）
context-menu	boolean	true	右键菜单开关
menus	BizTabsNavMenuAction[]	全量六项	右键菜单启用项裁剪：reload / close / close-others / close-left / close-right / close-all
draggable	boolean	false	页签拖拽排序（原生 DnD，零依赖）
before-close	(key, tab) => boolean | Promise<boolean>	—	关闭前拦截（脏检查）：返回 false 或 Promise<false> 取消关闭；单个与批量关闭均逐项询问

其余属性经 v-bind="$attrs" 透传根节点。

BizTabsNavItem

字段	类型	说明
key	string | number	唯一标识（路由场景传 fullPath / name）
title	string	页签标题（超出 220px 省略，悬浮 title 全显）
icon	Component | string	图标组件或字体 class 字符串（iconfont）
affix	boolean	固定页签：不显示关闭按钮（显示圆点标记），批量关闭时保留
closable	boolean	单项可关闭覆盖（优先于全局 closable）

Events

事件名	参数	说明
update:model-value	(key)	激活页签变化（列表清空时为 undefined）
update:tabs	(tabs)	列表变化（关闭 / 批量关闭 / 排序后回写，v-model:tabs 自动接收）
change	(key, tab)	页签被激活（含关闭后自动切换相邻页签）
tab-click	(key, tab)	页签被点击（点击已激活项也触发）
close	(key, tab)	单个页签被关闭（批量关闭只回写列表，不逐项触发）
close-all	(tabs)	「关闭全部」完成，参数为剩余列表（固定项）
reload	(key, tab)	右键「重新加载」意图（原 refresh 更名），父级换 :key 重建页面
sort	(tabs)	拖拽排序完成

Slots

插槽名	作用域	说明
default	{ tab, index, active }	页签内容接管（图标 / 圆点 / 标题为默认渲染；关闭按钮始终由组件渲染）

Expose

属性/方法	类型	说明
activate	(key) => void	激活指定页签（key 不存在则不动作）并滚动到可视区
closeTab	(key) => Promise<void>	关闭指定页签（走 before-close 拦截；关闭激活项时自动激活相邻项；原 close(key) 更名）
closeOthers	(key?) => Promise<void>	关闭除锚点外的全部可关页签（key 缺省为当前激活页签）
closeAll	() => Promise<void>	关闭全部可关页签（固定项保留），完成后外抛 close-all
reloadTab	(key?) => void	外抛指定页签的 reload 事件（key 缺省为当前激活页签，等价右键「重新加载」）
scrollToTab	(key?) => void	滚动定位到指定页签（key 缺省为当前激活页签）
scrollToActive	() => void	激活页签滚入视口（激活变化时已自动调用）

TIP

迁移提示：原 BizPageTabs 的 menus 值 refresh 更名为 reload 并新增 close-left / close-right；refresh 事件更名为 reload；expose close / scrollToTab 由 closeTab / scrollToTab 承接；BizPageTabItem 字段并入 BizTabsNavItem（title / affix / icon / closable 语义不变）。