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

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="panel-line">
+    <color-field
+      v-model="res.options.bgColor"
+      label="背景颜色"
+      :default-value="defaults.bgColor"
+    />
+    <color-field
+      v-model="res.options.lineColor"
+      label="线条颜色"
+      :default-value="defaults.lineColor"
+    />
+    <segment-field
+      v-model="res.options.lineStyle"
+      label="线条样式"
+      :options="lineStyleOptions"
+    />
+    <slider-field
+      v-model="res.options.lineHeight"
+      label="线条高度"
+      :min="1"
+      :max="100"
+    />
+    <slider-field
+      v-model="res.options.paddingX"
+      label="左右边距"
+      :min="0"
+      :max="100"
+    />
+    <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";
+import SegmentField from "../controls/SegmentField.vue";
+
+const DEFAULTS = {
+  bgColor: "#FFFFFF",
+  lineColor: "#979797",
+  lineStyle: "dashed",
+  lineHeight: 1,
+  paddingX: 0,
+  pageGap: 10,
+};
+
+export default {
+  name: "PanelLine",
+  components: { ColorField, SliderField, SegmentField },
+  props: {
+    res: { type: Object, required: true },
+  },
+  data() {
+    return {
+      defaults: DEFAULTS,
+      lineStyleOptions: [
+        { label: "虚线", value: "dashed" },
+        { label: "实线", value: "solid" },
+        { label: "点状线", value: "dotted" },
+      ],
+    };
+  },
+  created() {
+    this.res.options = Object.assign({}, DEFAULTS, this.res.options);
+  },
+};
+</script>

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

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

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

@@ -702,5 +702,19 @@ export const modelData = [
       paddingX: 0,
       pageGap: 10
     }
+  },
+  {
+    type: "line",
+    name: "辅助线",
+    group: "tools",
+    img: "md-image",
+    options: {
+      bgColor: "#FFFFFF",
+      lineColor: "#979797",
+      lineStyle: "dashed",
+      lineHeight: 1,
+      paddingX: 0,
+      pageGap: 10
+    }
   }
 ];

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

@@ -24,6 +24,7 @@ import tpl_goods from "./tpl_goods";
 import tpl_notice from "./tpl_notice";
 import tpl_promotions from "./tpl_promotions";
 import tpl_blank from "./tpl_blank";
+import tpl_line from "./tpl_line";
 
 export default {
   notice: tpl_notice,
@@ -52,4 +53,5 @@ export default {
   promotions: tpl_promotions,
   tpl_activity_list,
   blank: tpl_blank,
+  line: tpl_line,
 };

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

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="tpl-line"
+    :style="{
+      background: res.bgColor,
+      padding: `0 ${res.paddingX}px`,
+      marginBottom: res.pageGap + 'px',
+    }"
+  >
+    <div
+      :style="{
+        borderTop: `${res.lineHeight}px ${res.lineStyle} ${res.lineColor}`,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tpl_line",
+  props: {
+    res: { type: Object, default: () => ({}) },
+  },
+};
+</script>