feat(manager): 新增富文本装修组件

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>

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,
 };

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
+    }
   }
 ];

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,
 };

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>