优化浏览器工具库功能并添加测试用例

packages/.vitepress/plugins/markdownTransform.ts

@@ -29,6 +29,11 @@ export function MarkdownTransform(): any {
                 let rawcodeArray = (Array.from(code.matchAll(/<\!--code\:(.*?)\:code-->/g) ?? []) as any).map(([_, name]) => name)
 
 
+                // console.log(this._container.config.root);
+                // console.log(id);
+                // console.log(oneDir);
+                // console.log(allFiles);
+                // console.log(matter);
                 
                 for (let i = 0; i < allFiles.length; i++) {
                     const file = allFiles[i];

packages/browser/src/check/__tests__/index.ts

@@ -0,0 +1,72 @@
+import { IEVersion } from "@xyx-utils/browser";
+
+describe("测试 on 与 off", () => {
+    it("IE7 版本", () => {
+        global.navigator = {
+            ...global.navigator, // 保留其他可能存在的属性
+            userAgent: 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)'
+        };
+        expect(IEVersion()).toBe(7);
+    });
+    it("IE6 版本", () => {
+        global.navigator = {
+            ...global.navigator, // 保留其他可能存在的属性
+            userAgent: 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)'
+        };
+        expect(IEVersion()).toBe(6);
+    });
+    it("IE8 版本", () => {
+        global.navigator = {
+            ...global.navigator, // 保留其他可能存在的属性
+            userAgent: 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1)'
+        };
+        expect(IEVersion()).toBe(8);
+    });
+    it("IE9 版本", () => {
+        global.navigator = {
+            ...global.navigator, // 保留其他可能存在的属性
+            userAgent: 'Mozilla/4.0 (compatible; MSIE 9.0; Windows NT 5.1)'
+        };
+        expect(IEVersion()).toBe(9);
+    });
+    it("IE10 版本", () => {
+        global.navigator = {
+            ...global.navigator, // 保留其他可能存在的属性
+            userAgent: 'Mozilla/4.0 (compatible; MSIE 10.0; Windows NT 5.1)'
+        };
+        expect(IEVersion()).toBe(10);
+    });
+    it("edge", () => {
+        global.navigator = {
+            ...global.navigator, // 保留其他可能存在的属性
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36Edge/13.10586'
+        };
+        expect(IEVersion()).toBe("edge");
+    });
+    // it("触发多次click事件", () => {
+    //     const mockListener = vi.fn();
+    //     const element = document.createElement("div");
+    //     on(element, "click", mockListener);
+
+    //     const event = new MouseEvent("click");
+    //     element.dispatchEvent(event);
+    //     element.dispatchEvent(event);
+
+    //     expect(mockListener).toBeCalledTimes(2);
+    // });
+    // it("仅触发一次click事件", () => {
+    //     const mockListener = vi.fn();
+    //     const element = document.createElement("div");
+    //     on(element, "click", mockListener);
+
+    //     const event = new MouseEvent("click");
+    //     element.dispatchEvent(event);
+
+    //     off(element, "click", mockListener);
+
+    //     element.dispatchEvent(event);
+    //     element.dispatchEvent(event);
+
+    //     expect(mockListener).toBeCalledTimes(1);
+    // });
+});

packages/browser/src/check/docs/demo.vue

@@ -1,45 +0,0 @@
-<template>
-    <div>
-        <cop info="getExplorerInfo" :text="ExplorerInfo"></cop>
-        <cop info="getExplorerInfo" :text="IeInfo === -1 ? '这不是IE' : '这是IE' + IeInfo"></cop>
-        <cop info="isHtml5Plus" :text="html5PlusInfo ? '这是html5Plus环境' : '这不是html5Plus环境'"></cop>
-        <cop info="isWxMp" :text="wxMpInfo ? '这是微信小程序' : '这不是微信小程序'"></cop>
-        <cop info="isWeChat" :text="weChatInfo ? '这是微信浏览器' : '这不是微信浏览器'"></cop>
-        <cop info="isMobile" :text="mobileInfo ? '这是手机' : '这不是手机'"></cop>
-        <cop info="isWeCom" :text="isWeCom ? '这是企业微信' : '这不是企业微信'"></cop>
-        <cop info="isAlipay" :text="isAlipay ? '这是支付宝' : '这不是支付宝'"></cop>
-        <cop info="isDingTalk" :text="isDingTalk ? '这是钉钉' : '这不是钉钉'"></cop>
-    </div>
-</template>
-<script lang="ts" setup>
-import { getExplorerInfo, IEVersion } from '@xyx-utils/browser/check'
-import { isWeCom, isAlipay, isDingTalk, isHtml5Plus, isMobile, isWeChat, isWxMp } from '@xyx-utils/browser'
-import { defineComponent, h, ref } from 'vue'
-
-const cop = defineComponent({
-    props: ['info', 'text'],
-    setup(props: any, ctx) {
-        return () => h('div', [
-            h('code', [props.info]),
-            h('span', ["检测结果：" + props.text]),
-        ])
-    },
-})
-
-const ExplorerInfo = getExplorerInfo()
-const IeInfo = IEVersion()
-const html5PlusInfo = isHtml5Plus()
-const mobileInfo = isMobile()
-const weChatInfo = isWeChat()
-const wxMpInfo = ref<boolean>();
-; (async () => {
-    try {
-        await isWxMp()
-        wxMpInfo.value = true
-    } catch (error) {
-        wxMpInfo.value = false
-    }
-})();
-
-</script>
-<style lang="less" scoped></style>

packages/browser/src/check/docs/index.md

@@ -7,4 +7,4 @@ title: 平台检测
 
 ## Demo
 
-<preview path="./demo.vue" title="@xyx-utils/browser" description="用于平台的判断"></preview>
+<preview path="./index.vue" title="@xyx-utils/browser" description="用于平台的判断"></preview>

packages/browser/src/check/docs/index.vue

@@ -1,10 +1,45 @@
 <template>
-    <ClientComp></ClientComp>
+    <div>
+        <cop info="getExplorerInfo" :text="ExplorerInfo"></cop>
+        <cop info="getExplorerInfo" :text="IeInfo === -1 ? '这不是IE' : '这是IE' + IeInfo"></cop>
+        <cop info="isHtml5Plus" :text="html5PlusInfo ? '这是html5Plus环境' : '这不是html5Plus环境'"></cop>
+        <cop info="isWxMp" :text="wxMpInfo ? '这是微信小程序' : '这不是微信小程序'"></cop>
+        <cop info="isWeChat" :text="weChatInfo ? '这是微信浏览器' : '这不是微信浏览器'"></cop>
+        <cop info="isMobile" :text="mobileInfo ? '这是手机' : '这不是手机'"></cop>
+        <cop info="isWeCom" :text="isWeCom ? '这是企业微信' : '这不是企业微信'"></cop>
+        <cop info="isAlipay" :text="isAlipay ? '这是支付宝' : '这不是支付宝'"></cop>
+        <cop info="isDingTalk" :text="isDingTalk ? '这是钉钉' : '这不是钉钉'"></cop>
+    </div>
 </template>
-<script setup>
+<script lang="ts" setup>
-import { defineClientComponent } from 'vitepress'
+import { getExplorerInfo, IEVersion } from '@xyx-utils/browser/check'
+import { isWeCom, isAlipay, isDingTalk, isHtml5Plus, isMobile, isWeChat, isWxMp } from '@xyx-utils/browser'
+import { defineComponent, h, ref } from 'vue'
 
-const ClientComp = defineClientComponent(() => {
+const cop = defineComponent({
-    return import('./demo.vue')
+    props: ['info', 'text'],
+    setup(props: any, ctx) {
+        return () => h('div', [
+            h('code', [props.info]),
+            h('span', ["检测结果：" + props.text]),
+        ])
+    },
 })
+
+const ExplorerInfo = getExplorerInfo()
+const IeInfo = IEVersion()
+const html5PlusInfo = isHtml5Plus()
+const mobileInfo = isMobile()
+const weChatInfo = isWeChat()
+const wxMpInfo = ref<boolean>();
+; (async () => {
+    try {
+        await isWxMp()
+        wxMpInfo.value = true
+    } catch (error) {
+        wxMpInfo.value = false
+    }
+})();
+
 </script>
+<style lang="less" scoped></style>

packages/browser/src/event/docs/demo.vue

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <n-space style="margin-bottom: 10px;">
-      <n-button @click="onBindEvent">绑定点击事件</n-button>
-      <n-button @click="onRemoveEvent">移除点击事件</n-button>
-    </n-space>
-    <n-tag><span ref="targetRef">{{ isBind ? '已绑定,点击测试' : '未绑定' }}</span></n-tag>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from "vue";
-import { on, off } from "@xyx-utils/browser/event";
-
-const targetRef = ref<HTMLElement>();
-const isBind = ref(false)
-
-function clickNode() {
-  alert("click");
-}
-
-function onBindEvent() {
-  on(targetRef.value, "click", clickNode);
-  isBind.value = true
-}
-
-function onRemoveEvent() {
-  off(targetRef.value, "click", clickNode);
-  isBind.value = false
-}
-</script>
-<style lang="less" scoped></style>

packages/browser/src/event/docs/index.vue

@@ -1,10 +1,31 @@
 <template>
-    <ClientComp></ClientComp>
+  <div>
+    <n-space style="margin-bottom: 10px;">
+      <n-button @click="onBindEvent">绑定点击事件</n-button>
+      <n-button @click="onRemoveEvent">移除点击事件</n-button>
+    </n-space>
+    <n-tag><span ref="targetRef">{{ isBind ? '已绑定,点击测试' : '未绑定' }}</span></n-tag>
+  </div>
 </template>
-<script setup>
+<script lang="ts" setup>
-import { defineClientComponent } from 'vitepress'
+import { ref } from "vue";
+import { on, off } from "@xyx-utils/browser/event";
 
-const ClientComp = defineClientComponent(() => {
+const targetRef = ref<HTMLElement>();
-    return import('./demo.vue')
+const isBind = ref(false)
-})
+
+function clickNode() {
+  alert("click");
+}
+
+function onBindEvent() {
+  on(targetRef.value, "click", clickNode);
+  isBind.value = true
+}
+
+function onRemoveEvent() {
+  off(targetRef.value, "click", clickNode);
+  isBind.value = false
+}
 </script>
+<style lang="less" scoped></style>

packages/browser/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./event";
 export * from "./check";
 export * from "./scrollTo";
+// export * from "./sessionStorage";

packages/browser/src/scrollTo/docs/demo.vue

@@ -1,15 +0,0 @@
-<template>
-  <n-space style="position: fixed;top: 200px;">
-    <n-button @click="onBindEvent(1000)">点击滚动到1000位置</n-button>
-    <n-button @click="onBindEvent(0)">点击滚动到顶部</n-button>
-  </n-space>
-</template>
-<script lang="ts" setup>
-import { scrollTo } from "@xyx-utils/browser/scrollTo";
-
-function onBindEvent(height) {
-  scrollTo(height, 1000)
-}
-
-</script>
-<style lang="less" scoped></style>

packages/browser/src/scrollTo/docs/index.vue

@@ -1,10 +1,15 @@
 <template>
-    <ClientComp></ClientComp>
+  <n-space style="position: fixed;top: 200px;">
+    <n-button @click="onBindEvent(1000)">点击滚动到1000位置</n-button>
+    <n-button @click="onBindEvent(0)">点击滚动到顶部</n-button>
+  </n-space>
 </template>
-<script setup>
+<script lang="ts" setup>
-import { defineClientComponent } from 'vitepress'
+import { scrollTo } from "@xyx-utils/browser/scrollTo";
+
+function onBindEvent(height) {
+  scrollTo(height, 1000)
+}
 
-const ClientComp = defineClientComponent(() => {
-    return import('./demo.vue')
-})
 </script>
+<style lang="less" scoped></style>

packages/browser/src/sessionStorage/__tests__/index.ts

@@ -0,0 +1,30 @@
+import { on, off } from "@xyx-utils/browser";
+
+describe("测试 on 与 off", () => {
+    it("触发多次click事件", () => {
+        const mockListener = vi.fn();
+        const element = document.createElement("div");
+        on(element, "click", mockListener);
+
+        const event = new MouseEvent("click");
+        element.dispatchEvent(event);
+        element.dispatchEvent(event);
+
+        expect(mockListener).toBeCalledTimes(2);
+    });
+    it("仅触发一次click事件", () => {
+        const mockListener = vi.fn();
+        const element = document.createElement("div");
+        on(element, "click", mockListener);
+
+        const event = new MouseEvent("click");
+        element.dispatchEvent(event);
+
+        off(element, "click", mockListener);
+
+        element.dispatchEvent(event);
+        element.dispatchEvent(event);
+
+        expect(mockListener).toBeCalledTimes(1);
+    });
+});

packages/browser/src/sessionStorage/docs/index.md

@@ -0,0 +1,7 @@
+---
+title: session存储
+---
+
+## Demo
+
+<preview path="./index.vue" title="sessionStorage" description="session存储工具"></preview>

packages/browser/src/sessionStorage/docs/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        sada
+    </div>
+</template>
+<script setup>
+import { session_storage, remove_session_storage_item, clear_session_storage } from "@xyx-utils/browser/sessionStorage"
+
+session_storage("asda", "sada")
+</script>

packages/browser/src/sessionStorage/index.ts

@@ -0,0 +1,55 @@
+const _is_session_storage = !!window.sessionStorage;
+let _data_session_dom, _dataSessionDom_name = window.location.hostname || 'sessionUserData';
+if (!_is_session_storage) {
+    try {
+        _data_session_dom = document.createElement('input');
+        _data_session_dom.type = 'hidden';
+        _data_session_dom.style.display = "none";
+        _data_session_dom.addBehavior('#default#userData'); //userData的语法
+        document.body.appendChild(_data_session_dom);
+        _data_session_dom.expires = new Date($.date().addDays(365)).toUTCString(); //设定过期时间
+        //加载userdata
+        _data_session_dom.load(_dataSessionDom_name);
+    } catch (e) {
+        _data_session_dom = null;
+        console.log("userData初始化失败！");
+    }
+}
+export const session_storage = (key, value) => {
+    let _return_value;
+    try {
+        if (_is_session_storage) {
+            if (value != undefined) {
+                sessionStorage.setItem(encodeURIComponent(key), encodeURIComponent(value));
+            } else {
+                _return_value = sessionStorage.getItem(encodeURIComponent(key));
+                return _return_value ? decodeURIComponent(_return_value) : null;
+            }
+        } else if (_data_session_dom) {
+            if (value != undefined) {
+                _data_session_dom.setAttribute(key, value);
+                _data_session_dom.save(_dataSessionDom_name);
+            } else {
+                _return_value = _data_session_dom.getAttribute(key);
+                return _return_value ? decodeURIComponent(_return_value) : null;
+            }
+        }
+    } catch (e) {
+        return false;
+    }
+};
+export const remove_session_storage_item = (key) => {
+    if (_is_session_storage) {
+        sessionStorage.removeItem(encodeURIComponent(key));
+    } else if (_data_session_dom) {
+        _data_session_dom.removeAttribute(encodeURIComponent(key));
+        _data_session_dom.save(_dataSessionDom_name);
+    }
+};
+export const clear_session_storage = () => {
+    if (_is_session_storage) {
+        sessionStorage.clear();
+    } else {
+        _data_session_dom.remove();
+    }
+};

packages/core/src/array/demote/docs/index.md

@@ -0,0 +1,7 @@
+---
+title: demote
+category: 数组
+source-path: /docs/array/demote.html
+---
+
+<preview path="./index.vue" title="@niu-tools/core" description="demote"></preview>

packages/core/src/array/demote/docs/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { demote } from "@xyx-utils/core"
+import { ref } from "vue"
+
+
+const outout = ref<string[]>([])
+
+console.log = (str) => {
+    outout.value.push(str)
+}
+
+function run() {
+    console.log(demote([1,2,3, [1,2,3]]));
+}
+
+</script>
+
+<template>
+    <div>
+        <div>
+            [1,2,3, [1,2,3]]
+        </div>
+        <button @click="run">运行</button>
+        <div>输出：</div>
+        <div v-for="i in outout">
+            {{ i }}
+        </div>
+    </div>
+</template>

packages/core/src/throttle/index.ts

@@ -1,3 +1,10 @@
+/**
+ * 函数防抖
+ * @param fn 防抖构造函数
+ * @param wait 防抖时间
+ * @param options 防抖参数
+ * @returns 处理过的函数
+ */
 export function throttle<T extends any[], R = void>(
     fn: (...args: T) => R, 
     wait: number = 200,

packages/core/src/utils/index.ts

@@ -1,4 +1,8 @@
-
+/**
+ * 判断是否是数组
+ * @param arr 数组
+ * @returns 是否是数组
+ */
 export function isArray(arr) {
     return Array.isArray(arr)
 }