From 951bdf523f1119344f752df8798168a53d5e3306 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Mon, 17 Aug 2026 10:40:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AF=8C=E6=96=87=E6=9C=AC=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tickets/components/ProductDetail.vue      | 21 ++++++++++++++++++-
 .../tickets/view-contract.test.mjs            | 18 ++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/pages-service/tickets/components/ProductDetail.vue b/src/pages-service/tickets/components/ProductDetail.vue
index 139761a..6a05c3e 100644
--- a/src/pages-service/tickets/components/ProductDetail.vue
+++ b/src/pages-service/tickets/components/ProductDetail.vue
@@ -35,7 +35,15 @@
         :class="section === detailSections[detailSections.length - 1] ? 'mb-[20px]' : ''"
       >
         <text class="block text-[16px] font-semibold text-slate-800">{{ section.title }}</text>
-        <text class="mt-[10px] block whitespace-pre-wrap text-[14px] leading-[22px] text-slate-600">{{ section.content }}</text>
+        <view class="mt-[10px] text-[14px] leading-[22px] text-slate-600">
+          <MpHtml
+            :content="section.content || ''"
+            :preview-img="false"
+            :show-img-menu="false"
+            :set-title="false"
+            :tag-style="detailContentTagStyle"
+          />
+        </view>
       </view>
     </scroll-view>
 
@@ -55,6 +63,7 @@
 
 <script setup>
 import { computed } from "vue";
+import MpHtml from "@/uni_modules/zero-markdown-view/components/mp-html/mp-html.vue";
 import TicketMediaSwiper from "./TicketMediaSwiper.vue";
 
 const props = defineProps({
@@ -62,6 +71,16 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["buy"]);
+const detailContentTagStyle = {
+  p: "margin: 8px 0; line-height: 1.7; color: #475569; word-break: break-word;",
+  img: "max-width: 100%; height: auto; display: block; margin: 10px auto;",
+  ul: "margin: 8px 0; padding-left: 20px; color: #475569;",
+  ol: "margin: 8px 0; padding-left: 20px; color: #475569;",
+  li: "margin: 4px 0; line-height: 1.7; color: #475569;",
+  blockquote:
+    "margin: 10px 0; padding: 8px 12px; border-left: 3px solid #cbd5e1; background-color: #f8fafc; color: #64748b;",
+  strong: "font-weight: 700; color: #334155;",
+};
 const productImages = computed(() => [
   ...new Set(
     [
diff --git a/src/pages-service/tickets/view-contract.test.mjs b/src/pages-service/tickets/view-contract.test.mjs
index b9d7f7f..c2d741f 100644
--- a/src/pages-service/tickets/view-contract.test.mjs
+++ b/src/pages-service/tickets/view-contract.test.mjs
@@ -239,6 +239,24 @@ test("product detail is an independent prototype-aligned page", async () => {
   assert.match(component, /section\.sectionCode/);
   assert.match(component, /section\.title/);
   assert.match(component, /section\.content/);
+  assert.match(
+    component,
+    /import MpHtml from "@\/uni_modules\/zero-markdown-view\/components\/mp-html\/mp-html\.vue"/
+  );
+  assert.match(component, /<MpHtml/);
+  assert.match(component, /:content="section\.content \|\| ''"/);
+  assert.match(component, /:preview-img="false"/);
+  assert.match(component, /:show-img-menu="false"/);
+  assert.match(component, /:set-title="false"/);
+  assert.match(component, /:tag-style="detailContentTagStyle"/);
+  assert.match(
+    component,
+    /img:\s*"[^"]*max-width:\s*100%[^"]*height:\s*auto/
+  );
+  assert.doesNotMatch(
+    component,
+    /<text[^>]*>\{\{\s*section\.content\s*\}\}<\/text>/
+  );
   assert.match(
     component,
     /sort\(\s*\(left, right\) => Number\(left\.sortOrder/