feat(plugin) support modify background image or color

ly525
1 parent a073fad4
Showing 5 changed files with 21 additions and 4 deletions
front-end/h5/src/components/core/editor/edit-panel/background.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/models/page.js
front-end/h5/src/components/core/models/work.js
front-end/h5/src/components/plugins/lbp-background.js
+import propsEditPanel from './props.js'
+
+export default {
+  extends: propsEditPanel
+}
@@ -11,6 +11,7 @@ import RenderPropsEditor from &#39;./edit-panel/props&#39;
 import RenderScriptEditor from './edit-panel/script'
 import RenderAnimationEditor from './edit-panel/animation'
 import RenderActoionEditor from './edit-panel/action'
+import RenderBackgroundEditor from './edit-panel/background'
 import RenderShortcutsPanel from './shortcuts-panel/index'
 import PreviewDialog from './modals/preview.vue'
@@ -297,7 +298,13 @@ export default {
             <a-tabs
               style="height: 100%;"
               tabBarGutter={10}
-              onChange={activeTabKey => { this.activeTabKey = activeTabKey }}
+              onChange={activeTabKey => {
+                this.activeTabKey = activeTabKey
+                if (activeTabKey === 'background') {
+                  const bgElement = this.elements.find(e => e.name === 'lbp-background')
+                  this.setEditingElement(bgElement)
+                }
+              }}
             >
               {/*
                 #!zh tab 标题：
@@ -309,6 +316,7 @@ export default {
               <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
               <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActoionEditor/> }</a-tab-pane>
               <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
+              <a-tab-pane label="背景" key='background' tab={this.$t('editor.editPanel.tab.background')}><RenderBackgroundEditor/></a-tab-pane>
             </a-tabs>
           </a-layout-sider>
 import Element from '../models/element'
+import LbpBackground from '../../plugins/lbp-background'
 class Page {
   constructor (page = {}) {
     this.uuid = +new Date()
-    this.elements = page.elements || []
+    this.elements = page.elements || [new Element(LbpBackground)]
   }
   clone () {
+import Page from './page.js'
+
 class Work {
   constructor (work = {}) {
     this.title = work.title || '标题'
     this.description = work.description || '描述'
-    this.pages = work.pages || [{ elements: [] }]
+    this.pages = work.pages || [new Page()]
     // this.id = this.id
     // TODO 用id 并不是一个好办法，有心人会得知整个系统中共有多少作品等额外信息，尽量防止信息泄漏
@@ -34,7 +34,8 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: 'transparent'
+      // TODO 为什么 transparent 无效？
+      default: '#ffffff'
     }
   },
   editorConfig: {