From 2bbec5b9e5a1309be2f9b30f8134cfff6e7d0b09 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 12 Oct 2026 10:15:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(manager):=20=E6=96=B0=E5=A2=9E=E8=BE=85?=
 =?UTF-8?q?=E5=8A=A9=E7=BA=BF=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wap/config-panel/PanelLine.vue            | 73 +++++++++++++++++++
 .../page-decoration/wap/config-panel/index.js |  2 +
 .../src/views/page-decoration/wap/config.js   | 14 ++++
 .../page-decoration/wap/template/index.js     |  2 +
 .../page-decoration/wap/template/tpl_line.vue | 25 +++++++
 5 files changed, 116 insertions(+)
 create mode 100644 manager/src/views/page-decoration/wap/config-panel/PanelLine.vue
 create mode 100644 manager/src/views/page-decoration/wap/template/tpl_line.vue

diff --git a/manager/src/views/page-decoration/wap/config-panel/PanelLine.vue b/manager/src/views/page-decoration/wap/config-panel/PanelLine.vue
new file mode 100644
index 000000000..0214a02f7
--- /dev/null
+++ b/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>
diff --git a/manager/src/views/page-decoration/wap/config-panel/index.js b/manager/src/views/page-decoration/wap/config-panel/index.js
index 805736eb8..65c39aa93 100644
--- a/manager/src/views/page-decoration/wap/config-panel/index.js
+++ b/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,
 };
diff --git a/manager/src/views/page-decoration/wap/config.js b/manager/src/views/page-decoration/wap/config.js
index e4510bf66..239f639df 100644
--- a/manager/src/views/page-decoration/wap/config.js
+++ b/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
+    }
   }
 ];
diff --git a/manager/src/views/page-decoration/wap/template/index.js b/manager/src/views/page-decoration/wap/template/index.js
index 522954f0d..ae05a376e 100644
--- a/manager/src/views/page-decoration/wap/template/index.js
+++ b/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,
 };
diff --git a/manager/src/views/page-decoration/wap/template/tpl_line.vue b/manager/src/views/page-decoration/wap/template/tpl_line.vue
new file mode 100644
index 000000000..1851f6845
--- /dev/null
+++ b/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>