inl-ui 0.0.31 → 0.0.33

package/dist/components/index.cjs

@@ -0,0 +1,683 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var iconsVue = require('@ant-design/icons-vue');
+var core = require('@vueuse/core');
+var antDesignVue = require('ant-design-vue');
+var vueRouter = require('vue-router');
+var _ = require('lodash');
+var qiankun = require('qiankun');
+var appList = require('@/micro-apps/apps');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+var appList__default = /*#__PURE__*/_interopDefaultLegacy(appList);
+
+const config = {
+  prefix: "inl",
+  requestOmitParams: ["createDt", "createUser", "updateDt", "updateUser"]
+};
+
+const {
+  prefix
+} = config;
+function installComponent(component, name, withPrefix = true) {
+  component.install = app => {
+    name = withPrefix ? `${prefix}-${name}` : name;
+    app.component(name, component);
+  };
+  return component;
+}
+
+const Demo = vue.defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: "\u5F20\u4E09"
+    }
+  },
+  setup(props) {
+    return () => vue.createVNode("div", {
+      "class": "Demo"
+    }, ["\u6211\u662Fdemo, ", props.name]);
+  }
+});
+var index$2 = installComponent(Demo, "demo");
+
+const IconFont = iconsVue.createFromIconfontCN();
+var index$1 = installComponent(IconFont, "icon-font", false);
+
+function getMenuByKeyPath(menuList, keyPath, keyProp = "id") {
+  function getMenuByKey2(list2, key) {
+    return list2.find(item => item[keyProp] && item[keyProp] === key);
+  }
+  let list = menuList;
+  for (let i = 0; i < keyPath.length; i++) {
+    const menu = getMenuByKey2(list, keyPath[i]);
+    if (!menu) return;
+    if (i === keyPath.length - 1) {
+      return menu;
+    }
+    list = menu.subList;
+  }
+}
+function flattenMenu(menuList) {
+  const res = [];
+  for (const menu of menuList) {
+    res.push(menu);
+    res.push(...menu.subList);
+  }
+  return res;
+}
+function getMenuByKey(menuList, key, propName = "id") {
+  const flattenMenuList = flattenMenu(menuList);
+  return flattenMenuList.find(item => item[propName] && item[propName] === key);
+}
+function getNavByChildKey(navList, key, propName = "id") {
+  for (const nav of navList) {
+    const menu = getMenuByKey(nav.subList, key, propName);
+    if (menu) {
+      return nav;
+    }
+  }
+}
+
+function useActiveMenu(menuList, extraPages, isNav = false, watchOnce = false) {
+  const route = vueRouter.useRoute();
+  const isMounted = core.useMounted();
+  const menu = vue.ref();
+  const unwatch = vue.watch([menuList, isMounted, route], ___default["default"].debounce(([list]) => {
+    if (list.length && isMounted) {
+      watchOnce && unwatch();
+      const {
+        query,
+        path
+      } = route;
+      const id = "" + query.iframeId;
+      if (query.iframeId) {
+        menu.value = isNav ? getNavByChildKey(list, id, "id") : getMenuByKey(list, id, "id");
+      } else if (query.extraPageKey) {
+        const page = extraPages.find(item => item.key === query.extraPageKey);
+        menu.value = page;
+      } else if (path !== "/") {
+        menu.value = isNav ? getNavByChildKey(list, path, "url") : getMenuByKey(list, path, "url");
+      } else {
+        const getFirstMenu = list2 => {
+          if (list2[0].subList?.length) {
+            return getFirstMenu(list2[0].subList);
+          }
+          return list2[0];
+        };
+        const firstMenu = getFirstMenu(list);
+        menu.value = firstMenu;
+      }
+    }
+  }, 10, {
+    leading: false
+  }));
+  return menu;
+}
+
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+const Header = vue.defineComponent({
+  emits: ["navSelect"],
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    logo: {
+      type: String
+    },
+    userInfo: {
+      type: Object,
+      required: true
+    },
+    extraPages: {
+      type: Array,
+      required: true
+    },
+    messageCount: {
+      type: Number
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const isMounted = core.useMounted();
+    const router = vueRouter.useRouter();
+    const searchText = vue.ref("");
+    const handleGlobalSearch = () => {
+      searchText.value = "";
+    };
+    const acitveMenuKey = vue.ref([]);
+    const handleMenuSelected = ({
+      key
+    }) => {
+      emit("navSelect", key);
+    };
+    const activeMenu = useActiveMenu(() => props.menu, props.extraPages, true);
+    vue.watch(activeMenu, val => {
+      if (val && val.id) {
+        handleMenuSelected({
+          key: val.id
+        });
+        acitveMenuKey.value = [val.id];
+      }
+    });
+    const cancleWatch = vue.watch([isMounted, () => props.menu], ([mounted, list]) => {
+      if (mounted && list.length) {
+        cancleWatch();
+        if (!activeMenu.value) {
+          const firstNav = list[0];
+          emit("navSelect", firstNav.id);
+          acitveMenuKey.value = [firstNav.id];
+        }
+      }
+    });
+    const handlePersonalCenter = () => {
+      router.push({
+        path: "/",
+        query: {
+          extraPageKey: "personalCenter"
+        }
+      });
+    };
+    return () => {
+      let _slot;
+      return vue.createVNode("div", {
+        "class": "header"
+      }, [vue.createVNode("div", {
+        "class": "logo"
+      }, [vue.createVNode("img", {
+        "src": props.logo,
+        "alt": ""
+      }, null)]), vue.createVNode(antDesignVue.Menu, {
+        "class": "menu",
+        "mode": "horizontal",
+        "selectedKeys": acitveMenuKey.value,
+        "onUpdate:selectedKeys": $event => acitveMenuKey.value = $event,
+        "onSelect": handleMenuSelected
+      }, _isSlot$1(_slot = props.menu.map(item => vue.createVNode(antDesignVue.MenuItem, {
+        "key": item.id,
+        "icon": vue.createVNode(vue.resolveComponent("icon-font"), {
+          "type": item.icon
+        }, null)
+      }, {
+        default: () => [item.name]
+      }))) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(antDesignVue.Input, {
+        "class": "search",
+        "placeholder": "\u641C\u7D22",
+        "allowClear": true,
+        "value": searchText.value,
+        "onUpdate:value": $event => searchText.value = $event,
+        "onPressEnter": handleGlobalSearch
+      }, {
+        suffix: () => vue.createVNode(iconsVue.SearchOutlined, null, null)
+      }), vue.createVNode("div", {
+        "class": "user-info"
+      }, [vue.createVNode("span", {
+        "class": "username"
+      }, [props.userInfo.userName]), vue.createVNode("div", {
+        "onClick": handlePersonalCenter
+      }, [vue.createVNode(antDesignVue.Badge, {
+        "dot": !!props.messageCount
+      }, {
+        default: () => [vue.createVNode(antDesignVue.Avatar, {
+          "class": "avatar",
+          "src": "https://joeschmoe.io/api/v1/random"
+        }, null)]
+      })])])]);
+    };
+  }
+});
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+const renderMenuItem = item => {
+  if (item.subList?.length) {
+    let _slot;
+    return vue.createVNode(antDesignVue.SubMenu, {
+      "key": item.id,
+      "icon": vue.createVNode(vue.resolveComponent("icon-font"), {
+        "type": item.icon
+      }, null),
+      "title": item.name
+    }, _isSlot(_slot = item.subList.map(i => renderMenuItem(i))) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+  return vue.createVNode(antDesignVue.MenuItem, {
+    "key": item.id,
+    "icon": vue.createVNode(vue.resolveComponent("icon-font"), {
+      "type": item.icon
+    }, null)
+  }, {
+    default: () => [item.name]
+  });
+};
+const SideMenu = vue.defineComponent({
+  emits: ["menuSelect"],
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    extraPages: {
+      type: Array,
+      required: true
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const activeMenu = vue.ref([]);
+    const initialMenu = useActiveMenu(() => props.menu, props.extraPages);
+    vue.watch(initialMenu, val => {
+      if (val?.id) {
+        activeMenu.value = [val.id];
+      } else {
+        activeMenu.value = [];
+      }
+    });
+    const handleMenuSelect = param => {
+      const {
+        keyPath
+      } = param;
+      const menu = getMenuByKeyPath(props.menu, keyPath);
+      if (menu) {
+        emit("menuSelect", menu);
+      }
+    };
+    return () => {
+      let _slot2;
+      return vue.createVNode(antDesignVue.Menu, {
+        "mode": "inline",
+        "selectedKeys": activeMenu.value,
+        "onUpdate:selectedKeys": $event => activeMenu.value = $event,
+        "onSelect": handleMenuSelect
+      }, _isSlot(_slot2 = props.menu.map(item => renderMenuItem(item))) ? _slot2 : {
+        default: () => [_slot2]
+      });
+    };
+  }
+});
+
+function useActiveApp() {
+  const route = vueRouter.useRoute();
+  const activeAppName = vue.computed(() => {
+    return route.path.split("/")[1];
+  });
+  return activeAppName;
+}
+
+function useMicroApp() {
+  const route = vueRouter.useRoute();
+  const activeAppName = useActiveApp();
+  const loadAppList = vue.ref([]);
+  const handleRouteChange = core.useThrottleFn(async () => {
+    const microAppName = activeAppName.value;
+    const loadApp = loadAppList.value.find(item => item.name === microAppName);
+    if (loadApp) return;
+    const microApp = appList__default["default"].find(item => item.name === microAppName);
+    if (!microApp) return;
+    const domId = `microApp_${microAppName}`;
+    const app = qiankun.loadMicroApp({
+      name: microApp.name,
+      entry: microApp.entry,
+      container: `#${domId}`
+    });
+    loadAppList.value.push({
+      name: microAppName,
+      domId,
+      app
+    });
+  }, 100);
+  vue.watch(route, handleRouteChange, {
+    immediate: true
+  });
+  return loadAppList;
+}
+
+function onAddExtraTabs(handler) {
+  const qiankunState = vue.inject("qiankunState");
+  vue.watch(() => qiankunState.value.extraTabs, (val = [], prev = []) => {
+    if (val.length > prev.length) {
+      const added = _.differenceBy(val, prev, item => item.key);
+      handler(added);
+    }
+  }, {
+    deep: true,
+    immediate: true
+  });
+}
+
+const TabList = vue.defineComponent({
+  emits: ["update:activeKey", "update:list", "tabSelect"],
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    activeKey: {
+      type: String
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const qiankunState = vue.inject("qiankunState");
+    const tabContainerRef = vue.ref();
+    const tabList = core.useVModel(props, "list", emit);
+    const activeTabKey = core.useVModel(props, "activeKey", emit);
+    const scrollLeft = val => {
+      if (!tabContainerRef.value) return;
+      tabContainerRef.value.scrollTo({
+        left: tabContainerRef.value.scrollLeft + val,
+        behavior: "smooth"
+      });
+    };
+    const handleScroll = e => {
+      if (!e.deltaX) {
+        scrollLeft(e.deltaY < 0 ? -300 : 300);
+      }
+    };
+    const handleRemove = async (e, tab, index) => {
+      e.stopPropagation();
+      if (tab.key === activeTabKey.value) {
+        const next = tabList.value[index + 1];
+        const prev = tabList.value[index - 1];
+        if (next) {
+          activeTabKey.value = next.key;
+          emit("tabSelect", next);
+        } else if (prev) {
+          activeTabKey.value = prev.key;
+          emit("tabSelect", prev);
+        } else {
+          return;
+        }
+      }
+      tabList.value.splice(index, 1);
+    };
+    const closeToRight = index => tabList.value = tabList.value.filter((_2, i) => i <= index);
+    const closeToLeft = index => tabList.value = tabList.value.filter((_2, i) => i >= index);
+    const closeOther = index => {
+      activeTabKey.value = tabList.value[index].key;
+      tabList.value = tabList.value.filter((_2, i) => i === index);
+    };
+    core.watchArray(tabList, (val, prev, added, removed) => {
+      for (const tab of removed) {
+        if (tab.isExtraTab) {
+          const idx = qiankunState.value.extraTabs.find(item => item.key === tab.key);
+          idx !== -1 && qiankunState.value.extraTabs.splice(idx, 1);
+        }
+      }
+    }, {
+      deep: true
+    });
+    return () => vue.createVNode("div", {
+      "class": "tab-list"
+    }, [vue.createVNode("div", {
+      "class": "handle",
+      "onClick": () => scrollLeft(-150)
+    }, [vue.createVNode(iconsVue.LeftOutlined, null, null)]), vue.createVNode("div", {
+      "class": "tabs-container",
+      "ref": tabContainerRef,
+      "onWheel": handleScroll
+    }, [tabList.value.map((item, index) => vue.createVNode(antDesignVue.Dropdown, {
+      "placement": "bottomLeft",
+      "trigger": ["contextmenu"]
+    }, {
+      default: () => [vue.createVNode("div", {
+        "key": item.id,
+        "class": ["tab", {
+          active: item.key === activeTabKey.value
+        }],
+        "onClick": () => emit("tabSelect", item)
+      }, [vue.createVNode(vue.resolveComponent("icon-font"), {
+        "class": "icon",
+        "type": item.icon
+      }, null), vue.createVNode("span", {
+        "class": "tab-name"
+      }, [item.name]), tabList.value.length > 1 && vue.createVNode(iconsVue.CloseOutlined, {
+        "class": "close",
+        "onClick": e => handleRemove(e, item, index)
+      }, null)])],
+      overlay: () => vue.createVNode(antDesignVue.Menu, null, {
+        default: () => [vue.createVNode(antDesignVue.MenuItem, {
+          "key": "right",
+          "onClick": () => closeToRight(index)
+        }, {
+          default: () => ["\u5173\u95ED\u53F3\u4FA7"]
+        }), vue.createVNode(antDesignVue.MenuItem, {
+          "key": "left",
+          "onClick": () => closeToLeft(index)
+        }, {
+          default: () => ["\u5173\u95ED\u5DE6\u4FA7"]
+        }), vue.createVNode(antDesignVue.MenuItem, {
+          "key": "other",
+          "onClick": () => closeOther(index)
+        }, {
+          default: () => ["\u5173\u95ED\u5176\u4ED6"]
+        })]
+      })
+    }))]), vue.createVNode("div", {
+      "class": "handle",
+      "onClick": () => scrollLeft(150)
+    }, [vue.createVNode(iconsVue.RightOutlined, null, null)])]);
+  }
+});
+
+const PageContent = vue.defineComponent({
+  props: {
+    currMenu: {
+      type: Object
+    },
+    menu: {
+      type: Array,
+      default: () => []
+    },
+    extraPages: {
+      type: Array,
+      required: true
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const router = vueRouter.useRouter();
+    const qiankunState = vue.inject("qiankunState");
+    const activeKey = vue.ref();
+    const tabList = vue.ref([]);
+    const activeAppName = useActiveApp();
+    const loadAppList = useMicroApp();
+    const iframeList = vue.ref([]);
+    const extraPageList = vue.ref([]);
+    const handleMenuChange = ___default["default"].throttle(val => {
+      if (!val) return;
+      if (val.isExtra) {
+        const exist = extraPageList.value.find(item => item.key === val.key);
+        if (!exist) {
+          tabList.value.push(val);
+          extraPageList.value.push(val);
+        }
+        router.push(`/?extraPageKey=${val.key}`);
+        activeKey.value = val.key;
+        return;
+      }
+      const {
+        key,
+        id,
+        mode = 0,
+        url
+      } = val;
+      const isOpened = tabList.value.find(item => item.id === id);
+      const tab = ___default["default"].cloneDeep(val);
+      switch (mode) {
+        case 0:
+          if (!isOpened) tabList.value.push({
+            ...tab,
+            key: key ?? id
+          });
+          router.push(url);
+          break;
+        case 1:
+          window.open(url);
+          break;
+        case 2:
+          if (!isOpened) {
+            iframeList.value.push(val);
+            tabList.value.push({
+              ...tab,
+              key: id
+            });
+          }
+          router.push({
+            path: "/",
+            query: {
+              iframeId: id
+            }
+          });
+          break;
+      }
+      activeKey.value = key ?? id;
+    }, 100, {
+      trailing: false
+    });
+    const activeMenu = useActiveMenu(() => props.menu, props.extraPages);
+    vue.watch(activeMenu, handleMenuChange);
+    vue.watch(() => props.currMenu, handleMenuChange, {
+      immediate: true
+    });
+    vue.watch(activeKey, val => qiankunState.value.activeTabKey = val, {
+      immediate: true
+    });
+    vue.watch(() => qiankunState.value.activeTabKey, val => activeKey.value = val);
+    onAddExtraTabs(added => {
+      tabList.value.push(...added);
+    });
+    return () => vue.createVNode("div", {
+      "class": "page-content"
+    }, [vue.createVNode(TabList, {
+      "activeKey": activeKey.value,
+      "onUpdate:activeKey": $event => activeKey.value = $event,
+      "list": tabList.value,
+      "onUpdate:list": $event => tabList.value = $event,
+      "onTabSelect": handleMenuChange
+    }, null), vue.createVNode("div", {
+      "class": "page-container"
+    }, [loadAppList.value.map(item => vue.withDirectives(vue.createVNode("div", {
+      "id": item.domId
+    }, null), [[vue.vShow, item.name === activeAppName.value]])), iframeList.value.map(item => vue.withDirectives(vue.createVNode("iframe", {
+      "src": item.url,
+      "width": "100%",
+      "height": "100%",
+      "frameborder": "0"
+    }, null), [[vue.vShow, item.id === activeKey.value]])), extraPageList.value.map(item => vue.withDirectives(vue.createVNode("div", {
+      "style": {
+        height: "100%"
+      }
+    }, [vue.createVNode(item.component, null, null)]), [[vue.vShow, item.key === activeKey.value]]))])]);
+  }
+});
+
+const Layout = vue.defineComponent({
+  props: {
+    userMenu: {
+      type: Array,
+      required: true
+    },
+    copyRight: {
+      type: String
+    },
+    userInfo: {
+      type: Object,
+      required: true
+    },
+    extraPages: {
+      type: Array,
+      default: () => []
+    },
+    messageCount: {
+      type: Number,
+      default: 0
+    },
+    logo: {
+      type: String
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const [isFolder, toggleFolder] = core.useToggle(false);
+    const currentNavKey = vue.ref();
+    const siderMenu = vue.ref([]);
+    const handleNavSelect = id => {
+      currentNavKey.value = id;
+    };
+    vue.watch(currentNavKey, val => {
+      if (!val) return;
+      const nav = props.userMenu.find(item => item.id === val);
+      if (nav) {
+        siderMenu.value = nav.subList;
+      }
+    }, {
+      immediate: true,
+      flush: "post"
+    });
+    const currMenu = vue.ref();
+    const handleMenuSelect = menu => {
+      currMenu.value = menu;
+    };
+    return () => vue.createVNode("div", {
+      "class": "layout"
+    }, [vue.createVNode(antDesignVue.Layout, null, {
+      default: () => [vue.createVNode(antDesignVue.LayoutHeader, null, {
+        default: () => [vue.createVNode(Header, {
+          "menu": props.userMenu,
+          "onNavSelect": handleNavSelect,
+          "userInfo": props.userInfo,
+          "extraPages": props.extraPages,
+          "messageCount": props.messageCount,
+          "logo": props.logo
+        }, null)]
+      }), vue.createVNode(antDesignVue.Layout, null, {
+        default: () => [vue.createVNode(antDesignVue.LayoutSider, {
+          "width": "10.416vw",
+          "collapsedWidth": "3.125vw",
+          "collapsed": isFolder.value
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": "folder",
+            "onClick": () => toggleFolder()
+          }, [isFolder.value ? vue.createVNode(iconsVue.MenuUnfoldOutlined, null, null) : vue.createVNode(iconsVue.MenuFoldOutlined, null, null)]), vue.createVNode(SideMenu, {
+            "menu": siderMenu.value,
+            "onMenuSelect": handleMenuSelect,
+            "extraPages": props.extraPages
+          }, null), vue.createVNode("div", {
+            "class": "copyright"
+          }, [props.copyRight])]
+        }), vue.createVNode(antDesignVue.LayoutContent, null, {
+          default: () => [vue.createVNode(PageContent, {
+            "currMenu": currMenu.value,
+            "menu": props.userMenu,
+            "extraPages": props.extraPages
+          }, null)]
+        })]
+      })]
+    })]);
+  }
+});
+var index = installComponent(Layout, "layout");
+
+exports.Demo = index$2;
+exports.IconFont = index$1;
+exports.Layout = index;