feat: add 'maxNumOfOpenTab' to limit the maximum number of tabs with the same name

apps/web-antd/src/views/demos/features/tabs/index.vue

@@ -28,6 +28,11 @@ function openTab() {
   router.push({ name: 'VbenAbout' });
 }
 
+function openTabWithParams(id: number) {
+  // 这里就是路由跳转，也可以用path
+  router.push({ name: 'FeatureTabDetailDemo', params: { id } });
+}
+
 function reset() {
   newTabTitle.value = '';
   resetTabTitle();
@@ -92,5 +97,19 @@ function reset() {
         <Button @click="reset"> 重置 </Button>
       </div>
     </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="text-lg font-semibold">最大打开数量</div>
+      <div class="text-foreground/80 my-3">
+        限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
+      </div>
+      <div class="flex flex-wrap items-center gap-3">
+        <template v-for="item in 5" :key="item">
+          <Button type="primary" @click="openTabWithParams(item)">
+            打开{{ item }}详情页
+          </Button>
+        </template>
+      </div>
+    </div>
   </div>
 </template>

apps/web-antd/src/views/demos/features/tabs/tab-detail.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+defineOptions({ name: 'FeatureTabDetailDemo' });
+
+const route = useRoute();
+
+const { setTabTitle } = useTabs();
+
+const index = computed(() => {
+  return route.params?.id ?? -1;
+});
+
+setTabTitle(`No.${index.value} - 详情信息`);
+</script>
+
+<template>
+  <div class="p-5">
+    <div class="card-box p-5">
+      <h1 class="text-xl font-semibold">标签详情页</h1>
+      <div class="text-foreground/80 mt-2">
+        <div>{{ index }} - 详情页内容在此</div>
+      </div>
+    </div>
+  </div>
+</template>