From 51c3335aed37feb9a74cf4d6e8a6566681054791 Mon Sep 17 00:00:00 2001 From: Ryan Wang <i@ryanc.cc> Date: Sun, 24 Jan 2021 14:00:18 +0800 Subject: [PATCH] pref: optimize the layout of the post editing page. (#286) --- src/config/router.config.js | 22 ++++-- src/core/lazy_lib/components_use.js | 2 + src/layouts/PageView.vue | 31 ++++++++- src/styles/global.less | 4 ++ src/views/dashboard/Dashboard.vue | 2 +- src/views/interface/ThemeList.vue | 1 + src/views/post/CategoryList.vue | 7 +- src/views/post/PostEdit.vue | 64 +++++++++--------- src/views/post/PostList.vue | 8 ++- src/views/post/TagList.vue | 6 +- src/views/sheet/SheetEdit.vue | 75 +++++++++++---------- src/views/sheet/SheetList.vue | 26 +++---- src/views/sheet/independent/JournalList.vue | 7 +- src/views/sheet/independent/LinkList.vue | 8 ++- src/views/sheet/independent/PhotoList.vue | 6 +- 15 files changed, 170 insertions(+), 99 deletions(-) diff --git a/src/config/router.config.js b/src/config/router.config.js index 33c2aeec8..e91c63798 100644 --- 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 index ec86dc7df..9394ecef9 100644 --- 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 index 78b56708f..2ac2266c3 100644 --- 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 index d89f09f39..5856f59d9 100644 --- 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 index 3452f9d4b..c6dedcd28 100644 --- 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 index 677d49db1..ac481e822 100644 --- 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 index aab5a817c..540ad1778 100644 --- 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 index 7963a1bb0..4a91d7b9e 100644 --- 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() { diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue index 5d964764e..ebbb1350e 100644 --- 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 index b7a59f9e3..db054664a 100644 --- 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: { diff --git a/src/views/sheet/SheetEdit.vue b/src/views/sheet/SheetEdit.vue index d9b27beae..61f92f23e 100644 --- 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> diff --git a/src/views/sheet/SheetList.vue b/src/views/sheet/SheetList.vue index 625e7fede..e141cc01f 100644 --- 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> diff --git a/src/views/sheet/independent/JournalList.vue b/src/views/sheet/independent/JournalList.vue index 5f1beb4ca..3c88083be 100644 --- 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: { diff --git a/src/views/sheet/independent/LinkList.vue b/src/views/sheet/independent/LinkList.vue index e39969933..5d720f7b5 100644 --- 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: { diff --git a/src/views/sheet/independent/PhotoList.vue b/src/views/sheet/independent/PhotoList.vue index d93551d6b..adea82070 100644 --- 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: {