feat(preview): build preview engine

ly525
1 parent 1102fe32
Showing 9 changed files with 230 additions and 9 deletions
back-end/h5-api/api/work/config/routes.json
back-end/h5-api/api/work/controllers/Work.js
back-end/h5-api/config/hook.json
back-end/h5-api/package.json
back-end/h5-api/views/engine-example.ejs
front-end/h5/public/engine-example.html
front-end/h5/public/engine.html
front-end/h5/src/components/core/editor/engine/index.js
front-end/h5/vue.config.js
@@ -47,6 +47,14 @@
       "config": {
         "policies": []
       }
+    },
+    {
+      "method": "GET",
+      "path": "/works/preview/:id",
+      "handler": "Work.previewOne",
+      "config": {
+        "policies": []
+      }
     }
   ]
 }
@@ -5,4 +5,10 @@
  * to customize this controller
  */
-module.exports = {};
+module.exports = {
+  // GET /previewOne
+  // strapi-hook-ejs: https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs
+  previewOne: async (ctx) => {
+    return ctx.render('engine', {work: { page2: []}});
+  }
+};
@@ -6,5 +6,13 @@
       "Define the hooks' load order by putting their names in this array in the right order"
     ],
     "after": []
+  },
+  "ejs": {
+    "enabled": true,
+    "viewExt": "ejs",
+    "partial": true,
+    "cache": false,
+    "debug": true,
+    "layout": false
   }
 }
@@ -18,20 +18,22 @@
     "eslint-plugin-react": "^7.14.0"
   },
   "dependencies": {
+    "ejs": "^2.6.2",
+    "knex": "latest",
     "lodash": "^4.17.5",
+    "sqlite3": "latest",
     "strapi": "3.0.0-beta.13",
     "strapi-admin": "3.0.0-beta.13",
-    "strapi-utils": "3.0.0-beta.13",
-    "strapi-plugin-settings-manager": "3.0.0-beta.13",
-    "strapi-plugin-content-type-builder": "3.0.0-beta.13",
+    "strapi-hook-bookshelf": "3.0.0-beta.13",
+    "strapi-hook-ejs": "^3.0.0-alpha.26.2",
+    "strapi-hook-knex": "3.0.0-beta.13",
     "strapi-plugin-content-manager": "3.0.0-beta.13",
-    "strapi-plugin-users-permissions": "3.0.0-beta.13",
+    "strapi-plugin-content-type-builder": "3.0.0-beta.13",
     "strapi-plugin-email": "3.0.0-beta.13",
+    "strapi-plugin-settings-manager": "3.0.0-beta.13",
     "strapi-plugin-upload": "3.0.0-beta.13",
-    "strapi-hook-bookshelf": "3.0.0-beta.13",
-    "strapi-hook-knex": "3.0.0-beta.13",
-    "knex": "latest",
-    "sqlite3": "latest"
+    "strapi-plugin-users-permissions": "3.0.0-beta.13",
+    "strapi-utils": "3.0.0-beta.13"
   },
   "author": {
     "name": "A Strapi developer"
+<html>
+  <head>
+    <title>Luban H5 Preview</title>
+  </head>
+  <script>window.__work = <%- JSON.stringify(work) %></script>
+  <body>
+    Q: What's this?
+    A: A tiny render engine based on ejs for Luban H5 work
+  </body>
+</html>
 \ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>work.html</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="black" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="email=no" name="format-detection">
+    <script type="text/javascript" src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/flexible.js"></script>
+    <!-- <link rel="stylesheet" href="/be-static/be-static-luban-h5/engine/engine.css"> -->
+    <!-- <script src="/be-static/be-static-luban-h5/engine/engine.js"></script> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
+    <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
+    <style>
+      .swiper-container {
+        width: 100%;
+        height: 100vh;
+      }
+    </style>
+    <script>
+      window.__work = {"id":12,"title":"default title","description":"default desc","cover_image_url":null,"is_publish":null,"create_time":"2019-07-21 06:07:44","update_time":"2019-07-21 06:07:44","pages":[{"elements":[{"name":"lbp-button","uuid":1563721976946,"pluginProps":{"text":"按钮","fontSize":14,"color":"black","backgroundColor":"#ffffff","borderColor":"#eeeeee","borderWidth":2,"borderRadius":0,"lineHeight":1,"textAlign":"center"},"commonStyle":{"top":208,"left":106,"width":100,"height":40,"zindex":1,"textAlign":"center","color":"#000000","backgroundColor":"#ffffff","fontSize":14},"events":[]}]},{"elements":[]},{"elements":[]},{"elements":[{"name":"lbp-button","uuid":1563721991112,"pluginProps":{"text":"按钮","fontSize":14,"color":"black","backgroundColor":"#ffffff","borderColor":"#eeeeee","borderWidth":2,"borderRadius":0,"lineHeight":1,"textAlign":"center"},"commonStyle":{"top":208,"left":106,"width":100,"height":40,"zindex":1,"textAlign":"center","color":"#000000","backgroundColor":"#ffffff","fontSize":14},"events":[]}]},{"elements":[{"name":"lbp-button","uuid":1563721995650,"pluginProps":{"text":"按钮","fontSize":14,"color":"black","backgroundColor":"#ffffff","borderColor":"#eeeeee","borderWidth":2,"borderRadius":0,"lineHeight":1,"textAlign":"center"},"commonStyle":{"top":208,"left":106,"width":100,"height":40,"zindex":1,"textAlign":"center","color":"#000000","backgroundColor":"#ffffff","fontSize":14},"events":[]}]}],"created_at":"2019-07-21T06:07:44.636Z","updated_at":"2019-07-21T06:07:44.636Z"}
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but luban-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script>
+    var mySwiper = new Swiper('.swiper-container', {
+        // Optional parameters
+        direction: 'vertical',
+        loop: false,
+        // If we need pagination
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        // Navigation arrows
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        // And if we need scrollbar
+        scrollbar: {
+          el: '.swiper-scrollbar',
+        },
+      });
+    </script>
+  </body>
+</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>work.html</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="black" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="email=no" name="format-detection">
+    <script type="text/javascript" src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/flexible.js"></script>
+    <!-- <link rel="stylesheet" href="/be-static/be-static-luban-h5/engine/engine.css"> -->
+    <!-- <script src="/be-static/be-static-luban-h5/engine/engine.js"></script> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
+    <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
+    <style>
+      .swiper-container {
+        width: 100%;
+        height: 100vh;
+      }
+    </style>
+    <!-- <script>
+      window.__work = {"id":12,"title":"default title","description":"default desc","cover_image_url":null,"is_publish":null,"create_time":"2019-07-21 06:07:44","update_time":"2019-07-21 06:07:44","pages":[{"elements":[{"name":"lbp-button","uuid":1563721976946,"pluginProps":{"text":"按钮","fontSize":14,"color":"black","backgroundColor":"#ffffff","borderColor":"#eeeeee","borderWidth":2,"borderRadius":0,"lineHeight":1,"textAlign":"center"},"commonStyle":{"top":208,"left":106,"width":100,"height":40,"zindex":1,"textAlign":"center","color":"#000000","backgroundColor":"#ffffff","fontSize":14},"events":[]}]},{"elements":[]},{"elements":[]},{"elements":[{"name":"lbp-button","uuid":1563721991112,"pluginProps":{"text":"按钮","fontSize":14,"color":"black","backgroundColor":"#ffffff","borderColor":"#eeeeee","borderWidth":2,"borderRadius":0,"lineHeight":1,"textAlign":"center"},"commonStyle":{"top":208,"left":106,"width":100,"height":40,"zindex":1,"textAlign":"center","color":"#000000","backgroundColor":"#ffffff","fontSize":14},"events":[]}]},{"elements":[{"name":"lbp-button","uuid":1563721995650,"pluginProps":{"text":"按钮","fontSize":14,"color":"black","backgroundColor":"#ffffff","borderColor":"#eeeeee","borderWidth":2,"borderRadius":0,"lineHeight":1,"textAlign":"center"},"commonStyle":{"top":208,"left":106,"width":100,"height":40,"zindex":1,"textAlign":"center","color":"#000000","backgroundColor":"#ffffff","fontSize":14},"events":[]}]}],"created_at":"2019-07-21T06:07:44.636Z","updated_at":"2019-07-21T06:07:44.636Z"}
+    </script> -->
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but luban-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script>
+    var mySwiper = new Swiper('.swiper-container', {
+        // Optional parameters
+        direction: 'vertical',
+        loop: false,
+        // If we need pagination
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        // Navigation arrows
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        // And if we need scrollbar
+        scrollbar: {
+          el: '.swiper-scrollbar',
+        },
+      });
+    </script>
+  </body>
+</html>
+/**
+ * 作品预览的渲染引擎，其实就是简单遍历 pages 以及 elements，显示即可
+ */
+import Vue from 'vue'
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/antd.css'
+import 'font-awesome/css/font-awesome.min.css'
+import loadPluginMixin from '../../../../mixins/load-plugins.js'
+import Element from '../../models/element'
+
+Vue.config.productionTip = false
+Vue.use(Antd)
+const Engine = {
+  name: 'engine',
+  mixins: [loadPluginMixin],
+  methods: {
+    renderPreview (h, _elements) {
+      const elements = _elements.map(element => new Element(element))
+      return (
+        <div style={{ height: '100%', position: 'relative' }}>
+          {
+            elements.map((element, index) => {
+              const style = element.getStyle({ position: 'absolute' })
+              const data = {
+                style,
+                props: element.getProps({ mode: 'preview' })
+              }
+              return h(element.name, data)
+            })
+          }
+        </div>
+      )
+    }
+  },
+  render (h) {
+    const work = window.__work
+    return (
+      <div id="work-container" data-work-id={work.id}>
+        <div class="swiper-container">
+          <div class="swiper-wrapper">{
+            work.pages.map(page => {
+              return (
+                <section class="swiper-slide flat">
+                  {/* this.walk(h, page.elements) */}
+                  { this.renderPreview(h, page.elements) }
+                </section>
+              )
+            })
+          }</div>
+          <div class="swiper-pagination"></div>
+        </div>
+      </div>
+    )
+  }
+}
+
+new Vue({
+  components: {
+    engine: Engine
+  },
+  render: h => h('engine')
+}).$mount('#app')
@@ -5,5 +5,16 @@ module.exports = {
     : '/',
   devServer: {
     proxy: 'http://localhost:1337'
+  },
+  pages: {
+    index: {
+      entry: 'src/main.js',
+      template: 'public/index.html',
+      filename: 'index.html',
+      title: 'Index Page'
+    },
+    engine: {
+      entry: 'src/components/core/editor/engine/index.js'
+    }
   }
 }