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

apps/web-antd/src/locales/langs/en-US.json

@@ -38,7 +38,8 @@
         "title": "Features",
         "hideChildrenInMenu": "Hide Menu Children",
         "loginExpired": "Login Expired",
-        "tabs": "Tabs"
+        "tabs": "Tabs",
+        "tabDetail": "Tab Detail Page"
       },
       "breadcrumb": {
         "navigation": "Breadcrumb Navigation",

apps/web-antd/src/locales/langs/zh-CN.json

@@ -40,7 +40,8 @@
         "title": "功能",
         "hideChildrenInMenu": "隐藏子菜单",
         "loginExpired": "登录过期",
-        "tabs": "标签页"
+        "tabs": "标签页",
+        "tabDetail": "标签详情页"
       },
       "breadcrumb": {
         "navigation": "面包屑导航",

apps/web-antd/src/router/routes/modules/demos.ts

@@ -107,6 +107,18 @@ const routes: RouteRecordRaw[] = [
               title: $t('page.demos.features.tabs'),
             },
           },
+          {
+            name: 'FeatureTabDetailDemo',
+            path: 'tabs/detail/:id',
+            component: () =>
+              import('#/views/demos/features/tabs/tab-detail.vue'),
+            meta: {
+              activePath: '/demos/features/tabs',
+              hideInMenu: true,
+              maxNumOfOpenTab: 3,
+              title: $t('page.demos.features.tabDetail'),
+            },
+          },
           {
             name: 'HideChildrenInMenuParent',
             path: 'hide-menu-children',

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>