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

…#286)
JohnNiang · Jan 24, 2021 · da3a315 · da3a315
1 parent de929aa
commit da3a315
Show file tree

Hide file tree

Showing 15 changed files with 170 additions and 99 deletions.
diff --git 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',

diff --git 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)

diff --git 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 {

diff --git 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;
 }

diff --git 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

diff --git 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="当前启用"
   >

diff --git 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 {

diff --git 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,18 +80,18 @@ 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'
 export default {
   mixins: [mixin, mixinDevice],
   components: {
     PostSettingDrawer,
-    FooterToolBar,
     AttachmentDrawer,
     MarkdownEditor,
+    PageView,
     // RichTextEditor
   },
   data() {

diff --git 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,

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