chore: patch for guanwanxiao:syq/box-model

ly525
1 parent ce9774a6
Showing 5 changed files with 105 additions and 78 deletions
front-end/h5/src/components/core/editor/right-panel/background.js
front-end/h5/src/components/core/editor/right-panel/box-model/index.vue
front-end/h5/src/components/core/editor/right-panel/box-model/position-checkbox.vue
front-end/h5/src/components/core/editor/right-panel/props.js
front-end/h5/src/components/core/models/element.js
@@ -27,7 +27,11 @@ export default {
     const bgEle = this.editingPage.elements.find(e => e.name === 'lbp-background')
     return (
       <div>
-        <RenderWorkMode />
+        <a-collapse expand-icon-position="right">
+          <a-collapse-panel key="1" header="H5模式">
+            <RenderWorkMode />
+          </a-collapse-panel>
+        </a-collapse>
         <PropsEditPanel
           layout="vertical"
           realEditingElement={bgEle}
@@ -20,18 +20,19 @@
       <PositionCheckbox label="右" label-key="right" />
     </div>
     <PositionCheckbox label="下" label-key="bottom" />
-    <template v-if="isEditingBorder">
-      <div> 设置border-color </div>
+    <div v-if="isEditingBorder" style="margin: 20px;">
+      <span> 设置border-color </span>
       <el-color-picker size="small" :value="borderColor" @change="onColorChange"/>
-    </template>
+    </div>
   </div>
 </template>
 <script>
+  // 盒子模型编辑器
   import { mapState, mapActions } from 'vuex'
   import PositionCheckbox from './position-checkbox'
   export default {
-    name: 'BoxModel',
+    name: 'BoxModelEditor',
     components: {
       PositionCheckbox
     },
@@ -79,6 +80,10 @@
         // 取出 commonStyle.border,并更改 border.color.value 的值
         const boxModelPartStyle = this.editingElement.commonStyle[boxModelPart]
          Object.assign(boxModelPartStyle.color, { value: color })
+         // TODO 收归style至commonStyle，而非pluginProps
+         if (boxModelPart === 'border') {
+           this.editingElement.pluginProps.borderColor = color
+         }
          this.setElementPosition({ [boxModelPart]: boxModelPartStyle })
       }
     }
@@ -86,21 +91,27 @@
 </script>
 <style lang='less' scoped>
+.box-model {
+  margin: 8px 0;
+  border-top: 1px dashed #eee;
+  border-bottom: 1px dashed #eee;
+}
 .inline-block{
   display:inline-block;
   text-align: center;
 }
 .common{
   .inline-block();
-  background-color:rgb(15, 14, 14);
+  background-color:#52527e;
   &-select{
-    background-color: rgb(170, 170, 95);
+    background-color: #fedd9b;
   }
 }
 .middle{
-  margin:20px 0;
+  margin:12px 0;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .margin{
   width:150px;
@@ -124,6 +135,7 @@
   .common()
 }
 .content{
+  border: 1px solid #fff;
   background-color: rgb(82, 82, 126);
   width:80%;
   .inline-block()
@@ -3,15 +3,15 @@
     <!-- 只有选中 padding border margin 之后才会显示 -->
     <template v-if="boxModelPart">
       <div class="flex">
-        <a-checkbox @change="onCheckboxChange" :checked="isChecked">
+        <a-checkbox @change="onCheckboxChange" :checked="isChecked" size="small">
         </a-checkbox>
         <div class="label">{{label}}</div>
       </div>
     </template>
     <template v-if="boxModelPart && isChecked">
-      <a-input-number style="width:70px" :value="value" :min="0" @change="onInputNumberChange" />
-      <a-select :value="unit" style="width:70px" @change="onUnitChange">
+      <a-input-number style="width:70px" :value="value" :min="0" @change="onInputNumberChange" size="small" />
+      <a-select :value="unit" style="width:70px" @change="onUnitChange" size="small" >
         <a-select-option v-for="(item,index) in unitList" :key="index" :value="item">
           {{ item }}
         </a-select-option>
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
-import BoxModel from './box-model'
+import BoxModelEditor from './box-model'
 import { getVM, getComponentsForPropsEditor } from '@/utils/element'
 import 'core/styles/props-config-panel.scss'
 export default {
   name: 'RightPanelProps',
   components: {
-    BoxModel
+    BoxModelEditor
   },
   data: () => ({
     loadCustomEditorFlag: false,
     editorPositionConfig: [
-      { type: 'a-input', label: 'top', key: 'top' },
-      { type: 'a-input', label: 'left', key: 'left' },
-      { type: 'a-input', label: 'width', key: 'width' },
-      { type: 'a-input', label: 'height', key: 'height' }
+      { type: 'a-input-number', label: '上', key: 'top' },
+      { type: 'a-input-number', label: '左', key: 'left' },
+      { type: 'a-input-number', label: '宽', key: 'width' },
+      { type: 'a-input-number', label: '高', key: 'height' }
     ]
   }),
   props: {
@@ -129,7 +129,7 @@ export default {
      * 设置当前编辑元素的位置,通过 key 值(width,height,left,top)来控制更新相应的位置
      * 在显示层已经通过 this.stateEditingElement 来控制是否选中编辑组件了
      */
-    onPositionChange (value, key) {
+    onPositionChange (key, value) {
       this.setElementPosition({
         [key]: Number(value)
       })
@@ -140,74 +140,81 @@ export default {
     renderEditorPositionConfig (h) {
       const _this = this
       const commonStyle = this.editingElement.commonStyle
-      return this.editorPositionConfig.map(item => {
-        const { type, label, key } = item
-        const data = {
-          props: {
-            placeholder: `请输入${key}`
-          },
-          domProps: {
-            value: commonStyle[key]
-          },
-          on: {
-            change (e) {
-              let value
-              switch (type) {
-                case 'a-input':
-                  value = e.target.value
-                  break
+      return <a-form layout="inline">
+        {
+          this.editorPositionConfig.map(item => {
+            const { type, label, key } = item
+            console.log(key, commonStyle)
+            const data = {
+              props: {
+                value: commonStyle[key],
+                placeholder: `请输入${key}`,
+                formatter: value => `${label} ${value}`,
+                size: 'small'
+              },
+              on: {
+                change (e) {
+                  const value = e.target ? e.target.value : e
+                  _this.onPositionChange(key, value)
+                }
               }
-              _this.onPositionChange(value, key)
             }
-          }
+            return (
+              <a-form-item>
+                {
+                  h(type, data)
+                }
+              </a-form-item>
+            )
+          })
         }
-        return (
-          <a-form-item label={label} label-col={ { span: 6 } } wrapperCol={{ span: 16 }}>
-            {
-              h(type, data)
-            }
-          </a-form-item>
-        )
-      })
+      </a-form>
     },
     renderPropsEditorPanel (h, editingElement) {
       const vm = getVM(editingElement.name)
       const props = vm.$options.props
       return (
-        <a-form
-          ref="form"
-          size="mini"
-          class="props-config-form"
-          layout={this.layout}
-        >
-          {/* left,top,width,height编辑 只有在选中编辑组件的时候显示 */}
+        <div>
+          <a-collapse bordered={true} expand-icon-position="right">
+            <a-collapse-panel key="1" header="通用样式">
+              {/* left,top,width,height编辑 只有在选中编辑组件的时候显示 */}
+                {
+                  this.stateEditingElement ? this.renderEditorPositionConfig(h) : ''
+                }
+              {/* margin、padding编辑 */}
+              <BoxModelEditor />
+            </a-collapse-panel>
+          </a-collapse>
+          <a-form
+            ref="form"
+            size="mini"
+            class="props-config-form"
+            layout={this.layout}
+          >
+
             {
-              this.stateEditingElement ? this.renderEditorPositionConfig(h) : ''
-            }
-          {/* margin、padding编辑 */}
-          <BoxModel />
-          {
-            // plugin-custom-editor
-            this.loadCustomEditorFlag &&
-            h(this.customEditorName, {
-              props: {
-                elementProps: editingElement.pluginProps
-              }
-            })
-          }
-          {
-            Object
-              .entries(props)
-              .filter(([propKey, propConfig]) => {
-                // 1. 如果开发者给 某个prop 显式指定了 visible 属性，则取开发者指定的值；
-                // 2. 否则取默认值：true，即默认在属性面板显示该属性
-                // 3. 组件的某些属性是不需要显示在 配置编辑器的，比如：editorMode(编辑模式/预览模式)，因为这个是鲁班编辑器默认注入到每个组件的，无须显示出来
-                const isVisible = propConfig.hasOwnProperty('visible') ? propConfig.visible : true
-                return isVisible && propConfig.editor && !propConfig.editor.custom
+              // plugin-custom-editor
+              this.loadCustomEditorFlag &&
+              h(this.customEditorName, {
+                props: {
+                  elementProps: editingElement.pluginProps
+                }
               })
-              .map(([propKey, propConfig]) => this.renderPropFormItem(h, { propKey, propConfig }))
-          }
-        </a-form>
+            }
+            {
+              Object
+                .entries(props)
+                .filter(([propKey, propConfig]) => {
+                  // 1. 如果开发者给 某个prop 显式指定了 visible 属性，则取开发者指定的值；
+                  // 2. 否则取默认值：true，即默认在属性面板显示该属性
+                  // 3. 组件的某些属性是不需要显示在 配置编辑器的，比如：editorMode(编辑模式/预览模式)，因为这个是鲁班编辑器默认注入到每个组件的，无须显示出来
+                  const isVisible = propConfig.hasOwnProperty('visible') ? propConfig.visible : true
+                  return isVisible && propConfig.editor && !propConfig.editor.custom
+                })
+                .map(([propKey, propConfig]) => this.renderPropFormItem(h, { propKey, propConfig }))
+            }
+          </a-form>
+        </div>
       )
     },
     renderWorkGlobalPropsPanel (h) {
@@ -101,7 +101,7 @@ class Element {
   getCommonStyle (ele) {
     if (typeof ele.commonStyle === 'object') {
-      return cloneObj(ele.commonStyle)
+      return cloneObj({ ...defaultStyle, ...ele.commonStyle })
     }
     return {
       ...defaultStyle,
@@ -167,7 +167,11 @@ class Element {
     const commonStyle = this.commonStyle
     const { margin, padding } = commonStyle
     // 由于在 defaultStyle 定义的时候是对象，这里需要将数据重新组装成 margin-top 这种形式
-    const boxModel = { ...this.packPosData(margin, 'margin'), ...this.packPosData(padding, 'padding'), ...this.packBorderData() }
+    const boxModel = {
+      ...this.packPosData(margin, 'margin'),
+      ...this.packPosData(padding, 'padding'),
+      ...this.packBorderData()
+    }
     let style = {
       top: parsePx(pluginProps.top || commonStyle.top, isRem),
       left: parsePx(pluginProps.left || commonStyle.left, isRem),