pref: optimize the layout of the post editing page. (halo-dev/console#286)

2021-01-24 14:00:18 +08:00 · 2021-01-24 14:00:18 +08:00 · da3a315f8f
parent de929aa990
commit da3a315f8f
15 changed files with 170 additions and 99 deletions
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@ -21,8 +21,8 @@ export const asyncRouterMap = [
      {
        path: '/posts',
        name: 'Posts',
+        component: BlankLayout,
        redirect: '/posts/list',
-        component: PageView,
        meta: { title: '文章', icon: 'form' },
        children: [
          {
@ -33,10 +33,17 @@ export const asyncRouterMap = [
          },
          {
            path: '/posts/write',
-            name: 'PostEdit',
+            name: 'PostWrite',
            component: () => import('@/views/post/PostEdit'),
            meta: { title: '写文章', hiddenHeaderContent: false, keepAlive: false }
          },
+          {
+            path: '/posts/edit',
+            name: 'PostEdit',
+            hidden: true,
+            component: () => import('@/views/post/PostEdit'),
+            meta: { title: '编辑文章', hiddenHeaderContent: false, keepAlive: false }
+          },
          {
            path: '/categories',
            name: 'CategoryList',
@ -56,7 +63,7 @@ export const asyncRouterMap = [
      {
        path: '/sheets',
        name: 'Sheets',
-        component: PageView,
+        component: BlankLayout,
        redirect: '/sheets/list',
        meta: { title: '页面', icon: 'read' },
        children: [
@ -68,10 +75,17 @@ export const asyncRouterMap = [
          },
          {
            path: '/sheets/write',
-            name: 'SheetEdit',
+            name: 'SheetWrite',
            component: () => import('@/views/sheet/SheetEdit'),
            meta: { title: '新建页面', hiddenHeaderContent: false, keepAlive: false }
          },
+          {
+            path: '/sheets/edit',
+            name: 'SheetEdit',
+            hidden: true,
+            component: () => import('@/views/sheet/SheetEdit'),
+            meta: { title: '编辑页面', hiddenHeaderContent: false, keepAlive: false }
+          },
          {
            path: '/sheets/links',
            name: 'LinkList',
--- a/src/core/lazy_lib/components_use.js
+++ b/src/core/lazy_lib/components_use.js
@ -1,5 +1,6 @@
 import Vue from 'vue'
 import {
+  Affix,
  Anchor,
  AutoComplete,
  Alert,
@ -54,6 +55,7 @@ import {
  Space
 } from 'ant-design-vue'

+Vue.use(Affix)
 Vue.use(Anchor)
 Vue.use(AutoComplete)
 Vue.use(Alert)
--- a/src/layouts/PageView.vue
+++ b/src/layouts/PageView.vue
@ -1,8 +1,33 @@
 <template>
  <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
+    <a-affix v-if="affix">
+      <div
+        class="page-header"
+        v-if="!$route.meta.hiddenHeaderContent"
+      >
+        <div class="page-header-index-wide">
+          <a-page-header
+            :title="title"
+            :sub-title="subTitle"
+            :breadcrumb="{ props: { routes:breadList } }"
+          >
+            <slot
+              name="extra"
+              slot="extra"
+            >
+            </slot>
+            <slot
+              name="footer"
+              slot="footer"
+            >
+            </slot>
+          </a-page-header>
+        </div>
+      </div>
+    </a-affix>
    <div
      class="page-header"
-      v-if="!$route.meta.hiddenHeaderContent"
+      v-if="!$route.meta.hiddenHeaderContent && !affix"
    >
      <div class="page-header-index-wide">
        <a-page-header
@ -45,6 +70,10 @@ export default {
      type: String,
      default: null,
    },
+    affix: {
+      type: Boolean,
+      default: false,
+    },
  },
  data() {
    return {
--- a/src/styles/global.less
+++ b/src/styles/global.less
@ -858,6 +858,10 @@ body {
  top: 0;
 }

+.ant-affix {
+  z-index: 2000!important;
+}
+
 #nprogress {
  pointer-events: none;
 }
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@ -14,7 +14,7 @@
          :number="statisticsData.postCount"
        >
          <router-link
-            :to="{ name:'PostEdit' }"
+            :to="{ name:'PostWrite' }"
            slot="action"
          >
            <a-icon
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -1,5 +1,6 @@
 <template>
  <page-view
+    affix
    :title="activatedTheme ? activatedTheme.name : '无'"
    subTitle="当前启用"
  >
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
    <a-row :gutter="12">
      <a-col
        :xl="10"
@ -225,10 +225,11 @@
      @listenToSelect="handleSelectThumbnail"
      title="选择封面图"
    />
-  </div>
+  </page-view>
 </template>

 <script>
+import { PageView } from '@/layouts'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import CategorySelectTree from './components/CategorySelectTree'
 import categoryApi from '@/api/category'
@ -262,7 +263,7 @@ const columns = [
 ]

 export default {
-  components: { CategorySelectTree },
+  components: { PageView, CategorySelectTree },
  mixins: [mixin, mixinDevice],
  data() {
    return {
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@ -1,5 +1,34 @@
 <template>
-  <div>
+  <page-view
+    affix
+    :title="postToStage.title?postToStage.title:'新文章'"
+  >
+    <template slot="extra">
+      <a-space>
+        <ReactiveButton
+          type="danger"
+          @click="handleSaveDraft(false)"
+          @callback="draftSavederrored = false"
+          :loading="draftSaving"
+          :errored="draftSavederrored"
+          text="保存草稿"
+          loadedText="保存成功"
+          erroredText="保存失败"
+        ></ReactiveButton>
+        <a-button
+          @click="handlePreview"
+          :loading="previewSaving"
+        >预览</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">
@ -41,34 +70,7 @@
    />

    <AttachmentDrawer v-model="attachmentDrawerVisible" />
-
-    <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' }">
-      <a-space>
-        <ReactiveButton
-          type="danger"
-          @click="handleSaveDraft(false)"
-          @callback="draftSavederrored = false"
-          :loading="draftSaving"
-          :errored="draftSavederrored"
-          text="保存草稿"
-          loadedText="保存成功"
-          erroredText="保存失败"
-        ></ReactiveButton>
-        <a-button
-          @click="handlePreview"
-          :loading="previewSaving"
-        >预览</a-button>
-        <a-button
-          type="primary"
-          @click="postSettingVisible = true"
-        >发布</a-button>
-        <a-button
-          type="dashed"
-          @click="attachmentDrawerVisible = true"
-        >附件库</a-button>
-      </a-space>
-    </footer-tool-bar>
-  </div>
+  </page-view>
 </template>

 <script>
@ -78,8 +80,8 @@ import { datetimeFormat } from '@/utils/datetime'

 import PostSettingDrawer from './components/PostSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
-import FooterToolBar from '@/components/FooterToolbar'
 import MarkdownEditor from '@/components/Editor/MarkdownEditor'
+import { PageView } from '@/layouts'
 // import RichTextEditor from '@/components/editor/RichTextEditor'

 import postApi from '@/api/post'
@ -87,9 +89,9 @@ export default {
  mixins: [mixin, mixinDevice],
  components: {
    PostSettingDrawer,
-    FooterToolBar,
    AttachmentDrawer,
    MarkdownEditor,
+    PageView,
    // RichTextEditor
  },
  data() {
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
    <a-card
      :bordered="false"
      :bodyStyle="{ padding: '16px' }"
@ -78,7 +78,7 @@
      </div>

      <div class="table-operator">
-        <router-link :to="{ name: 'PostEdit' }">
+        <router-link :to="{ name: 'PostWrite' }">
          <a-button
            type="primary"
            icon="plus"
@ -515,11 +515,12 @@
      :id="selectedPost.id"
      @close="onPostCommentsClose"
    />
-  </div>
+  </page-view>
 </template>

 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import { PageView } from '@/layouts'
 import PostSettingDrawer from './components/PostSettingDrawer'
 import TargetCommentDrawer from '../comment/components/TargetCommentDrawer'
 import TagSelect from './components/TagSelect'
@ -579,6 +580,7 @@ const columns = [
 export default {
  name: 'PostList',
  components: {
+    PageView,
    TagSelect,
    CategoryTree,
    PostSettingDrawer,
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
    <a-row :gutter="12">
      <a-col
        :xl="10"
@ -131,13 +131,15 @@
      @listenToSelect="handleSelectThumbnail"
      title="选择封面图"
    />
-  </div>
+  </page-view>
 </template>

 <script>
+import { PageView } from '@/layouts'
 import tagApi from '@/api/tag'

 export default {
+  components: { PageView },
  data() {
    return {
      list: {
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@ -1,5 +1,34 @@
 <template>
-  <div>
+  <page-view
+    affix
+    :title="sheetToStage.title?sheetToStage.title:'新页面'"
+  >
+    <template slot="extra">
+      <a-space>
+        <ReactiveButton
+          type="danger"
+          @click="handleSaveDraft(false)"
+          @callback="draftSavederrored = false"
+          :loading="draftSaving"
+          :errored="draftSavederrored"
+          text="保存草稿"
+          loadedText="保存成功"
+          erroredText="保存失败"
+        ></ReactiveButton>
+        <a-button
+          @click="handlePreview"
+          :loading="previewSaving"
+        >预览</a-button>
+        <a-button
+          type="primary"
+          @click="sheetSettingVisible = 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">
@ -37,39 +66,14 @@
    />

    <AttachmentDrawer v-model="attachmentDrawerVisible" />
-    <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
-      <a-space>
-        <ReactiveButton
-          type="danger"
-          @click="handleSaveDraft(false)"
-          @callback="draftSavederrored = false"
-          :loading="draftSaving"
-          :errored="draftSavederrored"
-          text="保存草稿"
-          loadedText="保存成功"
-          erroredText="保存失败"
-        ></ReactiveButton>
-        <a-button
-          @click="handlePreview"
-          :loading="previewSaving"
-        >预览</a-button>
-        <a-button
-          type="primary"
-          @click="sheetSettingVisible = true"
-        >发布</a-button>
-        <a-button
-          type="dashed"
-          @click="attachmentDrawerVisible = true"
-        >附件库</a-button>
-      </a-space>
-    </footer-tool-bar>
-  </div>
+  </page-view>
 </template>

 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 // import { mapGetters } from 'vuex'
 import { datetimeFormat } from '@/utils/datetime'
+import { PageView } from '@/layouts'
 import SheetSettingDrawer from './components/SheetSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
@ -79,10 +83,11 @@ import MarkdownEditor from '@/components/Editor/MarkdownEditor'
 import sheetApi from '@/api/sheet'
 export default {
  components: {
+    PageView,
    FooterToolBar,
    AttachmentDrawer,
    SheetSettingDrawer,
-    MarkdownEditor
+    MarkdownEditor,
    // RichTextEditor
  },
  mixins: [mixin, mixinDevice],
@ -95,7 +100,7 @@ export default {
      contentChanges: 0,
      draftSaving: false,
      draftSavederrored: false,
-      previewSaving: false
+      previewSaving: false,
    }
  },
  beforeRouteEnter(to, from, next) {
@ -141,7 +146,7 @@ export default {
        },
        onCancel() {
          next(false)
-        }
+        },
      })
    }
  },
@ -162,12 +167,12 @@ export default {
      if (newValue) {
        this.contentChanges++
      }
-    }
+    },
  },
  computed: {
    temporaryContent() {
      return this.sheetToStage.originalContent
-    }
+    },
    // ...mapGetters(['options'])
  },
  methods: {
@ -276,7 +281,7 @@ export default {
    },
    onRefreshSheetMetasFromSetting(metas) {
      this.selectedMetas = metas
-    }
-  }
+    },
+  },
 }
 </script>
--- a/src/views/sheet/SheetList.vue
+++ b/src/views/sheet/SheetList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
    <a-row>
      <a-col :span="24">
        <div class="card-container">
@ -20,28 +20,34 @@
        </div>
      </a-col>
    </a-row>
-  </div>
+  </page-view>
 </template>

 <script>
+import { PageView } from '@/layouts'
 import IndependentSheetList from './components/IndependentSheetList'
 import CustomSheetList from './components/CustomSheetList'

 export default {
+  components: {
+    PageView,
+    IndependentSheetList,
+    CustomSheetList,
+  },
  data() {
    const panes = [
      { title: '独立页面', icon: 'paper-clip', component: 'IndependentSheetList', key: 'independent' },
-      { title: '自定义页面', icon: 'fork', component: 'CustomSheetList', key: 'custom' }
+      { title: '自定义页面', icon: 'fork', component: 'CustomSheetList', key: 'custom' },
    ]
    return {
      activeKey: panes[0].key,
-      panes
+      panes,
    }
  },
  beforeRouteEnter(to, from, next) {
    // Get post id from query
    const activeKey = to.query.activeKey
-    next(vm => {
+    next((vm) => {
      if (activeKey) {
        vm.activeKey = activeKey
      }
@ -52,14 +58,10 @@ export default {
      handler: function(newVal, oldVal) {
        if (newVal) {
          const path = this.$router.history.current.path
-          this.$router.push({ path, query: { activeKey: newVal } }).catch(err => err)
+          this.$router.push({ path, query: { activeKey: newVal } }).catch((err) => err)
        }
-      }
-    }
+      },
+    },
  },
-  components: {
-    IndependentSheetList,
-    CustomSheetList
-  }
 }
 </script>
--- a/src/views/sheet/independent/JournalList.vue
+++ b/src/views/sheet/independent/JournalList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
    <a-row>
      <a-col :span="24">
        <a-card
@ -255,10 +255,11 @@
    />

    <AttachmentDrawer v-model="attachmentDrawer.visible" />
-  </div>
+  </page-view>
 </template>

 <script>
+import { PageView } from '@/layouts'
 import TargetCommentDrawer from '../../comment/components/TargetCommentDrawer'
 import AttachmentDrawer from '../../attachment/components/AttachmentDrawer'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
@ -267,7 +268,7 @@ import journalApi from '@/api/journal'
 import optionApi from '@/api/option'
 export default {
  mixins: [mixin, mixinDevice],
-  components: { TargetCommentDrawer, AttachmentDrawer },
+  components: { PageView, TargetCommentDrawer, AttachmentDrawer },
  data() {
    return {
      list: {
--- a/src/views/sheet/independent/LinkList.vue
+++ b/src/views/sheet/independent/LinkList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
    <a-row :gutter="12">
      <a-col
        :xl="10"
@ -260,10 +260,11 @@
        </a-form-item>
      </a-form>
    </a-modal>
-  </div>
+  </page-view>
 </template>

 <script>
+import { PageView } from '@/layouts'
 import { mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import optionApi from '@/api/option'
@ -298,6 +299,9 @@ const columns = [
 ]
 export default {
  mixins: [mixin, mixinDevice],
+  components: {
+    PageView,
+  },
  data() {
    return {
      table: {
--- a/src/views/sheet/independent/PhotoList.vue
+++ b/src/views/sheet/independent/PhotoList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
    <a-row
      :gutter="12"
      type="flex"
@ -272,10 +272,11 @@
        :drawerWidth="480"
      />
    </a-drawer>
-  </div>
+  </page-view>
 </template>

 <script>
+import { PageView } from '@/layouts'
 import { mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import photoApi from '@/api/photo'
@ -284,6 +285,7 @@ import { datetimeFormat } from '@/utils/datetime'

 export default {
  mixins: [mixin, mixinDevice],
+  components: { PageView },
  data() {
    return {
      list: {