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

ly525 · Oct 11, 2020 · d823870 · d823870
1 parent d3c7f6f
commit d823870
Show file tree

Hide file tree

Showing 96 changed files with 756 additions and 646 deletions.
diff --git a/front-end/h5/public/index.html b/front-end/h5/public/index.html
@@ -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">

diff --git a/front-end/h5/src/App.vue b/front-end/h5/src/App.vue
@@ -1,9 +1,5 @@
 <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>

diff --git a/front-end/h5/src/components/common/header/LangSelect.vue b/front-end/h5/src/components/common/header/LangSelect.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import langMixin from '@/mixins/i18n'
+import langMixin from 'core/mixins/i18n'
 
 export default {
   name: 'LangSelect',

diff --git a/front-end/h5/src/components/common/header/index.vue b/front-end/h5/src/components/common/header/index.vue
@@ -0,0 +1,51 @@
+<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>
diff --git a/front-end/h5/src/components/common/header/links.js b/front-end/h5/src/components/common/header/links.js
@@ -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交流群">

diff --git a/front-end/h5/src/components/common/work/card-cover.js b/front-end/h5/src/components/common/work/card-cover.js
@@ -1,14 +1,15 @@
 /*
  * @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 {

diff --git a/front-end/h5/src/components/common/work/card-cover.scss b/front-end/h5/src/components/common/work/card-cover.scss
@@ -0,0 +1,7 @@
+.card-cover-wrapper {
+  position: relative;
+  height: 300px;
+  border: 1px dashed #eee;
+  color: #aaa;
+  padding: 4px;
+}
diff --git a/front-end/h5/src/constants/animation.js → ...rc/components/core/constants/animation.js b/front-end/h5/src/constants/animation.js → ...rc/components/core/constants/animation.js
diff --git a/front-end/h5/src/constants/work.js → .../h5/src/components/core/constants/work.js b/front-end/h5/src/constants/work.js → .../h5/src/components/core/constants/work.js
diff --git a/front-end/h5/src/components/core/editor/canvas/index.js b/front-end/h5/src/components/core/editor/canvas/index.js
@@ -0,0 +1,76 @@
+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>
+    )
+  }
+}
diff --git a/front-end/h5/src/components/core/editor/canvas/preview.js b/front-end/h5/src/components/core/editor/canvas/preview.js
@@ -1,4 +1,4 @@
-import NodeWrapper from '@/components/preview/node-wrapper.js'
+import NodeWrapper from 'core/preview/node-wrapper.js'
 /**
  * 预览模块
  * preview h5 work module

diff --git a/front-end/h5/src/components/core/editor/fixed-tools/index.js b/front-end/h5/src/components/core/editor/fixed-tools/index.js
@@ -0,0 +1,51 @@
+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)
+      })
+    })
+  }
+}
diff --git a/front-end/h5/src/components/core/editor/fixed-tools/options.js b/front-end/h5/src/components/core/editor/fixed-tools/options.js
@@ -0,0 +1,62 @@
+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