From 7a1ae5d5da5b8eccf45532fa5494b67c1be2eb6a Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 12 Oct 2026 10:16:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(manager):=20=E6=96=B0=E5=A2=9E=E5=AF=8C?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=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/PanelRichText.vue        | 62 +++++++++++++++++++
 .../page-decoration/wap/config-panel/index.js |  2 +
 .../src/views/page-decoration/wap/config.js   | 13 ++++
 .../page-decoration/wap/template/index.js     |  2 +
 .../wap/template/tpl_rich_text.vue            | 32 ++++++++++
 5 files changed, 111 insertions(+)
 create mode 100644 manager/src/views/page-decoration/wap/config-panel/PanelRichText.vue
 create mode 100644 manager/src/views/page-decoration/wap/template/tpl_rich_text.vue

diff --git a/manager/src/views/page-decoration/wap/config-panel/PanelRichText.vue b/manager/src/views/page-decoration/wap/config-panel/PanelRichText.vue
new file mode 100644
index 000000000..f51115b25
--- /dev/null
+++ b/manager/src/views/page-decoration/wap/config-panel/PanelRichText.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="panel-rich-text">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="内容" name="content">
+        <editor v-model="res.options.content" height="300px" />
+      </el-tab-pane>
+      <el-tab-pane label="样式" name="style">
+        <color-field
+          v-model="res.options.bgColor"
+          label="背景颜色"
+          :default-value="defaults.bgColor"
+        />
+        <slider-field
+          v-model="res.options.paddingX"
+          label="左右边距"
+          :min="0"
+          :max="100"
+        />
+        <slider-field
+          v-model="res.options.pageGap"
+          label="页面间距"
+          :min="0"
+          :max="100"
+        />
+        <slider-field
+          v-model="res.options.borderRadius"
+          label="背景圆角"
+          :min="0"
+          :max="30"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import editor from "@/components/editor";
+import ColorField from "../controls/ColorField.vue";
+import SliderField from "../controls/SliderField.vue";
+
+const DEFAULTS = {
+  content: "",
+  bgColor: "#FFFFFF",
+  paddingX: 12,
+  pageGap: 10,
+  borderRadius: 0,
+};
+
+export default {
+  name: "PanelRichText",
+  components: { editor, ColorField, SliderField },
+  props: {
+    res: { type: Object, required: true },
+  },
+  data() {
+    return { defaults: DEFAULTS, activeTab: "content" };
+  },
+  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 65c39aa93..ff6defd19 100644
--- a/manager/src/views/page-decoration/wap/config-panel/index.js
+++ b/manager/src/views/page-decoration/wap/config-panel/index.js
@@ -2,8 +2,10 @@
 // 面板契约：props res（整个楼层条目），直接修改 res.options.*，保存链路自动感知
 import PanelBlank from "./PanelBlank.vue";
 import PanelLine from "./PanelLine.vue";
+import PanelRichText from "./PanelRichText.vue";
 
 export default {
   blank: PanelBlank,
   line: PanelLine,
+  richText: PanelRichText,
 };
diff --git a/manager/src/views/page-decoration/wap/config.js b/manager/src/views/page-decoration/wap/config.js
index 239f639df..27ed81f3f 100644
--- a/manager/src/views/page-decoration/wap/config.js
+++ b/manager/src/views/page-decoration/wap/config.js
@@ -716,5 +716,18 @@ export const modelData = [
       paddingX: 0,
       pageGap: 10
     }
+  },
+  {
+    type: "richText",
+    name: "富文本",
+    group: "tools",
+    img: "md-image",
+    options: {
+      content: "",
+      bgColor: "#FFFFFF",
+      paddingX: 12,
+      pageGap: 10,
+      borderRadius: 0
+    }
   }
 ];
diff --git a/manager/src/views/page-decoration/wap/template/index.js b/manager/src/views/page-decoration/wap/template/index.js
index ae05a376e..d780a0446 100644
--- a/manager/src/views/page-decoration/wap/template/index.js
+++ b/manager/src/views/page-decoration/wap/template/index.js
@@ -25,6 +25,7 @@ import tpl_notice from "./tpl_notice";
 import tpl_promotions from "./tpl_promotions";
 import tpl_blank from "./tpl_blank";
 import tpl_line from "./tpl_line";
+import tpl_rich_text from "./tpl_rich_text";
 
 export default {
   notice: tpl_notice,
@@ -54,4 +55,5 @@ export default {
   tpl_activity_list,
   blank: tpl_blank,
   line: tpl_line,
+  richText: tpl_rich_text,
 };
diff --git a/manager/src/views/page-decoration/wap/template/tpl_rich_text.vue b/manager/src/views/page-decoration/wap/template/tpl_rich_text.vue
new file mode 100644
index 000000000..1be5d5617
--- /dev/null
+++ b/manager/src/views/page-decoration/wap/template/tpl_rich_text.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="tpl-rich-text"
+    :style="{
+      background: res.bgColor,
+      padding: `0 ${res.paddingX}px`,
+      marginBottom: res.pageGap + 'px',
+      borderRadius: res.borderRadius + 'px',
+      overflow: 'hidden',
+    }"
+  >
+    <div class="rich-content" v-html="res.content"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tpl_rich_text",
+  props: {
+    res: { type: Object, default: () => ({}) },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.rich-content {
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+  }
+}
+</style>