feat(manager): 新增辅助空白装修组件

manager/src/views/page-decoration/wap/config-panel/PanelBlank.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="panel-blank">
+    <color-field
+      v-model="res.options.bgColor"
+      label="背景颜色"
+      :default-value="defaults.bgColor"
+    />
+    <slider-field
+      v-model="res.options.height"
+      label="空白高度"
+      :min="1"
+      :max="100"
+    />
+    <slider-field
+      v-model="res.options.paddingX"
+      label="左右边距"
+      :min="0"
+      :max="30"
+    />
+    <slider-field
+      v-model="res.options.pageGap"
+      label="页面间距"
+      :min="0"
+      :max="100"
+    />
+  </div>
+</template>
+
+<script>
+import ColorField from "../controls/ColorField.vue";
+import SliderField from "../controls/SliderField.vue";
+
+const DEFAULTS = {
+  bgColor: "#f5f5f5",
+  height: 10,
+  paddingX: 0,
+  pageGap: 10,
+};
+
+export default {
+  name: "PanelBlank",
+  components: { ColorField, SliderField },
+  props: {
+    res: { type: Object, required: true },
+  },
+  data() {
+    return { defaults: DEFAULTS };
+  },
+  created() {
+    this.res.options = Object.assign({}, DEFAULTS, this.res.options);
+  },
+};
+</script>

manager/src/views/page-decoration/wap/config-panel/index.js

@@ -1,3 +1,7 @@
 // 新组件配置面板映射：type → 面板组件
 // 面板契约：props res（整个楼层条目），直接修改 res.options.*，保存链路自动感知
-export default {};
+import PanelBlank from "./PanelBlank.vue";
+
+export default {
+  blank: PanelBlank,
+};

manager/src/views/page-decoration/wap/config.js

@@ -690,5 +690,17 @@ export const modelData = [
         },
       ],
     }
+  },
+  {
+    type: "blank",
+    name: "辅助空白",
+    group: "tools",
+    img: "md-image",
+    options: {
+      bgColor: "#f5f5f5",
+      height: 10,
+      paddingX: 0,
+      pageGap: 10
+    }
   }
 ];

manager/src/views/page-decoration/wap/template/index.js

@@ -23,6 +23,7 @@ import tpl_video from "./tpl_video";
 import tpl_goods from "./tpl_goods";
 import tpl_notice from "./tpl_notice";
 import tpl_promotions from "./tpl_promotions";
+import tpl_blank from "./tpl_blank";
 
 export default {
   notice: tpl_notice,
@@ -50,4 +51,5 @@ export default {
   tpl_ad_list,
   promotions: tpl_promotions,
   tpl_activity_list,
+  blank: tpl_blank,
 };

manager/src/views/page-decoration/wap/template/tpl_blank.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="tpl-blank"
+    :style="{
+      background: res.bgColor,
+      height: res.height + 'px',
+      margin: `0 ${res.paddingX}px ${res.pageGap}px`,
+    }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: "tpl_blank",
+  props: {
+    res: { type: Object, default: () => ({}) },
+  },
+};
+</script>