feat(demo): add fullScreen demo page(全屏-demo #183) (#304)

Co-authored-by: jackhoo_98 <[email protected]>

apps/admin/src/pages/demo/feat/full-screen.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useFullscreen } from '@vben/utils'
+
+const domRef = ref<Nullable<HTMLElement>>(null)
+
+const { enter, toggle, exit, isFullscreen } = useFullscreen()
+
+const { toggle: toggleDom, isFullscreen: isDomFullscreen } =
+  useFullscreen(domRef)
+</script>
+<template>
+  <VbenCard title="全屏示例">
+    <VbenCard title="Window Full Screen">
+      <VbenButton
+        type="primary"
+        :disabled="isFullscreen"
+        @click="enter"
+        class="mr-2"
+      >
+        Enter Window Full Screen
+      </VbenButton>
+      <VbenButton type="success" @click="toggle" class="mr-2">
+        Toggle Window Full Screen
+      </VbenButton>
+
+      <VbenButton type="error" @click="exit" class="mr-2">
+        Exit Window Full Screen
+      </VbenButton>
+
+      Current State: {{ isFullscreen }}
+    </VbenCard>
+
+    <VbenCard title="Dom Full Screen">
+      <VbenButton type="primary" @click="toggleDom" class="mr-2">
+        Enter Dom Full Screen
+      </VbenButton>
+    </VbenCard>
+
+    <div
+      ref="domRef"
+      class="flex items-center justify-center w-1/2 h-64 mx-auto mt-10 bg-white rounded-md"
+    >
+      <VbenButton type="primary" @click="toggleDom" class="mr-2">
+        {{ isDomFullscreen ? 'Exit Dom Full Screen' : 'Enter Dom Full Screen' }}
+      </VbenButton>
+    </div>
+  </VbenCard>
+</template>

packages/locale/src/lang/en/routes.ts

@@ -62,6 +62,7 @@ export default {
       print: 'Print',
       ellipsis: 'EllipsisText',
       watermark: 'Watermark',
+      fullScreen: 'Full Screen',
     },
     page: {
       page: 'Page',

packages/locale/src/lang/zh-CN/routes.ts

@@ -63,6 +63,7 @@ export default {
       print: '打印',
       ellipsis: '文本省略',
       watermark: '水印',
+      fullScreen: '全屏',
     },
     page: {
       page: '页面',

packages/router/src/routes/modules/demo/feat.ts

@@ -52,6 +52,14 @@ const feat: RouteRecordItem = {
         title: 'routes.demo.feat.watermark',
       },
     },
+    {
+      path: 'full-screen',
+      name: 'FullScreenDemo',
+      component: () => import('@/pages/demo/feat/full-screen.vue'),
+      meta: {
+        title: 'routes.demo.feat.fullScreen',
+      },
+    },
   ],
 }