feat: support publish page !#zh: 支持发布页面

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) => {

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 {
           </a-tab-pane>
         </a-tabs>
       )
+    },
+    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' }}
           >
             {/* 保存、预览、发布、设置为模板 */}
-            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.saveWork({ loadingName: 'previewWork_loading' }).then(() => { this.previewVisible = true }) }} loading={this.previewWork_loading}>{this.$t('editor.header.preview')}</a-button></a-menu-item>
-            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork({ isSaveCover: true })} loading={this.saveWork_loading || this.uploadWorkCover_loading}>{this.$t('editor.header.save')}</a-button></a-menu-item>
+            <a-menu-item key="1" class="transparent-bg">
+              <a-button
+                type="primary"
+                size="small"
+                onClick={this.handlePreview}
+                loading={this.previewWork_loading}
+              >{this.$t('editor.header.preview')}</a-button>
+            </a-menu-item>
+            <a-menu-item key="2" class="transparent-bg">
+              <a-button
+                size="small"
+                onClick={this.handleSave}
+                loading={this.saveWork_loading || this.uploadWorkCover_loading}
+              >{this.$t('editor.header.save')}</a-button>
+            </a-menu-item>
             {/* <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item> */}
             <a-menu-item key="3" class="transparent-bg">
-              <a-dropdown-button onClick={() => {}} size="small">
+              <a-dropdown-button
+                size="small"
+                onClick={this.handlePublish}
+                loading={this.saveWork_loading || this.uploadWorkCover_loading}
+              >
                 {/* 发布 */}
                 {this.$t('editor.header.publish')}
                 <a-menu slot="overlay" onClick={({ key }) => {
@@ -343,8 +373,8 @@ export default {
         {
           <PreviewDialog
             work={this.work}
-            visible={this.previewVisible}
-            handleClose={() => { this.previewVisible = false }}
+            visible={this.previewDialogVisible}
+            handleClose={() => { this.previewDialogVisible = false }}
           />
         }
         <Feedback />

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 {
                   </div>
                 </div>
                 <div style="background: #fafafa;">
-                  <a-button type="link" icon="link" onClick={() => this.openNewTab('previewDebug')}>打开预览 URL(For Debug) </a-button>
+                  <a-button type="link" icon="link" onClick={() => this.openNewTab('openPreviewPage')}>打开预览页面</a-button>
                   <a-button type="link" icon="link" onClick={() => this.openNewTab('buildEngineDocs')}>如果本地预览显示空白，点此查看文档</a-button>
                 </div>
               </div>

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

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 = {
         </div>
       )
     },
-    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 <div style="box-sizing: border-box;min-height: 568px;line-height: 568px;text-align: center;">页面可能暂未发布</div>
+    },
   },
   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 <div id="work-container" data-work-id={work.id} style={containerStyle}>
       {
         this.isLongPage ? this.renderLongPage() : this.renderSwiperPage()

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)
     }