feat(layout): add mix sidebar mode

src/components/Application/src/AppLogo.vue

@@ -3,14 +3,10 @@
  * @Description: logo component
 -->
 <template>
-  <div
-    class="anticon"
-    :class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
-    @click="handleGoHome"
-  >
+  <div class="anticon" :class="[prefixCls, theme]" @click="handleGoHome">
     <img src="/@/assets/images/logo.png" />
     <div class="ml-2 ellipsis" :class="[`${prefixCls}__title`]" v-show="showTitle">
-      {{ globSetting.title }}
+      {{ title }}
     </div>
   </div>
 </template>
@@ -40,9 +36,7 @@
     setup() {
       const { prefixCls } = useDesign('app-logo');
 
-      const { getCollapsedShowTitle } = useMenuSetting();
-
-      const globSetting = useGlobSetting();
+      const { title } = useGlobSetting();
 
       const go = useGo();
 
@@ -52,8 +46,7 @@
 
       return {
         handleGoHome,
-        globSetting,
-        getCollapsedShowTitle,
+        title,
         prefixCls,
       };
     },
@@ -70,10 +63,6 @@
     cursor: pointer;
     transition: all 0.2s ease;
 
-    &.collapsed-show-title {
-      padding-left: 20px;
-    }
-
     &.light {
       border-bottom: 1px solid @border-color-base;
     }

src/components/Application/src/search/AppSearchModal.vue

@@ -65,10 +65,12 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { ClickOutSide } from '/@/components/ClickOutSide';
   import { useAppInject } from '/@/hooks/web/useAppInject';
+
   export default defineComponent({
     name: 'AppSearchModal',
     components: { SearchOutlined, ClickOutSide, AppSearchFooter },
     emits: ['close'],
+
     props: {
       visible: Boolean,
     },

src/components/ClickOutSide/src/index.vue

@@ -3,12 +3,13 @@
 </template>
 <script lang="ts">
   import type { Ref } from 'vue';
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, onMounted } from 'vue';
 
   import { useClickOutside } from '/@/hooks/web/useClickOutside';
 
   export default defineComponent({
     name: 'ClickOutSide',
+    emits: ['mounted', 'clickOutside'],
     setup(_, { emit }) {
       const wrap = ref<ElRef>(null);
 
@@ -16,6 +17,10 @@
         emit('clickOutside');
       });
 
+      onMounted(() => {
+        emit('mounted');
+      });
+
       return { wrap };
     },
   });

src/components/Markdown/src/index.vue

@@ -57,7 +57,7 @@
       onUnmounted(() => {
         const vditorInstance = unref(vditorRef);
         if (!vditorInstance) return;
-        vditorInstance.destroy();
+        vditorInstance?.destroy?.();
       });
 
       return {

src/components/Menu/index.ts

@@ -6,4 +6,8 @@ export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'
   loading: false,
 });
 
+export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'), {
+  loading: false,
+});
+
 withInstall(BasicMenu);

src/components/Menu/src/BasicMenu.vue

@@ -17,7 +17,7 @@
         :item="item"
         :theme="theme"
         :level="1"
-        :showTitle="showTitle"
+        :showTitle="!getCollapsed"
         :isHorizontal="isHorizontal"
       />
     </template>
@@ -95,16 +95,12 @@
           prefixCls,
           `justify-${align}`,
           {
-            [`${prefixCls}--hide-title`]: !unref(showTitle),
-            [`${prefixCls}--collapsed-show-title`]: props.collapsedShowTitle,
             [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
             [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
           },
         ];
       });
 
-      const showTitle = computed(() => props.collapsedShowTitle && unref(getCollapsed));
-
       const getInlineCollapseOptions = computed(() => {
         const isInline = props.mode === MenuModeEnum.INLINE;
 
@@ -168,7 +164,7 @@
         getMenuClass,
         handleOpenChange,
         getOpenKeys,
-        showTitle,
+        getCollapsed,
         ...toRefs(menuState),
       };
     },

src/components/Menu/src/components/MenuItemTag.vue

@@ -15,6 +15,7 @@
 
       const getShowTag = computed(() => {
         const { item, showTitle, isHorizontal } = props;
+
         if (!item || showTitle || isHorizontal) return false;
 
         const { tag } = item;

src/components/Menu/src/index.less

@@ -48,47 +48,16 @@
     opacity: 1 !important;
   }
 
-  &--hide-title {
-    &.ant-menu-inline-collapsed > .ant-menu-item,
-    &.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
-    &.ant-menu-inline-collapsed
-      > .ant-menu-item-group
-      > .ant-menu-item-group-list
-      > .ant-menu-submenu
-      > .ant-menu-submenu-title,
-    &.ant-menu-inline-collapsed .ant-menu-submenu-title {
-      padding-right: 16px !important;
-      padding-left: 16px !important;
-    }
-  }
-
-  &--collapsed-show-title.ant-menu-inline-collapsed {
-    .@{basic-menu-prefix-cls}-item__level1 {
-      padding: 2px 0;
-    }
-
-    & > li[role='menuitem']:not(.ant-menu-submenu),
-    & > li > .ant-menu-submenu-title {
-      display: flex;
-      margin-top: 10px;
-      font-size: 12px;
-      flex-direction: column;
-      align-items: center;
-      line-height: 24px;
-    }
-
-    & > li > .ant-menu-submenu-title {
-      line-height: 24px;
-    }
-    .@{basic-menu-content-prefix-cls}-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      .@{basic-menu-content-prefix-cls}--show-title {
-        line-height: 30px;
-      }
-    }
+  &.ant-menu-inline-collapsed > .ant-menu-item,
+  &.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
+  &.ant-menu-inline-collapsed
+    > .ant-menu-item-group
+    > .ant-menu-item-group-list
+    > .ant-menu-submenu
+    > .ant-menu-submenu-title,
+  &.ant-menu-inline-collapsed .ant-menu-submenu-title {
+    padding-right: 16px !important;
+    padding-left: 16px !important;
   }
 
   .@{basic-menu-content-prefix-cls}-wrapper {
@@ -252,43 +221,6 @@
     }
   }
 
-  .@{basic-menu-tag-prefix-cls} {
-    position: absolute;
-    top: calc(50% - 8px);
-    right: 30px;
-    display: inline-block;
-    padding: 2px 4px;
-    margin-right: 4px;
-    font-size: 12px;
-    line-height: 14px;
-    color: #fff;
-    border-radius: 2px;
-
-    &--dot {
-      top: calc(50% - 4px);
-      width: 8px;
-      height: 8px;
-      padding: 0;
-      border-radius: 50%;
-    }
-
-    &--primary {
-      background: @primary-color;
-    }
-
-    &--error {
-      background: @error-color;
-    }
-
-    &--success {
-      background: @success-color;
-    }
-
-    &--warn {
-      background: @warning-color;
-    }
-  }
-
   .ant-menu-submenu,
   .ant-menu-submenu-inline {
     transition: unset;
@@ -322,3 +254,40 @@
     }
   }
 }
+
+.@{basic-menu-tag-prefix-cls} {
+  position: absolute;
+  top: calc(50% - 8px);
+  right: 30px;
+  display: inline-block;
+  padding: 2px 4px;
+  margin-right: 4px;
+  font-size: 12px;
+  line-height: 14px;
+  color: #fff;
+  border-radius: 2px;
+
+  &--dot {
+    top: calc(50% - 4px);
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  &--primary {
+    background: @primary-color;
+  }
+
+  &--error {
+    background: @error-color;
+  }
+
+  &--success {
+    background: @success-color;
+  }
+
+  &--warn {
+    background: @warning-color;
+  }
+}

src/components/Menu/src/props.ts

@@ -10,8 +10,6 @@ export const basicProps = {
     default: () => [],
   },
 
-  collapsedShowTitle: propTypes.bool,
-
   // 最好是4 倍数
   inlineIndent: propTypes.number.def(20),
   // 菜单组件的mode属性
@@ -19,7 +17,6 @@ export const basicProps = {
     type: String as PropType<MenuModeEnum>,
     default: MenuModeEnum.INLINE,
   },
-  showLogo: propTypes.bool,
   type: {
     type: String as PropType<MenuTypeEnum>,
     default: MenuTypeEnum.MIX,

src/components/Tinymce/src/Editor.vue

@@ -107,7 +107,7 @@
 
       function destory() {
         if (getTinymce() !== null) {
-          getTinymce().remove(unref(editorRef));
+          getTinymce()?.remove?.(unref(editorRef));
         }
       }