inl-ui 0.1.74 → 0.1.76

package/dist/components/index.js

@@ -1,12 +1,12 @@
-import { defineComponent, createVNode, ref, watch, resolveComponent, isVNode, inject, computed, onActivated, onDeactivated, onBeforeUnmount, watchEffect, nextTick, Fragment, withDirectives, vShow, toRaw, reactive, provide, createTextVNode, onMounted, KeepAlive, shallowRef, onBeforeMount, mergeProps, onBeforeUpdate, Teleport } from 'vue';
+import { defineComponent, createVNode, ref, watch, resolveComponent, isVNode, computed, onBeforeUnmount, inject, onActivated, onDeactivated, nextTick, watchEffect, Fragment, withDirectives, vShow, toRaw, reactive, provide, createTextVNode, onMounted, KeepAlive, shallowRef, onBeforeMount, mergeProps, onBeforeUpdate, Teleport } from 'vue';
 import { createFromIconfontCN, SearchOutlined, DownOutlined, PoweroffOutlined, MenuUnfoldOutlined, MenuFoldOutlined, SkinFilled, FullscreenOutlined, CaretUpOutlined, CaretRightOutlined, CaretDownOutlined, FileExcelTwoTone, InboxOutlined, MessageOutlined } from '@ant-design/icons-vue';
 import { useRoute, useRouter } from 'vue-router';
-import { useMounted, resolveRef, useThrottleFn, useMouseInElement, useVModel, useMagicKeys, whenever, watchArray, useEventListener, useSessionStorage, useFullscreen, useLocalStorage, useToggle, useElementBounding, useMemory, useWindowSize, useClipboard, useBreakpoints, breakpointsAntDesign } from '@vueuse/core';
+import { useMounted, resolveRef, useThrottleFn, useLocalStorage, useFullscreen, useMouseInElement, useVModel, useMagicKeys, whenever, watchArray, useEventListener, useSessionStorage, useElementBounding, useToggle, useMemory, useWindowSize, useClipboard, useBreakpoints, breakpointsAntDesign } from '@vueuse/core';
 import axios$2 from 'axios';
-import { message, Menu, MenuItem, Input as Input$1, Badge, Avatar as Avatar$1, MenuDivider, Modal, SubMenu, Dropdown, Tooltip, Select, Layout as Layout$1, LayoutHeader, LayoutSider, LayoutContent, Form, Row, Col, FormItem, SelectOption, Switch, InputNumber } from 'ant-design-vue';
+import { message, Menu, MenuItem, Input as Input$1, Badge, Avatar as Avatar$1, MenuDivider, Modal, SubMenu, Dropdown, Tooltip, Select, LayoutHeader, LayoutSider, Layout as Layout$1, LayoutContent, Form, Row, Col, FormItem, SelectOption, Switch, InputNumber } from 'ant-design-vue';
 import _, { isPlainObject as isPlainObject$1, omit, differenceBy, cloneDeep, isObject as isObject$2, concat } from 'lodash';
-import dayjs from 'dayjs';
 import { loadMicroApp } from 'qiankun';
+import dayjs from 'dayjs';
 import 'vite-plugin-qiankun';
 import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
 import { XPopup, CommentBlock, setAxiosOption } from '@sszj-temp/mobile';
@@ -252,7 +252,7 @@ function useActiveMenu(menuList, extraPages, isNav = false, watchOnce = false, i
   return menu;
 }
 
-function _isSlot$d(s) {
+function _isSlot$e(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const Header$1 = defineComponent({
@@ -347,7 +347,7 @@ const Header$1 = defineComponent({
         "selectedKeys": acitveMenuKey.value,
         "onUpdate:selectedKeys": $event => acitveMenuKey.value = $event,
         "onSelect": handleMenuSelected
-      }, _isSlot$d(_slot = props.menu.map(item => createVNode(MenuItem, {
+      }, _isSlot$e(_slot = props.menu.map(item => createVNode(MenuItem, {
         "key": item.id,
         "title": item.name
       }, {
@@ -415,7 +415,7 @@ const Header$1 = defineComponent({
   }
 });
 
-function _isSlot$c(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const renderMenuItem = item => {
@@ -497,13 +497,91 @@ const SideMenu$1 = defineComponent({
         "onUpdate:openKeys": $event => expandKeys.value = $event,
         "selectedKeys": activeMenu.value,
         "onSelect": handleMenuSelect
-      }, _isSlot$c(_slot = props.menu.map(item => renderMenuItem(item))) ? _slot : {
+      }, _isSlot$d(_slot = props.menu.map(item => renderMenuItem(item))) ? _slot : {
         default: () => [_slot]
       });
     };
   }
 });
 
+function useActiveApp() {
+  const route = useRoute();
+  const activeAppName = computed(() => {
+    return route.path.split("/")[1];
+  });
+  return activeAppName;
+}
+
+const loadedApp = /* @__PURE__ */new Map();
+function useMicroApp(appList) {
+  const route = useRoute();
+  const activeAppName = useActiveApp();
+  const loadAppList = ref(Array.from(loadedApp.values()));
+  const appContainerList = ref([]);
+  const handleRouteChange = useThrottleFn(async () => {
+    const microAppName = activeAppName.value;
+    let microAppDefine = appList.find(item => item.name === microAppName);
+    if (!microAppDefine && !microAppName.startsWith("mtip-")) return;
+    const domId = `microApp_${microAppName}`;
+    if (!appContainerList.value.some(item => item.id === domId)) {
+      appContainerList.value.push({
+        name: microAppName,
+        id: domId
+      });
+    }
+    setTimeout(async () => {
+      const loadApp = loadedApp.get(microAppName);
+      if (loadApp) {
+        if (!loadApp.mounted) {
+          loadApp.app.mount();
+        }
+        return;
+      }
+      const app = loadMicroApp({
+        name: microAppDefine ? microAppDefine.name : microAppName,
+        entry: microAppDefine ? microAppDefine.entry : `/${microAppName}/`,
+        container: `#${domId}`
+      });
+      const microApp = {
+        name: microAppName,
+        domId,
+        app,
+        mounted: true
+      };
+      loadAppList.value.push(microApp);
+      loadedApp.set(microAppName, microApp);
+      await app.mountPromise;
+    }, 10);
+  }, 100);
+  watch(route, handleRouteChange, {
+    immediate: true
+  });
+  onBeforeUnmount(() => {
+    loadedApp.forEach(item => item.mounted = false);
+  });
+  return [loadAppList, appContainerList];
+}
+
+function onAddExtraTabs(handler) {
+  const route = useRoute();
+  const qiankunState = inject("qiankunState");
+  watch(() => qiankunState.value.extraTabs, (val = [], prev = []) => {
+    if (val.length > prev.length) {
+      const added = differenceBy(val, prev, item => item.key + item.uniqueKey).map(item => ({
+        ...item,
+        params: route.query
+      }));
+      handler(added.map(item => ({
+        ...item,
+        type: "extraTab"
+      })));
+    }
+  }, {
+    deep: true,
+    immediate: true
+  });
+}
+
 function useQiankunStateValue(key) {
   const qiankunState = inject("qiankunState");
   if (_.isEmpty(qiankunState)) return;
@@ -6411,82 +6489,73 @@ function useRouteActive() {
   return isActive;
 }
 
-function useActiveApp() {
-  const route = useRoute();
-  const activeAppName = computed(() => {
-    return route.path.split("/")[1];
+function useChildTheme(containerRef, isFullscreen, loadAppList) {
+  const theme = useLocalStorage("theme", "default");
+  const globalTheme = useQiankunStateValue("theme");
+  globalTheme.value = theme.value;
+  watch([theme, globalTheme, isFullscreen, loadAppList, containerRef], async () => {
+    if (containerRef.value) {
+      await nextTick();
+      const childContainerList = containerRef.value.querySelectorAll("[id^='__qiankun_microapp_wrapper_for_']");
+      const themeText = globalTheme.value === "dark" ? "dark" : "light";
+      for (const child of Array.from(childContainerList)) {
+        child.setAttribute("data-theme", themeText);
+        child.setAttribute("data-doc-theme", themeText);
+        if (isFullscreen.value) {
+          child.setAttribute("fullscreen", "");
+        } else {
+          child.removeAttribute("fullscreen");
+        }
+      }
+    }
+  }, {
+    immediate: true,
+    deep: true
   });
-  return activeAppName;
 }
 
-const loadedApp = /* @__PURE__ */new Map();
-function useMicroApp(appList) {
-  const route = useRoute();
-  const activeAppName = useActiveApp();
-  const loadAppList = ref(Array.from(loadedApp.values()));
-  const appContainerList = ref([]);
-  const handleRouteChange = useThrottleFn(async () => {
-    const microAppName = activeAppName.value;
-    let microAppDefine = appList.find(item => item.name === microAppName);
-    if (!microAppDefine && !microAppName.startsWith("mtip-")) return;
-    const domId = `microApp_${microAppName}`;
-    if (!appContainerList.value.some(item => item.id === domId)) {
-      appContainerList.value.push({
-        name: microAppName,
-        id: domId
-      });
+function useFullscreenLogic(containerRef, iframeList, activeKey) {
+  const isFullscreenIframe = ref(false);
+  const {
+    isFullscreen,
+    enter
+  } = useFullscreen(containerRef);
+  const {
+    elementY
+  } = useMouseInElement(containerRef);
+  const isTabsShow = ref(false);
+  watchEffect(() => {
+    if (isFullscreen.value) {
+      isTabsShow.value = false;
     }
-    setTimeout(async () => {
-      const loadApp = loadedApp.get(microAppName);
-      if (loadApp) {
-        if (!loadApp.mounted) {
-          loadApp.app.mount();
-        }
-        return;
-      }
-      const app = loadMicroApp({
-        name: microAppDefine ? microAppDefine.name : microAppName,
-        entry: microAppDefine ? microAppDefine.entry : `/${microAppName}/`,
-        container: `#${domId}`
-      });
-      const microApp = {
-        name: microAppName,
-        domId,
-        app,
-        mounted: true
-      };
-      loadAppList.value.push(microApp);
-      loadedApp.set(microAppName, microApp);
-      await app.mountPromise;
-    }, 10);
-  }, 100);
-  watch(route, handleRouteChange, {
-    immediate: true
   });
-  onBeforeUnmount(() => {
-    loadedApp.forEach(item => item.mounted = false);
+  watchEffect(() => {
+    if (elementY.value < 10) {
+      isTabsShow.value = true;
+    }
   });
-  return [loadAppList, appContainerList];
-}
-
-function onAddExtraTabs(handler) {
-  const route = useRoute();
-  const qiankunState = inject("qiankunState");
-  watch(() => qiankunState.value.extraTabs, (val = [], prev = []) => {
-    if (val.length > prev.length) {
-      const added = differenceBy(val, prev, item => item.key + item.uniqueKey).map(item => ({
-        ...item,
-        params: route.query
-      }));
-      handler(added.map(item => ({
-        ...item,
-        type: "extraTab"
-      })));
+  const isPadding = computed(() => {
+    let iframePadding = false;
+    if (activeKey.value) {
+      const currentIframe = iframeList.value.find(item => item.id === activeKey.value);
+      if (currentIframe) {
+        iframePadding = currentIframe.url.includes("hasPadding");
+        if (!iframePadding) return false;
+      }
     }
-  }, {
-    deep: true,
-    immediate: true
+    if (isFullscreen.value) return false;
+    return !isFullscreenIframe.value;
   });
+  const handleFullscreen = tab => {
+    isFullscreenIframe.value = tab.mode === 2;
+    enter();
+  };
+  return {
+    isFullscreen,
+    isTabsShow,
+    isPadding,
+    handleFullscreen
+  };
 }
 
 function setParam(searchParams, obj) {
@@ -6607,7 +6676,7 @@ const TabList = defineComponent({
       }
     });
     onBeforeUnmount(() => tabList.value = []);
-    watchArray(tabList, async (val, prev, added, removed) => {
+    watchArray(tabList, async (_val, _prev, _added, removed) => {
       for (const tab of removed) {
         if (tab.isExtraTab) {
           const idx = qiankunState.value.extraTabs.findIndex(item => item.key === tab.key && item.uniqueKey === tab.uniqueKey);
@@ -6855,32 +6924,33 @@ const TabList = defineComponent({
   }
 });
 
-const PageContent = defineComponent({
-  props: {
-    currMenu: {
-      type: Object
-    },
-    menu: {
-      type: Array,
-      default: () => []
-    },
-    extraPages: {
-      type: Array,
-      required: true
-    },
-    appList: {
-      type: Array,
-      required: true
-    },
-    showTabList: {
-      type: Boolean,
-      default: true
-    },
-    pageContainerRef: {
-      type: Object,
-      required: true
-    }
+const Props$1 = {
+  currMenu: {
+    type: Object
   },
+  menu: {
+    type: Array,
+    default: () => []
+  },
+  extraPages: {
+    type: Array,
+    required: true
+  },
+  appList: {
+    type: Array,
+    required: true
+  },
+  showTabList: {
+    type: Boolean,
+    default: true
+  },
+  pageContainerRef: {
+    type: Object,
+    required: true
+  }
+};
+const PageContent = defineComponent({
+  props: Props$1,
   setup(props, {
     emit
   }) {
@@ -6908,12 +6978,12 @@ const PageContent = defineComponent({
         extraPageList.value.splice(idx, 1);
       }
     };
-    const handleMenuChange = val => {
+    const handleMenuChange = (val, isFromMenu = false) => {
       if (!val) return;
       const routeQuery = {
         ...route.query
       };
-      const queryCombine = Object.assign(val.params || {}, routeQuery);
+      const queryCombine = Object.assign({}, val.params, routeQuery);
       if (val.isExtra) {
         const exist = extraPageList.value.find(item => item.key === val.key && item.uniqueKey === val.uniqueKey);
         if (!exist) {
@@ -6951,15 +7021,15 @@ const PageContent = defineComponent({
       const tab = _.cloneDeep(val);
       switch (mode) {
         case 0:
-          if (!isOpened) {
+          if (isOpened) {
+            openedTab.params = isFromMenu ? val.params : queryCombine;
+            val.params = isFromMenu ? val.params : queryCombine;
+          } else {
             tabList.value.push({
               ...tab,
               key: key ?? id,
               type: "menu"
             });
-          } else {
-            openedTab.params = queryCombine;
-            val.params = queryCombine;
           }
           const [path, currSearch = ""] = url.split("?");
           const searchObj = new URLSearchParams(currSearch);
@@ -7043,7 +7113,7 @@ const PageContent = defineComponent({
     }, {
       immediate: true
     });
-    watch(() => props.currMenu, handleMenuChange, {
+    watch(() => props.currMenu, val => handleMenuChange(val, true), {
       immediate: true
     });
     useEventListener("message", e => {
@@ -7072,85 +7142,38 @@ const PageContent = defineComponent({
     }, {
       immediate: true
     });
-    watch(() => qiankunState.value.activeTabKey, val => activeKey.value = val);
+    watch(() => qiankunState.value.activeTabKey, val => {
+      if (activeKey !== val) {
+        requestAnimationFrame(() => {
+          activeKey.value = val;
+        });
+      }
+    });
     onAddExtraTabs(added => {
       tabList.value.push(...added);
     });
-    const isFullscreenIframe = ref(false);
     const {
       isFullscreen,
-      enter
-    } = useFullscreen(containerRef);
-    const {
-      elementY
-    } = useMouseInElement(containerRef);
-    const isTabsShow = ref(false);
-    watchEffect(() => {
-      if (isFullscreen.value) {
-        isTabsShow.value = false;
-      }
-    });
-    watchEffect(() => {
-      if (elementY.value < 10) {
-        isTabsShow.value = true;
-      }
-    });
-    const isPadding = computed(() => {
-      let iframePadding = false;
-      if (activeKey.value) {
-        const currentIframe = iframeList.value.find(item => item.id === activeKey.value);
-        if (currentIframe) {
-          iframePadding = currentIframe.url.includes("hasPadding");
-          if (!iframePadding) return false;
-        }
-      }
-      if (isFullscreen.value) return false;
-      return !isFullscreenIframe.value;
-    });
-    const handleFullscreen = tab => {
-      isFullscreenIframe.value = tab.mode === 2;
-      enter();
-    };
+      handleFullscreen,
+      isPadding,
+      isTabsShow
+    } = useFullscreenLogic(containerRef, iframeList, activeKey);
     const handleRefreshIframe = async ({
       id
     }) => {
       const iframe = iframeList.value.find(item => item.id === id);
-      if (iframe) {
-        iframe.refreshKey = Date.now();
-        const reqCode = await checkIframeUrl(iframe.url);
-        iframe.reqCode = reqCode;
-      }
+      if (!iframe) return;
+      iframe.refreshKey = Date.now();
+      const reqCode = await checkIframeUrl(iframe.url);
+      iframe.reqCode = reqCode;
     };
     const handleRefreshExtraPage = ({
       key
     }) => {
       const page = extraPageList.value.find(item => item.key === key);
-      if (page) {
-        page.refreshKey = Date.now();
-      }
+      page && (page.refreshKey = Date.now());
     };
-    const theme = useLocalStorage("theme", "default");
-    const globalTheme = useQiankunStateValue("theme");
-    globalTheme.value = theme.value;
-    watch([theme, globalTheme, isFullscreen, loadAppList, containerRef], async () => {
-      if (containerRef.value) {
-        await nextTick();
-        const childContainerList = containerRef.value.querySelectorAll("[id^='__qiankun_microapp_wrapper_for_']");
-        const themeText = globalTheme.value === "dark" ? "dark" : "light";
-        for (const child of Array.from(childContainerList)) {
-          child.setAttribute("data-theme", themeText);
-          child.setAttribute("data-doc-theme", themeText);
-          if (isFullscreen.value) {
-            child.setAttribute("fullscreen", "");
-          } else {
-            child.removeAttribute("fullscreen");
-          }
-        }
-      }
-    }, {
-      immediate: true,
-      deep: true
-    });
+    useChildTheme(containerRef, isFullscreen, loadAppList);
     const closeExtraPage = tab => {
       tabListRef.value?.closeTab(tab);
     };
@@ -7159,122 +7182,186 @@ const PageContent = defineComponent({
         app.app.unmount();
       }
     });
-    return () => createVNode("div", {
-      "class": "page-content",
-      "ref": containerRef
-    }, [props.showTabList && withDirectives(createVNode(TabList, {
-      "ref": tabListRef,
-      "activeKey": activeKey.value,
-      "onUpdate:activeKey": $event => activeKey.value = $event,
-      "list": tabList.value,
-      "onUpdate:list": $event => tabList.value = $event,
-      "containerRef": containerRef,
-      "onTabSelect": onTabSelect,
-      "onCloseExtraPage": handleExtraPageClose,
-      "onCloseIframePage": handleIframePageClose,
-      "onFullscreen": handleFullscreen,
-      "onRefreshIframe": handleRefreshIframe,
-      "onRefreshExtraPage": handleRefreshExtraPage,
-      "onMouseLeave": () => isTabsShow.value = false
-    }, null), [[vShow, !isFullscreen.value || isTabsShow.value]]), createVNode("div", {
-      "class": ["page-container", {
+    return () => {
+      const tabs = withDirectives(createVNode(TabList, {
+        "ref": tabListRef,
+        "activeKey": activeKey.value,
+        "onUpdate:activeKey": $event => activeKey.value = $event,
+        "list": tabList.value,
+        "onUpdate:list": $event => tabList.value = $event,
+        "containerRef": containerRef,
+        "onTabSelect": onTabSelect,
+        "onCloseExtraPage": handleExtraPageClose,
+        "onCloseIframePage": handleIframePageClose,
+        "onFullscreen": handleFullscreen,
+        "onRefreshIframe": handleRefreshIframe,
+        "onRefreshExtraPage": handleRefreshExtraPage,
+        "onMouseLeave": () => isTabsShow.value = false
+      }, null), [[vShow, !isFullscreen.value || isTabsShow.value]]);
+      const containerCns = {
         padding: isPadding.value,
         fullscreen: isFullscreen.value
-      }],
-      "ref": props.pageContainerRef
-    }, [appDomList.value.map(item => withDirectives(createVNode("div", {
-      "key": item.id,
-      "id": item.id
-    }, null), [[vShow, item.name === activeAppName.value]])), iframeList.value.map(item => {
-      const show = item.id === activeKey.value;
-      if (item.reqCode === 200 || item.reqCode === void 0) {
-        return createVNode("iframe", {
-          "class": "menu-iframe",
-          "key": item.id + item.refreshKey,
-          "id": "iframe" + item.id,
+      };
+      const iframeRender = item => {
+        const show = item.id === activeKey.value;
+        if (item.reqCode === 200 || item.reqCode === void 0) {
+          return createVNode("iframe", {
+            "class": "menu-iframe",
+            "key": item.id + item.refreshKey,
+            "id": "iframe" + item.id,
+            "style": {
+              zIndex: show ? "" : "-100"
+            },
+            "src": item.url,
+            "frameborder": "0"
+          }, null);
+        }
+        let src = "/micro-assets/platform_web/developing.png";
+        if (item.reqCode === 404) {
+          src = "/micro-assets/platform_web/page404.png";
+        }
+        return withDirectives(createVNode("div", {
+          "class": "iframe-fallback"
+        }, [createVNode("img", {
+          "src": src,
+          "alt": ""
+        }, null)]), [[vShow, show]]);
+      };
+      const childTypes = [];
+      childTypes.push(createVNode(Fragment, null, [appDomList.value.map(item => withDirectives(createVNode("div", {
+        "key": item.id,
+        "id": item.id
+      }, null), [[vShow, item.name === activeAppName.value]]))]));
+      childTypes.push(createVNode(Fragment, null, [iframeList.value.map(iframeRender)]));
+      childTypes.push(createVNode(Fragment, null, [extraPageList.value.map(item => {
+        const extraPageShoe = getTabUniqueKey(item) === activeKey.value;
+        return withDirectives(createVNode("div", {
+          "key": item.key + item.refreshKey,
           "style": {
-            zIndex: show ? "" : "-100"
-          },
-          "src": item.url,
-          "frameborder": "0"
-        }, null);
-      }
-      let src = "/micro-assets/platform_web/developing.png";
-      if (item.reqCode === 404) {
-        src = "/micro-assets/platform_web/page404.png";
-      }
-      return withDirectives(createVNode("div", {
-        "class": "iframe-fallback"
-      }, [createVNode("img", {
-        "src": src,
-        "alt": ""
-      }, null)]), [[vShow, show]]);
-    }), extraPageList.value.map(item => withDirectives(createVNode("div", {
-      "key": item.key + item.refreshKey,
-      "style": {
-        "min-height": "100%"
-      }
-    }, [createVNode(item.component, {
-      "onClose": () => closeExtraPage(item)
-    }, null)]), [[vShow, getTabUniqueKey(item) === activeKey.value]]))])]);
+            "min-height": "100%"
+          }
+        }, [createVNode(item.component, {
+          "onClose": () => closeExtraPage(item)
+        }, null)]), [[vShow, extraPageShoe]]);
+      })]));
+      return createVNode("div", {
+        "class": "page-content",
+        "ref": containerRef
+      }, [props.showTabList && tabs, createVNode("div", {
+        "class": ["page-container", containerCns],
+        "ref": props.pageContainerRef
+      }, [childTypes])]);
+    };
   }
 });
 
-const Layout = defineComponent({
-  emits: ["globalSearch", "personalCenter", "logout", "extraPage"],
-  props: {
-    // 用户权限菜单
-    userMenu: {
-      type: Array,
-      required: true
-    },
-    // 版权信息
-    copyRight: {
-      type: String
-    },
-    // 用户
-    userInfo: {
-      type: Object,
-      required: true
-    },
-    // 额外的页面
-    extraPages: {
-      type: Array,
-      default: () => []
-    },
-    // 未读消息
-    messageCount: {
-      type: Number,
-      default: 0
-    },
-    // 网页logo
-    logo: {
-      type: String
-    },
-    appList: {
-      type: Array,
-      required: true
-    },
-    // 展示菜单
-    withMenu: {
-      type: Boolean,
-      default: true
-    },
-    // 展示在左侧的菜单(不展示菜单模式)
-    sideMenu: {
-      type: Array
-    },
-    // 展示导航栏菜单和搜索框
-    showNav: {
-      type: Boolean,
-      default: true
-    },
-    // 是否展示我的消息
-    showNotice: {
-      type: Boolean,
-      default: true
+function useFakeModal(pageContainerRef) {
+  const showMask = ref(false);
+  useEventListener("message", e => {
+    const {
+      data: event
+    } = e;
+    const {
+      type,
+      val,
+      delay = 0
+    } = event;
+    if (type === "toggleMask") {
+      setTimeout(() => {
+        showMask.value = val;
+      }, delay);
     }
+  });
+  const pageBounding = useElementBounding(pageContainerRef);
+  const modalPath = computed(() => {
+    const {
+      top,
+      bottom,
+      left,
+      right
+    } = pageBounding;
+    const topDis = Math.round(top.value);
+    const rightDis = Math.round(window.innerWidth - right.value);
+    const bottomDis = Math.round(window.innerHeight - bottom.value);
+    const leftDis = Math.round(left.value);
+    return `polygon(
+      0% 0%,
+      0% 100%,
+      ${leftDis}px 100%,
+      ${leftDis}px ${topDis}px,
+      calc(100% - ${rightDis}px) ${topDis}px,
+      calc(100% - ${rightDis}px) calc(100% - ${bottomDis}px),
+      ${leftDis}px calc(100% - ${bottomDis}px),
+      ${leftDis}px 100%,
+      100% 100%,
+      100% 0%
+    )`;
+  });
+  return {
+    showMask,
+    modalPath
+  };
+}
+
+function _isSlot$c(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const Props = {
+  // 用户权限菜单
+  userMenu: {
+    type: Array,
+    required: true
+  },
+  // 版权信息
+  copyRight: {
+    type: String
+  },
+  // 用户
+  userInfo: {
+    type: Object,
+    required: true
   },
+  // 额外的页面
+  extraPages: {
+    type: Array,
+    default: () => []
+  },
+  // 未读消息
+  messageCount: {
+    type: Number,
+    default: 0
+  },
+  // 网页logo
+  logo: {
+    type: String
+  },
+  appList: {
+    type: Array,
+    required: true
+  },
+  // 展示菜单
+  withMenu: {
+    type: Boolean,
+    default: true
+  },
+  // 展示在左侧的菜单(不展示菜单模式)
+  sideMenu: {
+    type: Array
+  },
+  // 展示导航栏菜单和搜索框
+  showNav: {
+    type: Boolean,
+    default: true
+  },
+  // 是否展示我的消息
+  showNotice: {
+    type: Boolean,
+    default: true
+  }
+};
+const Layout = defineComponent({
+  emits: ["globalSearch", "personalCenter", "logout", "extraPage"],
+  props: Props,
   setup(props, {
     emit
   }) {
@@ -7287,15 +7374,13 @@ const Layout = defineComponent({
     const siderMenu = ref([]);
     const sideMenuShow = computed(() => props.sideMenu || siderMenu.value);
     const showSideMenu = computed(() => props.withMenu || !!props.sideMenu);
-    watch(() => props.userMenu, val => {
-      if (val.length && menuRef) {
-        const refMenu = getMenuByKey(val, menuRef, "remark");
+    watchEffect(() => {
+      if (props.userMenu.length > 0 && menuRef) {
+        const refMenu = getMenuByKey(props.userMenu, menuRef, "remark");
         if (refMenu) {
           siderMenu.value = [refMenu];
         }
       }
-    }, {
-      immediate: true
     });
     const showHeader = computed(() => props.withMenu && !menuRef && !isOnlyPage);
     const showSide = computed(() => showSideMenu.value && !isOnlyPage);
@@ -7326,52 +7411,19 @@ const Layout = defineComponent({
         refreshTabKey: ""
       };
     });
-    const showMask = ref(false);
-    useEventListener("message", e => {
-      const {
-        data: event
-      } = e;
-      const {
-        type,
-        val,
-        delay = 0
-      } = event;
-      if (type === "toggleMask") {
-        setTimeout(() => {
-          showMask.value = val;
-        }, delay);
-      }
-    });
     const pageContainerRef = ref();
-    const pageBounding = useElementBounding(pageContainerRef);
-    const modalPath = computed(() => {
-      const {
-        top,
-        bottom,
-        left,
-        right
-      } = pageBounding;
-      const topDis = Math.round(top.value);
-      const rightDis = Math.round(window.innerWidth - right.value);
-      const bottomDis = Math.round(window.innerHeight - bottom.value);
-      const leftDis = Math.round(left.value);
-      return `polygon(
-        0% 0%,
-        0% 100%,
-        ${leftDis}px 100%,
-        ${leftDis}px ${topDis}px,
-        calc(100% - ${rightDis}px) ${topDis}px,
-        calc(100% - ${rightDis}px) calc(100% - ${bottomDis}px),
-        ${leftDis}px calc(100% - ${bottomDis}px),
-        ${leftDis}px 100%,
-        100% 100%,
-        100% 0%
-      )`;
-    });
-    return () => createVNode("div", {
-      "class": `${config.prefix}-layout`
-    }, [createVNode(Layout$1, null, {
-      default: () => [showHeader.value && createVNode(LayoutHeader, null, {
+    const {
+      showMask,
+      modalPath
+    } = useFakeModal(pageContainerRef);
+    return () => {
+      const modalMask = createVNode("div", {
+        "class": "layout-mask",
+        "style": {
+          clipPath: modalPath.value
+        }
+      }, null);
+      const header = createVNode(LayoutHeader, null, {
         default: () => [createVNode(Header$1, {
           "menu": props.showNav ? props.userMenu : [],
           "withSearch": props.showNav,
@@ -7386,47 +7438,49 @@ const Layout = defineComponent({
           "onLogout": () => emit("logout"),
           "onExtraPage": e => emit("extraPage", e)
         }, null)]
-      }), createVNode(Layout$1, null, {
-        default: () => [showSide.value && createVNode(LayoutSider, {
-          "class": `${config.prefix}-layout-sider`,
-          "width": "10.416vw",
-          "collapsedWidth": "3.125vw",
-          "collapsed": isFolder.value
-        }, {
-          default: () => [createVNode("div", {
-            "class": ["folder", {
-              isFold: isFolder.value
-            }],
-            "onClick": () => toggleFolder()
-          }, [isFolder.value ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]), createVNode(SideMenu$1, {
-            "menu": sideMenuShow.value,
-            "onMenuSelect": handleMenuSelect,
-            "extraPages": props.extraPages,
-            "expandAll": !!menuRef
-          }, null), createVNode("div", {
-            "class": "copyright"
-          }, [props.copyRight])]
-        }), createVNode(LayoutContent, {
-          "class": {
-            "only-page": isOnlyPage
-          }
-        }, {
-          default: () => [createVNode(PageContent, {
-            "pageContainerRef": pageContainerRef,
-            "currMenu": currMenu.value,
-            "menu": props.userMenu,
-            "extraPages": props.extraPages,
-            "appList": props.appList,
-            "showTabList": (props.withMenu || showSideMenu.value) && !isOnlyPage
-          }, null)]
+      });
+      const sider = createVNode(LayoutSider, {
+        "class": `${config.prefix}-layout-sider`,
+        "width": "10.416vw",
+        "collapsedWidth": "3.125vw",
+        "collapsed": isFolder.value
+      }, {
+        default: () => [createVNode("div", {
+          "class": ["folder", {
+            isFold: isFolder.value
+          }],
+          "onClick": () => toggleFolder()
+        }, [isFolder.value ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]), createVNode(SideMenu$1, {
+          "menu": sideMenuShow.value,
+          "onMenuSelect": handleMenuSelect,
+          "extraPages": props.extraPages,
+          "expandAll": !!menuRef
+        }, null), createVNode("div", {
+          "class": "copyright"
+        }, [props.copyRight])]
+      });
+      const content = createVNode(PageContent, {
+        "pageContainerRef": pageContainerRef,
+        "currMenu": currMenu.value,
+        "menu": props.userMenu,
+        "extraPages": props.extraPages,
+        "appList": props.appList,
+        "showTabList": (props.withMenu || showSideMenu.value) && !isOnlyPage
+      }, null);
+      return createVNode("div", {
+        "class": `${config.prefix}-layout`
+      }, [createVNode(Layout$1, null, {
+        default: () => [showHeader.value && header, createVNode(Layout$1, null, {
+          default: () => [showSide.value && sider, createVNode(LayoutContent, {
+            "class": {
+              "only-page": isOnlyPage
+            }
+          }, _isSlot$c(content) ? content : {
+            default: () => [content]
+          })]
         })]
-      })]
-    }), showMask.value && createVNode("div", {
-      "class": "layout-mask",
-      "style": {
-        clipPath: modalPath.value
-      }
-    }, null)]);
+      }), showMask.value && modalMask]);
+    };
   }
 });
 var index$8 = installComponent(Layout, "layout");
@@ -8321,39 +8375,41 @@ const ChildHeader = defineComponent({
 
 const isIndependentApp = query => !!query.token && !!query.onlyPage;
 const loginFun = new Login$1();
-const requestLogo = async () => {
-  const res = await fetch("/api/common/v1/sysconfig/searchImage?imgType=4&editImg=1&clientType=web");
-  const blob = await res.blob();
-  return URL.createObjectURL(blob);
-};
-const requestUserTree = async () => {
-  const headers = getCommonHeaders();
-  const res = await fetch("/api/common/v1/menu/tree", {
-    headers
-  });
-  const treeData = await res.json();
-  return treeData.data;
-};
-const requestCopyright = async () => {
-  const res = await fetch("/api/common/v1/sysconfig/getSysConfig?clientType=web");
-  const data = await res.json();
-  return data.data.homepageCopyright;
-};
-const postLogout = async () => {
-  const headers = getCommonHeaders();
-  await fetch("/api/common/v1/log/insert", {
-    method: "POST",
-    headers: {
-      ...headers,
-      "Content-Type": "application/json;charset=UTF-8"
-    },
-    body: JSON.stringify({
-      softSysId: "1",
-      operateId: "111",
-      recordId: "11",
-      content: "\u767B\u51FA"
-    })
-  });
+const httpUtil = {
+  requestLogo: async () => {
+    const res = await fetch("/api/common/v1/sysconfig/searchImage?imgType=4&editImg=1&clientType=web");
+    const blob = await res.blob();
+    return URL.createObjectURL(blob);
+  },
+  requestUserTree: async () => {
+    const headers = getCommonHeaders();
+    const res = await fetch("/api/common/v1/menu/tree", {
+      headers
+    });
+    const treeData = await res.json();
+    return treeData.data;
+  },
+  requestCopyright: async () => {
+    const res = await fetch("/api/common/v1/sysconfig/getSysConfig?clientType=web");
+    const data = await res.json();
+    return data.data.homepageCopyright;
+  },
+  postLogout: async () => {
+    const headers = getCommonHeaders();
+    await fetch("/api/common/v1/log/insert", {
+      method: "POST",
+      headers: {
+        ...headers,
+        "Content-Type": "application/json;charset=UTF-8"
+      },
+      body: JSON.stringify({
+        softSysId: "1",
+        operateId: "111",
+        recordId: "11",
+        content: "\u767B\u51FA"
+      })
+    });
+  }
 };
 const DefaultLayout = defineComponent({
   async beforeRouteEnter(to) {
@@ -8398,12 +8454,12 @@ const DefaultLayout = defineComponent({
     const userInfo = useSessionStorage("userinfo", {});
     const logo = ref();
     const getLogo = async () => {
-      const str = await requestLogo();
+      const str = await httpUtil.requestLogo();
       logo.value = str;
     };
     const copyright = ref("");
     const getCopyright = async () => {
-      const str = await requestCopyright();
+      const str = await httpUtil.requestCopyright();
       copyright.value = str;
     };
     const isIndependent = isIndependentApp(route.query);
@@ -8428,7 +8484,7 @@ const DefaultLayout = defineComponent({
     });
     const permissionMenu = ref([]);
     const getPermissionMenu = async () => {
-      const tree = await requestUserTree();
+      const tree = await httpUtil.requestUserTree();
       const appRefName = route.query.menuRef ?? import.meta.env.VITE_APP_NAME;
       let userMenu = getMenuByKey(tree, appRefName, "remark");
       if (!userMenu) {
@@ -8439,9 +8495,8 @@ const DefaultLayout = defineComponent({
     const menuList = computed(() => isDev ? devMenuList.value : permissionMenu.value);
     const isIframe = ref(false);
     const iframeUrl = ref("");
-    watch([route, menuList], ([{
-      query
-    }]) => {
+    watch([route, menuList], () => {
+      const query = route.query;
       if (query.iframeId && menuList.value.length) {
         isIframe.value = true;
         const menuRecord = getMenuByKey(menuList.value, query.iframeId, "id");
@@ -8463,7 +8518,7 @@ const DefaultLayout = defineComponent({
       }
     });
     const handleLogout = async () => {
-      await postLogout();
+      await httpUtil.postLogout();
       sessionStorage.clear();
       localStorage.clear();
       message.info("\u7528\u6237\u9000\u51FA\u767B\u5F55");
@@ -8489,48 +8544,51 @@ const DefaultLayout = defineComponent({
           "class": "independent-container"
         }, [createVNode(resolveComponent("router-view"), null, null)]);
       }
+      const header = createVNode(LayoutHeader, {
+        "class": "header-container"
+      }, {
+        default: () => [isDev ? createVNode(ChildHeaderDev, {
+          "userInfo": userInfo.value
+        }, null) : createVNode(ChildHeader, {
+          "userInfo": userInfo.value,
+          "logo": logo.value,
+          "onLogout": handleLogout
+        }, null)]
+      });
+      const sider = createVNode(LayoutSider, {
+        "class": `${config.prefix}-layout-sider`,
+        "width": "10.416vw",
+        "collapsedWidth": "3.125vw",
+        "collapsed": isFold.value
+      }, {
+        default: () => [createVNode("div", {
+          "class": ["folder", {
+            isFold: isFold.value
+          }],
+          "onClick": () => toggleFold()
+        }, [isFold.value ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]), createVNode(SideMenu, {
+          "menuList": menuList.value
+        }, null), createVNode("div", {
+          "class": "copyright"
+        }, [copyright.value])]
+      });
+      const content = createVNode(LayoutContent, {
+        "class": "layout-content"
+      }, {
+        default: () => [createVNode("div", {
+          "class": "content-inner"
+        }, [withDirectives(createVNode(resolveComponent("router-view"), null, null), [[vShow, !isIframe.value]]), withDirectives(createVNode("iframe", {
+          "src": iframeUrl.value,
+          "height": "100%",
+          "width": "100%",
+          "frameborder": "0"
+        }, null), [[vShow, isIframe.value]])])]
+      });
       return createVNode(Layout$1, {
         "class": `${config.prefix}-child-layout`
       }, {
-        default: () => [props.withHeader && createVNode(LayoutHeader, {
-          "class": "header-container"
-        }, {
-          default: () => [isDev ? createVNode(ChildHeaderDev, {
-            "userInfo": userInfo.value
-          }, null) : createVNode(ChildHeader, {
-            "userInfo": userInfo.value,
-            "logo": logo.value,
-            "onLogout": handleLogout
-          }, null)]
-        }), createVNode(Layout$1, null, {
-          default: () => [createVNode(LayoutSider, {
-            "class": `${config.prefix}-layout-sider`,
-            "width": "10.416vw",
-            "collapsedWidth": "3.125vw",
-            "collapsed": isFold.value
-          }, {
-            default: () => [createVNode("div", {
-              "class": ["folder", {
-                isFold: isFold.value
-              }],
-              "onClick": () => toggleFold()
-            }, [isFold.value ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]), createVNode(SideMenu, {
-              "menuList": menuList.value
-            }, null), createVNode("div", {
-              "class": "copyright"
-            }, [copyright.value])]
-          }), createVNode(LayoutContent, {
-            "class": "layout-content"
-          }, {
-            default: () => [createVNode("div", {
-              "class": "content-inner"
-            }, [withDirectives(createVNode(resolveComponent("router-view"), null, null), [[vShow, !isIframe.value]]), withDirectives(createVNode("iframe", {
-              "src": iframeUrl.value,
-              "height": "100%",
-              "width": "100%",
-              "frameborder": "0"
-            }, null), [[vShow, isIframe.value]])])]
-          })]
+        default: () => [props.withHeader && header, createVNode(Layout$1, null, {
+          default: () => [sider, content]
         })]
       });
     };