Merge branch 'master' of http://119.29.194.155:8894/zwq/zhxy-jzd

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>