From 5c253ce803a9ef7ce03534ddd5f0865db4602378 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Sat, 12 Aug 2023 09:33:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E5=BC=80?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5Demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.ts                       |  5 ++-
 src/locales/zh-CN.ts                    |  5 ++-
 src/router/index.ts                     | 47 ++++++++++++++++++++-----
 src/views/Function/MultipleTabs.vue     | 19 ++++++++++
 src/views/Function/MultipleTabsDemo.vue | 14 ++++++++
 src/views/hooks/useTab.vue              | 32 +++++++++++++++++
 6 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 src/views/Function/MultipleTabs.vue
 create mode 100644 src/views/Function/MultipleTabsDemo.vue
 create mode 100644 src/views/hooks/useTab.vue

diff --git a/src/locales/en.ts b/src/locales/en.ts
index ba217d9..5a0042e 100644
--- a/src/locales/en.ts
+++ b/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'
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 0957481..305f2ca 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -163,7 +163,10 @@ export default {
     PicturePreview: '表格图片预览',
     department: '部门管理',
     menuManagement: '菜单管理',
-    permission: '权限测试页'
+    permission: '权限测试页',
+    function: '功能',
+    multipleTabs: '多开标签页',
+    details: '详情页'
   },
   permission: {
     hasPermission: '请设置操作权限值'
diff --git a/src/router/index.ts b/src/router/index.ts
index 36716fb..ff5b29b 100644
--- a/src/router/index.ts
+++ b/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',
diff --git a/src/views/Function/MultipleTabs.vue b/src/views/Function/MultipleTabs.vue
new file mode 100644
index 0000000..04aac33
--- /dev/null
+++ b/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>
diff --git a/src/views/Function/MultipleTabsDemo.vue b/src/views/Function/MultipleTabsDemo.vue
new file mode 100644
index 0000000..e8089bd
--- /dev/null
+++ b/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>
diff --git a/src/views/hooks/useTab.vue b/src/views/hooks/useTab.vue
new file mode 100644
index 0000000..78eb5ff
--- /dev/null
+++ b/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>