perf: automatically calculate post editor height. (halo-dev/console#355)

src/components/Editor/MarkdownEditor.vue

@@ -1,22 +1,21 @@
 <template>
-  <div>
   <halo-editor
     ref="md"
     v-model="originalContentData"
     :boxShadow="false"
-      :toolbars="toolbars"
     :ishljs="true"
+    :toolbars="toolbars"
     autofocus
     @imgAdd="handleAttachmentUpload"
     @save="handleSaveDraft"
   />
-  </div>
 </template>
 <script>
 import { toolbars } from '@/core/const'
 import { haloEditor } from 'halo-editor'
 import 'halo-editor/dist/css/index.css'
 import attachmentApi from '@/api/attachment'
+
 export default {
   name: 'MarkdownEditor',
   components: {

src/mixins/mixin.js

@@ -48,4 +48,43 @@ const mixinDevice = {
   }
 }
 
-export { mixin, mixinDevice }
+const mixinPostEdit = {
+  data() {
+    return {
+      viewMetas: {
+        pageHeaderHeight: 0,
+        pageFooterHeight: 0
+      }
+    }
+  },
+  computed: {
+    editorHeight() {
+      const toolbarHeight = 64
+      const contentMarginTop = 24
+      const titleInputHeight = 40
+      return `calc(100vh - ${toolbarHeight +
+        contentMarginTop +
+        titleInputHeight +
+        this.viewMetas.pageHeaderHeight +
+        this.viewMetas.pageFooterHeight +
+        10}px - 1rem)`
+    }
+  },
+  mounted() {
+    this.handleGetViewMetas()
+  },
+  methods: {
+    handleGetViewMetas() {
+      const pageHeaderView = document.getElementsByClassName('page-header')
+      if (pageHeaderView && pageHeaderView.length > 0) {
+        this.viewMetas.pageHeaderHeight = pageHeaderView[0].clientHeight
+      }
+      const pageFooterView = document.getElementsByClassName('ant-layout-footer')
+      if (pageFooterView && pageFooterView.length > 0) {
+        this.viewMetas.pageFooterHeight = pageFooterView[0].clientHeight
+      }
+    }
+  }
+}
+
+export { mixin, mixinDevice, mixinPostEdit }

src/styles/global.less

@@ -22,6 +22,7 @@ body {
      * ant-table-wrapper
      * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
      */
+
     .ant-table-wrapper {
       .ant-table-content {
         overflow-y: auto;
@@ -34,6 +35,7 @@ body {
 
     .topmenu {
       /* 必须为 topmenu  才能启用流式布局 */
+
       &.content-width-Fluid {
         .header-index-wide {
           margin-left: 0;
@@ -88,6 +90,7 @@ body {
     }
 
     /* 必须为 topmenu  才能启用流式布局 */
+
     &.content-width-Fluid {
       .header-index-wide {
         max-width: unset;
@@ -705,7 +708,7 @@ body {
 
 #editor {
   .v-note-wrapper {
-    min-height: 580px;
+    height: 100%;
   }
 }
 
@@ -932,10 +935,19 @@ body {
 }
 
 @-webkit-keyframes nprogress-spinner {
-  0%   { -webkit-transform: rotate(0deg); }
+  0% {
-  100% { -webkit-transform: rotate(360deg); }
+    -webkit-transform: rotate(0deg);
   }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
 @keyframes nprogress-spinner {
-  0%   { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

src/views/post/PostEdit.vue

@@ -1,18 +1,18 @@
 <template>
-  <page-view affix :title="postToStage.title ? postToStage.title : '新文章'">
+  <page-view :title="postToStage.title ? postToStage.title : '新文章'" affix>
     <template slot="extra">
       <a-space>
         <ReactiveButton
-          type="danger"
+          :errored="draftSavedErrored"
-          @click="handleSaveDraft(false)"
-          @callback="draftSavederrored = false"
           :loading="draftSaving"
-          :errored="draftSavederrored"
-          text="保存草稿"
-          loadedText="保存成功"
           erroredText="保存失败"
+          loadedText="保存成功"
+          text="保存草稿"
+          type="danger"
+          @callback="draftSavedErrored = false"
+          @click="handleSaveDraft(false)"
         ></ReactiveButton>
-        <a-button @click="handlePreview" :loading="previewSaving">预览</a-button>
+        <a-button :loading="previewSaving" @click="handlePreview">预览</a-button>
         <a-button type="primary" @click="postSettingVisible = true">发布</a-button>
         <a-button type="dashed" @click="attachmentDrawerVisible = true">附件库</a-button>
       </a-space>
@@ -20,30 +20,29 @@
     <a-row :gutter="12">
       <a-col :span="24">
         <div class="mb-4">
-          <a-input v-model="postToStage.title" size="large" placeholder="请输入文章标题" />
+          <a-input v-model="postToStage.title" placeholder="请输入文章标题" size="large" />
         </div>
-
+        <div id="editor" :style="{ height: editorHeight }">
-        <div id="editor">
           <MarkdownEditor
             :originalContent="postToStage.originalContent"
-            @onSaveDraft="handleSaveDraft(true)"
             @onContentChange="onContentChange"
+            @onSaveDraft="handleSaveDraft(true)"
           />
         </div>
       </a-col>
     </a-row>
 
     <PostSettingDrawer
-      :post="postToStage"
-      :tagIds="selectedTagIds"
       :categoryIds="selectedCategoryIds"
       :metas="selectedMetas"
+      :post="postToStage"
+      :tagIds="selectedTagIds"
       :visible="postSettingVisible"
       @close="postSettingVisible = false"
-      @onRefreshPost="onRefreshPostFromSetting"
-      @onRefreshTagIds="onRefreshTagIdsFromSetting"
       @onRefreshCategoryIds="onRefreshCategoryIdsFromSetting"
+      @onRefreshPost="onRefreshPostFromSetting"
       @onRefreshPostMetas="onRefreshPostMetasFromSetting"
+      @onRefreshTagIds="onRefreshTagIdsFromSetting"
       @onSaved="handleRestoreSavedStatus"
     />
 
@@ -52,7 +51,7 @@
 </template>
 
 <script>
-import { mixin, mixinDevice } from '@/mixins/mixin.js'
+import { mixin, mixinDevice, mixinPostEdit } from '@/mixins/mixin.js'
 import { datetimeFormat } from '@/utils/datetime'
 
 import PostSettingDrawer from './components/PostSettingDrawer'
@@ -61,8 +60,9 @@ import MarkdownEditor from '@/components/Editor/MarkdownEditor'
 import { PageView } from '@/layouts'
 
 import postApi from '@/api/post'
+
 export default {
-  mixins: [mixin, mixinDevice],
+  mixins: [mixin, mixinDevice, mixinPostEdit],
   components: {
     PostSettingDrawer,
     AttachmentDrawer,
@@ -80,7 +80,7 @@ export default {
       contentChanges: 0,
       draftSaving: false,
       previewSaving: false,
-      draftSavederrored: false
+      draftSavedErrored: false
     }
   },
   beforeRouteEnter(to, from, next) {
@@ -158,7 +158,7 @@ export default {
               this.handleRestoreSavedStatus()
             })
             .catch(() => {
-              this.draftSavederrored = true
+              this.draftSavedErrored = true
             })
             .finally(() => {
               setTimeout(() => {
@@ -173,7 +173,7 @@ export default {
               this.handleRestoreSavedStatus()
             })
             .catch(() => {
-              this.draftSavederrored = true
+              this.draftSavedErrored = true
             })
             .finally(() => {
               setTimeout(() => {
@@ -190,7 +190,7 @@ export default {
             this.handleRestoreSavedStatus()
           })
           .catch(() => {
-            this.draftSavederrored = true
+            this.draftSavedErrored = true
           })
           .finally(() => {
             setTimeout(() => {

src/views/sheet/SheetEdit.vue

@@ -1,18 +1,18 @@
 <template>
-  <page-view affix :title="sheetToStage.title ? sheetToStage.title : '新页面'">
+  <page-view :title="sheetToStage.title ? sheetToStage.title : '新页面'" affix>
     <template slot="extra">
       <a-space>
         <ReactiveButton
-          type="danger"
+          :errored="draftSavedErrored"
-          @click="handleSaveDraft(false)"
-          @callback="draftSavederrored = false"
           :loading="draftSaving"
-          :errored="draftSavederrored"
-          text="保存草稿"
-          loadedText="保存成功"
           erroredText="保存失败"
+          loadedText="保存成功"
+          text="保存草稿"
+          type="danger"
+          @callback="draftSavedErrored = false"
+          @click="handleSaveDraft(false)"
         ></ReactiveButton>
-        <a-button @click="handlePreview" :loading="previewSaving">预览</a-button>
+        <a-button :loading="previewSaving" @click="handlePreview">预览</a-button>
         <a-button type="primary" @click="sheetSettingVisible = true">发布</a-button>
         <a-button type="dashed" @click="attachmentDrawerVisible = true">附件库</a-button>
       </a-space>
@@ -20,22 +20,22 @@
     <a-row :gutter="12">
       <a-col :span="24">
         <div class="mb-4">
-          <a-input v-model="sheetToStage.title" size="large" placeholder="请输入页面标题" />
+          <a-input v-model="sheetToStage.title" placeholder="请输入页面标题" size="large" />
         </div>
 
-        <div id="editor">
+        <div id="editor" :style="{ height: editorHeight }">
           <MarkdownEditor
             :originalContent="sheetToStage.originalContent"
-            @onSaveDraft="handleSaveDraft(true)"
             @onContentChange="onContentChange"
+            @onSaveDraft="handleSaveDraft(true)"
           />
         </div>
       </a-col>
     </a-row>
 
     <SheetSettingDrawer
-      :sheet="sheetToStage"
       :metas="selectedMetas"
+      :sheet="sheetToStage"
       :visible="sheetSettingVisible"
       @close="sheetSettingVisible = false"
       @onRefreshSheet="onRefreshSheetFromSetting"
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { mixin, mixinDevice } from '@/mixins/mixin.js'
+import { mixin, mixinDevice, mixinPostEdit } from '@/mixins/mixin.js'
 import { datetimeFormat } from '@/utils/datetime'
 import { PageView } from '@/layouts'
 import SheetSettingDrawer from './components/SheetSettingDrawer'
@@ -56,6 +56,7 @@ import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import MarkdownEditor from '@/components/Editor/MarkdownEditor'
 
 import sheetApi from '@/api/sheet'
+
 export default {
   components: {
     PageView,
@@ -63,7 +64,7 @@ export default {
     SheetSettingDrawer,
     MarkdownEditor
   },
-  mixins: [mixin, mixinDevice],
+  mixins: [mixin, mixinDevice, mixinPostEdit],
   data() {
     return {
       attachmentDrawerVisible: false,
@@ -148,7 +149,7 @@ export default {
               this.handleRestoreSavedStatus()
             })
             .catch(() => {
-              this.draftSavederrored = true
+              this.draftSavedErrored = true
             })
             .finally(() => {
               setTimeout(() => {
@@ -163,7 +164,7 @@ export default {
               this.handleRestoreSavedStatus()
             })
             .catch(() => {
-              this.draftSavederrored = true
+              this.draftSavedErrored = true
             })
             .finally(() => {
               setTimeout(() => {
@@ -179,7 +180,7 @@ export default {
             this.handleRestoreSavedStatus()
           })
           .catch(() => {
-            this.draftSavederrored = true
+            this.draftSavedErrored = true
           })
           .finally(() => {
             setTimeout(() => {