fix(code-editor): fix CodeEditor style problem, fix #655

vben
1 parent 3a16f2b8
Showing 7 changed files with 63 additions and 137 deletions
CHANGELOG.zh_CN.md
package.json
src/components/CodeEditor/src/codemirror/CodeMirror.vue
src/components/CodeEditor/src/codemirror/codemirror.css
src/components/Page/src/PageWrapper.vue
src/main.ts
yarn.lock
+## Wip
+
+### 🐛 Bug Fixes
+
+- 修复`CodeEditor`样式问题
+
 ## 2.4.0 (2021-05-25)
 ### ✨ Features
@@ -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.6",
+    "ant-design-vue": "2.1.2",
     "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.1.0-beta.5",
+    "vue": "3.0.11",
     "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.1.0-beta.5",
+    "@vue/compiler-sfc": "3.0.11",
     "autoprefixer": "^10.2.6",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
@@ -120,14 +120,14 @@
     "vite-plugin-style-import": "^0.10.1",
     "vite-plugin-svg-icons": "^0.6.1",
     "vite-plugin-theme": "^0.8.0",
-    "vite-plugin-windicss": "0.16.0",
+    "vite-plugin-windicss": "^0.16.5",
     "vue-eslint-parser": "^7.6.0",
     "vue-tsc": "^0.1.6"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.50.1"
+    "rollup": "^2.50.2"
   },
   "repository": {
     "type": "git",
 <template>
-  <div class="relative h-100 !h-full w-full overflow-hidden" ref="el"> </div>
+  <div class="relative !h-full w-full overflow-hidden" ref="el"> </div>
 </template>
 <script lang="ts">
@@ -338,6 +338,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror-sizer {
   position: relative;
+  margin-bottom: 20px !important;
   border-right: 30px solid transparent;
 }
@@ -17,9 +17,11 @@
         <slot :name="item" v-bind="data"></slot>
       </template>
     </PageHeader>
+
     <div class="overflow-hidden" :class="getContentClass" :style="getContentStyle">
       <slot></slot>
     </div>
+
     <PageFooter v-if="getShowFooter" ref="footerRef">
       <template #left>
         <slot name="leftFooter"></slot>
@@ -81,21 +83,19 @@
         return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
       });
-      const getContentStyle = computed(
-        (): CSSProperties => {
-          const { contentFullHeight, contentStyle, fixedHeight } = props;
-          if (!contentFullHeight) {
-            return { ...contentStyle };
-          }
-          const height = `${unref(pageHeight)}px`;
-          return {
-            ...contentStyle,
-            minHeight: height,
-            ...(fixedHeight ? { height } : {}),
-            paddingBottom: `${unref(footerHeight)}px`,
-          };
+      const getContentStyle = computed((): CSSProperties => {
+        const { contentFullHeight, contentStyle, fixedHeight } = props;
+        if (!contentFullHeight) {
+          return { ...contentStyle };
         }
-      );
+        const height = `${unref(pageHeight)}px`;
+        return {
+          ...contentStyle,
+          minHeight: height,
+          ...(fixedHeight ? { height } : {}),
+          paddingBottom: `${unref(footerHeight)}px`,
+        };
+      });
       const getContentClass = computed(() => {
         const { contentBackground, contentClass } = props;
@@ -145,14 +145,15 @@
         }
         // fix:subtract content's marginTop and marginBottom value
         let subtractHeight = 0;
-        let marginBottom = '0px';
-        let marginTop = '0px';
+        const ZERO_PX = '0px';
+        let marginBottom = ZERO_PX;
+        let marginTop = ZERO_PX;
         const classElments = document.querySelectorAll(`.${prefixVar}-page-wrapper-content`);
         if (classElments && classElments.length > 0) {
           const contentEl = classElments[0];
           const cssStyle = getComputedStyle(contentEl);
-          marginBottom = cssStyle?.marginBottom;
-          marginTop = cssStyle?.marginTop;
+          marginBottom = cssStyle?.marginBottom ?? ZERO_PX;
+          marginTop = cssStyle?.marginTop ?? ZERO_PX;
         }
         if (marginBottom) {
           const contentMarginBottom = Number(marginBottom.replace(/[^\d]/g, ''));
@@ -15,8 +15,8 @@ import { registerGlobComp } from &#39;/@/components/registerGlobComp&#39;;
 // Register icon Sprite
 import 'virtual:svg-icons-register';
-// Do not introduce` on-demand in local development?
-// In the local development for on-demand introduction, the number of browser requests will increase by about 20%.
+// Do not introduce on-demand in local development?
+// In the local development for introduce on-demand, the number of browser requests will increase by about 20%.
 // Which may slow down the browser refresh.
 // Therefore, all are introduced in local development, and only introduced on demand in the production environment
 if (import.meta.env.DEV) {
@@ -1951,17 +1951,6 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
-"@vue/compiler-core@3.1.0-beta.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.1.0-beta.5.tgz#e99427a810d1f1603d58ba5e213f83e2c54688c6"
-  integrity sha512-pL6XvPUvZLsGd6wHxZ+KXBEc8oOiKZKCuQ+DGBU2HWSvSP0YrIVA2y1fc/8NP7dFvBq3Eqr79oIPDIQHbmVDIw==
-  dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.1.0-beta.5"
-    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"
@@ -1970,39 +1959,9 @@
     "@vue/compiler-core" "3.0.11"
     "@vue/shared" "3.0.11"
-"@vue/compiler-dom@3.1.0-beta.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.0-beta.5.tgz#c0cccdda578845351c9876f28cc4d68e2e021a61"
-  integrity sha512-DZTx4UViFxALOEsCNNb44hClDJEV02JW46G3cdCJwakcLE0o6vppgrazF+7zIOV5qjrN00sAQeCf9EbaLrgY2Q==
-  dependencies:
-    "@vue/compiler-core" "3.1.0-beta.5"
-    "@vue/shared" "3.1.0-beta.5"
-
-"@vue/compiler-sfc@3.1.0-beta.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.0-beta.5.tgz#2c3c8aa4148ca17d2b46eb6fa36363b84b99ce46"
-  integrity sha512-mjozHyFFbMOPRFYD1YqpHGvcncnGkPidud9Q+93E0db4crfXJ8dK7jQhc8HYXcoXaQ7WCz9oeF7AaRrAv9CmBw==
-  dependencies:
-    "@babel/parser" "^7.13.9"
-    "@babel/types" "^7.13.0"
-    "@vue/compiler-core" "3.1.0-beta.5"
-    "@vue/compiler-dom" "3.1.0-beta.5"
-    "@vue/compiler-ssr" "3.1.0-beta.5"
-    "@vue/shared" "3.1.0-beta.5"
-    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":
+"@vue/compiler-sfc@3.0.11", "@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"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.11.tgz#cd8ca2154b88967b521f5ad3b10f5f8b6b665679"
   integrity sha512-7fNiZuCecRleiyVGUWNa6pn8fB2fnuJU+3AGjbjl7r1P5wBivfl02H4pG+2aJP5gh2u+0wXov1W38tfWOphsXw==
   dependencies:
     "@babel/parser" "^7.13.9"
@@ -2030,14 +1989,6 @@
     "@vue/compiler-dom" "3.0.11"
     "@vue/shared" "3.0.11"
-"@vue/compiler-ssr@3.1.0-beta.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.0-beta.5.tgz#2ec33b389c86329c5ebeb873e4228c28c26a1bf5"
-  integrity sha512-MLuBIj1Sd8yfL44HK5Cm36PFFiQIOHj5I32e/DftbKLaxisrHrUulBniMeQa3aQufIqUUXBfFNC09ejIiojEfg==
-  dependencies:
-    "@vue/compiler-dom" "3.1.0-beta.5"
-    "@vue/shared" "3.1.0-beta.5"
-
 "@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"
@@ -2055,13 +2006,6 @@
   dependencies:
     "@vue/shared" "3.0.11"
-"@vue/reactivity@3.1.0-beta.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.0-beta.5.tgz#c5b279a3d95ab35fa92489f2abc94f613bc6734c"
-  integrity sha512-lf+DVxUWZZMgOgt8QN4N91JmpxjkuDu/A3pk3jwwrb6yB4Q759IfmbD2PTKcTqgmQWaSw5CJPjRjyTe1wkWAeg==
-  dependencies:
-    "@vue/shared" "3.1.0-beta.5"
-
 "@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"
@@ -2070,14 +2014,6 @@
     "@vue/reactivity" "3.0.11"
     "@vue/shared" "3.0.11"
-"@vue/runtime-core@3.1.0-beta.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.0-beta.5.tgz#9da74fb070e7152a4486fb7e477ba9fdfbc8f8c6"
-  integrity sha512-YNKmKr0xI5KMplju7XfTPRsK1ePewaiEyKvvsLROQ3609HGkJWeKZlWAPdYb5j2i1ub8v4hM4iZXxQtZmrQGhg==
-  dependencies:
-    "@vue/reactivity" "3.1.0-beta.5"
-    "@vue/shared" "3.1.0-beta.5"
-
 "@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"
@@ -2087,25 +2023,11 @@
     "@vue/shared" "3.0.11"
     csstype "^2.6.8"
-"@vue/runtime-dom@3.1.0-beta.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.0-beta.5.tgz#e5ebf4f13103198b0bb43b0d2eba699a5a022d1f"
-  integrity sha512-eLML5RNn9q/QJo802GRBvNC9W1BABJ8xyvexrruZCZAlKocTq9J0j2vS2IwAl/WbG1X8cY6yPgdQEQ/8eUy0Og==
-  dependencies:
-    "@vue/runtime-core" "3.1.0-beta.5"
-    "@vue/shared" "3.1.0-beta.5"
-    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.5":
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.0-beta.5.tgz#ef971d6f1c64f89c5918529dcbee67de9de15cfa"
-  integrity sha512-jtQGnIERLNZWbj4Uy6uddALlzemqH5YpCQtwIT1e0DbDpEQ+OUMP6j5TCuFWARblv63lT9t/e+nOZcC1iTr6zg==
-
 "@vueuse/core@^4.11.1":
   version "4.11.1"
   resolved "https://registry.npmjs.com/@vueuse/core/-/core-4.11.1.tgz#1ab79284dffe8934420a1a40491333cd0591ecd2"
@@ -2121,10 +2043,10 @@
   dependencies:
     vue-demi "*"
-"@windicss/plugin-utils@0.16.0":
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-0.16.0.tgz#660586b95ed3394b07f9970b2be77f681ea1ecd4"
-  integrity sha512-Gu6iHqFnqfxE0J8Oa74+2W5L2052ptqEHBtPaOuXOFgIMTJAT2KoXb6v+/Z0ldHsxVC1q+MSsom877SJ0cL2iA==
+"@windicss/plugin-utils@0.16.5":
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-0.16.5.tgz#00e11dd5b5a51c96e494a8fe3aa705e5fb2eb3a0"
+  integrity sha512-APDpVtol2RJLiHaGdn+VaBksaFWFk27LWjc51X1e+mkiPbHcepV+aBXLylNoTrIKzMjtVpsrUHRC+afGMBVgpw==
   dependencies:
     "@antfu/utils" "^0.1.6"
     debug "^4.3.2"
@@ -2132,7 +2054,7 @@
     jiti "^1.9.2"
     magic-string "^0.25.7"
     micromatch "^4.0.4"
-    windicss "^3.0.9"
+    windicss "^3.0.12"
 "@zxcvbn-ts/core@^0.3.0":
   version "0.3.0"
@@ -2261,10 +2183,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
-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==
+ant-design-vue@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-2.1.2.tgz#2065d7e63199c0c584919458af57b6a0b597f677"
+  integrity sha512-gDG0wauGVt4LE63behrJaIcq4BB+dgs+dpj9jz17IgKr2MPYSEeKetU/x9Kk8d58cGonz4Ulncg7fBZJ7EljsQ==
   dependencies:
     "@ant-design-vue/use" "^0.0.1-0"
     "@ant-design/icons-vue" "^6.0.0"
@@ -2274,7 +2196,7 @@ ant-design-vue@2.1.6:
     async-validator "^3.3.0"
     dom-align "^1.10.4"
     dom-scroll-into-view "^2.0.0"
-    lodash "^4.17.21"
+    is-mobile "^2.2.1"
     lodash-es "^4.17.15"
     moment "^2.27.0"
     omit.js "^2.0.0"
@@ -6131,6 +6053,11 @@ 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.yarnpkg.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"
@@ -8918,10 +8845,10 @@ rollup-plugin-visualizer@5.5.0:
     source-map "^0.7.3"
     yargs "^16.2.0"
-rollup@^2.38.5, rollup@^2.43.1, rollup@^2.45.2, rollup@^2.50.1:
-  version "2.50.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.50.1.tgz#5d52d5c65ade19164d56efec98f16a461c6df38e"
-  integrity sha512-3MQhSdGpms4xjYrtR3WNHMT+VrWWM4oqUxUC770MmLo1FWFR2pr/OL81HSPC/ifmiu0uMFk0qPGLmjkSMRIESw==
+rollup@^2.38.5, rollup@^2.43.1, rollup@^2.45.2, rollup@^2.50.2:
+  version "2.50.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.50.2.tgz#640c500c68c698f62efb01857e0ff06fcd18181f"
+  integrity sha512-Ra5JkxSiZPZZFnvE68KWtlrLnZGg5LNaV1n1esq4ch69P7ReeoRVlrTuL/k+L/GJfcowA5An0BEhEq2Hfzwl6w==
   optionalDependencies:
     fsevents "~2.3.1"
@@ -10694,15 +10621,15 @@ vite-plugin-theme@^0.8.0:
     esbuild-plugin-alias "^0.1.2"
     tinycolor2 "^1.4.2"
-vite-plugin-windicss@0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-0.16.0.tgz#d3ef9da930cc33aec162b9b760f4d42835eb353c"
-  integrity sha512-XaYnPNKsq2yZ5Ph39ZmPvtsTheyVsGSXibTOq/kWCKcXyLxIinTL6xQvLsagjF8QzHpHPF4NbsFvvGtO81gxgA==
+vite-plugin-windicss@^0.16.5:
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-0.16.5.tgz#cc94f3a3f3b9a967587db60bc742f6a79988898e"
+  integrity sha512-OevEU9W1mEemyY2kLgOu04MEBr0FZKiNCWe6FZwal5SqteZzr+5K99crQuRRxnB+hhtZ+d+QydKyUnqjuKx8Fw==
   dependencies:
-    "@windicss/plugin-utils" "0.16.0"
+    "@windicss/plugin-utils" "0.16.5"
     chalk "^4.1.1"
     debug "^4.3.2"
-    windicss "^3.0.9"
+    windicss "^3.0.12"
 vite@2.3.3:
   version "2.3.3"
@@ -10920,16 +10847,7 @@ vue-types@^3.0.0, vue-types@^3.0.2:
   dependencies:
     is-plain-object "3.0.1"
-vue@3.1.0-beta.5:
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.0-beta.5.tgz#6fe228f0b4e20203b4755cb18a958af79a8ac63f"
-  integrity sha512-g2tHxOLkXq6OUk5hCEJDgwvmeG00v1301SBsyn9ATCyhvHm8NBl4IOWLoUAmucHXexTVwFokrIXZVDTZlLou0g==
-  dependencies:
-    "@vue/compiler-dom" "3.1.0-beta.5"
-    "@vue/runtime-dom" "3.1.0-beta.5"
-    "@vue/shared" "3.1.0-beta.5"
-
-vue@^3.0.0:
+vue@3.0.11, 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==
@@ -11003,7 +10921,7 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
-windicss@^3.0.9:
+windicss@^3.0.12:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.0.12.tgz#4354aaa48faaac6fd02f3119a62587da2c46b018"
   integrity sha512-pDxtFLN0xmL7bnGtnEfu9z7B5279UM2EP8wWlPH+FYb5gjHyONxRtyWtR5QIn1FRx6h1UXpm+I19GgTx5Y4TyA==