inl-ui 0.0.37 → 0.0.39

package/src/components/layoutSidebar/index.tsx

@@ -1,181 +1,181 @@
-import {
-  defineComponent,
-  reactive,
-  PropType,
-  computed,
-  watchEffect,
-  watch,
-  nextTick,
-  ref,
-  onMounted,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
-import useMenuCode from "@/hooks/useMenuCode";
-import utils from "@/utils";
-import {
-  getParentMenuByCode,
-  getOpenUrl,
-  getActiveNavByProp,
-  getMenuByCode,
-} from "@/utils/route";
-
-interface State {
-  openKeys: Array<string>;
-  selectedKeys: Array<string>;
-}
-
-/**
- * 布局组件 - 侧边菜单
- *  1: 递归渲染当前导航菜单的子菜单
- *  2: 实时更新选中的菜单code
- *  3: 如果跳转的是新窗口 需要加上协议、ip、端口、token、userId
- *  4: 首次进入 默认选中第一个菜单 自动展开菜单组
- */
-const LayoutSidebar = defineComponent({
-  props: {
-    menu: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    isGroup: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { emit }) {
-    const menuCode = useMenuCode();
-
-    const state: State = reactive({
-      openKeys: [],
-      selectedKeys: [],
-    });
-    watchEffect(() => {
-      // 当前选中的菜单
-      if (menuCode.value) {
-        state.selectedKeys = [menuCode.value];
-      }
-    });
-
-    // 当前应该展示的菜单
-    const menuList = ref<any[]>([]);
-    watchEffect(() => {
-      if (!props.menu?.length || props.isGroup) return;
-      // 普通情况
-      const activeNav = getActiveNavByProp("code", menuCode.value, props.menu);
-      if (activeNav) menuList.value = activeNav.subList;
-    });
-    watch(menuList, () => {
-      state.openKeys = [];
-      // 设置默认展开的菜单
-      const navCodeList = props.menu.map((item) => item.code);
-      const openCodes = getParentMenuByCode(menuCode.value, props.menu).filter(
-        (item) => !navCodeList.includes(item)
-      );
-
-      state.openKeys = openCodes;
-    });
-    // 组类型菜单
-    const cancleWatchGroup = watch(
-      () => props.menu,
-      (val) => {
-        if (val.length) {
-          cancleWatchGroup();
-          if (props.isGroup) {
-            const currentMenu = getMenuByCode(menuCode.value, val);
-            currentMenu && (menuList.value = currentMenu.subList);
-          }
-        }
-      }
-    );
-
-    // 跳转到菜单
-    const jump2Menu = (menu: any) => {
-      // 打开新窗口
-      if (menu.mode === 1) {
-        const url = getOpenUrl(menu.url);
-        window.open(url);
-      } else {
-        // 打开新标签/iframe
-        menuCode.value = menu.code;
-        return menu.code;
-      }
-    };
-
-    const cancleWatch = watch(
-      [() => props.menu, menuCode],
-      async () => {
-        await nextTick();
-        if (props.menu?.length && menuCode.value) {
-          // 只初始化监听一次
-          cancleWatch();
-          const navCodeList = props.menu.map((item) => item.code);
-          const isNavMenuCode = navCodeList.includes(menuCode.value);
-          let tempMenuCode = menuCode.value;
-          // 如果当前选择的是导航栏的菜单 默认选择第一个菜单
-          if (isNavMenuCode || props.isGroup) {
-            const getFirstMenu = (menu: any) => {
-              if (Array.isArray(menu.subList) && menu.subList.length) {
-                return getFirstMenu(menu.subList[0]);
-              } else {
-                return menu;
-              }
-            };
-            const firstMenu = getFirstMenu(menuList.value[0]);
-            if (firstMenu) {
-              const code = jump2Menu(firstMenu);
-              code && (tempMenuCode = code);
-            }
-          }
-        }
-      },
-      { immediate: true }
-    );
-
-    // 递归渲染菜单
-    const getMenuItem = (menuList: any[]) => {
-      return menuList.map((item) => {
-        const isSubMenu = Array.isArray(item.subList) && item.subList.length;
-
-        const menuProp = {
-          key: item.code,
-          title: item.name,
-        };
-        const slots = {
-          icon: () =>
-            item.icon && (
-              <icon-font sytle={{ fontSize: "20px" }} type={item.icon} />
-            ),
-        };
-        return isSubMenu ? (
-          <a-sub-menu {...menuProp} v-slots={slots}>
-            {getMenuItem(item.subList)}
-          </a-sub-menu>
-        ) : (
-          <a-menu-item
-            {...menuProp}
-            v-slots={slots}
-            onClick={() => jump2Menu(item)}
-          >
-            {item.name}
-          </a-menu-item>
-        );
-      });
-    };
-
-    return () => (
-      <a-menu
-        class="layout-sidebar"
-        mode="inline"
-        forceSubMenuRender
-        v-models={[
-          [state.selectedKeys, "selectedKeys"],
-          [state.openKeys, "openKeys"],
-        ]}
-      >
-        {getMenuItem(menuList.value)}
-      </a-menu>
-    );
-  },
-});
-
-export default utils.installComponent(LayoutSidebar, "layout-sidebar");
+import {
+  defineComponent,
+  reactive,
+  PropType,
+  computed,
+  watchEffect,
+  watch,
+  nextTick,
+  ref,
+  onMounted,
+} from "vue";
+import { useRoute, useRouter } from "vue-router";
+import useMenuCode from "@/hooks/useMenuCode";
+import utils from "@/utils";
+import {
+  getParentMenuByCode,
+  getOpenUrl,
+  getActiveNavByProp,
+  getMenuByCode,
+} from "@/utils/route";
+
+interface State {
+  openKeys: Array<string>;
+  selectedKeys: Array<string>;
+}
+
+/**
+ * 布局组件 - 侧边菜单
+ *  1: 递归渲染当前导航菜单的子菜单
+ *  2: 实时更新选中的菜单code
+ *  3: 如果跳转的是新窗口 需要加上协议、ip、端口、token、userId
+ *  4: 首次进入 默认选中第一个菜单 自动展开菜单组
+ */
+const LayoutSidebar = defineComponent({
+  props: {
+    menu: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    isGroup: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const menuCode = useMenuCode();
+
+    const state: State = reactive({
+      openKeys: [],
+      selectedKeys: [],
+    });
+    watchEffect(() => {
+      // 当前选中的菜单
+      if (menuCode.value) {
+        state.selectedKeys = [menuCode.value];
+      }
+    });
+
+    // 当前应该展示的菜单
+    const menuList = ref<any[]>([]);
+    watchEffect(() => {
+      if (!props.menu?.length || props.isGroup) return;
+      // 普通情况
+      const activeNav = getActiveNavByProp("code", menuCode.value, props.menu);
+      if (activeNav) menuList.value = activeNav.subList;
+    });
+    watch(menuList, () => {
+      state.openKeys = [];
+      // 设置默认展开的菜单
+      const navCodeList = props.menu.map((item) => item.code);
+      const openCodes = getParentMenuByCode(menuCode.value, props.menu).filter(
+        (item) => !navCodeList.includes(item)
+      );
+
+      state.openKeys = openCodes;
+    });
+    // 组类型菜单
+    const cancleWatchGroup = watch(
+      () => props.menu,
+      (val) => {
+        if (val.length) {
+          cancleWatchGroup();
+          if (props.isGroup) {
+            const currentMenu = getMenuByCode(menuCode.value, val);
+            currentMenu && (menuList.value = currentMenu.subList);
+          }
+        }
+      }
+    );
+
+    // 跳转到菜单
+    const jump2Menu = (menu: any) => {
+      // 打开新窗口
+      if (menu.mode === 1) {
+        const url = getOpenUrl(menu.url);
+        window.open(url);
+      } else {
+        // 打开新标签/iframe
+        menuCode.value = menu.code;
+        return menu.code;
+      }
+    };
+
+    const cancleWatch = watch(
+      [() => props.menu, menuCode],
+      async () => {
+        await nextTick();
+        if (props.menu?.length && menuCode.value) {
+          // 只初始化监听一次
+          cancleWatch();
+          const navCodeList = props.menu.map((item) => item.code);
+          const isNavMenuCode = navCodeList.includes(menuCode.value);
+          let tempMenuCode = menuCode.value;
+          // 如果当前选择的是导航栏的菜单 默认选择第一个菜单
+          if (isNavMenuCode || props.isGroup) {
+            const getFirstMenu = (menu: any) => {
+              if (Array.isArray(menu.subList) && menu.subList.length) {
+                return getFirstMenu(menu.subList[0]);
+              } else {
+                return menu;
+              }
+            };
+            const firstMenu = getFirstMenu(menuList.value[0]);
+            if (firstMenu) {
+              const code = jump2Menu(firstMenu);
+              code && (tempMenuCode = code);
+            }
+          }
+        }
+      },
+      { immediate: true }
+    );
+
+    // 递归渲染菜单
+    const getMenuItem = (menuList: any[]) => {
+      return menuList.map((item) => {
+        const isSubMenu = Array.isArray(item.subList) && item.subList.length;
+
+        const menuProp = {
+          key: item.code,
+          title: item.name,
+        };
+        const slots = {
+          icon: () =>
+            item.icon && (
+              <icon-font sytle={{ fontSize: "20px" }} type={item.icon} />
+            ),
+        };
+        return isSubMenu ? (
+          <a-sub-menu {...menuProp} v-slots={slots}>
+            {getMenuItem(item.subList)}
+          </a-sub-menu>
+        ) : (
+          <a-menu-item
+            {...menuProp}
+            v-slots={slots}
+            onClick={() => jump2Menu(item)}
+          >
+            {item.name}
+          </a-menu-item>
+        );
+      });
+    };
+
+    return () => (
+      <a-menu
+        class="layout-sidebar"
+        mode="inline"
+        forceSubMenuRender
+        v-models={[
+          [state.selectedKeys, "selectedKeys"],
+          [state.openKeys, "openKeys"],
+        ]}
+      >
+        {getMenuItem(menuList.value)}
+      </a-menu>
+    );
+  },
+});
+
+export default utils.installComponent(LayoutSidebar, "layout-sidebar");

package/src/components/layoutSidebar/style.less

@@ -1,31 +1,31 @@
-.layout-sidebar {
-  overflow: hidden auto;
-  border-right: 0 !important;
-  &::-webkit-scrollbar {
-    width: 0;
-  }
-  .ant-menu-sub {
-    background: #0001;
-  }
-  .ant-menu-submenu,
-  .ant-menu-item {
-    font-size: 16px;
-  }
-}
-
-body[data-theme="light"] {
-  .ant-menu-sub {
-    background: transparent !important;
-  }
-  .ant-menu-vertical .ant-menu-item::after,
-  .ant-menu-vertical-left .ant-menu-item::after,
-  .ant-menu-vertical-right .ant-menu-item::after,
-  .ant-menu-inline .ant-menu-item::after {
-    left: 0;
-    right: unset;
-    background: #3e7eff;
-  }
-  .ant-menu-item-selected {
-    background: #eff4ff;
-  }
-}
+.layout-sidebar {
+  overflow: hidden auto;
+  border-right: 0 !important;
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+  .ant-menu-sub {
+    background: #0001;
+  }
+  .ant-menu-submenu,
+  .ant-menu-item {
+    font-size: 16px;
+  }
+}
+
+body[data-theme="light"] {
+  .ant-menu-sub {
+    background: transparent !important;
+  }
+  .ant-menu-vertical .ant-menu-item::after,
+  .ant-menu-vertical-left .ant-menu-item::after,
+  .ant-menu-vertical-right .ant-menu-item::after,
+  .ant-menu-inline .ant-menu-item::after {
+    left: 0;
+    right: unset;
+    background: #3e7eff;
+  }
+  .ant-menu-item-selected {
+    background: #eff4ff;
+  }
+}

package/src/components/styles/index.less

@@ -1,119 +1,119 @@
-@import url("../layoutNav/style.less");
-@import url("../layoutSidebar/style.less");
-@import url("../layoutContent/style.less");
-
-.inl-header-menu {
-  width: 100%;
-  background-color: #132041;
-
-  &-item {
-    padding: 5px 40px;
-    background: linear-gradient(
-      180deg,
-      rgba(76, 146, 230, 0) 0%,
-      rgba(13, 95, 201, 0.5) 100%
-    );
-    cursor: pointer;
-    opacity: 0.5;
-    > span {
-      color: #fff;
-    }
-
-    &&-active {
-      background: linear-gradient(
-        180deg,
-        rgba(58, 117, 205, 0) 0%,
-        rgba(58, 117, 205, 0) 0%,
-        rgba(79, 115, 228, 0.3) 71%,
-        rgba(81, 115, 230, 0.6) 91%,
-        rgba(71, 98, 226, 0.9) 100%
-      );
-      border-bottom: 1px solid;
-      border-image: linear-gradient(
-          180deg,
-          rgba(156, 194, 247, 0),
-          rgba(98, 143, 236, 1)
-        )
-        1 1;
-      opacity: 1;
-    }
-  }
-  &-item:hover {
-    background: linear-gradient(
-      180deg,
-      rgba(58, 117, 205, 0) 0%,
-      rgba(58, 117, 205, 0) 0%,
-      rgba(79, 115, 228, 0.3) 71%,
-      rgba(81, 115, 230, 0.6) 91%,
-      rgba(71, 98, 226, 0.9) 100%
-    );
-    border-bottom: 1px solid;
-    border-image: linear-gradient(
-        180deg,
-        rgba(156, 194, 247, 0),
-        rgba(98, 143, 236, 1)
-      )
-      1 1;
-    opacity: 1;
-  }
-  &-title {
-    display: flex;
-    align-items: center;
-    padding: 5px 0;
-
-    &-text {
-      color: #fff;
-      text-align: center;
-      font-size: 30px;
-      text-shadow: 0px 0px 9px #389aff;
-    }
-  }
-  &-center-title {
-    width: 25%;
-    justify-content: center;
-    background: url(/micro-assets/device/titleCenter.png) no-repeat;
-    background-size: contain;
-  }
-  &-left-title {
-    width: 40%;
-    padding-left: 30px;
-    background: url(/micro-assets/device/titleLeft.png) no-repeat;
-    background-size: contain;
-  }
-  &-content {
-    display: flex;
-    align-items: center;
-    &-left {
-      padding: 5px 0;
-      flex: 1;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      background: url(/micro-assets/device/menuLeft.png) no-repeat;
-      background-size: contain;
-      background-position: 0 100%;
-      .inl-header-menu-item {
-        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%);
-      }
-    }
-    &-right {
-      padding: 5px 0;
-      flex: 1;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      background: url(/micro-assets/device/menuRight.png) no-repeat;
-      background-size: contain;
-      background-position: 0 100%;
-      .inl-header-menu-item {
-        clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
-      }
-    }
-  }
-  &-left {
-    .inl-header-menu-content-right {
-      background: none;
-      justify-content: flex-end;
-    }
-  }
-}
+@import url("../layoutNav/style.less");
+@import url("../layoutSidebar/style.less");
+@import url("../layoutContent/style.less");
+
+.inl-header-menu {
+  width: 100%;
+  background-color: #132041;
+
+  &-item {
+    padding: 5px 40px;
+    background: linear-gradient(
+      180deg,
+      rgba(76, 146, 230, 0) 0%,
+      rgba(13, 95, 201, 0.5) 100%
+    );
+    cursor: pointer;
+    opacity: 0.5;
+    > span {
+      color: #fff;
+    }
+
+    &&-active {
+      background: linear-gradient(
+        180deg,
+        rgba(58, 117, 205, 0) 0%,
+        rgba(58, 117, 205, 0) 0%,
+        rgba(79, 115, 228, 0.3) 71%,
+        rgba(81, 115, 230, 0.6) 91%,
+        rgba(71, 98, 226, 0.9) 100%
+      );
+      border-bottom: 1px solid;
+      border-image: linear-gradient(
+          180deg,
+          rgba(156, 194, 247, 0),
+          rgba(98, 143, 236, 1)
+        )
+        1 1;
+      opacity: 1;
+    }
+  }
+  &-item:hover {
+    background: linear-gradient(
+      180deg,
+      rgba(58, 117, 205, 0) 0%,
+      rgba(58, 117, 205, 0) 0%,
+      rgba(79, 115, 228, 0.3) 71%,
+      rgba(81, 115, 230, 0.6) 91%,
+      rgba(71, 98, 226, 0.9) 100%
+    );
+    border-bottom: 1px solid;
+    border-image: linear-gradient(
+        180deg,
+        rgba(156, 194, 247, 0),
+        rgba(98, 143, 236, 1)
+      )
+      1 1;
+    opacity: 1;
+  }
+  &-title {
+    display: flex;
+    align-items: center;
+    padding: 5px 0;
+
+    &-text {
+      color: #fff;
+      text-align: center;
+      font-size: 30px;
+      text-shadow: 0px 0px 9px #389aff;
+    }
+  }
+  &-center-title {
+    width: 25%;
+    justify-content: center;
+    background: url(/micro-assets/device/titleCenter.png) no-repeat;
+    background-size: contain;
+  }
+  &-left-title {
+    width: 40%;
+    padding-left: 30px;
+    background: url(/micro-assets/device/titleLeft.png) no-repeat;
+    background-size: contain;
+  }
+  &-content {
+    display: flex;
+    align-items: center;
+    &-left {
+      padding: 5px 0;
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      background: url(/micro-assets/device/menuLeft.png) no-repeat;
+      background-size: contain;
+      background-position: 0 100%;
+      .inl-header-menu-item {
+        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%);
+      }
+    }
+    &-right {
+      padding: 5px 0;
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      background: url(/micro-assets/device/menuRight.png) no-repeat;
+      background-size: contain;
+      background-position: 0 100%;
+      .inl-header-menu-item {
+        clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
+      }
+    }
+  }
+  &-left {
+    .inl-header-menu-content-right {
+      background: none;
+      justify-content: flex-end;
+    }
+  }
+}