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

CHANGELOG.zh_CN.md

+## 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

 <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 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 
 .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 @@ import { registerGlobComp } from '/@/components/registerGlobComp';
 // 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) {