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

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',

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)

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 {

src/styles/global.less

@@ -858,6 +858,10 @@ body {
   top: 0;
 }
 
+.ant-affix {
+  z-index: 2000!important;
+}
+
 #nprogress {
   pointer-events: none;
 }

src/views/dashboard/Dashboard.vue

@@ -14,7 +14,7 @@
           :number="statisticsData.postCount"
         >
           <router-link
-            :to="{ name:'PostEdit' }"
+            :to="{ name:'PostWrite' }"
             slot="action"
           >
             <a-icon

src/views/interface/ThemeList.vue

@@ -1,5 +1,6 @@
 <template>
   <page-view
+    affix
     :title="activatedTheme ? activatedTheme.name : '无'"
     subTitle="当前启用"
   >

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 {

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" />
-
+  </page-view>
-    <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>
 </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() {

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,

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: {

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%'}">
+  </page-view>
-      <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>
 </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>

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>

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: {

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: {

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: {