refactor: 整理core-editor 文件夹，为后续将编辑器做成独立模块作准备

ly525
1 parent d3c7f6f3
Showing 96 changed files with 756 additions and 646 deletions
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/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
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/editor/left-panel/index.js
front-end/h5/src/components/core/editor/page-manager/index.js → front-end/h5/src/components/core/editor/left-panel/page-manager/index.js
front-end/h5/src/components/core/editor/shortcuts-panel/index.js → front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
front-end/h5/src/components/core/editor/shortcuts-panel/load-npm-plugins.vue → front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/load-npm-plugins.vue
front-end/h5/src/components/core/editor/shortcuts-panel/shortcut-button.js → front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/shortcut-button.js
@@ -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 RenderEditCanvas from './edit'
+import RenderPreviewCanvas from './preview'
+
+export default {
+  name: 'EditorCanvas',
+  data: () => ({
+    isPreviewMode: false,
+    scaleRate: 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
+    }),
+    ...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 hotkeys from 'hotkeys-js'
+import fixedTools from './options'
+
+export default {
+  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 '../../../../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.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 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 Vue from 'vue'
+import 'core/support/index.js'
 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 FixedTools from './fixed-tools/index'
+import EditorRightPanel from './right-panel/index'
+import EditorCanvas from './canvas/index'
+import EditorActionMenu from './header/action-menu'
+import EditorLeftPanel from './left-panel/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 Header from '@/components/common/header/index'
 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') }
-  }
-]
+import AdjustLineV from 'core/support/adjust-line/vertical'
+window.EditorApp = new Vue() // event bus
 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)
-      })
-    })
+    ...mapActions('editor', ['fetchWork']),
+    handlePreview () { this.previewDialogVisible = true }
   },
   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>
+        <Header>
+          <EditorActionMenu slot="action-menu" onPreview={this.handlePreview} />
+        </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>
-
+          <EditorLeftPanel />
+          <EditorCanvas />
+          <AdjustLineV onLineMove={(offset) => { this.propsPanelWidth += offset }} />
+          <FixedTools />
+          <EditorRightPanel width={this.propsPanelWidth} />
         </a-layout>
         {
           <PreviewDialog
@@ -382,17 +56,11 @@ export default {
     )
   },
   created () {
-    // event bus for editor
-    window.getEditorApp = this
     let workId = this.$route.params.workId
     if (workId) {
-      this.fetchWork(workId).then(() => this.setActiveTab('background'))
+      this.fetchWork(workId)
     } 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'
+
+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-tabs>
+      </a-layout-sider>
+    )
+  }
+}
+import { mapState, mapActions } from 'vuex'
+
 export default {
-  props: {
-    pages: {
-      required: false,
-      type: Array,
-      default: () => []
-    },
-    editingPage: {
-      type: Object,
-      default: () => {}
-    }
-  },
   data: () => ({
     hoverIndex: -1, // 显示编辑按钮
     editingTitle: '' // 临时缓存当前编辑的 title，点击 Yes 再真正用其更新 page title
   }),
+  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'
+    ]),
     getTitle (page, index) {
       return page.title || this.$t('editor.pageManager.title', { index })
     },
 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'
+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>
+    )
+  }
+}
 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 '../../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 () {
 /*
  * @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-10 23:27:21
+ * @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 之类的嵌套容器
-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 LbpBackground from '../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 = {}) {
@@ -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 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 '../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'
-import animationMixin from '@/mixins/animation.js'
+import animationMixin from 'core/mixins/animation.js'
 export default {
   mixins: [animationMixin],
@@ -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],
@@ -6,7 +6,7 @@
  * @FilePath: /luban-h5/front-end/h5/src/components/core/support/image-gallery/tabs/pixabay.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 axios from 'axios'
 import ImageItem from '../components/image-item.js'
@@ -2,7 +2,7 @@
  * @Author: ly525
  * @Date: 2019-12-01 18:11:50
  * @LastEditors: ly525
- * @LastEditTime: 2020-10-11 10:09:44
+ * @LastEditTime: 2020-10-11 10:13:29
  * @FilePath: /luban-h5/front-end/h5/src/components/core/support/index.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description:
-import animationMixin from '@/mixins/animation.js'
+import animationMixin from 'core/mixins/animation.js'
 /**
  * #!zh: 上下左右 对应的 东南西北
@@ -6,7 +6,7 @@
  * @FilePath: /luban-h5/front-end/h5/src/components/core/support/video-gallery/tabs/personal.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 axios from 'axios'
 import VideoItem from '../components/video-item.js'
-export const API_ORIGIN = process.env.NODE_ENV === 'production' ? 'https://luban-h5-api.herokuapp.com' : 'http://localhost:1337' // for local dev
@@ -2,7 +2,7 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-10 23:43:42
+ * @LastEditTime: 2020-10-10 23:35:42
  * @FilePath: /luban-h5/front-end/h5/src/engine-entry.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description:
@@ -10,7 +10,7 @@
       构建 engine 页面的入口，作用与 src/main.js 类似，都是页面入口
       作用：作品预览的渲染引擎，原理：遍历 work(作品) 的 pages 以及 elements，显示即可
       使用场景：预览弹窗中预览 和 在手机上查看作品使用
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 import Vue from 'vue'
@@ -18,11 +18,11 @@ import Vue from &#39;vue&#39;
 import message from 'ant-design-vue/lib/message' // 加载 JS
 import 'ant-design-vue/lib/message/style/css' // 加载 CSS
-import { pluginsList } from './mixins/load-plugins.js'
-import { PAGE_MODE } from './constants/work.js'
-import Element from './components/core/models/element'
-import RenderPreview from '@/components/core/editor/canvas/preview'
-import NodeWrapper from '@/components/preview/node-wrapper.js'
+import { pluginsList } from 'core/plugins/index.js'
+import { PAGE_MODE } from 'core/constants/work.js'
+import Element from 'core/models/element'
+import RenderPreview from 'core/editor/canvas/preview'
+import NodeWrapper from 'core/preview/node-wrapper.js'
 Vue.config.productionTip = true
 Vue.prototype.$message = message
@@ -64,7 +64,7 @@ const Engine = {
     renderPreview (pageElements = []) {
       const height = this.isLongPage ? window.__work.height + 'px' : '100%'
       const elements = pageElements.map(element => new Element(element))
-      // src/components/core/editor/canvas/preview
+      // src//core/editor/canvas/preview
       return <RenderPreview elements={elements} height={height} />
     },
     getContainerStyle (work) {
@@ -81,7 +81,7 @@ export default {
         animation: 'Animation',
         action: 'Action',
         script: 'Script',
-        background: 'Background'
+        page: 'Page'
       },
       animation: {
         add: 'Add',
@@ -6,7 +6,7 @@
  * @FilePath: /luban-h5/front-end/h5/src/locales/lang/zh-CN.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
  */
 export default {
   app: {
@@ -90,7 +90,7 @@ export default {
         animation: '动画',
         action: '动作',
         script: '脚本',
-        background: '背景'
+        page: '页面'
       },
       animation: {
         add: '添加动画',
 // initial state
-import Work from '../../components/core/models/work'
+import Work from 'core/models/work'
 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'
-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)
@@ -6,7 +6,7 @@
  * @FilePath: /luban-h5/front-end/h5/src/store/modules/loading.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: loading module
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  */
 // initial state
 const state = {
@@ -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 = {
-import Element from '../../components/core/models/element'
-import strapi from '../../utils/strapi'
-import Page from '../../components/core/models/page'
-import Work from '../../components/core/models/work'
-import { AxiosWrapper } from '../../utils/http.js'
+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'
+import { takeScreenshot } from '@/utils/canvas-helper.js'
 function setLoading (commit, loadingName, isLoading) {
   commit('loading/update', { type: loadingName, payload: isLoading }, { root: true })
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
 <script>
-import CoreEditor from '../components/core/editor/index.js'
-import loadPluginMixin from '../mixins/load-plugins.js'
-import '../components/core/support/index.js'
-
+import CoreEditor from 'core/editor/index.js'
 export default {
-  extends: CoreEditor,
-  mixins: [loadPluginMixin]
+  render () {
+    return (
+      <CoreEditor />
+    )
+  }
 }
 </script>
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
+  name: 'home'
 }
 </script>
@@ -8,7 +8,7 @@
  * @Description:
     #!zh: 某个作品的的表单统计页
     #!en: forms for the work
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  -->
 <script>
@@ -5,7 +5,7 @@
  * @LastEditTime : 2019-12-21 19:19:38
  * @FilePath: /luban-h5/front-end/h5/src/views/work-manager/form-stat/index.vue
  * @Github: https://github.com/ly525/luban-h5
- * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
  * @Description:
     #!zh: [基础数据页面](/work-manager/form-stat) 对应的页面
     #!en: [basic data page](/work-manager/form-stat)
 <script>
 // import PreView from '@/pages/preview';
 // import Sidebar from './components/sidebar.vue'
-import '@/components/core/styles/index.scss'
+import 'core/styles/index.scss'
 import LogoOfHeader from '@/components/common/header/logo.js'
-import ExternalLinksOfHeader from '@/components/common/header/links.js'
+import Header from '@/components/common/header/index'
+import Links from '@/components/common/header/links.js'
 import LangSelect from '@/components/common/header/LangSelect.vue'
 const sidebarMenus = [
@@ -50,7 +51,7 @@ const sidebarMenus = [
     ]
   },
   {
-    label: '账号中心',
+    label: '商家中心',
     i18nLabel: 'sidebar.accountCenter',
     value: 'freeTemplate',
     antIcon: 'appstore',
@@ -63,59 +64,79 @@ export default {
     // PreView,
     // Sidebar
     LogoOfHeader,
-    ExternalLinksOfHeader,
+    Links,
     LangSelect
   },
   methods: {
     renderSidebar (menus) {
       // const renderLabel = menu => menu.routerName ? <router-link class="default-router-link" to={{ name: menu.routerName }}>{menu.label}</router-link> : menu.label
-      const renderLabel = menu => menu.routerName ? <router-link class="default-router-link" to={{ name: menu.routerName }}>{this.$t(menu.i18nLabel)}</router-link> : this.$t(menu.i18nLabel)
+      const renderLabel = menu =>
+        menu.routerName ? (
+          <router-link
+            class="default-router-link"
+            to={{ name: menu.routerName }}
+          >
+            {this.$t(menu.i18nLabel)}
+          </router-link>
+        ) : (
+          this.$t(menu.i18nLabel)
+        )
-      return menus.map(menu => (
-        menu.children
-          ? (
-            <a-sub-menu key={menu.key}>
-              {/** <span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span> */}
-              <span slot="title"><a-icon type={menu.antIcon} />{this.$t(menu.i18nLabel)}</span>
-              {
-                (menu.children).map(submenu => (
-                  <a-menu-item key={submenu.key}>{renderLabel(submenu)}</a-menu-item>
-                ))
-              }
-            </a-sub-menu>
-          )
-          : (
-            <a-menu-item key={menu.key}>
-              <a-icon type={menu.antIcon}></a-icon>
-              {/** 这边有个疑惑，不知是否为 antd-vue 的 bug，需要用 span 包裹，否则不会显示 label */}
-              <span>{renderLabel(menu)}</span>
-            </a-menu-item>
-          )
-      ))
+      return menus.map(menu =>
+        menu.children ? (
+          <a-sub-menu key={menu.key}>
+            {/** <span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span> */}
+            <span slot="title">
+              <a-icon type={menu.antIcon} />
+              {this.$t(menu.i18nLabel)}
+            </span>
+            {menu.children.map(submenu => (
+              <a-menu-item key={submenu.key}>
+                {renderLabel(submenu)}
+              </a-menu-item>
+            ))}
+          </a-sub-menu>
+        ) : (
+          <a-menu-item key={menu.key}>
+            <a-icon type={menu.antIcon}></a-icon>
+            {/** 这边有个疑惑，不知是否为 antd-vue 的 bug，需要用 span 包裹，否则不会显示 label */}
+            <span>{renderLabel(menu)}</span>
+          </a-menu-item>
+        )
+      )
     }
   },
   render (h) {
     return (
-      <a-layout id="luban-work-manager-layout" style={{ height: '100vh' }}>
-        <a-layout-header class="header">
-          <LogoOfHeader />
-          <LangSelect style="float: right;cursor: pointer;" />
-          {/* we can also put the plugins shortcuts here */}
-          <a-dropdown>
-            <a-menu slot="overlay" onClick={() => {}}>
+      <a-layout style={{ height: '100vh' }}>
+        <Header>
+          <a-dropdown slot="action-menu" style="margin-right: 12px;">
+            <a-menu
+              slot="overlay"
+              onClick={e => {
+                if (!e.key === 3) {
+                  this.$router.push(`/login`)
+                }
+              }}
+            >
               <a-menu-item key="1">
                 <span>someone@luban</span>
               </a-menu-item>
               <a-menu-divider />
-              <a-menu-item key="2"><a-icon type="setting" />账号设置</a-menu-item>
-              <a-menu-item key="3"><a-icon type="logout" />退出登录</a-menu-item>
+              <a-menu-item key="2">
+                <a-icon type="setting" />
+                账号设置
+              </a-menu-item>
+              <a-menu-item key="3">
+                <a-icon type="logout" />
+                退出登录
+              </a-menu-item>
             </a-menu>
             <a class="user-avatar-activator" href="#">
-              <a-icon type="user"/>
+              <a-icon type="user" />
             </a>
           </a-dropdown>
-          <ExternalLinksOfHeader />
-        </a-layout-header>
+        </Header>
         <a-layout>
           <a-layout-sider width="160" style="background: #fff">
             <a-menu
@@ -134,7 +155,8 @@ export default {
           </a-layout>
         </a-layout>
         {/** <PreviewDialog visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} /> */}
-      </a-layout>)
+      </a-layout>
+    )
   }
 }
 </script>
@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex'
 import QRCode from 'qrcode'
-import PreviewDialog from '@/components/core/editor/modals/preview.vue'
+import PreviewDialog from 'core/editor/modals/preview.vue'
 import CardCover from '@/components/common/work/card-cover.js'
 const ListItemCard = {
@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex'
 import QRCode from 'qrcode'
-import PreviewDialog from '@/components/core/editor/modals/preview.vue'
+import PreviewDialog from 'core/editor/modals/preview.vue'
 import CardCover from '@/components/common/work/card-cover.js'
 const ListItemCard = {
@@ -2,11 +2,11 @@
  * @Author: ly525
  * @Date: 2019-12-14 22:43:55
  * @LastEditors: ly525
- * @LastEditTime : 2020-01-15 08:35:17
+ * @LastEditTime: 2020-10-10 23:31:21
  * @FilePath: /luban-h5/front-end/h5/vue.config.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
  */
 const path = require('path')
 // const isProd = process.env.NODE_ENV === 'production'
@@ -38,7 +38,8 @@ switch (process.env.PAGE) {
 const configureWebpack = {
   resolve: {
     alias: {
-      '@': path.join(__dirname, 'src')
+      '@': path.join(__dirname, 'src'),
+      'core': path.join(__dirname, 'src/components/core')
     }
   }
 }
@@ -51,7 +52,7 @@ module.exports = {
   pages: { index: page },
   devServer: {
     proxy: {
-      '^/upload|content-manager|users-permissions|works|admin|psd-files|workforms|third-libs|engine-assets/': {
+      '^/auth|upload|content-manager|users-permissions|works|admin|psd-files|workforms|third-libs|engine-assets/': {
         target,
         changeOrigin: true,
         ws: false