perf: automatically calculate post editor height. (#355)

halo-dev · Sep 16, 2021 · bec944c · bec944c
1 parent 5c28c9b
commit bec944c
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 64 deletions.
diff --git a/src/components/Editor/MarkdownEditor.vue b/src/components/Editor/MarkdownEditor.vue
@@ -1,22 +1,21 @@
 <template>
-  <div>
-    <halo-editor
-      ref="md"
-      v-model="originalContentData"
-      :boxShadow="false"
-      :toolbars="toolbars"
-      :ishljs="true"
-      autofocus
-      @imgAdd="handleAttachmentUpload"
-      @save="handleSaveDraft"
-    />
-  </div>
+  <halo-editor
+    ref="md"
+    v-model="originalContentData"
+    :boxShadow="false"
+    :ishljs="true"
+    :toolbars="toolbars"
+    autofocus
+    @imgAdd="handleAttachmentUpload"
+    @save="handleSaveDraft"
+  />
 </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: {

diff --git a/src/mixins/mixin.js b/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 }
diff --git a/src/styles/global.less b/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;
@@ -597,7 +600,7 @@ body {
 }
 
 .ant-anchor-link-title {
-  white-space: normal!important;
+  white-space: normal !important;
 }
 
 .bottom-control {
@@ -705,7 +708,7 @@ body {
 
 #editor {
   .v-note-wrapper {
-    min-height: 580px;
+    height: 100%;
   }
 }
 
@@ -860,11 +863,11 @@ body {
 }
 
 .ant-affix {
-  z-index: 1000!important;
+  z-index: 1000 !important;
 }
 
 .v-note-wrapper {
-  z-index: 999!important;
+  z-index: 999 !important;
 }
 
 #nprogress {
@@ -894,8 +897,8 @@ body {
   opacity: 1.0;
 
   -webkit-transform: rotate(3deg) translate(0px, -4px);
-      -ms-transform: rotate(3deg) translate(0px, -4px);
-          transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
 }
 
 /* Remove these to get rid of the spinner */
@@ -918,7 +921,7 @@ body {
   border-radius: 50%;
 
   -webkit-animation: nprogress-spinner 400ms linear infinite;
-          animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
 }
 
 .nprogress-custom-parent {
@@ -932,10 +935,19 @@ body {
 }
 
 @-webkit-keyframes nprogress-spinner {
-  0%   { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
 }
+
 @keyframes nprogress-spinner {
-  0%   { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
@@ -1,49 +1,48 @@
 <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"
-          @click="handleSaveDraft(false)"
-          @callback="draftSavederrored = false"
+          :errored="draftSavedErrored"
           :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>
     </template>
     <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">
+        <div id="editor" :style="{ height: editorHeight }">
           <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(() => {