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

2021-09-16 08:53:00 +08:00 · 2021-09-16 08:53:00 +08:00 · bec944c51f
parent 5c28c9b7ea
commit bec944c51f
5 changed files with 115 additions and 64 deletions
--- 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: {
--- 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 }
--- 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);
+  }
+}
--- a/src/views/post/PostEdit.vue
+++ b/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"
-          @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>
@ -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">
+        <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(() => {
--- a/src/views/sheet/SheetEdit.vue
+++ b/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"
-          @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="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(() => {