fix(layout): fix style compatibility issues

vben
1 parent 6ef62ba6
Showing 3 changed files with 107 additions and 18 deletions
package.json
src/layouts/default/index.vue
yarn.lock
@@ -37,7 +37,7 @@
     "@logicflow/extension": "^0.4.8",
     "@vueuse/core": "^4.11.1",
     "@zxcvbn-ts/core": "^0.3.0",
-    "ant-design-vue": "2.1.2",
+    "ant-design-vue": "2.1.6",
     "axios": "^0.21.1",
     "codemirror": "^5.61.1",
     "cropperjs": "^1.5.11",
@@ -53,7 +53,7 @@
     "sortablejs": "^1.13.0",
     "tinymce": "^5.8.1",
     "vditor": "^3.8.5",
-    "vue": "3.0.11",
+    "vue": "3.1.0-beta.4",
     "vue-i18n": "9.1.6",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.8",
@@ -80,7 +80,7 @@
     "@vitejs/plugin-legacy": "^1.4.0",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vitejs/plugin-vue-jsx": "^1.1.4",
-    "@vue/compiler-sfc": "3.0.11",
+    "@vue/compiler-sfc": "3.1.0-beta.4",
     "autoprefixer": "^10.2.5",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
@@ -2,7 +2,7 @@
   <Layout :class="prefixCls" v-bind="lockEvents">
     <LayoutFeatures />
     <LayoutHeader fixed v-if="getShowFullHeaderRef" />
-    <Layout :class="layoutClass">
+    <Layout :class="[layoutClass]">
       <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
       <Layout :class="`${prefixCls}-main`">
         <LayoutMultipleHeader />
@@ -45,12 +45,18 @@
       const { prefixCls } = useDesign('default-layout');
       const { getIsMobile } = useAppInject();
       const { getShowFullHeaderRef } = useHeaderSetting();
-      const { getShowSidebar, getIsMixSidebar } = useMenuSetting();
+      const { getShowSidebar, getIsMixSidebar, getIsSidebarType } = useMenuSetting();
       // Create a lock screen monitor
       const lockEvents = useLockPage();
-      const layoutClass = computed(() => ({ 'ant-layout-has-sider': unref(getIsMixSidebar) }));
+      const layoutClass = computed(() => {
+        let cls: string[] = ['ant-layout'];
+        if (unref(getIsMixSidebar) || unref(getIsSidebarType)) {
+          cls.push('ant-layout-has-sider');
+        }
+        return cls;
+      });
       return {
         getShowFullHeaderRef,
@@ -79,6 +85,7 @@
     }
     &-main {
+      width: 100%;
       margin-left: 1px;
     }
   }
@@ -1946,6 +1946,17 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
+"@vue/compiler-core@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.1.0-beta.4.tgz#ed8b7dd3d2a42688283875de13c500099fe5d612"
+  integrity sha512-ukGe7aVKkzD3lDAGeiCPJutY0+FH0JEVglVRY9pm3oAYkX3gdOfrfUCZKx2Vm0IGHci7oyfnIigT3yVTEvcBRg==
+  dependencies:
+    "@babel/parser" "^7.12.0"
+    "@babel/types" "^7.12.0"
+    "@vue/shared" "3.1.0-beta.4"
+    estree-walker "^2.0.1"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.0.11", "@vue/compiler-dom@^3.0.11":
   version "3.0.11"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.11.tgz#b15fc1c909371fd671746020ba55b5dab4a730ee"
@@ -1954,7 +1965,37 @@
     "@vue/compiler-core" "3.0.11"
     "@vue/shared" "3.0.11"
-"@vue/compiler-sfc@3.0.11", "@vue/compiler-sfc@^3.0.11":
+"@vue/compiler-dom@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.0-beta.4.tgz#2d56d21bf39bc8e57278ecc3abb4c36f971c94d1"
+  integrity sha512-D6s1WkunFOANb8gu3F9MhTsF0R0PwxrQAgswY9v0yTKur44vyv0mwaEgQCw0FIwnPNmL15wh5ahtItDvmfkbzQ==
+  dependencies:
+    "@vue/compiler-core" "3.1.0-beta.4"
+    "@vue/shared" "3.1.0-beta.4"
+
+"@vue/compiler-sfc@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.0-beta.4.tgz#fb4e1b3cee19a34428c9e52c64df3b81ffda6687"
+  integrity sha512-G89oMfxPN33d2g1LXxpLIWi7e3wLCh0/w3dV1HWswq3+5YWCW4ITVc/nArPKKT+B9h0CTJ8WSRkBDsbe4AHDTQ==
+  dependencies:
+    "@babel/parser" "^7.13.9"
+    "@babel/types" "^7.13.0"
+    "@vue/compiler-core" "3.1.0-beta.4"
+    "@vue/compiler-dom" "3.1.0-beta.4"
+    "@vue/compiler-ssr" "3.1.0-beta.4"
+    "@vue/shared" "3.1.0-beta.4"
+    consolidate "^0.16.0"
+    estree-walker "^2.0.1"
+    hash-sum "^2.0.0"
+    lru-cache "^5.1.1"
+    magic-string "^0.25.7"
+    merge-source-map "^1.1.0"
+    postcss "^8.1.10"
+    postcss-modules "^4.0.0"
+    postcss-selector-parser "^6.0.4"
+    source-map "^0.6.1"
+
+"@vue/compiler-sfc@^3.0.11":
   version "3.0.11"
   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.11.tgz#cd8ca2154b88967b521f5ad3b10f5f8b6b665679"
   integrity sha512-7fNiZuCecRleiyVGUWNa6pn8fB2fnuJU+3AGjbjl7r1P5wBivfl02H4pG+2aJP5gh2u+0wXov1W38tfWOphsXw==
@@ -1984,6 +2025,14 @@
     "@vue/compiler-dom" "3.0.11"
     "@vue/shared" "3.0.11"
+"@vue/compiler-ssr@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.0-beta.4.tgz#9d49a8c7bd047ac446db899b80b3345c5f1e154d"
+  integrity sha512-yvE0tee9AjElRKOLS2U4wmYHoxYRfsI+XK/QPEv1gg56M7+CGCK2+Bjwt4nNsCy4Wd0QuD75frCVLIaeOzzn9w==
+  dependencies:
+    "@vue/compiler-dom" "3.1.0-beta.4"
+    "@vue/shared" "3.1.0-beta.4"
+
 "@vue/devtools-api@^6.0.0-beta.10":
   version "6.0.0-beta.10"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.10.tgz#f39da7618cee292e39c7274227c34163e30eb3ca"
@@ -2001,6 +2050,13 @@
   dependencies:
     "@vue/shared" "3.0.11"
+"@vue/reactivity@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.0-beta.4.tgz#7ef9eb60a05da9662fbdb004ed47c8aaf657e8d3"
+  integrity sha512-TfvJ897j4KfTX4g0nKntYTPTijD2eJqVbWIQIQCV6xqTAhqTl+4tsu6RRzPA7Ynh8mv9td7OJoaQYZ3zxM4siA==
+  dependencies:
+    "@vue/shared" "3.1.0-beta.4"
+
 "@vue/runtime-core@3.0.11":
   version "3.0.11"
   resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.11.tgz#c52dfc6acf3215493623552c1c2919080c562e44"
@@ -2009,6 +2065,14 @@
     "@vue/reactivity" "3.0.11"
     "@vue/shared" "3.0.11"
+"@vue/runtime-core@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.0-beta.4.tgz#3c41b38d8518a6778d93541c3760d4264c971fca"
+  integrity sha512-hsB+s5/JyFxYB56MHHq/XowB8jj8n5cYB9wqon2cMylC/HSxgvSMdehNbky6X5s8vAQ8HYCSjqzn94MlOP5USA==
+  dependencies:
+    "@vue/reactivity" "3.1.0-beta.4"
+    "@vue/shared" "3.1.0-beta.4"
+
 "@vue/runtime-dom@3.0.11":
   version "3.0.11"
   resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.11.tgz#7a552df21907942721feb6961c418e222a699337"
@@ -2018,11 +2082,25 @@
     "@vue/shared" "3.0.11"
     csstype "^2.6.8"
+"@vue/runtime-dom@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.0-beta.4.tgz#72f63309defa7b7b19af5c2118c8e9fdf4b44adb"
+  integrity sha512-jg7Bn6aLoUZ5ACobEQYZovexgXKKhh95vudsyTSIZoq5m/tKRTCQg/UbzkWlE1P9UrRigQsF2sbhoxa0COktSg==
+  dependencies:
+    "@vue/runtime-core" "3.1.0-beta.4"
+    "@vue/shared" "3.1.0-beta.4"
+    csstype "^2.6.8"
+
 "@vue/shared@3.0.11", "@vue/shared@^3.0.11":
   version "3.0.11"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz#20d22dd0da7d358bb21c17f9bde8628152642c77"
   integrity sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA==
+"@vue/shared@3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.0-beta.4.tgz#eb7038506cfc0a0a89fa2a46b40186df17adf58c"
+  integrity sha512-W2vWLh8XEK1xOkzBQdqDNng324hbWe3LEebHaHBM2o3vIPp5zCO/P8LCfTGpLaFU2ISy2NhAUk44VZBswFAKEQ==
+
 "@vueuse/core@^4.11.1":
   version "4.11.1"
   resolved "https://registry.npmjs.com/@vueuse/core/-/core-4.11.1.tgz#1ab79284dffe8934420a1a40491333cd0591ecd2"
@@ -2178,10 +2256,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
-ant-design-vue@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.npmjs.com/ant-design-vue/-/ant-design-vue-2.1.2.tgz#2065d7e63199c0c584919458af57b6a0b597f677"
-  integrity sha512-gDG0wauGVt4LE63behrJaIcq4BB+dgs+dpj9jz17IgKr2MPYSEeKetU/x9Kk8d58cGonz4Ulncg7fBZJ7EljsQ==
+ant-design-vue@2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-2.1.6.tgz#c51cdc858e1b1b8b569f5435eb487f53a3f1745e"
+  integrity sha512-qICxb6Y4f7QuSuh/jbLhZA9SkUBnP9xYfy/E6yD7+1fg04aAzmRK8oLv8ETuGTrROVdSVeic9v/NS2BXEuuARg==
   dependencies:
     "@ant-design-vue/use" "^0.0.1-0"
     "@ant-design/icons-vue" "^6.0.0"
@@ -2191,7 +2269,7 @@ ant-design-vue@2.1.2:
     async-validator "^3.3.0"
     dom-align "^1.10.4"
     dom-scroll-into-view "^2.0.0"
-    is-mobile "^2.2.1"
+    lodash "^4.17.21"
     lodash-es "^4.17.15"
     moment "^2.27.0"
     omit.js "^2.0.0"
@@ -6027,11 +6105,6 @@ is-jpg@^2.0.0:
   resolved "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz#2e1997fa6e9166eaac0242daae443403e4ef1d97"
   integrity sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=
-is-mobile@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.npmjs.com/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
-  integrity sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -10816,7 +10889,16 @@ vue-types@^3.0.0, vue-types@^3.0.2:
   dependencies:
     is-plain-object "3.0.1"
-vue@3.0.11, vue@^3.0.0:
+vue@3.1.0-beta.4:
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.0-beta.4.tgz#c17c14f60a9267c5f33d9fa4dbc9bc54605d5ae2"
+  integrity sha512-HzJnk1iaWGcExAaAIO2yVMMhxHX6wSLcKF3/PwF2NZMlMpUf7ZQSFHVfzIyJqaQ96K1KJOlDPbpqKYLpRq947w==
+  dependencies:
+    "@vue/compiler-dom" "3.1.0-beta.4"
+    "@vue/runtime-dom" "3.1.0-beta.4"
+    "@vue/shared" "3.1.0-beta.4"
+
+vue@^3.0.0:
   version "3.0.11"
   resolved "https://registry.npmjs.org/vue/-/vue-3.0.11.tgz#c82f9594cbf4dcc869241d4c8dd3e08d9a8f4b5f"
   integrity sha512-3/eUi4InQz8MPzruHYSTQPxtM3LdZ1/S/BvaU021zBnZi0laRUyH6pfuE4wtUeLvI8wmUNwj5wrZFvbHUXL9dw==