From af3656ca98a92a0e03ead3cd28d08e8aa199c1b4 Mon Sep 17 00:00:00 2001
From: hebo <hebo163@163.com>
Date: Tue, 2 Sep 2025 22:01:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E8=AF=BE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RichTextContent/RichTextContent.vue       | 174 ++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 src/components/RichTextContent/RichTextContent.vue

diff --git a/src/components/RichTextContent/RichTextContent.vue b/src/components/RichTextContent/RichTextContent.vue
new file mode 100644
index 0000000..443385a
--- /dev/null
+++ b/src/components/RichTextContent/RichTextContent.vue
@@ -0,0 +1,174 @@
+<template>
+  <view class="rich-text-content" v-html="processedContent"></view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { formatRichTextForDisplay } from "@/utils/richText";
+
+interface Props {
+  content: string;
+  fontSize?: string;
+  lineHeight?: string;
+  color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fontSize: "14px",
+  lineHeight: "1.6",
+  color: "#666"
+});
+
+// 处理富文本内容
+const processedContent = computed(() => {
+  return formatRichTextForDisplay(props.content);
+});
+</script>
+
+<style lang="scss" scoped>
+.rich-text-content {
+  font-size: v-bind(fontSize);
+  line-height: v-bind(lineHeight);
+  color: v-bind(color);
+  
+  // 富文本样式
+  :deep(p) {
+    margin: 8px 0;
+    text-align: justify;
+  }
+  
+  // 图片自适应样式
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 10px auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  // 图片容器样式
+  :deep(.image-container) {
+    text-align: center;
+    margin: 15px 0;
+  }
+  
+  :deep(strong) {
+    font-weight: 600;
+    color: #333;
+  }
+  
+  :deep(ol) {
+    margin: 10px 0;
+    padding-left: 20px;
+  }
+  
+  :deep(li) {
+    margin: 5px 0;
+    line-height: 1.5;
+  }
+  
+  :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
+    margin: 15px 0 10px 0;
+    font-weight: 600;
+    color: #333;
+  }
+  
+  // 特殊样式
+  :deep(.highlight) {
+    background-color: #fff3cd;
+    padding: 2px 4px;
+    border-radius: 3px;
+  }
+  
+  // 段落间距
+  :deep(p + p) {
+    margin-top: 12px;
+  }
+  
+  // 列表样式
+  :deep(ol > li) {
+    position: relative;
+    padding-left: 5px;
+  }
+  
+  :deep(ol > li::marker) {
+    font-weight: 600;
+    color: #1890ff;
+  }
+  
+  // 引用样式
+  :deep(blockquote) {
+    margin: 10px 0;
+    padding: 10px 15px;
+    background-color: #f8f9fa;
+    border-left: 4px solid #1890ff;
+    border-radius: 4px;
+  }
+  
+  // 表格样式
+  :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 10px 0;
+  }
+  
+  :deep(th), :deep(td) {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+  
+  :deep(th) {
+    background-color: #f5f5f5;
+    font-weight: 600;
+  }
+  
+  // 代码样式
+  :deep(code) {
+    background-color: #f1f3f4;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+  }
+  
+  :deep(pre) {
+    background-color: #f1f3f4;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+    
+    code {
+      background: none;
+      padding: 0;
+    }
+  }
+}
+
+// 响应式调整
+@media (max-width: 375px) {
+  .rich-text-content {
+    font-size: 13px;
+    
+    :deep(ol) {
+      padding-left: 15px;
+    }
+    
+    :deep(table) {
+      font-size: 12px;
+    }
+    
+    :deep(th), :deep(td) {
+      padding: 6px;
+    }
+    
+    // 小屏幕图片样式优化
+    :deep(img) {
+      margin: 8px auto;
+      border-radius: 6px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+</style>