咨询文章详情静态页完成

src/auto-imports.d.ts

@@ -89,6 +89,7 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const parseHTMLToNodes: typeof import('./utils/richText')['default']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
@@ -105,9 +106,11 @@ declare global {
   const refDefault: typeof import('@vueuse/core')['refDefault']
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const repairRichText: typeof import('./utils/richText')['repairRichText']
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const sanitizeRichTextImages: typeof import('./utils/richText')['sanitizeRichTextImages']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
@@ -424,6 +427,7 @@ declare module 'vue' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly sanitizeRichTextImages: UnwrapRef<typeof import('./utils/richText')['sanitizeRichTextImages']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>

src/pages.json

@@ -18,6 +18,10 @@
       "path": "pages/me/index",
       "type": "page"
     },
+    {
+      "path": "pages/pet-manual/article",
+      "type": "page"
+    },
     {
       "path": "pages/pet-manual/index",
       "type": "page"

src/pages/pet-manual/article.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import ToolApi from '@/utils'
+import { sanitizeRichTextImages } from '@/utils/richText'
+
+const safeHeight = ToolApi.getSafeHeight()
+const titleName: Ref<string> = ref<string>('趣味科普')
+const mixedContent = `
+<div class="article">
+  <!-- 标题 -->
+  <h1 style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">探索大自然的奇妙</h1>
+  <a href="http://www.baidu.com" >链接：https://example.com</a>
+  <!-- 发布日期和地点 -->
+  <p style="font-size: 14px; color: #999; margin-bottom: 20px;">
+    发布日期：2023年10月10日 | 地点：云南
+  </p>
+  
+  <video
+        class="video-player min-h-80 max-w-full"
+        src="https://test-cos-1308655658.cos.ap-shanghai.myqcloud.com/bright-intro-video.mp4"
+        autoplay
+        loop
+        muted
+        controls
+        objectFit="fill"
+      />
+
+  <!-- 段落文字 -->
+  <p style="font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 20px;">
+    大自然充满了无尽的奇妙和美丽。从高耸的山脉到广阔的海洋，每一个角落都蕴藏着无数的秘密等待我们去探索。
+  </p>
+  
+  <!-- 图片1 -->
+  <img 
+    src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fGNhbXxlbnwwfHx8fDE2ODQwNzY0NzA&ixlib=rb-1.2.1&q=80&w=1080" 
+    style="width: 100%; height: auto; display: block; margin-bottom: 20px;"
+    alt="自然风光1"
+    data-preview="true"
+  />
+  
+  <!-- 段落文字 -->
+  <p style="font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 20px;">
+    在这次旅程中，我们将带您领略大自然的壮丽景色，感受清新的空气和宁静的氛围。
+  </p>
+  
+  <!-- 图片2 -->
+  <img 
+    src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fGNhbXxlbnwwfHx8fDE2ODQwNzY0NzA&ixlib=rb-1.2.1&q=80&w=1080" 
+    style="width: 100%; height: auto; display: block; margin-bottom: 20px;"
+    alt="自然风光2"
+    data-preview="true"
+  />
+  
+  <!-- 段落文字 -->
+  <p style="font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 20px;">
+    无论是徒步旅行还是静坐冥想，大自然都能为您提供一个完美的放松场所。
+  </p>
+  
+  <!-- 图片3 -->
+  <img 
+    src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fGNhbXxlbnwwfHx8fDE2ODQwNzY0NzA&ixlib=rb-1.2.1&q=80&w=1080" 
+    style="width: 100%; height: auto; display: block;"
+    alt="自然风光3"
+    data-preview="true"
+  />
+</div>
+`
+const content = sanitizeRichTextImages(mixedContent)
+</script>
+
+<template>
+  <TitleBar :title-name="titleName" />
+  <view class="w-full bg-[#F5F6F7] overflow-auto p-4 pb-0" :style="`height:calc(100vh - ${safeHeight}px)`">
+    <rich-text :nodes="content" class="w-full h-full" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/uni-pages.d.ts

@@ -7,6 +7,7 @@ interface NavigateToOptions {
   url: "/pages/feed-plan/index" |
        "/pages/home/index" |
        "/pages/me/index" |
+       "/pages/pet-manual/article" |
        "/pages/pet-manual/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}

src/utils/richText.ts

@@ -0,0 +1,26 @@
+
+
+function sanitizeRichTextImages(html: string): string {
+  let newContent = html.replace(/<img[^>]*>/gi, (match: string): string => {
+    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
+    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
+    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
+    match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '')
+    return match
+  })
+
+  newContent = newContent.replace(/style="[^"]+"/gi, (match: string): string => {
+    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;')
+    return match
+  })
+
+  newContent = newContent.replace(/<br[^>]*\/>/gi, '')
+
+  newContent = newContent.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"')
+
+  return newContent
+}
+
+export {
+  sanitizeRichTextImages,
+}