perf: refoctor useTitle

Vben
1 parent 3b3a7462
Showing 11 changed files with 61 additions and 158 deletions
CHANGELOG.zh_CN.md
src/App.vue
src/components/Table/src/components/settings/FullScreenSetting.vue
src/hooks/core/useAttrs.ts
src/hooks/web/useFullScreen.ts
src/hooks/web/useTitle.ts
src/layouts/default/header/components/FullScreen.vue
src/router/guard/index.ts
src/router/guard/titleGuard.ts
src/utils/index.ts
src/views/demo/feat/full-screen/index.vue
+## Wip
+
+### ✨ Refactor
+
+- 移除 useFullScreen 函数
+
 ## 2.1.1 (2021-03-26)
 ### ✨ Features
@@ -14,18 +14,21 @@
   import { initAppConfigStore } from '/@/logics/initAppConfig';
   import { useLockPage } from '/@/hooks/web/useLockPage';
+  import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
   export default defineComponent({
     name: 'App',
     components: { ConfigProvider, AppProvider },
     setup() {
-      // support Multi-language
-      const { getAntdLocale } = useLocale();
-
       // Initialize vuex internal system configuration
       initAppConfigStore();
+      useTitle();
+
+      // support Multi-language
+      const { getAntdLocale } = useLocale();
+
       // Create a lock screen monitor
       const lockEvent = useLockPage();
@@ -3,8 +3,8 @@
     <template #title>
       <span>{{ t('component.table.settingFullScreen') }}</span>
     </template>
-    <FullscreenOutlined @click="toggleFullscreen" v-if="!isFullscreenRef" />
-    <FullscreenExitOutlined @click="toggleFullscreen" v-else />
+    <FullscreenOutlined @click="toggle" v-if="!isFullscreen" />
+    <FullscreenExitOutlined @click="toggle" v-else />
   </Tooltip>
 </template>
 <script lang="ts">
@@ -12,7 +12,8 @@
   import { Tooltip } from 'ant-design-vue';
   import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
-  import { useFullscreen } from '/@/hooks/web/useFullScreen';
+  import { useFullscreen } from '@vueuse/core';
+
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
@@ -27,11 +28,11 @@
     setup() {
       const table = useTableContext();
       const { t } = useI18n();
-      const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef);
+      const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
       return {
-        toggleFullscreen,
-        isFullscreenRef,
+        toggle,
+        isFullscreen,
         t,
       };
     },
@@ -8,7 +8,7 @@ interface Params {
 const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
 const LISTENER_PREFIX = /^on[A-Z]/;
-export function entries<T>(obj: Hash<T>): [string, T][] {
+export function entries<T>(obj: Recordable<T>): [string, T][] {
   return Object.keys(obj).map((key: string) => [key, obj[key]]);
 }
-import { Ref, ref, unref } from 'vue';
-
-type RFSMethodName =
-  | 'webkitRequestFullScreen'
-  | 'requestFullscreen'
-  | 'msRequestFullscreen'
-  | 'mozRequestFullScreen';
-type EFSMethodName =
-  | 'webkitExitFullscreen'
-  | 'msExitFullscreen'
-  | 'mozCancelFullScreen'
-  | 'exitFullscreen';
-type FSEPropName =
-  | 'webkitFullscreenElement'
-  | 'msFullscreenElement'
-  | 'mozFullScreenElement'
-  | 'fullscreenElement';
-
-export function useFullscreen(
-  target: Ref<Nullable<HTMLElement>> | Nullable<HTMLElement> = ref(document.documentElement),
-  options?: FullscreenOptions
-) {
-  const isFullscreenRef = ref(false);
-  const el = document.documentElement;
-  let RFC_METHOD_NAME: RFSMethodName = 'requestFullscreen';
-  let EFS_METHOD_NAME: EFSMethodName = 'exitFullscreen';
-  let FSE_PROP_NAME: FSEPropName = 'fullscreenElement';
-
-  if ('webkitRequestFullScreen' in el) {
-    RFC_METHOD_NAME = 'webkitRequestFullScreen';
-    EFS_METHOD_NAME = 'webkitExitFullscreen';
-    FSE_PROP_NAME = 'webkitFullscreenElement';
-  } else if ('msRequestFullscreen' in el) {
-    RFC_METHOD_NAME = 'msRequestFullscreen';
-    EFS_METHOD_NAME = 'msExitFullscreen';
-    FSE_PROP_NAME = 'msFullscreenElement';
-  } else if ('mozRequestFullScreen' in el) {
-    RFC_METHOD_NAME = 'mozRequestFullScreen';
-    EFS_METHOD_NAME = 'mozCancelFullScreen';
-    FSE_PROP_NAME = 'mozFullScreenElement';
-  } else if (!('requestFullscreen' in el)) {
-    throw new Error('当前浏览器不支持Fullscreen API !');
-  }
-  function enterFullscreen(): Promise<void> {
-    isFullscreenRef.value = true;
-    return (unref(target) as any)[RFC_METHOD_NAME](options);
-  }
-
-  function exitFullscreen(): Promise<void> {
-    isFullscreenRef.value = false;
-    return (document as any)[EFS_METHOD_NAME]();
-  }
-
-  function isFullscreen(): boolean {
-    return unref(target) === (document as any)[FSE_PROP_NAME];
-  }
-
-  async function toggleFullscreen(): Promise<void> {
-    if (!unref(target)) return;
-    return isFullscreen() ? exitFullscreen() : enterFullscreen();
-  }
-
-  return {
-    // watchFullscreen,
-    toggleFullscreen,
-    exitFullscreen,
-    isFullscreen,
-    enterFullscreen,
-    isFullscreenRef,
-  };
-}
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useTitle as usePageTitle } from '@vueuse/core';
+import { useGlobSetting } from '/@/hooks/setting';
+
+import { REDIRECT_NAME } from '/@/router/constant';
+import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+
+export function useTitle() {
+  const { title } = useGlobSetting();
+  const { t } = useI18n();
+
+  const pageTitle = usePageTitle();
+
+  listenerLastChangeTab((route) => {
+    if (route.name === REDIRECT_NAME) {
+      return;
+    }
+
+    const tTitle = t(route?.meta?.title as string);
+    pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
+  });
+}
 <template>
   <Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5">
-    <span @click="toggleFullscreen">
+    <span @click="toggle">
       <FullscreenOutlined v-if="!isFullscreen" />
       <FullscreenExitOutlined v-else />
     </span>
@@ -10,7 +10,8 @@
   import { defineComponent, computed, unref } from 'vue';
   import { Tooltip } from 'ant-design-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { useFullscreen } from '/@/hooks/web/useFullScreen';
+  import { useFullscreen } from '@vueuse/core';
+
   import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
   export default defineComponent({
     name: 'FullScreen',
@@ -18,18 +19,18 @@
     setup() {
       const { t } = useI18n();
-      const { toggleFullscreen, isFullscreenRef } = useFullscreen();
+      const { toggle, isFullscreen } = useFullscreen();
       const getTitle = computed(() => {
-        return unref(isFullscreenRef)
+        return unref(isFullscreen)
           ? t('layout.header.tooltipExitFull')
           : t('layout.header.tooltipEntryFull');
       });
       return {
         getTitle,
-        isFullscreen: isFullscreenRef,
-        toggleFullscreen,
+        isFullscreen,
+        toggle,
       };
     },
   });
@@ -3,7 +3,6 @@ import router from &#39;/@/router&#39;;
 import { createProgressGuard } from './progressGuard';
 import { createPermissionGuard } from './permissionGuard';
 import { createPageLoadingGuard } from './pageLoadingGuard';
-import { createTitleGuard } from './titleGuard';
 import { createMessageGuard } from './messageGuard';
 import { createScrollGuard } from './scrollGuard';
 import { createHttpGuard } from './httpGuard';
@@ -15,7 +14,6 @@ createPageLoadingGuard(router);
 createHttpGuard(router);
 createScrollGuard(router);
 createMessageGuard(router);
-createTitleGuard(router);
 createProgressGuard(router);
 createPermissionGuard(router);
 createStateGuard(router);
-import type { Router } from 'vue-router';
-
-import { useGlobSetting } from '/@/hooks/setting';
-
-import { setTitle } from '/@/utils';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-import { REDIRECT_NAME } from '/@/router/constant';
-
-const globSetting = useGlobSetting();
-
-export function createTitleGuard(router: Router) {
-  router.afterEach(async (to) => {
-    const { t } = useI18n();
-    to.name !== REDIRECT_NAME && setTitle(t(to.meta.title as string), globSetting.title);
-    return true;
-  });
-}
@@ -62,35 +62,6 @@ export function getDynamicProps&lt;T, U&gt;(props: T): Partial&lt;U&gt; {
   return ret as Partial<U>;
 }
-/**
- * set page Title
- * @param {*} title  :page Title
- */
-function setDocumentTitle(title: string) {
-  document.title = title;
-  const ua = navigator.userAgent;
-  const regex = /\bMicroMessenger\/([\d.]+)/;
-  // 兼容
-  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
-    const i = document.createElement('iframe');
-    i.src = '/favicon.ico';
-    i.style.display = 'none';
-    i.onload = function () {
-      setTimeout(function () {
-        i.remove();
-      }, 9);
-    };
-    document.body.appendChild(i);
-  }
-}
-
-export function setTitle(title: string, appTitle?: string) {
-  if (title) {
-    const _title = title ? ` ${title} - ${appTitle} ` : `${appTitle}`;
-    setDocumentTitle(_title);
-  }
-}
-
 export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
   if (!route) return route;
   const { matched, ...opt } = route;
 <template>
   <PageWrapper title="全屏示例">
     <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Window Full Screen">
-      <a-button type="primary" @click="enterFullscreen" class="mr-2">
-        Enter Window Full Screen
-      </a-button>
-      <a-button color="success" @click="toggleFullscreen" class="mr-2">
-        Toggle Window Full Screen
-      </a-button>
+      <a-button type="primary" @click="enter" class="mr-2"> Enter Window Full Screen </a-button>
+      <a-button color="success" @click="toggle" class="mr-2"> Toggle Window Full Screen </a-button>
-      <a-button color="error" @click="exitFullscreen" class="mr-2">
-        Exit Window Full Screen
-      </a-button>
+      <a-button color="error" @click="exit" class="mr-2"> Exit Window Full Screen </a-button>
-      Current State: {{ isFullscreenRef }}
+      Current State: {{ isFullscreen }}
     </CollapseContainer>
     <CollapseContainer class="w-full mt-5 bg-white rounded-md" title="Dom Full Screen">
@@ -30,27 +24,23 @@
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
-  import { useFullscreen } from '/@/hooks/web/useFullScreen';
+  import { useFullscreen } from '@vueuse/core';
+
   import { PageWrapper } from '/@/components/Page';
   export default defineComponent({
     components: { CollapseContainer, PageWrapper },
     setup() {
       const domRef = ref<Nullable<HTMLElement>>(null);
-      const {
-        enterFullscreen,
-        toggleFullscreen,
-        isFullscreenRef,
-        exitFullscreen,
-      } = useFullscreen();
+      const { enter, toggle, exit, isFullscreen } = useFullscreen();
-      const { toggleFullscreen: toggleDom } = useFullscreen(domRef);
+      const { toggle: toggleDom } = useFullscreen(domRef);
       return {
-        enterFullscreen,
+        enter,
         toggleDom,
-        toggleFullscreen,
-        isFullscreenRef,
-        exitFullscreen,
+        toggle,
+        isFullscreen,
+        exit,
         domRef,
       };
     },