feat(useTitle): 添加 useTitle 钩子并进行文档更新

- 实现 useTitle 钩子以动态更改浏览器标题。

- 添加 useTitle 钩子的文档和演示。
- 更新 generate-router.js 中的路由配置以包含新的 useTitle 页面。

docs/.vitepress/generate-router.js

@@ -1,5 +1,5 @@
 const Router = {
-  Dom: ['useEventListener', 'useWindowSize', 'useClickAway', 'useHover', 'useRect', "useFullscreen"],
+  Dom: ['useEventListener', 'useWindowSize', 'useClickAway', 'useHover', 'useRect', "useFullscreen", "useTitle"],
   State: ['useToggle', 'useBoolean', "useLocalStorage", "useDebounce", "useThrottle"],
   Worker: ['useCountDown'],
   Effect: ["useDebounceFn", "useThrottleFn"]

docs/useTitle/demo/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>{{ title }}</div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { useTitle } from 'zhongjiayao_v3_hooks';
+
+  const title = ref('hello zhongjiayao_v3_hooks');
+
+  useTitle(title, { restoreOnUnmount: true });
+</script>

docs/useTitle/index.md

@@ -0,0 +1,19 @@
+# useTitle
+
+改变浏览器 title 的 Hook
+
+<preview path="./demo/index.vue" title="基本使用" description='改变浏览器 title,可动态改变； '></preview>
+
+## API
+
+## 参数
+
+| 参数  | 说明     | 类型          | 默认值 |
+| ----- | -------- | ------------- | ------ |
+| title | 页面标题 | `Ref<string>` | -      |
+
+## Options
+
+| 参数             | 说明                               | 类型      | 默认值  |
+| ---------------- | ---------------------------------- | --------- | ------- |
+| restoreOnUnmount | 组件卸载时，是否恢复上一个页面标题 | `boolean` | `false` |

docs/utils.ts

@@ -1,15 +1,17 @@
 import { nextTick, onMounted, onActivated } from 'vue';
 
-export const inBrowser = typeof window !== 'undefined';
+export const isBrowser = typeof window !== 'undefined';
+
+export type Fn = (...[]: any[]) => any;
 
 export const supportsPassive = true;
 
 export function raf(fn: FrameRequestCallback): number {
-  return inBrowser ? requestAnimationFrame(fn) : -1;
+  return isBrowser ? requestAnimationFrame(fn) : -1;
 }
 
 export function cancelRaf(id: number) {
-  if (inBrowser) {
+  if (isBrowser) {
     cancelAnimationFrame(id);
   }
 }
@@ -99,3 +101,37 @@ export const TypeSerializers: Record<'boolean' | 'object' | 'number' | 'any' | '
     write: (v: any) => String(v),
   },
 };
+
+/**
+ * 防抖
+ * @param fn
+ * @param delay
+ * @returns
+ */
+export const debounce = (fn: Fn, delay: number) => {
+  let timer: NodeJS.Timeout | null = null;
+  return function (...args: []) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      // @ts-ignore
+      fn.call(this, ...args);
+    }, delay);
+  };
+};
+
+/**
+ * 节流
+ * @param fn
+ * @param delay
+ * @returns
+ */
+export const throttle = (fn: Fn, delay: number) => {
+  let oldNow = Date.now();
+  return function (...args: []) {
+    const currNow = Date.now();
+    if (currNow - oldNow < delay) return;
+    oldNow = currNow;
+    // @ts-ignore
+    fn.call(this, ...args);
+  };
+};

packages/hooks/src/index.ts

@@ -12,6 +12,7 @@ import useDebounce from './useDebounce';
 import useDebounceFn from './useDebounceFn';
 import useThrottle from './useThrottle';
 import useThrottleFn from './useThrottleFn';
+import useTitle from "./useTitle";
 export {
   useBoolean,
   useToggle,
@@ -26,5 +27,6 @@ export {
   useDebounce,
   useDebounceFn,
   useThrottle,
-  useThrottleFn
+  useThrottleFn,
+  useTitle
 };

packages/hooks/src/useClickAway/index.ts

@@ -1,6 +1,6 @@
 import { Ref, unref } from 'vue';
 import useEventListener from '../useEventListener';
-import { inBrowser } from '../utils';
+import { isBrowser } from '../utils';
 
 export type UseClickAwayOptions = {
   eventName?: keyof DocumentEventMap | Array<keyof DocumentEventMap>;
@@ -11,7 +11,7 @@ function useClickAway(
   listener: EventListener,
   options: UseClickAwayOptions = {},
 ) {
-  if (!inBrowser) {
+  if (!isBrowser) {
     return;
   }
 

packages/hooks/src/useCountDown/index.ts

@@ -1,5 +1,5 @@
 import { computed, onActivated, onBeforeUnmount, onDeactivated, ref } from 'vue';
-import { cancelRaf, inBrowser, raf } from '../utils';
+import { cancelRaf, isBrowser, raf } from '../utils';
 
 export type CurrentTime = {
   days: number;
@@ -118,7 +118,7 @@ function useCountDown(options: UseCountDownOptions) {
 
   const tick = () => {
     // 检查是否在浏览器环境中，
-    if (!inBrowser) {
+    if (!isBrowser) {
       return;
     }
 

packages/hooks/src/useEventListener/index.ts

@@ -1,4 +1,4 @@
-import { inBrowser, onMountedOrActivated } from '../utils';
+import { isBrowser, onMountedOrActivated } from '../utils';
 import { isRef, onDeactivated, onUnmounted, Ref, unref, watch, type WatchStopHandle } from 'vue';
 
 type TargetRef = EventTarget | Ref<EventTarget | undefined>;
@@ -28,7 +28,7 @@ function useEventListener<K extends keyof DocumentEventMap>(
 ): () => void;
 
 function useEventListener(type: string, listener: EventListener, options?: UseEventListenerOptions) {
-  if (!inBrowser) {
+  if (!isBrowser) {
     return;
   }
 

packages/hooks/src/useLocalStorage/index.ts

@@ -1,7 +1,7 @@
 import { isRef, ref, Ref, watch as vueWatch } from 'vue';
-import { getValueType, inBrowser, TypeSerializers } from '../utils';
+import { getValueType, isBrowser, TypeSerializers } from '../utils';
 
-const storage = inBrowser ? localStorage : null;
+const storage = isBrowser ? localStorage : null;
 
 interface Options {
   watch: boolean;

packages/hooks/src/useTitle/demo/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>{{ title }}</div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { useTitle } from 'zhongjiayao_v3_hooks';
+
+  const title = ref('hello zhongjiayao_v3_hooks');
+
+  useTitle(title, { restoreOnUnmount: true });
+</script>

packages/hooks/src/useTitle/index.md

@@ -0,0 +1,19 @@
+# useTitle
+
+改变浏览器 title 的 Hook
+
+<preview path="./demo/index.vue" title="基本使用" description='改变浏览器 title,可动态改变； '></preview>
+
+## API
+
+## 参数
+
+| 参数  | 说明     | 类型          | 默认值 |
+| ----- | -------- | ------------- | ------ |
+| title | 页面标题 | `Ref<string>` | -      |
+
+## Options
+
+| 参数             | 说明                               | 类型      | 默认值  |
+| ---------------- | ---------------------------------- | --------- | ------- |
+| restoreOnUnmount | 组件卸载时，是否恢复上一个页面标题 | `boolean` | `false` |

packages/hooks/src/useTitle/index.ts

@@ -0,0 +1,33 @@
+import { isRef, onMounted, onUnmounted, ref, Ref, unref, watch } from 'vue';
+import { isBrowser } from '../utils';
+
+export interface UseTitleOptions {
+  restoreOnUnmount?: boolean;
+}
+
+const DEFAULT_OPTIONS: UseTitleOptions = {
+  restoreOnUnmount: false,
+};
+
+function useTitle(title: Ref<string> | string, options: UseTitleOptions = DEFAULT_OPTIONS) {
+  const titleRef = ref(isBrowser ? document.title : '');
+
+  if (isRef(title)) {
+    watch(title, () => {
+      document.title = title.value;
+    });
+  } else {
+    document.title = title;
+  }
+
+  onMounted(() => {
+    document.title = unref(title);
+  });
+
+  onUnmounted(() => {
+    if (options.restoreOnUnmount) {
+      document.title = unref(titleRef);
+    }
+  });
+}
+export default useTitle;

packages/hooks/src/useWindowSize/index.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from 'vue';
-import { inBrowser } from '../utils';
+import { isBrowser } from '../utils';
 import useEventListener from '../useEventListener';
 
 let width: Ref<number>;
@@ -10,7 +10,7 @@ function useWindowSize() {
     width = ref(0);
     height = ref(0);
 
-    if (inBrowser) {
+    if (isBrowser) {
       const update = () => {
         width.value = window.innerWidth;
         height.value = window.innerHeight;

packages/hooks/src/utils.ts

@@ -1,17 +1,17 @@
 import { nextTick, onMounted, onActivated } from 'vue';
 
-export const inBrowser = typeof window !== 'undefined';
+export const isBrowser = typeof window !== 'undefined';
 
 export type Fn = (...[]: any[]) => any;
 
 export const supportsPassive = true;
 
 export function raf(fn: FrameRequestCallback): number {
-  return inBrowser ? requestAnimationFrame(fn) : -1;
+  return isBrowser ? requestAnimationFrame(fn) : -1;
 }
 
 export function cancelRaf(id: number) {
-  if (inBrowser) {
+  if (isBrowser) {
     cancelAnimationFrame(id);
   }
 }