feat(uniapp): 新增辅助空白/辅助线/富文本楼层渲染

pages/tabbar/home/template/tpl_blank.vue

@@ -0,0 +1,15 @@
+<template>
+  <view class="tpl-blank" :style="blankStyle"></view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const blankStyle = computed(() => ({
+  background: props.res?.bgColor || "#f5f5f5",
+  height: `${props.res?.height ?? 10}rpx`,
+  margin: `0 ${props.res?.paddingX ?? 0}rpx ${props.res?.pageGap ?? 10}rpx`,
+}));
+</script>

pages/tabbar/home/template/tpl_line.vue

@@ -0,0 +1,21 @@
+<template>
+  <view class="tpl-line" :style="wrapperStyle">
+    <view :style="lineStyle"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const wrapperStyle = computed(() => ({
+  background: props.res?.bgColor || "#FFFFFF",
+  padding: `0 ${props.res?.paddingX ?? 0}rpx`,
+  marginBottom: `${props.res?.pageGap ?? 10}rpx`,
+}));
+
+const lineStyle = computed(() => ({
+  borderTop: `${props.res?.lineHeight ?? 1}rpx ${props.res?.lineStyle || "dashed"} ${props.res?.lineColor || "#979797"}`,
+}));
+</script>

pages/tabbar/home/template/tpl_rich_text.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="tpl-rich-text" :style="wrapperStyle">
+    <rich-text :nodes="processedHtml"></rich-text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const wrapperStyle = computed(() => ({
+  background: props.res?.bgColor || "#FFFFFF",
+  padding: `0 ${props.res?.paddingX ?? 12}rpx`,
+  marginBottom: `${props.res?.pageGap ?? 10}rpx`,
+  borderRadius: `${props.res?.borderRadius ?? 0}rpx`,
+  overflow: "hidden",
+}));
+
+// 防止富文本内图片超宽撑破布局
+const processedHtml = computed(() => {
+  const html = props.res?.content;
+  if (!html) return "";
+  return String(html).replace(/<img/gi, '<img style="max-width:100%;height:auto;"');
+});
+</script>