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

vben

2021-05-27 566280422de0537c4e31496eaaa95a9d51fe9458

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

 CHANGELOG.zh_CN.md

@@ -1,3 +1,9 @@
## Wip

### 🐛 Bug Fixes

- 修复`CodeEditor`样式问题

## 2.4.0 (2021-05-25)

### ✨ Features

 package.json

@@ -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",

 src/components/CodeEditor/src/codemirror/CodeMirror.vue

@@ -1,5 +1,5 @@
<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">

 src/components/CodeEditor/src/codemirror/codemirror.css

@@ -338,6 +338,7 @@

.CodeMirror-sizer {
  position: relative;
  margin-bottom: 20px !important;
  border-right: 30px solid transparent;
}


 src/components/Page/src/PageWrapper.vue

@@ -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, ''));

 src/main.ts

@@ -15,8 +15,8 @@
// 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) {

 yarn.lock

@@ -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"
@@ -2069,14 +2013,6 @@
  dependencies:
    "@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"
@@ -2087,24 +2023,10 @@
    "@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"
@@ -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 @@
  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 @@
    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 @@
  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 @@
    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 @@
    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 @@
  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 @@
  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==