feat: 新增多开标签页Demo

src/locales/en.ts

@@ -164,7 +164,10 @@ export default {
     department: 'Department management',
     menuManagement: 'Menu management',
     // 权限测试页面
-    permission: 'Permission test page'
+    permission: 'Permission test page',
+    function: 'Function',
+    multipleTabs: 'Multiple tabs',
+    details: 'Details'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'

src/locales/zh-CN.ts

@@ -163,7 +163,10 @@ export default {
     PicturePreview: '表格图片预览',
     department: '部门管理',
     menuManagement: '菜单管理',
-    permission: '权限测试页'
+    permission: '权限测试页',
+    function: '功能',
+    multipleTabs: '多开标签页',
+    details: '详情页'
   },
   permission: {
     hasPermission: '请设置操作权限值'

src/router/index.ts

@@ -313,6 +313,37 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/function',
+    component: Layout,
+    redirect: '/function/multipleTabs',
+    name: 'Function',
+    meta: {
+      title: t('router.function'),
+      icon: 'ri:function-fill',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'multipleTabs',
+        component: () => import('@/views/Function/MultipleTabs.vue'),
+        name: 'MultipleTabs',
+        meta: {
+          title: t('router.multipleTabs')
+        }
+      },
+      {
+        path: 'multipleTabs-demo/:id',
+        component: () => import('@/views/Function/MultipleTabsDemo.vue'),
+        name: 'MultipleTabsDemo',
+        meta: {
+          hidden: true,
+          title: t('router.details'),
+          canTo: true
+        }
+      }
+    ]
+  },
   {
     path: '/hooks',
     component: Layout,
@@ -331,16 +362,16 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: 'useWatermark'
         }
+      },
+      {
+        path: 'useTab',
+        component: () => import('@/views/hooks/useTab.vue'),
+        name: 'UseTab',
+        meta: {
+          title: 'useTab'
+        }
       }
       // {
-      //   path: 'useOpenTab',
-      //   component: () => import('@/views/hooks/useOpenTab.vue'),
-      //   name: 'UseOpenTab',
-      //   meta: {
-      //     title: 'useOpenTab'
-      //   }
-      // }
-      // {
       //   path: 'useCrudSchemas',
       //   component: () => import('@/views/hooks/useCrudSchemas.vue'),
       //   name: 'UseCrudSchemas',

src/views/Function/MultipleTabs.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { ElButton } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const { push } = useRouter()
+
+const openTab = (item: number) => {
+  push(`/function/multipleTabs-demo/${item}`)
+}
+</script>
+
+<template>
+  <ContentWrap>
+    <ElButton v-for="item in 5" :key="item" type="primary" @click="openTab(item)">
+      打开详情页{{ item }}
+    </ElButton>
+  </ContentWrap>
+</template>

src/views/Function/MultipleTabsDemo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { ElInput } from 'element-plus'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const { params } = useRoute()
+
+const val = ref(params.id as string)
+</script>
+
+<template>
+  <ContentWrap> 获取参数： <ElInput v-model="val" /> </ContentWrap>
+</template>

src/views/hooks/useTab.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ElButton } from 'element-plus'
+import { useWatermark } from '@/hooks/web/useWatermark'
+import { computed, onBeforeUnmount } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+const title = computed(() => appStore.getTitle)
+
+const { setWatermark, clear } = useWatermark()
+
+const { t } = useI18n()
+
+onBeforeUnmount(() => {
+  clear()
+})
+</script>
+
+<template>
+  <ContentWrap title="useTab">
+    <ElButton type="primary" @click="setWatermark(title)">
+      {{ t('watermarkDemo.createdWatermark') }}
+    </ElButton>
+    <ElButton type="danger" @click="clear">{{ t('watermarkDemo.clearWatermark') }}</ElButton>
+    <ElButton type="warning" @click="setWatermark(`New${title}`)">
+      {{ t('watermarkDemo.resetWatermark') }}
+    </ElButton>
+  </ContentWrap>
+</template>