Commit d8238705054d4c6a174d5e2a48ecc11bd1f16a30

Authored by ly525
1 parent d3c7f6f3

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

Showing 96 changed files with 756 additions and 646 deletions
front-end/h5/public/index.html
... ... @@ -6,7 +6,7 @@
6 6 * @FilePath: /luban-h5/front-end/h5/public/index.html
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 -->
11 11 <!DOCTYPE html>
12 12 <html lang="en">
... ...
front-end/h5/src/App.vue
1 1 <template>
2 2 <div id="app">
3   - <!-- <div id="nav">
4   - <router-link to="/">Home</router-link> |
5   - <router-link to="/about">About</router-link>
6   - </div> -->
7 3 <router-view/>
8 4 </div>
9 5 </template>
... ...
front-end/h5/src/components/common/header/LangSelect.vue
... ... @@ -20,7 +20,7 @@
20 20 </template>
21 21  
22 22 <script>
23   -import langMixin from '@/mixins/i18n'
  23 +import langMixin from 'core/mixins/i18n'
24 24  
25 25 export default {
26 26 name: 'LangSelect',
... ...
front-end/h5/src/components/common/header/index.vue 0 → 100644
  1 +<template>
  2 + <a-layout-header class="layout-header">
  3 + <LogoOfHeader />
  4 + <div style="float:right;">
  5 + <Links />
  6 + <slot name="action-menu"></slot>
  7 + <LangSelect />
  8 + </div>
  9 + </a-layout-header>
  10 +</template>
  11 +<script>
  12 +import LogoOfHeader from './logo.js'
  13 +import LangSelect from './LangSelect'
  14 +import Links from './links'
  15 +export default {
  16 + name: 'Header',
  17 + components: {
  18 + LogoOfHeader,
  19 + LangSelect,
  20 + Links
  21 + }
  22 +}
  23 +</script>
  24 +<style lang="scss" scoped>
  25 +.layout-header {
  26 + padding: 0 10px;
  27 + .logo {
  28 + width: 120px;
  29 + height: 31px;
  30 + margin: 16px 28px 16px 0;
  31 + float: left;
  32 +
  33 + line-height: 31px;
  34 + text-align: center;
  35 + color: white;
  36 + font-size: 16px;
  37 + }
  38 +
  39 + .lang-select-activator,
  40 + .user-avatar-activator {
  41 + // float: right;
  42 + background: transparent;
  43 + margin: 0 28px 16px 0;
  44 + cursor: pointer;
  45 +
  46 + .anticon {
  47 + color: white;
  48 + }
  49 + }
  50 +}
  51 +</style>
... ...
front-end/h5/src/components/common/header/links.js
... ... @@ -10,7 +10,7 @@ export default {
10 10 theme="dark"
11 11 mode="horizontal"
12 12 defaultSelectedKeys={['2']}
13   - style={{ lineHeight: '64px', display: 'inline-block', float: 'right' }}
  13 + style={{ lineHeight: '64px', display: 'inline-block' }}
14 14 >
15 15 <a-menu-item key="dingtalk" >
16 16 <a-popover title="👨🏻‍💻👩🏻‍💻欢迎加入鲁班-H5交流群">
... ...
front-end/h5/src/components/common/work/card-cover.js
1 1 /*
2 2 * @Author: ly525
3 3 * @Date: 2019-12-01 18:11:49
4   - * @LastEditors : ly525
5   - * @LastEditTime : 2020-01-04 13:51:26
  4 + * @LastEditors: ly525
  5 + * @LastEditTime: 2020-10-10 23:29:06
6 6 * @FilePath: /luban-h5/front-end/h5/src/components/common/work/card-cover.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import placeholderImg from '@/assets/lbp-picture-placeholder.png'
  12 +import './card-cover.scss'
12 13  
13 14 function getDefaultStyle (img, isPlaceholder) {
14 15 return {
... ...
front-end/h5/src/components/common/work/card-cover.scss 0 → 100644
  1 +.card-cover-wrapper {
  2 + position: relative;
  3 + height: 300px;
  4 + border: 1px dashed #eee;
  5 + color: #aaa;
  6 + padding: 4px;
  7 +}
0 8 \ No newline at end of file
... ...
front-end/h5/src/constants/animation.js renamed to front-end/h5/src/components/core/constants/animation.js
front-end/h5/src/constants/work.js renamed to front-end/h5/src/components/core/constants/work.js
front-end/h5/src/components/core/editor/canvas/index.js 0 → 100644
  1 +import { mapState, mapActions } from 'vuex'
  2 +
  3 +import RenderEditCanvas from './edit'
  4 +import RenderPreviewCanvas from './preview'
  5 +
  6 +export default {
  7 + name: 'EditorCanvas',
  8 + data: () => ({
  9 + isPreviewMode: false,
  10 + scaleRate: 1
  11 + }),
  12 + computed: {
  13 + ...mapState('editor', {
  14 + editingPage: state => state.editingPage,
  15 + editingElement: state => state.editingElement,
  16 + elements: state => state.editingPage.elements,
  17 + pages: state => state.work.pages,
  18 + work: state => state.work
  19 + }),
  20 + ...mapState('loading', [
  21 + 'saveWork_loading',
  22 + 'previewWork_loading',
  23 + 'setWorkAsTemplate_loading',
  24 + 'uploadWorkCover_loading'
  25 + ])
  26 + },
  27 + methods: {
  28 + ...mapActions('editor', [
  29 + 'elementManager',
  30 + 'pageManager',
  31 + 'saveWork',
  32 + 'createWork',
  33 + 'fetchWork',
  34 + 'updateWork',
  35 + 'setWorkAsTemplate',
  36 + 'setEditingElement',
  37 + 'setEditingPage'
  38 + ]),
  39 + handleToggleMode (isPreviewMode) {
  40 + this.isPreviewMode = isPreviewMode
  41 + if (isPreviewMode) {
  42 + // 当切换到预览模式的时候,清空当前编辑元素
  43 + this.setEditingElement() // 相当于 setEditingElement(null)
  44 + }
  45 + }
  46 + },
  47 + render (h) {
  48 + return (
  49 + <a-layout id="canvas-outer-wrapper">
  50 + <a-radio-group
  51 + class="mode-toggle-wrapper"
  52 + size="small"
  53 + value={this.isPreviewMode}
  54 + onInput={this.handleToggleMode}
  55 + >
  56 + {/* 编辑模式、预览模式 */}
  57 + <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
  58 + <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
  59 + </a-radio-group>
  60 + <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
  61 + <div class='canvas-wrapper' style={{
  62 + height: `${this.work.height}px`
  63 + }}>
  64 + { this.isPreviewMode
  65 + ? <RenderPreviewCanvas elements={this.elements}/>
  66 + : <RenderEditCanvas
  67 + class="edit-mode"
  68 + elements={this.elements}
  69 + />
  70 + }
  71 + </div>
  72 + </a-layout-content>
  73 + </a-layout>
  74 + )
  75 + }
  76 +}
... ...
front-end/h5/src/components/core/editor/canvas/preview.js
1   -import NodeWrapper from '@/components/preview/node-wrapper.js'
  1 +import NodeWrapper from 'core/preview/node-wrapper.js'
2 2 /**
3 3 * 预览模块
4 4 * preview h5 work module
... ...
front-end/h5/src/components/core/editor/fixed-tools/index.js 0 → 100644
  1 +import hotkeys from 'hotkeys-js'
  2 +import fixedTools from './options'
  3 +
  4 +export default {
  5 + render () {
  6 + return (
  7 + <a-layout-sider
  8 + width="40"
  9 + theme='light'
  10 + style={{ background: '#fff', border: '1px solid #eee' }}
  11 + >
  12 + <a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
  13 + {
  14 + fixedTools.map(tool => (
  15 + <a-tooltip
  16 + effect="dark"
  17 + placement="left"
  18 + title={this.$t(tool.i18nTooltip, { hotkey: tool.hotkeyTooltip })}>
  19 + <a-button
  20 + block
  21 + class="transparent-bg"
  22 + type="link"
  23 + size="small"
  24 + style={{ height: '40px', color: '#000' }}
  25 + disabled={!!tool.disabled}
  26 + onClick={() => tool.action && tool.action.call(this)}
  27 + >
  28 + {
  29 + tool.icon
  30 + ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true' />
  31 + : (tool.text || this.$t(tool.i18nTooltip))
  32 + }
  33 + </a-button>
  34 + { tool.icon === 'minus' && <div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div>}
  35 + </a-tooltip>
  36 + ))
  37 + }
  38 + </a-button-group>
  39 + </a-layout-sider>
  40 + )
  41 + },
  42 + mounted () {
  43 + fixedTools.map(tool => {
  44 + tool.hotkey && hotkeys(tool.hotkey, { splitKey: '&' }, (event, handler) => {
  45 + event.preventDefault()
  46 + event.stopPropagation()
  47 + tool.action && tool.action.call(this)
  48 + })
  49 + })
  50 + }
  51 +}
... ...
front-end/h5/src/components/core/editor/fixed-tools/options.js 0 → 100644
  1 +import undoRedoHistory from '../../../../store/plugins/undo-redo/History'
  2 +
  3 +const fixedTools = [
  4 + {
  5 + i18nTooltip: 'editor.fixedTool.undo',
  6 + icon: 'mail-reply',
  7 + action: () => undoRedoHistory.undo(),
  8 + hotkey: 'ctrl&z,⌘&z',
  9 + hotkeyTooltip: '(ctrl+z)'
  10 + },
  11 + {
  12 + i18nTooltip: 'editor.fixedTool.redo',
  13 + icon: 'mail-forward',
  14 + action: () => undoRedoHistory.redo(),
  15 + hotkey: 'ctrl&y,⌘&u',
  16 + hotkeyTooltip: '(ctrl+y)'
  17 + },
  18 + {
  19 + i18nTooltip: 'editor.fixedTool.preview',
  20 + icon: 'eye',
  21 + action: function () { this.previewDialogVisible = true }
  22 + },
  23 + {
  24 + i18nTooltip: 'editor.fixedTool.copyCurrentPage',
  25 + icon: 'copy',
  26 + action: function () { this.pageManager({ type: 'copy' }) },
  27 + hotkey: 'ctrl&c,⌘&c'
  28 + },
  29 + {
  30 + i18nTooltip: 'editor.fixedTool.copyCurrentElement',
  31 + icon: 'copy',
  32 + action: function () { this.elementManager({ type: 'copy' }) }
  33 + },
  34 + {
  35 + i18nTooltip: 'editor.fixedTool.importPSD',
  36 + text: 'Ps',
  37 + icon: '', // 优先级: icon > text > i18nTooltip
  38 + action: '',
  39 + disabled: true
  40 + },
  41 + {
  42 + i18nTooltip: 'editor.fixedTool.zoomOut',
  43 + icon: 'plus',
  44 + action: function () { this.scaleRate += 0.25 },
  45 + hotkey: 'ctrl&=,⌘&=',
  46 + hotkeyTooltip: '(ctrl +)'
  47 + },
  48 + {
  49 + i18nTooltip: 'editor.fixedTool.zoomIn',
  50 + icon: 'minus',
  51 + action: function () { this.scaleRate -= 0.25 },
  52 + hotkey: 'ctrl&-,⌘&-',
  53 + hotkeyTooltip: '(ctrl -)'
  54 + },
  55 + {
  56 + i18nTooltip: 'editor.fixedTool.issues',
  57 + icon: 'question',
  58 + action: function () { window.open('https://github.com/ly525/luban-h5/issues/110') }
  59 + }
  60 +]
  61 +
  62 +export default fixedTools
... ...
front-end/h5/src/components/core/editor/header/action-menu.js 0 → 100644
  1 +import { mapState, mapActions } from 'vuex'
  2 +
  3 +export default {
  4 + name: 'EditorActionMenu',
  5 + data: () => ({
  6 + previewDialogVisible: false,
  7 + propsPanelWidth: 320
  8 + }),
  9 + computed: {
  10 + ...mapState('editor', {
  11 + editingPage: state => state.editingPage,
  12 + editingElement: state => state.editingElement,
  13 + elements: state => state.editingPage.elements,
  14 + pages: state => state.work.pages,
  15 + work: state => state.work
  16 + }),
  17 + ...mapState('loading', [
  18 + 'saveWork_loading',
  19 + 'previewWork_loading',
  20 + 'setWorkAsTemplate_loading',
  21 + 'uploadWorkCover_loading'
  22 + ])
  23 + },
  24 + methods: {
  25 + ...mapActions('editor', [
  26 + 'elementManager',
  27 + 'pageManager',
  28 + 'saveWork',
  29 + 'createWork',
  30 + 'fetchWork',
  31 + 'updateWork',
  32 + 'setWorkAsTemplate',
  33 + // 'setEditingElement',
  34 + 'setEditingPage'
  35 + ]),
  36 + ...mapActions('loading', {
  37 + updateLoading: 'update'
  38 + }),
  39 + handlePreview () {
  40 + this.saveWork({ loadingName: 'previewWork_loading' }).then(() => {
  41 + this.$emit('preview')
  42 + // this.previewDialogVisible = true
  43 + })
  44 + },
  45 + handleSave () {
  46 + this.saveWork({ isSaveCover: true })
  47 + },
  48 + handlePublish () {
  49 + this.updateWork({ is_publish: true })
  50 + this.saveWork({ successMsg: '发布成功' })
  51 + },
  52 + handleSetAsTemplate () {
  53 + this.updateLoading({ type: 'setWorkAsTemplate_loading', value: true })
  54 + this.saveWork().then(() => {
  55 + this.setWorkAsTemplate()
  56 + })
  57 + },
  58 + handleSelectItem ({ key }) {
  59 + switch (key) {
  60 + case 'setAsTemplate':
  61 + this.handleSetAsTemplate()
  62 + }
  63 + }
  64 + },
  65 + render (h) {
  66 + return (
  67 + <a-menu
  68 + slot="action-menu"
  69 + theme="dark"
  70 + mode="horizontal"
  71 + defaultSelectedKeys={['2']}
  72 + style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
  73 + >
  74 + {/* 保存、预览、发布、设置为模板 */}
  75 + <a-menu-item key="1" class="transparent-bg">
  76 + <a-button
  77 + type="primary"
  78 + size="small"
  79 + onClick={this.handlePreview}
  80 + loading={this.previewWork_loading}
  81 + >{this.$t('editor.header.preview')}</a-button>
  82 + </a-menu-item>
  83 + <a-menu-item key="2" class="transparent-bg">
  84 + <a-button
  85 + size="small"
  86 + onClick={this.handleSave}
  87 + loading={this.saveWork_loading || this.uploadWorkCover_loading}
  88 + >{this.$t('editor.header.save')}</a-button>
  89 + </a-menu-item>
  90 + {/* <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item> */}
  91 + <a-menu-item key="3" class="transparent-bg">
  92 + <a-dropdown-button
  93 + size="small"
  94 + onClick={this.handlePublish}
  95 + loading={this.saveWork_loading || this.uploadWorkCover_loading}
  96 + >
  97 + {this.$t('editor.header.publish') /* 发布 */}
  98 + <a-menu slot="overlay" onClick={this.handleSelectItem}>
  99 + <a-menu-item key="setAsTemplate">
  100 + <a-spin spinning={this.setWorkAsTemplate_loading} size="small">
  101 + {/* 设置为模板 */}
  102 + <a-icon type="cloud-upload" />{this.$t('editor.header.setAsTemplate')}
  103 + </a-spin>
  104 + </a-menu-item>
  105 + {/* <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item> */}
  106 + {/* <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item> */}
  107 + </a-menu>
  108 + </a-dropdown-button>
  109 + </a-menu-item>
  110 + </a-menu>
  111 + )
  112 + }
  113 +}
... ...
front-end/h5/src/components/core/editor/index.js
1 1 import { mapState, mapActions } from 'vuex'
2   -import hotkeys from 'hotkeys-js'
3   -import undoRedoHistory from '../../../store/plugins/undo-redo/History'
  2 +import Vue from 'vue'
4 3  
  4 +import 'core/support/index.js'
5 5 import '../styles/index.scss'
6 6 import 'animate.css'
7 7  
8   -import RenderEditCanvas from './canvas/edit'
9   -import RenderPreviewCanvas from './canvas/preview'
10   -import RenderPropsEditor from './edit-panel/props'
11   -import RenderScriptEditor from './edit-panel/script'
12   -import RenderAnimationEditor from './edit-panel/animation'
13   -import RenderActionEditor from './edit-panel/action'
14   -import RenderBackgroundEditor from './edit-panel/background'
15   -import RenderShortcutsPanel from './shortcuts-panel/index'
16   -import RenderPageManager from './page-manager/index'
  8 +import FixedTools from './fixed-tools/index'
  9 +import EditorRightPanel from './right-panel/index'
  10 +import EditorCanvas from './canvas/index'
  11 +import EditorActionMenu from './header/action-menu'
  12 +import EditorLeftPanel from './left-panel/index'
17 13 import PreviewDialog from './modals/preview.vue'
18   -
19   -import LogoOfHeader from '@/components/common/header/logo.js'
20   -import ExternalLinksOfHeader from '@/components/common/header/links.js'
21   -import LangSelect from '@/components/common/header/LangSelect.vue'
  14 +import Header from '@/components/common/header/index'
22 15 import Feedback from '@/components/common/feedback/index'
23   -import AdjustLineV from '@/components/core/support/adjust-line/vertical'
24   -
25   -import DragMixin from './drag-mixin'
26   -
27   -const fixedTools = [
28   - {
29   - i18nTooltip: 'editor.fixedTool.undo',
30   - icon: 'mail-reply',
31   - action: () => undoRedoHistory.undo(),
32   - hotkey: 'ctrl&z,⌘&z',
33   - hotkeyTooltip: '(ctrl+z)'
34   - },
35   - {
36   - i18nTooltip: 'editor.fixedTool.redo',
37   - icon: 'mail-forward',
38   - action: () => undoRedoHistory.redo(),
39   - hotkey: 'ctrl&y,⌘&u',
40   - hotkeyTooltip: '(ctrl+y)'
41   - },
42   - {
43   - i18nTooltip: 'editor.fixedTool.preview',
44   - icon: 'eye',
45   - action: function () { this.previewDialogVisible = true }
46   - },
47   - {
48   - i18nTooltip: 'editor.fixedTool.copyCurrentPage',
49   - icon: 'copy',
50   - action: function () { this.pageManager({ type: 'copy' }) },
51   - hotkey: 'ctrl&c,⌘&c'
52   - },
53   - {
54   - i18nTooltip: 'editor.fixedTool.copyCurrentElement',
55   - icon: 'copy',
56   - action: function () { this.elementManager({ type: 'copy' }) }
57   - },
58   - {
59   - i18nTooltip: 'editor.fixedTool.importPSD',
60   - text: 'Ps',
61   - icon: '', // 优先级: icon > text > i18nTooltip
62   - action: '',
63   - disabled: true
64   - },
65   - {
66   - i18nTooltip: 'editor.fixedTool.zoomOut',
67   - icon: 'plus',
68   - action: function () { this.scaleRate += 0.25 },
69   - hotkey: 'ctrl&=,⌘&=',
70   - hotkeyTooltip: '(ctrl +)'
71   - },
72   - {
73   - i18nTooltip: 'editor.fixedTool.zoomIn',
74   - icon: 'minus',
75   - action: function () { this.scaleRate -= 0.25 },
76   - hotkey: 'ctrl&-,⌘&-',
77   - hotkeyTooltip: '(ctrl -)'
78   - },
79   - {
80   - i18nTooltip: 'editor.fixedTool.issues',
81   - icon: 'question',
82   - action: function () { window.open('https://github.com/ly525/luban-h5/issues/110') }
83   - }
84   -]
  16 +import AdjustLineV from 'core/support/adjust-line/vertical'
85 17  
  18 +window.EditorApp = new Vue() // event bus
86 19 export default {
87   - mixins: [DragMixin],
88 20 name: 'Editor',
89   - components: {
90   - LogoOfHeader,
91   - ExternalLinksOfHeader,
92   - LangSelect
93   - },
94 21 data: () => ({
95   - activeMenuKey: 'pluginList',
96   - isPreviewMode: false,
97   - activeTabKey: '属性',
98 22 previewDialogVisible: false,
99   - scaleRate: 1,
100 23 propsPanelWidth: 320
101 24 }),
102 25 computed: {
103 26 ...mapState('editor', {
104   - editingPage: state => state.editingPage,
105   - editingElement: state => state.editingElement,
106   - elements: state => state.editingPage.elements,
107   - pages: state => state.work.pages,
108 27 work: state => state.work
109   - }),
110   - ...mapState('loading', [
111   - 'saveWork_loading',
112   - 'previewWork_loading',
113   - 'setWorkAsTemplate_loading',
114   - 'uploadWorkCover_loading'
115   - ])
  28 + })
116 29 },
117 30 methods: {
118   - ...mapActions('editor', [
119   - 'elementManager',
120   - 'pageManager',
121   - 'saveWork',
122   - 'createWork',
123   - 'fetchWork',
124   - 'updateWork',
125   - 'setWorkAsTemplate',
126   - 'setEditingElement',
127   - 'setEditingPage'
128   - ]),
129   - ...mapActions('loading', {
130   - updateLoading: 'update'
131   - }),
132   - /**
133   - * !#zh 点击插件,copy 其基础数据到组件树(中间画布)
134   - * #!en click the plugin shortcut, create new Element with the plugin's meta data
135   - * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
136   - *
137   - * shortcutItem: PluginListItem = {
138   - name: String,
139   - shortcutProps: {}
140   - }
141   - */
142   - clone (shortcutItem) {
143   - this.elementManager({
144   - type: 'add',
145   - value: shortcutItem
146   - })
147   - },
148   - /**
149   - * #!zh: 设置 背景图tab 作为 active tab
150   - * #!en: set background(bg) tab as active tab
151   - */
152   - setActiveTab (activeTabKey) {
153   - this.activeTabKey = activeTabKey
154   - },
155   - _renderMenuContent () {
156   - return (
157   - <a-tabs
158   - style="height: 100%;"
159   - tabBarGutter={10}
160   - >
161   - <a-tab-pane key="plugin-list" tab={this.$t('editor.sidebar.components')}>
162   - <div class="plugin-usage-tip ">
163   - <a-icon type="info-circle" />
164   - {/* <span class="ml-1">使用提示: <strong>点击</strong>组件即可</span> */}
165   - {/* Tip: just click on component */}
166   - <i18n path="editor.tip.componentUsage" tag="span" class="ml-1">
167   - <strong>{ this.$t('editor.tip.click') }</strong>{ this.$t('editor.tip.click') }
168   - </i18n>
169   - </div>
170   - <RenderShortcutsPanel
171   - pluginsList={this.pluginsList}
172   - handleClickShortcut={this.clone}
173   - handleDragStart={this.handleDragStartFromMixin}
174   - />
175   - </a-tab-pane>
176   - <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
177   - <RenderPageManager
178   - pages={this.pages}
179   - editingPage={this.editingPage}
180   - onSelectMenuItem={(menuKey) => {
181   - this.pageManager({ type: menuKey })
182   - }}
183   - onEditTitle={({ pageIndexForEditingTitle, newTitle }) => {
184   - this.pageManager({ type: 'editTitle', value: { pageIndexForEditingTitle, newTitle } })
185   - this.saveWork({ isSaveCover: false })
186   - }}
187   - onSelectPage={(pageIndex) => { this.setEditingPage(pageIndex) }}
188   - />
189   - </a-tab-pane>
190   - </a-tabs>
191   - )
192   - },
193   - handlePreview () {
194   - this.saveWork({ loadingName: 'previewWork_loading' }).then(() => {
195   - this.previewDialogVisible = true
196   - })
197   - },
198   - handleSave () {
199   - this.saveWork({ isSaveCover: true })
200   - },
201   - handlePublish () {
202   - this.updateWork({ is_publish: true })
203   - this.saveWork({ successMsg: '发布成功' })
204   - }
205   - },
206   - mounted () {
207   - fixedTools.map(tool => {
208   - tool.hotkey && hotkeys(tool.hotkey, { splitKey: '&' }, (event, handler) => {
209   - event.preventDefault()
210   - event.stopPropagation()
211   - tool.action && tool.action.call(this)
212   - })
213   - })
  31 + ...mapActions('editor', ['fetchWork']),
  32 + handlePreview () { this.previewDialogVisible = true }
214 33 },
215 34 render (h) {
216 35 return (
217   - <a-layout id="luban-editor-layout" style={{ height: '100vh' }}>
218   - <a-layout-header class="header">
219   - <LogoOfHeader />
220   - <LangSelect style="float: right;cursor: pointer;" />
221   - {/* we can show the plugins shortcuts here */}
222   - <a-menu
223   - theme="dark"
224   - mode="horizontal"
225   - defaultSelectedKeys={['2']}
226   - style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
227   - >
228   - {/* 保存、预览、发布、设置为模板 */}
229   - <a-menu-item key="1" class="transparent-bg">
230   - <a-button
231   - type="primary"
232   - size="small"
233   - onClick={this.handlePreview}
234   - loading={this.previewWork_loading}
235   - >{this.$t('editor.header.preview')}</a-button>
236   - </a-menu-item>
237   - <a-menu-item key="2" class="transparent-bg">
238   - <a-button
239   - size="small"
240   - onClick={this.handleSave}
241   - loading={this.saveWork_loading || this.uploadWorkCover_loading}
242   - >{this.$t('editor.header.save')}</a-button>
243   - </a-menu-item>
244   - {/* <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item> */}
245   - <a-menu-item key="3" class="transparent-bg">
246   - <a-dropdown-button
247   - size="small"
248   - onClick={this.handlePublish}
249   - loading={this.saveWork_loading || this.uploadWorkCover_loading}
250   - >
251   - {/* 发布 */}
252   - {this.$t('editor.header.publish')}
253   - <a-menu slot="overlay" onClick={({ key }) => {
254   - switch (key) {
255   - case 'setAsTemplate':
256   - this.updateLoading({ type: 'setWorkAsTemplate_loading', value: true })
257   - this.saveWork().then(() => {
258   - this.setWorkAsTemplate()
259   - })
260   - }
261   - }}>
262   - <a-menu-item key="setAsTemplate">
263   - <a-spin spinning={this.setWorkAsTemplate_loading} size="small">
264   - {/* 设置为模板 */}
265   - <a-icon type="cloud-upload" />{this.$t('editor.header.setAsTemplate')}
266   - </a-spin>
267   - </a-menu-item>
268   - {/* <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item> */}
269   - {/* <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item> */}
270   - </a-menu>
271   - </a-dropdown-button>
272   - </a-menu-item>
273   - </a-menu>
274   - <ExternalLinksOfHeader />
275   - </a-layout-header>
  36 + <a-layout>
  37 + <Header>
  38 + <EditorActionMenu slot="action-menu" onPreview={this.handlePreview} />
  39 + </Header>
276 40 <a-layout>
277   - {/* <a-layout-sider collapsedWidth={40} style="background: #fff" collapsed>
278   - <a-menu
279   - mode="inline"
280   - defaultSelectedKeys={['pluginList']}
281   - style={{ height: '100%', borderRight: 1 }}
282   - onSelect={({ key }) => { this.activeMenuKey = key }}
283   - >
284   - {
285   - sidebarMenus.map(menu => (
286   - <a-menu-item key={menu.value}>
287   - <a-icon type={menu.antIcon} />
288   - <span>{this.$t(menu.i18nLabel)}</span>
289   - </a-menu-item>
290   - ))
291   - }
292   - </a-menu>
293   - </a-layout-sider> */}
294   - <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
295   - { this._renderMenuContent() }
296   - </a-layout-sider>
297   - <a-layout id="canvas-outer-wrapper">
298   - <div class="mode-toggle-wrapper">
299   - <a-radio-group
300   - size="small"
301   - value={this.isPreviewMode}
302   - onInput={isPreviewMode => {
303   - this.isPreviewMode = isPreviewMode
304   - if (isPreviewMode) {
305   - // 当切换到预览模式的时候,清空当前编辑元素
306   - this.setEditingElement() // 相当于 setEditingElement(null)
307   - }
308   - }}
309   - >
310   - {/* 编辑模式、预览模式 */}
311   - <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
312   - <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
313   - </a-radio-group>
314   - </div>
315   - <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
316   - <div class='canvas-wrapper' style={{
317   - height: `${this.work.height}px`
318   - }}>
319   - {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */}
320   - { this.isPreviewMode
321   - ? <RenderPreviewCanvas elements={this.elements}/>
322   - : <RenderEditCanvas
323   - class="edit-mode"
324   - elements={this.elements}
325   - />
326   - }
327   - </div>
328   - </a-layout-content>
329   - </a-layout>
330   - <AdjustLineV onLineMove={(offset) => {
331   - this.propsPanelWidth += offset
332   - }} />
333   - <a-layout-sider width="40" theme='light' style={{ background: '#fff', border: '1px solid #eee' }}>
334   - {/* <div>
335   - <a-button shape="circle" icon="search" type="link" />
336   - </div> */}
337   - <a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
338   - {
339   - fixedTools.map(tool => (
340   - <a-tooltip effect="dark" placement="left" title={this.$t(tool.i18nTooltip, { hotkey: tool.hotkeyTooltip })}>
341   - <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}>
342   - { tool.icon ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true'/> : (tool.text || this.$t(tool.i18nTooltip)) }
343   - </a-button>
344   - { tool.icon === 'minus' && <div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div> }
345   - </a-tooltip>
346   - ))
347   - }
348   - </a-button-group>
349   - </a-layout-sider>
350   - <a-layout-sider width={this.propsPanelWidth} data-set-width={this.propsPanelWidth} theme='light' style={{ background: '#fff', padding: '0 0 0 12px' }}>
351   - <a-tabs
352   - style="height: 100%;"
353   - tabBarGutter={10}
354   - defaultActiveKey={this.activeTabKey}
355   - activeKey={this.activeTabKey}
356   - onChange={this.setActiveTab}
357   - >
358   - {/*
359   - #!zh tab 标题:
360   - #!en tab title
361   - ElementUI:label
362   - Ant Design Vue:tab
363   - */}
364   - <a-tab-pane key="属性"><span slot="tab">{this.$t('editor.editPanel.tab.prop')}</span><RenderPropsEditor/></a-tab-pane>
365   - <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
366   - <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActionEditor/> }</a-tab-pane>
367   - <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
368   - <a-tab-pane label="背景" key='background' tab={this.$t('editor.editPanel.tab.background')}>{ this.activeTabKey === 'background' && <RenderBackgroundEditor/> }</a-tab-pane>
369   - </a-tabs>
370   - </a-layout-sider>
371   -
  41 + <EditorLeftPanel />
  42 + <EditorCanvas />
  43 + <AdjustLineV onLineMove={(offset) => { this.propsPanelWidth += offset }} />
  44 + <FixedTools />
  45 + <EditorRightPanel width={this.propsPanelWidth} />
372 46 </a-layout>
373 47 {
374 48 <PreviewDialog
... ... @@ -382,17 +56,11 @@ export default {
382 56 )
383 57 },
384 58 created () {
385   - // event bus for editor
386   - window.getEditorApp = this
387 59 let workId = this.$route.params.workId
388 60 if (workId) {
389   - this.fetchWork(workId).then(() => this.setActiveTab('background'))
  61 + this.fetchWork(workId)
390 62 } else {
391 63 this.$message.error('no work id!')
392 64 }
393   -
394   - window.getEditorApp.$on('setEditingElement', ({ name }) => {
395   - this.setActiveTab(name === 'lbp-background' ? 'background' : '属性')
396   - })
397 65 }
398 66 }
... ...
front-end/h5/src/components/core/editor/left-panel/index.js 0 → 100644
  1 +import RenderShortcutsPanel from './shortcuts-panel/index'
  2 +import RenderPageManager from './page-manager/index'
  3 +
  4 +export default {
  5 + name: 'EditorLeftPanel',
  6 + render (h) {
  7 + return (
  8 + <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
  9 + <a-tabs
  10 + style="height: 100%;"
  11 + tabBarGutter={10}
  12 + >
  13 + <a-tab-pane key="plugin-list" tab={this.$t('editor.sidebar.components')}>
  14 + <RenderShortcutsPanel />
  15 + </a-tab-pane>
  16 + <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
  17 + <RenderPageManager />
  18 + </a-tab-pane>
  19 + </a-tabs>
  20 + </a-layout-sider>
  21 + )
  22 + }
  23 +}
... ...
front-end/h5/src/components/core/editor/page-manager/index.js renamed to front-end/h5/src/components/core/editor/left-panel/page-manager/index.js
  1 +import { mapState, mapActions } from 'vuex'
  2 +
1 3 export default {
2   - props: {
3   - pages: {
4   - required: false,
5   - type: Array,
6   - default: () => []
7   - },
8   - editingPage: {
9   - type: Object,
10   - default: () => {}
11   - }
12   - },
13 4 data: () => ({
14 5 hoverIndex: -1, // 显示编辑按钮
15 6 editingTitle: '' // 临时缓存当前编辑的 title,点击 Yes 再真正用其更新 page title
16 7 }),
  8 + computed: {
  9 + ...mapState('editor', {
  10 + editingPage: state => state.editingPage,
  11 + editingElement: state => state.editingElement,
  12 + elements: state => state.editingPage.elements,
  13 + pages: state => state.work.pages,
  14 + work: state => state.work
  15 + })
  16 + },
17 17 methods: {
  18 + ...mapActions('editor', [
  19 + 'elementManager',
  20 + 'pageManager',
  21 + 'saveWork',
  22 + 'setEditingPage'
  23 + ]),
18 24 getTitle (page, index) {
19 25 return page.title || this.$t('editor.pageManager.title', { index })
20 26 },
... ...
front-end/h5/src/components/core/editor/shortcuts-panel/index.js renamed to front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
1 1 import ShortcutButton from './shortcut-button'
  2 +import UsageTip from './usage-tip'
2 3 import LoadNpmPlugins from './load-npm-plugins.vue'
3   -import langMixin from '@/mixins/i18n'
  4 +import langMixin from 'core/mixins/i18n'
  5 +import dragMixin from 'core/mixins/drag'
  6 +import loadPluginsMixin from 'core/plugins'
  7 +import { mapActions } from 'vuex'
  8 +
4 9 export default {
5   - mixins: [langMixin],
6   - props: {
7   - pluginsList: {
8   - required: false,
9   - type: Array,
10   - default: () => []
11   - },
12   - handleClickShortcut: {
13   - type: Function
14   - },
15   - handleDragStart: {
16   - type: Function,
17   - default: (e) => {}
18   - }
19   - },
  10 + mixins: [langMixin, dragMixin, loadPluginsMixin],
20 11 data: () => ({
21 12 npmPackages: []
22 13 }),
23 14 methods: {
24   - onClickShortcut (item) {
25   - if (this.handleClickShortcut) {
26   - this.handleClickShortcut(item)
27   - }
  15 + ...mapActions('editor', [
  16 + 'elementManager',
  17 + 'pageManager',
  18 + 'saveWork',
  19 + 'setEditingPage'
  20 + ]),
  21 + ...mapActions('loading', {
  22 + updateLoading: 'update'
  23 + }),
  24 + /**
  25 + * !#zh 点击插件,copy 其基础数据到组件树(中间画布)
  26 + * #!en click the plugin shortcut, create new Element with the plugin's meta data
  27 + * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
  28 + *
  29 + * shortcutItem: PluginListItem = {
  30 + name: String,
  31 + shortcutProps: {}
  32 + }
  33 + */
  34 + clone (shortcutItem) {
  35 + this.elementManager({
  36 + type: 'add',
  37 + value: shortcutItem
  38 + })
28 39 }
29 40 /**
30 41 * #!zh 渲染多个插件的快捷方式
... ... @@ -70,8 +81,8 @@ export default {
70 81 // />
71 82 // },
72 83 /**
73   - * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式,用户点击之后,即可将其添加到中间画布上
74   - * #!en: render shortcust at the sidebar or the header. if user click the shortcut, the related plugin will be added to the canvas
  84 + * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式,用户点击/拖拽之后,即可将其添加到中间画布上
  85 + * #!en: render shortcust at the sidebar or the header. if user click/drag the shortcut, the related plugin will be added to the canvas
75 86 * @param {Object} group: {children, title, icon}
76 87 */
77 88 // renderShortCutsPanel (groups) {
... ... @@ -92,23 +103,31 @@ export default {
92 103 // )
93 104 // }
94 105 },
  106 + /**
  107 + * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式,用户点击/拖拽之后,即可将其添加到中间画布上
  108 + * #!en: render shortcust at the sidebar or the header.
  109 + * if user click/drag the shortcut, the related plugin will be added to the canvas
  110 + */
95 111 render (h) {
96 112 // return this.renderShortCutsPanel(this.groups)
97 113 return (
98 114 <a-row gutter={20} style="max-height: calc(100vh - 140px);overflow: scroll;">
  115 + <UsageTip />
99 116 {
100   - [].concat(this.pluginsList, this.npmPackages).filter(plugin => plugin.visible).map(plugin => (
101   - <a-col span={12} style={{ marginTop: '10px' }}>
102   - <ShortcutButton
103   - clickFn={this.onClickShortcut.bind(this, plugin)}
104   - mousedownFn={this.handleDragStart.bind(this, plugin)}
105   - // title={plugin.title}
106   - title={plugin.i18nTitle[this.currentLang] || plugin.title}
107   - faIcon={plugin.icon}
108   - disabled={plugin.disabled}
109   - />
110   - </a-col>
111   - ))
  117 + [].concat(this.pluginsList, this.npmPackages)
  118 + .filter(plugin => plugin.visible)
  119 + .map(plugin => (
  120 + <a-col span={12} style={{ marginTop: '10px' }}>
  121 + <ShortcutButton
  122 + clickFn={this.clone.bind(this, plugin)}
  123 + mousedownFn={this.handleDragStartFromMixin.bind(this, plugin)}
  124 + // title={plugin.title}
  125 + title={plugin.i18nTitle[this.currentLang] || plugin.title}
  126 + faIcon={plugin.icon}
  127 + disabled={plugin.disabled}
  128 + />
  129 + </a-col>
  130 + ))
112 131 }
113 132 <LoadNpmPlugins onLoadComplete={npmPackages => {
114 133 this.npmPackages = npmPackages
... ...
front-end/h5/src/components/core/editor/shortcuts-panel/load-npm-plugins.vue renamed to front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/load-npm-plugins.vue
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-11-23 12:35:43
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2019-11-23 19:37:29
6   - * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/shortcuts-panel/load-npm-plugins.vue
  5 + * @LastEditTime: 2020-10-10 23:31:49
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/load-npm-plugins.vue
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 -->
11 11  
12 12 <template>
... ...
front-end/h5/src/components/core/editor/shortcuts-panel/shortcut-button.js renamed to front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/shortcut-button.js
front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/usage-tip.js 0 → 100644
  1 +export default {
  2 + render () {
  3 + return (
  4 + <div class="plugin-usage-tip ">
  5 + <a-icon type="info-circle" />
  6 + {/* 使用提示: 点击或拖拽 组件即可 */}
  7 + {/* Tip: just click/drag component */}
  8 + <i18n path="editor.tip.componentUsage" tag="span" class="ml-1">
  9 + <strong>{ this.$t('editor.tip.click') }</strong>{ this.$t('editor.tip.click') }
  10 + </i18n>
  11 + </div>
  12 + )
  13 + }
  14 +}
... ...
front-end/h5/src/components/core/editor/edit-panel/action.js renamed to front-end/h5/src/components/core/editor/right-panel/action.js
front-end/h5/src/components/core/editor/edit-panel/animation.js renamed to front-end/h5/src/components/core/editor/right-panel/animation.js
1 1 import { mapState } from 'vuex'
2   -import { animationOptions, animationValue2Name, firstLevelAnimationOptions } from '@/constants/animation.js'
  2 +import { animationOptions, animationValue2Name, firstLevelAnimationOptions } from 'core/constants/animation.js'
3 3  
4 4 export default {
5 5 computed: {
... ... @@ -32,7 +32,7 @@ export default {
32 32 },
33 33 runAnimate () {
34 34 // front-end/h5/src/components/core/editor/index.js created()
35   - window.getEditorApp.$emit('RUN_ANIMATIONS')
  35 + window.EditorApp.$emit('RUN_ANIMATIONS')
36 36 },
37 37 renderSecondAnimationTabs (animations) {
38 38 return (
... ... @@ -208,7 +208,7 @@ export default {
208 208 const ele = this.editingElement
209 209 if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
210 210 return (
211   - <div class="main-animate widget" id="animation-edit-panel">
  211 + <div class="main-animate widget" id="animation-right-panel">
212 212 <a-button-group>
213 213 {/* 添加动画、运行动画 */}
214 214 <a-button type="primary" onClick={this.addAnimation}><a-icon type="plus" />{this.$t('editor.editPanel.animation.add')}</a-button>
... ...
front-end/h5/src/components/core/editor/edit-panel/background.js renamed to front-end/h5/src/components/core/editor/right-panel/background.js
1 1 /*
2 2 * @Author: ly525
3 3 * @Date: 2019-12-01 18:11:49
4   - * @LastEditors : ly525
5   - * @LastEditTime : 2020-01-15 01:03:31
6   - * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/edit-panel/background.js
  4 + * @LastEditors: ly525
  5 + * @LastEditTime: 2020-10-10 23:36:27
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/right-panel/background.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11   -import propsEditPanel from './props.js'
  11 +import PropsEditPanel from './props.js'
12 12 import { mapState, mapActions } from 'vuex'
  13 +import RenderWorkMode from './work-mode.vue'
13 14  
14 15 export default {
15 16 computed: {
... ... @@ -24,10 +25,15 @@ export default {
24 25 },
25 26 render () {
26 27 const bgEle = this.editingPage.elements.find(e => e.name === 'lbp-background')
27   - return <propsEditPanel
28   - layout="vertical"
29   - realEditingElement={bgEle}
30   - />
  28 + return (
  29 + <div>
  30 + <RenderWorkMode />
  31 + <PropsEditPanel
  32 + layout="vertical"
  33 + realEditingElement={bgEle}
  34 + />
  35 + </div>
  36 + )
31 37 }
32 38  
33 39 }
... ...
front-end/h5/src/components/core/editor/right-panel/index.js 0 → 100644
  1 +import RenderPropsEditor from './props'
  2 +import RenderScriptEditor from './script'
  3 +import RenderAnimationEditor from './animation'
  4 +import RenderActionEditor from './action'
  5 +import RenderBackgroundEditor from './background'
  6 +export default {
  7 + name: 'ElementPropsEditor',
  8 + props: {
  9 + width: {
  10 + type: Number,
  11 + default: 320
  12 + }
  13 + },
  14 + data: () => ({
  15 + activeTabKey: '页面'
  16 + }),
  17 + methods: {
  18 + /**
  19 + * #!zh: 设置 页面图tab 作为 active tab
  20 + * #!en: set background(bg) tab as active tab
  21 + */
  22 + setActiveTab (activeTabKey) {
  23 + this.activeTabKey = activeTabKey
  24 + }
  25 + },
  26 + render (h) {
  27 + return (
  28 + <a-layout-sider width={this.width} data-set-width={this.width} theme='light' style={{ background: '#fff', padding: '0 12px 0 12px' }}>
  29 + <a-tabs
  30 + style="height: 100%;"
  31 + tabBarGutter={10}
  32 + defaultActiveKey={this.activeTabKey}
  33 + activeKey={this.activeTabKey}
  34 + onChange={this.setActiveTab}
  35 + >
  36 + <a-tab-pane key="属性"><span slot="tab">{this.$t('editor.editPanel.tab.prop')}</span><RenderPropsEditor/></a-tab-pane>
  37 + <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
  38 + <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActionEditor/> }</a-tab-pane>
  39 + <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
  40 + <a-tab-pane label="页面" key='页面' tab={this.$t('editor.editPanel.tab.page')}>{ this.activeTabKey === '页面' && <RenderBackgroundEditor/> }</a-tab-pane>
  41 + </a-tabs>
  42 + </a-layout-sider>
  43 + )
  44 + },
  45 + created () {
  46 + window.EditorApp.$on('setEditingElement', ({ name }) => {
  47 + this.setActiveTab(name === 'lbp-background' ? '页面' : '属性')
  48 + })
  49 + }
  50 +}
... ...
front-end/h5/src/components/core/editor/edit-panel/props.js renamed to front-end/h5/src/components/core/editor/right-panel/props.js
1 1 import Vue from 'vue'
2 2 import { mapState, mapActions } from 'vuex'
3   -import { getVM, getComponentsForPropsEditor } from '../../../../utils/element'
4   -import RenderGlobalWorkPropsEditor from './props/global-work.vue'
  3 +import { getVM, getComponentsForPropsEditor } from '@/utils/element'
  4 +import '../../styles/props-config-panel.scss'
5 5  
6 6 export default {
7 7 data: () => ({
... ... @@ -40,7 +40,7 @@ export default {
40 40 if (Vue.component(this.customEditorName)) {
41 41 this.loadCustomEditorFlag = true
42 42 } else {
43   - import(`../../../plugins/${this.editingElement.name}__editor`).then(component => {
  43 + import(`core/plugins/${this.editingElement.name}__editor`).then(component => {
44 44 this.loadCustomEditorFlag = true
45 45 Vue.component(this.customEditorName, component.default)
46 46 }).catch(err => {
... ... @@ -122,9 +122,8 @@ export default {
122 122 <a-form
123 123 ref="form"
124 124 size="mini"
125   - id="props-edit-form"
  125 + class="props-config-form"
126 126 layout={this.layout}
127   - style="overflow: auto;position: absolute;top: 50px;bottom: 0;width: 100%; "
128 127 >
129 128 {
130 129 // plugin-custom-editor
... ... @@ -151,17 +150,17 @@ export default {
151 150 )
152 151 },
153 152 renderWorkGlobalPropsPanel (h) {
154   - return <RenderGlobalWorkPropsEditor />
  153 + return <RenderWorkMode />
155 154 }
156 155 },
157 156 render (h) {
158 157 const ele = this.editingElement
159   - if (!ele) return this.renderWorkGlobalPropsPanel(h)
  158 + if (!ele) return '请选择一个元素'
160 159 this.mixinEnhancedPropsEditor(ele)
161 160 return this.renderPropsEditorPanel(h, ele)
162 161 },
163 162 created () {
164   - window.getEditorApp.$on('setEditingElement', (ele) => {
  163 + window.EditorApp.$on('setEditingElement', (ele) => {
165 164 this.loadCustomEditorForPlugin()
166 165 this.componentsForPropsEditor = getComponentsForPropsEditor(ele.name)
167 166 })
... ...
front-end/h5/src/components/core/editor/edit-panel/script.js renamed to front-end/h5/src/components/core/editor/right-panel/script.js
front-end/h5/src/components/core/editor/edit-panel/props/global-work.vue renamed to front-end/h5/src/components/core/editor/right-panel/work-mode.vue
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2020-05-10 23:10:52
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-13 00:09:56
6   - * @FilePath: /h5/src/components/core/editor/edit-panel/props/global-work.vue
  5 + * @LastEditTime: 2020-10-10 23:32:07
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/right-panel/work-mode.vue
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 -->
11 11 <template>
12 12 <a-form :layout="formLayout">
... ... @@ -22,7 +22,7 @@
22 22  
23 23 <script>
24 24 import { mapState, mapActions } from 'vuex'
25   -import { PAGE_MODE, PAGE_MODE_LABEL } from '@/constants/work'
  25 +import { PAGE_MODE, PAGE_MODE_LABEL } from 'core/constants/work'
26 26  
27 27 export default {
28 28 data () {
... ...
front-end/h5/src/mixins/animation.js renamed to front-end/h5/src/components/core/mixins/animation.js
1 1 /*
2 2 * @Author: ly525
3 3 * @Date: 2019-11-24 18:51:58
4   - * @LastEditors : ly525
5   - * @LastEditTime : 2020-01-09 21:57:30
6   - * @FilePath: /luban-h5/front-end/h5/src/mixins/animation.js
  4 + * @LastEditors: ly525
  5 + * @LastEditTime: 2020-10-10 23:35:49
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/mixins/animation.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description:
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 // https://stackoverflow.com/questions/26874769/getcomputedstyle-and-csstext-in-ie-and-firefox
12 12 function getComputedCSSText (style) {
... ... @@ -55,7 +55,7 @@ export default {
55 55 },
56 56 created () {
57 57 const that = this
58   - window.getEditorApp && window.getEditorApp.$on('RUN_ANIMATIONS', () => {
  58 + window.EditorApp && window.EditorApp.$on('RUN_ANIMATIONS', () => {
59 59 that.runAnimations()
60 60 // if (that.active) {
61 61 // that.runAnimations()
... ...
front-end/h5/src/components/core/editor/drag-mixin.js renamed to front-end/h5/src/components/core/mixins/drag.js
... ... @@ -2,10 +2,10 @@
2 2 * @Author: ly525
3 3 * @Date: 2020-05-17 17:21:04
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-24 18:09:23
6   - * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/drag-mixin.js
  5 + * @LastEditTime: 2020-10-10 23:27:21
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/mixins/drag.js
7 7 * @Github: https://github.com/ly525/luban-h5
8   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  8 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
9 9 * @Description:
10 10 * 组件拖拽至画布功能
11 11 * 其中部分代码参考自:https://github.com/hakubox/haku-form-design,已经征得作者同意,目的是后续考虑做 tab 之类的嵌套容器
... ...
front-end/h5/src/mixins/i18n.js renamed to front-end/h5/src/components/core/mixins/i18n.js
front-end/h5/src/components/core/models/element.js
1   -import { parsePx } from '../../../utils/element.js'
  1 +import { parsePx } from '@/utils/element.js'
2 2  
3 3 // #! 编辑状态,不可以点击的按钮,因为点击按钮会触发一些默认行为,比如表单提交等
4 4 const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button', 'lbp-video']
... ...
front-end/h5/src/components/core/models/page.js
1 1 import Element from '../models/element'
2   -import LbpBackground from '../../plugins/lbp-background'
  2 +import LbpBackground from '../plugins/lbp-background'
3 3  
4 4 class Page {
5 5 constructor (page = {}) {
... ...
front-end/h5/src/components/core/models/work.js
... ... @@ -2,14 +2,14 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-11-24 18:51:58
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-10 23:23:40
  5 + * @LastEditTime: 2020-10-10 23:32:31
6 6 * @FilePath: /luban-h5/front-end/h5/src/components/core/models/work.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: work model
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import Page from './page.js'
12   -import { PAGE_MODE } from '@/constants/work'
  12 +import { PAGE_MODE } from 'core/constants/work'
13 13  
14 14 class Work {
15 15 constructor (work = {}) {
... ...
front-end/h5/src/components/plugins/bg-music.svg renamed to front-end/h5/src/components/core/plugins/bg-music.svg
front-end/h5/src/components/plugins/charts/chart-mixin.js renamed to front-end/h5/src/components/core/plugins/charts/chart-mixin.js
front-end/h5/src/components/plugins/charts/chart-model.js renamed to front-end/h5/src/components/core/plugins/charts/chart-model.js
front-end/h5/src/components/plugins/charts/chart-model.ts renamed to front-end/h5/src/components/core/plugins/charts/chart-model.ts
front-end/h5/src/components/plugins/charts/line.js renamed to front-end/h5/src/components/core/plugins/charts/line.js
... ... @@ -8,7 +8,7 @@ import &#39;echarts/lib/component/legend&#39;
8 8 import 'echarts/lib/component/markLine'
9 9 import 'echarts/lib/component/markPoint'
10 10 import 'echarts/lib/component/markArea'
11   -import Parser from '../../../utils/excel-parser'
  11 +import Parser from '@/utils/excel-parser'
12 12  
13 13 // const title = str => str.slice(0, 1).toUpperCase() + str.slice(1)
14 14  
... ...
front-end/h5/src/mixins/load-plugins.js renamed to front-end/h5/src/components/core/plugins/index.js
1 1 import Vue from 'vue'
2 2 // import LbpButton from '@luban-h5/lbc-button'
3   -import LbpButton from '../components/plugins/lbp-button'
4   -import LbpPicture from '../components/plugins/lbp-picture'
5   -import LbpVideo from '../components/plugins/lbp-video'
6   -import LbpText from '../components/plugins/lbp-text'
7   -import LbpFormInput from '../components/plugins/lbp-form-input'
8   -import LbpFormButton from '../components/plugins/lbp-form-button'
9   -import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
10   -import LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group'
11   -import LbpBackground from '../components/plugins/lbp-background'
12   -import LbpSlide from '../components/plugins/lbp-slide'
13   -import LbpBgMusic from '../components/plugins/lbp-bg-music'
14   -import LbpNoticeBar from '../components/plugins/lbp-notice-bar'
15   -import LbpRate from '../components/plugins/lbp-rate'
16   -import LbpQQMap from '../components/plugins/lbp-qq-map/src'
17   -import LbpLineChart from '../components/plugins/charts/line'
18   -import LbpTable from '../components/plugins/lbp-table'
19   -import LbpNewsList from '../components/plugins/lbp-news-list'
  3 +import LbpButton from 'core/plugins/lbp-button'
  4 +import LbpPicture from 'core/plugins/lbp-picture'
  5 +import LbpVideo from 'core/plugins/lbp-video'
  6 +import LbpText from 'core/plugins/lbp-text'
  7 +import LbpFormInput from 'core/plugins/lbp-form-input'
  8 +import LbpFormButton from 'core/plugins/lbp-form-button'
  9 +import LbpFormRadioGroup from 'core/plugins/lbp-form-radio-group'
  10 +import LbpFormCheckboxGroup from 'core/plugins/lbp-form-checkbox-group'
  11 +import LbpBackground from 'core/plugins/lbp-background'
  12 +import LbpSlide from 'core/plugins/lbp-slide'
  13 +import LbpBgMusic from 'core/plugins/lbp-bg-music'
  14 +import LbpNoticeBar from 'core/plugins/lbp-notice-bar'
  15 +import LbpRate from 'core/plugins/lbp-rate'
  16 +import LbpQQMap from 'core/plugins/lbp-qq-map/src'
  17 +import LbpLineChart from 'core/plugins/charts/line'
  18 +import LbpTable from 'core/plugins/lbp-table'
  19 +import LbpNewsList from 'core/plugins/lbp-news-list'
20 20 // import LbpTabs from '../components/plugins/lbp-tabs'
21 21  
22 22 export const pluginsList = [
... ...
front-end/h5/src/components/plugins/lbp-background.js renamed to front-end/h5/src/components/core/plugins/lbp-background.js
... ... @@ -2,14 +2,14 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-11-24 18:51:58
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 21:02:47
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-background.js
  5 + * @LastEditTime: 2020-10-10 23:32:48
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-background.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: luban-h5 background image/color component/plugin
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import PropTypes from '@luban-h5/plugin-common-props'
12   -import { renderWaterMark } from '../../utils/dom-helper'
  12 +import { renderWaterMark } from '@/utils/dom-helper'
13 13  
14 14 export default {
15 15 name: 'lbp-background',
... ...
front-end/h5/src/components/plugins/lbp-bg-music.js renamed to front-end/h5/src/components/core/plugins/lbp-bg-music.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2020-01-03 23:43:34
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 20:58:32
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-bg-music.js
  5 + * @LastEditTime: 2020-10-10 23:32:41
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-bg-music.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import PropTypes from '@luban-h5/plugin-common-props'
12 12 import './styles/bg-music.scss'
... ...
front-end/h5/src/components/plugins/lbp-button.js renamed to front-end/h5/src/components/core/plugins/lbp-button.js
front-end/h5/src/components/plugins/lbp-form-button.js renamed to front-end/h5/src/components/core/plugins/lbp-form-button.js
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js renamed to front-end/h5/src/components/core/plugins/lbp-form-checkbox-group.js
front-end/h5/src/components/plugins/lbp-form-input.js renamed to front-end/h5/src/components/core/plugins/lbp-form-input.js
front-end/h5/src/components/plugins/lbp-form-radio-group.js renamed to front-end/h5/src/components/core/plugins/lbp-form-radio-group.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-11-23 12:35:43
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 23:17:23
6   - * @FilePath: /h5/src/components/plugins/lbp-form-radio-group.js
  5 + * @LastEditTime: 2020-10-10 23:33:03
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-form-radio-group.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: 表单单选组组件 #!en: radio group component
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11  
12 12 import PropTypes from '@luban-h5/plugin-common-props'
... ...
front-end/h5/src/components/plugins/lbp-form-radio.js renamed to front-end/h5/src/components/core/plugins/lbp-form-radio.js
... ... @@ -2,15 +2,15 @@
2 2 * @Author: ly525
3 3 * @Date: 2020-05-17 19:54:20
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 19:55:02
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-form-radio.js
  5 + * @LastEditTime: 2020-10-10 23:33:11
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-form-radio.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import './styles/radio.scss'
12 12 // https://github.com/luban-h5-components/plugin-common-props
13   -import { genUUID } from '../../utils/element.js'
  13 +import { genUUID } from '@/utils/element.js'
14 14  
15 15 export default {
16 16 name: 'lbp-form-radio',
... ...
front-end/h5/src/components/plugins/lbp-news-list.js renamed to front-end/h5/src/components/core/plugins/lbp-news-list.js
1 1 import PropTypes from '@luban-h5/plugin-common-props'
2   -import Parser from '../../utils/excel-parser'
  2 +import Parser from '@/utils/excel-parser'
3 3 import './styles/news-list.scss'
4 4  
5 5 export default {
... ...
front-end/h5/src/components/plugins/lbp-notice-bar.js renamed to front-end/h5/src/components/core/plugins/lbp-notice-bar.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2020-05-14 08:09:44
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 21:18:32
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-notice-bar.js
  5 + * @LastEditTime: 2020-10-10 23:33:19
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-notice-bar.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11  
12 12 import PropTypes from '@luban-h5/plugin-common-props'
... ...
front-end/h5/src/components/plugins/lbp-picture-placeholder.png renamed to front-end/h5/src/components/core/plugins/lbp-picture-placeholder.png

23.2 KB

front-end/h5/src/components/plugins/lbp-picture.js renamed to front-end/h5/src/components/core/plugins/lbp-picture.js
front-end/h5/src/components/plugins/lbp-qq-map/README.md renamed to front-end/h5/src/components/core/plugins/lbp-qq-map/README.md
front-end/h5/src/components/plugins/lbp-qq-map/src/Map.js renamed to front-end/h5/src/components/core/plugins/lbp-qq-map/src/Map.js
front-end/h5/src/components/plugins/lbp-qq-map/src/index.vue renamed to front-end/h5/src/components/core/plugins/lbp-qq-map/src/index.vue
front-end/h5/src/components/plugins/lbp-qq-map/src/mixin.js renamed to front-end/h5/src/components/core/plugins/lbp-qq-map/src/mixin.js
front-end/h5/src/components/plugins/lbp-qq-map__editor.js renamed to front-end/h5/src/components/core/plugins/lbp-qq-map__editor.js
front-end/h5/src/components/plugins/lbp-rate.js renamed to front-end/h5/src/components/core/plugins/lbp-rate.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2020-05-17 20:04:23
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 21:33:31
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-rate.js
  5 + * @LastEditTime: 2020-10-10 23:33:32
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-rate.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import PropTypes from '@luban-h5/plugin-common-props'
12 12 import { Rate } from 'vant'
... ...
front-end/h5/src/components/plugins/lbp-slide.js renamed to front-end/h5/src/components/core/plugins/lbp-slide.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-11-23 12:35:21
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 21:22:01
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-slide.js
  5 + * @LastEditTime: 2020-10-10 23:33:43
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-slide.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: #!zh: 轮播图组件 #!en slide component
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import PropTypes from '@luban-h5/plugin-common-props'
12 12  
... ...
front-end/h5/src/components/plugins/lbp-slide__editor.js renamed to front-end/h5/src/components/core/plugins/lbp-slide__editor.js
front-end/h5/src/components/plugins/lbp-table.js renamed to front-end/h5/src/components/core/plugins/lbp-table.js
front-end/h5/src/components/plugins/lbp-text.js renamed to front-end/h5/src/components/core/plugins/lbp-text.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-11-24 18:51:58
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 21:11:10
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-text.js
  5 + * @LastEditTime: 2020-10-10 23:33:50
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-text.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: luban-h5 text component/plugin
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import PropTypes from '@luban-h5/plugin-common-props'
12 12 import { quillEditor } from 'vue-quill-editor'
... ...
front-end/h5/src/components/plugins/lbp-video.js renamed to front-end/h5/src/components/core/plugins/lbp-video.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-12-01 18:11:50
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-17 21:12:55
6   - * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-video.js
  5 + * @LastEditTime: 2020-10-10 23:33:57
  6 + * @FilePath: /luban-h5/front-end/h5/src/components/core/plugins/lbp-video.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import PropTypes from '@luban-h5/plugin-common-props'
12 12  
... ...
front-end/h5/src/components/plugins/play.svg renamed to front-end/h5/src/components/core/plugins/play.svg
front-end/h5/src/components/plugins/styles/bg-music.scss renamed to front-end/h5/src/components/core/plugins/styles/bg-music.scss
front-end/h5/src/components/plugins/styles/news-list.scss renamed to front-end/h5/src/components/core/plugins/styles/news-list.scss
front-end/h5/src/components/plugins/styles/radio.scss renamed to front-end/h5/src/components/core/plugins/styles/radio.scss
front-end/h5/src/components/plugins/styles/table.scss renamed to front-end/h5/src/components/core/plugins/styles/table.scss
front-end/h5/src/components/plugins/styles/text-overwrite-quil-snow-theme.scss renamed to front-end/h5/src/components/core/plugins/styles/text-overwrite-quil-snow-theme.scss
front-end/h5/src/components/plugins/styles/video.scss renamed to front-end/h5/src/components/core/plugins/styles/video.scss
front-end/h5/src/components/preview/node-wrapper.js renamed to front-end/h5/src/components/core/preview/node-wrapper.js
1   -import animationMixin from '@/mixins/animation.js'
  1 +import animationMixin from 'core/mixins/animation.js'
2 2  
3 3 export default {
4 4 mixins: [animationMixin],
... ...
front-end/h5/src/components/core/styles/index.scss
... ... @@ -6,52 +6,6 @@
6 6 @import url("./page-manager.scss");
7 7 @import url("./canvas-wrapper.scss");
8 8  
9   -#luban-editor-layout,
10   -#luban-work-manager-layout {
11   - .header {
12   - padding: 0 10px;
13   -
14   - .logo {
15   - width: 120px;
16   - height: 31px;
17   - // background: rgba(255,255,255,.2);
18   - margin: 16px 28px 16px 0;
19   - float: left;
20   -
21   - line-height: 31px;
22   - text-align: center;
23   - color: white;
24   - font-size: 16px;
25   - }
26   -
27   - .lang-select-activator,
28   - .user-avatar-activator {
29   - float: right;
30   - background: transparent;
31   - margin: 0 28px 16px 0;
32   - cursor: pointer;
33   -
34   - .anticon {
35   - color: white;
36   - }
37   - }
38   - }
39   -
40   - #props-edit-form {
41   - .ant-form-item {
42   - margin-bottom: 12px;
43   - }
44   - }
45   -
46   - .card-cover-wrapper {
47   - position: relative;
48   - height: 300px;
49   - border: 1px dashed #eee;
50   - color: #aaa;
51   - padding: 4px;
52   - }
53   -}
54   -
55 9 .hidden {
56 10 display: none !important;
57 11 }
... ... @@ -84,7 +38,7 @@
84 38 }
85 39  
86 40 // 动画编辑面板定制
87   -#animation-edit-panel {
  41 +#animation-right-panel {
88 42 .ant-collapse-header {
89 43 padding: 6px 0 6px 40px;
90 44 }
... ... @@ -180,7 +134,7 @@ $activeHoverColor: #1593ff;
180 134  
181 135 .adjust-line-wrapper-v {
182 136 position: relative;
183   - height: 100%;
  137 + height: 100vh;
184 138 cursor: ew-resize;
185 139  
186 140 .adjust-button {
... ...
front-end/h5/src/components/core/styles/props-config-panel.scss 0 → 100644
  1 +.props-config-form {
  2 + .ant-form-item {
  3 + margin-bottom: 12px;
  4 + }
  5 +}
0 6 \ No newline at end of file
... ...
front-end/h5/src/components/core/support/excel.js
... ... @@ -3,7 +3,7 @@
3 3 */
4 4  
5 5 import Spreadsheet from 'x-data-spreadsheet'
6   -import Parser from '../../../utils/excel-parser'
  6 +import Parser from '@/utils/excel-parser'
7 7 import CsvImport from './csv-import'
8 8 // const getDefaultTableMatrix = () => [
9 9 // [1, 2, 3, 4],
... ...
front-end/h5/src/components/core/support/image-gallery/tabs/pixabay.js
... ... @@ -6,7 +6,7 @@
6 6 * @FilePath: /luban-h5/front-end/h5/src/components/core/support/image-gallery/tabs/pixabay.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import axios from 'axios'
12 12 import ImageItem from '../components/image-item.js'
... ...
front-end/h5/src/components/core/support/index.js
... ... @@ -2,7 +2,7 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-12-01 18:11:50
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-10-11 10:09:44
  5 + * @LastEditTime: 2020-10-11 10:13:29
6 6 * @FilePath: /luban-h5/front-end/h5/src/components/core/support/index.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description:
... ...
front-end/h5/src/components/core/support/shape.js
1   -import animationMixin from '@/mixins/animation.js'
  1 +import animationMixin from 'core/mixins/animation.js'
2 2  
3 3 /**
4 4 * #!zh: 上下左右 对应的 东南西北
... ...
front-end/h5/src/components/core/support/video-gallery/tabs/personal.js
... ... @@ -6,7 +6,7 @@
6 6 * @FilePath: /luban-h5/front-end/h5/src/components/core/support/video-gallery/tabs/personal.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import axios from 'axios'
12 12 import VideoItem from '../components/video-item.js'
... ...
front-end/h5/src/constants/api.js deleted 100644 → 0
1   -export const API_ORIGIN = process.env.NODE_ENV === 'production' ? 'https://luban-h5-api.herokuapp.com' : 'http://localhost:1337' // for local dev
front-end/h5/src/engine-entry.js
... ... @@ -2,7 +2,7 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-11-24 18:51:58
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2020-05-10 23:43:42
  5 + * @LastEditTime: 2020-10-10 23:35:42
6 6 * @FilePath: /luban-h5/front-end/h5/src/engine-entry.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description:
... ... @@ -10,7 +10,7 @@
10 10 构建 engine 页面的入口,作用与 src/main.js 类似,都是页面入口
11 11 作用:作品预览的渲染引擎,原理:遍历 work(作品) 的 pages 以及 elements,显示即可
12 12 使用场景:预览弹窗中预览 和 在手机上查看作品使用
13   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  13 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
14 14 */
15 15  
16 16 import Vue from 'vue'
... ... @@ -18,11 +18,11 @@ import Vue from &#39;vue&#39;
18 18 import message from 'ant-design-vue/lib/message' // 加载 JS
19 19 import 'ant-design-vue/lib/message/style/css' // 加载 CSS
20 20  
21   -import { pluginsList } from './mixins/load-plugins.js'
22   -import { PAGE_MODE } from './constants/work.js'
23   -import Element from './components/core/models/element'
24   -import RenderPreview from '@/components/core/editor/canvas/preview'
25   -import NodeWrapper from '@/components/preview/node-wrapper.js'
  21 +import { pluginsList } from 'core/plugins/index.js'
  22 +import { PAGE_MODE } from 'core/constants/work.js'
  23 +import Element from 'core/models/element'
  24 +import RenderPreview from 'core/editor/canvas/preview'
  25 +import NodeWrapper from 'core/preview/node-wrapper.js'
26 26  
27 27 Vue.config.productionTip = true
28 28 Vue.prototype.$message = message
... ... @@ -64,7 +64,7 @@ const Engine = {
64 64 renderPreview (pageElements = []) {
65 65 const height = this.isLongPage ? window.__work.height + 'px' : '100%'
66 66 const elements = pageElements.map(element => new Element(element))
67   - // src/components/core/editor/canvas/preview
  67 + // src//core/editor/canvas/preview
68 68 return <RenderPreview elements={elements} height={height} />
69 69 },
70 70 getContainerStyle (work) {
... ...
front-end/h5/src/locales/lang/en-US.js
... ... @@ -81,7 +81,7 @@ export default {
81 81 animation: 'Animation',
82 82 action: 'Action',
83 83 script: 'Script',
84   - background: 'Background'
  84 + page: 'Page'
85 85 },
86 86 animation: {
87 87 add: 'Add',
... ...
front-end/h5/src/locales/lang/zh-CN.js
... ... @@ -6,7 +6,7 @@
6 6 * @FilePath: /luban-h5/front-end/h5/src/locales/lang/zh-CN.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 export default {
12 12 app: {
... ... @@ -90,7 +90,7 @@ export default {
90 90 animation: '动画',
91 91 action: '动作',
92 92 script: '脚本',
93   - background: '背景'
  93 + page: '页面'
94 94 },
95 95 animation: {
96 96 add: '添加动画',
... ...
front-end/h5/src/store/modules/editor.js
1 1 // initial state
2   -import Work from '../../components/core/models/work'
  2 +import Work from 'core/models/work'
3 3 import { actions as pageActions, mutations as pageMutations } from './page'
4 4 import { actions as elementActions, mutations as elementMutations } from './element'
5 5 import { actions as workActions, mutations as workMutations } from './work'
... ...
front-end/h5/src/store/modules/element.js
1   -import Element from '../../components/core/models/element'
2   -import { swapZindex, getVM } from '../../utils/element'
  1 +import Element from 'core/models/element'
  2 +import { swapZindex, getVM } from '@/utils/element'
3 3  
4 4 // actions
5 5 export const actions = {
6 6 setEditingElement ({ commit }, payload) {
7 7 commit('setEditingElement', payload)
8   - payload && window.getEditorApp.$emit('setEditingElement', payload)
  8 + payload && window.EditorApp.$emit('setEditingElement', payload)
9 9 },
10 10 setElementPosition ({ commit }, payload) {
11 11 commit('setElementCommonStyle', payload)
... ...
front-end/h5/src/store/modules/loading.js
... ... @@ -6,7 +6,7 @@
6 6 * @FilePath: /luban-h5/front-end/h5/src/store/modules/loading.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: loading module
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 // initial state
12 12 const state = {
... ...
front-end/h5/src/store/modules/page.js
... ... @@ -2,15 +2,15 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-12-08 17:05:09
4 4 * @LastEditors: ly525
5   - * @LastEditTime: 2019-12-15 15:41:56
  5 + * @LastEditTime: 2020-10-10 23:34:28
6 6 * @FilePath: /luban-h5/front-end/h5/src/store/modules/page.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: page module
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 import { message } from 'ant-design-vue'
12 12  
13   -import Page from '../../components/core/models/page'
  13 +import Page from 'core/models/page'
14 14  
15 15 // actions
16 16 export const actions = {
... ...
front-end/h5/src/store/modules/work.js
1   -import Element from '../../components/core/models/element'
2   -import strapi from '../../utils/strapi'
3   -import Page from '../../components/core/models/page'
4   -import Work from '../../components/core/models/work'
5   -import { AxiosWrapper } from '../../utils/http.js'
  1 +import Element from 'core/models/element'
  2 +import strapi from '@/utils/strapi'
  3 +import Page from 'core/models/page'
  4 +import Work from 'core/models/work'
  5 +import { AxiosWrapper } from '@/utils/http.js'
6 6 import router from '@/router.js'
7   -import { takeScreenshot } from '../../utils/canvas-helper.js'
  7 +import { takeScreenshot } from '@/utils/canvas-helper.js'
8 8  
9 9 function setLoading (commit, loadingName, isLoading) {
10 10 commit('loading/update', { type: loadingName, payload: isLoading }, { root: true })
... ...
front-end/h5/src/views/About.vue deleted 100644 → 0
1   -<template>
2   - <div class="about">
3   - <h1>This is an about page</h1>
4   - </div>
5   -</template>
front-end/h5/src/views/Editor.vue
1 1 <script>
2   -import CoreEditor from '../components/core/editor/index.js'
3   -import loadPluginMixin from '../mixins/load-plugins.js'
4   -import '../components/core/support/index.js'
5   -
  2 +import CoreEditor from 'core/editor/index.js'
6 3 export default {
7   - extends: CoreEditor,
8   - mixins: [loadPluginMixin]
  4 + render () {
  5 + return (
  6 + <CoreEditor />
  7 + )
  8 + }
9 9 }
10 10 </script>
... ...
front-end/h5/src/views/Home.vue
1 1 <template>
2 2 <div class="home">
3   - <img alt="Vue logo" src="../assets/logo.png">
4   - <HelloWorld msg="Welcome to Your Vue.js App"/>
5 3 </div>
6 4 </template>
7 5  
8 6 <script>
9   -// @ is an alias to /src
10   -import HelloWorld from '@/components/HelloWorld.vue'
11   -
12 7 export default {
13   - name: 'home',
14   - components: {
15   - HelloWorld
16   - }
  8 + name: 'home'
17 9 }
18 10 </script>
... ...
front-end/h5/src/views/work-manager/form-stat/detail.vue
... ... @@ -8,7 +8,7 @@
8 8 * @Description:
9 9 #!zh: 某个作品的的表单统计页
10 10 #!en: forms for the work
11   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  11 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
12 12 -->
13 13  
14 14 <script>
... ...
front-end/h5/src/views/work-manager/form-stat/index.vue
... ... @@ -5,7 +5,7 @@
5 5 * @LastEditTime : 2019-12-21 19:19:38
6 6 * @FilePath: /luban-h5/front-end/h5/src/views/work-manager/form-stat/index.vue
7 7 * @Github: https://github.com/ly525/luban-h5
8   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  8 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
9 9 * @Description:
10 10 #!zh: [基础数据页面](/work-manager/form-stat) 对应的页面
11 11 #!en: [basic data page](/work-manager/form-stat)
... ...
front-end/h5/src/views/work-manager/index.vue
1 1 <script>
2 2 // import PreView from '@/pages/preview';
3 3 // import Sidebar from './components/sidebar.vue'
4   -import '@/components/core/styles/index.scss'
  4 +import 'core/styles/index.scss'
5 5 import LogoOfHeader from '@/components/common/header/logo.js'
6   -import ExternalLinksOfHeader from '@/components/common/header/links.js'
  6 +import Header from '@/components/common/header/index'
  7 +import Links from '@/components/common/header/links.js'
7 8 import LangSelect from '@/components/common/header/LangSelect.vue'
8 9  
9 10 const sidebarMenus = [
... ... @@ -50,7 +51,7 @@ const sidebarMenus = [
50 51 ]
51 52 },
52 53 {
53   - label: '账号中心',
  54 + label: '商家中心',
54 55 i18nLabel: 'sidebar.accountCenter',
55 56 value: 'freeTemplate',
56 57 antIcon: 'appstore',
... ... @@ -63,59 +64,79 @@ export default {
63 64 // PreView,
64 65 // Sidebar
65 66 LogoOfHeader,
66   - ExternalLinksOfHeader,
  67 + Links,
67 68 LangSelect
68 69 },
69 70 methods: {
70 71 renderSidebar (menus) {
71 72 // const renderLabel = menu => menu.routerName ? <router-link class="default-router-link" to={{ name: menu.routerName }}>{menu.label}</router-link> : menu.label
72   - 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)
  73 + const renderLabel = menu =>
  74 + menu.routerName ? (
  75 + <router-link
  76 + class="default-router-link"
  77 + to={{ name: menu.routerName }}
  78 + >
  79 + {this.$t(menu.i18nLabel)}
  80 + </router-link>
  81 + ) : (
  82 + this.$t(menu.i18nLabel)
  83 + )
73 84  
74   - return menus.map(menu => (
75   - menu.children
76   - ? (
77   - <a-sub-menu key={menu.key}>
78   - {/** <span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span> */}
79   - <span slot="title"><a-icon type={menu.antIcon} />{this.$t(menu.i18nLabel)}</span>
80   - {
81   - (menu.children).map(submenu => (
82   - <a-menu-item key={submenu.key}>{renderLabel(submenu)}</a-menu-item>
83   - ))
84   - }
85   - </a-sub-menu>
86   - )
87   - : (
88   - <a-menu-item key={menu.key}>
89   - <a-icon type={menu.antIcon}></a-icon>
90   - {/** 这边有个疑惑,不知是否为 antd-vue 的 bug,需要用 span 包裹,否则不会显示 label */}
91   - <span>{renderLabel(menu)}</span>
92   - </a-menu-item>
93   - )
94   - ))
  85 + return menus.map(menu =>
  86 + menu.children ? (
  87 + <a-sub-menu key={menu.key}>
  88 + {/** <span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span> */}
  89 + <span slot="title">
  90 + <a-icon type={menu.antIcon} />
  91 + {this.$t(menu.i18nLabel)}
  92 + </span>
  93 + {menu.children.map(submenu => (
  94 + <a-menu-item key={submenu.key}>
  95 + {renderLabel(submenu)}
  96 + </a-menu-item>
  97 + ))}
  98 + </a-sub-menu>
  99 + ) : (
  100 + <a-menu-item key={menu.key}>
  101 + <a-icon type={menu.antIcon}></a-icon>
  102 + {/** 这边有个疑惑,不知是否为 antd-vue 的 bug,需要用 span 包裹,否则不会显示 label */}
  103 + <span>{renderLabel(menu)}</span>
  104 + </a-menu-item>
  105 + )
  106 + )
95 107 }
96 108 },
97 109 render (h) {
98 110 return (
99   - <a-layout id="luban-work-manager-layout" style={{ height: '100vh' }}>
100   - <a-layout-header class="header">
101   - <LogoOfHeader />
102   - <LangSelect style="float: right;cursor: pointer;" />
103   - {/* we can also put the plugins shortcuts here */}
104   - <a-dropdown>
105   - <a-menu slot="overlay" onClick={() => {}}>
  111 + <a-layout style={{ height: '100vh' }}>
  112 + <Header>
  113 + <a-dropdown slot="action-menu" style="margin-right: 12px;">
  114 + <a-menu
  115 + slot="overlay"
  116 + onClick={e => {
  117 + if (!e.key === 3) {
  118 + this.$router.push(`/login`)
  119 + }
  120 + }}
  121 + >
106 122 <a-menu-item key="1">
107 123 <span>someone@luban</span>
108 124 </a-menu-item>
109 125 <a-menu-divider />
110   - <a-menu-item key="2"><a-icon type="setting" />账号设置</a-menu-item>
111   - <a-menu-item key="3"><a-icon type="logout" />退出登录</a-menu-item>
  126 + <a-menu-item key="2">
  127 + <a-icon type="setting" />
  128 + 账号设置
  129 + </a-menu-item>
  130 + <a-menu-item key="3">
  131 + <a-icon type="logout" />
  132 + 退出登录
  133 + </a-menu-item>
112 134 </a-menu>
113 135 <a class="user-avatar-activator" href="#">
114   - <a-icon type="user"/>
  136 + <a-icon type="user" />
115 137 </a>
116 138 </a-dropdown>
117   - <ExternalLinksOfHeader />
118   - </a-layout-header>
  139 + </Header>
119 140 <a-layout>
120 141 <a-layout-sider width="160" style="background: #fff">
121 142 <a-menu
... ... @@ -134,7 +155,8 @@ export default {
134 155 </a-layout>
135 156 </a-layout>
136 157 {/** <PreviewDialog visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} /> */}
137   - </a-layout>)
  158 + </a-layout>
  159 + )
138 160 }
139 161 }
140 162 </script>
... ...
front-end/h5/src/views/work-manager/list.vue
... ... @@ -2,7 +2,7 @@
2 2 import { mapState, mapActions } from 'vuex'
3 3 import QRCode from 'qrcode'
4 4  
5   -import PreviewDialog from '@/components/core/editor/modals/preview.vue'
  5 +import PreviewDialog from 'core/editor/modals/preview.vue'
6 6 import CardCover from '@/components/common/work/card-cover.js'
7 7  
8 8 const ListItemCard = {
... ...
front-end/h5/src/views/work-manager/templates.vue
... ... @@ -2,7 +2,7 @@
2 2 import { mapState, mapActions } from 'vuex'
3 3 import QRCode from 'qrcode'
4 4  
5   -import PreviewDialog from '@/components/core/editor/modals/preview.vue'
  5 +import PreviewDialog from 'core/editor/modals/preview.vue'
6 6 import CardCover from '@/components/common/work/card-cover.js'
7 7  
8 8 const ListItemCard = {
... ...
front-end/h5/vue.config.js
... ... @@ -2,11 +2,11 @@
2 2 * @Author: ly525
3 3 * @Date: 2019-12-14 22:43:55
4 4 * @LastEditors: ly525
5   - * @LastEditTime : 2020-01-15 08:35:17
  5 + * @LastEditTime: 2020-10-10 23:31:21
6 6 * @FilePath: /luban-h5/front-end/h5/vue.config.js
7 7 * @Github: https://github.com/ly525/luban-h5
8 8 * @Description: Do not edit
9   - * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  9 + * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
10 10 */
11 11 const path = require('path')
12 12 // const isProd = process.env.NODE_ENV === 'production'
... ... @@ -38,7 +38,8 @@ switch (process.env.PAGE) {
38 38 const configureWebpack = {
39 39 resolve: {
40 40 alias: {
41   - '@': path.join(__dirname, 'src')
  41 + '@': path.join(__dirname, 'src'),
  42 + 'core': path.join(__dirname, 'src/components/core')
42 43 }
43 44 }
44 45 }
... ... @@ -51,7 +52,7 @@ module.exports = {
51 52 pages: { index: page },
52 53 devServer: {
53 54 proxy: {
54   - '^/upload|content-manager|users-permissions|works|admin|psd-files|workforms|third-libs|engine-assets/': {
  55 + '^/auth|upload|content-manager|users-permissions|works|admin|psd-files|workforms|third-libs|engine-assets/': {
55 56 target,
56 57 changeOrigin: true,
57 58 ws: false
... ...