@xingtukeji/micro 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingtukeji/micro",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "description": "",
   "main": "dist/index.js",

package/vite.config.ts

@@ -12,7 +12,6 @@ export default defineConfig(({ mode }) => {
         name: '__xt_micro__',
         formats: ['es'],
         fileName: (format, entryName) => `index.js`,
-        cssFileName: 'my-lib-style',
       },
       target: 'es2015',
       emptyOutDir: true, //去掉打包到项目外的警告

package/src/api.ts

@@ -1,108 +0,0 @@
-import type {AppOption, App} from './index.d'
-import {MicroApp} from './parent'
-import {microInit} from './child'
-
-let _apps: Record<string, App> = {}
-
-const defaultAppOption: AppOption = {
-  url: '',
-  name: '',
-  sync: true
-}
-/**
- * 安装微应用
- * @param app
- */
-export const setupApp = (app: AppOption): App | undefined => {
-  // 如果app的url属性不存在或者为空字符串或者为'undefined'，则打印错误信息并返回
-  if(!app.url || app.url === '' || app.url === 'undefined'){
-    console.error('app url is required', app)
-    return
-  }
-  // 将defaultAppOption对象中的属性赋值给app对象
-  const op = Object.assign({}, app, defaultAppOption)
-  // 将app对象中的属性和MicroApp类的实例赋值给_apps对象中的app.name属性
-  _apps[app.name] = {
-    ...op,
-    instance: new MicroApp(app),
-  }
-  // 返回_apps对象中的app.name属性
-  return _apps[app.name]
-}
-
-// 导出一个函数，用于获取指定名称的应用
-export const getApp = (name: string): App => {
-  // 返回指定名称的应用
-  return _apps[name]
-}
-
-/**
- * 设置应用配置
- * @param {App} app - 应用对象
- * @param {Partial<AppOption>} options - 应用选项（可选）
- * @returns {App} - 设置后的应用对象
- */
-const setApp = (app: App, options?: Partial<AppOption>) => {
-  // 返回一个对象，该对象将app和options合并
-  return (_apps[app.name] = {
-    ...app,
-    ...options,
-  })
-}
-/**
- * 启动微应用
- * @param name 应用名称
- * @param options 应用配置
- * @returns
- */
-export const startApp = (name: string, options?: Partial<AppOption>) => {
-  // 返回一个Promise对象
-  return new Promise((resolve, reject) => {
-    // 调用getApp函数，传入name参数，获取app对象
-    let app = getApp(name)
-    // 如果app对象存在
-    if (app) {
-      // 如果options参数存在
-      if (options) {
-        // 调用app对象的changeOptions方法，传入options参数
-        app.instance.changeOptions(options)
-        // 调用setApp函数，传入app对象和options参数，重新设置app对象
-        app = setApp(app, options)
-      }
-      // 如果app对象的preload属性存在
-      if (app.preload) {
-        // 调用app对象的preloadRender方法，传入app对象的el属性
-        app.instance.preloadRender(app.el)
-      } else {
-        // 否则，调用app对象的mount方法，传入app对象的el属性
-        app.instance.mount(app.el)
-      }
-      // 调用_postMicro函数，传入app对象
-      // _postMicro(app)
-      // 调用resolve方法，传入app对象
-      resolve(app)
-    } else {
-      // 否则，调用reject方法，传入'app not found'字符串
-      reject('app not found')
-    }
-  })
-}
-
-/**
- * 停止指定名称的应用程序
- * @param {string} name - 应用程序的名称
- */
-export const stopApp = (name: string) => {
-  // 获取名为name的app
-  let app = getApp(name)
-  // 如果app存在
-  if (app) {
-    // 调用app的unmount方法
-    app.instance.unmount()
-  }
-}
-
-
-export {
-  microInit
-}

package/src/child.ts

@@ -1,186 +0,0 @@
-import {getQueryParameter} from './utils'
-import {CONSTANT} from './types'
-import {MicroApp} from './parent'
-import {MicroInitOptions} from './index.d'
-/**
- * 微应用-子应用初始化
- * 此时方法上下文是子应用
- * 非必须，但建议使用
- * @param options
- */
-export const microInit = async (options: MicroInitOptions = {}) => {
-  //处理url参数
-  const micro = getQueryParameter(CONSTANT.IS_MICRO)
-  const microName = getQueryParameter(CONSTANT.MICRO_NAME)
-  //设置环境变量
-  if (micro) {
-    window[CONSTANT.IS_MICRO] = true
-  }
-  // console.log(`子应用「${microName}」初始化`, document)
-  // 尝试全局隐藏 header，该方式有一定的入侵，
-  function addGlobalStyle(css: string) {
-    var styleSheet = document.styleSheets[0];
-    if (!styleSheet) {
-        var style = document.createElement('style');
-        document.head.appendChild(style);
-        styleSheet = style.sheet!;
-    }
-    styleSheet.insertRule(css, styleSheet.cssRules.length);
-  }
-  // addGlobalStyle('._hedaui-header { display: none !important; }')
-  if(options.hideHeaderCssSelector) {
-    addGlobalStyle(`${options.hideHeaderCssSelector} { display: none !important; }`)
-  }
-  // 子应用监听message，设置环境变量
-  window.addEventListener('message', (e) => {
-    if (e.data.cmd === `$xt/micro/${microName}`) {
-      console.log('子应用收到消息：', microName, )
-      window[CONSTANT.MICRO_APP] = { ...e.data.data, mainBaseURL: e.origin }
-    }
-  })
-  patchIframeHistory(window)
-
-  // window.addEventListener('load', () => {
-  //   console.log('子应用加载完成：', microName, window.location.href)
-  //   // 监听 popstate 事件
-  //   // window.addEventListener('popstate', function (event) {
-  //   //   console.log('History state changed:', event.state);
-  //   //   // 在这里可以根据新的历史状态进行相应的页面更新操作
-  //   // });
-  //   // patchIframeHistory(window, "http://localhost:5173", "http://localhost:8888")
-  // })
-
-  
-
-  //处理token
-  const token = getQueryParameter(CONSTANT.MICRO_TOKEN)
-  options.authHandler && token &&  await options.authHandler(token)
-}
-
-//子应用给父应用同步路由
-const _syncMicroPath = (app: MicroApp) => {
-  // console.log(`子应用给父应用「${app.app.name}」同步路由`, app.dom)
-  const parentWindow = window.parent;
-  const message = 'Hello from child!';
-  parentWindow.postMessage(message, 'http://localhost:8080');
-  app.dom?.contentWindow?.postMessage
-  ({
-    cmd: `$xt/micro/${app.app.name}/sync`,
-    data: {
-      name: app.app.name,
-      url: app.app.url,
-      preload: app.app.preload,
-      // params: app.params
-    }
-  })
-}
-
-/**
- * 对iframe的history的pushState和replaceState进行修改
- * 将从location劫持后的数据修改回来，防止跨域错误
- * 同步路由到主应用
- * @param iframeWindow
- * @param appHostPath 子应用的 host path
- * @param mainHostPath 主应用的 host path
- */
-function patchIframeHistory(iframeWindow: Window): void {
-  const history = iframeWindow.history;
-  const rawHistoryPushState = history.pushState;
-  const rawHistoryReplaceState = history.replaceState;
-  history.pushState = function (data: any, title: string, url?: string): void {
-    // debugger;
-    // const baseUrl =
-    //   mainHostPath + iframeWindow.location.pathname + iframeWindow.location.search + iframeWindow.location.hash;
-    // const mainUrl = getAbsolutePath(url?.replace(appHostPath, ""), baseUrl);
-    // const ignoreFlag = url === undefined;
-
-    rawHistoryPushState.call(history, data, title, url);
-    // if (ignoreFlag) return;
-    // updateBase(iframeWindow, appHostPath, mainHostPath);
-    syncUrlToWindow();
-  };
-  history.replaceState = function (data: any, title: string, url?: string): void {
-    // debugger;
-    // const baseUrl =
-    //   mainHostPath + iframeWindow.location.pathname + iframeWindow.location.search + iframeWindow.location.hash;
-    // const mainUrl = getAbsolutePath(url?.replace(appHostPath, ""), baseUrl);
-    // const ignoreFlag = url === undefined;
-
-    rawHistoryReplaceState.call(history, data, title, url);
-    // if (ignoreFlag) return;
-    // updateBase(iframeWindow, appHostPath, mainHostPath);
-    syncUrlToWindow();
-  };
-}
-/**
- * 同步子应用路由到主应用路由
- */
-// 导出一个函数，用于同步url到window
-export function syncUrlToWindow(): void {
-  if(!window[CONSTANT.MICRO_APP]) return
-  const { name, sync, mainBaseURL } = window[CONSTANT.MICRO_APP];
-  // console.trace('syncUrlToWindow')
-  //todo 此处应该postmessage到主应用，主应用再进行同步路由
-  const curUrl = window.location.pathname + window.location.search + window.location.hash;
-  window.parent.postMessage({
-    cmd: '$xt/micro/sync',
-    data: {
-      name: name,
-      url: window.encodeURIComponent(curUrl)
-    }
-  }, mainBaseURL);
-  
-  // debugger
-  // let winUrlElement = anchorElementGenerator(window.parent.location.href);
-  // const queryMap = getAnchorElementQueryMap(winUrlElement);
-  // // 非同步且url上没有当前id的查询参数，否则就要同步参数或者清理参数
-  // if (!sync && !queryMap[name]) { 
-  //   (winUrlElement = null)
-  //   return
-  // };
-  
-  // const curUrl = iframeWindow.location.pathname + iframeWindow.location.search + iframeWindow.location.hash;
-  // let validShortPath = "";
-  // // 同步
-  // if (sync) {
-  //   queryMap[name] = window.encodeURIComponent(
-  //     curUrl
-  //   );
-  //   // 清理
-  // } else {
-  //   delete queryMap[name];
-  // }
-  // const newQuery =
-  //   "?" +
-  //   Object.keys(queryMap)
-  //     .map((key) => key + "=" + queryMap[key])
-  //     .join("&");
-  // winUrlElement.search = newQuery;
-  // console.log('window', iframeWindow.parent.location.href)
-  // // if (winUrlElement.href !== iframeWindow.parent.location.href) {
-  // //   console.log('window', iframeWindow.parent)
-  // //   // iframeWindow.parent.history.replaceState(null, "", winUrlElement.href);
-  // //   // window.history.replaceState(null, "", winUrlElement.href);
-  // // }
-  // winUrlElement = null;
-}
-
-/**
- * 同步主应用路由到子应用
- */
-export function syncUrlToIframe(iframeWindow: Window): void {
-  // 获取当前路由路径
-  const { pathname, search, hash } = iframeWindow.location;
-  const { id, url, sync, execFlag, prefix, inject } = iframeWindow.__WUJIE;
-
-  // 只在浏览器刷新或者第一次渲染时同步
-  const idUrl = sync && !execFlag ? getSyncUrl(id, prefix) : url;
-  // 排除href跳转情况
-  const syncUrl = (/^http/.test(idUrl) ? null : idUrl) || url;
-  const { appRoutePath } = appRouteParse(syncUrl);
-
-  const preAppRoutePath = pathname + search + hash;
-  if (preAppRoutePath !== appRoutePath) {
-    iframeWindow.history.replaceState(null, "", inject.mainHostPath + appRoutePath);
-  }
-}

package/src/components/XTMicroView.vue

@@ -1,72 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref, watch, onUnmounted } from 'vue';
-import { startApp, stopApp } from '../api'
-const props = defineProps({
-  appId: String
-})
-
-const refPanel = ref()
-const init = () => {
-  props.appId && startApp(props.appId, {
-    el: refPanel.value
-  });
-}
-
-watch(() => props.appId, (newVal, oldVal) => {
-  if(newVal !== oldVal && oldVal){
-    stopApp(oldVal)
-  }
-  init()
-})
-
-
-onMounted(() => {
-  init()
-})
-
-onUnmounted(()=>{
-  console.log('微应用销毁', props.appId)
-})
-</script>
-
-<template>
-  <div ref="refPanel" class="xt-micro w-100% h-100% overflow-hidden"></div>
-</template>
-
-<style lang="postcss" scoped></style>
-<style>
-.xt-micro{
-  background-color: #fff;
-}
-.xt-micro::before{
-  content: '加载中';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right:0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: -1;
-}
-.micro-iframe{
-  width: 100%;
-  height: 100%;
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-.micro-iframe::after{
-  content: '加载中';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right:0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #fff;
-}
-</style>

package/src/index.d.ts

@@ -1,29 +0,0 @@
-
-import {MicroApp} from './parent'
-
-export interface AppOption {
-  name: string
-  url: string
-  el?: HTMLElement | string
-  preload?: boolean
-  token?: () => string | string
-  params?: { [key: string]: any }
-  sync?: boolean
-}
-export interface App extends AppOption {
-  instance: MicroApp
-}
-export interface MicroInitOptions {
-  hideHeaderCssSelector?: string
-  authHandler?: (token: string) => void
-}
-
-// 扩展 Window 接口，防止ts报错
-declare global {
-  interface Window {
-    [key: string]: any
-  }
-}
-
-
-export * from './api'

package/src/index.ts

@@ -1,16 +0,0 @@
-
-
-import type { App } from 'vue'
-import XTMicroView from './components/XTMicroView.vue'
-
-
-
-import {mainMicroInit} from './parent'
-export * from './api'
-
-export default {
-  install: (app: App, _options: any = {}) => {
-    app.component("xt-micro-view", XTMicroView);
-    mainMicroInit()
-  }
-}

package/src/parent.ts

@@ -1,268 +0,0 @@
-import { ref } from 'vue'
-import {AppOption, App} from './index.d'
-import {CONSTANT} from './types'
-import {getQueryParameter, addOrReplaceUrlParam, getAbsolutePath} from './utils'
-
-/**
- * 判断是否在微应用中
- */
-const _isMicro = ref(false)
-Object.defineProperty(window, CONSTANT.IS_MICRO, {
-  get: function () {
-    return _isMicro.value
-  },
-  set: function (newValue) {
-    _isMicro.value = newValue
-  },
-})
-export const isMicro = _isMicro
-
-/**
- * 生成微应用id
- * 增加前缀
- * @param name 微应用名称（唯一）
- * @returns 返回dom id
- */
-const generateId = (name: string) => {
-  return `${CONSTANT.DOM_ID_PREFIX}${name}`
-}
-/**
- * 处理微应用url
- * @param url 微应用url
- * @param params 携带参数
- * @returns 拼接后的url
- */
-const generateURL = (app: AppOption) => {
-  // 判断变量是否为对象
-  function isObject(variable: unknown) {
-    return variable !== null && typeof variable === 'object' && !Array.isArray(variable)
-  }
-  // 获取params参数
-  const _parmas = typeof app.params === 'function' ? app.params() : isObject(app.params) ? app.params : {}
-  // 获取token参数
-  const _token = typeof app.token === 'function' ? app.token() : isObject(app.token) ? app.token : ''
-  // 创建URL对象
-  const url = new URL(app.url.indexOf('http') > -1 ? app.url : window.location.origin + app.url)
-  // 获取microBakUrl参数
-  const microBakUrl = getQueryParameter(app.name)
-  // 如果microBakUrl存在
-  if(microBakUrl){
-    // 获取绝对路径
-    const temp = getAbsolutePath(microBakUrl, app.url, true)
-    // 如果绝对路径存在
-    if(temp){
-      // 创建URL对象
-      const tempURL = new URL(temp);
-      // 获取searchParams参数
-      const tempSearchParams = tempURL.searchParams
-      // 遍历searchParams参数
-      tempSearchParams.forEach((value, key) => {
-        // 设置url的searchParams参数
-        url.searchParams.set(key, value)
-      })
-      // 设置url的hash参数
-      url.hash = tempURL.hash
-    }
-  }
-
-  // 设置url的searchParams参数
-  url.searchParams.set(CONSTANT.IS_MICRO, true+'')
-  url.searchParams.set(CONSTANT.MICRO_NAME, app.name)
-  _token && url.searchParams.set(CONSTANT.MICRO_TOKEN, _token)
-
-  if(_parmas){
-    // 设置url的searchParams参数
-    for(let key of Object.keys(_parmas)){
-      url.searchParams.set(key, _parmas[key])
-    }
-  }
-
-  // 清空主路由上的子应用路由sync参数
-  const mainURL = new URL(window.location.href)
-  mainURL.searchParams.delete(app.name)
-  window.history.replaceState({}, '', mainURL.href)
-  // 返回url的href属性
-  return url.href
-}
-
-export class MicroApp {
-  app: App | AppOption
-  dom: HTMLIFrameElement | undefined
-  panel: HTMLElement | undefined
-
-  constructor(app: AppOption) {
-    this.app = app
-    app.preload && this.preload()
-    this.dom = undefined
-    this.panel = undefined
-    return this
-  }
-
-  mount(el: HTMLElement | string | undefined, isHide = false) {
-    let panel: HTMLElement | null
-    if (el) {
-      if (typeof el === 'string') {
-        panel = document.querySelector(el)
-      } else {
-        panel = el
-      }
-      //这里清空了容器的内容，为了方便，如果还有其他元素需要特别处理，而且也影响元素再复用
-      panel!.innerHTML = ''
-    } else {
-      panel = document.body
-    }
-
-    if (panel) {
-      let ifr = <HTMLIFrameElement>document.getElementById(generateId(this.app.name))
-      if (!ifr) {
-        ifr = document.createElement('iframe')
-        ifr.id = generateId(this.app.name)
-        const url = generateURL(this.app)
-        ifr.src = url
-        ifr.classList.add('micro-iframe')
-        ifr.addEventListener('load', (event) => {
-          this.onLoad.call(this, event)
-        })
-        ifr.addEventListener('error', this.onError)
-        ifr.addEventListener('unload', this.onUnload)
-        this.dom = ifr
-      }
-      isHide ? (ifr.style.display = 'none') : ifr.style.removeProperty('display')
-      this.panel = panel
-      panel.appendChild(ifr)
-    } else {
-      throw new Error('el not found')
-    }
-  }
-
-  unmount() {
-    const appDom = document.getElementById(generateId(this.app.name))
-    if (appDom) {
-      if (this.app.preload) {
-        // if (this.preload){
-        appDom.style.display = 'none'
-        document.body.appendChild(appDom)
-      } else {
-        this.panel?.removeChild(appDom)
-      }
-    } else {
-      throw new Error('app dom not found')
-    }
-  }
-
-  /**
-   * 预加载渲染
-   * TODO 还差用户切走之后，如何将ifr还原回去，等待下次载入
-   * @param el 挂载dom对象
-   */
-  preloadRender(el: HTMLElement | string | undefined) {
-    // let appDom: HTMLElement | undefined = this.dom
-    this.mount(el)
-
-    // const appDom = document.getElementById(generateId(this.app.name))
-    // if (!appDom) {
-    //
-    //   this.render(el)
-    //   return
-    // }
-    //
-    // let panel
-    // if (typeof el === 'string') {
-    //   panel = document.querySelector(el)
-    // } else {
-    //   panel = el
-    // }
-    // appDom!.style.removeProperty('display')
-    // panel?.appendChild(appDom)
-  }
-
-  /**
-   * 预加载app，先放到body，待启动时，挪过来
-   */
-  preload() {
-    this.mount(undefined, true)
-  }
-
-  changeOptions(options: Partial<AppOption>) {
-    this.app = {
-      ...this.app,
-      ...options,
-    }
-  }
-
-  onLoad(_event: Event) {
-    // console.log('子应用 onload', this.app.name)
-    // console.log('onLoad',this.app, this.panel, this.dom)
-    // if(this.dom){
-    //   const headerDom = this.dom.contentWindow.document.querySelector('._hedaui-header')
-    //   headerDom && (headerDom.style.display = 'none')
-    // }
-
-    //监听message，设置环境变量
-    // console.log('window', window['__XT_MICRO'])
-    // window.addEventListener('message', (e) => {
-    //   console.log('1111', this.app.name, window.document)
-    //   if (e.data.cmd === `$xt/micro/${this.app.name}`) {
-    //     // console.log('micro', e.data.data)
-    //     window[CONSTANT.MICRO_APP] = e.data.data
-    //     const headerDom = document.querySelector('._hedaui-header')
-    //     headerDom && (headerDom.style.display = 'none')
-    //   }
-    // })
-    _postMicro(this)
-  }
-
-  onUnload(_event: Event) {}
-
-  onError() {}
-}
-
-
-
-
-
-/**
- * 父应用给子应用发送消息
- * @param app 微应用对象
- */
-const _postMicro = (app: MicroApp) => {
-  // console.log(`父应用给子应用「${app.app.name}」发送消息`, app.dom)
-  app.dom?.contentWindow?.postMessage(
-    {
-      cmd: `$xt/micro/${app.app.name}`,
-      data: {
-        name: app.app.name,
-        url: app.app.url,
-        preload: app.app.preload,
-        sync: app.app.sync || true
-        // params: app.params
-      },
-    },
-    '*'
-  )
-}
-
-
-
-/**
- * 初始化主应用微前端
- */
-export const mainMicroInit = () => {
-  // 监听window对象的消息事件
-  window.addEventListener('message', (e)=>{
-    // 同步子应用路由到主应用上
-    if (e.data.cmd === '$xt/micro/sync') {
-      // 过滤掉微应用的默认参数
-      const whitelist = [CONSTANT.IS_MICRO, CONSTANT.MICRO_NAME, CONSTANT.MICRO_TOKEN]
-      const tempUrl = new URL(window.decodeURIComponent(e.data.data.url), e.origin)
-      for(let key of whitelist){
-        tempUrl.searchParams.delete(key)
-      }
-      console.log('tempUrl', tempUrl.href)
-      // 调用addOrReplaceUrlParam函数，将e.data.data.name和e.data.data.url作为参数传入
-      const curUrl = addOrReplaceUrlParam(window.location.href, e.data.data.name, tempUrl.href)
-      // 使用replaceState方法替换当前页面的URL
-      window.history.replaceState(null, "", curUrl);
-    }
-  })
-}

package/src/types.ts

@@ -1,8 +0,0 @@
-export const CONSTANT: Record<string, string> = {
-  KEY: '$xtm', // 父应用注入子应用实例的key
-  IS_MICRO: '__XT_MICRO', // 是否在微应用中
-  MICRO_NAME: '__XT_MICRO_NAME', // 微应用名称
-  MICRO_TOKEN: '__XT_MICRO_TOKEN', // 微应用token
-  MICRO_APP: '__XT_MICRO_APP', // 微应用实例
-  DOM_ID_PREFIX: 'xt-micro-ifr-', // dom id前缀
-}

package/src/utils.ts

@@ -1,94 +0,0 @@
-// 获取URL中的查询参数
-// 导出一个函数，用于获取查询参数
-export function getQueryParameter(name: string, url = window.location.href): string | null {
-  // 将参数名中的中括号替换为转义字符
-  name = name.replace(/[\[\]]/g, '\\$&')
-  // 创建正则表达式，匹配查询参数
-  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
-    results = regex.exec(url)
-  // 如果没有匹配到查询参数，返回null
-  if (!results) return null
-  // 如果没有匹配到参数值，返回空字符串
-  if (!results[2]) return ''
-  // 对参数值进行解码，并去除首尾空格
-  return decodeURIComponent(results[2].replace(/\+/g, ' ')).trim()
-}
-
-// 导出一个函数，用于获取绝对路径
-export function getAbsolutePath(url: string|undefined, base: string, hash?: boolean): string | undefined {
-  try {
-    // 为空值无需处理
-    if (url) {
-      // 需要处理hash的场景
-      if (hash && url.startsWith("#")) return url;
-      return new URL(url, base).href;
-    } else return url;
-  } catch {
-    return url;
-  }
-}
-
-// 导出一个函数，用于生成一个HTMLAnchorElement元素
-export function anchorElementGenerator(url: string): HTMLAnchorElement {
-  // 创建一个a标签元素
-  const element = window.document.createElement("a");
-  // 设置a标签的href属性为传入的url
-  element.href = url;
-  element.href = element.href; // hack ie
-  return element;
-}
-
-// 导出一个函数，用于获取锚点元素的查询字符串映射
-export function getAnchorElementQueryMap(anchorElement: HTMLAnchorElement): { [key: string]: string } {
-  // 获取锚点元素的查询字符串
-  const queryString = anchorElement.search || "";
-  // 将查询字符串转换为URLSearchParams对象，并使用reduce方法将其转换为键值对映射
-  return [...new URLSearchParams(queryString).entries()].reduce((p, c) => {
-    // 将键值对添加到映射中
-    p[c[0]] = c[1];
-    // 返回映射
-    return p;
-  }, {} as Record<string, string>);
-}
-
-
-//防抖函数，支持传过来一个函数，返回一个防抖后的函数
-export function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-
-  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
-      const context = this;
-
-      if (timer) {
-          clearTimeout(timer);
-      }
-
-      timer = setTimeout(() => {
-          func.apply(context, args);
-      }, delay);
-  };
-}
-
-export function addOrReplaceUrlParam(url: string, paramName: string, paramValue: string): string {
-  // 先分割出 URL 的基础部分和哈希部分
-  const [baseUrl, hash] = url.split('#');
-  const urlObj = new URL(baseUrl);
-  const searchParams = urlObj.searchParams;
-
-  // 如果参数已经存在，则替换其值
-  if (searchParams.has(paramName)) {
-      searchParams.set(paramName, paramValue);
-  } else {
-      // 如果参数不存在，则添加该参数
-      searchParams.append(paramName, paramValue);
-  }
-// 如果原 URL 有哈希部分，再把它加回去
-  if (hash) {
-    urlObj.hash = hash
-  }
-  
-  urlObj.search = searchParams.toString();
-  let newUrl = urlObj.toString();
-  
-  return newUrl;
-}