feat: add rich text help article editor

user-app/src/api/app.ts

@@ -87,6 +87,7 @@ export interface MessagePageCopy {
 
 export interface HelpArticleDetailData {
   article: HelpArticleSummary & {
+    content_html: string;
     content_blocks: string[];
   };
   related_articles: HelpArticleSummary[];

user-app/src/mocks/app.ts

@@ -558,6 +558,8 @@ export const helpArticleDetailFallback: HelpArticleDetailData = {
     keywords: ["实物鉴定", "中检鉴定", "服务区别"],
     updated_at: "2026-04-21 09:00:00",
     is_recommended: true,
+    content_html:
+      "<p>实物鉴定和中检鉴定都会经过下单、填写信息、上传资料、寄送商品、鉴定和查看报告这几个核心步骤。</p><p>两者最大的区别在于出具机构不同。实物鉴定由安心验提供标准实物鉴定服务；中检鉴定由更高规格合作机构提供服务，适合对机构资质有更高要求的场景。</p><p>中检鉴定通常价格更高、时效也会略长一些。下单前建议先根据您的使用场景、预算和时效要求选择合适服务。</p>",
     content_blocks: [
       "实物鉴定和中检鉴定都会经过下单、填写信息、上传资料、寄送商品、鉴定和查看报告这几个核心步骤。",
       "两者最大的区别在于出具机构不同。实物鉴定由安心验提供标准实物鉴定服务；中检鉴定由更高规格合作机构提供服务，适合对机构资质有更高要求的场景。",

user-app/src/pages/help/detail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { appApi, type HelpArticleDetailData } from "../../api/app";
 import { helpArticleDetailFallback } from "../../mocks/app";
@@ -10,6 +10,7 @@ const articleId = ref(0);
 const loading = ref(false);
 const pageReady = ref(false);
 const loadError = ref("");
+const articleContentHtml = computed(() => detail.value.article.content_html?.trim() || "");
 
 function openArticle(id: number) {
   uni.redirectTo({ url: `/pages/help/detail?id=${id}` });
@@ -71,14 +72,17 @@ onLoad(async (options) => {
 
     <view class="section section-card section-card--soft">
       <view class="section__title">详细说明</view>
-      <view
-        v-for="(item, index) in detail.article.content_blocks"
-        :key="`${detail.article.id}-${index}`"
-        class="report-meta__row report-meta__row--stacked"
-      >
-        <text class="report-meta__label">{{ index + 1 }}.</text>
-        <text class="report-meta__value">{{ item }}</text>
-      </view>
+      <rich-text v-if="articleContentHtml" class="article-rich-text" :nodes="articleContentHtml" />
+      <template v-else>
+        <view
+          v-for="(item, index) in detail.article.content_blocks"
+          :key="`${detail.article.id}-${index}`"
+          class="report-meta__row report-meta__row--stacked"
+        >
+          <text class="report-meta__label">{{ index + 1 }}.</text>
+          <text class="report-meta__value">{{ item }}</text>
+        </view>
+      </template>
     </view>
 
     <view v-if="detail.related_articles.length" class="section">
@@ -118,3 +122,65 @@ onLoad(async (options) => {
     </template>
   </view>
 </template>
+
+<style scoped>
+.article-rich-text {
+  display: block;
+  color: var(--color-body);
+  font-size: var(--font-size-sm);
+  line-height: 1.8;
+}
+
+.article-rich-text :deep(p),
+.article-rich-text :deep(h2),
+.article-rich-text :deep(h3),
+.article-rich-text :deep(h4),
+.article-rich-text :deep(blockquote),
+.article-rich-text :deep(ul),
+.article-rich-text :deep(ol) {
+  margin: 0 0 20rpx;
+}
+
+.article-rich-text :deep(h2) {
+  color: var(--color-heading);
+  font-size: var(--font-size-xl);
+  line-height: 1.45;
+}
+
+.article-rich-text :deep(h3),
+.article-rich-text :deep(h4) {
+  color: var(--color-heading);
+  font-size: var(--font-size-lg);
+  line-height: 1.5;
+}
+
+.article-rich-text :deep(ul),
+.article-rich-text :deep(ol) {
+  padding-left: 36rpx;
+}
+
+.article-rich-text :deep(li) {
+  margin-bottom: 10rpx;
+}
+
+.article-rich-text :deep(blockquote) {
+  padding: 18rpx 20rpx;
+  border-left: 6rpx solid var(--color-accent);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  background: var(--color-brand-ivory);
+  color: var(--color-muted);
+}
+
+.article-rich-text :deep(a) {
+  color: var(--color-brand-gold-deep);
+  text-decoration: underline;
+}
+
+.article-rich-text :deep(img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 20rpx 0;
+  border-radius: var(--radius-md);
+}
+</style>