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

vbenjs · Mar 7, 2021 · d5d4c4b · d5d4c4b
1 parent 491f1fc
commit d5d4c4b
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 146 deletions.
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
@@ -1,9 +1,9 @@
-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 };
diff --git a/src/components/Menu/src/components/ExpandIcon.vue b/src/components/Menu/src/components/ExpandIcon.vue
diff --git a/src/components/Menu/src/components/MenuItemTag.vue b/src/components/Menu/src/components/MenuItemTag.vue
diff --git a/src/components/SimpleMenu/index.ts b/src/components/SimpleMenu/index.ts
@@ -1 +1,2 @@
 export { default as SimpleMenu } from './src/SimpleMenu.vue';
+export { default as SimpleMenuTag } from './src/SimpleMenuTag.vue';
diff --git a/src/components/SimpleMenu/src/SimpleMenuTag.vue b/src/components/SimpleMenu/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,
           },
         ];
       });

diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
@@ -1,6 +1,5 @@
 <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;

diff --git a/src/layouts/default/sider/index.vue b/src/layouts/default/sider/index.vue
@@ -43,6 +43,7 @@
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-sider-wrapper';
+
   .@{prefix-cls} {
     .ant-drawer-body {
       height: 100vh;

diff --git a/src/main.ts b/src/main.ts
@@ -27,10 +27,11 @@ import { isDevMode } from '/@/utils/env';
 
 (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 '/@/utils/env';
   // 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);
 

diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
@@ -18,7 +18,7 @@ import { transformObjToRoute } from '/@/router/helper/routeHelper';
 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

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -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,