fix(menu): fix menu icon missing close #328

Vben
1 parent 491f1fcf
Showing 10 changed files with 22 additions and 146 deletions
src/components/Menu/index.ts
src/components/Menu/src/components/ExpandIcon.vue
src/components/Menu/src/components/MenuItemTag.vue
src/components/SimpleMenu/index.ts
src/components/SimpleMenu/src/SimpleMenuTag.vue
src/layouts/default/sider/MixSider.vue
src/layouts/default/sider/index.vue
src/main.ts
src/store/modules/permission.ts
stylelint.config.js
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  
 import BasicMenu from './src/BasicMenu.vue';
  
 // export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'));
  
-export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'));
+// export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'));
  
 export { BasicMenu };
-<template>
-  <BasicArrow :expand="getIsOpen" bottom inset :class="getWrapperClass" />
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, computed } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { BasicArrow } from '/@/components/Basic';
-
-  import { propTypes } from '/@/utils/propTypes';
-  export default defineComponent({
-    name: 'BasicMenuItem',
-    components: { BasicArrow },
-    props: {
-      key: propTypes.string,
-      openKeys: {
-        type: Array as PropType<string[]>,
-        default: [],
-      },
-      collapsed: propTypes.bool,
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('basic-menu');
-
-      const getIsOpen = computed(() => {
-        return props.openKeys.includes(props.key);
-      });
-
-      const getWrapperClass = computed(() => {
-        return [
-          `${prefixCls}__expand-icon`,
-          {
-            [`${prefixCls}__expand-icon--collapsed`]: props.collapsed,
-          },
-        ];
-      });
-      return {
-        prefixCls,
-        getIsOpen,
-        getWrapperClass,
-      };
-    },
-  });
-</script>
-<template>
-  <span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span>
-</template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
-
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { contentProps } from '../props';
-
-  export default defineComponent({
-    name: 'MenuItemTag',
-    props: contentProps,
-    setup(props) {
-      const { prefixCls } = useDesign('basic-menu-item-tag');
-
-      const getShowTag = computed(() => {
-        const { item, showTitle, isHorizontal } = props;
-
-        if (!item || showTitle || isHorizontal) return false;
-
-        const { tag } = item;
-        if (!tag) return false;
-
-        const { dot, content } = tag;
-        if (!dot && !content) return false;
-        return true;
-      });
-
-      const getContent = computed(() => {
-        if (!getShowTag.value) return '';
-        const { item } = props;
-        const { tag } = item;
-        const { dot, content } = tag!;
-        return dot ? '' : content;
-      });
-
-      const getTagClass = computed(() => {
-        const { item } = props;
-        const { tag = {} } = item || {};
-        const { dot, type = 'error' } = tag;
-        return [
-          prefixCls,
-          [`${prefixCls}--${type}`],
-          {
-            [`${prefixCls}--dot`]: dot,
-          },
-        ];
-      });
-      return {
-        prefixCls,
-        getTagClass,
-        getShowTag,
-        getContent,
-      };
-    },
-  });
-</script>
 export { default as SimpleMenu } from './src/SimpleMenu.vue';
+export { default as SimpleMenuTag } from './src/SimpleMenuTag.vue';
@@ -8,6 +8,7 @@
   import { defineComponent, computed } from 'vue';
  
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
  
   export default defineComponent({
     name: 'SimpleMenuTag',
@@ -16,10 +17,8 @@
         type: Object as PropType<Menu>,
         default: {},
       },
-      collapseParent: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
+      dot: propTypes.bool,
+      collapseParent: propTypes.bool,
     },
     setup(props) {
       const { prefixCls } = useDesign('simple-menu');
@@ -56,7 +55,7 @@
           [`${tagCls}--${type}`],
           {
             [`${tagCls}--collapse`]: collapseParent,
-            [`${tagCls}--dot`]: dot,
+            [`${tagCls}--dot`]: dot || props.dot,
           },
         ];
       });
 <template>
   <div :class="`${prefixCls}-dom`" :style="getDomStyle"></div>
-
   <div
     v-click-outside="handleClickOutside"
     :style="getWrapStyle"
@@ -27,15 +26,15 @@
               [`${prefixCls}-module__item--active`]: item.path === activePath,
             },
           ]"
+          v-bind="getItemEvents(item)"
           v-for="item in menuModules"
           :key="item.path"
-          v-bind="getItemEvents(item)"
         >
-          <MenuTag :item="item" :showTitle="false" :isHorizontal="false" />
+          <SimpleMenuTag :item="item" collapseParent dot />
           <Icon
             :class="`${prefixCls}-module__icon`"
             :size="getCollapsed ? 16 : 20"
-            :icon="item.meta && item.meta.icon"
+            :icon="item.icon || (item.meta && item.meta.icon)"
           />
           <p :class="`${prefixCls}-module__name`">
             {{ t(item.name) }}
@@ -85,8 +84,8 @@
  
   import { defineComponent, onMounted, ref, computed, unref } from 'vue';
  
-  import { MenuTag } from '/@/components/Menu';
   import { ScrollContainer } from '/@/components/Container';
+  import { SimpleMenuTag } from '/@/components/SimpleMenu';
   import Icon from '/@/components/Icon';
   import { AppLogo } from '/@/components/Application';
   import Trigger from '../trigger/HeaderTrigger.vue';
@@ -111,9 +110,9 @@
       ScrollContainer,
       AppLogo,
       SimpleMenu,
-      MenuTag,
       Icon,
       Trigger,
+      SimpleMenuTag,
     },
     directives: {
       clickOutside,
@@ -337,8 +336,6 @@
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-mix-sider';
-  @tag-prefix-cls: ~'@{namespace}-basic-menu-item-tag';
-  @menu-prefix-cls: ~'@{namespace}-menu';
   @width: 80px;
   .@{prefix-cls} {
     position: fixed;
@@ -349,15 +346,6 @@
     overflow: hidden;
     background: @sider-dark-bg-color;
     transition: all 0.2s ease 0s;
-    .@{tag-prefix-cls} {
-      position: absolute;
-      top: 6px;
-      right: 2px;
-    }
-
-    .@{menu-prefix-cls} {
-      width: 100% !important;
-    }
  
     &-dom {
       height: 100%;
@@ -420,7 +408,7 @@
     &.dark {
       &.open {
         .@{prefix-cls}-logo {
-          border-bottom: 1px solid @border-color;
+          // border-bottom: 1px solid @border-color;
         }
  
         > .scrollbar {
@@ -524,16 +512,6 @@
       height: calc(100%);
       background: #fff;
       transition: all 0.2s;
-      .@{tag-prefix-cls} {
-        position: absolute;
-        top: 10px;
-        right: 30px;
-
-        &--dot {
-          top: 50%;
-          margin-top: -3px;
-        }
-      }
  
       &__title {
         display: flex;
@@ -43,6 +43,7 @@
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-sider-wrapper';
+
   .@{prefix-cls} {
     .ant-drawer-body {
       height: 100vh;
@@ -27,10 +27,11 @@ import { isDevMode } from &#39;/@/utils/env&#39;;
  
 (async () => {
   const app = createApp(App);
-
   // Register global components
   registerGlobComp(app);
  
+  // Multilingual configuration
+  await setupI18n(app);
   // Configure routing
   setupRouter(app);
  
@@ -43,12 +44,8 @@ import { isDevMode } from &#39;/@/utils/env&#39;;
   // Configure global error handling
   setupErrorHandle(app);
  
-  await Promise.all([
-    // Multilingual configuration
-    setupI18n(app),
-    // Mount when the route is ready
-    router.isReady(),
-  ]);
+  // Mount when the route is ready
+  await router.isReady();
  
   app.mount('#app', true);
  
@@ -18,7 +18,7 @@ import { transformObjToRoute } from &#39;/@/router/helper/routeHelper&#39;;
 import { transformRouteToMenu } from '/@/router/helper/menuHelper';
  
 import { useMessage } from '/@/hooks/web/useMessage';
-// import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '/@/hooks/web/useI18n';
 import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/constant';
  
 const { createMessage } = useMessage();
@@ -84,7 +84,7 @@ class Permission extends VuexModule {
  
   @Action
   async buildRoutesAction(id?: number | string): Promise<AppRouteRecordRaw[]> {
-    // const { t } = useI18n();
+    const { t } = useI18n();
     let routes: AppRouteRecordRaw[] = [];
     const roleList = toRaw(userStore.getRoleListState);
  
@@ -101,8 +101,7 @@ class Permission extends VuexModule {
       //  If you are sure that you do not need to do background dynamic permissions, please comment the entire judgment below
     } else if (permissionMode === PermissionModeEnum.BACK) {
       createMessage.loading({
-        content: 'Loading menu...',
-        // content: 't('sys.app.menuLoading')',
+        content: t('sys.app.menuLoading'),
         duration: 1,
       });
       // Here to get the background routing menu logic to modify by yourself
@@ -16,6 +16,7 @@ module.exports = {
       },
     ],
     'no-empty-source': null,
+    'named-grid-areas-no-invalid': null,
     'unicode-bom': 'never',
     'no-descending-specificity': null,
     'font-family-no-missing-generic-family-keyword': null,