feat(layout): add mix sidebar mode

CHANGELOG.zh_CN.md

@@ -3,6 +3,11 @@
 ### ✨ Features
 
 - 新增 `v-ripple`水波纹指令
+- 新增左侧菜单混合模式
+
+### ✨ Refactor
+
+- 移除折叠显示菜单名配置
 
 ### 🐛 Bug Fixes
 

package.json

@@ -21,23 +21,23 @@
     "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"
   },
   "dependencies": {
-    "@iconify/iconify": "^2.0.0-rc.2",
-    "@vueuse/core": "^4.0.0-rc.9",
+    "@iconify/iconify": "^2.0.0-rc.4",
+    "@vueuse/core": "^4.0.0",
     "ant-design-vue": "^2.0.0-rc.5",
-    "apexcharts": "^3.22.3",
+    "apexcharts": "^3.23.0",
     "axios": "^0.21.0",
     "crypto-es": "^1.2.6",
     "echarts": "^4.9.0",
-    "lodash-es": "^4.17.15",
+    "lodash-es": "^4.17.20",
     "mockjs": "^1.1.0",
     "moment": "^2.29.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.12.0",
-    "vditor": "^3.7.2",
+    "vditor": "^3.7.3",
     "vue": "^3.0.4",
-    "vue-i18n": "^9.0.0-beta.13",
+    "vue-i18n": "9.0.0-beta.14",
     "vue-router": "^4.0.1",
     "vue-types": "^3.0.1",
     "vuex": "^4.0.0-rc.2",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.272",
+    "@iconify/json": "^1.1.275",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.4.1",
     "@types/echarts": "^4.9.3",
@@ -61,10 +61,10 @@
     "@types/qrcode": "^1.3.5",
     "@types/rollup-plugin-visualizer": "^2.6.0",
     "@types/sortablejs": "^1.10.6",
-    "@types/yargs": "^15.0.11",
+    "@types/yargs": "^15.0.12",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.10.0",
-    "@typescript-eslint/parser": "^4.10.0",
+    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@typescript-eslint/parser": "^4.11.0",
     "@vue/compiler-sfc": "^3.0.4",
     "@vuedx/typecheck": "^0.2.4-0",
     "@vuedx/typescript-plugin-vue": "^0.2.4-0",
@@ -75,16 +75,16 @@
     "cross-env": "^7.0.3",
     "dot-prop": "^6.0.1",
     "dotenv": "^8.2.0",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-vue": "^7.2.0",
+    "eslint-plugin-vue": "^7.3.0",
     "esno": "^0.3.0",
     "fs-extra": "^9.0.1",
     "globrex": "^0.1.2",
     "husky": "^4.3.6",
     "koa-static": "^5.0.0",
-    "less": "^3.13.0",
+    "less": "^4.0.0",
     "lint-staged": "^10.5.3",
     "portfinder": "^1.0.28",
     "postcss-import": "^12.0.1",

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,19 +3,24 @@
 </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);
 
       useClickOutside(wrap as Ref<HTMLDivElement>, () => {
         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;