Commit d8238705054d4c6a174d5e2a48ecc11bd1f16a30
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
front-end/h5/src/components/common/header/LangSelect.vue
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
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
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
front-end/h5/src/components/core/models/page.js
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 'echarts/lib/component/legend' |
| 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
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
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
front-end/h5/src/components/core/support/excel.js
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
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 'vue' |
| 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
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
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
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 | ... | ... |