Merge pull request #248 from ly525/editor-core-package

@luban-h5/core-editor

Merge pull request #248 from ly525/editor-core-package
@luban-h5/core-editor
小小鲁班 · GitHub
2 parents 23ef7209 0d0bf9a7
Showing 100 changed files with 1473 additions and 712 deletions
back-end/h5-api/api/work/config/routes.json
back-end/h5-api/api/work/controllers/Work.js
back-end/h5-api/api/work/documentation/1.0.0/work.json
back-end/h5-api/views/core-editor.ejs
front-end/h5/package.json
front-end/h5/public/index.html
front-end/h5/src/App.vue
front-end/h5/src/components/common/header/LangSelect.vue
front-end/h5/src/components/common/header/index.vue
front-end/h5/src/components/common/header/links.js
front-end/h5/src/components/common/work/card-cover.js
front-end/h5/src/components/common/work/card-cover.scss
front-end/h5/src/constants/animation.js → front-end/h5/src/components/core/constants/animation.js
front-end/h5/src/constants/work.js → front-end/h5/src/components/core/constants/work.js
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/canvas/index.js
front-end/h5/src/components/core/editor/canvas/preview.js
front-end/h5/src/components/core/editor/fixed-tools/index.js
front-end/h5/src/components/core/editor/fixed-tools/options.js
front-end/h5/src/components/core/editor/header/action-menu.js
@@ -18,6 +18,14 @@
     },
     {
       "method": "GET",
+      "path": "/works/editor",
+      "handler": "Work.renderCoreEditor",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "GET",
       "path": "/works",
       "handler": "Work.find",
       "config": {
 /*
  * @Author: ly525
  * @Date: 2019-12-04 19:55:24
- * @LastEditors  : ly525
- * @LastEditTime : 2020-01-01 18:42:41
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-10-11 20:02:09
  * @FilePath: /luban-h5/back-end/h5-api/api/work/controllers/Work.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description:
@@ -14,7 +14,7 @@ const _ = require(&#39;lodash&#39;);
 // 浏览模式
 const VIEW_MODE = {
   PREVIEW: 'preview' // 预览
-}
+};
 /**
  * Read the documentation (https://strapi.io/documentation/3.0.0-beta.x/guides/controllers.html#core-controllers)
@@ -25,14 +25,17 @@ module.exports = {
   // GET /previewOne
   // strapi-hook-ejs: https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs
   previewOne: async (ctx) => {
-    const { view_mode }  = ctx.request.query
+    const { view_mode }  = ctx.request.query;
     const work = await strapi.services.work.findOne(ctx.params);
     // 非发布状态, 查看不到内容
     // 非预览模式, 查看不到内容
-    const canRender = view_mode === VIEW_MODE.PREVIEW || work.is_publish
-    if (!canRender) work.pages = []
+    const canRender = view_mode === VIEW_MODE.PREVIEW || work.is_publish;
+    if (!canRender) work.pages = [];
     return ctx.render('engine', { work });
   },
+  renderCoreEditor: async (ctx) => {
+    return ctx.render('core-editor');
+  },
   submitForm: async (ctx) => {
     const work = await strapi.services.work.findOne(ctx.params);
     const formData = ctx.request.body;
@@ -114,6 +114,63 @@
         "parameters": []
       }
     },
+    "/works/editor": {
+      "get": {
+        "deprecated": false,
+        "description": "",
+        "responses": {
+          "200": {
+            "description": "response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "properties": {
+                    "foo": {
+                      "type": "string"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          },
+          "default": {
+            "description": "unexpected error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          }
+        },
+        "summary": "",
+        "tags": [
+          "Work"
+        ],
+        "parameters": []
+      }
+    },
     "/works": {
       "get": {
         "deprecated": false,
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>鲁班H5 编辑器</title>
+    <script src="https://unpkg.com/vue"></script>
+    <script src="https://unpkg.com/@luban-h5/core-editor"></script>
+  </head>
+  <body>
+    <div id="app"> <core-editor :work-id="id" /></div>
+    <script>
+      const id = new URLSearchParams(window.location.search).get('id')
+      new Vue({ data: () => ({id }), el: '#app'});
+    </script>
+  </body>
+</html>
 \ No newline at end of file
@@ -11,7 +11,8 @@
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit",
     "build:editor": "cross-env PAGE=EDITOR vue-cli-service build",
-    "build:engine": "cross-env PAGE=ENGINE vue-cli-service build --target lib --name engine ./src/engine-entry.js"
+    "build:engine": "cross-env PAGE=ENGINE vue-cli-service build --target lib --name engine ./src/engine-entry.js",
+    "build:core_editor": "cross-env PAGE=CORE_EDITOR vue-cli-service build --target lib --name core-editor ./src/components/core/index.js"
   },
   "dependencies": {
     "@luban-h5/lbc-button": "^0.0.3",
@@ -6,7 +6,7 @@
  * @FilePath: /luban-h5/front-end/h5/public/index.html
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  -->
 <!DOCTYPE html>
 <html lang="en">
 <template>
   <div id="app">
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div> -->
     <router-view/>
   </div>
 </template>
@@ -20,7 +20,7 @@
 </template>
 <script>
-import langMixin from '@/mixins/i18n'
+import langMixin from 'core/mixins/i18n'
 export default {
   name: 'LangSelect',
+<template>
+  <a-layout-header class="layout-header">
+    <LogoOfHeader />
+    <div style="float:right;">
+      <Links />
+    <slot name="action-menu"></slot>
+    <LangSelect />
+    </div>
+  </a-layout-header>
+</template>
+<script>
+import LogoOfHeader from './logo.js'
+import LangSelect from './LangSelect'
+import Links from './links'
+export default {
+  name: 'Header',
+  components: {
+    LogoOfHeader,
+    LangSelect,
+    Links
+  }
+}
+</script>
+<style lang="scss" scoped>
+.layout-header {
+  padding: 0 10px;
+  .logo {
+    width: 120px;
+    height: 31px;
+    margin: 16px 28px 16px 0;
+    float: left;
+
+    line-height: 31px;
+    text-align: center;
+    color: white;
+    font-size: 16px;
+  }
+
+  .lang-select-activator,
+  .user-avatar-activator {
+    // float: right;
+    background: transparent;
+    margin: 0 28px 16px 0;
+    cursor: pointer;
+
+    .anticon {
+      color: white;
+    }
+  }
+}
+</style>
@@ -10,7 +10,7 @@ export default {
         theme="dark"
         mode="horizontal"
         defaultSelectedKeys={['2']}
-        style={{ lineHeight: '64px', display: 'inline-block', float: 'right' }}
+        style={{ lineHeight: '64px', display: 'inline-block' }}
       >
         <a-menu-item key="dingtalk" >
           <a-popover title="👨🏻‍💻👩🏻‍💻欢迎加入鲁班-H5交流群">
 /*
  * @Author: ly525
  * @Date: 2019-12-01 18:11:49
- * @LastEditors  : ly525
- * @LastEditTime : 2020-01-04 13:51:26
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-10-10 23:29:06
  * @FilePath: /luban-h5/front-end/h5/src/components/common/work/card-cover.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import placeholderImg from '@/assets/lbp-picture-placeholder.png'
+import './card-cover.scss'
 function getDefaultStyle (img, isPlaceholder) {
   return {
+.card-cover-wrapper {
+  position: relative;
+  height: 300px;
+  border: 1px dashed #eee;
+  color: #aaa;
+  padding: 4px;
+}
 \ No newline at end of file
 import { mapState, mapActions } from 'vuex'
-import Shape from '../../support/shape'
-import ContextMenu from '../../support/contexmenu'
+import Shape from 'core/support/shape'
+import ContextMenu from 'core/support/contexmenu'
 export default {
   props: ['elements', 'handleClickElementProp', 'handleClickCanvasProp'],
+import { mapState, mapActions } from 'vuex'
+
+import RenderEditCanvas from './edit'
+import RenderPreviewCanvas from './preview'
+
+export default {
+  name: 'EditorCanvas',
+  data: () => ({
+    isPreviewMode: false
+  }),
+  computed: {
+    ...mapState('editor', {
+      editingPage: state => state.editingPage,
+      editingElement: state => state.editingElement,
+      elements: state => state.editingPage.elements,
+      pages: state => state.work.pages,
+      work: state => state.work,
+      scaleRate: state => state.scaleRate
+    }),
+    ...mapState('loading', [
+      'saveWork_loading',
+      'previewWork_loading',
+      'setWorkAsTemplate_loading',
+      'uploadWorkCover_loading'
+    ])
+  },
+  methods: {
+    ...mapActions('editor', [
+      'elementManager',
+      'pageManager',
+      'saveWork',
+      'createWork',
+      'fetchWork',
+      'updateWork',
+      'setWorkAsTemplate',
+      'setEditingElement',
+      'setEditingPage'
+    ]),
+    handleToggleMode (isPreviewMode) {
+      this.isPreviewMode = isPreviewMode
+      if (isPreviewMode) {
+        // 当切换到预览模式的时候，清空当前编辑元素
+        this.setEditingElement() // 相当于  setEditingElement(null)
+      }
+    }
+  },
+  render (h) {
+    return (
+      <a-layout id="canvas-outer-wrapper">
+        <a-radio-group
+          class="mode-toggle-wrapper"
+          size="small"
+          value={this.isPreviewMode}
+          onInput={this.handleToggleMode}
+        >
+          {/* 编辑模式、预览模式 */}
+          <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
+          <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
+        </a-radio-group>
+        <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
+          <div class='canvas-wrapper' style={{
+            height: `${this.work.height}px`
+          }}>
+            { this.isPreviewMode
+              ? <RenderPreviewCanvas elements={this.elements}/>
+              : <RenderEditCanvas
+                class="edit-mode"
+                elements={this.elements}
+              />
+            }
+          </div>
+        </a-layout-content>
+      </a-layout>
+    )
+  }
+}
-import NodeWrapper from '@/components/preview/node-wrapper.js'
+import NodeWrapper from 'core/preview/node-wrapper.js'
 /**
  * 预览模块
  * preview h5 work module
+import { mapActions, mapState } from 'vuex'
+import hotkeys from 'hotkeys-js'
+import fixedTools from './options'
+
+export default {
+  computed: {
+    ...mapState('editor', {
+      scaleRate: state => state.scaleRate
+    })
+  },
+  methods: {
+    ...mapActions('editor', ['pageManager', 'elementManager', 'updateScaleRate'])
+  },
+  render () {
+    return (
+      <a-layout-sider
+        width="40"
+        theme='light'
+        style={{ background: '#fff', border: '1px solid #eee' }}
+      >
+        <a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
+          {
+            fixedTools.map(tool => (
+              <a-tooltip
+                effect="dark"
+                placement="left"
+                title={this.$t(tool.i18nTooltip, { hotkey: tool.hotkeyTooltip })}>
+                <a-button
+                  block
+                  class="transparent-bg"
+                  type="link"
+                  size="small"
+                  style={{ height: '40px', color: '#000' }}
+                  disabled={!!tool.disabled}
+                  onClick={() => tool.action && tool.action.call(this)}
+                >
+                  {
+                    tool.icon
+                      ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true' />
+                      : (tool.text || this.$t(tool.i18nTooltip))
+                  }
+                </a-button>
+                { tool.icon === 'minus' && <div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div>}
+              </a-tooltip>
+            ))
+          }
+        </a-button-group>
+      </a-layout-sider>
+    )
+  },
+  mounted () {
+    fixedTools.map(tool => {
+      tool.hotkey && hotkeys(tool.hotkey, { splitKey: '&' }, (event, handler) => {
+        event.preventDefault()
+        event.stopPropagation()
+        tool.action && tool.action.call(this)
+      })
+    })
+  }
+}
+import undoRedoHistory from 'core/store/plugins/undo-redo/History'
+
+const fixedTools = [
+  {
+    i18nTooltip: 'editor.fixedTool.undo',
+    icon: 'mail-reply',
+    action: () => undoRedoHistory.undo(),
+    hotkey: 'ctrl&z,⌘&z',
+    hotkeyTooltip: '(ctrl+z)'
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.redo',
+    icon: 'mail-forward',
+    action: () => undoRedoHistory.redo(),
+    hotkey: 'ctrl&y,⌘&u',
+    hotkeyTooltip: '(ctrl+y)'
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.preview',
+    icon: 'eye',
+    action: function () { this.previewDialogVisible = true }
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.copyCurrentPage',
+    icon: 'copy',
+    action: function () { this.pageManager({ type: 'copy' }) },
+    hotkey: 'ctrl&c,⌘&c'
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.copyCurrentElement',
+    icon: 'copy',
+    action: function () { this.elementManager({ type: 'copy' }) }
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.importPSD',
+    text: 'Ps',
+    icon: '', // 优先级: icon > text > i18nTooltip
+    action: '',
+    disabled: true
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.zoomOut',
+    icon: 'plus',
+    action: function () { this.updateScaleRate(0.25) },
+    hotkey: 'ctrl&=,⌘&=',
+    hotkeyTooltip: '(ctrl +)'
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.zoomIn',
+    icon: 'minus',
+    action: function () { this.updateScaleRate(-0.25) },
+    hotkey: 'ctrl&-,⌘&-',
+    hotkeyTooltip: '(ctrl -)'
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.issues',
+    icon: 'question',
+    action: function () { window.open('https://github.com/ly525/luban-h5/issues/110') }
+  }
+]
+
+export default fixedTools
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'EditorActionMenu',
+  data: () => ({
+    previewDialogVisible: false,
+    propsPanelWidth: 320
+  }),
+  computed: {
+    ...mapState('editor', {
+      editingPage: state => state.editingPage,
+      editingElement: state => state.editingElement,
+      elements: state => state.editingPage.elements,
+      pages: state => state.work.pages,
+      work: state => state.work
+    }),
+    ...mapState('loading', [
+      'saveWork_loading',
+      'previewWork_loading',
+      'setWorkAsTemplate_loading',
+      'uploadWorkCover_loading'
+    ])
+  },
+  methods: {
+    ...mapActions('editor', [
+      'elementManager',
+      'pageManager',
+      'saveWork',
+      'createWork',
+      'fetchWork',
+      'updateWork',
+      'setWorkAsTemplate',
+      // 'setEditingElement',
+      'setEditingPage'
+    ]),
+    ...mapActions('loading', {
+      updateLoading: 'update'
+    }),
+    handlePreview () {
+      this.saveWork({ loadingName: 'previewWork_loading' }).then(() => {
+        this.$emit('preview')
+        // this.previewDialogVisible = true
+      })
+    },
+    handleSave () {
+      this.saveWork({ isSaveCover: true })
+    },
+    handlePublish () {
+      this.updateWork({ is_publish: true })
+      this.saveWork({ successMsg: '发布成功' })
+    },
+    handleSetAsTemplate () {
+      this.updateLoading({ type: 'setWorkAsTemplate_loading', value: true })
+      this.saveWork().then(() => {
+        this.setWorkAsTemplate()
+      })
+    },
+    handleSelectItem ({ key }) {
+      switch (key) {
+        case 'setAsTemplate':
+          this.handleSetAsTemplate()
+      }
+    }
+  },
+  render (h) {
+    return (
+      <a-menu
+        slot="action-menu"
+        theme="dark"
+        mode="horizontal"
+        defaultSelectedKeys={['2']}
+        style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
+      >
+        {/* 保存、预览、发布、设置为模板 */}
+        <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
+            size="small"
+            onClick={this.handlePublish}
+            loading={this.saveWork_loading || this.uploadWorkCover_loading}
+          >
+            {this.$t('editor.header.publish') /* 发布 */}
+            <a-menu slot="overlay" onClick={this.handleSelectItem}>
+              <a-menu-item key="setAsTemplate">
+                <a-spin spinning={this.setWorkAsTemplate_loading} size="small">
+                  {/* 设置为模板 */}
+                  <a-icon type="cloud-upload" />{this.$t('editor.header.setAsTemplate')}
+                </a-spin>
+              </a-menu-item>
+              {/* <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item> */}
+              {/* <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item> */}
+            </a-menu>
+          </a-dropdown-button>
+        </a-menu-item>
+      </a-menu>
+    )
+  }
+}
-import { mapState, mapActions } from 'vuex'
-import hotkeys from 'hotkeys-js'
-import undoRedoHistory from '../../../store/plugins/undo-redo/History'
-
-import '../styles/index.scss'
-import 'animate.css'
-
-import RenderEditCanvas from './canvas/edit'
-import RenderPreviewCanvas from './canvas/preview'
-import RenderPropsEditor from './edit-panel/props'
-import RenderScriptEditor from './edit-panel/script'
-import RenderAnimationEditor from './edit-panel/animation'
-import RenderActionEditor from './edit-panel/action'
-import RenderBackgroundEditor from './edit-panel/background'
-import RenderShortcutsPanel from './shortcuts-panel/index'
-import RenderPageManager from './page-manager/index'
-import PreviewDialog from './modals/preview.vue'
-
-import LogoOfHeader from '@/components/common/header/logo.js'
-import ExternalLinksOfHeader from '@/components/common/header/links.js'
-import LangSelect from '@/components/common/header/LangSelect.vue'
-import Feedback from '@/components/common/feedback/index'
-import AdjustLineV from '@/components/core/support/adjust-line/vertical'
-
-import DragMixin from './drag-mixin'
-
-const fixedTools = [
-  {
-    i18nTooltip: 'editor.fixedTool.undo',
-    icon: 'mail-reply',
-    action: () => undoRedoHistory.undo(),
-    hotkey: 'ctrl&z,⌘&z',
-    hotkeyTooltip: '(ctrl+z)'
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.redo',
-    icon: 'mail-forward',
-    action: () => undoRedoHistory.redo(),
-    hotkey: 'ctrl&y,⌘&u',
-    hotkeyTooltip: '(ctrl+y)'
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.preview',
-    icon: 'eye',
-    action: function () { this.previewDialogVisible = true }
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.copyCurrentPage',
-    icon: 'copy',
-    action: function () { this.pageManager({ type: 'copy' }) },
-    hotkey: 'ctrl&c,⌘&c'
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.copyCurrentElement',
-    icon: 'copy',
-    action: function () { this.elementManager({ type: 'copy' }) }
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.importPSD',
-    text: 'Ps',
-    icon: '', // 优先级: icon > text > i18nTooltip
-    action: '',
-    disabled: true
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.zoomOut',
-    icon: 'plus',
-    action: function () { this.scaleRate += 0.25 },
-    hotkey: 'ctrl&=,⌘&=',
-    hotkeyTooltip: '(ctrl +)'
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.zoomIn',
-    icon: 'minus',
-    action: function () { this.scaleRate -= 0.25 },
-    hotkey: 'ctrl&-,⌘&-',
-    hotkeyTooltip: '(ctrl -)'
-  },
-  {
-    i18nTooltip: 'editor.fixedTool.issues',
-    icon: 'question',
-    action: function () { window.open('https://github.com/ly525/luban-h5/issues/110') }
-  }
-]
-
-export default {
-  mixins: [DragMixin],
-  name: 'Editor',
-  components: {
-    LogoOfHeader,
-    ExternalLinksOfHeader,
-    LangSelect
-  },
-  data: () => ({
-    activeMenuKey: 'pluginList',
-    isPreviewMode: false,
-    activeTabKey: '属性',
-    previewDialogVisible: false,
-    scaleRate: 1,
-    propsPanelWidth: 320
-  }),
-  computed: {
-    ...mapState('editor', {
-      editingPage: state => state.editingPage,
-      editingElement: state => state.editingElement,
-      elements: state => state.editingPage.elements,
-      pages: state => state.work.pages,
-      work: state => state.work
-    }),
-    ...mapState('loading', [
-      'saveWork_loading',
-      'previewWork_loading',
-      'setWorkAsTemplate_loading',
-      'uploadWorkCover_loading'
-    ])
-  },
-  methods: {
-    ...mapActions('editor', [
-      'elementManager',
-      'pageManager',
-      'saveWork',
-      'createWork',
-      'fetchWork',
-      'updateWork',
-      'setWorkAsTemplate',
-      'setEditingElement',
-      'setEditingPage'
-    ]),
-    ...mapActions('loading', {
-      updateLoading: 'update'
-    }),
-    /**
-     * !#zh 点击插件，copy 其基础数据到组件树（中间画布）
-     * #!en click the plugin shortcut, create new Element with the plugin's meta data
-     * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
-     *
-     * shortcutItem: PluginListItem = {
-      name: String,
-      shortcutProps: {}
-     }
-     */
-    clone (shortcutItem) {
-      this.elementManager({
-        type: 'add',
-        value: shortcutItem
-      })
-    },
-    /**
-     * #!zh: 设置 背景图tab 作为 active tab
-     * #!en: set background(bg) tab as active tab
-     */
-    setActiveTab (activeTabKey) {
-      this.activeTabKey = activeTabKey
-    },
-    _renderMenuContent () {
-      return (
-        <a-tabs
-          style="height: 100%;"
-          tabBarGutter={10}
-        >
-          <a-tab-pane key="plugin-list" tab={this.$t('editor.sidebar.components')}>
-            <div class="plugin-usage-tip ">
-              <a-icon type="info-circle" />
-              {/* <span class="ml-1">使用提示: <strong>点击</strong>组件即可</span> */}
-              {/* Tip: just click on component */}
-              <i18n path="editor.tip.componentUsage" tag="span" class="ml-1">
-                <strong>{ this.$t('editor.tip.click') }</strong>{ this.$t('editor.tip.click') }
-              </i18n>
-            </div>
-            <RenderShortcutsPanel
-              pluginsList={this.pluginsList}
-              handleClickShortcut={this.clone}
-              handleDragStart={this.handleDragStartFromMixin}
-            />
-          </a-tab-pane>
-          <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
-            <RenderPageManager
-              pages={this.pages}
-              editingPage={this.editingPage}
-              onSelectMenuItem={(menuKey) => {
-                this.pageManager({ type: menuKey })
-              }}
-              onEditTitle={({ pageIndexForEditingTitle, newTitle }) => {
-                this.pageManager({ type: 'editTitle', value: { pageIndexForEditingTitle, newTitle } })
-                this.saveWork({ isSaveCover: false })
-              }}
-              onSelectPage={(pageIndex) => { this.setEditingPage(pageIndex) }}
-            />
-          </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 () {
-    fixedTools.map(tool => {
-      tool.hotkey && hotkeys(tool.hotkey, { splitKey: '&' }, (event, handler) => {
-        event.preventDefault()
-        event.stopPropagation()
-        tool.action && tool.action.call(this)
-      })
-    })
-  },
-  render (h) {
-    return (
-      <a-layout id="luban-editor-layout" style={{ height: '100vh' }}>
-        <a-layout-header class="header">
-          <LogoOfHeader />
-          <LangSelect style="float: right;cursor: pointer;" />
-          {/* we can show the plugins shortcuts here */}
-          <a-menu
-            theme="dark"
-            mode="horizontal"
-            defaultSelectedKeys={['2']}
-            style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
-          >
-            {/* 保存、预览、发布、设置为模板 */}
-            <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
-                size="small"
-                onClick={this.handlePublish}
-                loading={this.saveWork_loading || this.uploadWorkCover_loading}
-              >
-                {/* 发布 */}
-                {this.$t('editor.header.publish')}
-                <a-menu slot="overlay" onClick={({ key }) => {
-                  switch (key) {
-                    case 'setAsTemplate':
-                      this.updateLoading({ type: 'setWorkAsTemplate_loading', value: true })
-                      this.saveWork().then(() => {
-                        this.setWorkAsTemplate()
-                      })
-                  }
-                }}>
-                  <a-menu-item key="setAsTemplate">
-                    <a-spin spinning={this.setWorkAsTemplate_loading} size="small">
-                      {/* 设置为模板 */}
-                      <a-icon type="cloud-upload" />{this.$t('editor.header.setAsTemplate')}
-                    </a-spin>
-                  </a-menu-item>
-                  {/* <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item> */}
-                  {/* <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item> */}
-                </a-menu>
-              </a-dropdown-button>
-            </a-menu-item>
-          </a-menu>
-          <ExternalLinksOfHeader />
-        </a-layout-header>
-        <a-layout>
-          {/* <a-layout-sider collapsedWidth={40} style="background: #fff" collapsed>
-            <a-menu
-              mode="inline"
-              defaultSelectedKeys={['pluginList']}
-              style={{ height: '100%', borderRight: 1 }}
-              onSelect={({ key }) => { this.activeMenuKey = key }}
-            >
-              {
-                sidebarMenus.map(menu => (
-                  <a-menu-item key={menu.value}>
-                    <a-icon type={menu.antIcon} />
-                    <span>{this.$t(menu.i18nLabel)}</span>
-                  </a-menu-item>
-                ))
-              }
-            </a-menu>
-          </a-layout-sider> */}
-          <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
-            { this._renderMenuContent() }
-          </a-layout-sider>
-          <a-layout id="canvas-outer-wrapper">
-            <div class="mode-toggle-wrapper">
-              <a-radio-group
-                size="small"
-                value={this.isPreviewMode}
-                onInput={isPreviewMode => {
-                  this.isPreviewMode = isPreviewMode
-                  if (isPreviewMode) {
-                    // 当切换到预览模式的时候，清空当前编辑元素
-                    this.setEditingElement() // 相当于  setEditingElement(null)
-                  }
-                }}
-              >
-                {/* 编辑模式、预览模式 */}
-                <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
-                <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
-              </a-radio-group>
-            </div>
-            <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
-              <div class='canvas-wrapper' style={{
-                height: `${this.work.height}px`
-              }}>
-                {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */}
-                { this.isPreviewMode
-                  ? <RenderPreviewCanvas elements={this.elements}/>
-                  : <RenderEditCanvas
-                    class="edit-mode"
-                    elements={this.elements}
-                  />
-                }
-              </div>
-            </a-layout-content>
-          </a-layout>
-          <AdjustLineV onLineMove={(offset) => {
-            this.propsPanelWidth += offset
-          }} />
-          <a-layout-sider width="40" theme='light' style={{ background: '#fff', border: '1px solid #eee' }}>
-            {/* <div>
-              <a-button shape="circle" icon="search" type="link" />
-            </div> */}
-            <a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
-              {
-                fixedTools.map(tool => (
-                  <a-tooltip effect="dark" placement="left" title={this.$t(tool.i18nTooltip, { hotkey: tool.hotkeyTooltip })}>
-                    <a-button block class="transparent-bg" type="link" size="small" style={{ height: '40px', color: '#000' }} onClick={() => tool.action && tool.action.call(this) } disabled={!!tool.disabled}>
-                      { tool.icon ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true'/> : (tool.text || this.$t(tool.i18nTooltip)) }
-                    </a-button>
-                    { tool.icon === 'minus' && <div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div> }
-                  </a-tooltip>
-                ))
-              }
-            </a-button-group>
-          </a-layout-sider>
-          <a-layout-sider width={this.propsPanelWidth} data-set-width={this.propsPanelWidth} theme='light' style={{ background: '#fff', padding: '0 0 0 12px' }}>
-            <a-tabs
-              style="height: 100%;"
-              tabBarGutter={10}
-              defaultActiveKey={this.activeTabKey}
-              activeKey={this.activeTabKey}
-              onChange={this.setActiveTab}
-            >
-              {/*
-                #!zh tab 标题：
-                #!en tab title
-                  ElementUI：label
-                  Ant Design Vue：tab
-              */}
-              <a-tab-pane key="属性"><span slot="tab">{this.$t('editor.editPanel.tab.prop')}</span><RenderPropsEditor/></a-tab-pane>
-              <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
-              <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActionEditor/> }</a-tab-pane>
-              <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
-              <a-tab-pane label="背景" key='background' tab={this.$t('editor.editPanel.tab.background')}>{ this.activeTabKey === 'background' && <RenderBackgroundEditor/> }</a-tab-pane>
-            </a-tabs>
-          </a-layout-sider>
-
-        </a-layout>
-        {
-          <PreviewDialog
-            work={this.work}
-            visible={this.previewDialogVisible}
-            handleClose={() => { this.previewDialogVisible = false }}
-          />
-        }
-        <Feedback />
-      </a-layout>
-    )
-  },
-  created () {
-    // event bus for editor
-    window.getEditorApp = this
-    let workId = this.$route.params.workId
-    if (workId) {
-      this.fetchWork(workId).then(() => this.setActiveTab('background'))
-    } else {
-      this.$message.error('no work id!')
-    }
-
-    window.getEditorApp.$on('setEditingElement', ({ name }) => {
-      this.setActiveTab(name === 'lbp-background' ? 'background' : '属性')
-    })
-  }
-}
+import RenderShortcutsPanel from './shortcuts-panel/index'
+import RenderPageManager from './page-manager/index'
+import RenderPageTree from './page-tree/index'
+
+export default {
+  name: 'EditorLeftPanel',
+  render (h) {
+    return (
+      <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
+        <a-tabs
+          style="height: 100%;"
+          tabBarGutter={10}
+        >
+          <a-tab-pane key="plugin-list" tab={this.$t('editor.sidebar.components')}>
+            <RenderShortcutsPanel />
+          </a-tab-pane>
+          <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
+            <RenderPageManager />
+          </a-tab-pane>
+          <a-tab-pane key='page-tree' tab={this.$t('editor.sidebar.tree')}>
+            <RenderPageTree />
+          </a-tab-pane>
+        </a-tabs>
+      </a-layout-sider>
+    )
+  }
+}
+import { mapState, mapActions } from 'vuex'
+import PageTitleEditor from './title-editor'
+import PageTitleMenu from './title-menu'
+import PageTitleText from './title-text'
+
+export default {
+  data: () => ({
+    hoverIndex: -1 // 显示编辑按钮
+  }),
+  computed: {
+    ...mapState('editor', {
+      editingPage: state => state.editingPage,
+      editingElement: state => state.editingElement,
+      elements: state => state.editingPage.elements,
+      pages: state => state.work.pages,
+      work: state => state.work
+    })
+  },
+  methods: {
+    ...mapActions('editor', [
+      'elementManager',
+      'pageManager',
+      'saveWork',
+      'setEditingPage'
+    ]),
+    onSelectMenuItem (menuKey) {
+      this.pageManager({ type: menuKey })
+    },
+    onEditTitle ({ pageIndex, newTitle }) {
+      this.pageManager({ type: 'editTitle', value: { pageIndex, newTitle } })
+      this.saveWork({ isSaveCover: false })
+    },
+    onSelectPage (pageIndex) { this.setEditingPage(pageIndex) },
+    onLeave () {
+      this.hoverIndex = -1
+    }
+  },
+  render (h) {
+    const addPageText = this.$t('editor.pageManager.action.add')
+    return (
+      <div class="page-manager-panel">
+        {
+          this.pages.map((page, index) => (
+            <span
+              class={[
+                'cursor-pointer',
+                'page-manager-panel__item',
+                page.uuid === this.editingPage.uuid && 'active'
+              ]}
+              onClick={() => this.onSelectPage(index)}
+              // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VHover/VHover.ts
+              onMouseenter={() => { this.hoverIndex = index }}
+            >
+              <PageTitleText page={page} pageIndex={index} />
+              <span>
+                {
+                  this.hoverIndex === index &&
+                  <PageTitleEditor
+                    page={page}
+                    pageIndex={index}
+                    onEditTitle={this.onEditTitle}
+                  />
+                }
+                <PageTitleMenu onSelectMenuItem={this.onSelectMenuItem} />
+              </span>
+            </span>
+          ))
+        }
+        <a-button
+          icon="plus"
+          type="dashed"
+          class="footer-actions"
+          onClick={() => this.onSelectMenuItem('add') }
+        >{addPageText}</a-button>
+      </div>
+    )
+  }
+}
+export default {
+  props: ['page', 'pageIndex'],
+  data: () => ({
+    editingTitle: '' // 临时缓存当前编辑的 title，点击 Yes 再真正用其更新 page title
+  }),
+  methods: {
+    getTitle () {
+      return this.page.title || this.$t('editor.pageManager.title', { index: this.pageIndex })
+    }
+  },
+  render () {
+    return (
+      <a-popconfirm
+        placement="bottom"
+        onConfirm={() => {
+          this.$emit('editTitle', { newTitle: this.editingTitle, pageIndex: this.pageIndex })
+        }}
+        onCancel={() => {}}
+        okText="Yes"
+        cancelText="No"
+      >
+        <a-input
+          slot="title"
+          value={this.editingTitle}
+          size="small"
+          onChange={e => {
+            this.editingTitle = e.target.value
+          }}
+        >
+        </a-input>
+        <a-icon type="edit" onClick={(e) => {
+          e.stopPropagation() // 将 click icon 与 click page item 隔离开。编辑标题的同时不要切换页面
+          this.editingTitle = this.getTitle()
+        }}/>
+      </a-popconfirm>
+
+    )
+  }
+}
+export default {
+  render () {
+    const addPageText = this.$t('editor.pageManager.action.add')
+    const copyPageText = this.$t('editor.pageManager.action.copy')
+    const deletePageText = this.$t('editor.pageManager.action.delete')
+    return (
+      <a-dropdown trigger={['hover']} placement='bottomCenter'>
+        <a class="ant-dropdown-link" href="#" class="ml-2"><a-icon type="down" /></a>
+        <a-menu slot="overlay" onClick={({ key }) => this.$emit('selectMenuItem', key)}>
+          <a-menu-item key="add"><a-icon type="plus" />{addPageText}</a-menu-item>
+          <a-menu-item key="copy"><a-icon type="copy" />{copyPageText}</a-menu-item>
+          <a-menu-item key="delete"><a-icon type="delete" />{deletePageText}</a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    )
+  }
+}
+export default {
+  props: ['page', 'pageIndex'],
+  methods: {
+    getTitle () {
+      return this.page.title || this.$t('editor.pageManager.title', { index: this.pageIndex })
+    }
+  },
+  render (h) {
+    // #!en: Page<Index>
+    // #!zh: 第<Index>页面
+    return (
+      <span>
+        <a-badge
+          count={this.pageIndex + 1}
+          numberStyle={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
+        />
+        <span class="ml-3">{this.getTitle()}</span>
+      </span>
+    )
+  }
+}
+<template>
+  <a-tree
+    class="draggable-tree"
+    :default-expanded-keys="expandedKeys"
+    draggable
+    :tree-data="treeData"
+    @dragenter="onDragEnter"
+    @drop="onDrop"
+  />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+function getTreeNode (ele) {
+  return {
+    title: ele.name,
+    key: ele.uuid,
+    children: (ele.children || []).map(getTreeNode)
+  }
+}
+
+export default {
+  computed: {
+    ...mapState('editor', {
+      elements: state => state.editingPage.elements
+    }),
+    treeData () {
+      return this.elements.map(getTreeNode)
+    }
+  },
+  data () {
+    return {
+      gData: [],
+      expandedKeys: []
+    }
+  },
+  methods: {
+    onDragEnter (info) {
+    },
+    onDrop (info) {
+    }
+  }
+}
+</script>
 import ShortcutButton from './shortcut-button'
+import UsageTip from './usage-tip'
 import LoadNpmPlugins from './load-npm-plugins.vue'
-import langMixin from '@/mixins/i18n'
+import langMixin from 'core/mixins/i18n'
+import dragMixin from 'core/mixins/drag'
+import loadPluginsMixin from 'core/plugins/index'
+import { mapActions } from 'vuex'
+
 export default {
-  mixins: [langMixin],
-  props: {
-    pluginsList: {
-      required: false,
-      type: Array,
-      default: () => []
-    },
-    handleClickShortcut: {
-      type: Function
-    },
-    handleDragStart: {
-      type: Function,
-      default: (e) => {}
-    }
-  },
+  mixins: [langMixin, dragMixin, loadPluginsMixin],
   data: () => ({
     npmPackages: []
   }),
   methods: {
-    onClickShortcut (item) {
-      if (this.handleClickShortcut) {
-        this.handleClickShortcut(item)
-      }
+    ...mapActions('editor', [
+      'elementManager',
+      'pageManager',
+      'saveWork',
+      'setEditingPage'
+    ]),
+    ...mapActions('loading', {
+      updateLoading: 'update'
+    }),
+    /**
+     * !#zh 点击插件，copy 其基础数据到组件树（中间画布）
+     * #!en click the plugin shortcut, create new Element with the plugin's meta data
+     * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
+     *
+     * shortcutItem: PluginListItem = {
+      name: String,
+      shortcutProps: {}
+     }
+     */
+    clone (shortcutItem) {
+      this.elementManager({
+        type: 'add',
+        value: shortcutItem
+      })
     }
     /**
      * #!zh 渲染多个插件的快捷方式
@@ -70,8 +81,8 @@ export default {
     //   />
     // },
     /**
-     * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式，用户点击之后，即可将其添加到中间画布上
-     * #!en: render shortcust at the sidebar or the header. if user click the shortcut, the related plugin will be added to the canvas
+     * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式，用户点击/拖拽之后，即可将其添加到中间画布上
+     * #!en: render shortcust at the sidebar or the header. if user click/drag the shortcut, the related plugin will be added to the canvas
      * @param {Object} group: {children, title, icon}
      */
     // renderShortCutsPanel (groups) {
@@ -92,23 +103,31 @@ export default {
     //   )
     // }
   },
+  /**
+   * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式，用户点击/拖拽之后，即可将其添加到中间画布上
+   * #!en: render shortcust at the sidebar or the header.
+   * if user click/drag the shortcut, the related plugin will be added to the canvas
+   */
   render (h) {
     // return this.renderShortCutsPanel(this.groups)
     return (
       <a-row gutter={20} style="max-height: calc(100vh - 140px);overflow: scroll;">
+        <UsageTip />
         {
-          [].concat(this.pluginsList, this.npmPackages).filter(plugin => plugin.visible).map(plugin => (
-            <a-col span={12} style={{ marginTop: '10px' }}>
-              <ShortcutButton
-                clickFn={this.onClickShortcut.bind(this, plugin)}
-                mousedownFn={this.handleDragStart.bind(this, plugin)}
-                // title={plugin.title}
-                title={plugin.i18nTitle[this.currentLang] || plugin.title}
-                faIcon={plugin.icon}
-                disabled={plugin.disabled}
-              />
-            </a-col>
-          ))
+          [].concat(this.pluginsList, this.npmPackages)
+            .filter(plugin => plugin.visible)
+            .map(plugin => (
+              <a-col span={12} style={{ marginTop: '10px' }}>
+                <ShortcutButton
+                  clickFn={this.clone.bind(this, plugin)}
+                  mousedownFn={this.handleDragStartFromMixin.bind(this, plugin)}
+                  // title={plugin.title}
+                  title={plugin.i18nTitle[this.currentLang] || plugin.title}
+                  faIcon={plugin.icon}
+                  disabled={plugin.disabled}
+                />
+              </a-col>
+            ))
         }
         <LoadNpmPlugins onLoadComplete={npmPackages => {
           this.npmPackages = npmPackages
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2019-11-23 12:35:43
  * @LastEditors: ly525
- * @LastEditTime: 2019-11-23 19:37:29
- * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/shortcuts-panel/load-npm-plugins.vue
+ * @LastEditTime: 2020-10-10 23:31:49
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/load-npm-plugins.vue
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  -->
 <template>
+export default {
+  render () {
+    return (
+      <div class="plugin-usage-tip ">
+        <a-icon type="info-circle" />
+        {/* 使用提示: 点击或拖拽 组件即可 */}
+        {/* Tip: just click/drag component */}
+        <i18n path="editor.tip.componentUsage" tag="span" class="ml-1">
+          <strong>{ this.$t('editor.tip.click') }</strong>{ this.$t('editor.tip.click') }
+        </i18n>
+      </div>
+    )
+  }
+}
-export default {
-  props: {
-    pages: {
-      required: false,
-      type: Array,
-      default: () => []
-    },
-    editingPage: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data: () => ({
-    hoverIndex: -1, // 显示编辑按钮
-    editingTitle: '' // 临时缓存当前编辑的 title，点击 Yes 再真正用其更新 page title
-  }),
-  methods: {
-    getTitle (page, index) {
-      return page.title || this.$t('editor.pageManager.title', { index })
-    },
-    _renderEditTitle (page, index) {
-      return (
-        <a-popconfirm
-          placement="bottom"
-          onConfirm={() => {
-            this.$emit('editTitle', { newTitle: this.editingTitle, pageIndexForEditingTitle: index })
-          }}
-          onCancel={() => {}}
-          okText="Yes"
-          cancelText="No"
-        >
-          <a-input
-            slot="title"
-            value={this.editingTitle}
-            size="small"
-            onChange={e => {
-              this.editingTitle = e.target.value
-            }}
-          >
-          </a-input>
-          <a-icon type="edit" onClick={(e) => {
-            e.stopPropagation() // 将 click icon 与 click page item 隔离开。编辑标题的同时不要切换页面
-            this.editingTitle = this.getTitle(page, index)
-          }}/>
-        </a-popconfirm>
-      )
-    },
-    _renderTitleMenu (page, index) {
-      const addPageText = this.$t('editor.pageManager.action.add')
-      const copyPageText = this.$t('editor.pageManager.action.copy')
-      const deletePageText = this.$t('editor.pageManager.action.delete')
-      return (
-        <a-dropdown trigger={['hover']} placement='bottomCenter'>
-          <a class="ant-dropdown-link" href="#" class="ml-2"><a-icon type="down" /></a>
-          <a-menu slot="overlay" onClick={({ key }) => this.$emit('selectMenuItem', key)}>
-            <a-menu-item key="add"><a-icon type="plus" />{addPageText}</a-menu-item>
-            <a-menu-item key="copy"><a-icon type="copy" />{copyPageText}</a-menu-item>
-            <a-menu-item key="delete"><a-icon type="delete" />{deletePageText}</a-menu-item>
-          </a-menu>
-        </a-dropdown>
-      )
-    },
-    onLeave () {
-      this.hoverIndex = -1
-    }
-  },
-  render (h) {
-    const addPageText = this.$t('editor.pageManager.action.add')
-    return (
-      <div class="page-manager-panel">
-        {
-          this.pages.map((page, index) => (
-            <span
-              class={[
-                'cursor-pointer',
-                'page-manager-panel__item',
-                page.uuid === this.editingPage.uuid && 'active'
-              ]}
-              onClick={() => { this.$emit('selectPage', index) }}
-              // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VHover/VHover.ts
-              onMouseenter={() => { this.hoverIndex = index }}
-            >
-              {/* #!en: Page<Index> */}
-              {/* #!zh: 第<Index>页面 */}
-              <span>
-                <a-badge
-                  count={index + 1}
-                  numberStyle={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
-                />
-                <span class="ml-3">{this.getTitle(page, index)}</span>
-              </span>
-              <span>
-                {this.hoverIndex === index && this._renderEditTitle(page, index)}
-                {this._renderTitleMenu(page, index)}
-              </span>
-            </span>
-          ))
-        }
-        <a-button
-          icon="plus"
-          type="dashed"
-          class="footer-actions"
-          onClick={() => { this.$emit('selectMenuItem', 'add') }}
-        >{addPageText}</a-button>
-      </div>
-    )
-  }
-}
 import { mapState } from 'vuex'
-import { animationOptions, animationValue2Name, firstLevelAnimationOptions } from '@/constants/animation.js'
+import { animationOptions, animationValue2Name, firstLevelAnimationOptions } from 'core/constants/animation.js'
 export default {
   computed: {
@@ -32,7 +32,7 @@ export default {
     },
     runAnimate () {
       // front-end/h5/src/components/core/editor/index.js created()
-      window.getEditorApp.$emit('RUN_ANIMATIONS')
+      window.EditorApp.$emit('RUN_ANIMATIONS')
     },
     renderSecondAnimationTabs (animations) {
       return (
@@ -208,7 +208,7 @@ export default {
     const ele = this.editingElement
     if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
     return (
-      <div class="main-animate widget" id="animation-edit-panel">
+      <div class="main-animate widget" id="animation-right-panel">
         <a-button-group>
           {/* 添加动画、运行动画 */}
           <a-button type="primary" onClick={this.addAnimation}><a-icon type="plus" />{this.$t('editor.editPanel.animation.add')}</a-button>
 /*
  * @Author: ly525
  * @Date: 2019-12-01 18:11:49
- * @LastEditors  : ly525
- * @LastEditTime : 2020-01-15 01:03:31
- * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/edit-panel/background.js
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-10-10 23:36:27
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/right-panel/background.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
-import propsEditPanel from './props.js'
+import PropsEditPanel from './props.js'
 import { mapState, mapActions } from 'vuex'
+import RenderWorkMode from './work-mode.vue'
 export default {
   computed: {
@@ -24,10 +25,15 @@ export default {
   },
   render () {
     const bgEle = this.editingPage.elements.find(e => e.name === 'lbp-background')
-    return <propsEditPanel
-      layout="vertical"
-      realEditingElement={bgEle}
-    />
+    return (
+      <div>
+        <RenderWorkMode />
+        <PropsEditPanel
+          layout="vertical"
+          realEditingElement={bgEle}
+        />
+      </div>
+    )
   }
 }
+import RenderPropsEditor from './props'
+import RenderScriptEditor from './script'
+import RenderAnimationEditor from './animation'
+import RenderActionEditor from './action'
+import RenderBackgroundEditor from './background'
+export default {
+  name: 'ElementPropsEditor',
+  props: {
+    width: {
+      type: Number,
+      default: 320
+    }
+  },
+  data: () => ({
+    activeTabKey: '页面'
+  }),
+  methods: {
+    /**
+     * #!zh: 设置 页面图tab 作为 active tab
+     * #!en: set background(bg) tab as active tab
+     */
+    setActiveTab (activeTabKey) {
+      this.activeTabKey = activeTabKey
+    }
+  },
+  render (h) {
+    return (
+      <a-layout-sider width={this.width} data-set-width={this.width} theme='light' style={{ background: '#fff', padding: '0 12px 0 12px' }}>
+        <a-tabs
+          style="height: 100%;"
+          tabBarGutter={10}
+          defaultActiveKey={this.activeTabKey}
+          activeKey={this.activeTabKey}
+          onChange={this.setActiveTab}
+        >
+          <a-tab-pane key="属性"><span slot="tab">{this.$t('editor.editPanel.tab.prop')}</span><RenderPropsEditor/></a-tab-pane>
+          <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
+          <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActionEditor/> }</a-tab-pane>
+          <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
+          <a-tab-pane label="页面" key='页面' tab={this.$t('editor.editPanel.tab.page')}>{ this.activeTabKey === '页面' && <RenderBackgroundEditor/> }</a-tab-pane>
+        </a-tabs>
+      </a-layout-sider>
+    )
+  },
+  created () {
+    window.EditorApp.$on('setEditingElement', ({ name }) => {
+      this.setActiveTab(name === 'lbp-background' ? '页面' : '属性')
+    })
+  }
+}
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
-import { getVM, getComponentsForPropsEditor } from '../../../../utils/element'
-import RenderGlobalWorkPropsEditor from './props/global-work.vue'
+import { getVM, getComponentsForPropsEditor } from '@/utils/element'
+import 'core/styles/props-config-panel.scss'
 export default {
   data: () => ({
@@ -40,7 +40,7 @@ export default {
       if (Vue.component(this.customEditorName)) {
         this.loadCustomEditorFlag = true
       } else {
-        import(`../../../plugins/${this.editingElement.name}__editor`).then(component => {
+        import(`core/plugins/${this.editingElement.name}__editor`).then(component => {
           this.loadCustomEditorFlag = true
           Vue.component(this.customEditorName, component.default)
         }).catch(err => {
@@ -122,9 +122,8 @@ export default {
         <a-form
           ref="form"
           size="mini"
-          id="props-edit-form"
+          class="props-config-form"
           layout={this.layout}
-          style="overflow: auto;position: absolute;top: 50px;bottom: 0;width: 100%; "
         >
           {
             // plugin-custom-editor
@@ -151,17 +150,17 @@ export default {
       )
     },
     renderWorkGlobalPropsPanel (h) {
-      return <RenderGlobalWorkPropsEditor />
+      return <RenderWorkMode />
     }
   },
   render (h) {
     const ele = this.editingElement
-    if (!ele) return this.renderWorkGlobalPropsPanel(h)
+    if (!ele) return '请选择一个元素'
     this.mixinEnhancedPropsEditor(ele)
     return this.renderPropsEditorPanel(h, ele)
   },
   created () {
-    window.getEditorApp.$on('setEditingElement', (ele) => {
+    window.EditorApp.$on('setEditingElement', (ele) => {
       this.loadCustomEditorForPlugin()
       this.componentsForPropsEditor = getComponentsForPropsEditor(ele.name)
     })
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2020-05-10 23:10:52
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-13 00:09:56
- * @FilePath: /h5/src/components/core/editor/edit-panel/props/global-work.vue
+ * @LastEditTime: 2020-10-10 23:32:07
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/right-panel/work-mode.vue
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  -->
 <template>
   <a-form :layout="formLayout">
@@ -22,7 +22,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
-import { PAGE_MODE, PAGE_MODE_LABEL } from '@/constants/work'
+import { PAGE_MODE, PAGE_MODE_LABEL } from 'core/constants/work'
 export default {
   data () {
+import { mapState, mapActions } from 'vuex'
+import Vue from 'vue'
+
+import 'core/support/index.js'
+import 'core/styles/index.scss'
+import 'animate.css'
+
+import FixedTools from 'core/editor/fixed-tools/index'
+import EditorRightPanel from 'core/editor/right-panel/index'
+import EditorCanvas from 'core/editor/canvas/index'
+import EditorActionMenu from 'core/editor/header/action-menu'
+import EditorLeftPanel from 'core/editor/left-panel/index'
+import PreviewDialog from 'core/editor/modals/preview.vue'
+import Header from '@/components/common/header/index'
+import Feedback from '@/components/common/feedback/index'
+import AdjustLineV from 'core/support/adjust-line/vertical'
+
+import store from 'core/store/index'
+import router from 'core/router/index'
+import i18n from '@/locales'
+import '@/plugins/index'
+
+window.EditorApp = new Vue() // event bus
+const CoreEditor = {
+  name: 'CoreEditor',
+  store,
+  i18n,
+  router,
+  props: {
+    workId: {
+      type: [Number, String]
+    }
+  },
+  data: () => ({
+    previewDialogVisible: false,
+    propsPanelWidth: 320
+  }),
+  computed: {
+    ...mapState('editor', {
+      work: state => state.work
+    })
+  },
+  methods: {
+    ...mapActions('editor', ['fetchWork']),
+    handlePreview () { this.previewDialogVisible = true }
+  },
+  render (h) {
+    return (
+      <a-layout>
+        <Header>
+          <EditorActionMenu slot="action-menu" onPreview={this.handlePreview} />
+        </Header>
+        <a-layout>
+          <EditorLeftPanel />
+          <EditorCanvas />
+          <AdjustLineV onLineMove={(offset) => { this.propsPanelWidth += offset }} />
+          <FixedTools />
+          <EditorRightPanel width={this.propsPanelWidth} />
+        </a-layout>
+        {
+          <PreviewDialog
+            work={this.work}
+            visible={this.previewDialogVisible}
+            handleClose={() => { this.previewDialogVisible = false }}
+          />
+        }
+        <Feedback />
+      </a-layout>
+    )
+  },
+  created () {
+    if (this.workId) {
+      this.fetchWork(this.workId)
+    } else {
+      this.$message.error('no work id!')
+    }
+  }
+}
+
+// Vue install, Vue.use 会调用该方法。
+CoreEditor.install = (Vue, opts = {}) => {
+  Vue.component(CoreEditor.name, CoreEditor)
+}
+
+// 通过script标签引入Vue的环境
+if (typeof window !== 'undefined' && window.Vue) {
+  CoreEditor.install(window.Vue)
+}
+
+export default CoreEditor
 /*
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
- * @LastEditors  : ly525
- * @LastEditTime : 2020-01-09 21:57:30
- * @FilePath: /luban-h5/front-end/h5/src/mixins/animation.js
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-10-10 23:35:49
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/mixins/animation.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description:
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 // https://stackoverflow.com/questions/26874769/getcomputedstyle-and-csstext-in-ie-and-firefox
 function getComputedCSSText (style) {
@@ -55,7 +55,7 @@ export default {
   },
   created () {
     const that = this
-    window.getEditorApp && window.getEditorApp.$on('RUN_ANIMATIONS', () => {
+    window.EditorApp && window.EditorApp.$on('RUN_ANIMATIONS', () => {
       that.runAnimations()
       // if (that.active) {
       //   that.runAnimations()
@@ -2,10 +2,10 @@
  * @Author: ly525
  * @Date: 2020-05-17 17:21:04
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-24 18:09:23
- * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/drag-mixin.js
+ * @LastEditTime: 2020-10-11 17:20:39
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/mixins/drag.js
  * @Github: https://github.com/ly525/luban-h5
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  * @Description:
  *  组件拖拽至画布功能
  *  其中部分代码参考自：https://github.com/hakubox/haku-form-design，已经征得作者同意，目的是后续考虑做 tab 之类的嵌套容器
@@ -50,7 +50,6 @@ class Drag {
   }
   _mouseup (e) {
-    console.log('mouseup')
     this.mouseup(e)
     this.toggleListener('remove')
   }
-import { parsePx } from '../../../utils/element.js'
+import { parsePx } from '@/utils/element.js'
 // #! 编辑状态，不可以点击的按钮，因为点击按钮会触发一些默认行为，比如表单提交等
 const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button', 'lbp-video']
-import Element from '../models/element'
-import LbpBackground from '../../plugins/lbp-background'
+import Element from 'core/models/element'
+import LbpBackground from 'core/plugins/lbp-background'
 class Page {
   constructor (page = {}) {
@@ -2,14 +2,14 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-10 23:23:40
+ * @LastEditTime: 2020-10-10 23:32:31
  * @FilePath: /luban-h5/front-end/h5/src/components/core/models/work.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: work model
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import Page from './page.js'
-import { PAGE_MODE } from '@/constants/work'
+import { PAGE_MODE } from 'core/constants/work'
 class Work {
   constructor (work = {}) {
+{
+  "name": "@luban-h5/core-editor",
+  "private": false,
+  "version": "0.0.4",
+  "description": "luban-h5 core-editor",
+  "main": "dist/core-editor.umd.min.js",
+  "author": "ly525",
+  "license": "GPL-3.0"
+}
@@ -8,7 +8,7 @@ import &#39;echarts/lib/component/legend&#39;
 import 'echarts/lib/component/markLine'
 import 'echarts/lib/component/markPoint'
 import 'echarts/lib/component/markArea'
-import Parser from '../../../utils/excel-parser'
+import Parser from '@/utils/excel-parser'
 // const title = str => str.slice(0, 1).toUpperCase() + str.slice(1)
 import Vue from 'vue'
 // import LbpButton from '@luban-h5/lbc-button'
-import LbpButton from '../components/plugins/lbp-button'
-import LbpPicture from '../components/plugins/lbp-picture'
-import LbpVideo from '../components/plugins/lbp-video'
-import LbpText from '../components/plugins/lbp-text'
-import LbpFormInput from '../components/plugins/lbp-form-input'
-import LbpFormButton from '../components/plugins/lbp-form-button'
-import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
-import LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group'
-import LbpBackground from '../components/plugins/lbp-background'
-import LbpSlide from '../components/plugins/lbp-slide'
-import LbpBgMusic from '../components/plugins/lbp-bg-music'
-import LbpNoticeBar from '../components/plugins/lbp-notice-bar'
-import LbpRate from '../components/plugins/lbp-rate'
-import LbpQQMap from '../components/plugins/lbp-qq-map/src'
-import LbpLineChart from '../components/plugins/charts/line'
-import LbpTable from '../components/plugins/lbp-table'
-import LbpNewsList from '../components/plugins/lbp-news-list'
-// import LbpTabs from '../components/plugins/lbp-tabs'
+import LbpButton from 'core/plugins/lbp-button'
+import LbpPicture from 'core/plugins/lbp-picture'
+import LbpVideo from 'core/plugins/lbp-video'
+import LbpText from 'core/plugins/lbp-text'
+import LbpFormInput from 'core/plugins/lbp-form-input'
+import LbpFormButton from 'core/plugins/lbp-form-button'
+import LbpFormRadioGroup from 'core/plugins/lbp-form-radio-group'
+import LbpFormCheckboxGroup from 'core/plugins/lbp-form-checkbox-group'
+import LbpBackground from 'core/plugins/lbp-background'
+import LbpSlide from 'core/plugins/lbp-slide'
+import LbpBgMusic from 'core/plugins/lbp-bg-music'
+import LbpNoticeBar from 'core/plugins/lbp-notice-bar'
+import LbpRate from 'core/plugins/lbp-rate'
+import LbpQQMap from 'core/plugins/lbp-qq-map/src'
+import LbpLineChart from 'core/plugins/charts/line'
+import LbpTable from 'core/plugins/lbp-table'
+import LbpNewsList from 'core/plugins/lbp-news-list'
+// import LbpTabs from 'core/components/plugins/lbp-tabs'
 export const pluginsList = [
   {
@@ -2,14 +2,14 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 21:02:47
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-background.js
+ * @LastEditTime: 2020-10-10 23:32:48
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-background.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: luban-h5 background image/color component/plugin
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
-import { renderWaterMark } from '../../utils/dom-helper'
+import { renderWaterMark } from '@/utils/dom-helper'
 export default {
   name: 'lbp-background',
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2020-01-03 23:43:34
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 20:58:32
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-bg-music.js
+ * @LastEditTime: 2020-10-10 23:32:41
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-bg-music.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
 import './styles/bg-music.scss'
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2019-11-23 12:35:43
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 23:17:23
- * @FilePath: /h5/src/components/plugins/lbp-form-radio-group.js
+ * @LastEditTime: 2020-10-10 23:33:03
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-form-radio-group.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: 表单单选组组件 #!en: radio group component
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
@@ -2,15 +2,15 @@
  * @Author: ly525
  * @Date: 2020-05-17 19:54:20
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 19:55:02
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-form-radio.js
+ * @LastEditTime: 2020-10-10 23:33:11
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-form-radio.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import './styles/radio.scss'
 // https://github.com/luban-h5-components/plugin-common-props
-import { genUUID } from '../../utils/element.js'
+import { genUUID } from '@/utils/element.js'
 export default {
   name: 'lbp-form-radio',
 import PropTypes from '@luban-h5/plugin-common-props'
-import Parser from '../../utils/excel-parser'
+import Parser from '@/utils/excel-parser'
 import './styles/news-list.scss'
 export default {
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2020-05-14 08:09:44
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 21:18:32
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-notice-bar.js
+ * @LastEditTime: 2020-10-10 23:33:19
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-notice-bar.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2020-05-17 20:04:23
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 21:33:31
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-rate.js
+ * @LastEditTime: 2020-10-10 23:33:32
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-rate.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
 import { Rate } from 'vant'
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2019-11-23 12:35:21
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 21:22:01
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-slide.js
+ * @LastEditTime: 2020-10-10 23:33:43
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-slide.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: #!zh: 轮播图组件 #!en slide component
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 21:11:10
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-text.js
+ * @LastEditTime: 2020-10-10 23:33:50
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-text.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: luban-h5 text component/plugin
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
 import { quillEditor } from 'vue-quill-editor'
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2019-12-01 18:11:50
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-17 21:12:55
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-video.js
+ * @LastEditTime: 2020-10-10 23:33:57
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-video.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
@@ -26,7 +26,7 @@
     right: 0;
     top: 0;
     border-radius: 15px;
-    background-image: url(../bg-music.svg);
+    background-image: url(./bg-music.svg);
     background-size: contain;
     background-repeat: no-repeat;
-import animationMixin from '@/mixins/animation.js'
+import animationMixin from 'core/mixins/animation.js'
 export default {
   mixins: [animationMixin],
+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
+
+export default new Router()
+/*
+ * @Author: ly525
+ * @Date: 2020-10-11 10:13:51
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-10-11 11:16:37
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/store/index.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: Do not edit
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
+import Vue from 'vue'
+import Vuex from 'vuex'
+import undoRedoPlugin from './plugins/undo-redo/index'
+import editor from './modules/editor'
+import user from './modules/user'
+import loading from './modules/loading'
+import i18n from './modules/i18n'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+  modules: {
+    editor,
+    user,
+    loading,
+    i18n
+  },
+  plugins: [undoRedoPlugin]
+})
+// actions
+export const actions = {
+  updateScaleRate ({ commit }, payload) {
+    commit('updateScaleRate', payload)
+  }
+}
+
+// mutations
+export const mutations = {
+  /**
+   *
+   * @param {*} state
+   * @param {Number} scaleRateDiff 放大: 0.25, 缩小: -0.25
+   */
+  updateScaleRate (state, scaleRateDiff) {
+    state.scaleRate += scaleRateDiff
+  }
+}
+// initial state
+import Work from 'core/models/work'
+import { actions as canvasActions, mutations as canvasMutations } from './canvas'
+import { actions as pageActions, mutations as pageMutations } from './page'
+import { actions as elementActions, mutations as elementMutations } from './element'
+import { actions as workActions, mutations as workMutations } from './work'
+
+const state = {
+  works: [],
+  work: new Work(),
+  editingPage: { elements: [] },
+  editingElement: null,
+  formDetailOfWork: {
+    uuidMap2Name: {},
+    formRecords: []
+  },
+  workTemplates: [],
+  scaleRate: 1
+}
+
+// getters
+const getters = {}
+
+// actions
+const actions = {
+  ...elementActions,
+  ...pageActions,
+  ...workActions,
+  ...canvasActions
+}
+
+// mutations
+const mutations = {
+  ...elementMutations,
+  ...pageMutations,
+  ...workMutations,
+  ...canvasMutations
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}
-import Element from '../../components/core/models/element'
-import { swapZindex, getVM } from '../../utils/element'
+import Element from 'core/models/element'
+import { swapZindex, getVM } from '@/utils/element'
 // actions
 export const actions = {
   setEditingElement ({ commit }, payload) {
     commit('setEditingElement', payload)
-    payload && window.getEditorApp.$emit('setEditingElement', payload)
+    payload && window.EditorApp.$emit('setEditingElement', payload)
   },
   setElementPosition ({ commit }, payload) {
     commit('setElementCommonStyle', payload)
+import { loadLanguageAsync } from '@/locales'
+
+const i18n = {
+  namespaced: true,
+  state: {
+    lang: 'zh-CN'
+  },
+  mutations: {
+    SET_LANG: (state, lang) => {
+      state.lang = lang
+    }
+  },
+  actions: {
+    // 设置界面语言
+    SetLang ({ commit }, lang) {
+      return new Promise(resolve => {
+        commit('SET_LANG', lang)
+        loadLanguageAsync(lang)
+        resolve()
+      })
+    }
+  }
+}
+
+export default i18n
+/*
+ * @Author: ly525
+ * @Date: 2019-11-24 18:51:58
+ * @LastEditors: ly525
+ * @LastEditTime: 2019-12-08 17:21:48
+ * @FilePath: /luban-h5/front-end/h5/src/store/modules/loading.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: loading module
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
+ */
+// initial state
+const state = {
+  saveWork_loading: false,
+  previewWork_loading: false,
+  fetchWorks_loading: false,
+  setWorkAsTemplate_loading: false,
+  fetchWorkTemplates_loading: false,
+  useTemplate_loading: false,
+  uploadWorkCover_loading: false
+}
+
+// getters
+const getters = {
+
+}
+
+// actions
+const actions = {
+  update ({ commit }, payload) {
+    commit('update', payload)
+  }
+}
+
+// mutations
+const mutations = {
+  update (state, { type, payload }) {
+    state[type] = payload
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}
@@ -2,15 +2,15 @@
  * @Author: ly525
  * @Date: 2019-12-08 17:05:09
  * @LastEditors: ly525
- * @LastEditTime: 2019-12-15 15:41:56
+ * @LastEditTime: 2020-10-10 23:34:28
  * @FilePath: /luban-h5/front-end/h5/src/store/modules/page.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: page module
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import { message } from 'ant-design-vue'
-import Page from '../../components/core/models/page'
+import Page from 'core/models/page'
 // actions
 export const actions = {
@@ -30,8 +30,8 @@ export const mutations = {
   pageManager (state, { type, value }) {
     switch (type) {
       case 'editTitle':
-        const { pageIndexForEditingTitle, newTitle } = value
-        state.work.pages[pageIndexForEditingTitle].title = newTitle
+        const { pageIndex, newTitle } = value
+        state.work.pages[pageIndex].title = newTitle
         break
       case 'add':
         const page = new Page(value)
+import Element from 'core/models/element'
+import strapi from '@/utils/strapi'
+import Page from 'core/models/page'
+import Work from 'core/models/work'
+import { AxiosWrapper } from '@/utils/http.js'
+// import router from '@/router.js'
+import { takeScreenshot } from '@/utils/canvas-helper.js'
+
+function setLoading (commit, loadingName, isLoading) {
+  commit('loading/update', { type: loadingName, payload: isLoading }, { root: true })
+}
+
+export const actions = {
+  previewWork ({ commit }, payload = {}) {
+    commit('previewWork', payload)
+  },
+  deployWork ({ commit }, payload = {}) {
+    commit('previewWork', payload)
+  },
+  // createWork ({ commit }, payload) {
+  //   strapi.createEntry('works', new Work()).then(entry => {
+  //     const routeData = router.resolve({ name: 'editor', params: { workId: entry.id } })
+  //     window.open(routeData.href, '_blank')
+  //     // 如果希望不打开新 tab，可以注释上面面两行，启用下面一行的代码即可，不过不推荐。将编辑器单独起一个页面更有利于 vuex 的数据管理
+  //     // router.replace({ name: 'editor', params: { workId: entry.id } })
+  //   })
+  // },
+  updateWork ({ commit, state }, payload = {}) {
+    // update work with strapi
+    const work = {
+      ...state.work,
+      ...payload
+    }
+    commit('setWork', work)
+  },
+  /**
+   * isSaveCover {Boolean} 保存作品时，是否保存封面图
+   * loadingName {String} saveWork_loading, previewWork_loading
+   * 预览作品之前需要先保存，但希望 用户点击保存按钮 和 点击预览按钮 loading_name 能够不同（虽然都调用了 saveWork）
+   * 因为 loading 效果要放在不同的按钮上
+   */
+  saveWork ({ commit, dispatch, state }, { isSaveCover = false, loadingName = 'saveWork_loading', successMsg = '保存作品成功' } = {}) {
+    const fn = (callback) => {
+      new AxiosWrapper({
+        dispatch,
+        commit,
+        loading_name: loadingName,
+        successMsg,
+        customRequest: strapi.updateEntry.bind(strapi)
+      }).put('works', state.work.id, state.work).then(callback)
+    }
+    return new Promise((resolve, reject) => {
+      if (isSaveCover) {
+        setLoading(commit, 'uploadWorkCover_loading', true)
+        takeScreenshot().then(file => {
+          dispatch('uploadCover', { file }).then(() => {
+            setLoading(commit, 'uploadWorkCover_loading', false)
+            fn(resolve)
+          }) // uploadCover
+        }) // takeScreenshot
+      } else {
+        fn(resolve)
+      }
+    })
+  },
+  fetchWork ({ commit, state }, workId) {
+    return strapi.getEntry('works', workId).then(entry => {
+      commit('setWork', entry)
+      commit('setEditingPage')
+    })
+  },
+  fetchWorks ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorks',
+      loading_name: 'fetchWorks_loading',
+      successMsg: '获取作品列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works', { is_template: false })
+  },
+  fetchWorksWithForms ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorks',
+      loading_name: 'fetchWorks_loading',
+      successMsg: '获取作品列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works/has-forms', { is_template: false })
+  },
+  fetchWorkTemplates ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorkTemplates',
+      loading_name: 'fetchWorkTemplates_loading',
+      successMsg: '获取模板列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works', { is_template: true })
+  },
+  /**
+   *
+   * @param {*} workId
+   * response demo:
+   {
+    "uuidMap2Name": {
+        "1565596393441": "姓名",
+        "1565596397671": "学校"
+    },
+    "formRecords": [
+        {
+            "id": 3,
+            "form": {
+                "1565369322603": "abc"
+            },
+            "work": 8,
+            "created_at": "2019-08-09T16:52:28.826Z",
+            "updated_at": "2019-08-09T16:52:28.832Z"
+        },
+        {
+            "id": 4,
+            "form": {
+                "1565595388440": "ddd"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:36:54.521Z",
+            "updated_at": "2019-08-11T07:36:54.526Z"
+        },
+        {
+            "id": 5,
+            "form": {
+                "1565595388440": "acd"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:45:22.000Z",
+            "updated_at": "2019-08-11T07:45:22.005Z"
+        },
+        {
+            "id": 6,
+            "form": {
+                "1565596393441": "b",
+                "1565596397671": "a"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:59:00.938Z",
+            "updated_at": "2019-08-11T07:59:00.943Z"
+        },
+        {
+            "id": 7,
+            "form": {
+                "1565596393441": "b",
+                "1565596397671": "a"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:59:37.065Z",
+            "updated_at": "2019-08-11T07:59:37.070Z"
+        }
+      ]
+    }
+   */
+  fetchFormsOfWork ({ commit, state, dispatch }, workId) {
+    // 可以 return Promise
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/formDetailOfWork',
+      loading_name: 'queryFormsOfWork_loading',
+      successMsg: '表单查询完毕'
+    }).get(`/works/form/query/${workId}`)
+  },
+  setWorkAsTemplate ({ commit, state, dispatch }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      // name: 'editor/formDetailOfWork',
+      loading_name: 'setWorkAsTemplate_loading',
+      successMsg: '设置为模板成功'
+    }).post(`/works/set-as-template/${workId || state.work.id}`)
+  },
+  useTemplate ({ commit, state, dispatch }, workId) {
+    return new AxiosWrapper({
+      dispatch,
+      commit,
+      // name: 'editor/formDetailOfWork',
+      loading_name: 'useTemplate_loading',
+      successMsg: '使用模板成功'
+    }).post(`/works/use-template/${workId}`)
+  },
+  uploadCover ({ commit, state, dispatch }, { file } = {}) {
+    const formData = new FormData()
+    formData.append('files', file, `${+new Date()}.png`)
+    formData.append('workId', state.work.id)
+    return new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorkCover',
+      loading_name: 'uploadWorkCover_loading',
+      successMsg: '上传封面图成功!'
+    // }).post(`/works/uploadCover/${state.work.id}`, formData)
+    }).post(`/upload/`, formData)
+  }
+}
+
+// mutations
+export const mutations = {
+  /**
+   *
+   * @param {*} state
+   * @param {Object} payload
+   *
+    value example: [
+      {
+        "id": 1,
+        "name": "1567769149231.png",
+        "hash": "1660b11229e7473b90f99a9f9afe7675",
+        "sha256": "lKl7f_csUAgOjf0VRYkBZ64EcTjvt4Dt4beNIhELpTU",
+        "ext": ".png",
+        "mime": "image/png",
+        "size": "6.57",
+        "url": "/uploads/1660b11229e7473b90f99a9f9afe7675.png",
+        "provider": "local",
+        "public_id": null,
+        "created_at": "2019-09-06T11:25:49.255Z",
+        "updated_at": "2019-09-06T11:25:49.261Z",
+        "related": []
+      }
+    ]
+   */
+  setWorkCover (state, { type, value }) {
+    const [cover] = value
+    state.work.cover_image_url = cover.url
+  },
+  /**
+   * payload: {
+   *  type:   @params {String} "editor/setWorks",
+   *  value:  @params {Array}  work list
+   * }
+   */
+  setWorks (state, { type, value }) {
+    value.sort((a, b) => b.id - a.id)
+    state.works = value
+  },
+  /**
+   * payload: {
+   *  type:   @params {String} "editor/setWorks",
+   *  value:  @params {Array}  work list
+   * }
+   */
+  setWorkTemplates (state, { type, value }) {
+    value.sort((a, b) => b.id - a.id)
+    state.workTemplates = value
+  },
+  setWork (state, work) {
+    window.__work = work
+    work.pages = work.pages.map(page => {
+      page.elements = page.elements.map(element => new Element(element))
+      return new Page(page)
+    })
+    state.work = new Work(work)
+  },
+  previewWork (state, { type, value }) {},
+  deployWork (state, { type, value }) {},
+  formDetailOfWork (state, { type, value }) {
+    state.formDetailOfWork = value
+  }
+}
@@ -6,52 +6,6 @@
 @import url("./page-manager.scss");
 @import url("./canvas-wrapper.scss");
-#luban-editor-layout,
-#luban-work-manager-layout  {
-  .header {
-    padding: 0 10px;
-
-    .logo {
-      width: 120px;
-      height: 31px;
-      // background: rgba(255,255,255,.2);
-      margin: 16px 28px 16px 0;
-      float: left;
-
-      line-height: 31px;
-      text-align: center;
-      color: white;
-      font-size: 16px;
-    }
-
-    .lang-select-activator,
-    .user-avatar-activator {
-      float: right;
-      background: transparent;
-      margin: 0 28px 16px 0;
-      cursor: pointer;
-
-      .anticon {
-        color: white;
-      }
-    }
-  }
-
-  #props-edit-form {
-    .ant-form-item {
-      margin-bottom: 12px;
-    }
-  }
-
-  .card-cover-wrapper {
-    position: relative;
-    height: 300px;
-    border: 1px dashed #eee;
-    color: #aaa;
-    padding: 4px;
-  }
-}
-
 .hidden {
   display: none !important;
 }
@@ -84,7 +38,7 @@
 }
 // 动画编辑面板定制
-#animation-edit-panel {
+#animation-right-panel {
   .ant-collapse-header {
     padding: 6px 0 6px 40px;
   }
@@ -180,7 +134,7 @@ $activeHoverColor: #1593ff;
 .adjust-line-wrapper-v {
   position: relative;
-  height: 100%;
+  height: 100vh;
   cursor: ew-resize;
   .adjust-button {
+.props-config-form {
+  .ant-form-item {
+    margin-bottom: 12px;
+  }
+}
 \ No newline at end of file
@@ -3,7 +3,7 @@
  */
 import Spreadsheet from 'x-data-spreadsheet'
-import Parser from '../../../utils/excel-parser'
+import Parser from '@/utils/excel-parser'
 import CsvImport from './csv-import'
 // const getDefaultTableMatrix = () => [
 //   [1, 2, 3, 4],
@@ -2,8 +2,8 @@
  * https://github.com/ly525/luban-h5/issues/138
  */
 import axios from 'axios'
-import ImageItem from '../components/image-item.js'
-import Uploader from '../components/uploader.js'
+import ImageItem from 'core/support/image-gallery/components/image-item.js'
+import Uploader from 'core/support/image-gallery/components/uploader.js'
 export default {
   data: () => ({