From 85b6cf69633b5fce386e09d5c9e8256ca770cdcd Mon Sep 17 00:00:00 2001 From: ly525 Date: Tue, 25 Aug 2020 23:31:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20support=20publish=20page=20!#zh:=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=8F=91=E5=B8=83=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- back-end/h5-api/api/work/controllers/Work.js | 9 ++++ .../h5/src/components/core/editor/index.js | 44 ++++++++++++++++--- .../components/core/editor/modals/preview.vue | 6 +-- .../h5/src/components/core/models/work.js | 2 +- front-end/h5/src/engine-entry.js | 16 +++++-- front-end/h5/src/store/modules/work.js | 4 +- 6 files changed, 64 insertions(+), 17 deletions(-) diff --git a/back-end/h5-api/api/work/controllers/Work.js b/back-end/h5-api/api/work/controllers/Work.js index 449322cb..deec9f70 100644 --- a/back-end/h5-api/api/work/controllers/Work.js +++ b/back-end/h5-api/api/work/controllers/Work.js @@ -11,6 +11,10 @@ 'use strict'; const request = require('request'); const _ = require('lodash'); +// 浏览模式 +const VIEW_MODE = { + PREVIEW: 'preview' // 预览 +} /** * Read the documentation (https://strapi.io/documentation/3.0.0-beta.x/guides/controllers.html#core-controllers) @@ -21,7 +25,12 @@ module.exports = { // GET /previewOne // strapi-hook-ejs: https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs previewOne: async (ctx) => { + const { mode } = ctx.request.query const work = await strapi.services.work.findOne(ctx.params); + // 非发布状态, 查看不到内容 + // 非预览模式, 查看不到内容 + const canRender = mode === VIEW_MODE.PREVIEW || work.is_publish + if (!canRender) work.pages = [] return ctx.render('engine', { work }); }, submitForm: async (ctx) => { diff --git a/front-end/h5/src/components/core/editor/index.js b/front-end/h5/src/components/core/editor/index.js index d46a0a66..7651df41 100644 --- a/front-end/h5/src/components/core/editor/index.js +++ b/front-end/h5/src/components/core/editor/index.js @@ -42,7 +42,7 @@ const fixedTools = [ { i18nTooltip: 'editor.fixedTool.preview', icon: 'eye', - action: function () { this.previewVisible = true } + action: function () { this.previewDialogVisible = true } }, { i18nTooltip: 'editor.fixedTool.copyCurrentPage', @@ -95,7 +95,7 @@ export default { activeMenuKey: 'pluginList', isPreviewMode: false, activeTabKey: '属性', - previewVisible: false, + previewDialogVisible: false, scaleRate: 1, propsPanelWidth: 320 }), @@ -121,6 +121,7 @@ export default { 'saveWork', 'createWork', 'fetchWork', + 'updateWork', 'setWorkAsTemplate', 'setEditingElement', 'setEditingPage' @@ -188,6 +189,18 @@ export default { ) + }, + handlePreview () { + this.saveWork({ loadingName: 'previewWork_loading' }).then(() => { + this.previewDialogVisible = true + }) + }, + handleSave () { + this.saveWork({ isSaveCover: true }) + }, + handlePublish () { + this.updateWork({ is_publish: true }) + this.saveWork({ successMsg: '发布成功' }) } }, mounted () { @@ -213,11 +226,28 @@ export default { style={{ lineHeight: '64px', float: 'right', background: 'transparent' }} > {/* 保存、预览、发布、设置为模板 */} - { this.saveWork({ loadingName: 'previewWork_loading' }).then(() => { this.previewVisible = true }) }} loading={this.previewWork_loading}>{this.$t('editor.header.preview')} - this.saveWork({ isSaveCover: true })} loading={this.saveWork_loading || this.uploadWorkCover_loading}>{this.$t('editor.header.save')} + + {this.$t('editor.header.preview')} + + + {this.$t('editor.header.save')} + {/* 发布 */} - {}} size="small"> + {/* 发布 */} {this.$t('editor.header.publish')} { @@ -343,8 +373,8 @@ export default { { { this.previewVisible = false }} + visible={this.previewDialogVisible} + handleClose={() => { this.previewDialogVisible = false }} /> } diff --git a/front-end/h5/src/components/core/editor/modals/preview.vue b/front-end/h5/src/components/core/editor/modals/preview.vue index 361ef6b6..73637d26 100644 --- a/front-end/h5/src/components/core/editor/modals/preview.vue +++ b/front-end/h5/src/components/core/editor/modals/preview.vue @@ -22,7 +22,7 @@ export default { // work: state => state.work // }), releaseUrl () { - return `${window.location.origin}/works/preview/${this.work.id}` + return `${window.location.origin}/works/preview/${this.work.id}?mode=preview` } }, data () { @@ -67,7 +67,7 @@ export default { }, openNewTab (urlType) { switch (urlType) { - case 'previewDebug': + case 'openPreviewPage': window.open(this.releaseUrl) break case 'buildEngineDocs': @@ -152,7 +152,7 @@ export default {
- this.openNewTab('previewDebug')}>打开预览 URL(For Debug) + this.openNewTab('openPreviewPage')}>打开预览页面 this.openNewTab('buildEngineDocs')}>如果本地预览显示空白，点此查看文档
diff --git a/front-end/h5/src/components/core/models/work.js b/front-end/h5/src/components/core/models/work.js index 20407d90..9383bf28 100644 --- a/front-end/h5/src/components/core/models/work.js +++ b/front-end/h5/src/components/core/models/work.js @@ -30,7 +30,7 @@ class Work { // this.created_at = new Date() // this.updated_at = new Date() - this.is_publish = false + this.is_publish = !!work.is_publish this.is_template = false this.height = work.height || 568 this.mode = work.mode || PAGE_MODE.SWIPPER_PAGE diff --git a/front-end/h5/src/engine-entry.js b/front-end/h5/src/engine-entry.js index 85760bc5..6a5e038f 100644 --- a/front-end/h5/src/engine-entry.js +++ b/front-end/h5/src/engine-entry.js @@ -38,6 +38,7 @@ const Engine = { }, methods: { renderLongPage () { + if (!window.__work.pages.length) return const work = window.__work return this.renderPreview(work.pages[0].elements) }, @@ -59,10 +60,9 @@ const Engine = { ) }, - renderPreview (pageElements) { + renderPreview (pageElements = []) { const pageWrapperStyle = this.isLongPage ? { height: window.__work.height + 'px' - } : {} const elements = pageElements.map(element => new Element(element)) @@ -88,12 +88,20 @@ const Engine = { containerStyle['overflow-y'] = 'scroll' } return containerStyle - } + }, + renderUnPublishTip() { + return
页面可能暂未发布
+ }, }, render (h) { const work = window.__work - const containerStyle = this.getContainerStyle(work) + // 预览模式 或者 已经发布 的页面可以正常渲染，否则提示用户暂未发布 + const query = new URLSearchParams(window.location.search) + const canRender = query.get('mode') === 'preview' || work.is_publish + if (!canRender) return this.renderUnPublishTip() + + const containerStyle = this.getContainerStyle(work) return
{ this.isLongPage ? this.renderLongPage() : this.renderSwiperPage() diff --git a/front-end/h5/src/store/modules/work.js b/front-end/h5/src/store/modules/work.js index 9f48b9cd..bfd4531c 100644 --- a/front-end/h5/src/store/modules/work.js +++ b/front-end/h5/src/store/modules/work.js @@ -39,13 +39,13 @@ export const actions = { * 预览作品之前需要先保存，但希望 用户点击保存按钮 和 点击预览按钮 loading_name 能够不同（虽然都调用了 saveWork） * 因为 loading 效果要放在不同的按钮上 */ - saveWork ({ commit, dispatch, state }, { isSaveCover = false, loadingName = 'saveWork_loading' } = {}) { + saveWork ({ commit, dispatch, state }, { isSaveCover = false, loadingName = 'saveWork_loading', successMsg="保存作品成功" } = {}) { const fn = (callback) => { new AxiosWrapper({ dispatch, commit, loading_name: loadingName, - successMsg: '保存作品成功', + successMsg, customRequest: strapi.updateEntry.bind(strapi) }).put('works', state.work.id, state.work).then(callback) }