chore: 更新右侧属性面板样式

ly525
1 parent 66a2a740
Showing 3 changed files with 40 additions and 32 deletions
front-end/h5/src/components/core/editor/right-panel/index.js
front-end/h5/src/components/core/editor/right-panel/props.js
front-end/h5/src/components/core/editor/right-panel/work-mode.vue
@@ -25,7 +25,12 @@ export default {
   },
   render (h) {
     return (
-      <a-layout-sider width={this.width} data-set-width={this.width} theme='light' style={{ background: '#fff', padding: '0 12px 0 12px' }}>
+      <a-layout-sider
+        width={this.width}
+        data-set-width={this.width}
+        theme='light'
+        style={{ background: '#fff', padding: '0 6px 0 6px' }}
+      >
         <a-tabs
           style="height: 100%;"
           tabBarGutter={10}
@@ -42,7 +42,8 @@ export default {
   },
   methods: {
     ...mapActions('editor', [
-      'setEditingElement', 'setElementPosition'
+      'setEditingElement',
+      'setElementPosition'
     ]),
     loadCustomEditorForPlugin () {
       this.loadCustomEditorFlag = false
@@ -184,37 +185,39 @@ export default {
               {/* margin、padding编辑 */}
               <BoxModelEditor />
             </a-collapse-panel>
-          </a-collapse>
-          <a-form
-            ref="form"
-            size="mini"
-            class="props-config-form"
-            layout={this.layout}
-          >
+            <a-collapse-panel key="2" header="属性设置">
+              <a-form
+                ref="form"
+                size="mini"
+                class="props-config-form"
+                layout={this.layout}
+              >
-            {
-              // plugin-custom-editor
-              this.loadCustomEditorFlag &&
-              h(this.customEditorName, {
-                props: {
-                  elementProps: editingElement.pluginProps
+                {
+                  // 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
-                })
-                .map(([propKey, propConfig]) => this.renderPropFormItem(h, { propKey, propConfig }))
-            }
-          </a-form>
-        </div>
+                {
+                  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>
+            </a-collapse-panel>
+          </a-collapse>
+          </div>
       )
     },
     renderWorkGlobalPropsPanel (h) {
@@ -10,7 +10,7 @@
  -->
 <template>
   <a-form :layout="formLayout">
-    <a-form-item label="H5类型">
+    <a-form-item style="margin: 0;">
       <a-radio-group v-model="pageMode" size="small">
         <a-radio-button v-for="(value, key) in PAGE_MODE" :key="key" :value="value">
           {{PAGE_MODE_LABEL[key]}}